Sketch交互設(shè)計(jì)之美

第1章初識(shí)Sketch

1.1擁抱變化，交互設(shè)計(jì)師的蛻變之旅

1.2Sketch簡(jiǎn)介

1.2.1Sketch是什么

1.2.2Sketch的優(yōu)勢(shì)

1.2.3Sketch對(duì)于團(tuán)隊(duì)特別是交互設(shè)計(jì)師的價(jià)值

1.2.4Sketch的應(yīng)用前景

1.2.5Sketch和Photoshop對(duì)比

1.3Sketch獲取

1.3.1Sketch下載

1.3.2Sketch安裝

1.3.3Sketch激活

1.3.4Sketch定價(jià)策略

1.4Sketch界面介紹

1.4.1菜單欄

1.4.2工具欄

1.4.3頁面

1.4.4圖層

1.4.5畫布

1.4.6檢查器

1.5Sketch上手試用

1.6團(tuán)隊(duì)項(xiàng)目介紹

1.6.1項(xiàng)目背景說明

1.6.2項(xiàng)目功能需求

1.6.3項(xiàng)目產(chǎn)品架構(gòu)

知識(shí)拓展

動(dòng)腦思考

動(dòng)手操作

第2章快速入門

2.1交互設(shè)計(jì)入門

2.1.1認(rèn)識(shí)交互設(shè)計(jì)

2.1.2認(rèn)識(shí)交互設(shè)計(jì)師

2.1.3交互設(shè)計(jì)師需要具備的素質(zhì)

2.1.4交互設(shè)計(jì)師的職責(zé)

2.1.5交互設(shè)計(jì)師的專業(yè)背景要求

2.1.6交互設(shè)計(jì)師需要的知識(shí)體系

2.1.7交互設(shè)計(jì)師常用的工具

☆重點(diǎn)2.1.8了解交互設(shè)計(jì)流程

2.2明確目標(biāo)和產(chǎn)出物

2.2.1流程圖

2.2.2低、高保真原型

2.2.3交互說明

2.2.4視覺規(guī)范

2.2.5視覺標(biāo)注稿

2.2.6規(guī)范切圖

2.2.7動(dòng)效參數(shù)

2.3學(xué)習(xí)基本工具使用

☆重點(diǎn)2.3.1線條工具

☆重點(diǎn)2.3.2幾何工具

☆重點(diǎn)2.3.3文字工具

2.4學(xué)習(xí)高級(jí)工具使用

2.4.1剪刀工具

2.4.2變形工具

2.5學(xué)習(xí)其他工具使用

2.5.1插入類工具

2.5.2組織類工具

2.5.3編輯類工具

2.5.4輔助類工具

2.6學(xué)會(huì)版本管理

2.6.1使用多個(gè)Sketch文件管理

2.6.2使用Sketch自動(dòng)保存歷史

版本

2.7了解原型尺寸和命名規(guī)范

☆重點(diǎn)2.7.1原型尺寸

2.7.2命名規(guī)范

2.8掌握交互設(shè)計(jì)方法論

2.8.1交互設(shè)計(jì)方法論的概念

2.8.2交互設(shè)計(jì)方法論——5W2H

2.8.3其他交互設(shè)計(jì)方法論

知識(shí)拓展

實(shí)戰(zhàn)教學(xué)

動(dòng)腦思考

動(dòng)手操作

第3章基礎(chǔ)運(yùn)用

3.1創(chuàng)作空間

3.1.1畫布

☆重點(diǎn)3.1.2Artboard（畫板）

☆重點(diǎn)3.1.3柵格布局

3.2框架設(shè)計(jì)

3.2.1發(fā)散思維

3.2.2人物角色

3.2.3故事板

3.2.4流程設(shè)計(jì)

3.2.5信息架構(gòu)

3.3界面設(shè)計(jì)

3.3.1界面設(shè)計(jì)原則

3.3.2界面設(shè)計(jì)理論

