Sketch交互設(shè)計(jì)之美：從零基礎(chǔ)到完整項(xiàng)目實(shí)現(xiàn)

目 錄

第1章初識Sketch

1.1擁抱變化，交互設(shè)計(jì)師的蛻變之旅
1.2Sketch簡介
1.2.1Sketch是什么
1.2.2Sketch的優(yōu)勢
1.2.3Sketch對于團(tuán)隊(duì)特別是交互設(shè)計(jì)師的價(jià)值
1.2.4Sketch的應(yīng)用前景
1.2.5Sketch和Photoshop對比
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)
知識拓展
動腦思考
動手操作
第2章快速入門

2.1交互設(shè)計(jì)入門
2.1.1認(rèn)識交互設(shè)計(jì)
2.1.2認(rèn)識交互設(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ì)師需要的知識體系
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動效參數(shù)
2.3學(xué)習(xí)基本工具使用
☆重點(diǎn)2.3.1線條工具
☆重點(diǎn)2.3.2幾何工具
☆重點(diǎn)2.3.3文字工具
2.4學(xué)習(xí)高級工具使用
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é)會版本管理
2.6.1使用多個(gè)Sketch文件管理
2.6.2使用Sketch自動保存歷史
版本
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í)戰(zhàn)教學(xué)
動腦思考
動手操作
第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)識圖標(biāo)
3.5.2圖標(biāo)繪制規(guī)范
☆重點(diǎn)3.5.3圖標(biāo)繪制
3.5.4圖標(biāo)引用
3.6測距和對齊
3.6.1測距
3.6.2對齊
知識拓展
實(shí)戰(zhàn)教學(xué)
動腦思考
動手操作
第4章高級運(yùn)用

4.1快速原型設(shè)計(jì)
4.1.1快速復(fù)制
4.1.2批量復(fù)制
4.1.3一級頁面設(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二級頁面設(shè)計(jì)
4.4Symbol（符號）
☆重點(diǎn)4.4.1Symbol的介紹及應(yī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場景設(shè)計(jì)
4.6.4首頁及播放頁設(shè)計(jì)
知識拓展
實(shí)戰(zhàn)教學(xué)
動腦思考
動手操作
第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查看歷史版本
動腦思考
動手操作
第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í)戰(zhàn)教學(xué)
動腦思考
動手操作
第7章動效設(shè)計(jì)Principle

7.1需要動效設(shè)計(jì)的原因
☆重點(diǎn)7.1.1為用戶創(chuàng)造愉悅的
體驗(yàn)
7.1.2驗(yàn)證心中的想法和可行性
7.1.3與開發(fā)工程師溝通動態(tài)效果
7.2選擇Principle的原因
7.2.1Principle簡介
7.2.2Principle的優(yōu)勢
7.2.3Principle的獲取、安裝與
激活
7.3Principle初體驗(yàn)
7.3.1初識界面
☆重點(diǎn)7.3.2交互形態(tài)
☆重點(diǎn)7.3.3事件
☆重點(diǎn)7.3.4動畫
7.4Principle制作原型
7.4.1準(zhǔn)備工作
7.4.2制作翻頁效果
7.4.3制作轉(zhuǎn)場效果
7.4.4制作滾動效果
7.4.5原型演示
7.5Principle制作動畫
☆重點(diǎn)☆難點(diǎn)7.5.1動畫構(gòu)思
☆重點(diǎn)7.5.2動畫制作
☆重點(diǎn)☆難點(diǎn)7.5.3交付開發(fā)
實(shí)現(xiàn)
實(shí)戰(zhàn)教學(xué)
動腦思考
動手操作
第8章完整后臺設(shè)計(jì)實(shí)現(xiàn)

8.1后臺設(shè)計(jì)目標(biāo)
8.1.1業(yè)務(wù)功能
8.1.2設(shè)計(jì)目標(biāo)
8.2后臺框架設(shè)計(jì)
8.2.1角色場景
8.2.2權(quán)限設(shè)計(jì)
8.2.3流程設(shè)計(jì)
8.3后臺界面設(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后臺交互說明
8.4.1學(xué)會講故事
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)