數字媒體交互設計（初級）——Web產品交互設計方法與案例

威鳳教育為鳳凰教育全資子公司，鳳凰教育為教育部1+X項目“數字媒體交互設計職業技能等級證書”社會評價組織，被授權作為唯一數字媒體交互設計職業技能崗位教材、課件等資源建設與日常運營管理單位。

第1章Web產品交互設計入門001
1．1認識Web產品002
1．1．1 Web和Web產品002
1．1．2 Web的發展003
1．2 Web產品的分類004
1．2．1社交類Web產品004
1．2．2交易類Web產品004
1．2．3內容類Web產品005
1．2．4工具類Web產品006
1．2．5平台類Web產品006
1．2．6遊戲類Web產品007
1．3 Web產品的用戶體驗層面007
1．3．1戰略層：產品目標和用戶需求007
1．3．2範圍層：功能需求和內容需求008
1．3．3結構層：交互設計和信息架構009
1．3．4框架層：界面設計、導航設計和信息設計010
1．3．5表現層：視覺設計011
1．4 Web產品的設計原則012
1．5 Web產品的設計流程012
1．6 Web產品的設計工具013
1．7 Web產品的設計規範016
1．7．1網頁尺寸016
1．7．2網頁佈局017
1．7．3網頁字體018
1．7．4字體間距019
1．7．5字體顏色019
1．7．6首屏內容020
1．7．7響應式佈局設計020
1．8同步強化模擬題021
作業：分析網站022

第2章團隊協作管理Web項目023
2．1團隊協作和項目管理024
2．1．1團隊協作的要素024
2．1．2常見的團隊協作方法025
2．2認識Teambition 025
2．2．1 Teambition概述025
2．2．2 Teambition的主要功能027
2．3製作Web項目管理表030
2．3．1創建項目和任務030
2．3．2建立子任務032
2．3．3跟進項目033
作業：製作學習進度表034

第3章梳理交互設計創意035
3．1認識思維導圖036
3．1．1思維導圖是什麼036
3．1．2思維導圖構成的要素036
3．1．3繪製思維導圖的步驟037
3．2 XMind的使用038
3．2 ．1認識XMind 038
3．2．2 XMind的使用方法與技巧038
3．3思維導圖在Web產品設計中的應用044
3．3．1用思維導圖分析健身類Web產品結構044
3．3．2用思維導圖分析旅遊類Web產品結構050
3．4同步強化模擬題055
作業：用思維導圖分析Web產品056

第4章製作Web產品流程圖057
4．1認識流程圖058
4．1．1什麼是流程圖058
4．1．2流程圖的構成058
4．1．3繪製流程圖的步驟061
4．2流程圖繪製工具Visio 062
4．2．1 Visio的基本使用方法062
4．2．2製作電商購物的流程圖063
4．3用流程圖分析Web產品066
4．3．1製作流程圖066
4．3．2分析流程圖067
4．4同步強化模擬題069
作業：製作電商退換貨流程圖070

第5章Web產品交互原型設計071
5．1認識原型設計072
5．2繪製Web產品原型圖的基本流程072
5．2．1收集用戶信息073
5．2 ．2繪製草圖和流程圖073
5．2．3繪製原型圖074
5．2．4製作交互稿075
5．2．5可用性測試077
5．3認識Axure 077
5．3．1 Axure的基本使用方法078
5．3．2健身類網頁設計原型圖081
5．4同步強化模擬題085
作業：製作“UI中國”的原型圖和交互稿086

第6章圖標設計088
6．1圖形工具組089
6．1．1認識圖形工具組089
6．1．2圖形工具組的用法089
6．1．3布爾運算的典型案例090
6．2填色和描邊094
6．2．1填色和描邊工具的用法094
6．2．2描邊設置095
6 ．2．3線性圖標案例098
6．2．4面性圖標案例100
6．3顏色設置101
6．3．1色板102
6．3．2配色方案103
6．3．3漸變104
6．4效果107
6．4．1 Illustrator效果107
6．4．2 Photoshop效果107
6．5同步強化模擬題109
作業：網頁常用圖標110

第7章組件設計111
7．1認識Web端UI設計組件112
7． 1．1 UI設計組件的概念112
7．1．2 UI設計組件的優勢113
7．1．3基於組件的設計方法113
7．1．4引入組件化的時間117
7．1．5使用組件化的方法117
7．2導航118
7．3表單120
7．4數據122
7．5反饋123
7．6基礎124
7．7其他125
7．8網頁組件繪製案例126
7．9同步強化模擬題131
作業：製作網頁卡片133

第8章界面設計134
8．1 Web界面的流行趨勢135
8．2 Web界面設計要素139
8．2．1柵格系統139
8．2．2界面中的文字處理140
8．2．3界面配色143
8．3 Web界面設計案例145
8．3．1設計分析146
8．3．2繪製過程146
8．4同步強化模擬題149
作業：服裝品牌網頁設計151

第9章圖像處理152
9． 1摳圖153
9．1．1快速選擇工具組153
9．1．2鋼筆工具155
9．1．3保存選區和載入選區157
9．2修圖158
9．2．1修圖的概念158
9．2．2修圖的工具及使用方法161
9．2．3人物形體修圖167
9．2．4人物面部修圖170
9．2．5產品修飾173
9．3調色174
9．3．1調色的概念175
9．3．2調色的命令及使用方法177
9．4同步強化模擬題185
作業：人物修圖187

第10章運營設計188
10．1運營和運營設計的概念189
10．2運營設計的分類和特點190
10．2．1活動運營專題設計190
10．2．2品牌運營專題設計190
10．3高效做運營設計的方法191
10．3．1項目分析192
10．3．2設計執行193
10．4運營設計綜合案例203
10．4．1品牌運營設計203
10．4．2活動運營設計207
10 ．5同步強化模擬題211
作業：旅遊類頁面Banner設計212

第11章Web產品首頁設計案例213
11．1頁面佈局214
11．1．1處理素材214
11．1．2新建文檔215
11．1． 3設置柵格215
11．1．4調整圖片216
11．2製作導航欄216
11．3添加文字和按鈕217
11．3．1添加主副文字217
11．3．2製作按鈕218
11．4輸出文件218
11．5拓展知識：Web詳情頁設計218
11．5．1常用的詳情頁設計形式219
11．5．2詳情頁首屏設計方法220
11 ．5．3詳情頁製作案例221
作業：運動類網站首頁設計224

第12章Web產品設計全流程225
12．1案例說明226
12．2設計準備226
12．3原型設計229
12．4界面設計235
作業：購物類Web產品的頁面設計238
附錄同步強化模擬題答案速查表239