《從零開始學UI設計·思路與技法》是2020年6月化學工業出版社出版的圖書，作者是沈學淵、陳仕。
基本介紹
- 中文名：從零開始學UI設計·思路與技法
- 作者：沈學淵、陳仕
- 出版社：化學工業出版社
- 出版時間：2020年6月
- 開本：16 開
- 裝幀：平裝
- ISBN：9787122355942
編輯推薦,內容簡介,圖書目錄,
編輯推薦
1、本書採用“先見森林，後看樹木”的編寫策略，在全面介紹UI設計基礎知識、設計流程與策略的基礎之上，從臨摹圖示到原創圖示，一路到GIF動畫等UI的基礎技能，都進行詳細的講解。
2、書中每一個案例都側重設計思路的講解，不是機械地講解怎樣做，而是點撥設計思路和技巧，告訴大家設計時如何思考，如何謀劃。
3、語言風趣，通俗易懂，無論是零基礎的UI設計愛好者或轉型設計師，還是剛踏出校門的學生或半路自學的UI設計師，通過學習，都能更容易地擠進UI設計大門。
4、本選題作者從事UI實戰培訓多年，在學UI網學員中有很高的知名度，是善於講授基礎技法的講師之一。
內容簡介
本書在全面介紹UI設計基礎知識、設計流程與策略的基礎之上，從臨摹圖示到原創圖示，再到GIF動畫、插畫等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