3.3.3界面設(shè)計(jì)實(shí)踐

3.4圖像處理

3.4.1圖像導(dǎo)入

☆重點(diǎn)3.4.2圖像處理方式

3.4.3Mask（蒙版）處理

3.5圖標(biāo)設(shè)計(jì)

☆重點(diǎn)3.5.1認(rèn)識(shí)圖標(biāo)

3.5.2圖標(biāo)繪制規(guī)范

☆重點(diǎn)3.5.3圖標(biāo)繪制

3.5.4圖標(biāo)引用

3.6測(cè)距和對(duì)齊

3.6.1測(cè)距

3.6.2對(duì)齊

知識(shí)拓展

實(shí)戰(zhàn)教學(xué)

動(dòng)腦思考

動(dòng)手操作

第4章高級(jí)運(yùn)用

4.1快速原型設(shè)計(jì)

4.1.1快速復(fù)制

4.1.2批量復(fù)制

4.1.3一級(jí)頁面設(shè)計(jì)

☆重點(diǎn)4.2歸類整理

4.2.1圖層整理

4.2.2頁面整理

4.2.3圖層查找

4.3原型演示

4.3.1SketchMirror

4.3.2SketchMirrorforiPhone

4.3.3需求驗(yàn)證

4.3.4二級(jí)頁面設(shè)計(jì)

4.4Symbol（符號(hào)）

☆重點(diǎn)4.4.1Symbol的介紹及應(yīng)用

場(chǎng)景

☆重點(diǎn)4.4.2Symbol基礎(chǔ)教程

☆重點(diǎn)☆難點(diǎn)4.4.3Symbol

嵌套教程

☆重點(diǎn)☆難點(diǎn)4.4.4夜視Symbol庫

制作

4.5StyledText（樣式庫）

4.5.1StyledText的概念

4.5.2TextStyle（字體樣式）

4.5.3ShareStyle（共享樣式）

4.5.4夜視項(xiàng)目樣式庫

4.6細(xì)節(jié)設(shè)計(jì)

☆重點(diǎn)4.6.1交互邊界

☆重點(diǎn)4.6.2特殊狀態(tài)

☆重點(diǎn)4.6.3場(chǎng)景設(shè)計(jì)

4.6.4首頁及播放頁設(shè)計(jì)

知識(shí)拓展

實(shí)戰(zhàn)教學(xué)

動(dòng)腦思考

動(dòng)手操作

第5章團(tuán)隊(duì)協(xié)作

5.1Sketch和團(tuán)隊(duì)協(xié)作

5.1.1團(tuán)隊(duì)協(xié)作基礎(chǔ)

5.1.2Sketch協(xié)作流程

5.2使用Libraries減少重復(fù)勞作

☆重點(diǎn)☆新功能5.2.1Libraries

介紹

☆重點(diǎn)5.2.2Libraries制作和

導(dǎo)入

☆重點(diǎn)5.2.3Libraries使用和

更新

☆重點(diǎn)5.2.4Libraries云協(xié)作

5.3使用堅(jiān)果云構(gòu)建協(xié)作環(huán)境

5.3.1構(gòu)建前的準(zhǔn)備工作

5.3.2創(chuàng)建團(tuán)隊(duì)文件夾

5.3.3設(shè)置本地同步文件夾

5.3.4查看歷史版本

動(dòng)腦思考

動(dòng)手操作

第6章交付輸出

6.1交互設(shè)計(jì)輸出物

6.1.1交互方案和交互原型

☆重點(diǎn)6.1.2交互說明

☆重點(diǎn)6.1.3交互規(guī)范

6.2視覺設(shè)計(jì)輸出物

6.2.1視覺風(fēng)格探索

6.2.2視覺頁面

☆重點(diǎn)6.2.3視覺規(guī)范

☆重點(diǎn)6.2.4視覺標(biāo)注

☆重點(diǎn)6.2.5切圖資源

知識(shí)拓展

