電商逆襲：旺鋪合理布局設(shè)計(jì)（全彩）

Chapter 01　網(wǎng)店設(shè)計(jì)必備知識(shí) ?? 0011.1　了解網(wǎng)店設(shè)計(jì) ?????????? 0021.1.1　什么是網(wǎng)店設(shè)計(jì) ?????????????? 0021.1.2　網(wǎng)店設(shè)計(jì)的重要性 ???????????? 0021.1.3　網(wǎng)店設(shè)計(jì)前的準(zhǔn)備工作 ???????? 0031.2　網(wǎng)店裝修的一般流程 ???? 0041.2.1　取個(gè)好店名很重要 ???????????? 0041.2.2　確定設(shè)計(jì)風(fēng)格 ???????????????? 0041.2.3　注重細(xì)節(jié)修飾 ???????????????? 0051.3　網(wǎng)店設(shè)計(jì)中的色彩搭配 ?? 0051.3.1　網(wǎng)店設(shè)計(jì)中的色彩 ???????????? 0051.3.2　色彩搭配的原理 ?????????????? 0091.4　理解電商設(shè)計(jì)文案 ?????? 0111.4.1　電商設(shè)計(jì)文案的內(nèi)容 ?????????? 0111.4.2　電商設(shè)計(jì)文案策劃 ???????????? 0121.4.3　如何創(chuàng)建優(yōu)秀的產(chǎn)品文案 ?????? 0131.5　電商設(shè)計(jì)必須注意的問題 ?? 0141.6　如何創(chuàng)建成功的電商網(wǎng)站 ?? 0151.6.1　面向合適的用戶群 ???????????? 0151.6.2　遵守常規(guī)的導(dǎo)航元素 ?????????? 0171.6.3　產(chǎn)品介紹頁(yè)面是用戶的關(guān)注點(diǎn) ?? 0171.7　網(wǎng)店視覺營(yíng)銷 ?????????? 0181.7.1　網(wǎng)店視覺營(yíng)銷的表現(xiàn) ?????????? 0181.7.2　不同類型網(wǎng)店的視覺營(yíng)銷方法 ?? 0191.8　本章小結(jié) ?????????????? 022Chapter 02　電商網(wǎng)站布局元素 ?? 0232.1　店標(biāo)設(shè)計(jì) ?????????????? 0242.1.1　店標(biāo)的作用 ?????????????????? 0242.1.2　店標(biāo)的特性 ?????????????????? 0242.1.3　店標(biāo)的設(shè)計(jì)要求 ?????????????? 0252.1.4　店標(biāo)的類別 ?????????????????? 026案例分析 | 水果店鋪店標(biāo)設(shè)計(jì)分析 ???? 027實(shí)戰(zhàn)案例 | 設(shè)計(jì)咖啡店標(biāo) ???????????? 028案例分析 | 藥品專營(yíng)店鋪店標(biāo)設(shè)計(jì)分析 ?? 032實(shí)戰(zhàn)案例 | 設(shè)計(jì)啤酒店標(biāo) ???????????? 0332.2　店招設(shè)計(jì) ?????????????? 0412.2.1　店招的設(shè)計(jì)要點(diǎn) ?????????????? 0412.2.2　店招的表現(xiàn)類型 ?????????????? 041案例分析 | 母嬰商城店招設(shè)計(jì)分析 ???? 043實(shí)戰(zhàn)案例 | 設(shè)計(jì)店鋪促銷店招 ???????? 0442.3　電商網(wǎng)站導(dǎo)航設(shè)計(jì)原則 ?? 0482.3.1　符合網(wǎng)站內(nèi)容結(jié)構(gòu) ???????????? 0482.3.2　明確網(wǎng)站業(yè)務(wù)目標(biāo) ???????????? 0492.3.3　遵從用戶使用習(xí)慣 ???????????? 0492.3.4　避免重復(fù)的分類 ?????????????? 0502.3.5　使用合適的文案 ?????????????? 0502.3.6　清晰的視覺體驗(yàn) ?????????????? 0512.3.7　為用戶提供反饋 ?????????????? 0512.3.8　導(dǎo)航符合網(wǎng)站整體風(fēng)格 ???????? 0522.3.9　利于搜索引擎優(yōu)化 ???????????? 0522.3.10　趨于專業(yè)化的導(dǎo)航 ?????????? 053案例分析 | 名鞋庫(kù)網(wǎng)站導(dǎo)航設(shè)計(jì)分析 ?? 054實(shí)戰(zhàn)案例 | 設(shè)計(jì)運(yùn)動(dòng)品牌電商網(wǎng)站導(dǎo)航 ?? 0552.4　面包屑導(dǎo)航設(shè)計(jì)技巧 ???? 0622.4.1　統(tǒng)一關(guān)鍵詞，避免重復(fù) ???????? 0622.4.2　顯示相關(guān)產(chǎn)品數(shù)量 ???????????? 0622.4.3　善于使用面包屑 ?????????????? 0632.4.4　使用具有指向性的符號(hào) ???????? 0632.4.5　減少對(duì)用戶的影響 ???????????? 0632.4.6　控制層級(jí) ???????????????????? 0642.4.7　在面包屑中使用關(guān)鍵字 ???????? 064案例分析 | 屈臣氏導(dǎo)航和店招設(shè)計(jì)分析 ?? 065實(shí)戰(zhàn)案例 | 設(shè)計(jì)網(wǎng)店導(dǎo)航和店招 ?????? 0662.5　商品陳列構(gòu)圖 ?????????? 0732.5.1　距離感 ?????????????????????? 0732.5.2　對(duì)稱與等比 ?????????????????? 0742.5.3　節(jié)奏感 ?????????????????????? 0752.5.4　圖片與文字的相輔相成 ???????? 077案例分析 | 隨性的商品構(gòu)圖設(shè)計(jì)分析 ?? 079實(shí)戰(zhàn)案例 | 設(shè)計(jì)商品菱形排列布局 ???? 0802.6　本章小結(jié) ?????????????? 084Chapter 03　文字與廣告設(shè)計(jì) ???? 0853.1　店鋪中的文字設(shè)計(jì) ?????? 0863.1.1　文字的字體 ?????????????????? 0863.1.2　文字的字號(hào) ?????????????????? 0873.1.3　文字的間距和行距 ???????????? 0883.1.4　文字的顏色 ?????????????????? 089案例分析 | 母親節(jié)變形文字設(shè)計(jì)分析 ?? 090實(shí)戰(zhàn)案例 | 設(shè)計(jì)廣告變形文字 ???????? 0913.2　文字圖形化處理 ???????? 0993.2.1　文字的圖形化 ???????????????? 0993.2.2　文字的重疊 ?????????????????? 0993.2.3　文字的整體性 ???????????????? 1003.2.4　讓文字更易讀 ???????????????? 101案例分析 | 特效毛筆廣告文字設(shè)計(jì)分析 ?? 102實(shí)戰(zhàn)案例 | 設(shè)計(jì)光影特效文字 ???????? 1033.3　電商廣告的作用 ???????? 1093.3.1　傳達(dá)產(chǎn)品信息 ???????????????? 1093.3.2　增強(qiáng)產(chǎn)品藝術(shù)表現(xiàn) ???????????? 1103.3.3　增加頁(yè)面趣味 ???????????????? 111案例分析 | 衣品天成女裝廣告設(shè)計(jì)分析 ?? 112實(shí)戰(zhàn)案例 | 設(shè)計(jì)化妝品廣告 ?????????? 1133.4　電商廣告排版布局技巧 ?? 1173.4.1　對(duì)齊 ???????????????????????? 1173.4.2　對(duì)比 ???????????????????????? 1203.4.3　分組 ???????????????????????? 123案例分析 | 海鮮促銷廣告設(shè)計(jì)分析 ???? 125實(shí)戰(zhàn)案例 | 設(shè)計(jì)水果促銷廣告 ???????? 1263.5　電商廣告設(shè)計(jì)原則 ?????? 1333.5.1　突出廣告主題 ???????????????? 1333.5.2　明確廣告目標(biāo)人群 ???????????? 1353.5.3　完美的表現(xiàn)形式 ?????????????? 136案例分析 | 安踏運(yùn)動(dòng)鞋廣告設(shè)計(jì)分析 ?? 142實(shí)戰(zhàn)案例 | 設(shè)計(jì)運(yùn)動(dòng)鞋宣傳廣告 ?????? 1433.6　本章小結(jié) ?????????????? 148Chapter 04　電商海報(bào)設(shè)計(jì) ?????? 1494.1　電商海報(bào)的類型 ???????? 1504.1.1　產(chǎn)品宣傳海報(bào) ???????????????? 1504.1.2　促銷宣傳海報(bào) ???????????????? 1504.1.3　活動(dòng)宣傳海報(bào) ???????????????? 151案例分析 | 男裝促銷活動(dòng)海報(bào)設(shè)計(jì)分析 ?? 152實(shí)戰(zhàn)案例 | 設(shè)計(jì)女裝活動(dòng)海報(bào) ???????? 1534.2　常見的電商海報(bào)構(gòu)圖方式 ?? 1594.2.1　左右構(gòu)圖 ???????????????????? 1594.2.2　三欄分布構(gòu)圖 ???????????????? 1604.2.3　疊加構(gòu)圖 ???????????????????? 1614.2.4　傾斜構(gòu)圖 ???????????????????? 161案例分析 | 太陽(yáng)鏡海報(bào)設(shè)計(jì)分析 ?????? 163實(shí)戰(zhàn)案例 | 設(shè)計(jì)精油產(chǎn)品海報(bào) ???????? 1644.3　電商海報(bào)的配色技巧 ???? 1724.3.1　了解色彩關(guān)系 ???????????????? 1724.3.2　掌握配色黃金比例 ???????????? 1734.3.3　鄰近色搭配 ?????????????????? 1744.3.4　間隔色搭配 ?????????????????? 1764.3.5　互補(bǔ)色搭配 ?????????????????? 178案例分析 | 春夏季女鞋活動(dòng)海報(bào)設(shè)計(jì)分析 ???????????????? 180實(shí)戰(zhàn)案例 | 設(shè)計(jì)淘寶新年活動(dòng)海報(bào) ???? 1814.4　電商海報(bào)的設(shè)計(jì)表現(xiàn)形式 ?? 1864.4.1　直接展示 ???????????????????? 1864.4.2　突出特點(diǎn) ???????????????????? 1864.4.3　對(duì)比襯托 ???????????????????? 1874.4.4　以小見大 ???????????????????? 1874.4.5　聯(lián)想 ???????????????????????? 1874.4.6　夸張 ???????????????????????? 1884.4.7　幽默 ???????????????????????? 1884.4.8　以情托物 ???????????????????? 189案例分析 | 母親節(jié)活動(dòng)海報(bào)設(shè)計(jì)分析 ?? 190實(shí)戰(zhàn)案例 | 設(shè)計(jì)五一促銷活動(dòng)海報(bào) ???? 1914.5　本章小結(jié) ?????????????? 198Chapter 05　電商頁(yè)面構(gòu)圖設(shè)計(jì) ?? 1995.1 了解電商頁(yè)面的構(gòu)圖 ???? 2005.1.1　為什么要對(duì)電商頁(yè)面進(jìn)行構(gòu)圖 ?? 2005.1.2　電商頁(yè)面構(gòu)圖標(biāo)準(zhǔn) ???????????? 2005.2　頁(yè)面幾何切割的構(gòu)圖方式 ?? 2025.2.1　簡(jiǎn)單切割 ???????????????????? 2025.2.2　對(duì)稱切割 ???????????????????? 2035.2.3　組合切割 ???????????????????? 2045.2.4　多重切割 ???????????????????? 205案例分析 | 化妝品網(wǎng)店活動(dòng)頁(yè)面設(shè)計(jì)分析 ???????????????? 206實(shí)戰(zhàn)案例 | 設(shè)計(jì)運(yùn)動(dòng)服裝網(wǎng)店頁(yè)面 ???? 2075.3　放射與透視狀的頁(yè)面構(gòu)圖 ?? 2195.4　整體和流程的頁(yè)面構(gòu)圖 ?? 220案例分析 | 護(hù)膚品店鋪?lái)?yè)面設(shè)計(jì)分析 ?? 221實(shí)戰(zhàn)案例 | 設(shè)計(jì)啤酒促銷頁(yè)面 ???????? 2225.5　根據(jù)圖像輪廓聯(lián)想的方式構(gòu)圖 ?????????????? 228案例分析 | 賽車票務(wù)電商頁(yè)面設(shè)計(jì)分析 ?? 230實(shí)戰(zhàn)案例 | 設(shè)計(jì)古典風(fēng)格網(wǎng)店頁(yè)面 ???? 2315.6　本章小結(jié) ?????????????? 240Chapter 06　電商頁(yè)面布局設(shè)計(jì) ?? 2416.1 電商頁(yè)面首屏布局設(shè)計(jì)要點(diǎn) ?????????????? 2426.1.1　確定頁(yè)面首屏可視范圍 ???????? 2426.1.2　展示吸引用戶的信息 ?????????? 2426.1.3　明確清晰的視覺焦點(diǎn) ?????????? 2436.1.4　運(yùn)用圖片便于理解 ???????????? 2446.1.5　首屏要強(qiáng)調(diào)主題 ?????????????? 2446.1.6　適當(dāng)添加交互效果 ???????????? 2456.1.7　符合視覺習(xí)慣的圖文混排 ?????? 245案例分析 | 時(shí)尚女包店鋪?lái)?yè)面設(shè)計(jì)分析 ?? 246實(shí)戰(zhàn)案例 | 設(shè)計(jì)化妝品網(wǎng)店首頁(yè) ?????? 2476.2　商品列表頁(yè)布局設(shè)計(jì) ???? 2576.2.1　商品列表形式 ???????????????? 2576.2.2　展示有用的產(chǎn)品信息 ?????????? 2586.2.3　鼠標(biāo)懸停時(shí)產(chǎn)生交互效果 ?????? 2586.2.4　出現(xiàn)適量的附加信息 ?????????? 2596.2.5　添加推薦商品刺激消費(fèi) ???????? 2596.2.6　減少操作步驟 ???????????????? 2606.2.7　了解顧客心理 ???????????????? 260案例分析 | 食品店鋪產(chǎn)品列表頁(yè)面設(shè)計(jì)分析 ???????????????? 261實(shí)戰(zhàn)案例 | 設(shè)計(jì)手機(jī)促銷列表頁(yè)面 ???? 2626.3　商品詳情頁(yè)設(shè)計(jì) ???????? 2716.3.1　提供商品展示圖片的細(xì)節(jié)放大效果 ???????????????????? 2716.3.2　滿足用戶的比價(jià)心理 ?????????? 2726.3.3　運(yùn)用商品分享功能 ???????????? 2726.3.4　良好的用戶引導(dǎo) ?????????????? 2736.3.5　跟隨性導(dǎo)航 ?????????????????? 2736