第一部分 知識準備

第1章 UI設計相關知識 1

1.1 UI設計 1

1.1.1 UI設計的概念 1

1.1.2　UI設計的流程 2

1.1.3　UI設計的規范 4

1.1.4 UI設計常用工具 6

1.2 UI設計與用戶體驗 7

1.2.1 UI設計與用戶體驗概述 7

1.2.2 影響用戶體驗的因素 8

1.3 知識拓展 9

1.3.1 Photoshop CC 2017入門 9

1.3.2 Photoshop CC 2017精彩新功能 9

1.3.3 圖像常用基本操作 12

1.3.4 選區的基本操作 15

1.3.5 畫筆工具的應用 17

本章小結 19

第2章 UI設計的常用方法 20

2.1 UI設計中的設計方法 20

2.1.1 方法與方法論 20

2.1.2 設計方法學 20

2.1.3 UI設計中實用的設計方法 21

2.2 UI設計中實用的構成方法 23

2.2.1 什么是構成 23

2.2.2 形式美法則 23

2.2.3 構成的思維方式 29

2.3 UI設計中實用的色彩搭配技巧 31

2.3.1 色彩的基本理論 31

2.3.2 色彩搭配法則 33

2.4 知識拓展 45

2.4.1 扁平化設計風格 45

2.4.2 擬物化設計風格 47

2.4.3 卡通化設計風格 47

2.5 能力拓展 47

2.5.1 圖層類別 47

2.5.2 圖層的基礎操作 47

2.5.3 圖層樣式 48

2.5.4 混合模式 49

2.5.5 Photoshop中的蒙版 50

2.5.6 漸變工具 54

本章小結 56

第二部分 牛刀小試

第3章 各種UI常用元素制作 57

3.1 常用背景制作 57

3.1.1 壁紙 57

3.1.2 圖標背板 62

3.2 常見控件制作 64

3.2.1 按鈕的制作 64

3.2.2 下拉選擇框的制作 65

3.2.3 滑動條的制作 68

3.2.4 TAB切換塊的制作 70

3.2.5 氣泡對話框的制作 72

3.3 創意圖標設計與制作 73

3.3.1 圖標設計的基本知識 73

3.3.2 利用Photoshop打造擬物化圖標 77

3.3.3 利用Photoshop打造扁平化圖標 82

3.3.4 利用Photoshop打造單色圖標 85

3.3.5 利用Photoshop打造線性圖標 87

3.4 知識拓展 87

3.4.1 圖標設計的趨勢—響應式圖標 87

3.4.2 路徑與形狀工具 88

3.4.3 擦除類工具 90

3.5 能力拓展 91

3.5.1 設計制作簡單網頁 91

3.5.2 獨立實踐 97

本章小結 98

第三部分 UI設計典型實戰

第4章 操作型APP—計算器界面設計 99

4.1　UI設計任務分析 99

4.2　學習目標 100

4.3　制作步驟詳解 100

4.3.1 新建文件，確定尺寸規范 100

4.3.2 制作背景 100

4.3.3 制作狀態欄區域 101

4.3.4 制作顯示區細節 101

4.3.5 制作功能鍵區和數字鍵區細節 101

4.3.6 定稿輸出有效的設計方案 102

4.4 知識拓展 103

4.4.1 圖層組 103

4.4.2 APP界面設計概述 104

4.4.3 APP界面布局設計 105

4.4.4 Photoshop外部素材的載入使用 105

4.5 能力拓展 106

4.5.1 設計制作水平儀UI 106

4.5.2 設計制作拼拼樂APP界面 107

4.5.3 獨立實踐 111

本章小結 111

第5章 實用型軟件—播放器界面設計 112

5.1　UI設計任務分析 112

5.2 學習目標 112

5.3 制作步驟詳解 112

5.3.1　創建播放器 112

5.3.2　制作播放器專輯信息部分 114

5.3.3　制作播放器播放按鈕部分 117

5.4 知識拓展 121

5.4.1 色彩的搭配 121

