本文收錄將持續更新,由于本人技術出身,正在學習設計中,會逐步更新優化的,希望對想學設計的有所幫助,特別和本人一樣技術出身的。
首先推薦非常好用的UI設計神器:Sketch
另外送上Sketch最新破解版V3.8.3,已體驗,與官方Sketch操作體驗無差。傳送門
教程
Sketchtips:sketch使用技巧的博客
23個FACEBOOK PAPER中的設計細節:facebook paper其中的一些設計細節,可以參考學習
Naldzgraphics:國外一個設計教程網站
Heydesigner:用戶體驗博客
Tutorial9:設計文章與教程
極客學院Sketch:該教程都是一些操作以及介紹,可以了解一下;
Design+Code:這本電子書本人買了,總共6本,囊括設計和編程,設計主要使用Sketch軟件,編程使用Swift語言,總體來說本書不錯。
SketchDesign:Meng To的sketch視頻學習教程,收費課程。
Medium Sketch App:有關APP設計的sketch操作教程網站。
Google Design:google關于設計的一些講解。
設計社區
UI中國:專業界面交互設計平臺
花瓣:陪你做生活的設計師
優設:優秀網頁設計聯盟
站酷:設計師互動平臺
Dribbble:世界著名設計工作細節分享聚合
牛大拿:最貼心的設計導航
Behance:全球的很高人氣的作品展示性社區
Fondcool:UI設計|APPUI|UI設計分享平臺
Canva:一個在線設計制作平臺
Codepen:交互設計靈感庫
UI Parade:國外優秀細節設計聚合
Deviantart:藝術家和藝術愛好者的國際網絡社區
Thenextweb:國際交互技術新聞、商業文化
92pixels:平面設計和攝影的靈感
500px:世界上最好的設計攝影圖片
Pttrns:設計資源
365psd:免費的矢量圖和PSD文件資源網站
圖靈社區:圖靈社區sketch中文手冊
云瑞設計:UI設計與體驗博客
Sketch中國:sketch的中文教程網站
Sketch中文網:國內一個非常好的sketch中文社區
SketchTricks:sketch教程與資源
SketchActive:sketch矢量圖標下載
SketchCasts:sketch視頻教程
SketchAppSources:sketch資源下載
Sketchrepo:sketch資源(國外平臺)
SketchIM:sketch資源(國內平臺)
工具以及插件
因為從事移動互聯網領域的工作,主要涉及UI方面的設計,所以目前推薦的是UI設計神器Sketch的工具以及插件。
Flinto:導入sketch文件,制作UI交互。
Principle:制作交互動畫的軟件,收費軟件。
Zeplin:最終的設計人員和開發人員之間的協作工具,自動生成樣式指南和資源。
Sketch Mirror:實時預覽你的設計原型。
Sketch Toolbox:下載和安裝sketch插件的神器
Sketch插件大集合:強力推薦的一些sketch非常實用的插件
Sketch-plugins:sketch插件推薦列表
Sketch常用插件:
- Clolor Swatches插件:輸入顏色值,自動生成色板,方便整套UI色系的取色;
- Content Generator Sketch Plugin插件:做 Mock up 的時候就再也無需操心占位內容,它可以自動隨機填充男性、女性或者自然風光的圖片;
- Rename It插件:幫助你批量的修改圖層名稱,快捷鍵 control + command + R;
- Sketch Measure插件:超級智能的幫你在作品上添加圖形尺寸、距離、顏色和文本屬性的附注,方便快捷,而且成品整潔漂亮;
- Sketch Notebook插件:給你的設計添加注釋,介紹設計理念,完美;
- Dynamic buttons插件:不管按鈕內的文本有多長,這個小插件都能讓文本和按鈕保持固定的 padding;
- Fluid for Sketch插件:提供了創建更多基于約束的、反應靈敏的設計手段。它基于自動布局約束;
- Sketch Palettes插件:可以自己載入和加載顏色到顏色選擇器;
- Magic Mirror:圖像轉移工具,很有意思的一個插件,不過是收費的。
注:以上插件可在Sketch Toolbox
搜索直接下載,也可以點開鏈接下載。
擴展
配色與字體
Material Design:提供配色服務的一個web網站,方便快捷地選出整套配色方案。
Flat UI:提供一些顏色值供選擇,做你UI的主顏色配置。
UI Gradients:可以獲取非常漂亮的混合色。
Color and Typography:蘋果官方有關于顏色和文字排版的文檔。
Typekit:Adobe的字體庫。
Google Fonts:google的字體庫。
fonts.com:非常出名的一個字體網站,你可以很好的應用于你的項目。
PRACTICAL TYPOGRAPHY:博主:matthew butterick,一系列有關字體的博客,詳細地講解了字體的方方面面,介紹字體、字體的使用原則等等。
SkyFonts:Mac字體庫自動同步的一個工具。
Icons
PixelLove:1100個iOStab bar和toolbar的icon。有收費的和免費的。
Streamline:4000個矢量的icons。
Ionicons:github上開放出來的一系列原生iOS的icons。
Material icons:google的icon,可下載
Font Awesome:這個網站廣泛應用于Web和mobile,你可以使用它就像使用字體一樣。
IconJar:icons管理的一個Mac APP,可以高效地管理你的icons。
UI Sounds
Octave:48個好的聲音文件,但是這可以作為你選擇好聲音的美好開端。
Freesound:有大量的聲音可供搜索,別忘了搜索一下。
Sonics:可獲取免費的UI sounds供你的APP使用
Dev Tones:為APP定做的一些具有特殊性的聲音。
書籍
以下推薦的這些書籍主要是為了了解設計思想以及靈感,而非具體的設計操作教程
- 《簡約至上》
- 《認知與設計》
- 《Designing Interactions》
- 《定位》
- 《About Face3交互設計精髓》
- 《Becoming Steve Jobs: The Evolution of a Reckless Upstart into a Visionary Leader》
- 《Steve Jobs》
- 《Jony Ive: The Genius Behind Apple's Greatest Products》
- 《Dieter Rams: As Little Design as Possible》
- 《Elon Musk: Tesla, SpaceX, and the Quest for a Fantastic Future》
- 《Outliers: The Story of Success》
設計師博客
Peter Nowell Design:國外一個優秀的獨立設計師,顧客包括Apple,Flinto,Juice Shop,Sprightly Books.Medium上的鏈接。
Ivo Mynttinen:該網站主旨是“Better design,
better experiences.”,設計web和手機UI設計,dribbble個人擁有3k+的followers。
design principles:偉大工業設計師Dieter Rams有關好的設計的見解。
其他
如果想了解交互有關內容的話可以看下網易公開課里面IXDC
舉辦的一些有關交互主題演講的視頻。
facebook設計資源:有iOS9 GUI、Origami、Facebook Design on Medium等資源。
iOS Human Interface Guidelines:ios人體交互指南,涉及iOS設計的基本準則以及蘋果公司提倡的一些設計細節。
更新說明
V1(2016.01.12)
1、教程增加SketchDesign
、Medium Sketch App
、Google Design
2、工具以及插件增加Flinto
、Principle
、Zeplin
、Sketch Mirror
、Sketch-plugins
3、插件增加Magic Mirror
插件
4、擴展增加配色與字體
、Icons
、UI Sounds
、設計師博客
四大模塊
5、書籍增加Becoming Steve Jobs
、Steve Jobs
、Jony Ive
、Dieter Rams
、Elon Musk
、Outliers
6、其他增加Facebook設計資源
、Sketch操作快捷鍵
、iOS Human Interface Guidelines