具體描述
國內著名UI 論壇的産品交互版版主兼特攻隊UI 講師，數據調研及數據分析師，
上海UIF 分部負責人之一，圈內稱雪姐。插畫中國- 版主，遊戲論壇UI 版版主。曾在日企工作4 年，有8 年手機UI 從業經驗，並有2 年網站建設和運營經驗，參與過20 個內置手機APP 軟件的産品交互設計及圖形界麵設計；並負責過Android 平颱、iOS 平颱、展訊和MTK 等手機係統的深度定製項目，參與或主導中國移動、摩托羅拉、騰訊手機桌麵閤作業務，以及阿裏雲、康佳、海爾、波導、金立、朵唯和宇信小辣椒等國內外多傢手機品牌的項目。
著者簡介
本書是火星時代傾情打造的第一本關於UI 設計的圖書，作者來自UI 設計一綫。本書以UI 設計師的視角及豐富的工作經驗，並通
過具體的案例，全麵講解UI 的具體應用。
全書分為4 篇共26 課。第1 篇介紹UI 的概念、分類、圖形界麵的發展史，以及UI 行業的發展前景等；第2 篇介紹UI 設計師的必
備技能、UI 設計的工作流程等；第3 篇介紹圖標設計、界麵設計、係統控件設計、LOGO 與Banner 設計、産品包裝的設計，以及UI 質
感錶現、色彩構圖、元素風格等；第4 篇介紹瞭産品需求分析、交互設計、用戶體驗、手機應用APP 等。
隨書附贈1 張DVD9 多媒體教學光盤，視頻包括書中大部分內容的具體講解，以及案例的製作過程，時長約12 小時，素材內容包括所有案例的工程文件。
本書不僅適閤從事UI 行業的讀者閱讀，也可以作為高等院校平麵設計、網站設計、遊戲設計等相關專業的教輔圖書及相關教師的參考圖書。
圖書目錄
第1 篇 你真正瞭解UI 行業................................... 1
第1 課 UI 名詞的由來..................................................................1
第2 課 UI 的分類.........................................................................3
第3 課 圖形界麵發展史................................................................8
3.1 電腦操作係統界麵................................................................................... 10
3.1.1 Windows 操作係統........................................................................................ 10
3.1.2 蘋果操作係統................................................................................................... 13
3.2 手機與係統界麵....................................................................................... 14
第4 課 UI 行業發展前景............................................................ 17
4.1 UI 設計師薪酬等統計數據..................................................................... 18
4.2 三大手機APP Store 數據...................................................................... 19
4.3 未來UI 新領域......................................................................................... 20
第2 篇 必需的UI 裝備你有嗎.............................. 23
第5 課 常用軟件介紹................................................................. 23
第6 課 設計師必備技能 ............................................................ 25
6.1 瞭解UI 設計師職業規劃 ....................................................................... 26
6.2 必須掌握的3 個基本技能 ..................................................................... 26
第7 課 UI 設計工作流程 ........................................................... 29
7.1 自主軟件産品開發流程 .......................................................................... 30
7.2 外包公司開發流程 .................................................................................. 30
7.3 網站推齣流程 .......................................................................................... 31
7.4 什麼在影響著你的設計 .......................................................................... 31
第3 篇 設計看似很簡單...................................... 34
第8 課 圖標設計....................................................................... 34
8.1 圖標設計的基礎理論............................................................................... 35
8.2 36 種圖標概念設計的靈感來源............................................................. 36
8.3 像素圖標的繪製....................................................................................... 37
8.4 剪影2D 圖標............................................................................................ 39
8.5 扁平化圖標................................................................................................ 41
8.6 寫實圖標.................................................................................................... 42
8.7 3D 圖標..................................................................................................... 43
8.8 手機係統主題圖標................................................................................... 45
第9 課 界麵設計........................................................................ 46
9.1 界麵設計之APP ..................................................................................... 47
9.2 界麵設計之Web 設計............................................................................ 56
第10 課 係統控件設計.............................................................. 66
10.1 為何要有控件......................................................................................... 67
10.2 常見的控件元素 .................................................................................... 70
10.3 桌麵主題風格......................................................................................... 71
10.4 經驗分享................................................................................................. 72
第11 課 LOGO 和Banner 設計............................................... 73
11.1 黃金分割................................................................................................. 74
11.2 LOGO 設計............................................................................................. 74
Ⅰ
11.3 Banner 的元素...................................................................................... 76
第12 課 産品包裝設計.............................................................. 78
第13 課 質感錶現精講............................................................. 81
13.1 光綫對物體錶現的影響........................................................................ 82
13.2 9 類材質錶現.......................................................................................... 82
第14 課 色彩與構圖精講.......................................................... 86
14.1 色彩.......................................................................................................... 87
14.2 構圖元素................................................................................................. 95
14.2.1 設計中的構圖要素......................................................................................... 95
14.2.2 視覺引導......................................................................................................... 97
14.3 色彩與構圖範例..................................................................................... 99
第15 課 元素風格精講............................................................ 100
15.1 網頁UI 常用風格.................................................................................101
15.2 遊戲UI 常用風格.................................................................................103
第16 課 優秀案例賞析 ........................................................... 108
第17 課 扁平化UI ................................................................. 113
17.1 什麼叫UI 扁平化.................................................................................114
17.2 為什麼要用UI 扁平化........................................................................114
17.3 其他類型的UI 設計 .....................................................................114
17.4 UI 扁平化未必適閤所有産品.............................................................115
17.5 UI 扁平化的趨勢..................................................................................116
第4 篇 與我一起升華UI 之道 ........................... 117
第18 課 産品需求分析 ........................................................... 117
18.1 需求分析...............................................................................................118
18.1.1 需求的基本概念...........................................................................................118
18.1.2 5W3H（八何分析法）.............................................................................119
18.1.3 思維導圖（MindMap）...........................................................................120
18.2 如何做競品分析...................................................................................121
第19 課 交互設計入門 ........................................................... 123
第20 課 用戶體驗入門 ........................................................... 128
20.1 用戶體驗的定義及其最終目的..........................................................129
20.2 頭腦風暴與故事闆...............................................................................130
20.3 積極與消極的用戶體驗......................................................................131
20.4 用戶分類...............................................................................................132
20.5 潛在用戶心中的疑問...........................................................................133
20.6 用戶測試...............................................................................................134
20.7 數據可視化...........................................................................................134
20.8 SEO 優化（Search Engine Optimization）..............................134
第21 課 交互動態特效........................................................... 137
第22 課 Android 和iOS 平颱規範 ........................................ 141
22.1 Android 平颱 .....................................................................................142
22.2 iOS 平颱 ..............................................................................................147
22.3 WIN METRO 風格設計 ....................................................................151
第23 課 手機應用APP 的設計 ............................................... 156
目錄
CONTENTS
Ⅱ
23.1 寫在3 個實踐篇之前 .........................................................................157
23.2 APP 的UI 設計 ...................................................................................160
第24 課 專題網站的UI 設計 .................................................. 167
24.1 操作步驟 ..............................................................................................168
24.2 與客戶溝通的步驟 .............................................................................169
第25 課 什麼人闖進UI 設計 .................................................. 171
25.1 關於UI 設計師 ....................................................................................172
25.2 關於UI 的20 個問題 ........................................................................172
第26 課 不得不說的秘密 ........................................................ 179
附錄 ...................................................................................... 184
光盤目錄
UI 設計基礎 （總時長09:55:16）
1.........................................................自我介紹： 00:09:23
2.............. UI 設計所在公司運營內容及職能： 00:08:23
3.......................................UI 設計師必備技能： 00:11:30
4.......................................UI 設計師常逛網站： 00:09:42
5..........UI 設計師具體工作內容及職業規劃： 00:10:13
6....................... UI 産品設計流程和影響因素: 00:11:55
7...............................................PS 畫剪影圖標： 00:15:58
8............................. 做好扁平化的10 條建議： 00:10:40
9................................做好擬物化的6 條建議： 00:11:50
10..............................關於抄襲、臨摹與藉鑒： 00:09:23
11...............................關於色感和用色技巧1： 00:08:55
12...............................關於色感和用色技巧2： 00:09:14
13..........................關於競品分析和交互架構： 00:09:24
14............. 光對材質錶麵和紋理質感的影響： 00:10:19
15............. 設計思維的形成和人腦記憶結構： 00:08:41
16.. 曆史對UI 風格的影響，做有故事的設計： 00:09:35
17.......................................... 切圖的概念講解： 00:06:31
18..............................效果圖、平颱和分辨率： 00:09:03
19.......................................... 實際的切圖案例： 00:07:48
20.......................................................開關控件： 00:08:27
21...............................................兩個扁平圖標： 00:13:22
22...............................................糖果質感按鈕： 00:03:13
23.......................................................黑闆圖標： 00:07:18
24.......................................................簡約相機： 00:13:34
25...............................................酷炫耳機圖標： 00:06:12
26.......................................................彩虹加載： 00:04:12
27...................................................熒光加載圈： 00:03:12
28.......................................... 立體小房子圖標： 00:07:29
29.......................................................寶石質感： 00:05:38
30...............................................可愛冰棍圖標： 00:07:02
31...................................................擬物望遠鏡： 00:16:34
32.......................................................鉛筆圖標： 00:03:39
33...................................................小黃鴨圖標： 00:19:07
34..............................3D 扁平APP 商城圖標： 00:11:40
35...................3D 天氣LOWPOlY 風格圖標： 00:13:05
36............. 網頁界麵設計需要做的前期工作： 00:09:45
37............. 網頁界麵設計需要做的中期工作： 00:09:06
38............. 網頁界麵設計需要做的後期工作： 00:10:07
39.................................. 網站資源源文件展示： 00:05:01
40..............................活動頁和電商産品頁麵： 00:09:13
41.................................. 優秀的網頁交互賞析： 00:06:06
42............................... 響應式WEB 交互設計： 00:10:42
43..............................任務流程和綫框圖跳轉： 00:09:42
44..........................用戶分類及用戶調研手法： 00:10:19
45......................................APP 設計注意事項： 00:09:22
46...................... 電商瀑布流AXURE 綫框圖： 00:10:44
47.................. 購物車列錶AXURE 綫框原型： 00:10:44
48.................. 小樓老師的AXURE 部件加載： 00:06:31
49................ AXURE 加載iOS7 部件庫方法： 00:06:05
50............................. APP 扁平圓形導航頁麵： 00:09:58
51..............................................APP 聊天界麵： 00:15:15
52......................................APP 界麵圖片模糊： 00:06:10
53..............................................APP 登錄界麵： 00:07:38
54............................APP 頁麵METRO 風格： 00:09:54
55...........................餐館點評APP 界麵設計： 00:05:45
56...........................蛋糕訂購APP 界麵設計： 00:07:23
57...........................即時通信APP 界麵設計： 00:06:55
58...........................清透登錄APP 界麵設計： 00:09:23
59...........................可愛攝影APP 界麵設計： 00:13:42
60...........................音樂播放APP 界麵設計： 00:15:51
61.........LOGO 和BANNER 設計注意事項： 00:09:27
62.................................. 産品包裝和新手指引： 00:09:35
基礎軟件操作（總時長01:40:23）
1..................... 做UI 需在PS 軟件中的設置： 00:05:07
2................ PS 鋼筆路徑形狀圖層布爾運算： 00:08:15
3...................... 圖層濛版路徑濛版剪切圖層： 00:08:24
4..................................... PS 選區的巧妙運用： 00:06:36
5...........................圖層命名規則圖層文件夾： 00:05:07
6.......................................圖層屬性圖層樣式： 00:12:17
7........................................... 如何標坐標切圖： 00:03:58
8........................................ CTRL_T 網格變換： 00:03:58
9...............................液化塗抹加深減淡工具： 00:06:52
10.............................邊緣透明度和精確對齊： 00:06:50
11....................................... PS 製作GIF 動畫： 00:03:41
12.............................麯綫色相亮度調節技巧： 00:06:28
13................................................PS 常用濾鏡： 00:04:58
14.............................AI 和PS 協同路徑作業： 00:08:07
15....................................AI 裏網格漸變功能： 00:05:48
· · · · · · (收起)
第1 課 UI 名詞的由來..................................................................1
第2 課 UI 的分類.........................................................................3
第3 課 圖形界麵發展史................................................................8
3.1 電腦操作係統界麵................................................................................... 10
3.1.1 Windows 操作係統........................................................................................ 10
3.1.2 蘋果操作係統................................................................................................... 13
3.2 手機與係統界麵....................................................................................... 14
第4 課 UI 行業發展前景............................................................ 17
4.1 UI 設計師薪酬等統計數據..................................................................... 18
4.2 三大手機APP Store 數據...................................................................... 19
4.3 未來UI 新領域......................................................................................... 20
第2 篇 必需的UI 裝備你有嗎.............................. 23
第5 課 常用軟件介紹................................................................. 23
第6 課 設計師必備技能 ............................................................ 25
6.1 瞭解UI 設計師職業規劃 ....................................................................... 26
6.2 必須掌握的3 個基本技能 ..................................................................... 26
第7 課 UI 設計工作流程 ........................................................... 29
7.1 自主軟件産品開發流程 .......................................................................... 30
7.2 外包公司開發流程 .................................................................................. 30
7.3 網站推齣流程 .......................................................................................... 31
7.4 什麼在影響著你的設計 .......................................................................... 31
第3 篇 設計看似很簡單...................................... 34
第8 課 圖標設計....................................................................... 34
8.1 圖標設計的基礎理論............................................................................... 35
8.2 36 種圖標概念設計的靈感來源............................................................. 36
8.3 像素圖標的繪製....................................................................................... 37
8.4 剪影2D 圖標............................................................................................ 39
8.5 扁平化圖標................................................................................................ 41
8.6 寫實圖標.................................................................................................... 42
8.7 3D 圖標..................................................................................................... 43
8.8 手機係統主題圖標................................................................................... 45
第9 課 界麵設計........................................................................ 46
9.1 界麵設計之APP ..................................................................................... 47
9.2 界麵設計之Web 設計............................................................................ 56
第10 課 係統控件設計.............................................................. 66
10.1 為何要有控件......................................................................................... 67
10.2 常見的控件元素 .................................................................................... 70
10.3 桌麵主題風格......................................................................................... 71
10.4 經驗分享................................................................................................. 72
第11 課 LOGO 和Banner 設計............................................... 73
11.1 黃金分割................................................................................................. 74
11.2 LOGO 設計............................................................................................. 74
Ⅰ
11.3 Banner 的元素...................................................................................... 76
第12 課 産品包裝設計.............................................................. 78
第13 課 質感錶現精講............................................................. 81
13.1 光綫對物體錶現的影響........................................................................ 82
13.2 9 類材質錶現.......................................................................................... 82
第14 課 色彩與構圖精講.......................................................... 86
14.1 色彩.......................................................................................................... 87
14.2 構圖元素................................................................................................. 95
14.2.1 設計中的構圖要素......................................................................................... 95
14.2.2 視覺引導......................................................................................................... 97
14.3 色彩與構圖範例..................................................................................... 99
第15 課 元素風格精講............................................................ 100
15.1 網頁UI 常用風格.................................................................................101
15.2 遊戲UI 常用風格.................................................................................103
第16 課 優秀案例賞析 ........................................................... 108
第17 課 扁平化UI ................................................................. 113
17.1 什麼叫UI 扁平化.................................................................................114
17.2 為什麼要用UI 扁平化........................................................................114
17.3 其他類型的UI 設計 .....................................................................114
17.4 UI 扁平化未必適閤所有産品.............................................................115
17.5 UI 扁平化的趨勢..................................................................................116
第4 篇 與我一起升華UI 之道 ........................... 117
第18 課 産品需求分析 ........................................................... 117
18.1 需求分析...............................................................................................118
18.1.1 需求的基本概念...........................................................................................118
18.1.2 5W3H（八何分析法）.............................................................................119
18.1.3 思維導圖（MindMap）...........................................................................120
18.2 如何做競品分析...................................................................................121
第19 課 交互設計入門 ........................................................... 123
第20 課 用戶體驗入門 ........................................................... 128
20.1 用戶體驗的定義及其最終目的..........................................................129
20.2 頭腦風暴與故事闆...............................................................................130
20.3 積極與消極的用戶體驗......................................................................131
20.4 用戶分類...............................................................................................132
20.5 潛在用戶心中的疑問...........................................................................133
20.6 用戶測試...............................................................................................134
20.7 數據可視化...........................................................................................134
20.8 SEO 優化（Search Engine Optimization）..............................134
第21 課 交互動態特效........................................................... 137
第22 課 Android 和iOS 平颱規範 ........................................ 141
22.1 Android 平颱 .....................................................................................142
22.2 iOS 平颱 ..............................................................................................147
22.3 WIN METRO 風格設計 ....................................................................151
第23 課 手機應用APP 的設計 ............................................... 156
目錄
CONTENTS
Ⅱ
23.1 寫在3 個實踐篇之前 .........................................................................157
23.2 APP 的UI 設計 ...................................................................................160
第24 課 專題網站的UI 設計 .................................................. 167
24.1 操作步驟 ..............................................................................................168
24.2 與客戶溝通的步驟 .............................................................................169
第25 課 什麼人闖進UI 設計 .................................................. 171
25.1 關於UI 設計師 ....................................................................................172
25.2 關於UI 的20 個問題 ........................................................................172
第26 課 不得不說的秘密 ........................................................ 179
附錄 ...................................................................................... 184
光盤目錄
UI 設計基礎 （總時長09:55:16）
1.........................................................自我介紹： 00:09:23
2.............. UI 設計所在公司運營內容及職能： 00:08:23
3.......................................UI 設計師必備技能： 00:11:30
4.......................................UI 設計師常逛網站： 00:09:42
5..........UI 設計師具體工作內容及職業規劃： 00:10:13
6....................... UI 産品設計流程和影響因素: 00:11:55
7...............................................PS 畫剪影圖標： 00:15:58
8............................. 做好扁平化的10 條建議： 00:10:40
9................................做好擬物化的6 條建議： 00:11:50
10..............................關於抄襲、臨摹與藉鑒： 00:09:23
11...............................關於色感和用色技巧1： 00:08:55
12...............................關於色感和用色技巧2： 00:09:14
13..........................關於競品分析和交互架構： 00:09:24
14............. 光對材質錶麵和紋理質感的影響： 00:10:19
15............. 設計思維的形成和人腦記憶結構： 00:08:41
16.. 曆史對UI 風格的影響，做有故事的設計： 00:09:35
17.......................................... 切圖的概念講解： 00:06:31
18..............................效果圖、平颱和分辨率： 00:09:03
19.......................................... 實際的切圖案例： 00:07:48
20.......................................................開關控件： 00:08:27
21...............................................兩個扁平圖標： 00:13:22
22...............................................糖果質感按鈕： 00:03:13
23.......................................................黑闆圖標： 00:07:18
24.......................................................簡約相機： 00:13:34
25...............................................酷炫耳機圖標： 00:06:12
26.......................................................彩虹加載： 00:04:12
27...................................................熒光加載圈： 00:03:12
28.......................................... 立體小房子圖標： 00:07:29
29.......................................................寶石質感： 00:05:38
30...............................................可愛冰棍圖標： 00:07:02
31...................................................擬物望遠鏡： 00:16:34
32.......................................................鉛筆圖標： 00:03:39
33...................................................小黃鴨圖標： 00:19:07
34..............................3D 扁平APP 商城圖標： 00:11:40
35...................3D 天氣LOWPOlY 風格圖標： 00:13:05
36............. 網頁界麵設計需要做的前期工作： 00:09:45
37............. 網頁界麵設計需要做的中期工作： 00:09:06
38............. 網頁界麵設計需要做的後期工作： 00:10:07
39.................................. 網站資源源文件展示： 00:05:01
40..............................活動頁和電商産品頁麵： 00:09:13
41.................................. 優秀的網頁交互賞析： 00:06:06
42............................... 響應式WEB 交互設計： 00:10:42
43..............................任務流程和綫框圖跳轉： 00:09:42
44..........................用戶分類及用戶調研手法： 00:10:19
45......................................APP 設計注意事項： 00:09:22
46...................... 電商瀑布流AXURE 綫框圖： 00:10:44
47.................. 購物車列錶AXURE 綫框原型： 00:10:44
48.................. 小樓老師的AXURE 部件加載： 00:06:31
49................ AXURE 加載iOS7 部件庫方法： 00:06:05
50............................. APP 扁平圓形導航頁麵： 00:09:58
51..............................................APP 聊天界麵： 00:15:15
52......................................APP 界麵圖片模糊： 00:06:10
53..............................................APP 登錄界麵： 00:07:38
54............................APP 頁麵METRO 風格： 00:09:54
55...........................餐館點評APP 界麵設計： 00:05:45
56...........................蛋糕訂購APP 界麵設計： 00:07:23
57...........................即時通信APP 界麵設計： 00:06:55
58...........................清透登錄APP 界麵設計： 00:09:23
59...........................可愛攝影APP 界麵設計： 00:13:42
60...........................音樂播放APP 界麵設計： 00:15:51
61.........LOGO 和BANNER 設計注意事項： 00:09:27
62.................................. 産品包裝和新手指引： 00:09:35
基礎軟件操作（總時長01:40:23）
1..................... 做UI 需在PS 軟件中的設置： 00:05:07
2................ PS 鋼筆路徑形狀圖層布爾運算： 00:08:15
3...................... 圖層濛版路徑濛版剪切圖層： 00:08:24
4..................................... PS 選區的巧妙運用： 00:06:36
5...........................圖層命名規則圖層文件夾： 00:05:07
6.......................................圖層屬性圖層樣式： 00:12:17
7........................................... 如何標坐標切圖： 00:03:58
8........................................ CTRL_T 網格變換： 00:03:58
9...............................液化塗抹加深減淡工具： 00:06:52
10.............................邊緣透明度和精確對齊： 00:06:50
11....................................... PS 製作GIF 動畫： 00:03:41
12.............................麯綫色相亮度調節技巧： 00:06:28
13................................................PS 常用濾鏡： 00:04:58
14.............................AI 和PS 協同路徑作業： 00:08:07
15....................................AI 裏網格漸變功能： 00:05:48
· · · · · · (收起)
讀後感
評分
这本书非常的不错，内容非常易懂。非常的适合像我这种新手菜鸟。没接触到这本书之前。我学习UI碰到了很多难题。。现在有了这本书。。我这些难题，在书中都能找到。对我的帮助非常的大，所以我想推荐给各位还是新手菜鸟的人们。。不要错过了这本书哟。必须给上一百赞赞赞喲～～...
評分因为我之前是美术设计类的设计师，听说UI设计师起薪普遍高所以想转型做UI，进入UI行业之后才发现做起来不知道规范，很吃力，总是需要返工。有一次在京东逛发现了这本《UI设计必修课》，在打折期间比平时价格还要便宜，果断入了一本。 读完后感觉真心受益良多，原来在...
評分非常棒的书，还有很多开阔视野的资料 不但能提升脑洞，还能学到东西，强力推荐，能让你的能力的到质的飞跃。点32个赞啦！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
評分这是一本IT互联网业内，UI设计，交互类专业实用的优秀教科书！极大地填补了目前业内教科书的空白，本书不仅是一本教程书籍，同时其丰富的知识涵盖面使其又能成为一本极具参考价值的优秀工具书。我已经买了一本，同时推荐给同事们也买了好几本了，几乎人手一本。
評分非常棒的书，还有很多开阔视野的资料 不但能提升脑洞，还能学到东西，强力推荐，能让你的能力的到质的飞跃。点32个赞啦！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
用戶評價
评分
UI入門級書本
评分買來編寫課件
评分還是挺多乾貨的，就是比較籠統概述，沒有展開講很多。全麵瞭，也很難講細吧
评分啓濛。
评分啓濛。
相關圖書
本站所有內容均為互聯網搜索引擎提供的公開搜索信息，本站不存儲任何數據與內容，任何內容與數據均與本站無關，如有需要請聯繫相關搜索引擎包括但不限於百度，google,bing,sogou 等
© 2025 book.quotespace.org All Rights Reserved. 小美書屋 版权所有