新印象——解構UI設計（第2版）

王铎，先后服务于腾讯、奇虎360、今日头条等公司，人民网特邀讲师。 参与项目手机QQ、360儿童卫士、360空气净化器及360防丢卫士、老虎地图、内涵段子等产品。 第五届国际大学生动画节漫画插画类作品奖 创意紫峰优秀作品奖中国包装创意设计大赛 优秀奖中国之星设计艺术大奖获 中国绿化基金会“绿色爱心设计师”称号。

第 1章 界面類型/ 009

1.1 閃屏頁/ 010

1.1.1 品牌宣傳型/ 010

1.1.2 節日關懷型/ 011

1.1.3 活動推廣型/ 012

1.2 引導頁/ 013

1.2.1 功能介紹型（初級）/ 013

1.2.2 情感帶入型（中級）/ 014

1.2.3 搞笑型（高級）/ 015

1.3 浮層引導頁/ 016

1.4 空白頁/ 017

1.4.1 首次進入型/ 017

1.4.2 錯誤提示型/ 018

1.5 首頁/ 019

1.5.1 列表型/ 019

1.5.2 圖標型/ 020

1.5.3 卡片型/ 020

1.5.4 綜合型/ 021

1.6 個人中心頁/ 022

1.7 列表頁/ 024

1.7.1 單行列表頁/ 024

1.7.2 雙行列表頁/ 025

1.7.3 時間軸列表頁/ 025

1.7.4 圖庫列表頁/ 026

1.8 播放頁面/ 027

1.9 詳情頁/ 028

1.10 可輸入頁面/ 029

1.11 實戰：兩步打造炫酷界面/ 030

1.11.1 繪制基礎圖形/ 030

1.11.2 添加顏色與細節/ 032

第 2章 界面構圖/ 035

2.1 九宮格構圖/ 036

案例分析/ 037

2.2 圓心放射構圖/ 038

案例分析/ 039

2.3 三角形構圖/ 041

案例分析/ 041

2.4 S形構圖/ 043

案例分析/ 044

2.5 F形構圖/ 047

案例分析/ 047

2.6 實戰：用多種構圖方式

製作運動App界面/ 048

2.6.1 用放射構圖設計運動頁面/ 048

2.6.2 用倒三角形構圖設計地圖頁面/ 053

2.6.3 用三角形構圖設計個人頁面/ 056

第3章 版面佈局/ 059

3.1 界面版率/ 060

3.1.1 單色塊填充/ 061

3.1.2 多色塊組合/ 062

3.1.3 穿插填充/ 062

3.1.4 關鍵詞圖形化/ 063

3.1.5 放大文字/ 064

3.2 摳圖法/ 065

案例分析/ 065

3.3 破界法/ 066

案例分析/ 066

3.4 局部提取/ 069

案例分析/ 069

3.5 對齊方式/ 070

3.5.1 界面中常用的對齊方式/ 070

3.5.2 小米官網的登錄頁/ 072

3.5.3 蘋果官網的登錄頁/ 073

3.6 間距/ 074

案例分析/ 074

3.7 視覺層次/ 077

案例分析/ 077

3.8 實戰：設計空氣凈化器App界面/080

3.8.1 對頁面進行整體佈局/ 080

3.8.2 設計“較差”頁面/ 082

3.8.3 設計“良好”頁面/ 086

第4章 元素/ 087

點線面/ 088

案例分析/ 088

4.2 極簡至上/ 093

案例分析/ 093

4.3 品牌靈魂/ 095

案例分析/ 095

4.4 形象靈魂化/ 096

案例分析/ 096

4.5 動畫賦予設計生命/ 099

案例分析/ 099

4.6 菜單設定/ 100

案例分析/ 100

4.7 實戰：快速製作晶格化界面/ 101

4.7.1 製作圓形頭像/ 101

4.7.2 製作晶格背景/ 102

4.7.3 製作界面細節/ 104

第5章 界面用色/ 107

5.1 感知色彩/ 108

5.1.1 紅色/ 109

5.1.2 橙色/ 110

5.1.3 黃色/ 110

5.1.4 綠色/ 111

5.1.5 藍色/ 111

5.1.6 粉色/ 112

5.1.7 黑色/ 112

5.2 色不過三/ 113

案例分析/ 113

5.3 主色、輔助色及點睛色/ 116

5.3.1 主色/ 116

5.3.2 輔助色/ 117

5.3.3 點睛色/ 118

5.4 配色/ 119

