UI設(shè)計(jì)技術(shù)與應(yīng)用案例解析

UI設(shè)計(jì)基礎(chǔ)知識(shí)
1.1 UI設(shè)計(jì)概述
1.1.1 UI設(shè)計(jì)的概
1.1.2 UI設(shè)計(jì)的基本原ň
1.1.3 UI設(shè)計(jì)的流
1.1.4 UI設(shè)計(jì)的常用軟
1.2 UI設(shè)計(jì)方向
1.2.1 用戶研
1.2.2 交互設(shè)
1.2.3 界面設(shè)
1.3 UI界面設(shè)計(jì)原則
1.3.1 一致性原ň
1.3.2 準(zhǔn)確性原ň
1.3.3 可讀性原ň
1.3.4 布局合理化原ň
1.3.5 系統(tǒng)操作合理性原ň
1.3.6 系統(tǒng)響應(yīng)時(shí)間原ň
1.4 UI設(shè)計(jì)規(guī)范
1.4.1 文字應(yīng)用規(guī)
1.4.2 圖片應(yīng)用規(guī)
1.4.3 色彩應(yīng)用規(guī)
課后練習(xí) 收集不同類(lèi)別的UI界面設(shè)計(jì)
拓展賞析 中國(guó)的榫卯工
圖像處理知識(shí)準(zhǔn)備
2.1 基礎(chǔ)知識(shí)詳解
2.1.1 案例解析：制作九宮格效
2.1.2 認(rèn)識(shí)工作界
2.1.3 圖像的輔助調(diào)整
2.1.4 圖像的顯示調(diào)整
2.1.5 圖像的變形與變
2.1.6 圖像的修飾與修
2.2 圖形的繪制與填
2.2.1 案例解析：重構(gòu)圖像顯示
2.2.2 選框工具
2.2.3 畫(huà)筆工具組
2.2.4 鋼筆工具組
2.2.5 形狀工具組
2.2.6 取樣、填充顏
2.2.7 漸變工
2.3 文本的創(chuàng)建與編
2.3.1 案例解析：制作電商Banner
2.3.2 認(rèn)識(shí)文本工
2.3.3 創(chuàng)建文
2.3.4 編輯文
2.4 蒙版和通道
2.4.1 案例解析：制作圓角方形頭像
2.4.2 認(rèn)識(shí)通道
2.4.3 認(rèn)識(shí)蒙
2.5 圖像的色彩調(diào)整
2.5.1 案例解析：提取圖像線稿
2.5.2 色
2.5.3 曲
2.5.4 色ǜ飽和
2.5.5 色彩平
2.5.6 去
2.6 圖像的 應(yīng)用
2.6.1 案例解析：制作動(dòng)感飛馳效果
2.6.2 圖層樣
2.6.3 獨(dú)立濾鏡組
2.6.4 濾鏡組
課堂實(shí)戰(zhàn) 制作平鋪背景效果
課后練習(xí) 制作千圖成像效果
拓展賞析 傳世名畫(huà)：清明上河圖
圖形元素的設(shè)計(jì)技
3.1 基礎(chǔ)知識(shí)詳解
3.1.1 案例解析：快速調(diào)整圖像尺
3.1.2 認(rèn)識(shí)工作界
3.1.3 畫(huà)板的尺寸調(diào)整
3.2 基礎(chǔ)圖形的繪制與填充
3.2.1 案例解析：繪制卡通云
3.2.2 繪制線段和網(wǎng)格
3.2.3 繪制幾何形
3.2.4 構(gòu)建新的形
3.2.5 設(shè)置填充與描邊
3.3 路徑的繪制與編
3.3.1 案例解析：繪制手賬本簡(jiǎn)筆畫(huà)
3.3.2 繪制路
3.3.3 調(diào)整路
3.3.4 編輯路
3.4 對(duì)象的選擇與變
3.4.1 案例解析：制作流動(dòng)的山
3.4.2 對(duì)象的選擇
3.4.3 對(duì)象的對(duì)齊和分
3.4.4 對(duì)象的排列
3.4.5 對(duì)象的變
3.4.6 對(duì)象的 編
3.5 文本的創(chuàng)建與編
3.5.1 案例解析：制作網(wǎng)站Banner
3.5.2 創(chuàng)建文
3.5.3 編輯文
3.6 與樣式的添
3.6.1 案例解析：制作多重文字描邊效果
3.6.2 Illustrator效果
3.6.3 Photoshop效果
3.6.4 外觀與圖形樣式
課堂實(shí)戰(zhàn) 制作拆分文字效果
課后練習(xí) 制作立體按鈕
拓展賞析 中國(guó)的水墨動(dòng)ǔ
產(chǎn)品設(shè)計(jì)交互工具
4.1 認(rèn)識(shí)MasterGo
4.1.1 MasterGo工作界面
4.1.2 視圖選項(xiàng)調(diào)整
4.1.3 標(biāo)尺和參考線
4.2 MasterGo基礎(chǔ)工具
4.2.1 案例解析：繪制半圓效果
4.2.2 選擇工具
4.2.3 容器工
4.2.4 形狀工
4.2.5 鋼筆工
4.2.6 文本工
4.3 MasterGo組件和樣
4.3.1 案例解析：應(yīng)用預(yù)設(shè)樣式
4.3.2 創(chuàng)建組
4.3.3 應(yīng)用預(yù)設(shè)組
4.3.4 創(chuàng)建樣
4.4 MasterGo原型交互
4.4.1 案例解析：原型內(nèi)容的固定與滾動(dòng)
4.4.2 了解原型模
4.4.3 交互—觸發(fā)和動(dòng)作
4.4.4 交互—?jiǎng)赢?huà)和效果
4.4.5 溢出行
4.4.6 約束設(shè)
4.4.7 原型演
4.5 MasterGo協(xié)同評(píng)論
4.5.1 文件分
4.5.2 了解標(biāo)注模
4.5.3 評(píng)論工
4.6 MasterGo切圖和導(dǎo)
4.6.1 創(chuàng)建切
4.6.2 導(dǎo)出預(yù)
4.6.3 導(dǎo)出Sketch格式
課堂實(shí)戰(zhàn) 制作網(wǎng)站登錄界面
課后練習(xí) 制作App首頁(yè)界面
拓展賞析 中國(guó)喜慶的裝飾藝術(shù)：年畫(huà)
組件與圖標(biāo)設(shè)
5.1 UI的控件、組
5.1.1 UI控件詳解
5.1.2 UI組件詳解
5.2 按鈕的設(shè)計(jì)
5.2.1 按鈕的組成
5.2.2 按鈕的設(shè)計(jì)類(lèi)型
5.2.3 按鈕的設(shè)計(jì)風(fēng)格
5.3 圖標(biāo)的設(shè)計(jì)
5.3.1 圖標(biāo)的類(lèi)型
5.3.2 圖標(biāo)的設(shè)計(jì)風(fēng)格
5.3.3 圖標(biāo)的設(shè)計(jì)規(guī)范
課堂實(shí)戰(zhàn) 音樂(lè)應(yīng)用圖標(biāo)設(shè)計(jì)
課后練習(xí) 制作便簽圖標(biāo)
拓展賞析 中國(guó)古代三大印花工藝
App界面設(shè)計(jì)
6.1 App常用界面類(lèi)型
6.1.1 閃屏頁(yè)
6.1.2 引導(dǎo)頁(yè)
6.1.3 注冊(cè)登錄頁(yè)
6.1.4 空白頁(yè)
6.1.5 首ɡ
6.1.6 個(gè)人中心頁(yè)
6.2 App界面視覺(jué)設(shè)計(jì)
6.2.1 顏色規(guī)
6.2.2 圖片規(guī)
6.2.3 邊距和間距
6.3 ios設(shè)計(jì)規(guī)范指南
6.3.1 界面尺
6.3.2 文字規(guī)
6.4 Android設(shè)計(jì)規(guī)范指南
6.4.1 界面尺
6.4.2 文字