5.4.2 Photoshop中的色彩調整 121

5.5 能力拓展 122

5.5.1 設計制作DVD光盤圖標 122

5.5.2 設計制作金屬按鈕 123

5.5.3 為黑白照片調色 123

5.5.4 獨立實踐 126

本章小結 126

第6章 手機主題UI設計 127

6.1 UI設計任務分析 127

6.2 學習目標 128

6.3 制作步驟詳解 128

6.3.1 制作主題形象 128

6.3.2 制作手機壁紙 129

6.3.3 制作鎖屏界面 130

6.3.4 制作天氣插件 131

6.3.5 制作桌面圖標 136

6.4 知識拓展 142

6.4.1 手機界面設計原則 142

6.4.2 手機常用尺寸與圖標格式 143

6.5 能力拓展 144

6.5.1 設計制作ico圖標 144

6.5.2 設計制作偽扁平化手機主題界面 145

6.5.3 獨立實踐 146

本章小結 146

第7章 Web界面設計實例—兒童節專題網頁設計 147

7.1　UI設計任務分析 147

7.2 學習目標 148

7.3 制作步驟詳解 148

7.3.1 制作頭部主圖 148

7.3.2 制作裝飾圖形 161

7.3.3 制作欄目“書籍系列” 167

7.3.4 制作欄目“服飾系列” 175

7.3.5 制作欄目“玩具系列” 178

7.3.6 制作底部區域 181

7.4 知識拓展 183

7.4.1 網站界面設計基本原則 183

7.4.2 網站界面的功能美與形式美 183

7.5 能力拓展 184

7.5.1 打造照射在透明玻璃窗上的效果 184

7.5.2 打造傾盆大雨效果 185

7.5.3 設計制作電子商務網頁界面 185

7.5.4 強化全局觀念 198

7.5.5 獨立實踐 198

本章小結 198

第8章 智能電視界面設計 199

8.1　UI設計任務分析 199

8.2　學習目標 199

8.3 制作步驟詳解 199

8.3.1 制作主界面 199

8.3.2 制作影視劇列表頁 205

8.3.3 制作影視劇詳情頁 207

8.3.4 制作播放頁 209

8.4 知識拓展 211

8.4.1 智能電視界面設計 211

8.4.2 智能電視界面設計的原則 212

8.5 能力拓展 212

8.5.1 設計制作樂視TV界面 212

8.5.2 獨立實踐 213

本章小結 213

參考文獻 2142100433B

本書按照高職高專計算機多媒體技術專業教學大綱的要求編寫，是一本全面的UI界面設計與制作的基礎教程。本書以培養學生的UI設計理念、方法為基本，結合Photoshop軟件中常用的各種工具和方法，有針對性地剖析設計制作的實施策略與過程，以訓練和提高學生UI界面設計制作技能。全書共8章，分為3個部分。第一部分是UI界面設計相關知識的介紹，包括什么是UI界面設計、UI界面設計的常用方法和設計工具、UI設計與用戶體驗的關系等基本知識。第二部分是各種UI界面常用元素的制作。第三部分是UI界面設計典型實戰，通過5個遞進的設計實例，從任務分析、功能定位、制作步驟入手對界面設計制作進行全過程講解。本書適合作為高等院校計算機類專業的教材，也可供平面設計人員、美工人員和對UI設計感興趣的讀者閱讀和參考，還可幫助UI設計師迅速進入職場角色。為方便教學，本書提供電子課件等教學資源，請登錄華信教育資源網免費下載。

第1章 界面設計概述

1．1 緒論

1．2 界面設計基本原則

1．3 界面設計研究范疇

1．3．1 網頁UI設計

1．3．2 移動端UI設計

1．3．3 智能設備UI設計

1．3．4 游戲及其他領域UI設計

1．4 界面設計平臺及設計風格

1．4．1 智能手機及其平臺發展歷程

1．4．2 移動應用界面設計風格發展歷程

1．4．3 界面設計流行趨勢變化

1．4．4 移動應用界面設計人才需求

文中參考文獻

