配色+布局+海報(bào)+移動(dòng)電商 UI設(shè)計(jì)教程

第1章?電商UI設(shè)計(jì)基礎(chǔ)
1．1?了解電商UI設(shè)計(jì)\t1
1．1．1?什么是電子商務(wù)\t1
1．1．2?電商UI設(shè)計(jì)屬于什么范疇\t2
1．1．3?電商UI設(shè)計(jì)的重要性\t3
1．1．4?電商的發(fā)展趨勢(shì)\t3
1．1．5?電商設(shè)計(jì)師的要求\t4
1．2?移動(dòng)電商\t4
1．2．1?什么是移動(dòng)電商\t4
1．2．2?移動(dòng)電商與傳統(tǒng)電商的區(qū)別\t5
1．2．3?移動(dòng)電商的現(xiàn)狀\t5
1．2．4?移動(dòng)電商的應(yīng)用形式\t6
1．3?移動(dòng)電商UI設(shè)計(jì)與傳統(tǒng)電商UI設(shè)計(jì)的
差異\t8
1．3．1?使用場(chǎng)景\t8
1．3．2?交互方式\t8
1．3．3?屏幕尺寸\t9
1．3．4?信息組織\t10
1．3．5?導(dǎo)航系統(tǒng)\t11
1．4?電商UI設(shè)計(jì)需要注意的問(wèn)題\t12
1．5?如何創(chuàng)建成功的電商網(wǎng)站\t12
1．5．1?為用戶群體設(shè)計(jì)\t12
1．5．2?采用常規(guī)的導(dǎo)航\t13
1．5．3?設(shè)計(jì)一個(gè)令人驚艷的主頁(yè)\t14
1．5．4?讓商品詳情頁(yè)面更易轉(zhuǎn)化\t14
1．6?電商UI視覺(jué)營(yíng)銷(xiāo)\t15
1．6．1?電商UI視覺(jué)營(yíng)銷(xiāo)的表現(xiàn)\t15
1．6．2?不同類(lèi)型的電商視覺(jué)營(yíng)銷(xiāo)方法\t15
1．7?本章小結(jié)\t18
第2章?電商UI設(shè)計(jì)配色
2．1?色彩基礎(chǔ)\t19
2．1．1?色彩的產(chǎn)生\t19
2．1．2?色彩三要素\t19
2．1．3?有彩色與無(wú)彩色\t21
2．2?電商UI設(shè)計(jì)中不同色彩意象的表現(xiàn)\t23
2．2．1?紅色―激情、促銷(xiāo)\t23
2．2．2?橙色―活力、動(dòng)感\(zhòng)t24
2．2．3?黃色―希望、快樂(lè)\t25
2．2．4?綠色―自然、清新\t26
2．2．5?青色―清新、涼爽\t27
2．2．6?藍(lán)色―冷靜、理智\t28
2．2．7?紫色―高貴、浪漫\t28
2．2．8?白色―純凈、干凈\t29
2．2．9?灰色―簡(jiǎn)潔、保守\t30
2．2．10?黑色―優(yōu)雅、神秘\t31
2．3?電商UI設(shè)計(jì)配色的基本方法\t31
2．3．1?同類(lèi)色搭配\t32
2．3．2?類(lèi)似色搭配\t32
2．3．3?鄰近色搭配\t33
2．3．4?互補(bǔ)色搭配\t34
2．3．5?對(duì)比色搭配\t35
2．4?對(duì)比配色使電商UI的視覺(jué)表現(xiàn)更
突出\t35
2．4．1?色相對(duì)比配色\t35
2．4．2?飽和度對(duì)比配色\t36
2．4．3?明度對(duì)比配色\t38
2．4．4?冷暖對(duì)比配色\t39
2．4．5?有彩色與無(wú)彩色對(duì)比配色\t40
2．5?根據(jù)目標(biāo)群體選擇電商UI配色\t40
2．5．1?不同性別的色彩偏好\t40
2．5．2?不同年齡層次的色彩偏好\t42
2．6?根據(jù)商品銷(xiāo)售階段選擇電商UI配色\t44
2．6．1?商品上市期的電商UI配色\t44
2．6．2?商品拓展期的電商UI配色\t45
2．6．3?商品穩(wěn)定銷(xiāo)售期的電商UI配色\t46
2．6．4?商品衰退期的電商UI配色\t47
2．7?本章小結(jié)\t48

