|
|
|
本書是一本系統介紹移動設計知識的書籍，全書分為上下兩篇。
上篇為術之篇，主要講解了移動應用設計相關的基礎知識。通過基礎知識的學習，使大家了解手機屏幕顯示的原理及各種手機硬件的傳感器使用方法。通過講解基本的設計規范及圖標設計方法，使讀者初步掌握移動應用設計知識。
下篇為道之篇，是進階應用設計知識，詳細講解了從如何組建設計規范，到各種組件的功能介紹及應用設計方法，使讀者完整掌握移動應用的設計方法和流程。
本書通過大量的案例演示，使讀者可以靈活運用設計方法理論。
本書適合想要從事和已經從事UI設計行業相關工作的讀者學習使用，也可以作為高校平面設計、網頁設計等相關專業和相關培訓機構的教學參考書。
余振華,站酷網最早一批的推薦設計師，具有十余年GUI、WUI設計從業經歷。在國內專業網站發表過多篇設計研究文章。具有多年設計團隊管理經歷，負責過流量千萬級的電商網站，以及下載量億級應用的無線設計團隊管理。目前正積極探索視覺設計在工作流程中的職能和方法，整理和實施視覺設計的相關設計規范和標准，指導更多的設計師成長。
個人榮譽
2011年獲得「站酷推薦設計師」稱號。
2012年「旅行箱」App獲得豌豆莢設計獎、最美應用獎。
2012年「91桌面主題設計大賽」優秀獎。
2013年「康佳MuseUI首屆手機主題設計」優秀獎。
2013年「新浪天氣通插件設計」優秀獎。
2013年「中國電信手機雲桌面手機主題設計」三等獎。
2014年「中華萬年歷」App累計下載量一億，日活破千萬。
術之篇
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