推薦閱讀文獻

思考題

第2章 界面設計流程與模式

2．1 UI設計工作流程

2．2 結構設計

2．2．1 界面流程圖設計

2．2．2 界面模式原型設計

2．3 交互設計

2．3．1 手勢互動

2．3．2 界面跳轉互動

2．3．3 基于界面優化的交互設計原則

2．4 視覺設計

推薦閱讀文獻

思考題

第3章 AxureRP概述

3．1 AxureRP8介紹

3．2 AxureRP8的主界面

3．2．1 菜單欄區域

3．2．2 工具欄區域

3．2．3 樣式工具欄

3．2．4 頁面編輯區域

3．2．5 元件庫區域

3．2．6 母版庫區域

3．2．7 工作區域

3．2．8 檢視器區域

3．2．9 頁面元素大綱區域

思考題

……

第4章 應用Axure進行界面原型設計

第5章 綜合實戰應用——“愛彼迎”App低保真原型設計

第6章 Adobe川ustrator概述

第7章 應用Adobe川ustrator進行界面圖標設計

第8章 綜合實戰應用——國標設計

第9章 PhotoshopCC概述

第10章 應用PhotoshopCC進行界面美化設計

第11章 綜合實戰應用——界面美化設計

第12章 界面動態效果制作2100433B

本書通過大量的案例制作,詳細地向用戶介紹了Sketch在設計網頁界面時的使用方法。分別針對Sketch繪制線框原型、設計圖標、Android界面設計、iOS界面設計、PC端網站UI和UI的輸出與交互進行了講解。通過學習讀者應該熟悉移動UI設計和PC端UI設計的規范和設計要點。同時掌握網頁界面的輸出以及交互動效的添加方法。

序

前言

第1章 移動互聯網UI設計

1.1 移動端UI設計概念

1.2 移動UI的特性

1.3 移動產品界面設計的常用工具

1.4 UI設計尺寸

第2章 什么是Photoshop

2.1 初識UI設計軟件之Photoshop

2.2 Photoshop應用領域

2.2.1 在UI設計領域上的一把手

2.2.2 在數碼圖像處理上的佼佼者

2.2.3 在動畫與圖像后期制作上的認可

2.3 色彩模式的認識

2.3.1 RGB色彩模式

2.3.2 CMYK色彩模式

2.3.3 灰度色彩模式

2.3.4 通道色彩模式

2.3.5 色彩模式的選擇2.3.6色彩模式的切換

2.4 基本單位的認識

2.4.1 像素

2.4.2 分辨率

2.4.3 位圖圖像

2.4.4 矢量圖圖像

2.4.5 位圖與矢量圖的區別

2.5 儲存格式的應用

2.5.1 PSD格式

2.5.2 JPEG格式

2.5.3 GIF格式

2.5.4 PNG格式

第3章 界面設定

3.1 界面介紹

3.1.1 界面組成部分

3.1.2 活動面板的使用

3.1.3 圖層面板初識3.2文檔基本操作

3.2 文檔基本操作

3.2.1 新建空白畫布

3.2.2 存儲使用格式

第4章 建立選區

4.1 建立正常規則選框

4.1.1 矩形選框組

4.1.2 移動變換選框

4.1.3 選框布爾運算

4.1.4 選框快捷鍵組合

4.2 建立隨意不規則選區

4.2.1 套索和多邊形套索工具的使用

4.2.2 磁性套索的使用及摳圖

4.2.3 iWatch摳圖案例詳解

4.2.4 人物復雜邊緣摳圖案例詳解

4.2.5 魔棒工具使用方法

4.2.6 容差值設定

4.2.7 手機摳圖之魔棒操作

4.2.8 快速選擇工具

4.3 羽化和消除鋸齒

4.3.1 選定羽化范圍

4.3.2 羽化參數設置

4.3.3 羽化的使用方法

4.3.4 優化選區參數操作

第5章 圖層深度剖析

5.1 圖層組成

5.1.1 圖層的使用

5.1.2 圖層的分類

