UI界面設(shè)計（第2版）內(nèi)容簡介

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

第一部分 知識準(zhǔn)備

第1章 UI設(shè)計相關(guān)知識 1

1.1 UI設(shè)計 1

1.1.1 UI設(shè)計的概念 1

1.1.2　UI設(shè)計的流程 2

1.1.3　UI設(shè)計的規(guī)范 4

1.1.4 UI設(shè)計常用工具 6

1.2 UI設(shè)計與用戶體驗 7

1.2.1 UI設(shè)計與用戶體驗概述 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 選區(qū)的基本操作 15

1.3.5 畫筆工具的應(yīng)用 17

本章小結(jié) 19

第2章 UI設(shè)計的常用方法 20

2.1 UI設(shè)計中的設(shè)計方法 20

2.1.1 方法與方法論 20

2.1.2 設(shè)計方法學(xué) 20

2.1.3 UI設(shè)計中實用的設(shè)計方法 21

2.2 UI設(shè)計中實用的構(gòu)成方法 23

2.2.1 什么是構(gòu)成 23

2.2.2 形式美法則 23

2.2.3 構(gòu)成的思維方式 29

2.3 UI設(shè)計中實用的色彩搭配技巧 31

2.3.1 色彩的基本理論 31

2.3.2 色彩搭配法則 33

2.4 知識拓展 45

2.4.1 扁平化設(shè)計風(fēng)格 45

2.4.2 擬物化設(shè)計風(fēng)格 47

2.4.3 卡通化設(shè)計風(fēng)格 47

2.5 能力拓展 47

2.5.1 圖層類別 47

2.5.2 圖層的基礎(chǔ)操作 47

2.5.3 圖層樣式 48

2.5.4 混合模式 49

2.5.5 Photoshop中的蒙版 50

2.5.6 漸變工具 54

本章小結(jié) 56

第二部分 牛刀小試

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

3.1 常用背景制作 57

3.1.1 壁紙 57

3.1.2 圖標(biāo)背板 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 創(chuàng)意圖標(biāo)設(shè)計與制作 73

3.3.1 圖標(biāo)設(shè)計的基本知識 73

3.3.2 利用Photoshop打造擬物化圖標(biāo) 77

3.3.3 利用Photoshop打造扁平化圖標(biāo) 82

3.3.4 利用Photoshop打造單色圖標(biāo) 85

3.3.5 利用Photoshop打造線性圖標(biāo) 87

3.4 知識拓展 87

3.4.1 圖標(biāo)設(shè)計的趨勢—響應(yīng)式圖標(biāo) 87

3.4.2 路徑與形狀工具 88

3.4.3 擦除類工具 90

3.5 能力拓展 91

3.5.1 設(shè)計制作簡單網(wǎng)頁 91

3.5.2 獨立實踐 97

本章小結(jié) 98

第三部分 UI設(shè)計典型實戰(zhàn)

第4章 操作型APP—計算器界面設(shè)計 99

4.1　UI設(shè)計任務(wù)分析 99

4.2　學(xué)習(xí)目標(biāo) 100

4.3　制作步驟詳解 100

4.3.1 新建文件，確定尺寸規(guī)范 100

4.3.2 制作背景 100

4.3.3 制作狀態(tài)欄區(qū)域 101

4.3.4 制作顯示區(qū)細(xì)節(jié) 101

4.3.5 制作功能鍵區(qū)和數(shù)字鍵區(qū)細(xì)節(jié) 101

4.3.6 定稿輸出有效的設(shè)計方案 102

4.4 知識拓展 103

4.4.1 圖層組 103

4.4.2 APP界面設(shè)計概述 104

4.4.3 APP界面布局設(shè)計 105

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

4.5 能力拓展 106

4.5.1 設(shè)計制作水平儀UI 106

4.5.2 設(shè)計制作拼拼樂APP界面 107

4.5.3 獨立實踐 111

本章小結(jié) 111

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

5.1　UI設(shè)計任務(wù)分析 112

5.2 學(xué)習(xí)目標(biāo) 112

5.3 制作步驟詳解 112

5.3.1　創(chuàng)建播放器 112

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

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

5.4 知識拓展 121

5.4.1 色彩的搭配 121

5.4.2 Photoshop中的色彩調(diào)整 121

5.5 能力拓展 122

5.5.1 設(shè)計制作DVD光盤圖標(biāo) 122

5.5.2 設(shè)計制作金屬按鈕 123

5.5.3 為黑白照片調(diào)色 123

5.5.4 獨立實踐 126