5.4.1 互補色搭配/ 119

5.4.2 冷暖對比色搭配/ 121

5.5 實戰：設計色彩統一的頁面/ 123

5.5.1 設計頁面圖標/ 123

5.5.2 設計個人中心頁/ 128

5.5.3 設計聊天頁/ 132

第6章 設計原則與規範/135

6.1 iOS的五大設計原則/ 136

6.1.1 突顯內容原則/ 137

6.1.2 統一化原則/ 139

6.1.3 適應化原則/ 140

6.1.4 層級性原則/ 144

6.1.5 易操作性原則/ 145

6.2 iOS界面尺寸及控件設計規範/ 147

6.2.1 界面尺寸/ 147

6.2.2 控件設計規範/ 149

6.3 Android設計原則及規範/ 154

6.3.1 Android的設計原則/ 154

6.3.2 Android的控件設計規範/ 158

6.3.3 Android的設計尺寸及單位/ 163

6.4 常用字體規範/ 165

6.4.1 成也字，敗也字/ 165

6.4.2 字不過三/ 166

案例分析/ 166

6.4.3 文字與背景要分明/ 168

6.4.4 字體與氣氛要匹配/ 168

案例分析/ 168

6.4.5 常用字體類型/ 169

6.4.6 界面字體規範/ 172

6.4.7 常用字體顏色/ 174

6.5 制定一套設計規範/ 175

6.5.1 色彩規範/ 176

6.5.2 按鈕控件規範/ 177

6.5.3 分割線規範/ 177

6.5.4 頭像規範/ 177

6.5.5 其他控件與聊天氣泡規範/ 178

6.5.6 文字字號規範/ 179

6.5.7 間距規範/ 180

6.5.8 圖標規範/ 181

6.6 實戰：設計毛筆字風格的登錄頁/182

6.6.1 製作基礎字體/ 182

6.6.2 用筆刷設計細節/ 184

第7章 切圖與標註/ 189

7.1 高效切圖/ 190

7.1.1 iPhone屏幕與Android手機屏幕的關系/ 190

7.1.2 Android的常用單位/ 191

7.1.3 通用切圖法/ 192

7.1.4 Android的“點九”切圖法/ 194

7.2 界面標註/ 197

7.2.1 標註軟件/ 197

7.2.2 標註規範/ 198

7.3 實戰：為一款首頁界面切圖/ 201

7.3.1 切圖分析/ 201

7.3.2 iOS切圖/ 203

7.3.3 Android切圖/ 205

第8章 圖標設計/ 207

8.1 圖標創意/ 208

8.1.1 卡通形象化/ 208

8.1.2 關鍵詞圖形化/ 208

8.1.3 文字直觀化/ 209

案例分析/ 209

8.2 圖標類型/ 210

8.2.1 像素圖標/ 210

案例分析/ 211

8.2.2 擬物化圖標/ 212

8.2.3 扁平化圖標/ 212

案例分析/ 214

8.2.4 線性圖標/ 215

案例分析/ 215

8.2.5 立體圖標/ 217

案例分析/ 217

8.3 實戰：繪制功能圖標/ 219

8.3.1 功能圖標的設計規範/ 219

8.3.2 功能圖標的繪制過程/ 220

8.4 實戰：製作立體圖標/ 227

8.4.1 製作透視網格/ 227

8.4.2 製作立體字/ 228

8.4.3 製作燈泡/ 229

8.4.4 製作光暈/ 230

8.5 實戰：快速製作線條流暢的Logo/231

8.5.1 製作Logo形狀的輔助線/ 231

8.5.2 生成Logo路徑形狀/ 232

8.5.3 將輔助線設置為虛線/ 234

第9章 藝術二維碼設計/ 235

9.1 二維碼的原理與結構/ 236

9.2 動態二維碼的表現/ 239

9.2.1 MICU二維碼——航行/ 239

9.2.2 MICU二維碼——音樂節/ 240

9.2.3 MICU二維碼——清涼夏日/ 241

9.2.4 MICU二維碼——UI疫苗站/ 241

9.2.5 MICU二維碼——設計樂園/ 242

案例分析/ 242

9.3 實戰：製作寶馬春節藝術二維碼/245

9.3.1 製作原碼/ 245

9.3.2 設計二維碼/ 246

9.3.3 製作動效/ 249

9.4 實戰：快速製作動態界面/ 253

9.4.1 導入GIF圖片並轉換為智能對象/ 253

9.4.2 製作透視展示圖/ 254