5.1.3 新建圖層的快捷方式

5.1.4 刪除圖層的快捷方式

5.1.5 圖層的隱藏與顯示

5.2 圖層填色

5.2.1 前（背）景色填充快捷操作

5.2.2 選區的優先級填色

5.2.3 圖層不透明度的調整

5.3 圖層順序調整

5.3.1 圖層層級關系

5.3.2 圖層置底操作

5.3.3 圖層置頂操作

5.4 層編組使用

5.4.1 新建組與子圖層

5.4.2 編組方式的快捷運用

第6章 矢量路徑操作

6.1 路徑和錨點初識

6.1.1 繪制開放路徑

6.1.2 繪制閉合路徑

6.2 錨點的刪除與添加

6.2.1 錨點的添加

6.2.2 錨點的刪除

6.3 曲線路徑的繪制

6.3.1 把手初識

6.3.2 曲線繪制

6.4 曲線路徑分類

6.4.1 直線繪制

6.4.2 貝塞爾S形曲線繪制

6.4.3 貝塞爾C形曲線繪制

6.4.4 貝塞爾U形曲線繪制

6.4.5 Z形曲線繪制

6.4.6 對稱水滴形曲線繪制

6.5 路徑選擇

6.5.1 路徑選擇工具

6.5.2 直接選擇工具

6.5.3 把手及錨點的調整使用

6.6 路徑應用

6.6.1 路徑轉選區

6.6.2 路徑轉蒙版

6.6.3 路徑轉形狀

6.7 路徑摳圖方法

6.7.1 瓷器路徑摳圖

6.7.2 家具路徑摳圖

第7章 形狀操作

7.1 形狀工具組

7.1.1 矩形工具

7.1.2 圓角矩形工具

7.1.3 橢圓工具

7.1.4 多邊形工具

7.1.5 直線工具

7.1.6 自定義形狀工具

7.2 形狀工具布爾運算

7.2.1 加法運算

7.2.2 減法運算

7.2.3 相交運算

7.2.4 排除重疊形狀運算

7.2.5 合并形狀組件

7.3 路徑的對齊操作

7.3.1 路徑的對齊方式

7.3.2 路徑的分布方式

7.4 移動主題圖標設計

7.4.1 計算機扁平圖標設計

7.4.2 圖庫扁平圖標設計

7.4.3 日歷扁平圖標設計

第8章 UI設計中文字的應用

8.1 文字工具初識

8.1.1 橫排文字

8.1.2 直排文字

8.1.3 橫排文字蒙版工具

8.1.4 直排文字蒙版工具

8.2 文字面板參數設置

8.2.1 字符面板

8.2.2 段落面板

8.2.3 文字調整快捷鍵

8.2.4 文字消除鋸齒方式

8.3 文字在畫冊排版中的應用

8.3.1 標題的排版

8.3.2 版式的設計

第9章 圖層樣式

9.1 混合選項組

9.1.1 斜面和浮雕

9.1.2 投影與內陰影

9.1.3 內發光與外發光

9.1.4 疊加

9.1.5 描邊

9.1.6 光澤

9.2 漸變的樣式

9.2.1 線性漸變

9.2.2 徑向漸變

9.2.3 角度漸變

9.2.4 對稱漸變

9.2.5 菱形漸變

9.3 創建剪貼蒙版

9.3.1 剪貼蒙版的定義

9.3.2 剪貼蒙版與圖層蒙版的區別

9.3.3 剪貼蒙版的作用機理

9.3.4 剪貼蒙版的使用方式

9.3.5 剪貼蒙版的使用技巧

9.3.6 剪貼蒙版的快捷操作

9.4 炫酷微擬物UI圖標設計

9.4.1 手電筒圖標設計

9.4.2 設置圖標設計

9.4.3 鐘表圖標設計

第10章 使用畫筆

10.1 畫筆的選用

10.1.1 硬度和大小的設置

10.1.2 畫筆的快捷鍵組合

10.1.3 畫筆的預設參數

10.2 超寫實破殼雞蛋繪制