本章小結(jié) 126

第6章 手機(jī)主題UI設(shè)計 127

6.1 UI設(shè)計任務(wù)分析 127

6.2 學(xué)習(xí)目標(biāo) 128

6.3 制作步驟詳解 128

6.3.1 制作主題形象 128

6.3.2 制作手機(jī)壁紙 129

6.3.3 制作鎖屏界面 130

6.3.4 制作天氣插件 131

6.3.5 制作桌面圖標(biāo) 136

6.4 知識拓展 142

6.4.1 手機(jī)界面設(shè)計原則 142

6.4.2 手機(jī)常用尺寸與圖標(biāo)格式 143

6.5 能力拓展 144

6.5.1 設(shè)計制作ico圖標(biāo) 144

6.5.2 設(shè)計制作偽扁平化手機(jī)主題界面 145

6.5.3 獨立實踐 146

本章小結(jié) 146

第7章 Web界面設(shè)計實例—兒童節(jié)專題網(wǎng)頁設(shè)計 147

7.1　UI設(shè)計任務(wù)分析 147

7.2 學(xué)習(xí)目標(biāo) 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 制作底部區(qū)域 181

7.4 知識拓展 183

7.4.1 網(wǎng)站界面設(shè)計基本原則 183

7.4.2 網(wǎng)站界面的功能美與形式美 183

7.5 能力拓展 184

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

7.5.2 打造傾盆大雨效果 185

7.5.3 設(shè)計制作電子商務(wù)網(wǎng)頁界面 185

7.5.4 強化全局觀念 198

7.5.5 獨立實踐 198

本章小結(jié) 198

第8章 智能電視界面設(shè)計 199

8.1　UI設(shè)計任務(wù)分析 199

8.2　學(xué)習(xí)目標(biāo) 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 智能電視界面設(shè)計 211

8.4.2 智能電視界面設(shè)計的原則 212

8.5 能力拓展 212

8.5.1 設(shè)計制作樂視TV界面 212

8.5.2 獨立實踐 213

本章小結(jié) 213

參考文獻(xiàn) 2142100433B

第1章 界面設(shè)計概述

1．1 緒論

1．2 界面設(shè)計基本原則

1．3 界面設(shè)計研究范疇

1．3．1 網(wǎng)頁UI設(shè)計

1．3．2 移動端UI設(shè)計

1．3．3 智能設(shè)備UI設(shè)計

1．3．4 游戲及其他領(lǐng)域UI設(shè)計

1．4 界面設(shè)計平臺及設(shè)計風(fēng)格

1．4．1 智能手機(jī)及其平臺發(fā)展歷程

1．4．2 移動應(yīng)用界面設(shè)計風(fēng)格發(fā)展歷程

1．4．3 界面設(shè)計流行趨勢變化

1．4．4 移動應(yīng)用界面設(shè)計人才需求

文中參考文獻(xiàn)

推薦閱讀文獻(xiàn)

思考題

第2章 界面設(shè)計流程與模式

2．1 UI設(shè)計工作流程

2．2 結(jié)構(gòu)設(shè)計

2．2．1 界面流程圖設(shè)計

2．2．2 界面模式原型設(shè)計

2．3 交互設(shè)計

2．3．1 手勢互動

2．3．2 界面跳轉(zhuǎn)互動

2．3．3 基于界面優(yōu)化的交互設(shè)計原則

2．4 視覺設(shè)計

推薦閱讀文獻(xiàn)

思考題

第3章 AxureRP概述

3．1 AxureRP8介紹

3．2 AxureRP8的主界面

3．2．1 菜單欄區(qū)域

3．2．2 工具欄區(qū)域

3．2．3 樣式工具欄

3．2．4 頁面編輯區(qū)域

3．2．5 元件庫區(qū)域

3．2．6 母版庫區(qū)域

3．2．7 工作區(qū)域

3．2．8 檢視器區(qū)域

3．2．9 頁面元素大綱區(qū)域

思考題

……

第4章 應(yīng)用Axure進(jìn)行界面原型設(shè)計

第5章 綜合實戰(zhàn)應(yīng)用——“愛彼迎”App低保真原型設(shè)計

第6章 Adobe川ustrator概述

第7章 應(yīng)用Adobe川ustrator進(jìn)行界面圖標(biāo)設(shè)計

第8章 綜合實戰(zhàn)應(yīng)用——國標(biāo)設(shè)計

第9章 PhotoshopCC概述

第10章 應(yīng)用PhotoshopCC進(jìn)行界面美化設(shè)計

