從零開始學UI設計：思路與技法（簡體書）

本書在全面介紹UI設計基礎知識、設計流程與策略的基礎之上，從臨摹圖示到原創圖示，再到GIF動畫、插畫等UI中必備的基礎技能，都進行詳細的講解。本書語言風趣，通俗易懂，書中每一個案例都側重設計思路的講解，不是機械地講解怎樣做，而是給讀者點撥設計思路和技巧，告訴大家設計時如何思考，如何謀劃。

本書適合UI設計愛好者自學，也可作為高等院校與培訓機構平面設計、網頁設計、遊戲設計以及相關專業的教材和參考書，還可以作為設計人員以及相關從業人員的參考用書。

1、本書採用“先見森林，後看樹木”的編寫策略，在全面介紹UI設計基礎知識、設計流程與策略的基礎之上，從臨摹圖示到原創圖示，一路到GIF動畫等UI必備的基礎技能，都進行詳細的講解。

2、書中每一個案例都側重設計思路的講解，不是機械地講解怎樣做，而是點撥設計思路和技巧，告訴大家設計時如何思考，如何謀劃。

3、語言風趣，通俗易懂，無論是零基礎的UI設計愛好者或轉型設計師，還是剛踏出校門的學生或半路自學的UI設計師，通過學習，都能更容易地擠進UI設計大門。

4、本選題作者從事UI實戰培訓多年，在學UI網學員中有很高的知名度，是善於講授基礎技法的講師之一。

近年來，從事UI設計的人越來越多，企業對UI設計的要求越來越高，UI設計師的薪資也水漲船高。這背後的原因，是近年來智能移動設備越來越流行和普及。

對於設計專業的同學來說，轉行從事UI設計或許還算容易，他們可以利用自己所學的設計知識迅速建立起UI知識體系並摸索出一套適合自己的學習系統。但是對於非設計專業的同學來說就非常困難了，面對UI設計幾乎無從下手。雖說設計的原理是相通的，但是設計方向的變化還是很大，應該怎樣去學習UI，成了設計老手和新手都需要去面對的話題和難題。

在從事設計教學工作一段時間後，通過和同行及學生的交流，發現很多人對UI設計一知半解，甚至不知道UI設計所包含的龐大知識體系。更有甚者以為只要會PS和AI就能做UI，從事UI設計就能高薪，這都是很不現實的。

其實UI設計在很多人看來是個新興的職位，但是卻忽略了這個職位背後應該具備的職業素養和技能沉澱。因為我們從事設計教學工作，希望可以幫助更多的人學好UI，所以編寫了這本適合新手瞭解UI設計的書籍，內容包括從最基礎的設計規範，到製作出一個完整的產品，還包括了交互動畫和插畫的製作，這些在本書中都有詳細的介紹和案例分析，讓讀者更好地瞭解做出一個可以正式上線的項目產品需要付出的艱辛和努力。

書中大部分內容都是我們對UI設計經驗的總結和回顧，在這個整理和歸納的過程中我們也重新審視了自己對UI知識的不足和誤區，也讓我們更進一步地從另一個角度去看待UI。

本書由沈學淵、陳仕編著。韓春雨、鄭啟敏、王雯琦、金今、高婕靖、瞿莊齡、鞏維龍、王玲俐、王怡、鄭然、王晶晶、王晟、陳建武、何亞微、王啟穎為本書的編寫提供了很多幫助，在此一併表示感謝！

由於編者水準有限，時間倉促，書中不妥之處在所難免，請廣大讀者批評指正。



編著者

第1章 UI介紹

1.1 什麼是UI 1

1.2 UI設計師就業前景 2

1.3 UI設計的思路/遵循原則 4



第2章圖示設計基礎

2.1 圖示的概念 8

2.2 圖示的分類 9

2.2.1 啟動圖示 9

2.2.2 功能圖示 9

2.3 圖示設計原則 10

2.3.1 識別性原則 10

2.3.2 統一性原則 11

2.3.3 差異性原則 12

2.3.4 原創圖示 13

2.3.5 “潛規則” 14

2.4 常見圖示設計風格 14

2.4.1 剪影圖示 14

2.4.2 扁平圖示 16

2.4.3 微扁平和輕寫實圖示 17

2.4.4 寫實風格圖示 17

2.5 圖示網格系統 18



第3章圖示設計進階

3.1 啟動圖示 21

3.1.1 啟動圖示的靈感來源 22

