數字媒體交互設計(初級)——Web產品交互設計方法與案例
內容描述
《數字媒體交互設計(初級)——Web產品交互設計方法與案例》針對Web產品交互設計新人,通過案例深入淺出地講解了Web產品交互設計的思維、方法與技巧。共12章,主要講述了Web產品交互設計的要素、流程、工具和規範,Web項目管理及協作方法,Web產品交互創意的梳理方法,Web產品流程圖、原型圖的製作方法,以及圖標設計、組件設計、界面設計、圖像處理、運營設計等內容,並輔以Web項目實戰案例,帶領讀者一步步加深對Web產品交互設計的認知,提升自身的工作能力。本書的重點章後附有同步強化模擬題和作業,以幫助讀者檢驗知識掌握程度並學會靈活運用所學知識。
《數字媒體交互設計(初級)——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
作者介紹
威鳳教育為鳳凰教育全資子公司,鳳凰教育為教育部1+X項目“數字媒體交互設計職業技能等級證書”社會評價組織,被授權作為唯一數字媒體交互設計職業技能崗位教材、課件等資源建設與日常運營管理單位。