Sketch交互設(shè)計之美目錄

第1章初識Sketch

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

1.2Sketch簡介

1.2.1Sketch是什么

1.2.2Sketch的優(yōu)勢

1.2.3Sketch對于團隊特別是交互設(shè)計師的價值

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

1.2.5Sketch和Photoshop對比

1.3Sketch獲取

1.3.1Sketch下載

1.3.2Sketch安裝

1.3.3Sketch激活

1.3.4Sketch定價策略

1.4Sketch界面介紹

1.4.1菜單欄

1.4.2工具欄

1.4.3頁面

1.4.4圖層

1.4.5畫布

1.4.6檢查器

1.5Sketch上手試用

1.6團隊項目介紹

1.6.1項目背景說明

1.6.2項目功能需求

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

知識拓展

動腦思考

動手操作

第2章快速入門

2.1交互設(shè)計入門

2.1.1認識交互設(shè)計

2.1.2認識交互設(shè)計師

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

2.1.4交互設(shè)計師的職責

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

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

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

☆重點2.1.8了解交互設(shè)計流程

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

2.2.1流程圖

2.2.2低、高保真原型

2.2.3交互說明

2.2.4視覺規(guī)范

2.2.5視覺標注稿

2.2.6規(guī)范切圖

2.2.7動效參數(shù)

2.3學習基本工具使用

☆重點2.3.1線條工具

☆重點2.3.2幾何工具

☆重點2.3.3文字工具

2.4學習高級工具使用

2.4.1剪刀工具

2.4.2變形工具

2.5學習其他工具使用

2.5.1插入類工具

2.5.2組織類工具

2.5.3編輯類工具

2.5.4輔助類工具

2.6學會版本管理

2.6.1使用多個Sketch文件管理

2.6.2使用Sketch自動保存歷史

版本

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

☆重點2.7.1原型尺寸

2.7.2命名規(guī)范

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

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

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

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

知識拓展

實戰(zhàn)教學

動腦思考

動手操作

第3章基礎(chǔ)運用

3.1創(chuàng)作空間

3.1.1畫布

☆重點3.1.2Artboard（畫板）

☆重點3.1.3柵格布局

3.2框架設(shè)計

3.2.1發(fā)散思維

3.2.2人物角色

3.2.3故事板

3.2.4流程設(shè)計

3.2.5信息架構(gòu)

3.3界面設(shè)計

3.3.1界面設(shè)計原則

3.3.2界面設(shè)計理論

3.3.3界面設(shè)計實踐

3.4圖像處理

3.4.1圖像導(dǎo)入

☆重點3.4.2圖像處理方式

3.4.3Mask（蒙版）處理

3.5圖標設(shè)計

☆重點3.5.1認識圖標

3.5.2圖標繪制規(guī)范

☆重點3.5.3圖標繪制

3.5.4圖標引用

3.6測距和對齊

3.6.1測距

3.6.2對齊

知識拓展

實戰(zhàn)教學

動腦思考

動手操作

第4章高級運用

4.1快速原型設(shè)計

4.1.1快速復(fù)制

4.1.2批量復(fù)制

4.1.3一級頁面設(shè)計

☆重點4.2歸類整理

4.2.1圖層整理

4.2.2頁面整理

4.2.3圖層查找

4.3原型演示

4.3.1SketchMirror

4.3.2SketchMirrorforiPhone

4.3.3需求驗證

4.3.4二級頁面設(shè)計

4.4Symbol（符號）

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

場景

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

☆重點☆難點4.4.3Symbol

嵌套教程

☆重點☆難點4.4.4夜視Symbol庫

制作

4.5StyledText（樣式庫）

4.5.1StyledText的概念

4.5.2TextStyle（字體樣式）

4.5.3ShareStyle（共享樣式）

4.5.4夜視項目樣式庫

4.6細節(jié)設(shè)計

☆重點4.6.1交互邊界

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

☆重點4.6.3場景設(shè)計

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

知識拓展

實戰(zhàn)教學

動腦思考

動手操作

第5章團隊協(xié)作

5.1Sketch和團隊協(xié)作

5.1.1團隊協(xié)作基礎(chǔ)

5.1.2Sketch協(xié)作流程

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

☆重點☆新功能5.2.1Libraries

介紹

☆重點5.2.2Libraries制作和

導(dǎo)入

☆重點5.2.3Libraries使用和

更新

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

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

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

5.3.2創(chuàng)建團隊文件夾

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

5.3.4查看歷史版本

動腦思考

動手操作

第6章交付輸出

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

6.1.1交互方案和交互原型

☆重點6.1.2交互說明

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

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

6.2.1視覺風格探索

6.2.2視覺頁面

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

☆重點6.2.4視覺標注

☆重點6.2.5切圖資源

知識拓展

實戰(zhàn)教學