第3章?電商UI設(shè)計(jì)中的基礎(chǔ)元素
3．1?店標(biāo)設(shè)計(jì)\t49
3．1．1?店標(biāo)的作用\t49
3．1．2?店標(biāo)的特性\t49
3．1．3?店標(biāo)的設(shè)計(jì)要求\t50
3．1．4?店標(biāo)的類(lèi)別\t51
3．1．5?設(shè)計(jì)水果網(wǎng)店店標(biāo)\t52
實(shí)戰(zhàn)練習(xí)01―設(shè)計(jì)水果網(wǎng)店店標(biāo)\t52
3．2?店招設(shè)計(jì)\t56
3．2．1?店招的設(shè)計(jì)要點(diǎn)\t56
3．2．2?店招的表現(xiàn)類(lèi)型\t57
3．2．3?設(shè)計(jì)童車(chē)店鋪店招\(zhòng)t58
實(shí)戰(zhàn)練習(xí)02―設(shè)計(jì)童車(chē)店鋪店招\(zhòng)t58
3．3?電商圖標(biāo)類(lèi)型\t63
3．3．1?應(yīng)用圖標(biāo)\t63
3．3．2?功能圖標(biāo)\t64
3．3．3?裝飾圖標(biāo)\t65
3．3．4?設(shè)計(jì)簡(jiǎn)約線性圖標(biāo)\t66
實(shí)戰(zhàn)練習(xí)03―設(shè)計(jì)簡(jiǎn)約線性圖標(biāo)\t66
3．4?電商應(yīng)用圖標(biāo)的設(shè)計(jì)要點(diǎn)\t68
3．4．1?符合設(shè)計(jì)規(guī)范性\t68
3．4．2?分析定位、突出特點(diǎn)\t69
3．4．3?設(shè)計(jì)完整性\t69
3．4．4?統(tǒng)一性\t69
3．4．5?連續(xù)性\t70
3．4．6?設(shè)計(jì)時(shí)尚風(fēng)格電商應(yīng)用圖標(biāo)\t70
實(shí)戰(zhàn)練習(xí)04―設(shè)計(jì)時(shí)尚風(fēng)格電商應(yīng)用圖標(biāo)\t70
3．5?電商導(dǎo)航設(shè)計(jì)原則\t74
3．5．1?符合內(nèi)容結(jié)構(gòu)\t74
3．5．2?明確業(yè)務(wù)目標(biāo)\t75
3．5．3?遵從用戶使用習(xí)慣\t75
3．5．4?避免重復(fù)的分類(lèi)\t76
3．5．5?使用合適的文案\t76
3．5．6?清晰的視覺(jué)體驗(yàn)\t77
3．5．7?為用戶提供反饋\t77
3．5．8?導(dǎo)航符合界面整體風(fēng)格\t77
3．5．9?有利于搜索引擎優(yōu)化\t78
3．5．10?趨于專(zhuān)業(yè)化的導(dǎo)航\t78
3．5．11?設(shè)計(jì)運(yùn)動(dòng)品牌電商網(wǎng)站導(dǎo)航\t79
實(shí)戰(zhàn)練習(xí)05―設(shè)計(jì)運(yùn)動(dòng)品牌電商網(wǎng)站導(dǎo)航\t79
3．6?本章小結(jié)\t84

