術與道：移動應用UI設計必修課

術之篇
01基礎知識
1.1什麼是UI設計／20
1.1.1UI的相關概念／20
1.1.2UI的學習方法／22
1.2什麼是App／25
1.2.1App的概念／25
1.2.2App的開發流程／25
1.3智能手機的屏幕／26
1.3.1英寸（Inch）／27
1.3.2像素（Pixel）／27
1.3.3分辨率（Resolution）／28
1.4網點密度與像素密度／28
1.4.1網點密度（DPI）／28
1.4.2像素密度（PPI）／29
1.4.3DPI與PPI／29
1.4.4邏輯分辨率與像素倍率／30
1.4.5視網膜屏幕／30
1.5常見手機屏幕規格／31
1.5.1熱門手機規格／31
1.5.2熱門手機分辨率／33
1.6iPhone6Plus的屏幕／34
1.7智能手機的傳感器／37
1.7.1攝像頭／37
1.7.2麥克風／38
1.7.3GPS／38
1.7.4電子羅盤／39
1.7.5重力感應器／39
1.7.6加速度傳感器／40
1.7.7光線傳感器／41
1.7.8距離傳感器／41
1.7.9氣壓傳感器／42
1.7.10三軸陀螺儀／43
02設計風格
2.1風格／46
2.1.1什麼是設計風格／46
2.1.2如何確立設計風格／47
2.2顏色／50
2.2.1認識色彩／50
2.2.2RGB與HSB／50
2.2.3顏色搭配基礎／52
2.3如何選擇顏色／53
2.3.1常見App的顏色／53
2.3.2顏色的性格／55
2.4字體／61
2.4.1襯線體和無襯線體／61
2.4.2系統內置字體／62
2.4.3什麼時候選擇內嵌字體／62
2.4.4如何使用內嵌字體／63
03圖標與圖片
3.1App圖標特點／66
3.1.1獨特的圖形／66
3.1.2表意准確／67
3.1.3謹慎用色／67
3.1.4避免使用大量文字／68
3.1.5避免使用照片／68
3.1.6適應不同場景／69
3.2App圖標設計流程／69
3.2.1第一步：尋找隱喻／69
3.2.2第二步：抽象圖形／70
3.2.3第三步：競品分析／71
3.2.4第四步：確定風格／71
3.2.5第五步：調整細節／72
3.2.6第六步：場景測試／73
3.3App圖標設計方法／74
3.3.1正負形組合／74
3.3.2折疊圖形／75
3.3.3局部提取／75
3.3.4線性圖標／75
3.3.5透明漸變／76
3.3.6色塊拼接／76
3.3.7圖形復用／76
3.3.8背景組合／77
3.4iOS圖標規范／77
3.4.1iOS圖標適配／77
3.4.2iOS圖標標准／78
3.5Android圖標規范／79
3.5.1Android圖標適配／79
3.5.2圖標的視覺統一／80
3.5.3Android圖標標准／81
3.6設計線性圖標／83
3.6.1線性圖標的風格／83
3.6.2線性圖標的繪制方法／84
3.7像素對齊／87
3.7.1像素為什麼要對齊／87
3.7.2像素如何對齊／88
3.7.3像素縮放的對齊／89
3.7.4像素對齊的微調／89
3.8圖片的使用／89
3.8.1矢量圖與位圖／89
3.8.2圖片的格式／90
3.8.3圖片的使用／91
3.8.4圖片的存儲／92
3.8.5圖片的比例／92
04iOS系統界面
4.1欄／94
4.1.1狀態欄／94
4.1.2導航欄／94
4.1.3標簽欄／95
4.1.4工具欄／96
4.2內容視圖／97
4.2.1表格視圖／97
4.2.2文本視圖／99
4.2.3Web視圖／99
4.3臨時視圖／100
4.3.1對話框／100
4.3.2操作列表／100
05Android系統界面
5.1導航機制／102
5.1.1硬件特性／102
5.1.2iOS導航機制／102
5.1.3Android導航機制／103
5.2界面布局／105
5.2.1結構差異／105
5.2.2操作欄／106
5.2.3多任務／107
5.3消息推送／108
5.3.1推送方式／108
5.3.2通知方式／109
5.4操作方式／110
5.4.1編輯／110
5.4.2選擇／111
5.4.3復制粘貼／112
5.4.4刪除／113
5.5Android系統的插件／114
5.5.1桌面插件／114
5.5.2設計趨勢／114
道之篇
06建立規范
6.1組建規范／116
6.1.1設計規范的目的／116
6.1.2規范的組成／116
6.2顏色規范／119
6.2.1為什麼選擇HSB／119
6.2.2創建調色板／120
6.2.3調色板應用／121
6.3文字規范／123
6.3.1iOS系統／123
6.3.2Android系統／123
6.3.3系統字號／123
6.4布局／125
6.4.1框架／125
6.4.2頂部導航欄／126
6.4.3頂部標簽欄／126
6.4.4底部標簽欄／127
6.5圖片規范／127
6.5.1用戶頭像／127
6.5.2商品圖片／129
6.5.3無數據圖片／129
07設計組件
7.1控制元素／132
7.1.1活動指示器／132
7.1.2進度指示器／132
7.1.3頁碼控制器／134
7.1.4刷新控件／134
7.1.5滑動器／137
7.1.6開關／137
7.1.7步進器／137
7.2篩選器／138
7.2.1選擇器／138
7.2.2日期時間選擇器／138
7.2.3分段控件／139
7.2.4選項卡／139
7.2.5排序／140
7.2.6地區選擇／140
7.3表單控件／141
7.3.1單選框／141
7.3.2復選框／142
7.3.3文本框／142
7.3.4下拉框／143
7.3.5表格／144
7.4按鈕規范／144
7.4.1背景+文字／144
7.4.2背景+圖標／145
7.4.3圖標+文字／146
7.4.4文字／146
7.5其他組件／147
7.5.1加載更多／147
7.5.2非模態浮層／147
7.5.3模態浮層／148
08導航設計
8.1扁平導航／150
8.1.1標簽導航／150
8.1.2舵式導航／151
8.1.3宮格式導航／152
8.2內容主導式導航／153
8.2.1陳列式導航／153
8.2.2旋轉木馬式導航／154
8.3列表式導航／155
8.3.1列表式／155
8.3.2抽屜式／156
8.4其他導航／157
8.4.1點聚式導航／157
8.4.2瀑布式導航／158
09界面設計
9.1首頁／160
9.1.1搜索欄／160
9.1.2標簽欄／161
9.1.3卡片式設計／161
9.1.4樓層設計／162
9.2列表頁／163
9.2.1消息列表／163
9.2.2橫向卡片／163
9.2.3瀑布流／164
9.3詳情頁／165
9.3.1全局按鈕／165
9.3.2快速通道／166
9.4個人中心167
9.4.1頭像區域／167
9.4.2個人信息／168
9.4.3功能模塊／169
9.5啟動頁／170
9.5.1品牌宣傳類／170
9.5.2首頁樣式類／171
9.5.3情感故事類／172
9.5.4節日氛圍類／173
9.6引導頁／173
9.6.1功能介紹類／173
9.6.2使用說明類／176
9.6.3情感故事類／177
10設計適配
10.1iOS系統適配／180
10.1.1設計基准／180
10.1.2設計適配／181
10.1.3適配規則／182
10.2Android系統適配／183
10.2.1密度獨立像素／183
10.2.2設計基准／184
10.2.3適配方法／185
10.3iOS系統適配Android系統／185
10.3.1設計目的／185
10.3.2換算關系／185
10.3.3適配方法／186
10.4標注設計／186
10.4.1標注基准／187
10.4.2標注方法／187
10.5點九圖／189
10.5.1什麼是點九圖／189
10.5.2如何制作點九圖／191
10.6切圖／191
10.6.1界面切圖／191
10.6.2圖標切圖／192
10.6.3命名規則／192
11手勢應用
11.1為什麼使用手勢／194
11.2常用手勢操作／195
11.2.1單擊／195
11.2.2雙擊／195
11.2.3上下滑動／196
11.2.4左右滑動／196
11.2.5拖曳／197
11.2.6張開／閉合／197
11.2.7長按／198
11.2.8搖晃／198
11.3手勢設計禁忌／199
11.3.1使用標准手勢／199
11.3.2定義標准手勢／199
11.3.3使用簡單手勢／199
11.3.4手勢使用說明／199
12設計資源
12.1網站資源／201
12.2圖標資源／202
12.3圖片資源／203
參考文獻／204