實(shí)戰(zhàn)教學(xué)

動(dòng)腦思考

動(dòng)手操作

第7章動(dòng)效設(shè)計(jì)Principle

7.1需要?jiǎng)有гO(shè)計(jì)的原因

☆重點(diǎn)7.1.1為用戶創(chuàng)造愉悅的

體驗(yàn)

7.1.2驗(yàn)證心中的想法和可行性

7.1.3與開發(fā)工程師溝通動(dòng)態(tài)效果

7.2選擇Principle的原因

7.2.1Principle簡(jiǎn)介

7.2.2Principle的優(yōu)勢(shì)

7.2.3Principle的獲取、安裝與

激活

7.3Principle初體驗(yàn)

7.3.1初識(shí)界面

☆重點(diǎn)7.3.2交互形態(tài)

☆重點(diǎn)7.3.3事件

☆重點(diǎn)7.3.4動(dòng)畫

7.4Principle制作原型

7.4.1準(zhǔn)備工作

7.4.2制作翻頁效果

7.4.3制作轉(zhuǎn)場(chǎng)效果

7.4.4制作滾動(dòng)效果

7.4.5原型演示

7.5Principle制作動(dòng)畫

☆重點(diǎn)☆難點(diǎn)7.5.1動(dòng)畫構(gòu)思

☆重點(diǎn)7.5.2動(dòng)畫制作

☆重點(diǎn)☆難點(diǎn)7.5.3交付開發(fā)

實(shí)現(xiàn)

實(shí)戰(zhàn)教學(xué)

動(dòng)腦思考

動(dòng)手操作

第8章完整后臺(tái)設(shè)計(jì)實(shí)現(xiàn)

8.1后臺(tái)設(shè)計(jì)目標(biāo)

8.1.1業(yè)務(wù)功能

8.1.2設(shè)計(jì)目標(biāo)

8.2后臺(tái)框架設(shè)計(jì)

8.2.1角色場(chǎng)景

8.2.2權(quán)限設(shè)計(jì)

8.2.3流程設(shè)計(jì)

8.3后臺(tái)界面設(shè)計(jì)

8.3.1菜單導(dǎo)航設(shè)計(jì)

8.3.2內(nèi)容列表設(shè)計(jì)

8.3.3流程頁面設(shè)計(jì)

8.3.4頁面細(xì)節(jié)設(shè)計(jì)

8.3.5創(chuàng)建最小化Symbol庫

8.4后臺(tái)交互說明

8.4.1學(xué)會(huì)講故事

8.4.2時(shí)刻警惕權(quán)限和安全

8.5學(xué)習(xí)建議

8.5.1Sketch學(xué)習(xí)建議

8.5.2交互設(shè)計(jì)學(xué)習(xí)建議

結(jié)語

參考文獻(xiàn) 2100433B

交互設(shè)計(jì)師需要一款簡(jiǎn)單、高效的矢量交互設(shè)計(jì)工具，本書以Sketch、Principle軟件的使用作為基礎(chǔ)，以完整項(xiàng)目實(shí)踐為故事線，結(jié)合交互設(shè)計(jì)方法論的思考，讓廣大交互設(shè)計(jì)師、Sketch軟件愛好者深入淺出地掌握軟件使用方法，并快速應(yīng)用到實(shí)戰(zhàn)項(xiàng)目中。

