藝術(shù)設(shè)計必修課：UI設(shè)計

第一章 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 機構(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 五、強調(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 一、色彩的基礎(chǔ)知識   140 1 三原色  2 間色  3 復(fù)色 二、色彩三要素  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