第4章?電商文字與廣告設(shè)計(jì)
4．1?電商UI設(shè)計(jì)中的字體應(yīng)用\t85
4．1．1?電商UI設(shè)計(jì)中常用的中英文字體\t85
4．1．2?電商字體的基本設(shè)計(jì)技巧\t86
4．1．3?電商字體的高級(jí)使用技巧\t87
4．1．4?設(shè)計(jì)家電宣傳廣告\t90
實(shí)戰(zhàn)練習(xí)01―設(shè)計(jì)家電宣傳廣告\t90
4．2?文字的藝術(shù)化處理\t94
4．2．1?文字設(shè)計(jì)的圖形化\t94
4．2．2?文字的重疊設(shè)計(jì)\t94
4．2．3?文字設(shè)計(jì)的整體性\t94
4．2．4?讓文字更易讀\t95
4．2．5?設(shè)計(jì)質(zhì)感變形廣告文字\t96
實(shí)戰(zhàn)練習(xí)02―設(shè)計(jì)質(zhì)感變形廣告文字\t96
4．3?電商廣告的作用\t101
4．3．1?傳達(dá)商品信息\t101
4．3．2?增強(qiáng)藝術(shù)表現(xiàn)\t102
4．3．3?增強(qiáng)界面趣味\t103
4．3．4?設(shè)計(jì)運(yùn)動(dòng)鞋廣告\t103
實(shí)戰(zhàn)練習(xí)03―設(shè)計(jì)運(yùn)動(dòng)鞋廣告\t103
4．4?電商廣告排版布局技巧\t106
4．4．1?對(duì)齊\t107
4．4．2?對(duì)比\t108
4．4．3?分組\t110
4．4．4?設(shè)計(jì)小家電宣傳廣告\t111
實(shí)戰(zhàn)練習(xí)04―設(shè)計(jì)小家電宣傳廣告\t111
4．5?電商廣告設(shè)計(jì)原則\t115
4．5．1?突出廣告主題\t115
4．5．2?明確電商廣告的目標(biāo)人群\t117
4．5．3?完美的表現(xiàn)形式\t118
4．5．4?設(shè)計(jì)化妝品宣傳廣告\t120
實(shí)戰(zhàn)練習(xí)05―設(shè)計(jì)化妝品宣傳廣告\t120
4．6?本章小結(jié)\t124

第5章?電商海報(bào)設(shè)計(jì)
5．1?電商海報(bào)的類(lèi)型\t125
5．1．1?商品宣傳海報(bào)\t125
5．1．2?促銷(xiāo)宣傳海報(bào)\t126
5．1．3?活動(dòng)宣傳海報(bào)\t127
5．1．4?設(shè)計(jì)手表商品宣傳海報(bào)\t128
實(shí)戰(zhàn)練習(xí)01―設(shè)計(jì)手表商品宣傳海報(bào)\t128
5．2?電商海報(bào)的常用構(gòu)圖方式\t130
5．2．1?左右構(gòu)圖\t130
5．2．2?三欄分布構(gòu)圖\t131
5．2．3?疊加構(gòu)圖\t132
5．2．4?傾斜構(gòu)圖\t132
5．2．5?設(shè)計(jì)女裝活動(dòng)宣傳海報(bào)\t133
實(shí)戰(zhàn)練習(xí)02―設(shè)計(jì)女裝活動(dòng)宣傳海報(bào)\t133
5．3?電商海報(bào)的常用設(shè)計(jì)表現(xiàn)形式\t137
5．3．1?直接展示\t137
5．3．2?突出特點(diǎn)\t137
5．3．3?對(duì)比襯托\(zhòng)t137
5．3．4?以小見(jiàn)大\t138
5．3．5?聯(lián)想\t138
5．3．6?夸張\t139
5．3．7?幽默\t139
5．3．8?以情托物\t139
5．3．9?設(shè)計(jì)女士箱包促銷(xiāo)宣傳海報(bào)\t140
實(shí)戰(zhàn)練習(xí)03―設(shè)計(jì)女士箱包促銷(xiāo)宣傳海報(bào)\t140
5．4?電商海報(bào)設(shè)計(jì)與視覺(jué)營(yíng)銷(xiāo)\t144
5．4．1?最簡(jiǎn)單的病毒營(yíng)銷(xiāo)――暴力視覺(jué)\t144
5．4．2?最實(shí)用的綠色營(yíng)銷(xiāo)――創(chuàng)意視覺(jué)\t145
5．4．3?最完美的整合營(yíng)銷(xiāo)――寫(xiě)實(shí)視覺(jué)\t146
5．4．4?設(shè)計(jì)促銷(xiāo)活動(dòng)宣傳海報(bào)\t147
實(shí)戰(zhàn)練習(xí)04―設(shè)計(jì)促銷(xiāo)活動(dòng)宣傳海報(bào)\t147
5．5?本章小結(jié)\t152