《Sketch交互設(shè)計(jì)之美：從零基礎(chǔ)到完整項(xiàng)目實(shí)現(xiàn)》共分為8章，1章為初識(shí)Sketch，主要介紹Sketch軟件的特性和應(yīng)用場(chǎng)景，通過該章的介紹，讓讀者初步了解軟件的安裝和使用方法；第2章為快速入門，結(jié)合具體的案例學(xué)習(xí)，讓讀者學(xué)會(huì)Sketch直線、鋼筆、矩形等基本工具的使用，同時(shí)，對(duì)交互設(shè)計(jì)有一定的認(rèn)知；第3章為基礎(chǔ)運(yùn)用，詳細(xì)介紹界面設(shè)計(jì)的理論，并讓讀者掌握界面中圖像、圖標(biāo)等元素的處理方法；第4章為高級(jí)運(yùn)用，深入介紹Sketch核心高級(jí)功能Symbol的使用，剖析Sketch能成為交互設(shè)計(jì)工具的原理；第5章為團(tuán)隊(duì)協(xié)作，幫助讀者利用Sketch解決團(tuán)隊(duì)協(xié)作的難題，優(yōu)化團(tuán)隊(duì)成員的協(xié)作模式；第6章為交付輸出，為讀者展示如何使用Sketch輸出高質(zhì)量的交互設(shè)計(jì)和視覺設(shè)計(jì)輸出物；第7章為動(dòng)效設(shè)計(jì)，將Sketch與Principle結(jié)合起來，為用戶創(chuàng)造愉悅的動(dòng)效體驗(yàn)；第8章為完整后臺(tái)設(shè)計(jì)實(shí)現(xiàn)，將完整呈現(xiàn)一個(gè)管理后臺(tái)項(xiàng)目的設(shè)計(jì)過程，幫助讀者總結(jié)提煉軟件使用、交互水平提高的學(xué)習(xí)經(jīng)驗(yàn)。

本書適合零基礎(chǔ)的Sketch愛好者，尤其是想在交互設(shè)計(jì)方向發(fā)展的人員，也可以作為產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、視覺設(shè)計(jì)師、用戶體驗(yàn)設(shè)計(jì)師等設(shè)計(jì)從業(yè)人員的工具使用指南。

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

第 1章 網(wǎng)頁UI設(shè)計(jì)入門

1.1　UI設(shè)計(jì)發(fā)展史　2

1.1.1　早期UI設(shè)計(jì)的風(fēng)格　3

1.1.2　中期UI設(shè)計(jì)的興起　3

1.1.3　后期UI設(shè)計(jì)的發(fā)展　5

知識(shí)點(diǎn)講解——iOS系統(tǒng)　6

知識(shí)點(diǎn)講解——Android系統(tǒng)　6

知識(shí)點(diǎn)講解——Windows　系統(tǒng)　7

知識(shí)點(diǎn)講解——擬物化風(fēng)格設(shè)計(jì)　8

知識(shí)點(diǎn)講解——扁平化風(fēng)格設(shè)計(jì)　8

1.2　網(wǎng)頁UI設(shè)計(jì)的制作流程　9

1.2.1　產(chǎn)品調(diào)研階段　10

1.2.2　UI視覺設(shè)計(jì)　10

1.2.3　產(chǎn)品技術(shù)開發(fā)　11

1.2.4　BUG測(cè)試　12

1.2.5　產(chǎn)品上線　12

1.2.6　產(chǎn)品迭代　13

1.3　UI設(shè)計(jì)的注意事項(xiàng)　13

1.3.1　圖稿一致性原則　13

知識(shí)點(diǎn)講解——字體　13

知識(shí)點(diǎn)講解——表單錄入　14

知識(shí)點(diǎn)講解——鼠標(biāo)手勢(shì)　14

1.3.2　圖稿準(zhǔn)確性原則　15

1.3.3　布局合理化原則　16

1.3.4　操作合理性原則　17

1.3.5　系統(tǒng)響應(yīng)時(shí)間原則　18

1.4　配色對(duì)于UI設(shè)計(jì)的影響　18

1.4.1　網(wǎng)頁配色基本概念　18

知識(shí)點(diǎn)講解——網(wǎng)頁主色　18

知識(shí)點(diǎn)講解——網(wǎng)頁背景色　19

知識(shí)點(diǎn)講解——網(wǎng)頁輔色　19

知識(shí)點(diǎn)講解——網(wǎng)頁點(diǎn)綴色　20

1.4.2　網(wǎng)頁配色基本方法　20