動腦思考

動手操作

第7章動效設(shè)計Principle

7.1需要動效設(shè)計的原因

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

體驗

7.1.2驗證心中的想法和可行性

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

7.2選擇Principle的原因

7.2.1Principle簡介

7.2.2Principle的優(yōu)勢

7.2.3Principle的獲取、安裝與

激活

7.3Principle初體驗

7.3.1初識界面

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

☆重點7.3.3事件

☆重點7.3.4動畫

7.4Principle制作原型

7.4.1準備工作

7.4.2制作翻頁效果

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

7.4.4制作滾動效果

7.4.5原型演示

7.5Principle制作動畫

☆重點☆難點7.5.1動畫構(gòu)思

☆重點7.5.2動畫制作

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

實現(xiàn)

實戰(zhàn)教學

動腦思考

動手操作

第8章完整后臺設(shè)計實現(xiàn)

8.1后臺設(shè)計目標

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

8.1.2設(shè)計目標

8.2后臺框架設(shè)計

8.2.1角色場景

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

8.2.3流程設(shè)計

8.3后臺界面設(shè)計

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

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

8.3.3流程頁面設(shè)計

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

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

8.4后臺交互說明

8.4.1學會講故事

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

8.5學習建議

8.5.1Sketch學習建議

8.5.2交互設(shè)計學習建議

結(jié)語

參考文獻 2100433B

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

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

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

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

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

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

1.1.1　早期UI設(shè)計的風格　3

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

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

知識點講解——iOS系統(tǒng)　6

知識點講解——Android系統(tǒng)　6

知識點講解——Windows　系統(tǒng)　7

知識點講解——擬物化風格設(shè)計　8

知識點講解——扁平化風格設(shè)計　8

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

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

1.2.2　UI視覺設(shè)計　10

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

1.2.4　BUG測試　12

1.2.5　產(chǎn)品上線　12

1.2.6　產(chǎn)品迭代　13

1.3　UI設(shè)計的注意事項　13

1.3.1　圖稿一致性原則　13

知識點講解——字體　13

知識點講解——表單錄入　14

知識點講解——鼠標手勢　14

1.3.2　圖稿準確性原則　15

1.3.3　布局合理化原則　16

1.3.4　操作合理性原則　17

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

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

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

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

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

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

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

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

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

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

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

知識點講解——同色系　23

知識點講解——鄰近色　23

知識點講解——對比色　25

知識點講解——互補色　25

1.5　本章小結(jié)　26

第 2章　初識Sketch

2.1　繪制iOS 照片分享界面　28

2.1.1　Sketch的安裝與啟動　28

操作案例——安裝與啟動Sketch　28

2.1.2　了解Sketch界面　30

知識點講解——Sketch的主界面　31

知識點講解——菜單欄　31

知識點講解——工具欄　34

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

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

知識點講解——Sketch的快捷鍵　35

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

2.1.4　添加圖片、形狀　39

知識點講解——Sketch插入面板　39

知識點講解——插入圖片　40

知識點講解——插入形狀　41

2.1.5　添加文本　42

知識點講解——插入文本　43

2.2　繪制手機登錄頁　45

2.2.1　新建和保存Sketch文件　45

知識點講解——文件的新建和保存　45

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

2.2.2　使用Sketch 畫板　48

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

知識點講解——畫板檢查器　50

2.2.3　使用Sketch 模板　51

知識點講解——　“iOS 用戶界面設(shè)計”模板　52

2.3　本章小結(jié)　56

第3　章 繪制線框原型

3.1　繪制手機信息界面線框圖　58

3.1.1　線框原型的基本概念　58

知識點講解——線框原型概念　60

知識點講解——線框原型視覺特性　61

3.1.2　繪制線框原型的注意事項　61

知識點講解——巧用明暗對比　63

知識點講解——不使用截圖和顏色　64

知識點講解——標記第 一屏高度　64

知識點講解——合理的布局和間距　65

3.2　繪制注冊頁面線框圖　65

3.2.1　圖層面板　66

知識點講解——圖層面板簡述　67

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

知識點講解——選擇圖層　69

操作案例——移動圖層　70

3.2.2　圖層類型　71

知識點講解——圖層類型詳解　73

操作案例——變換大小　75

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

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

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

知識點講解——圖層組的檢查器　80

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

3.3.1　計步App 線框圖的繪制01　84

3.3.2　計步App 線框圖的繪制02　87

3.4　本章小結(jié)　91

第4　章 使用Sketch 繪制圖標

4.1　繪制iOS 11 提醒事項圖標　93

4.1.1　矢量工具　93

知識點講解——矢量圖形（形狀）　95

知識點講解——點模式　95

知識點講解——編輯矢量圖形　96

操操作案例——矢量工具繪制箭頭圖標　97

4.1.2　路徑的使用　98

