本文收錄將持續(xù)更新练湿,由于本人技術(shù)出身,正在學(xué)習(xí)設(shè)計(jì)中审轮,會(huì)逐步更新優(yōu)化的肥哎,希望對(duì)想學(xué)設(shè)計(jì)的有所幫助,特別和本人一樣技術(shù)出身的疾渣。
首先推薦非常好用的UI設(shè)計(jì)神器:Sketch
另外送上Sketch最新破解版V3.8.3篡诽,已體驗(yàn),與官方Sketch操作體驗(yàn)無差榴捡。傳送門
教程
Sketchtips:sketch使用技巧的博客
23個(gè)FACEBOOK PAPER中的設(shè)計(jì)細(xì)節(jié):facebook paper其中的一些設(shè)計(jì)細(xì)節(jié)杈女,可以參考學(xué)習(xí)
Naldzgraphics:國(guó)外一個(gè)設(shè)計(jì)教程網(wǎng)站
Heydesigner:用戶體驗(yàn)博客
Tutorial9:設(shè)計(jì)文章與教程
極客學(xué)院Sketch:該教程都是一些操作以及介紹,可以了解一下;
Design+Code:這本電子書本人買了达椰,總共6本翰蠢,囊括設(shè)計(jì)和編程,設(shè)計(jì)主要使用Sketch軟件啰劲,編程使用Swift語言梁沧,總體來說本書不錯(cuò)。
SketchDesign:Meng To的sketch視頻學(xué)習(xí)教程蝇裤,收費(fèi)課程廷支。
Medium Sketch App:有關(guān)APP設(shè)計(jì)的sketch操作教程網(wǎng)站。
Google Design:google關(guān)于設(shè)計(jì)的一些講解栓辜。
設(shè)計(jì)社區(qū)
UI中國(guó):專業(yè)界面交互設(shè)計(jì)平臺(tái)
花瓣:陪你做生活的設(shè)計(jì)師
優(yōu)設(shè):優(yōu)秀網(wǎng)頁設(shè)計(jì)聯(lián)盟
站酷:設(shè)計(jì)師互動(dòng)平臺(tái)
Dribbble:世界著名設(shè)計(jì)工作細(xì)節(jié)分享聚合
牛大拿:最貼心的設(shè)計(jì)導(dǎo)航
Behance:全球的很高人氣的作品展示性社區(qū)
Fondcool:UI設(shè)計(jì)|APPUI|UI設(shè)計(jì)分享平臺(tái)
Canva:一個(gè)在線設(shè)計(jì)制作平臺(tái)
Codepen:交互設(shè)計(jì)靈感庫
UI Parade:國(guó)外優(yōu)秀細(xì)節(jié)設(shè)計(jì)聚合
Deviantart:藝術(shù)家和藝術(shù)愛好者的國(guó)際網(wǎng)絡(luò)社區(qū)
Thenextweb:國(guó)際交互技術(shù)新聞恋拍、商業(yè)文化
92pixels:平面設(shè)計(jì)和攝影的靈感
500px:世界上最好的設(shè)計(jì)攝影圖片
Pttrns:設(shè)計(jì)資源
365psd:免費(fèi)的矢量圖和PSD文件資源網(wǎng)站
圖靈社區(qū):圖靈社區(qū)sketch中文手冊(cè)
云瑞設(shè)計(jì):UI設(shè)計(jì)與體驗(yàn)博客
Sketch中國(guó):sketch的中文教程網(wǎng)站
Sketch中文網(wǎng):國(guó)內(nèi)一個(gè)非常好的sketch中文社區(qū)
SketchTricks:sketch教程與資源
SketchActive:sketch矢量圖標(biāo)下載
SketchCasts:sketch視頻教程
SketchAppSources:sketch資源下載
Sketchrepo:sketch資源(國(guó)外平臺(tái))
SketchIM:sketch資源(國(guó)內(nèi)平臺(tái))
工具以及插件
因?yàn)閺氖乱苿?dòng)互聯(lián)網(wǎng)領(lǐng)域的工作,主要涉及UI方面的設(shè)計(jì)藕甩,所以目前推薦的是UI設(shè)計(jì)神器Sketch的工具以及插件芝囤。
Flinto:導(dǎo)入sketch文件,制作UI交互辛萍。
Principle:制作交互動(dòng)畫的軟件悯姊,收費(fèi)軟件。
Zeplin:最終的設(shè)計(jì)人員和開發(fā)人員之間的協(xié)作工具,自動(dòng)生成樣式指南和資源贩毕。
Sketch Mirror:實(shí)時(shí)預(yù)覽你的設(shè)計(jì)原型悯许。
Sketch Toolbox:下載和安裝sketch插件的神器
Sketch插件大集合:強(qiáng)力推薦的一些sketch非常實(shí)用的插件
Sketch-plugins:sketch插件推薦列表
Sketch常用插件:
- Clolor Swatches插件:輸入顏色值,自動(dòng)生成色板辉阶,方便整套UI色系的取色先壕;
- Content Generator Sketch Plugin插件:做 Mock up 的時(shí)候就再也無需操心占位內(nèi)容,它可以自動(dòng)隨機(jī)填充男性谆甜、女性或者自然風(fēng)光的圖片垃僚;
- Rename It插件:幫助你批量的修改圖層名稱,快捷鍵 control + command + R规辱;
- Sketch Measure插件:超級(jí)智能的幫你在作品上添加圖形尺寸谆棺、距離、顏色和文本屬性的附注罕袋,方便快捷改淑,而且成品整潔漂亮;
- Sketch Notebook插件:給你的設(shè)計(jì)添加注釋浴讯,介紹設(shè)計(jì)理念朵夏,完美;
- Dynamic buttons插件:不管按鈕內(nèi)的文本有多長(zhǎng)榆纽,這個(gè)小插件都能讓文本和按鈕保持固定的 padding仰猖;
- Fluid for Sketch插件:提供了創(chuàng)建更多基于約束的捏肢、反應(yīng)靈敏的設(shè)計(jì)手段。它基于自動(dòng)布局約束饥侵;
- Sketch Palettes插件:可以自己載入和加載顏色到顏色選擇器鸵赫;
- Magic Mirror:圖像轉(zhuǎn)移工具,很有意思的一個(gè)插件爆捞,不過是收費(fèi)的奉瘤。
注:以上插件可在Sketch Toolbox
搜索直接下載勾拉,也可以點(diǎn)開鏈接下載煮甥。
擴(kuò)展
配色與字體
Material Design:提供配色服務(wù)的一個(gè)web網(wǎng)站,方便快捷地選出整套配色方案藕赞。
Flat UI:提供一些顏色值供選擇成肘,做你UI的主顏色配置。
UI Gradients:可以獲取非常漂亮的混合色斧蜕。
Color and Typography:蘋果官方有關(guān)于顏色和文字排版的文檔双霍。
Typekit:Adobe的字體庫。
Google Fonts:google的字體庫批销。
fonts.com:非常出名的一個(gè)字體網(wǎng)站洒闸,你可以很好的應(yīng)用于你的項(xiàng)目。
PRACTICAL TYPOGRAPHY:博主:matthew butterick,一系列有關(guān)字體的博客均芽,詳細(xì)地講解了字體的方方面面丘逸,介紹字體、字體的使用原則等等掀宋。
SkyFonts:Mac字體庫自動(dòng)同步的一個(gè)工具深纲。
Icons
PixelLove:1100個(gè)iOStab bar和toolbar的icon。有收費(fèi)的和免費(fèi)的劲妙。
Streamline:4000個(gè)矢量的icons湃鹊。
Ionicons:github上開放出來的一系列原生iOS的icons。
Material icons:google的icon镣奋,可下載
Font Awesome:這個(gè)網(wǎng)站廣泛應(yīng)用于Web和mobile币呵,你可以使用它就像使用字體一樣。
IconJar:icons管理的一個(gè)Mac APP侨颈,可以高效地管理你的icons富雅。
UI Sounds
Octave:48個(gè)好的聲音文件,但是這可以作為你選擇好聲音的美好開端肛搬。
Freesound:有大量的聲音可供搜索没佑,別忘了搜索一下。
Sonics:可獲取免費(fèi)的UI sounds供你的APP使用
Dev Tones:為APP定做的一些具有特殊性的聲音温赔。
書籍
以下推薦的這些書籍主要是為了了解設(shè)計(jì)思想以及靈感蛤奢,而非具體的設(shè)計(jì)操作教程
- 《簡(jiǎn)約至上》
- 《認(rèn)知與設(shè)計(jì)》
- 《Designing Interactions》
- 《定位》
- 《About Face3交互設(shè)計(jì)精髓》
- 《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》
設(shè)計(jì)師博客
Peter Nowell Design:國(guó)外一個(gè)優(yōu)秀的獨(dú)立設(shè)計(jì)師,顧客包括Apple,Flinto,Juice Shop,Sprightly Books.Medium上的鏈接。
Ivo Mynttinen:該網(wǎng)站主旨是“Better design,
better experiences.”,設(shè)計(jì)web和手機(jī)UI設(shè)計(jì)啤贩,dribbble個(gè)人擁有3k+的followers待秃。
design principles:偉大工業(yè)設(shè)計(jì)師Dieter Rams有關(guān)好的設(shè)計(jì)的見解。
其他
如果想了解交互有關(guān)內(nèi)容的話可以看下網(wǎng)易公開課里面IXDC
舉辦的一些有關(guān)交互主題演講的視頻痹屹。
facebook設(shè)計(jì)資源:有iOS9 GUI章郁、Origami、Facebook Design on Medium等資源志衍。
iOS Human Interface Guidelines:ios人體交互指南暖庄,涉及iOS設(shè)計(jì)的基本準(zhǔn)則以及蘋果公司提倡的一些設(shè)計(jì)細(xì)節(jié)。
更新說明
V1(2016.01.12)
1楼肪、教程增加SketchDesign
培廓、Medium Sketch App
、Google Design
2春叫、工具以及插件增加Flinto
肩钠、Principle
、Zeplin
暂殖、Sketch Mirror
价匠、Sketch-plugins
3、插件增加Magic Mirror
插件
4呛每、擴(kuò)展增加配色與字體
踩窖、Icons
、UI Sounds
莉给、設(shè)計(jì)師博客
四大模塊
5毙石、書籍增加Becoming Steve Jobs
、Steve Jobs
颓遏、Jony Ive
徐矩、Dieter Rams
、Elon Musk
叁幢、Outliers
6滤灯、其他增加Facebook設(shè)計(jì)資源
、Sketch操作快捷鍵
曼玩、iOS Human Interface Guidelines