知識(shí)點(diǎn)講解——根據(jù)產(chǎn)品內(nèi)容確定網(wǎng)頁主色　20

知識(shí)點(diǎn)講解——根據(jù)網(wǎng)頁主色確定配色方案　21

1.4.3　網(wǎng)頁色彩搭配技巧　22

知識(shí)點(diǎn)講解——同色系　23

知識(shí)點(diǎn)講解——鄰近色　23

知識(shí)點(diǎn)講解——對(duì)比色　25

知識(shí)點(diǎn)講解——互補(bǔ)色　25

1.5　本章小結(jié)　26

第 2章　初識(shí)Sketch

2.1　繪制iOS 照片分享界面　28

2.1.1　Sketch的安裝與啟動(dòng)　28

操作案例——安裝與啟動(dòng)Sketch　28

2.1.2　了解Sketch界面　30

知識(shí)點(diǎn)講解——Sketch的主界面　31

知識(shí)點(diǎn)講解——菜單欄　31

知識(shí)點(diǎn)講解——工具欄　34

操作案例——自定義工具欄　34

2.1.3　設(shè)置Sketch的快捷鍵　35

知識(shí)點(diǎn)講解——Sketch的快捷鍵　35

操作案例——自定義快捷鍵　37

2.1.4　添加圖片、形狀　39

知識(shí)點(diǎn)講解——Sketch插入面板　39

知識(shí)點(diǎn)講解——插入圖片　40

知識(shí)點(diǎn)講解——插入形狀　41

2.1.5　添加文本　42

知識(shí)點(diǎn)講解——插入文本　43

2.2　繪制手機(jī)登錄頁　45

2.2.1　新建和保存Sketch文件　45

知識(shí)點(diǎn)講解——文件的新建和保存　45

操作案例——設(shè)置Sketch　的標(biāo)尺　47

2.2.2　使用Sketch 畫板　48

知識(shí)點(diǎn)講解——畫板預(yù)設(shè)　48

知識(shí)點(diǎn)講解——畫板檢查器　50

2.2.3　使用Sketch 模板　51

知識(shí)點(diǎn)講解——　“iOS 用戶界面設(shè)計(jì)”模板　52

2.3　本章小結(jié)　56

第3　章 繪制線框原型

3.1　繪制手機(jī)信息界面線框圖　58

3.1.1　線框原型的基本概念　58

知識(shí)點(diǎn)講解——線框原型概念　60

知識(shí)點(diǎn)講解——線框原型視覺特性　61

3.1.2　繪制線框原型的注意事項(xiàng)　61

知識(shí)點(diǎn)講解——巧用明暗對(duì)比　63

知識(shí)點(diǎn)講解——不使用截圖和顏色　64

知識(shí)點(diǎn)講解——標(biāo)記第 一屏高度　64

知識(shí)點(diǎn)講解——合理的布局和間距　65

3.2　繪制注冊(cè)頁面線框圖　65

3.2.1　圖層面板　66

知識(shí)點(diǎn)講解——圖層面板簡(jiǎn)述　67

操作案例——添加和編輯圖層　68

知識(shí)點(diǎn)講解——選擇圖層　69

操作案例——移動(dòng)圖層　70

3.2.2　圖層類型　71

知識(shí)點(diǎn)講解——圖層類型詳解　73

操作案例——變換大小　75

3.2.3　圖層的調(diào)整　75

操作案例——新建、重命名、復(fù)制和刪除頁面　78

知識(shí)點(diǎn)講解——復(fù)制、剪切和粘貼圖層　79

知識(shí)點(diǎn)講解——圖層組的檢查器　80

3.3　繪制完整的線框原型圖　83

3.3.1　計(jì)步App 線框圖的繪制01　84

3.3.2　計(jì)步App 線框圖的繪制02　87

3.4　本章小結(jié)　91

第4　章 使用Sketch 繪制圖標(biāo)

4.1　繪制iOS 11 提醒事項(xiàng)圖標(biāo)　93