第11章 綜合實戰(zhàn)應(yīng)用——界面美化設(shè)計

第12章 界面動態(tài)效果制作2100433B

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

序

前言

第1章 移動互聯(lián)網(wǎng)UI設(shè)計

1.1 移動端UI設(shè)計概念

1.2 移動UI的特性

1.3 移動產(chǎn)品界面設(shè)計的常用工具

1.4 UI設(shè)計尺寸

第2章 什么是Photoshop

2.1 初識UI設(shè)計軟件之Photoshop

2.2 Photoshop應(yīng)用領(lǐng)域

2.2.1 在UI設(shè)計領(lǐng)域上的一把手

2.2.2 在數(shù)碼圖像處理上的佼佼者

2.2.3 在動畫與圖像后期制作上的認(rèn)可

2.3 色彩模式的認(rèn)識

2.3.1 RGB色彩模式

2.3.2 CMYK色彩模式

2.3.3 灰度色彩模式

2.3.4 通道色彩模式

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

2.4 基本單位的認(rèn)識

2.4.1 像素

2.4.2 分辨率

2.4.3 位圖圖像

2.4.4 矢量圖圖像

2.4.5 位圖與矢量圖的區(qū)別

2.5 儲存格式的應(yīng)用

2.5.1 PSD格式

2.5.2 JPEG格式

2.5.3 GIF格式

2.5.4 PNG格式

第3章 界面設(shè)定

3.1 界面介紹

3.1.1 界面組成部分

3.1.2 活動面板的使用

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

3.2 文檔基本操作

3.2.1 新建空白畫布

3.2.2 存儲使用格式

第4章 建立選區(qū)

4.1 建立正常規(guī)則選框

4.1.1 矩形選框組

4.1.2 移動變換選框

4.1.3 選框布爾運算

4.1.4 選框快捷鍵組合

4.2 建立隨意不規(guī)則選區(qū)

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

4.2.2 磁性套索的使用及摳圖

4.2.3 iWatch摳圖案例詳解

4.2.4 人物復(fù)雜邊緣摳圖案例詳解

4.2.5 魔棒工具使用方法

4.2.6 容差值設(shè)定

4.2.7 手機(jī)摳圖之魔棒操作

4.2.8 快速選擇工具

4.3 羽化和消除鋸齒

4.3.1 選定羽化范圍

4.3.2 羽化參數(shù)設(shè)置

4.3.3 羽化的使用方法

4.3.4 優(yōu)化選區(qū)參數(shù)操作

第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 選區(qū)的優(yōu)先級填色

5.2.3 圖層不透明度的調(diào)整

5.3 圖層順序調(diào)整

5.3.1 圖層層級關(guān)系

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 把手及錨點的調(diào)整使用

6.6 路徑應(yīng)用

6.6.1 路徑轉(zhuǎn)選區(qū)

6.6.2 路徑轉(zhuǎn)蒙版

6.6.3 路徑轉(zhuǎn)形狀

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 移動主題圖標(biāo)設(shè)計

7.4.1 計算機(jī)扁平圖標(biāo)設(shè)計

7.4.2 圖庫扁平圖標(biāo)設(shè)計

7.4.3 日歷扁平圖標(biāo)設(shè)計

第8章 UI設(shè)計中文字的應(yīng)用

8.1 文字工具初識

8.1.1 橫排文字

8.1.2 直排文字

8.1.3 橫排文字蒙版工具

8.1.4 直排文字蒙版工具

8.2 文字面板參數(shù)設(shè)置

8.2.1 字符面板

8.2.2 段落面板

8.2.3 文字調(diào)整快捷鍵

8.2.4 文字消除鋸齒方式

8.3 文字在畫冊排版中的應(yīng)用

8.3.1 標(biāo)題的排版

8.3.2 版式的設(shè)計

第9章 圖層樣式

9.1 混合選項組

9.1.1 斜面和浮雕

9.1.2 投影與內(nèi)陰影

9.1.3 內(nèi)發(fā)光與外發(fā)光

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 創(chuàng)建剪貼蒙版

9.3.1 剪貼蒙版的定義

9.3.2 剪貼蒙版與圖層蒙版的區(qū)別

9.3.3 剪貼蒙版的作用機(jī)理

9.3.4 剪貼蒙版的使用方式

9.3.5 剪貼蒙版的使用技巧

9.3.6 剪貼蒙版的快捷操作

9.4 炫酷微擬物UI圖標(biāo)設(shè)計

