Sketch交互設計之美內(nèi)容簡介

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

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

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

第1章初識Sketch

1.1擁抱變化，交互設計師的蛻變之旅

1.2Sketch簡介

1.2.1Sketch是什么

1.2.2Sketch的優(yōu)勢

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

1.2.4Sketch的應用前景

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)品架構

知識拓展

動腦思考

動手操作

第2章快速入門

2.1交互設計入門

2.1.1認識交互設計

2.1.2認識交互設計師

2.1.3交互設計師需要具備的素質

2.1.4交互設計師的職責

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

2.1.6交互設計師需要的知識體系

2.1.7交互設計師常用的工具

☆重點2.1.8了解交互設計流程

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掌握交互設計方法論

2.8.1交互設計方法論的概念

2.8.2交互設計方法論——5W2H

2.8.3其他交互設計方法論

知識拓展

實戰(zhàn)教學

動腦思考

動手操作

第3章基礎運用

3.1創(chuàng)作空間

3.1.1畫布

☆重點3.1.2Artboard（畫板）

☆重點3.1.3柵格布局

3.2框架設計

3.2.1發(fā)散思維

3.2.2人物角色

3.2.3故事板

3.2.4流程設計

3.2.5信息架構

3.3界面設計

3.3.1界面設計原則

3.3.2界面設計理論

3.3.3界面設計實踐

3.4圖像處理

3.4.1圖像導入

☆重點3.4.2圖像處理方式

3.4.3Mask（蒙版）處理

3.5圖標設計

☆重點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快速原型設計

4.1.1快速復制

4.1.2批量復制

4.1.3一級頁面設計

☆重點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二級頁面設計

4.4Symbol（符號）

☆重點4.4.1Symbol的介紹及應用

場景

☆重點4.4.2Symbol基礎教程

☆重點☆難點4.4.3Symbol

嵌套教程

☆重點☆難點4.4.4夜視Symbol庫

制作

4.5StyledText（樣式庫）

4.5.1StyledText的概念

4.5.2TextStyle（字體樣式）

4.5.3ShareStyle（共享樣式）

4.5.4夜視項目樣式庫

4.6細節(jié)設計

☆重點4.6.1交互邊界

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

☆重點4.6.3場景設計

4.6.4首頁及播放頁設計

知識拓展

實戰(zhàn)教學

動腦思考

動手操作

第5章團隊協(xié)作

5.1Sketch和團隊協(xié)作

5.1.1團隊協(xié)作基礎

5.1.2Sketch協(xié)作流程

5.2使用Libraries減少重復勞作

☆重點☆新功能5.2.1Libraries

介紹

☆重點5.2.2Libraries制作和

導入

☆重點5.2.3Libraries使用和

更新

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

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

5.3.1構建前的準備工作

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

5.3.3設置本地同步文件夾

5.3.4查看歷史版本

動腦思考

動手操作

第6章交付輸出

6.1交互設計輸出物

6.1.1交互方案和交互原型

☆重點6.1.2交互說明

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

6.2視覺設計輸出物

6.2.1視覺風格探索

6.2.2視覺頁面

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

☆重點6.2.4視覺標注

☆重點6.2.5切圖資源

知識拓展

實戰(zhàn)教學

動腦思考

動手操作

第7章動效設計Principle

7.1需要動效設計的原因

☆重點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制作轉場效果

7.4.4制作滾動效果

7.4.5原型演示

7.5Principle制作動畫

☆重點☆難點7.5.1動畫構思

☆重點7.5.2動畫制作

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

實現(xiàn)

實戰(zhàn)教學

動腦思考

動手操作

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

8.1后臺設計目標

8.1.1業(yè)務功能

8.1.2設計目標

8.2后臺框架設計

8.2.1角色場景

8.2.2權限設計

8.2.3流程設計

8.3后臺界面設計

8.3.1菜單導航設計

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

8.3.3流程頁面設計

8.3.4頁面細節(jié)設計

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

8.4后臺交互說明

8.4.1學會講故事

8.4.2時刻警惕權限和安全

8.5學習建議