4.1.1　矢量工具　93

知識(shí)點(diǎn)講解——矢量圖形（形狀）　95

知識(shí)點(diǎn)講解——點(diǎn)模式　95

知識(shí)點(diǎn)講解——編輯矢量圖形　96

操操作案例——矢量工具繪制箭頭圖標(biāo)　97

4.1.2　路徑的使用　98

知識(shí)點(diǎn)講解——路徑　100

4.2　繪制Android 照相機(jī)圖標(biāo)　101

4.2.1　使用“形狀”繪制圖標(biāo)　102

操作案例——使用布爾運(yùn)算繪制照相機(jī)圖標(biāo)　106

知識(shí)點(diǎn)講解——布爾運(yùn)算　107

4.2.2　使用“蒙板”繪制圖標(biāo)　108

知識(shí)點(diǎn)講解——蒙板命令　109

操作案例——使用透明度蒙板制作簡(jiǎn)易圖標(biāo)　110

4.2.3　添加陰影效果為圖標(biāo)添加質(zhì)感　112

知識(shí)點(diǎn)講解——圖標(biāo)基本屬性　113

4.3　繪制極簡(jiǎn)化的Android圖標(biāo)　116

4.3.1　Android 圖標(biāo)設(shè)計(jì)準(zhǔn)則　116

知識(shí)點(diǎn)講解——圖標(biāo)設(shè)計(jì)準(zhǔn)則　118

4.3.2　圖標(biāo)設(shè)計(jì)的三大原則　120

知識(shí)點(diǎn)講解——三大原則　122

4.3.3　極簡(jiǎn)化設(shè)計(jì)　123

知識(shí)點(diǎn)講解——極簡(jiǎn)化設(shè)計(jì)風(fēng)格　126

操作案例——繪制記事本圖標(biāo)　127

4.4　本章小結(jié)　128

第5章　Android UI 設(shè)計(jì)

5.1　繪制Android 音樂播放器界面　130

5.1.1　組件的編輯及使用　130

知識(shí)點(diǎn)講解——?jiǎng)?chuàng)建組件　133

知識(shí)點(diǎn)講解——更換文本　133

知識(shí)點(diǎn)講解——管理組件　134

操作案例——使用組件工具繪制導(dǎo)航欄　135

5.1.2　應(yīng)用軟件UI 設(shè)計(jì)　136

知識(shí)點(diǎn)講解——什么是應(yīng)用軟件UI設(shè)計(jì)　137

知識(shí)點(diǎn)講解——應(yīng)用軟件UI設(shè)計(jì)規(guī)范　138

知識(shí)點(diǎn)講解——軟件啟動(dòng)UI設(shè)計(jì)　139

5.1.3　移動(dòng)App UI 設(shè)計(jì)　140

知識(shí)點(diǎn)講解——什么是App　142

知識(shí)點(diǎn)講解——移動(dòng)UI的設(shè)計(jì)趨勢(shì)　143

知識(shí)點(diǎn)講解——移動(dòng)UI和平面UI的區(qū)別　145

5.1.4　Android 系統(tǒng)UI設(shè)計(jì)　146

知識(shí)點(diǎn)講解——Android系統(tǒng)文字規(guī)范設(shè)計(jì)　148

操作案例——繪制返回或菜單按鈕　149

知識(shí)點(diǎn)講解——Android　系統(tǒng)UI 設(shè)計(jì)特色　150

5.2　繪制Android 信息界面　151

5.2.1　“文本”命令　152

知識(shí)點(diǎn)講解——添加文本　154

知識(shí)點(diǎn)講解——文本框　154

5.2.2　“文本”檢查器　155

知識(shí)點(diǎn)講解——文本的編輯　157

知識(shí)點(diǎn)講解——共享樣式　159

操作案例——使用共享樣式

繪制界面　160

5.2.3　“文本”選項(xiàng)　161

知識(shí)點(diǎn)講解——文本路徑　163