3.1.2 常見的幾種啟動圖示設計手法 24

3.2 功能圖示的靈感來源 26

3.2.1 吉祥物 27

3.2.2 啟動圖示特徵 28

3.2.3 VI色 29

3.2.4 直接引用 29

3.3 建立統一風格的圖示 30

3.3.1 描邊樣式 30

3.3.2 色值 31

3.3.3 圓角半徑 32

3.3.4 圖示大小 32

3.3.5 使用相同的元素 32

3.3.6 其他細節 33

3.4 字體圖示 33

3.4.1 什麼是字體圖示 33

3.4.2 如何繪製字體圖示 34

3.5 評估圖示的設計質量 39

3.5.1 識別性 39

3.5.2 統一性 40

3.5.3 吸引力 40



第4章圖示設計實戰

4.1 PS中的設置 41

4.1.1 工具設置 41

4.1.2 單位與標尺 42

4.1.3 對齊邊緣 42

4.1.4 鋼筆工具 43

4.1.5 網格和輔助線 43

4.1.6 新建文檔 44

4.2 布耳運算 45

4.2.1 新建圖層 45

4.2.2 合併形狀 45

4.2.3 減去頂層形狀 46

4.2.4 與形狀區域相交 46

4.2.5 排除重疊形狀 46

4.2.6 合併形狀組件 46

4.3 圖示設計流程 47

4.3.1 設定需求，明確創作方向 47

4.3.2 頭腦風暴，列舉關鍵字 47

4.3.3 從關鍵字中聯想造型，尋找靈感 47

4.3.4 手繪草圖 48

4.3.5 軟件繪製初稿 48

4.3.6 確定風格 48

4.3.7 視覺設計，完善細節 49

4.3.8 切圖輸出 50

4.4 剪影圖示的繪製及設計思路 50

4.5 扁平圖示的繪製及設計思路 51

4.6 微扁平圖示/輕寫實圖示的繪製及設計思路 53

4.7 寫實圖示的繪製及設計思路 63

4.8 節日圖示 87

4.9 關於創作 89

4.9.1 利用品牌視覺元素 89

4.9.2 “參考”和“模仿” 89

4.10 AI導入PS沒有虛邊 91



第5章 UI設計基礎

5.1 產品思維導圖 92

5.2 主流設計接口介紹 93

5.3 App頁面類型 94

5.3.1 聚合類 94

5.3.2 列表類 95

5.3.3 內容類別 95

5.3.4 功能類 96

5.4 App包含哪些接口 97

5.4.1 啟動頁 97

5.4.2 引導頁 97

5.4.3 首頁 99

5.4.4 登錄/註冊 100

5.4.5 無數據接口 100

5.4.6 出錯接口 101

5.4.7 回饋接口 102

5.5 UI接口設計的佈局 105

5.5.1 狀態列 106

5.5.2 巡覽列 106

5.5.3 主體內容 106

5.5.4 標籤欄 106

5.5.5 圖示設計的規範 107

5.6 UI接口設計的字體 108

5.7 UI接口設計的間距 110

5.7.1 全域邊距 110

5.7.2 卡片間距 111

5.7.3 內容間距 112

5.8 UI接口設計的顏色 113

5.8.1 通過各類App採集色彩 113

5.8.2 通過Dribbble等網站採集色彩 113

5.8.3 通過攝影作品採集色彩 113

5.8.4 從電影中採集色彩 115

5.8.5 提高審美，增強個人賞析力 116

5.9 從低保真到高保真 116

5.10 UI接口的邏輯關係 122

5.11 UI切圖規則 124

5.11.1 馬克鰻 124

5.11.2 Parker 124

5.11.3 CUTTERMAN—免費的PS切圖外掛程式 124

5.11.4 Design Mirror—最好用的設計稿手機預覽工具 126

5.11.5 命名規則 127

5.11.6 Android切圖 129

5.11.7 iOS切圖 130

5.12 信息架構 130

5.12.1 減少目錄級數 132

5.12.2 功能的排布要有邏輯，分類要清晰，命名要準確、易懂 132

5.12.3 減少操作次數、減少接口跳轉層級 132

5.12.4 操作要順暢，接口跳轉符合使用者心理預期 133

5.13 視覺層次 134

5.14 用戶研究 137

5.14.1 用戶畫像 138

5.14.2 用戶畫像製作 138

5.14.3 用戶討論 139