8.5.1Sketch學習建議

8.5.2交互設計學習建議

結語

參考文獻 2100433B

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

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

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

1.1.1　早期UI設計的風格　3

1.1.2　中期UI設計的興起　3

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

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

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

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

知識點講解——擬物化風格設計　8

知識點講解——扁平化風格設計　8

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

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

1.2.2　UI視覺設計　10

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

1.2.4　BUG測試　12

1.2.5　產(chǎn)品上線　12

1.2.6　產(chǎn)品迭代　13

1.3　UI設計的注意事項　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)響應時間原則　18

1.4　配色對于UI設計的影響　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　本章小結　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　設置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

操作案例——設置Sketch　的標尺　47

2.2.2　使用Sketch 畫板　48

知識點講解——畫板預設　48

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

2.2.3　使用Sketch 模板　51

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

2.3　本章小結　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

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

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

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

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

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

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

3.4　本章小結　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　添加陰影效果為圖標添加質感　112

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

4.3　繪制極簡化的Android圖標　116

4.3.1　Android 圖標設計準則　116

知識點講解——圖標設計準則　118

4.3.2　圖標設計的三大原則　120

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

4.3.3　極簡化設計　123

知識點講解——極簡化設計風格　126

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

4.4　本章小結　128

第5章　Android UI 設計

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

5.1.1　組件的編輯及使用　130

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

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

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

操作案例——使用組件工具繪制導航欄　135

5.1.2　應用軟件UI 設計　136

知識點講解——什么是應用軟件UI設計　137

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

知識點講解——軟件啟動UI設計　139

5.1.3　移動App UI 設計　140

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

知識點講解——移動UI的設計趨勢　143

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

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

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

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

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

5.2　繪制Android 信息界面　151

5.2.1　“文本”命令　152

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

知識點講解——文本框　154

5.2.2　“文本”檢查器　155

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

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

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

繪制界面　160

5.2.3　“文本”選項　161

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

知識點講解——文本轉換輪廓　164

操作案例——轉化為輪廓繪制

界面元素　164

知識點講解——導出文字　165

知識點講解——應用樣式　166

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

5.3　本章小結　169

第6　章 iOS UI 設計

6.1　繪制iPhone X App 界面　171

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

知識點講解——頂部導航欄　173

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

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

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

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

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

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

iPhone　和iPad 中通用　178

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

重新設計　179

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

知識點講解——美觀性　182

知識點講解——一致性　183

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

知識點講解——及時性　184

知識點講解——暗喻性　184

知識點講解——自主性　185

6.1.4　iPhone X 的App UI 設計　185

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

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

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

6.2　繪制iPhone 8 App 界面　191

6.2.1　iOS App UI 設計模板　192

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

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

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

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

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

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

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

6.2.3　移動App 設計過程中的要點　199

知識點講解——App　UI設計流程　202

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

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

6.3　本章小結　206

第7　章 PC 端UI 設計

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

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

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

移動端的區(qū)別　211

7.1.2　鉛筆工具和剪刀工具　213

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

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

操作案例——設計制作設置按鈕①　216

知識點講解——旋轉復制　217

設置按鈕②　218

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

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

7.2.1　PC 端UI 設計原則　220

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

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

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

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

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

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

7.2.2　PC 端UI 設計要點　229

知識點講解——設計與技術相結合　231

知識點講解——視覺導向性　232

7.2.3　PC 端UI 設計風格　233

知識點講解——大眾化設計風格　234

知識點講解——個性化設計風格　234

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

7.3　本章小結　236

第8　章 UI 的輸出與交互設計

8.1　UI 圖像的輸出　238

8.1.1　圖標的輸出　238

知識點講解——適配設備　238

知識點講解——導出圖層　240

知識點講解——導出和切片　241

8.1.2　界面的輸出　241

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

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

8.2　UI 設計的交互　245

知識點講解——了解移動設備的手勢　245

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

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

8.3　Sketch 插件的安裝與使用　250

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

8.4　本章小結　2522100433B

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

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

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

使用交互平板的會議室

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

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

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