隨着智能移動設備的發展，移動端UI設計也跟着火熱，從相關作品的數量和質量都不難感受到這股熱潮的凶猛。不同於以往的Flash熱潮或是全民VI熱潮，這次的UI崛起背后有着第四次工業革命的推力，至少十年內，UI設計只會隨着設備的進化而繼續進化，而不會發生明顯的消退。一位平面設計師只要轉身成為UI設計師就可以拿到兩倍甚至幾倍的薪酬。

近幾年，在站酷網招聘的各類企業職位中，UI設計師是很大的熱門，高薪、期權、項目獎金，跟隨移動互聯網崛起的BAT和創業新貴們不惜千金，但求人才。

這就造成了一個現象：好像所有設計師一夜之間都變成了UI設計師，之前鳳毛麟角的GUI設計師一下子變成了這個新興行當里的領航者。表面的繁榮下面，其實隱藏着一個危險，就是新興的UI設計行業，太缺乏沉淀和教導者，更缺少系統正確的知識梳。在國內，這個現象尤其嚴重。一個設計師，只要在浪潮來臨前曾有過畫圖標這種程度的GUI項目經歷，在就會被視為專家。

各種設計門類之間的切換不是變換個頭銜這麼簡單。要跨界，首先面對的就是層出不窮的新詞匯和新領域。盡管設計和美的基本規律是共通的，成熟的設計師必然對多個設計門類有深入的了解，但是在這方興未艾的UI設計浪潮中，應該怎麼去學習，就成了大家都需要面對的課題。