9.4.1 手電筒圖標(biāo)設(shè)計

9.4.2 設(shè)置圖標(biāo)設(shè)計

9.4.3 鐘表圖標(biāo)設(shè)計

第10章 使用畫筆

10.1 畫筆的選用

10.1.1 硬度和大小的設(shè)置

10.1.2 畫筆的快捷鍵組合

10.1.3 畫筆的預(yù)設(shè)參數(shù)

10.2 超寫實破殼雞蛋繪制

第11章 圖層蒙版的應(yīng)用

11.1 初識圖層蒙版

11.1.1 圖層蒙版的定義

11.1.2 圖層蒙版的作用

11.1.3 圖層蒙版的建立與刪除

11.1.4 圖層蒙版的應(yīng)用與停用

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

第12章 濾鏡的高級應(yīng)用

12.1 素描畫像制作

12.2 女人海報—3D

第13章 其他工具應(yīng)用

13.1 圖案的使用

13.1.1 圖案的定義

13.1.2 圖案的填充方式

13.2 修復(fù)工具組

13.2.1 修復(fù)畫筆工具

13.2.2 修補工具

13.2.3 污點修復(fù)畫筆工具

13.2.4 內(nèi)容感知移動工具

13.2.5 紅眼工具

13.3 調(diào)整色彩

13.3.1 亮度與對比度

13.3.2 曲線和色階

13.3.3 色相/飽和度

13.3.4 色彩平衡

13.3.5 反相和去色

第14章 綜合案列應(yīng)用

14.1 圖像合成

14.1.1 制作逼真木質(zhì)紋理

14.1.2 制作禁煙公益海報

14.2 肖像處理

14.2.1 歐美人物磨皮教程

14.2.2 人物素描效果制作

14.3 網(wǎng)頁設(shè)計應(yīng)用

14.3.1 網(wǎng)站設(shè)計的頁面構(gòu)成

14.3.2 網(wǎng)頁的設(shè)計原則

14.3.3 互聯(lián)網(wǎng)網(wǎng)頁的首頁設(shè)計

14.4 移動App界面設(shè)計

14.4.1 移動界面設(shè)計規(guī)范

14.4.2 移動界面設(shè)計布局

14.4.3 UI界面設(shè)計方式

第15章 UI界面設(shè)計之Illustrator

15.1 初識AI

15.1.1 AI的界面認(rèn)識

15.1.2 AI的應(yīng)用領(lǐng)域

15.1.3 AI的快捷鍵

15.1.4 AI的文件格式與保存

15.2 矢量圖形的繪制

15.2.1 矩形與橢圓的繪制

15.2.2 矩形轉(zhuǎn)圓角

15.2.3 QQ郵箱圖標(biāo)的制作

15.3 描邊的應(yīng)用

15.3.1 剪刀工具的使用

15.3.2 刻刀工具的使用

15.3.3 MBE風(fēng)格圖標(biāo)的應(yīng)用

15.4 繪制多彩擬物圖標(biāo)

15.4.1 形狀、路徑查找器的應(yīng)用

15.4.2 漸變工具的應(yīng)用

15.4.3 制作漸變小圖標(biāo)

15.4.4 制作絢麗相冊

第16章 AI的高級應(yīng)用

16.1 扭曲、變換的使用

16.2 變形的使用

16.3 風(fēng)格化的使用

第17章 UI界面設(shè)計之Sketch進(jìn)階（一）

17.1 了解Sketch

17.1.1 界面認(rèn)識

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 圖形轉(zhuǎn)換點操作

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界面設(shè)計之Sketch進(jìn)階（二）

18.1 Symbols符號定義

18.2 Styling樣式

18.3 UI界面中符號和樣式的重要應(yīng)用

18.4 前端開發(fā)導(dǎo)出

18.5 導(dǎo)出倍率關(guān)系適配

18.6 讓設(shè)計更加直觀、便捷

18.7 iOS Mirror概述

18.8 iOS Mirror設(shè)置及使用

第19章 三大利器結(jié)合應(yīng)用

19.1 AI與PS緊密銜接

19.1.1 字體設(shè)計（一）

19.1.2 字體設(shè)計（二）

19.1.3 AI中快速實現(xiàn)Low Poly制作

19.1.4 移動界面中Low Poly界面設(shè)計應(yīng)用

19.2 AI與PS的跨軟件合作之麥克風(fēng)

19.3 Sketch實現(xiàn)電商類App界面設(shè)計

19.4 通過AI進(jìn)行l(wèi)ogo設(shè)計

后記2100433B