UI設計基礎與應用標準教程（全彩微課版）

第1章 UI設計學習入門 1.1 了解UI設計 2 1.1.1 UI設計簡介 2 1.1.2 UI設計原則 3 1.1.3 UI設計流程 4 1.1.4 UI設計常用軟件 5 注意事項在線制作網(wǎng)站7 1.1.5 UI設計行業(yè)的發(fā)展 7 1.2 UI設計方向 8 1.2.1 用戶研究 8 1.2.2 交互設計 8 1.2.3 界面設計 8 1.3 UI設計的設計規(guī)范 9 1.3.1 一致性 9 1.3.2 準確性 9 1.3.3 可讀性 10 1.3.4 布局合理化 10 1.3.5 系統(tǒng)操作合理性 10 1.3.6 系統(tǒng)響應時間 11 1.4 UI設計的色彩基礎 11 1.4.1 色彩的基礎知識 11 知識點撥色相環(huán)的色彩構(gòu)成12 1.4.2 色彩搭配 14 實戰(zhàn)演練：UI設計欣賞 16 新手答疑 18     第2章 圖標設計 2.1 圖標的設計規(guī)范 20 2.1.1 圖標的尺寸規(guī)范 20 注意事項圖標切圖21 2.1.2 圖標的視覺規(guī)范 21 動手練 制作視頻播放器圖標 23 2.2 圖標的基礎知識 26 2.2.1 圖標的概念 26 2.2.2 圖標的設計原則 27 動手練 制作文件袋圖標 28 2.3 圖標的風格類型 33 2.3.1 像素風格 33 2.3.2 扁平化風格 33 知識點撥線性圖標分類34 知識點撥面性圖標分類34 2.3.3 擬物風格 35 2.3.4 立體風格 35 動手練 制作面性圖標 35 實戰(zhàn)演練：制作扁平化風格圖標 39 新手答疑 44     第3章 控件設計 3.1 控件的基礎知識 46 3.1.1 控件的概念 46 注意事項控件和組件46 3.1.2 控件的規(guī)范 47 動手練 制作搜索框控件 48 3.2 常見控件類型 50 3.2.1 按鈕控件 50 動手練 制作不同狀態(tài)的按鈕控件 52 3.2.2 選擇控件 55 知識點撥單選按鈕56 3.2.3 文本輸入框控件 56 3.2.4 彈框控件 57 實戰(zhàn)演練：制作升級彈框 58 新手答疑 62     第4章 動效設計 4.1 UI動效簡介 64 4.1.1 認識UI動效 64 4.1.2 UI動效類型 64 動手練 制作掃碼動效 65 4.2 制作UI動效 70 4.2.1 After Effects的工作界面 70 知識點撥工作區(qū)設置71 4.2.2 UI動效制作 71 知識點撥重新設置合成72 知識點撥添加關鍵幀74 注意事項關鍵幀應用74 4.2.3 蒙版和形狀 74 知識點撥鍵盤↑↓鍵的妙用75 4.2.4 輸出動效 76 動手練 制作logo的出現(xiàn)動效 76 實戰(zhàn)演練：制作加載動效 79 新手答疑 84     第5章 App界面設計 5.1 App界面設計規(guī)范 86 5.1.1 iOS系統(tǒng)設計規(guī)范 86 知識點撥最小點擊區(qū)域88 注意事項最小字號89 5.1.2 Android系統(tǒng)設計規(guī)范 89 注意事項Android界面常用尺寸90 5.2 App界面常見類型 91 5.2.1 閃屏頁 91 5.2.2 引導頁 92 注意事項功能介紹型引導頁分類92 5.2.3 注冊登錄頁 93 注意事項注冊登錄頁分類94 動手練 制作食味App登錄注冊頁 94 5.2.4 空白頁 97 5.2.5 首頁 98 5.2.6 個人中心頁 99 注意事項其他常見頁面99 動手練 制作食味App個人中心頁 99 實戰(zhàn)演練：制作旅行客App常用頁面 103 新手答疑 112     第6章 網(wǎng)頁界面設計 6.1 網(wǎng)頁界面設計規(guī)范 114 6.1.1 網(wǎng)頁尺寸規(guī)范 114 注意事項首屏高度115 6.1.2 網(wǎng)頁界面結(jié)構(gòu)規(guī)范 115 6.1.3 網(wǎng)頁界面布局規(guī)范 115 注意事項網(wǎng)格列數(shù)116 6.1.4 網(wǎng)頁界面字體規(guī)范 116 動手練 制作花間集網(wǎng)站首頁 116 6.2 網(wǎng)頁界面常見類型 125 6.2.1 首頁 125 6.2.2 欄目頁 126 6.2.3 詳情頁 127 動手練 制作花間集網(wǎng)站詳情頁 128 6.2.4 專題頁 133 實戰(zhàn)演練：制作飲炊美食網(wǎng)站首頁 133 新手答疑 142     第7章 軟件界面設計 7.1 軟件界面設計規(guī)范 144 7.1.1 軟件界面結(jié)構(gòu)布局規(guī)范 144 7.1.2 軟件界面尺寸規(guī)范 145 知識點撥斷點145 7.1.3 軟件界面字體規(guī)范 145 知識點撥常見無襯線體和襯線體146 注意事項文字間距147 7.1.4 軟件圖標規(guī)范 147 動手練 制作繪圖軟件啟動頁 148 7.2 軟件界面常見類型 151 7.2.1 啟動頁 151 7.2.2 著陸頁 151 7.2.3 集合頁 152 動手練 制作繪圖軟件集合頁 152 7.2.4 主/細節(jié)頁 157 7.2.5 詳細信息頁 158 7.2.6 表單頁 158 實戰(zhàn)演練：制作視頻軟件界面 159 新手答疑 168     第8章 界面的標注與切圖 8.1 界面標注 170 8.1.1 標注內(nèi)容 170 注意事項極限值170 注意事項圖標標注171 知識點撥其他需要標注的內(nèi)容171 注意事項標注單位171 8.1.2 標注工具 171 動手練 標注App注冊登錄頁 172 8.2 界面切圖 175 8.2.1 切圖原則 176 知識點撥點九切圖176 知識點撥圖標切圖176 注意事項不需要切圖元素176 8.2.2 切圖命名規(guī)范 176 注意事項切圖命名原因177 8.2.3 切圖工具 177 動手練 切圖并輸出網(wǎng)頁界面 178 實戰(zhàn)演練：標注軟件界面并進行切圖 181 新手答疑 188     第9章 綜合實戰(zhàn)案例 9.1 設計美食App界面 190 9.1.1 設計思路 190 9.1.2 制作閃屏頁 190 注意事項參考線的區(qū)別191 9.1.3 制作首頁 193 9.1.4 制作詳情頁 201 9.2 設計移動端創(chuàng)意圖標 208 9.2.1 設計思路 208 9.2.2 設計準備之畫板的創(chuàng)建 208 9.2.3 繪制界面圖標 210 9.2.4 繪制交流類應用圖標 214 9.2.5 繪制其他常見圖標 216