在運營站酷網的將近十年里，接觸了大量的設計師，有在校生、普通設計師，也有總監級的設計師，甚至設計大師。觀察他們之間的差別，會發現一個有趣的現象，那就是真正造成水平差距的，往往不是創意能力或者說「腦洞」的大小，而是對事物理解的正確程度。一個基礎的認識沒有建立或者建立錯了，將會使整個后期發展都步入錯誤的軌道。

所以，盡可能全面正確地掌握基本知識和價值觀，雖然枯燥但是十分重要。本書就是振華這麼多年積累下來的正確知識和正確三觀。有可能不能馬上應用到你的每一項工作中，可是其中貫穿的學習和整理方法是設計師走向優秀的理想路徑。

規則會演變，可是產生規則的原因不會；知識會迭代，但是知識背后的邏輯不會。設計是好奇者的游戲，好奇心帶來的優勢在振華身上得到了很好的體現。觀察本書的每一個知識點，你會發現，他從來沒有滿足於抄錄權威的語錄，而是自己去找案例、做嘗試，去對比和思考，努力去明白每一個規則背后的原因，研究推動每一次設計變化的邏輯。希望這個優點也可以被拿到這本書的你掌握，讀書不在於倒背如流，而在於是否可以根據圖書的提示學到更多書本外的東西，把書讀厚，再用自己的思維把它精煉變薄。

書中很多一筆帶過的要點，隱藏着讓你優於別人的訣竅，等你去做更多的擴展學習。對每一個陌生詞匯的搜索，都會為你打開一扇新領域的大門，更多領域的風景，也會讓你對已有的知識有更深刻的掌握。

站酷網建站初期正逢移動互聯網的萌芽期，這九年站酷網的演變幾乎與UI設計在中國設計的演變同步，見證了中國UI設計從懵懂到清晰，由模仿到創新，逐漸與國外設計水平接近的過程。現在站酷網平均每年有十余場UI類的設計比賽，小米、華為、魅族和聯想等數十家知名企業已經重金征得讓用戶喜歡的UI作品；站酷招聘每時每刻都有至少200個UI設計職位求賢若渴；每天更是有300余組原創UI設計作品發表。站酷，等待學成UI術法的你來與各路高手論道。

站酷網總編輯紀曉亮
2015年10月於北京