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

目 錄

第1章初識(shí)Sketch

1.1擁抱變化，交互設(shè)計(jì)師的蛻變之旅
1.2Sketch簡介
1.2.1Sketch是什么
1.2.2Sketch的優(yōu)勢
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測距和對(duì)齊
3.6.1測距
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)用
場景
☆重點(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í)拓展
實(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簡介
7.2.2Principle的優(yōu)勢
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)場效果
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角色場景
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)