知識(shí)點(diǎn)講解——文本轉(zhuǎn)換輪廓　164

操作案例——轉(zhuǎn)化為輪廓繪制

界面元素　164

知識(shí)點(diǎn)講解——導(dǎo)出文字　165

知識(shí)點(diǎn)講解——應(yīng)用樣式　166

知識(shí)點(diǎn)講解——混合模式　168

5.3　本章小結(jié)　169

第6　章 iOS UI 設(shè)計(jì)

6.1　繪制iPhone X App 界面　171

6.1.1　iOS 系統(tǒng)UI 用戶元素　171

知識(shí)點(diǎn)講解——頂部導(dǎo)航欄　173

知識(shí)點(diǎn)講解——標(biāo)簽欄和搜索欄　173

操作案例——繪制iPhone　X啟動(dòng)界面　174

知識(shí)點(diǎn)講解——表格視圖　176

6.1.2　iOS 系統(tǒng)UI 設(shè)計(jì)要求　177

知識(shí)點(diǎn)講解——確保程序可行　178

知識(shí)點(diǎn)講解——確保App　可以在

iPhone　和iPad 中通用　178

知識(shí)點(diǎn)講解——基于Web　網(wǎng)頁

重新設(shè)計(jì)　179

6.1.3　iOS 系統(tǒng)UI 設(shè)計(jì)原則　179

知識(shí)點(diǎn)講解——美觀性　182

知識(shí)點(diǎn)講解——一致性　183

知識(shí)點(diǎn)講解——控制可行性　184

知識(shí)點(diǎn)講解——及時(shí)性　184

知識(shí)點(diǎn)講解——暗喻性　184

知識(shí)點(diǎn)講解——自主性　185

6.1.4　iPhone X 的App UI 設(shè)計(jì)　185

知識(shí)點(diǎn)講解——編輯位圖　188

知識(shí)點(diǎn)講解——iPhone　X 的屏幕尺寸　190

知識(shí)點(diǎn)講解——iPhone　X 的布局　190

6.2　繪制iPhone 8 App 界面　191

6.2.1　iOS App UI 設(shè)計(jì)模板　192

知識(shí)點(diǎn)講解——iPhone　8 的組件　193

操作案例——繪制iPhone　系統(tǒng)視頻播放界面　194

知識(shí)點(diǎn)講解——iPhone　X 的組件　195

6.2.2　iOS UI 設(shè)計(jì)規(guī)范　195

知識(shí)點(diǎn)講解——界面尺寸　198

知識(shí)點(diǎn)講解——圖標(biāo)尺寸　198

知識(shí)點(diǎn)講解——內(nèi)部設(shè)計(jì)　199

6.2.3　移動(dòng)App 設(shè)計(jì)過程中的要點(diǎn)　199

知識(shí)點(diǎn)講解——App　UI設(shè)計(jì)流程　202

操作案例——繪制系統(tǒng)發(fā)生錯(cuò)誤界面　203

知識(shí)點(diǎn)講解——App　UI配色原則　204

6.3　本章小結(jié)　206

第7　章 PC 端UI 設(shè)計(jì)

7.1　繪制網(wǎng)站登錄界面　208

7.1.1　PC 端和移動(dòng)端UI 設(shè)計(jì)的區(qū)別　208

知識(shí)點(diǎn)講解——網(wǎng)頁設(shè)計(jì)PC　端和

移動(dòng)端的區(qū)別　211

7.1.2　鉛筆工具和剪刀工具　213

知識(shí)點(diǎn)講解——鉛筆工具　215

知識(shí)點(diǎn)講解——剪刀工具　216

操作案例——設(shè)計(jì)制作設(shè)置按鈕①　216

知識(shí)點(diǎn)講解——旋轉(zhuǎn)復(fù)制　217

設(shè)置按鈕②　218

知識(shí)點(diǎn)講解——變形工具　219

7.2　繪制醫(yī)學(xué)網(wǎng)站首頁　219

