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

UI設(shè)計基礎(chǔ)知識
1.1 UI設(shè)計概述
1.1.1 UI設(shè)計的概
1.1.2 UI設(shè)計的基本原ň
1.1.3 UI設(shè)計的流
1.1.4 UI設(shè)計的常用軟
1.2 UI設(shè)計方向
1.2.1 用戶研
1.2.2 交互設(shè)
1.2.3 界面設(shè)
1.3 UI界面設(shè)計原則
1.3.1 一致性原ň
1.3.2 準確性原ň
1.3.3 可讀性原ň
1.3.4 布局合理化原ň
1.3.5 系統(tǒng)操作合理性原ň
1.3.6 系統(tǒng)響應(yīng)時間原ň
1.4 UI設(shè)計規(guī)范
1.4.1 文字應(yīng)用規(guī)
1.4.2 圖片應(yīng)用規(guī)
1.4.3 色彩應(yīng)用規(guī)
課后練習(xí) 收集不同類別的UI界面設(shè)計
拓展賞析 中國的榫卯工
圖像處理知識準備
2.1 基礎(chǔ)知識詳解
2.1.1 案例解析：制作九宮格效
2.1.2 認識工作界
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 畫筆工具組
2.2.4 鋼筆工具組
2.2.5 形狀工具組
2.2.6 取樣、填充顏
2.2.7 漸變工
2.3 文本的創(chuàng)建與編
2.3.1 案例解析：制作電商Banner
2.3.2 認識文本工
2.3.3 創(chuàng)建文
2.3.4 編輯文
2.4 蒙版和通道
2.4.1 案例解析：制作圓角方形頭像
2.4.2 認識通道
2.4.3 認識蒙
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 案例解析：制作動感飛馳效果
2.6.2 圖層樣
2.6.3 獨立濾鏡組
2.6.4 濾鏡組
課堂實戰(zhàn) 制作平鋪背景效果
課后練習(xí) 制作千圖成像效果
拓展賞析 傳世名畫：清明上河圖
圖形元素的設(shè)計技
3.1 基礎(chǔ)知識詳解
3.1.1 案例解析：快速調(diào)整圖像尺
3.1.2 認識工作界
3.1.3 畫板的尺寸調(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 案例解析：繪制手賬本簡筆畫
3.3.2 繪制路
3.3.3 調(diào)整路
3.3.4 編輯路
3.4 對象的選擇與變
3.4.1 案例解析：制作流動的山
3.4.2 對象的選擇
3.4.3 對象的對齊和分
3.4.4 對象的排列
3.4.5 對象的變
3.4.6 對象的 編
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 外觀與圖形樣式
課堂實戰(zhàn) 制作拆分文字效果
課后練習(xí) 制作立體按鈕
拓展賞析 中國的水墨動ǔ
產(chǎn)品設(shè)計交互工具
4.1 認識MasterGo
4.1.1 MasterGo工作界面
4.1.2 視圖選項調(diào)整
4.1.3 標尺和參考線
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)容的固定與滾動
4.4.2 了解原型模
4.4.3 交互—觸發(fā)和動作
4.4.4 交互—動畫和效果
4.4.5 溢出行
4.4.6 約束設(shè)
4.4.7 原型演
4.5 MasterGo協(xié)同評論
4.5.1 文件分
4.5.2 了解標注模
4.5.3 評論工
4.6 MasterGo切圖和導(dǎo)
4.6.1 創(chuàng)建切
4.6.2 導(dǎo)出預(yù)
4.6.3 導(dǎo)出Sketch格式
課堂實戰(zhàn) 制作網(wǎng)站登錄界面
課后練習(xí) 制作App首頁界面
拓展賞析 中國喜慶的裝飾藝術(shù)：年畫
組件與圖標設(shè)
5.1 UI的控件、組
5.1.1 UI控件詳解
5.1.2 UI組件詳解
5.2 按鈕的設(shè)計
5.2.1 按鈕的組成
5.2.2 按鈕的設(shè)計類型
5.2.3 按鈕的設(shè)計風(fēng)格
5.3 圖標的設(shè)計
5.3.1 圖標的類型
5.3.2 圖標的設(shè)計風(fēng)格
5.3.3 圖標的設(shè)計規(guī)范
課堂實戰(zhàn) 音樂應(yīng)用圖標設(shè)計
課后練習(xí) 制作便簽圖標
拓展賞析 中國古代三大印花工藝
App界面設(shè)計
6.1 App常用界面類型
6.1.1 閃屏頁
6.1.2 引導(dǎo)頁
6.1.3 注冊登錄頁
6.1.4 空白頁
6.1.5 首ɡ
6.1.6 個人中心頁
6.2 App界面視覺設(shè)計
6.2.1 顏色規(guī)
6.2.2 圖片規(guī)
6.2.3 邊距和間距
6.3 ios設(shè)計規(guī)范指南
6.3.1 界面尺
6.3.2 文字規(guī)
6.4 Android設(shè)計規(guī)范指南
6.4.1 界面尺
6.4.2 文字