第一章 UI 編排基礎 001
一、UI 設計概述 002
1 UI 設計的定義
2 UI 設計相關術語
3 手勢交互方式
二、UI 設計的視覺規(guī)范 006
1 度量單位
2 界面尺寸
三、界面類型 012
1 引導頁
2 引導頁類型
3 首頁
4 個人中心頁
5 列表頁
6 音視頻播放頁
7 詳情頁
8 注冊登錄頁面
9 側導航頁
10 圖表頁
四、游戲界面類型 028
1 登錄界面
2 加載界面
3 關卡界面
4 情景提示界面
5 地圖界面
6 結算界面
五、網(wǎng)頁界面設計 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 機構型網(wǎng)頁

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

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

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

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

附錄　各類界面參考模板 179

參考文獻 192