7.2.1　PC 端UI 設(shè)計(jì)原則　220

知識(shí)點(diǎn)講解——以用戶為中心　223

知識(shí)點(diǎn)講解——視覺美觀　224

知識(shí)點(diǎn)講解——主題明確　224

知識(shí)點(diǎn)講解——內(nèi)容與形式統(tǒng)一　26

知識(shí)點(diǎn)講解——有機(jī)整體　227

操作案例——繪制“休閑空間”啟動(dòng)頁①　227

7.2.2　PC 端UI 設(shè)計(jì)要點(diǎn)　229

知識(shí)點(diǎn)講解——設(shè)計(jì)與技術(shù)相結(jié)合　231

知識(shí)點(diǎn)講解——視覺導(dǎo)向性　232

7.2.3　PC 端UI 設(shè)計(jì)風(fēng)格　233

知識(shí)點(diǎn)講解——大眾化設(shè)計(jì)風(fēng)格　234

知識(shí)點(diǎn)講解——個(gè)性化設(shè)計(jì)風(fēng)格　234

操作案例——繪制“休閑空間”啟動(dòng)頁②　235

7.3　本章小結(jié)　236

第8　章 UI 的輸出與交互設(shè)計(jì)

8.1　UI 圖像的輸出　238

8.1.1　圖標(biāo)的輸出　238

知識(shí)點(diǎn)講解——適配設(shè)備　238

知識(shí)點(diǎn)講解——導(dǎo)出圖層　240

知識(shí)點(diǎn)講解——導(dǎo)出和切片　241

8.1.2　界面的輸出　241

知識(shí)點(diǎn)講解——切片工具　242

操作案例——為切片重命名　245

8.2　UI 設(shè)計(jì)的交互　245

知識(shí)點(diǎn)講解——了解移動(dòng)設(shè)備的手勢(shì)　245

知識(shí)點(diǎn)講解——移動(dòng)交互動(dòng)效設(shè)計(jì)的注意事項(xiàng)　248

知識(shí)點(diǎn)講解——使用Xcode　模擬交互效果　249

8.3　Sketch 插件的安裝與使用　250

知識(shí)點(diǎn)講解——實(shí)用的插件　251

8.4　本章小結(jié)　2522100433B

交互平板涵蓋了側(cè)重內(nèi)置PC系統(tǒng)功能表現(xiàn)的“交互智能平板”，也兼顧了側(cè)重后臺(tái)軟件平臺(tái)構(gòu)建的“交互云平板”，并包容了側(cè)重解決會(huì)議室信號(hào)無線傳輸、處理的“無線交互平板”。

交互平板這種以觸控操作、書寫為使用體驗(yàn)核心，以大尺寸液晶屏為載體的交互類產(chǎn)品概念，由鴻合科技更加合理、科學(xué)、準(zhǔn)確地給出了定義。

未使用交互平板之前的會(huì)議室

使用交互平板的會(huì)議室

簡(jiǎn)要理解，在目前的會(huì)議室中，用戶只需配置1臺(tái)交互平板，即可以同時(shí)實(shí)現(xiàn)：電視、電腦、電腦鼠標(biāo)、音箱、信號(hào)處理器以及遙控器\中央控制面板的所有功能！

功能高度集成的交互平板，為使用用戶帶來的價(jià)值體現(xiàn)為：

提供一種全新體驗(yàn)方式，側(cè)重“自然“操控的業(yè)務(wù)生產(chǎn)工具；繁瑣功能需求，以單一設(shè)備體現(xiàn)，降低了對(duì)會(huì)議空間的需求，提升使用空間舒適感；設(shè)備的簡(jiǎn)約，提供空間簡(jiǎn)約的支撐，提升了企業(yè)形象；以往通過多個(gè)設(shè)備實(shí)現(xiàn)的功能，借助一臺(tái)設(shè)備操控，操作、切換步驟大幅降低，從而提升了工作效率。