第1章　Web產(chǎn)品交互設(shè)計入門　001 1.1　認(rèn)識Web產(chǎn)品　002 1.1.1　Web和Web產(chǎn)品　002 1.1.2　Web的發(fā)展　003 1.2　Web產(chǎn)品的分類　004 1.2.1　社交類Web產(chǎn)品　004 1.2.2　交易類Web產(chǎn)品　004 1.2.3　內(nèi)容類Web產(chǎn)品　005 1.2.4　工具類Web產(chǎn)品　006 1.2.5　平臺類Web產(chǎn)品　006 1.2.6　游戲類Web產(chǎn)品　007 1.3　Web產(chǎn)品的用戶體驗(yàn)層面　007 1.3.1　戰(zhàn)略層：產(chǎn)品目標(biāo)和用戶需求　007 1.3.2　范圍層：功能需求和內(nèi)容需求　008 1.3.3　結(jié)構(gòu)層：交互設(shè)計和信息架構(gòu)　009 1.3.4　框架層：界面設(shè)計、導(dǎo)航設(shè)計和信息設(shè)計　010 1.3.5　表現(xiàn)層：視覺設(shè)計　011 1.4　Web產(chǎn)品的設(shè)計原則　012 1.5　Web產(chǎn)品的設(shè)計流程　012 1.6　Web產(chǎn)品的設(shè)計工具　013 1.7　Web產(chǎn)品的設(shè)計規(guī)范　016 1.7.1　網(wǎng)頁尺寸　016 1.7.2　網(wǎng)頁布局　017 1.7.3　網(wǎng)頁字體　018 1.7.4　字體間距　019 1.7.5　字體顏色　019 1.7.6　首屏內(nèi)容　020 1.7.7　響應(yīng)式布局設(shè)計　020 1.8　同步強(qiáng)化模擬題　021 作業(yè)：分析網(wǎng)站　022 第2章　團(tuán)隊(duì)協(xié)作管理Web項(xiàng)目　023 2.1　團(tuán)隊(duì)協(xié)作和項(xiàng)目管理　024 2.1.1　團(tuán)隊(duì)協(xié)作的要素　024 2.1.2　常見的團(tuán)隊(duì)協(xié)作方法　025 2.2　認(rèn)識Teambition　025 2.2.1　Teambition概述　025 2.2.2　Teambition的主要功能　027 2.3　制作Web項(xiàng)目管理表　030 2.3.1　創(chuàng)建項(xiàng)目和任務(wù)　030 2.3.2　建立子任務(wù)　032 2.3.3　跟進(jìn)項(xiàng)目　033 作業(yè)：制作學(xué)習(xí)進(jìn)度表　034 第3章　梳理交互設(shè)計創(chuàng)意　035 3.1　認(rèn)識思維導(dǎo)圖　036 3.1.1　思維導(dǎo)圖是什么　036 3.1.2　思維導(dǎo)圖構(gòu)成的要素　036 3.1.3　繪制思維導(dǎo)圖的步驟　037 3.2　XMind的使用　038 3.2.1　認(rèn)識XMind　038 3.2.2　XMind的使用方法與技巧　038 3.3　思維導(dǎo)圖在Web產(chǎn)品設(shè)計中的應(yīng)用　044 3.3.1　用思維導(dǎo)圖分析健身類Web產(chǎn)品結(jié)構(gòu)　044 3.3.2　用思維導(dǎo)圖分析旅游類Web產(chǎn)品結(jié)構(gòu)　050 3.4　同步強(qiáng)化模擬題　055 作業(yè)：用思維導(dǎo)圖分析Web產(chǎn)品　056 第4章　制作Web產(chǎn)品流程圖　057 4.1　認(rèn)識流程圖　058 4.1.1　什么是流程圖　058 4.1.2　流程圖的構(gòu)成　058 4.1.3　繪制流程圖的步驟　061 4.2　流程圖繪制工具Visio　062 4.2.1　Visio的基本使用方法　062 4.2.2　制作電商購物的流程圖　063 4.3　用流程圖分析Web產(chǎn)品　066 4.3.1　制作流程圖　066 4.3.2　分析流程圖　067 4.4　同步強(qiáng)化模擬題　069 作業(yè)：制作電商退換貨流程圖　070 第5章　Web產(chǎn)品交互原型設(shè)計　071 5.1　認(rèn)識原型設(shè)計　072 5.2　繪制Web產(chǎn)品原型圖的基本流程　072 5.2.1　收集用戶信息　073 5.2.2　繪制草圖和流程圖　073 5.2.3　繪制原型圖　074 5.2.4　制作交互稿　075 5.2.5　可用性測試　077 5.3　認(rèn)識Axure　077 5.3.1　Axure的基本使用方法　078 5.3.2　健身類網(wǎng)頁設(shè)計原型圖　081 5.4　同步強(qiáng)化模擬題　085 作業(yè)：制作“UI中國”的原型圖和交互稿　086 第6章　圖標(biāo)設(shè)計　088 6.1　圖形工具組　089 6.1.1　認(rèn)識圖形工具組　089 6.1.2　圖形工具組的用法　089 6.1.3　布爾運(yùn)算的典型案例　090 6.2　填色和描邊　094 6.2.1　填色和描邊工具的用法　094 6.2.2　描邊設(shè)置　095 6.2.3　線性圖標(biāo)案例　098 6.2.4　面性圖標(biāo)案例　100 6.3　顏色設(shè)置　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　同步強(qiáng)化模擬題　109 作業(yè)：網(wǎng)頁常用圖標(biāo)　110 第7章　組件設(shè)計　111 7.1　認(rèn)識Web端UI設(shè)計組件　112 7.1.1　UI設(shè)計組件的概念　112 7.1.2　UI設(shè)計組件的優(yōu)勢　113 7.1.3　基于組件的設(shè)計方法　113 7.1.4　引入組件化的時間　117 7.1.5　使用組件化的方法　117 7.2　導(dǎo)航　118 7.3　表單　120 7.4　數(shù)據(jù)　122 7.5　反饋　123 7.6　基礎(chǔ)　124 7.7　其他　125 7.8　網(wǎng)頁組件繪制案例　126 7.9　同步強(qiáng)化模擬題　131 作業(yè)：制作網(wǎng)頁卡片　133 第8章　界面設(shè)計　134 8.1　Web界面的流行趨勢　135 8.2　Web界面設(shè)計要素　139 8.2.1　柵格系統(tǒng)　139 8.2.2　界面中的文字處理　140 8.2.3　界面配色　143 8.3　Web界面設(shè)計案例　145 8.3.1　設(shè)計分析　146 8.3.2　繪制過程　146 8.4　同步強(qiáng)化模擬題　149 作業(yè)：服裝品牌網(wǎng)頁設(shè)計　151 第9章　圖像處理　152 9.1　摳圖　153 9.1.1　快速選擇工具組　153 9.1.2　鋼筆工具　155 9.1.3　保存選區(qū)和載入選區(qū)　157 9.2　修圖　158 9.2.1　修圖的概念　158 9.2.2　修圖的工具及使用方法　161 9.2.3　人物形體修圖　167 9.2.4　人物面部修圖　170 9.2.5　產(chǎn)品修飾　173 9.3　調(diào)色　174 9.3.1　調(diào)色的概念　175 9.3.2　調(diào)色的命令及使用方法　177 9.4　同步強(qiáng)化模擬題　185 作業(yè)：人物修圖　187 第10章　運(yùn)營設(shè)計　188 10.1　運(yùn)營和運(yùn)營設(shè)計的概念　189 10.2　運(yùn)營設(shè)計的分類和特點(diǎn)　190 10.2.1　活動運(yùn)營專題設(shè)計　190 10.2.2　品牌運(yùn)營專題設(shè)計　190 10.3　高效做運(yùn)營設(shè)計的方法　191 10.3.1　項(xiàng)目分析　192 10.3.2　設(shè)計執(zhí)行　193 10.4　運(yùn)營設(shè)計綜合案例　203 10.4.1　品牌運(yùn)營設(shè)計　203 10.4.2　活動運(yùn)營設(shè)計　207 10.5　同步強(qiáng)化模擬題　211 作業(yè)：旅游類頁面Banner設(shè)計　212 第11章　Web產(chǎn)品首頁設(shè)計案例　213 11.1　頁面布局　214 11.1.1　處理素材　214 11.1.2　新建文檔　215 11.1.3　設(shè)置柵格　215 11.1.4　調(diào)整圖片　216 11.2　制作導(dǎo)航欄　216 11.3　添加文字和按鈕　217 11.3.1　添加主副文字　217 11.3.2　制作按鈕　218 11.4　輸出文件　218 11.5　拓展知識：Web詳情頁設(shè)計　218 11.5.1　常用的詳情頁設(shè)計形式　219 11.5.2　詳情頁首屏設(shè)計方法　220 11.5.3　詳情頁制作案例　221 作業(yè)：運(yùn)動類網(wǎng)站首頁設(shè)計　224 第12章　Web產(chǎn)品設(shè)計全流程　225 12.1　案例說明　226 12.2　設(shè)計準(zhǔn)備　226 12.3　原型設(shè)計　229 12.4　界面設(shè)計　235 作業(yè)：購物類Web產(chǎn)品的頁面設(shè)計　238 附錄　同步強(qiáng)化模擬題答案速查表　239