第11章 圖層蒙版的應用

11.1 初識圖層蒙版

11.1.1 圖層蒙版的定義

11.1.2 圖層蒙版的作用

11.1.3 圖層蒙版的建立與刪除

11.1.4 圖層蒙版的應用與停用

11.2 城市夜景圖層蒙版合成案例

第12章 濾鏡的高級應用

12.1 素描畫像制作

12.2 女人海報—3D

第13章 其他工具應用

13.1 圖案的使用

13.1.1 圖案的定義

13.1.2 圖案的填充方式

13.2 修復工具組

13.2.1 修復畫筆工具

13.2.2 修補工具

13.2.3 污點修復畫筆工具

13.2.4 內容感知移動工具

13.2.5 紅眼工具

13.3 調整色彩

13.3.1 亮度與對比度

13.3.2 曲線和色階

13.3.3 色相/飽和度

13.3.4 色彩平衡

13.3.5 反相和去色

第14章 綜合案列應用

14.1 圖像合成

14.1.1 制作逼真木質紋理

14.1.2 制作禁煙公益海報

14.2 肖像處理

14.2.1 歐美人物磨皮教程

14.2.2 人物素描效果制作

14.3 網頁設計應用

14.3.1 網站設計的頁面構成

14.3.2 網頁的設計原則

14.3.3 互聯網網頁的首頁設計

14.4 移動App界面設計

14.4.1 移動界面設計規范

14.4.2 移動界面設計布局

14.4.3 UI界面設計方式

第15章 UI界面設計之Illustrator

15.1 初識AI

15.1.1 AI的界面認識

15.1.2 AI的應用領域

15.1.3 AI的快捷鍵

15.1.4 AI的文件格式與保存

15.2 矢量圖形的繪制

15.2.1 矩形與橢圓的繪制

15.2.2 矩形轉圓角

15.2.3 QQ郵箱圖標的制作

15.3 描邊的應用

15.3.1 剪刀工具的使用

15.3.2 刻刀工具的使用

15.3.3 MBE風格圖標的應用

15.4 繪制多彩擬物圖標

15.4.1 形狀、路徑查找器的應用

15.4.2 漸變工具的應用

15.4.3 制作漸變小圖標

15.4.4 制作絢麗相冊

第16章 AI的高級應用

16.1 扭曲、變換的使用

16.2 變形的使用

16.3 風格化的使用

第17章 UI界面設計之Sketch進階（一）

17.1 了解Sketch

17.1.1 界面認識

17.1.2 Sketch圖層

17.2 Sketch圖形

17.2.1 圖形概述

17.2.2 矩形與圓角矩形

17.2.3 三角形

17.2.4 橢圓和直線

17.2.5 五角星和多邊形

17.2.6 圖形轉換點操作

17.2.7 布爾運算

17.3 Text文本

17.3.1 文本概述

17.3.2 文本檢查器

17.3.3 文本渲染

17.3.4 文本樣式

17.4 Image圖片

17.4.1 圖片概述

17.4.2 位圖編輯

17.4.3 色彩矯正

17.5 Styling樣式

17.5.1 樣式概述

17.5.2 填充

17.5.3 邊框

17.5.4 陰影

17.5.5 模糊

17.5.6 漸變

第18章 UI界面設計之Sketch進階（二）

18.1 Symbols符號定義

18.2 Styling樣式

18.3 UI界面中符號和樣式的重要應用

18.4 前端開發導出

18.5 導出倍率關系適配

18.6 讓設計更加直觀、便捷

18.7 iOS Mirror概述

18.8 iOS Mirror設置及使用

第19章 三大利器結合應用

19.1 AI與PS緊密銜接

19.1.1 字體設計（一）

19.1.2 字體設計（二）

19.1.3 AI中快速實現Low Poly制作

19.1.4 移動界面中Low Poly界面設計應用

19.2 AI與PS的跨軟件合作之麥克風

19.3 Sketch實現電商類App界面設計

19.4 通過AI進行logo設計

后記2100433B