5.14.4 前期調查 139

5.14.5 可行性測試 140

5.14.6 大資料分析和使用者的回饋 140

5.14.7 使用場景 140

5.14.8 操作手勢 140

5.14.9 格式塔心理學 142

5.14.10 情感化設計 144

5.15 UI交互八原則 145



第6章 UI設計進階

6.1 開始做一個產品 149

6.2 和甲方鬥智鬥勇 150

6.3 UI設計的思路 151

6.3.1 顏色 152

6.3.2 字體（以下提到的是都在iPhone 5的尺寸下面設計的字型大小） 152

6.3.3 分割線 152

6.3.4 圖示 152

6.3.5 排版 153

6.4 UI設計配色 153

6.4.1 UI色彩認知 153

6.4.2 配色原則 154

6.4.3 App配色欣賞 155

6.4.4 配色工具 155

6.4.5 顏色搭配6-3-1法則 156

6.4.6 推薦幾款有用的顏色工具 157

6.5 和程序員溝通 158

6.6 什麼是UX 159

6.7 物理尺寸與視覺尺寸 161

6.8 視覺對齊與形狀 164

6.9 視覺圓角 167



第7章 UI設計實戰

7.1 繪製思維導圖 170

7.2 設計UI低保真接口 171

7.3 設計UI高保真接口 175



第8章 PS視頻時間軸動畫

8.1 幀的概念 180

8.2 視頻時間軸面板介紹 181

8.2.1 播放控制項 181

8.2.2 音訊播放控制按鈕 181

8.2.3 設置按鈕 182

8.2.4 在播放頭處拆分 183

8.2.5 過渡效果 183

8.2.6 當前時間指示器 184

8.2.7 時間標尺 185

8.2.8 工作區域指示器 185

8.2.9 面板選項卡 186

8.2.10 向軌道添加媒體 186

8.2.11 圖層持續時間條 187

8.2.12 向軌道添加音訊 187

8.2.13 時間軸視圖縮放控制項 187

8.2.14 畫面播放速率 188

8.2.15 當前時間 189

8.2.16 渲染視頻 189

8.2.17 轉為幀動畫 190

8.2.18 關鍵幀導航器 190

8.2.19 啟用/移除關鍵幀 190

8.2.20 折疊/展開圖層關鍵幀選項 191

8.3 為什麼要做動畫？ 191

8.4 小汽車動畫（位移動畫） 192

8.5 消失的飛碟（不透明度動畫） 195

8.6 凹陷的掌印（圖層樣式動畫） 198

8.7 loading載入（縮放動畫） 202

8.8 找找找（蒙版動畫） 204

8.9 鏡頭切換（過渡動畫） 208

8.10 播放機動畫（綜合案例） 210

8.10.1 思路構想 210

8.10.2 軟件實現 211



第9章 PS幀動畫

9.1 面板介紹 218

9.2 “吐司小哥”表情包設計 219

9.2.1 思路構想 219

9.2.2 軟件實現 220



第10章 UI設計也要小插畫

10.1 插畫的概念 226

10.2 插畫靈感的獲取 226

10.2.1 採集 227

10.2.2 重構 228

10.3 Adobe Illustrator簡介 228

10.3.1 工作接口（本文中的AI版本為CC 2018） 229

10.3.2 文檔新建和輸出 229

10.3.3 鋼筆工具 231

10.3.4 剪刀工具 232

10.3.5 形狀工具 232

10.3.6 吸管工具 232

10.3.7 混合工具 233

10.3.8 漸變工具 234

10.3.9 對齊面板 238

10.3.10 變換面板 239

10.3.11 路徑查找器 241

10.3.12 圖像描摹 242

10.3.13 實時上色 245

10.4 信手拈來的素材—寫生 246

10.5 寧波街景—重構在插畫中的運用 259

10.6 辦公室的愛戀—讓小插畫富有故事性 262

10.7 可愛的耳環—重構和寫生的結合 264

10.8 如何讓插畫形成系列 272

10.8.1 《帶你去旅行》 274

10.8.2 《小紅帽的冰雪之旅》 275

10.8.3 《假如我是老闆》 276

10.8.4 假面騎士Redesign（再設計） 280

10.9 對插畫的補充 281

10.9.1 不可忽視的繪畫能力 281

10.9.2 練習手繪的好處 282

10.9.3 透視 283



寫在結尾的一些話 286



參考文獻 288