電商視覺設(shè)計第9章課件

1、第9章 手機移動端淘寶店鋪視覺設(shè)計 掌握店招的優(yōu)化設(shè)計方法掌握輪播圖片的優(yōu)化設(shè)計方法掌握優(yōu)惠券的優(yōu)化設(shè)計方法掌握商品分類導(dǎo)航及分類展示的優(yōu)化方法了解店鋪詳情頁設(shè)計的FABE原則熟練掌握手機淘寶店鋪詳情頁的設(shè)計方法學(xué)習(xí)目標(biāo)目 錄手機移動端淘寶店鋪首頁優(yōu)化設(shè)計9.1電子數(shù)碼類商品店鋪首頁案例解析9.2手機淘寶店鋪詳情頁優(yōu)化設(shè)計9.39.1 手機移動端淘寶店鋪首頁優(yōu)化設(shè)計手機移動端店鋪首頁首頁設(shè)計框架圖9.1 手機移動端淘寶店鋪首頁優(yōu)化設(shè)計1店招的優(yōu)化設(shè)計 2輪播圖片優(yōu)化設(shè)計 3優(yōu)惠券的優(yōu)化設(shè)計 4商品分類導(dǎo)航優(yōu)化設(shè)計 5商品分類展示優(yōu)化設(shè)計 9.1 手機移動端淘寶店鋪首頁優(yōu)化設(shè)計店招底圖設(shè)計1 店

2、招的優(yōu)化設(shè)計用鞋子圖片作為底圖的主體，與店鋪“女鞋”的主題相呼應(yīng)9.1 手機移動端淘寶店鋪首頁優(yōu)化設(shè)計1 店招的優(yōu)化設(shè)計活動時間說明優(yōu)惠券的設(shè)置雙十一活動背景圖PC端與手機端店招設(shè)計的不同9.1 手機移動端淘寶店鋪首頁優(yōu)化設(shè)計1 店招的優(yōu)化設(shè)計圖片與文字組合的店招底圖9.1 手機移動端淘寶店鋪首頁優(yōu)化設(shè)計1 店招的優(yōu)化設(shè)計提醒關(guān)注店鋪9.1 手機移動端淘寶店鋪首頁優(yōu)化設(shè)計1 店招的優(yōu)化設(shè)計該店鋪主營玩具類商品，然而其店招選擇了與店鋪毫無關(guān)系的圖片，即使看起來不錯，也無法起到任何說明與傳達(dá)店鋪信息的作用該店招底圖中也沒使用與店鋪有明顯關(guān)聯(lián)的圖片。店鋪主營百貨小商品，而底圖中主要呈現(xiàn)了筆記本電腦的

3、圖片，沒有與店鋪產(chǎn)生實質(zhì)性聯(lián)系，且與店招標(biāo)識的設(shè)計風(fēng)格不匹配，消費者看到這個店招后無法感受到店鋪的品牌氛圍無關(guān)的店招圖片9.1 手機移動端淘寶店鋪首頁優(yōu)化設(shè)計1 店招的優(yōu)化設(shè)計文字被遮擋該店招中說明文字被大面積遮擋，同時文字太多，很不美觀，這樣的表現(xiàn)方式無法讓消費者有效獲取信息，底圖中的文字便失去了意義9.1 手機移動端淘寶店鋪首頁優(yōu)化設(shè)計輪播圖片2 輪播圖片優(yōu)化設(shè)計9.1 手機移動端淘寶店鋪首頁優(yōu)化設(shè)計確定輪播圖的先后順序2 輪播圖片優(yōu)化設(shè)計9.1 手機移動端淘寶店鋪首頁優(yōu)化設(shè)計優(yōu)惠券板塊3 優(yōu)惠券的優(yōu)化設(shè)計9.1 手機移動端淘寶店鋪首頁優(yōu)化設(shè)計活動優(yōu)惠券3 優(yōu)惠券的優(yōu)化設(shè)計過于花哨的設(shè)計9

4、.1 手機移動端淘寶店鋪首頁優(yōu)化設(shè)計4 商品分類導(dǎo)航優(yōu)化設(shè)計商品分類按鈕足夠明顯，且分開兩行的組合設(shè)計讓分類信息能夠完整地展示在消費者面前，讓其可以快速了解店鋪中商品的分類情況9.1 手機移動端淘寶店鋪首頁優(yōu)化設(shè)計商品分類展示5 商品分類展示優(yōu)化設(shè)計 簡潔的分類標(biāo)題提示，沒有過多的裝飾商品名稱與價格說明無過多修飾，一目了然9.1 手機移動端淘寶店鋪首頁優(yōu)化設(shè)計促銷和爆款商品展示4 商品分類展示優(yōu)化設(shè)計商品分類展示第一區(qū)中對爆款商品進行展示商品分類展示第一區(qū)中對促銷商品進行展示9.1 手機移動端淘寶店鋪首頁優(yōu)化設(shè)計新品展示4 商品分類展示優(yōu)化設(shè)計9.1 手機移動端淘寶店鋪首頁優(yōu)化設(shè)計店長推薦4