第6章?電商UI的構(gòu)圖與布局
6．1?了解電商UI構(gòu)圖\t153
6．1．1?為什么要進(jìn)行電商UI構(gòu)圖\t153
6．1．2?電商UI的構(gòu)圖標(biāo)準(zhǔn)\t154
6．2?常見(jiàn)的電商UI構(gòu)圖方式\t155
6．2．1?幾何切割構(gòu)圖\t155
6．2．2?設(shè)計(jì)運(yùn)動(dòng)品牌服飾電商UI\t158
實(shí)戰(zhàn)練習(xí)01―設(shè)計(jì)運(yùn)動(dòng)品牌服飾電商UI\t158
6．2．3?放射與透視狀構(gòu)圖\t165
6．2．4?整體和流程構(gòu)圖\t166
6．2．5?根據(jù)圖像輪廓聯(lián)想構(gòu)圖\t167
6．2．6?設(shè)計(jì)藝術(shù)香熏爐電商UI\t167
實(shí)戰(zhàn)練習(xí)02―設(shè)計(jì)藝術(shù)香熏爐電商UI\t168
6．3?電商UI首屏布局要點(diǎn)\t175
6．3．1?確定首屏可視范圍\t175
6．3．2?展示吸引用戶的信息\t176
6．3．3?明確清晰的視覺(jué)焦點(diǎn)\t177
6．3．4?運(yùn)用圖像，便于理解\t177
6．3．5?首屏要強(qiáng)調(diào)主體\t177
6．3．6?適當(dāng)添加交互效果\t178
6．3．7?符合視覺(jué)習(xí)慣的圖文混排\t178
6．3．8?設(shè)計(jì)促銷(xiāo)活動(dòng)界面\t178
實(shí)戰(zhàn)練習(xí)03―設(shè)計(jì)促銷(xiāo)活動(dòng)界面\t179
6．4?商品列表界面布局\t187
6．4．1?商品列表界面的布局表現(xiàn)形式\t187
6．4．2?展示有用的商品信息\t189
6．4．3?鼠標(biāo)指針懸停產(chǎn)生交互效果\t189
6．4．4?適量的附加信息\t189
6．4．5?添加推薦商品刺激消費(fèi)\t190
6．4．6?減少操作步驟\t190
6．4．7?了解顧客心理\t190
6．4．8?設(shè)計(jì)童裝節(jié)日促銷(xiāo)頁(yè)面\t190
實(shí)戰(zhàn)練習(xí)04―設(shè)計(jì)童裝節(jié)日促銷(xiāo)頁(yè)面\t191
6．5?本章小結(jié)\t198

第7章?移動(dòng)電商UI設(shè)計(jì)
7．1?了解移動(dòng)電商UI設(shè)計(jì)\t199
7．1．1?什么是移動(dòng)電商App\t199
7．1．2?如何進(jìn)行移動(dòng)電商App的UI設(shè)計(jì)\t200
7．1．3?移動(dòng)電商App的基本設(shè)計(jì)流程\t201
7．2?移動(dòng)電商UI設(shè)計(jì)趨勢(shì)\t202
7．2．1?分析移動(dòng)購(gòu)物用戶\t202
7．2．2?移動(dòng)電商UI轉(zhuǎn)化率\t202
7．2．3?移動(dòng)電商UI的設(shè)計(jì)要點(diǎn)\t202
7．2．4?設(shè)計(jì)移動(dòng)端商品促銷(xiāo)活動(dòng)界面\t204
實(shí)戰(zhàn)練習(xí)01―設(shè)計(jì)移動(dòng)端商品促銷(xiāo)活動(dòng)界面\t204
7．3?移動(dòng)電商UI設(shè)計(jì)的基本要求\t207
7．3．1?以實(shí)用為基礎(chǔ)\t207
7．3．2?色彩與風(fēng)格統(tǒng)一\t207
7．3．3?合理的配色\t208
7．3．4?規(guī)范的視覺(jué)流程\t208
7．3．5?視覺(jué)元素規(guī)范\t209
7．3．6?設(shè)計(jì)時(shí)尚男裝電商App\t209
實(shí)戰(zhàn)練習(xí)02―設(shè)計(jì)時(shí)尚男裝電商App\t209
7．4?移動(dòng)電商App的設(shè)計(jì)原則\t217
7．4．1?清晰的視覺(jué)效果\t217
7．4．2?巧妙地應(yīng)用關(guān)鍵色\t218
7．4．3?高效的商品搜索\t218
7．4．4?提供商品收藏和分享功能\t219
7．4．5?流暢的支付流程\t219
7．4．6?設(shè)計(jì)時(shí)尚女裝電商App\t220
實(shí)戰(zhàn)練習(xí)03―設(shè)計(jì)時(shí)尚女裝電商App\t220
7．5?本章小結(jié)\t226