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

目 錄

第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頁(yè)面
1.4.4圖層
1.4.5畫(huà)布
1.4.6檢查器
1.5Sketch上手試用
1.6團(tuán)隊(duì)項(xiàng)目介紹
1.6.1項(xiàng)目背景說(shuō)明
1.6.2項(xiàng)目功能需求
1.6.3項(xiàng)目產(chǎn)品架構(gòu)
知識(shí)拓展
動(dòng)腦思考
動(dòng)手操作
第2章快速入門(mén)

2.1交互設(shè)計(jì)入門(mén)
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ì)師的專(zhuān)業(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交互說(shuō)明
2.2.4視覺(jué)規(guī)范
2.2.5視覺(jué)標(biāo)注稿
2.2.6規(guī)范切圖
2.2.7動(dòng)效參數(shù)
2.3學(xué)習(xí)基本工具使用
☆重點(diǎn)2.3.1線(xiàn)條工具
☆重點(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插入類(lèi)工具
2.5.2組織類(lèi)工具
2.5.3編輯類(lèi)工具
2.5.4輔助類(lèi)工具
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畫(huà)布
☆重點(diǎn)3.1.2Artboard（畫(huà)板）
☆重點(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快速?gòu)?fù)制
4.1.2批量復(fù)制
4.1.3一級(jí)頁(yè)面設(shè)計(jì)
☆重點(diǎn)4.2歸類(lèi)整理
4.2.1圖層整理
4.2.2頁(yè)面整理
4.2.3圖層查找
4.3原型演示
4.3.1SketchMirror
4.3.2SketchMirrorforiPhone
4.3.3需求驗(yàn)證
4.3.4二級(jí)頁(yè)面設(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庫(kù)
制作
4.5StyledText（樣式庫(kù)）
4.5.1StyledText的概念
4.5.2TextStyle（字體樣式）
4.5.3ShareStyle（共享樣式）
4.5.4夜視項(xiàng)目樣式庫(kù)
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首頁(yè)及播放頁(yè)設(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交互說(shuō)明
☆重點(diǎn)6.1.3交互規(guī)范
6.2視覺(jué)設(shè)計(jì)輸出物
6.2.1視覺(jué)風(fēng)格探索
6.2.2視覺(jué)頁(yè)面
☆重點(diǎn)6.2.3視覺(jué)規(guī)范
☆重點(diǎn)6.2.4視覺(jué)標(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為用戶(hù)創(chuàng)造愉悅的
體驗(yàn)
7.1.2驗(yàn)證心中的想法和可行性
7.1.3與開(kāi)發(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)畫(huà)
7.4Principle制作原型
7.4.1準(zhǔn)備工作
7.4.2制作翻頁(yè)效果
7.4.3制作轉(zhuǎn)場(chǎng)效果
7.4.4制作滾動(dòng)效果
7.4.5原型演示
7.5Principle制作動(dòng)畫(huà)
☆重點(diǎn)☆難點(diǎn)7.5.1動(dòng)畫(huà)構(gòu)思
☆重點(diǎn)7.5.2動(dòng)畫(huà)制作
☆重點(diǎn)☆難點(diǎn)7.5.3交付開(kāi)發(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流程頁(yè)面設(shè)計(jì)
8.3.4頁(yè)面細(xì)節(jié)設(shè)計(jì)
8.3.5創(chuàng)建最小化Symbol庫(kù)
8.4后臺(tái)交互說(shuō)明
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é)語(yǔ)
參考文獻(xiàn)