5、商品分類展示優(yōu)化設(shè)計在店鋪首頁商品分類展示第三區(qū)中，選擇對店長推薦的商品進行展示，就如同實體店中常會出現(xiàn)貼有“店長推薦”標(biāo)簽的商品，這類商品通常屬于熱銷商品或是店鋪中的“鎮(zhèn)店之寶”，打著這個旗號的商品對消費者也具有一定的吸引力9.2 電子數(shù)碼類商品店鋪首頁案例解析電子數(shù)碼類店鋪首頁9.2 電子數(shù)碼類商品店鋪首頁案例解析添加明亮的色彩商品說明信息為白色，給消費者帶來一目了然的視覺感受價格信息則采用黃色來表現(xiàn)，在黑色背景中顯得非常突出，便于消費者了解商品價格9.3 手機淘寶店鋪詳情頁優(yōu)化設(shè)計詳情頁設(shè)計的FABE原則01商品詳情頁的設(shè)計誤區(qū)02根據(jù)消費者的頁面平均停留 時間設(shè)計039.3 手機淘寶店

6、鋪詳情頁優(yōu)化設(shè)計1 詳情頁設(shè)計的FABE原則F特征即介紹商品的特質(zhì)、特性等基本功能，以及它是如何滿足消費者需要的。特征（Features）B以消費者利益為中心，告知并強調(diào)消費者購買商品后會得到的利益，能夠激發(fā)消費者的購買欲望。利益（Benefits）A優(yōu)點就是商品的賣點與優(yōu)勢，向消費者證明商品的賣點，其實就是給消費者提供了更多的購買該商品的理由。優(yōu)點（Advantages）E證據(jù)就是指第三方認(rèn)知、新聞輿論或技術(shù)報告等信息，它們需要有足夠的權(quán)威性、客觀性、可靠性與可見證性，這樣才能獲得消費者的信任。證據(jù)（Evidence）9.3 手機淘寶店鋪詳情頁優(yōu)化設(shè)計1 詳情頁設(shè)計的FABE原則真實感01邏

7、輯感02親切感03對話感04氛圍感05正規(guī)感069.3 手機淘寶店鋪詳情頁優(yōu)化設(shè)計1 詳情頁設(shè)計的FABE原則真實感01商品展示細(xì)節(jié)圖9.3 手機淘寶店鋪詳情頁優(yōu)化設(shè)計1 詳情頁設(shè)計的FABE原則真實感01邏輯感02視覺漏斗模型中的邏輯關(guān)系即是FABE原則所體現(xiàn)的邏輯順序，通過介紹商品的特征商品特點能給消費者帶來的利益點證明商品質(zhì)量的證據(jù)這四個步驟，在層層說明中一步步打消消費者的購買顧慮，增強其購買信心，最終形成下單成交。9.3 手機淘寶店鋪詳情頁優(yōu)化設(shè)計1 詳情頁設(shè)計的FABE原則真實感01漫畫形式的圖片設(shè)計親切感03不論是結(jié)合商品特點添加插畫，還是直接采用插畫的表現(xiàn)形式，總之，在商品詳情頁

8、插入圖畫或漫畫，能讓頁面變得更加活潑、生動，也能讓消費者感到很親切9.3 手機淘寶店鋪詳情頁優(yōu)化設(shè)計1 詳情頁設(shè)計的FABE原則真實感01商品描述親切感03對話感049.3 手機淘寶店鋪詳情頁優(yōu)化設(shè)計1 詳情頁設(shè)計的FABE原則真實感01親切感03對話感04氛圍感05消費者在無形之中或多或少地都會有“湊熱鬧”的心理，看到某件商品有很多人買便想去看個究竟，或者自己也想跟風(fēng)購買，這一點對于沖動型消費者來說尤其明顯。因此，在設(shè)計商品詳情頁時，需要營造很多人都在購買的賣場氣氛，這樣的氛圍會帶動消費者形成購買沖動。9.3 手機淘寶店鋪詳情頁優(yōu)化設(shè)計1 詳情頁設(shè)計的FABE原則真實感01親切感03對話感0

9、4氛圍感05正規(guī)感06認(rèn)證證書圖片9.3 手機淘寶店鋪詳情頁優(yōu)化設(shè)計2 商品詳情頁的設(shè)計誤區(qū)切忌密不通風(fēng)的文字說明1海報宣傳需凸顯商品的真實性2注意控制商品與關(guān)聯(lián)銷售商品圖片的數(shù)量39.3 手機淘寶店鋪詳情頁優(yōu)化設(shè)計2 商品詳情頁的設(shè)計誤區(qū)切忌密不通風(fēng)的文字說明1據(jù)研究機構(gòu)統(tǒng)計，商品詳情頁中70%的文字信息消費者是不會仔細(xì)閱讀的，尤其是擁擠的文字會在視覺上引發(fā)消費者的畏懼感9.3 手機淘寶店鋪詳情頁優(yōu)化設(shè)計2 商品詳情頁的設(shè)計誤區(qū)海報宣傳需凸顯商品的真實性2消費者調(diào)研表明：78%的消費者介意圖片是不是實物圖，他們更希望看到真實的、沒有過多修飾與美化的商品圖片信息9.3 手機淘寶店鋪詳情頁優(yōu)化設(shè)計2 商品詳情頁的設(shè)計誤區(qū)海報宣傳需凸顯商品的真實性2海報圖9.3 手機淘寶店鋪詳情頁優(yōu)化設(shè)計2 商品詳情頁的設(shè)計誤區(qū)海報宣傳需凸顯商品的真實性2商品實拍圖9.3 手機淘寶店鋪詳情頁優(yōu)化設(shè)計2 商品詳情頁的設(shè)計誤區(qū)關(guān)聯(lián)銷售商品注意控制商品與關(guān)聯(lián)銷售商品圖片的數(shù)量39.3 手機淘寶店鋪詳情頁優(yōu)化設(shè)計3 根據(jù)消費者的頁面平均停留時間設(shè)計關(guān)聯(lián)信息繁瑣手機瀏覽的連貫性