第1章 UI設(shè)計(jì) 1
1.1 用戶界面 2
1.2 圖形 UI 2
1.2.1 Windows操作系統(tǒng)圖形 UI的發(fā)展過(guò)程 2
1.2.2 手機(jī)設(shè)備與圖形 UI的發(fā)展 8
1.3 UI設(shè)計(jì) 11
1.4 以用戶為中心的設(shè)計(jì) 13
1.5 交互設(shè)計(jì) 14
第2章 以用戶為中心的設(shè)計(jì) 17
2.1 用戶體驗(yàn) 18
2.1.1 用戶體驗(yàn)決定成敗 18
2.1.2 好的用戶體驗(yàn)原則 19
2.2 用戶研究 20
2.2.1 用戶是誰(shuí) 20
2.2.2 心理模型和表現(xiàn)模型 20
2.2.3 數(shù)字化生活方式 21
2.3 建立用戶角色的重要性 22
2.3.1 開(kāi)發(fā)者與用戶不同 22
2.3.2 設(shè)計(jì)要有針對(duì)性 22
2.3.3 人物角色使以用戶為中心落到實(shí)處 22
2.3.4 人物角色可以減少爭(zhēng)論，提高效率 22
2.4 產(chǎn)品規(guī)劃前期 23
2.4.1 產(chǎn)品規(guī)劃時(shí)效 23
2.4.2 明確產(chǎn)品價(jià)值和定位 23
2.4.3 明確產(chǎn)品生命周期 23
2.4.4 明確產(chǎn)品對(duì)象和終端 24
2.5 積累用戶需求池 24
2.5.1 訪談或問(wèn)卷調(diào)研用戶 24
2.5.2 用戶使用路徑分析 25
2.5.3 根據(jù)業(yè)務(wù)模塊窮舉法 25
2.5.4 其他渠道 25
2.6 建立有價(jià)值人物角色類型 25
2.6.1 人物角色數(shù)量 26
2.6.2 人物角色需求分級(jí) 26
2.7 人物角色簡(jiǎn)介 26
2.7.1 人物角色要具體化 26
2.7.2 編寫人物角色簡(jiǎn)介 27
2.8 編寫用戶情境 27
2.8.1 用戶情境的典型一天 27
2.8.2 編寫用戶情境 28
第3章 交互設(shè)計(jì) 29
3.1 人機(jī)交互 30
3.1.1 人機(jī)交互三要素 30
3.1.2 人機(jī)交互現(xiàn)狀與未來(lái) 30
3.2 UI中的交互設(shè)計(jì)思維 32
3.2.1 信息傳遞 32
3.2.2 交互行為 32
3.2.3 交互行為的變革 33
3.2.4 情感化設(shè)計(jì) 35
3.3 信息架構(gòu) 36
3.3.1 信息架構(gòu)師 36
3.3.2 信息架構(gòu)目標(biāo) 36
3.3.3 信息的選擇與組織 37
3.3.4 界面導(dǎo)航設(shè)計(jì) 39
3.4 流程圖 41
3.4.1 流程圖的基本構(gòu)成和常用符號(hào) 41
3.4.2 交互流程圖 42
3.4.3 制作流程圖常用軟件 42
3.5 交互原型設(shè)計(jì) 42
3.5.1 低保真原型設(shè)計(jì) 42
3.5.2 高保真原型設(shè)計(jì) 44
第4章 UI視覺(jué)元素 47
4.1 色彩元素 48
4.1.1 色彩屬性 48
4.1.2 色彩搭配的黃金法則 50
4.1.3 色彩搭配與界面風(fēng)格 51
4.2 文字元素 54
4.2.1 標(biāo)題類文字 54
4.2.2 正文類文字 57
4.2.3 提示類文字 60
4.2.4 交互類文字 60
4.2.5 行為召喚語(yǔ)句 61
4.2.6 文字動(dòng)畫(huà) 62
4.3 圖片元素 63
4.3.1 界面中圖片的種類 63
4.3.2 選擇圖片的原則 65
4.3.3 圖片常見(jiàn)比例 67
4.4 圖標(biāo)元素 69
4.4.1 圖標(biāo)的概念 69
4.4.2 圖標(biāo)設(shè)計(jì)原則 70
4.4.3 圖標(biāo)設(shè)計(jì)的注意事項(xiàng) 72
4.4.4 圖標(biāo)的視覺(jué)造型風(fēng)格 72
4.4.5 圖標(biāo)制作 74
4.5 控件元素 75
4.5.1 控件與圖標(biāo)的區(qū)別 75
4.5.2 控件設(shè)計(jì)的注意事項(xiàng) 76
4.5.3 常見(jiàn)的控件元素 76
4.6 視覺(jué)元素的交互狀態(tài) 79
第5章 軟件 UI設(shè)計(jì) 81
5.1 軟件 UI設(shè)計(jì)尺寸 82
5.2 軟件的歡迎界面 82
5.3 軟件的主界面 84
5.3.1 Top Frame區(qū) 85
5.3.2 菜單欄和工具欄 85
5.3.3 功能模塊區(qū) 86
5.3.4 工作區(qū) 87
5.3.5 狀態(tài)信息區(qū) 87
5.4 軟件界面的設(shè)計(jì)原則 87
5.4.1 界面與功能的適合性 87
5.4.2 界面意圖容易理解 88
5.4.3 及時(shí)反饋信息 89
5.4.4 防錯(cuò)處理 89
5.4.5 風(fēng)格一致和必要的個(gè)性化 90
5.4.6 合理的布局 90
5.4.7 合理的色彩 91
5.4.8 適應(yīng)用戶群體和國(guó)際化 92
5.4.9 最高效率 92
5.4.10 可復(fù)用 93
5.5 軟件界面各元素設(shè)計(jì)的基本規(guī)則 93
5.5.1 字體設(shè)計(jì)的基本規(guī)則 93
5.5.2 菜單界面設(shè)計(jì)的基本規(guī)則 93
5.5.3 命令按鈕設(shè)計(jì)的基本規(guī)則 94
5.5.4 工具條和圖標(biāo)按鈕設(shè)計(jì)的基本規(guī)則 94
5.5.5 提示信息設(shè)計(jì)的基本規(guī)則 94
5.5.6 單選按鈕設(shè)計(jì)的基本規(guī)則 95
5.5.7 復(fù)選按鈕設(shè)計(jì)的基本規(guī)則 95
5.5.8 輸入框和文本域設(shè)計(jì)的基本規(guī)則 96
5.5.9 組合下拉框和列表框設(shè)計(jì)的基本規(guī)則 96
5.5.10 多頁(yè)選項(xiàng)板設(shè)計(jì)的基本規(guī)則 96
5.5.11 數(shù)據(jù)表格設(shè)計(jì)的基本規(guī)則 97
5.5.12 日期控件設(shè)計(jì)的基本規(guī)則 97
5.5.13 軟件對(duì)話窗口設(shè)計(jì)的基本規(guī)則 98
5.5.14 軟件消息框設(shè)計(jì)的基本規(guī)則 98
5.6 窗口的交互規(guī)則 100
5.6.1 一般規(guī)則 100
5.6.2 焦點(diǎn)規(guī)則 101
5.6.3 選擇規(guī)則 101
第6章 移動(dòng) App UI設(shè)計(jì) 103
6.1 移動(dòng) App UI設(shè)計(jì)概念 104
6.2 移動(dòng) App UI設(shè)計(jì)的風(fēng)格類型 104
6.3 移動(dòng) App UI的設(shè)計(jì)原則 106
6.3.1 審美完整性原則 106
6.3.2 一致性原則 106
6.3.3 直接操作原則 106
6.3.4 提供反饋原則 106
6.3.5 隱喻的原則 107
6.3.6 用戶控制原則 107
6.4 移動(dòng)智能設(shè)備 107
6.5 移動(dòng)智能設(shè)備的操作系統(tǒng) 107
6.6 iOS系統(tǒng) UI設(shè)計(jì)規(guī)范 108
6.6.1 iOS常用術(shù)語(yǔ) 108
6.6.2 iOS設(shè)計(jì)尺寸 110
6.6.3 iOS適配 111
6.6.4 iOS界面布局規(guī)范 112
6.6.5 iOS文字規(guī)范 113
6.6.6 iOS圖標(biāo)規(guī)范 114
6.6.7 iOS交互注意事項(xiàng) 117
6.7 Android系統(tǒng) UI設(shè)計(jì)規(guī)范 118
6.7.1 Android常用術(shù)語(yǔ) 118
6.7.2 Android設(shè)計(jì)尺寸 119
6.7.3 Android適配 120
6.7.4 Android界面布局規(guī)范 120
6.7.5 Android文字規(guī)范 123
6.7.6 Android圖標(biāo)規(guī)范 124
6.7.7 Android交互的注意事項(xiàng) 126
6.7.8 Android的其他設(shè)計(jì)建議 126
6.8 Harmony OS系統(tǒng) UI設(shè)計(jì)規(guī)范 127
6.8.1 Harmony OS常用術(shù)語(yǔ) 127
6.8.2 Harmony OS界面布局規(guī)范 127
6.8.3 Harmony OS文字規(guī)范 127
6.8.4 Harmony OS圖標(biāo)規(guī)范 128
6.8.5 Harmony OS其他設(shè)計(jì)建議 128
6.9 移動(dòng) App切圖規(guī)則與規(guī)范 128
6.9.1 切圖類型 129
6.9.2 切圖范圍 129
6.9.3 最小觸擊區(qū)域 129
6.9.4 切圖命名 129
6.9.5 AI切圖演示 130
第7章 網(wǎng)頁(yè) UI設(shè)計(jì) 131
7.1 常用術(shù)語(yǔ) 132
7.1.1 網(wǎng)站 132
7.1.2 網(wǎng)頁(yè) 132
7.1.3 瀏覽器 132
7.2 網(wǎng)頁(yè)界面風(fēng)格 132
7.2.1 嚴(yán)肅穩(wěn)重型 132
7.2.2 綜合流量型 133
7.2.3 簡(jiǎn)潔大氣型 133
7.2.4 生動(dòng)活潑型 134
7.2.5 時(shí)尚個(gè)性型 134
7.2.6 傳統(tǒng)古樸型 134
7.3 屏幕分辨率與自適應(yīng) 135
7.3.1 橫屏 135
7.3.2 豎屏 140
7.4 網(wǎng)頁(yè)的柵格布局 141
7.5 網(wǎng)頁(yè)布局參考 142
7.6 網(wǎng)頁(yè)字體 145
7.7 網(wǎng)頁(yè)切圖 145
7.7.1 切圖的原則 145
7.7.2 切圖的技巧 145
7.7.3 切圖的類型 145
第8章 游戲 UI設(shè)計(jì) 147
8.1 游戲的分類 148
8.2 游戲 UI的獨(dú)特性 154
8.2.1 視覺(jué)風(fēng)格 154
8.2.2 互動(dòng)感受 155
8.2.3 復(fù)雜性 155
8.3 游戲 UI的職能 156
8.3.1 實(shí)現(xiàn)功能切換 156
8.3.2 實(shí)現(xiàn)反饋交流 156
8.3.3 實(shí)現(xiàn)沉浸式體驗(yàn) 157
8.4 游戲 UI設(shè)計(jì)前期工作 158
8.4.1 明確游戲的世界觀 158
8.4.2 明確游戲的整體風(fēng)格 159
8.5 游戲 UI設(shè)計(jì)原則 161
8.5.1 統(tǒng)一性原則 161
8.5.2 易用性原則 162
8.5.3 習(xí)慣與認(rèn)知原則 163
8.5.4 容錯(cuò)性原則 164
8.5.5 及時(shí)信息反饋原則 164
8.6 手游 UI設(shè)計(jì)的限制 165
8.6.1 尺寸限制 165
8.6.2 性能限制 165
8.6.3 分辨率限制 165
8.6.4 音效限制 165
8.6.5 操控限制 166
8.6.6 沉浸式體驗(yàn)限制 166
8.7 手游 UI設(shè)計(jì)注意事項(xiàng) 166
8.7.1 更高的易用性 166
8.7.2 更及時(shí)的反饋 166
8.7.3 更多樣化的操作控制 167
第9章 UI設(shè)計(jì)項(xiàng)目案例 169
9.1 找到你App產(chǎn)品定位 170
9.1.1 行業(yè)背景 170
9.1.2 調(diào)研手段 170
9.1.3 用戶需求 171
9.1.4 定位分析 171
9.1.5 建立人物角色與情境 172
9.2 交互設(shè)計(jì) 173
9.2.1 產(chǎn)品框架 173
9.2.2 低保真原型圖設(shè)計(jì) 173
9.3 視覺(jué)設(shè)計(jì) 175
9.3.1 標(biāo)志設(shè)計(jì) 175
9.3.2 圖標(biāo)設(shè)計(jì) 176
9.3.3 高保真原型圖設(shè)計(jì) 177
9.4 后期測(cè)試與維護(hù) 180
9.4.1 項(xiàng)目評(píng)審與測(cè)試 180
9.4.2 意見(jiàn)反饋與迭代 184
參考文獻(xiàn) 185
書(shū)單推薦
