第一章 UI 編排基礎(chǔ) 001
一、UI 設(shè)計概述 002
1 UI 設(shè)計的定義
2 UI 設(shè)計相關(guān)術(shù)語
3 手勢交互方式
二、UI 設(shè)計的視覺規(guī)范 006
1 度量單位
2 界面尺寸
三、界面類型 012
1 引導(dǎo)頁
2 引導(dǎo)頁類型
3 首頁
4 個人中心頁
5 列表頁
6 音視頻播放頁
7 詳情頁
8 注冊登錄頁面
9 側(cè)導(dǎo)航頁
10 圖表頁
四、游戲界面類型 028
1 登錄界面
2 加載界面
3 關(guān)卡界面
4 情景提示界面
5 地圖界面
6 結(jié)算界面
五、網(wǎng)頁界面設(shè)計 034
1 網(wǎng)站
2 組成網(wǎng)頁的對象
3 網(wǎng)頁的基本編排方式
六、網(wǎng)頁界面分類 040
1 個人型網(wǎng)頁
2 門戶型網(wǎng)頁
3 企業(yè)型網(wǎng)頁
4 功能型網(wǎng)頁
5 娛樂型網(wǎng)頁
6 機(jī)構(gòu)型網(wǎng)頁

第二章 UI 編排中的圖標(biāo) 045
一、UI 中的圖標(biāo)設(shè)計 046
1 圖標(biāo)的含義
2 圖標(biāo)設(shè)計規(guī)范
3 圖標(biāo)設(shè)計中常見的問題
二、UI 圖標(biāo)中的常用圖形 050
1 圓形、橢圓形
2 正方形、長方形
3 三角形
三、圖標(biāo)的風(fēng)格種類 052
1 擬物化圖標(biāo)
2 扁平化圖標(biāo)
3 MBE 風(fēng)格圖標(biāo)
4 像素風(fēng)格圖標(biāo)
5 線性風(fēng)格圖標(biāo)
6 立體風(fēng)格圖標(biāo)
四、游戲界面中的圖標(biāo) 058
五、游戲界面圖標(biāo)分類 060
1 功能性圖標(biāo)
2 道具性圖標(biāo)
六、網(wǎng)頁界面中的圖標(biāo) 062

第三章 UI 編排中的布局與構(gòu)圖 063
一、UI 編排中的點、線、面 064
1 UI 編排中的點
2 UI 編排中的線
3 UI 編排中的面
二、UI 編排中的視覺規(guī)律 068
1 視覺中心
2 視覺重心
3 視域
4 視覺流程
5 版面率
三、UI 編排設(shè)計的方式 074
1 標(biāo)準(zhǔn)式
2 定位式
3 斜置式
4 中軸式
5 文字式
6 圖片式
7 水平式
8 指示式
四、UI 編排中的黃金比例 080
1 黃金比例 2 UI 設(shè)計中的黃金比例
五、網(wǎng)格化構(gòu)圖 084
六、三角形構(gòu)圖 087
七、對角線構(gòu)圖 089
八、放射形構(gòu)圖 091
九、S 形構(gòu)圖 093
十、對齊元素 095
1 齊左
2 居中
3 齊行
十一、滿版式構(gòu)圖 097
十二、標(biāo)準(zhǔn)式構(gòu)圖 098
十三、體現(xiàn)條理 099
十四、倒L形構(gòu)圖 101
十五、F形瀏覽模式 103

第四章　UI 編排中的文字和圖片 105
一、UI 編排中的文字 106
1 字體基礎(chǔ)
2 字體樣式
二、文字編排專業(yè)術(shù)語 111
1 中文字符與字體大小
2 英文字符與字體大小
3 字符空格和字距
4 行空格和行距
5 復(fù)合字體
三、 UI 字體規(guī)范 114
1 系統(tǒng)字體
2 字體色彩
四、合適的字距與行距 116
五、強(qiáng)調(diào)和區(qū)分 118
六、選用合適的字體 120
1 游戲界面字體
2 強(qiáng)調(diào)文字
七、文字圖像化 124
八、界面編排中的圖片 126
1 位圖和矢量圖
2 常見的位圖圖片格式
3 常見的矢量圖圖片格式
九、圖片的形態(tài)與處理方法 131
1 大面積使用圖片
2 圖片的裁剪處理
3 圖片的局部提取運用
4 圖片的裝飾效果
十、合理裁切圖片 134
十一、圖片最大化 136
十二、 添加裝飾元素 138

第五章　UI 編排中的配色 139
一、色彩的基礎(chǔ)知識 140
1 三原色
2 間色
3 復(fù)色
二、色彩三要素 141
1 要素1: 色相
2 要素2: 明度
3 要素3: 純度
三、色彩模式 146
1 RGB 色彩模式
2 CMYK 色彩模式
四、色彩的感覺 148
1 色彩的溫度感
2 色彩的距離感
3 色彩的體量感
4 色彩的重量感
五、界面中的常用色及意象表達(dá) 151
1 紅色
2 橙色
3 黃色
4 綠色
5 藍(lán)色
6 紫色
7 黑色
8 白色
六、利用色彩增加文本可讀性 159
七、利用色彩表現(xiàn)食欲 161
八、利用黑色渲染高品質(zhì)氛圍 163
九、為頁面增加趣味性 165
十、利用色彩表現(xiàn)浪漫感 167
十一、利用色彩表現(xiàn)年齡 169
十二、利用色彩制造對比 171
十三、利用色彩提高界面視覺度 173
十四、利用色彩表現(xiàn)壓迫感 175
十五、利用色塊區(qū)分界面信息 177

附錄　各類界面參考模板 179

參考文獻(xiàn) 192