知識點講解——路徑　100

4.2　繪制Android 照相機圖標　101

4.2.1　使用“形狀”繪制圖標　102

操作案例——使用布爾運算繪制照相機圖標　106

知識點講解——布爾運算　107

4.2.2　使用“蒙板”繪制圖標　108

知識點講解——蒙板命令　109

操作案例——使用透明度蒙板制作簡易圖標　110

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

知識點講解——圖標基本屬性　113

4.3　繪制極簡化的Android圖標　116

4.3.1　Android 圖標設(shè)計準則　116

知識點講解——圖標設(shè)計準則　118

4.3.2　圖標設(shè)計的三大原則　120

知識點講解——三大原則　122

4.3.3　極簡化設(shè)計　123

知識點講解——極簡化設(shè)計風格　126

操作案例——繪制記事本圖標　127

4.4　本章小結(jié)　128

第5章　Android UI 設(shè)計

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

5.1.1　組件的編輯及使用　130

知識點講解——創(chuàng)建組件　133

知識點講解——更換文本　133

知識點講解——管理組件　134

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

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

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

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

知識點講解——軟件啟動UI設(shè)計　139

5.1.3　移動App UI 設(shè)計　140

知識點講解——什么是App　142

知識點講解——移動UI的設(shè)計趨勢　143

知識點講解——移動UI和平面UI的區(qū)別　145

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

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

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

知識點講解——Android　系統(tǒng)UI 設(shè)計特色　150

5.2　繪制Android 信息界面　151

5.2.1　“文本”命令　152

知識點講解——添加文本　154

知識點講解——文本框　154

5.2.2　“文本”檢查器　155

知識點講解——文本的編輯　157

知識點講解——共享樣式　159

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

繪制界面　160

5.2.3　“文本”選項　161

知識點講解——文本路徑　163

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

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

界面元素　164

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

知識點講解——應(yīng)用樣式　166

知識點講解——混合模式　168

5.3　本章小結(jié)　169

第6　章 iOS UI 設(shè)計

6.1　繪制iPhone X App 界面　171

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

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

知識點講解——標簽欄和搜索欄　173

操作案例——繪制iPhone　X啟動界面　174

知識點講解——表格視圖　176

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

知識點講解——確保程序可行　178

知識點講解——確保App　可以在

iPhone　和iPad 中通用　178

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

重新設(shè)計　179

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

知識點講解——美觀性　182

知識點講解——一致性　183

知識點講解——控制可行性　184

知識點講解——及時性　184

知識點講解——暗喻性　184

知識點講解——自主性　185

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

知識點講解——編輯位圖　188

知識點講解——iPhone　X 的屏幕尺寸　190

知識點講解——iPhone　X 的布局　190

6.2　繪制iPhone 8 App 界面　191

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

知識點講解——iPhone　8 的組件　193

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

知識點講解——iPhone　X 的組件　195

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

知識點講解——界面尺寸　198

知識點講解——圖標尺寸　198

知識點講解——內(nèi)部設(shè)計　199

6.2.3　移動App 設(shè)計過程中的要點　199

知識點講解——App　UI設(shè)計流程　202

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

知識點講解——App　UI配色原則　204

6.3　本章小結(jié)　206

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

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

7.1.1　PC 端和移動端UI 設(shè)計的區(qū)別　208

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

移動端的區(qū)別　211

7.1.2　鉛筆工具和剪刀工具　213

知識點講解——鉛筆工具　215

知識點講解——剪刀工具　216

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

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

設(shè)置按鈕②　218

知識點講解——變形工具　219

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

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

知識點講解——以用戶為中心　223

知識點講解——視覺美觀　224

知識點講解——主題明確　224

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

知識點講解——有機整體　227

操作案例——繪制“休閑空間”啟動頁①　227

7.2.2　PC 端UI 設(shè)計要點　229

知識點講解——設(shè)計與技術(shù)相結(jié)合　231

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

7.2.3　PC 端UI 設(shè)計風格　233

知識點講解——大眾化設(shè)計風格　234

知識點講解——個性化設(shè)計風格　234

操作案例——繪制“休閑空間”啟動頁②　235

7.3　本章小結(jié)　236

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

8.1　UI 圖像的輸出　238

8.1.1　圖標的輸出　238

知識點講解——適配設(shè)備　238

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

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

8.1.2　界面的輸出　241

知識點講解——切片工具　242

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

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

知識點講解——了解移動設(shè)備的手勢　245

知識點講解——移動交互動效設(shè)計的注意事項　248

知識點講解——使用Xcode　模擬交互效果　249

8.3　Sketch 插件的安裝與使用　250

知識點講解——實用的插件　251

8.4　本章小結(jié)　2522100433B

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

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

未使用交互平板之前的會議室

使用交互平板的會議室

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

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

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