├── LICENSE └── README.md /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 David Chen 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 设计资源 Design Resources 2 | ================ 3 | 4 | A collection of UI/UX design resources. 5 | 6 | ## 设计模式 | Design Patterns 7 | 8 | ### 界面设计模式 | UI Design Patterns 9 | 10 | 1. [Pattrns](http://www.pttrns.com/)，按模式提供优秀应用的截图。主要为 iPhone, iPad 和 iOS7 三大类。 11 | 2. [Mobile Patterns](http://www.mobile-patterns.com/)，移动设计模式。包括 iPhone 和 Android。 12 | 3. [Lovely UI](http://www.lovelyui.com/)。一个移动 UI 设计元素的集合。 13 | 4. [Zurb University Pattern TAP](http://patterntap.com/) Zurb 出品。 14 | 5. [Inspired UI](http://inspired-ui.com/)包括 iPhone, iPad 和 Android。 15 | 6. [设计模式 - Web 端](http://ui-patterns.com/patterns)：主要为 Web 端的设计模式。 16 | 7. [Android 设计模式](http://www.android-app-patterns.com/) 17 | 18 | ### 动效设计模式 | Motion Design Patterns 19 | 20 | 1. [动效体验](http://www.michaelvillar.com/motion) 21 | 2. [Capptivate](http://capptivate.co/)。最全的动效模式。 22 | 23 | ## iOS 设计 | iOS Design 24 | 25 | ### 指南 | Guidelines 26 | 27 | 1. [iOS 人机交互指南官方英文原版](https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/)，点此查看[中文版](http://)。 28 | 2. [非官方的 iOS 设计指南（英文原版）](http://iosdesign.ivomynttinen.com/)，点此可查看[中文版](http://www.cocoachina.com/design/20141117/10233.html)。此版本非常具体全面，值得一读。 29 | 3. [Apple Watch 人机交互指南（官方英文原版）](https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/WatchHumanInterfaceGuidelines/index.html) 30 | 4. [iOS 设计指南](https://developer.apple.com/design/) 31 | 32 | ### UI 模板 | UI Kit 33 | 34 | #### 系统 | OS 35 | 36 | 1. [iOS8 Illustrator Vector UI Kit](http://mercury.io/blog/ios-8-illustrator-vector-ui-kit-update?ref=hackingui) 37 | 2. [iOS8 UI Kit For SKetch](https://github.com/rafaelconde/ios8-ui-kit) 38 | 39 | 40 | #### 设备 | Devices 41 | 42 | 1. [iPhone6 Plus Template[PSD]](https://dribbble.com/shots/1731346-Free-iPhone-6-PLUS-5-5-inch-Templates-PSD) 43 | 2. [iPhone6 PSD Mockup](http://www.graphicsoulz.com/premium-item/iphone-6-psd-mockup-freebie/) 44 | 3. [iPhon6 PSD Mockup （带场景图）](https://dribbble.com/shots/1736601-6-Photorealistic-iPhone-6-mockups?list=users) 45 | 4. [iPhone6 Plus PSD Vector Mockup （矢量）](https://dribbble.com/shots/1719600-iPhone-6-Plus-Psd-Vector-Mockup?list=searches&tag=iphone_6&offset=14) 46 | 5. [Apple 官方产品图片下载](https://developer.apple.com/app-store/marketing/guidelines/#images) 47 | 6. [iPhone6 Template [PSD]](https://dribbble.com/shots/1722076-Free-4.iPhone-6-4-7-inch-Template-PSD) 48 | 7. [设备模板](http://www.sketchappsources.com/category/device.html) 49 | 50 | 51 | #### Apple Watch 52 | 53 | 1. [Apple Watch UI Kit](https://dribbble.com/shots/1735649-Apple-Watch-GUI-PSD) 54 | 2. [Apple Watch .sketch File](https://dribbble.com/shots/1720013-Apple-WATCH) 55 | 3. [Uber Watch](https://dribbble.com/shots/1723575-Uber-Watch-Freebie) 56 | 57 | #### 框线图模板 | Wireframe Mockup 58 | 59 | 60 | 61 | 62 | 63 | ## Android Material 设计 | Android Design 64 | 65 | 1. [Material Design 官方英文版](http://www.google.com/design/spec/material-design/introduction.html#)，中文版[点击此处](http://design.1sters.com/) 66 | 2. [Material Up](http://www.materialup.com/) 67 | 3. [Material Design Spec - Color](http://www.google.com/design/spec/style/color.html) 68 | 4. [http://material.cmiscm.com/](http://material.cmiscm.com/)：一些有趣的 Demo 69 | 70 | ### 指南 | Guidelines 71 | 72 | ## 音效资源 | UI Sounds 73 | 1. [http://raisedbeaches.com/octave/ 74 | ](http://raisedbeaches.com/octave/)：免费的界面音效库 75 | 2. [http://www.freesound.org/](http://www.freesound.org/) 76 | 3. [https://soundkit.io/](https://soundkit.io/) 77 | 4. [http://rcptones.com/dev_tones/](http://rcptones.com/dev_tones/) 78 | 79 | ## 技巧练习 | Skills 80 | 81 | ### 设计的技巧 82 | 83 | 1. [http://bezier.method.ac/](http://bezier.method.ac/)：一个教你掌握钢笔工具的游戏 84 | 2. [http://cubic-bezier.com/](http://cubic-bezier.com/)贝塞尔曲线值 85 | 86 | 87 | ## Framerjs 资源 88 | 1. [http://framerco.de/](http://framerco.de/) 一个关于 Framerjs 的组件，代码的集合地 89 | 2. [http://prototyp.in/](http://prototyp.in/) 在浏览器中利用 js 创建原型 90 | 3. [http://www.prototypingwithframer.com/](http://www.prototypingwithframer.com/) 每周都会有小贴士以及教程，帮助你更好的创建原型 91 | 4. [http://www.stakelon.com/2015/03/40-examples-of-how-to-design-with-code-using-framer/](http://www.stakelon.com/2015/03/40-examples-of-how-to-design-with-code-using-framer/) 40个如何通过Framer用编程的方式设计的案例 92 | 93 | 94 | 95 | --------------------------------------------------------------------------------