目前我國正經(jīng)歷火熱的互聯(lián)網(wǎng)創(chuàng)業(yè)潮,UI設(shè)計師做為其中一個重要的工種,就業(yè)前景非常廣闊。站酷網(wǎng)的設(shè)計調(diào)查結(jié)果顯示,在GUI、平面、網(wǎng)頁、插畫和三維等設(shè)計職位中,目前國內(nèi)的GUI設(shè)計師待遇高。因此,很多設(shè)計師涌入UI設(shè)計這個行業(yè),愿意為學(xué)習(xí)UI設(shè)計知識支付不菲的學(xué)費,而一本高質(zhì)量、淺顯易懂的移動應(yīng)用書籍正是你所需要的。 這是一本系統(tǒng)介紹移動設(shè)計知識的書籍, 全書分為上下兩篇,上篇為術(shù)之篇,主要講解了移動應(yīng)用設(shè)計相關(guān)的基礎(chǔ)知識。通過基礎(chǔ)知識的學(xué)習(xí),使大家了解手機屏幕顯示的原理及各種手機硬件的傳感器使用方法。通過講解基本的設(shè)計規(guī)范及圖標設(shè)計方法,使讀者初步掌握移動應(yīng)用設(shè)計知識。下篇為道之篇,是進階應(yīng)用設(shè)計知識,詳細講解了從如何組建設(shè)計規(guī)范,到各種組件的功能介紹及應(yīng)用設(shè)計方法,使讀者完整掌握移動應(yīng)用的設(shè)計方法和流程。本書通過大量的案例演示,使讀者可以靈活運用設(shè)計方法理論。 本書適合想要從事和已經(jīng)從事UI設(shè)計行業(yè)相關(guān)工作的讀者學(xué)習(xí)使用,也可以作為高校平面設(shè)計和網(wǎng)頁設(shè)計等相關(guān)專業(yè)和相關(guān)培訓(xùn)機構(gòu)的教學(xué)參考書。
站酷推薦設(shè)計師余振華力作,2017全新升級; 站酷網(wǎng)總編輯紀曉亮作序; ZCOOL站酷總經(jīng)理梁耀明、UI中國總經(jīng)理董景博力薦; UI設(shè)計師、平面設(shè)計師、交互設(shè)計師、產(chǎn)品經(jīng)理等相關(guān)人士的必讀之書。 規(guī)則會演變,可是產(chǎn)生規(guī)則的原因不會;知識會迭代,但是知識背后的邏輯不會。本書正是作者多年對設(shè)計知識和規(guī)則的總結(jié),觀察書中的每一個知識點,你會發(fā)現(xiàn),每個案例都是作者自己嘗試、對比和思考的總結(jié),帶領(lǐng)大家努力去明白每一個規(guī)則背后的原因,研究推動每一次設(shè)計變化的邏輯。
余振華是站酷推薦設(shè)計師,他有十余年GUI、WUI設(shè)計的從業(yè)資歷,在多家國內(nèi)專業(yè)網(wǎng)站發(fā)表過眾多設(shè)計研究文章,有著多年設(shè)計團隊管理經(jīng)驗,負責(zé)過流量千萬級的電商網(wǎng)站運營、下載量億級的無線設(shè)計團隊管理。目前他正積極探索視覺設(shè)計在工作中的實踐運用,建立相關(guān)的規(guī)范和標準,指導(dǎo)更多的設(shè)計師成長。 個人榮譽: 2011年獲得“站酷推薦設(shè)計師”稱號 2012年《旅行箱》App獲得豌豆莢設(shè)計獎、應(yīng)用獎 2012年《91桌面主題設(shè)計大賽》獎 2013年《康佳Muse UI 首屆手機主題設(shè)計》獎 2013年《新浪天氣通插件設(shè)計》獎 2013年《中國電信手機云桌面手機主題設(shè)計》三等獎 2014年《中華萬年歷》App累計下載量一億,日活破千萬
術(shù)之篇
01基礎(chǔ)知識
1.1什么是UI設(shè)計/20
1.1.1UI的相關(guān)概念/20
1.1.2UI的學(xué)習(xí)方法/22
1.2什么是App/25
1.2.1App的概念/25
1.2.2App的開發(fā)流程/25
1.3智能手機的屏幕/26
1.3.1英寸(Inch)/27
1.3.2像素(Pixel)/27
1.3.3分辨率(Resolution)/28
1.4網(wǎng)點密度與像素密度/28
1.4.1網(wǎng)點密度(DPI)/28
1.4.2像素密度(PPI)/29
1.4.3DPI與PPI/29
1.4.4邏輯分辨率與像素倍率/30
1.4.5視網(wǎng)膜屏幕/30
1.5常見手機屏幕規(guī)格/31
1.5.1熱門手機規(guī)格/31
1.5.2熱門手機分辨率/33
1.6iPhone 6 Plus的屏幕/34
1.7智能手機的傳感器/37
1.7.1攝像頭/37
1.7.2麥克風(fēng)/38
1.7.3GPS/38
1.7.4電子羅盤/39
1.7.5重力感應(yīng)器/39
1.7.6加速度傳感器/40
1.7.7光線傳感器/41
1.7.8距離傳感器/41
1.7.9氣壓傳感器/42
1.7.10三軸陀螺儀/43
02設(shè)計風(fēng)格
2.1風(fēng)格/46
2.1.1什么是設(shè)計風(fēng)格/46
2.1.2如何確立設(shè)計風(fēng)格/47
2.2顏色/50
2.2. 1 認識色彩/50
2.2. 2 RGB與HSB/50
2.2. 3 顏色搭配基礎(chǔ)/52
2.3如何選擇顏色/53
2.3. 1 常見App的顏色/53
2.3. 2 顏色的性格/55
2.4字體/61
2.4. 1 襯線體和無襯線體/61
2.4. 2 系統(tǒng)內(nèi)置字體/62
2.4. 3 什么時候選擇內(nèi)嵌字體/62
2.4. 4 如何使用內(nèi)嵌字體/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 適應(yīng)不同場景/69
3.2App圖標設(shè)計流程/69
3.2. 1 及時步:尋找隱喻/69
3.2. 2 第二步:抽象圖形/70
3.2. 3 第三步:競品分析/71
3.2. 4 第四步:確定風(fēng)格/71
3.2. 5 第五步:調(diào)整細節(jié)/72
3.2. 6 第六步:場景測試/73
3.3App圖標設(shè)計方法/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 圖形復(fù)用/76
3.3. 8 背景組合/77
3.4iOS圖標規(guī)范/77
3.4. 1 iOS圖標適配/77
3.4. 2 iOS圖標標準/78
3.5Android圖標規(guī)范/79
3.5. 1 Android圖標適配/79
3.5. 2 圖標的視覺統(tǒng)一/80
3.5. 3 Android圖標標準/81
3.6設(shè)計線性圖標/83
3.6. 1 線性圖標的風(fēng)格/83
3.6. 2 線性圖標的繪制方法/84
3.7像素對齊/87
3.7. 1 像素為什么要對齊/87
3.7. 2 像素如何對齊/88
3.7. 3 像素縮放的對齊/89
3.7. 4 像素對齊的微調(diào)/89
3.8圖片的使用/89
3.8. 1 矢量圖與位圖/89
3.8. 2 圖片的格式/90
3.8. 3 圖片的使用/91
3.8. 4 圖片的存儲/92
3.8. 5 圖片的比例/92
04系統(tǒng)界面
4.1欄/94
4.1. 1 狀態(tài)欄/94
4.1. 2 導(dǎo)航欄/94
4.1. 3 標簽欄/95
4.1. 4 工具欄/96
4.2內(nèi)容視圖/97
4.2. 1 表格視圖/97
4.2. 2 文本視圖/99
4.2. 3 Web視圖/99
4.3臨時視圖/100
4.3. 1 對話框/100
4.3. 2 操作列表/100
05Android系統(tǒng)界面
5.1導(dǎo)航機制/102
5.1. 1 硬件特性/102
5.1. 2 iOS導(dǎo)航機制/102
5.1. 3 Android導(dǎo)航機制/103
5.2界面布局/105
5.2. 1 結(jié)構(gòu)差異/105
5.2. 2 操作欄/106
5.2. 3 多任務(wù)/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 復(fù)制粘貼/112
5.4. 4 刪除/113
5.5Android系統(tǒng)的插件/114
5.5. 1 桌面插件/114
5.5. 2 設(shè)計趨勢/114
道之篇
06建立規(guī)范
6.1組建規(guī)范/116
6.1. 1 設(shè)計規(guī)范的目的/116
6.1. 2 規(guī)范的組成/116
6.2顏色規(guī)范/119
6.2. 1 為什么選擇HSB/119
6.2. 2 創(chuàng)建調(diào)色板/120
6.2. 3 調(diào)色板應(yīng)用/121
6.3文字規(guī)范/123
6.3. 1 iOS系統(tǒng)/123
6.3. 2 Android系統(tǒng)/123
6.3. 3 系統(tǒng)字號/123
6.4布局/125
6.4. 1 框架/125
6.4. 2 頂部導(dǎo)航欄/126
6.4. 3 頂部標簽欄/126
6.4. 4 底部標簽欄/127
6.5圖片規(guī)范/127
6.5. 1 用戶頭像/127
6.5. 2 商品圖片/129
6.5. 3 無數(shù)據(jù)圖片/129
07設(shè)計組件
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 開關(guān)/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 地區(qū)選擇/140
7.3表單控件/141
7.3. 1 單選框/141
7.3. 2 復(fù)選框/142
7.3. 3 文本框/142
7.3. 4 下拉框/143
7.3. 5 表格/144
7.4按鈕規(guī)范/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 非模態(tài)浮層/147
7.5. 3 模態(tài)浮層/148
08導(dǎo)航設(shè)計
8.1扁平導(dǎo)航/150
8.1. 1 標簽導(dǎo)航/150
8.1. 2 舵式導(dǎo)航/151
8.1. 3 宮格式導(dǎo)航/152
8.2內(nèi)容主導(dǎo)式導(dǎo)航/153
8.2. 1 陳列式導(dǎo)航/153
8.2. 2 旋轉(zhuǎn)木馬式導(dǎo)航/154
8.3列表式導(dǎo)航/155
8.3. 1 列表式/155
8.3. 2 抽屜式/156
8.4其他導(dǎo)航/157
8.4. 1 點聚式導(dǎo)航/157
8.4. 2 瀑布式導(dǎo)航/158
09界面設(shè)計
9.1首頁 /160
9.1. 1 搜索欄/160
9.1. 2 標簽欄/161
9.1. 3 卡片式設(shè)計/161
9.1. 4 樓層設(shè)計/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 頭像區(qū)域/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 節(jié)日氛圍類/173
9.6引導(dǎo)頁/173
9.6. 1 功能介紹類/173
9.6. 2 使用說明類/176
9.6. 3 情感故事類/177
10設(shè)計適配
10.1iOS系統(tǒng)適配/180
10.1. 1 設(shè)計基準/180
10.1. 2 設(shè)計適配/181
10.1. 3 適配規(guī)則/182
10.2Android系統(tǒng)適配/183
10.2. 1 密度獨立像素/183
10.2. 2 設(shè)計基準/184
10.2. 3 適配方法/185
10.3iOS系統(tǒng)適配Android系統(tǒng)/185
10.3. 1 設(shè)計目的/185
10.3. 2 換算關(guān)系/185
10.3. 3 適配方法/186
10.4標注設(shè)計/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 命名規(guī)則/192
11手勢應(yīng)用
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手勢設(shè)計禁忌/199
11.3. 1 使用標準手勢/199
11.3. 2 定義標準手勢/199
11.3. 3 使用簡單手勢/199
11.3. 4 手勢使用說明/199
12設(shè)計資源
12.1網(wǎng)站資源/201
12.2圖標資源/202
12.3圖片資源/203
附錄/204
參考文獻/211
很喜歡,送人了
值得學(xué)習(xí)的書
還不錯,比較偏ui閱讀
書對于初學(xué)者還是很有幫助的
書很不錯,快遞把我書弄的有折痕了,讓我這么喜歡書的人很不爽
好評!!!
絕對是很實用的一本書
剛收到,有點小貴
先看看再說 封面很好看 學(xué)起來~
整天還可以理論比較多
不錯,講解的很詳細。
非常好的一本書
內(nèi)容不錯,包裝也好
這個物流包裝還不錯,書很不錯,總述全局,沒有工具具體操作,買時注意
有一定設(shè)計基礎(chǔ)或者已經(jīng)接觸過UI設(shè)計的同學(xué),還是建議別買了~ 這書太基礎(chǔ)了!都是寫基礎(chǔ)性的知識!
這本書對新手可能有用,感覺內(nèi)容還是太淺了一點
老師推薦的,相對于我買的其他的這個確實不錯,內(nèi)容詳細,至少圖片沒有過時,UI設(shè)計發(fā)現(xiàn)的太快了,買書的同學(xué)需要謹慎啊。