本文作者主要與大家分享的是在保險(xiǎn)這個(gè)垂直領(lǐng)域，電商產(chǎn)品主圖的設(shè)計(jì)。enjoy~
商品的產(chǎn)品圖，就是出現(xiàn)在各電商網(wǎng)站上的產(chǎn)品照片或者圖像。
在淘寶的店鋪設(shè)計(jì)中，一般可分為常規(guī)的產(chǎn)品主圖和直通車兩種。本文主要介紹在保險(xiǎn)這個(gè)垂直領(lǐng)域，電商產(chǎn)品主圖的設(shè)計(jì)。
搜索結(jié)果下方排列的產(chǎn)品，由產(chǎn)品主圖和產(chǎn)品文字信息組成，按銷量或其他條件排列的搜索結(jié)果沒有競(jìng)價(jià)排名。產(chǎn)品主圖也在店鋪首頁和產(chǎn)品頁面出現(xiàn)，作為產(chǎn)品的流量入口，對(duì)引流有著關(guān)鍵作用。
眾所周知，淘寶商城的實(shí)物類商品所占比最高，這類型的商品通過真實(shí)的產(chǎn)品照片給買家?guī)碜钪庇^的感受。
例如：
生鮮類
牛排是新鮮的、好吃的;配色讓人感覺是高級(jí)的。
3C類
iPhone 7是新配色是紅色的，蘋果產(chǎn)品圖都是高逼格的。
童裝玩具類
玩具色彩鮮艷，吸引兒童和家長(zhǎng)的注意。
美的東西天然具有吸引力，當(dāng)產(chǎn)品圖中出現(xiàn)高顏值商品時(shí)，買家的注意力自然會(huì)被商品所吸引并且點(diǎn)擊進(jìn)去，圖片中無需太多文字描述。
但是，面對(duì)虛擬服務(wù)類的商品時(shí)，由于沒有直觀的實(shí)物商品照片做展示，買家在選擇和比較時(shí)則會(huì)相對(duì)理性起來。
有人會(huì)說，虛擬服務(wù)類商品要吸引注意力還不簡(jiǎn)單，找個(gè)高大上的海報(bào)模仿一下、或者打一些吸引人的擦邊球、又或者搞一些夸張的創(chuàng)意，都會(huì)讓畫面看起來酷炫狂拽吊炸天～分分鐘吸引用戶來點(diǎn)啊!
這么想就危險(xiǎn)了。
近年，金融保險(xiǎn)類商品在淘寶商城逐漸火熱，這種服務(wù)類虛擬商品，并沒有漂亮的實(shí)物商品照片用來展示，設(shè)計(jì)師要如何設(shè)計(jì)產(chǎn)品主圖才能吸引顧客，并在眾多保險(xiǎn)產(chǎn)品圖中脫穎而出?
1. 保險(xiǎn)產(chǎn)品主圖的構(gòu)成
主要由文字說明信息、烘托氣氛的場(chǎng)景和人物圖片、運(yùn)營性質(zhì)的角標(biāo)和底標(biāo)(可選)、公司logo，這四個(gè)主要部分組成。
現(xiàn)在淘寶主流的保險(xiǎn)產(chǎn)品圖的結(jié)構(gòu)：
目前比較常見的表達(dá)方式，是靠意向圖和產(chǎn)品名稱來傳達(dá)信息，靠放大品牌或者利益點(diǎn)優(yōu)勢(shì)來凸顯商品。但想要在搜索結(jié)果中脫穎而出，除了這些顯性的品牌和利益點(diǎn)，更重要的是如何更深入、準(zhǔn)確的傳達(dá)給顧客一些潛在信息。
2. 產(chǎn)品圖中影響用戶判斷的潛在信息
說到保險(xiǎn)，大家必定會(huì)聯(lián)想到金錢、投資、理財(cái)?shù)汝P(guān)鍵字，這些關(guān)鍵字都跟錢相關(guān)。用戶對(duì)錢是很敏感的，因此在保險(xiǎn)電商的產(chǎn)品展示層面，要從視覺上向顧客傳遞一種感受，讓敏感的心情平復(fù)起來。這種感受說白了，就是我們想在產(chǎn)品圖中傳達(dá)的潛在信息，總結(jié)來說主要在安全感和親和力兩個(gè)方面。
所謂安全感就是渴望穩(wěn)定、安全的心理需求。用戶在保險(xiǎn)電商需要的安全感，就是建立“這個(gè)品牌靠譜，這個(gè)保險(xiǎn)產(chǎn)品靠譜”的觀念。安全感可以通過設(shè)計(jì)來強(qiáng)化，信任由此產(chǎn)生，促進(jìn)了商品的轉(zhuǎn)化。
親和力是一種使人親近、愿意接觸的力量。很多人對(duì)保險(xiǎn)的認(rèn)知是負(fù)面的，產(chǎn)生這種觀念的原因大多源于過去保險(xiǎn)銷售人員的不規(guī)范銷售。這種觀念，很難在一時(shí)改變，但是電商產(chǎn)品圖的親和力，是消解人們對(duì)保險(xiǎn)的負(fù)面印象很好的工具。
既然安全感與親和力這么重要，如何在設(shè)計(jì)中傳達(dá)這兩點(diǎn)呢?
3. 產(chǎn)品主圖的安全感
當(dāng)前的很多的產(chǎn)品主圖，為什么讓人缺少安全感?
淘寶售賣的同類保險(xiǎn)，除了各家公司logo的區(qū)別，產(chǎn)品主圖看上去很雷同。意向圖和文字的相似，讓人很難判斷。
如上圖，同類別的保險(xiǎn)產(chǎn)品主圖很多雷同，配圖大同小異。
有沒有覺得很像!
很多虛擬商品的產(chǎn)品圖視覺信息雜亂，有著牛皮癬小廣告的既視感。
在選購虛擬商品時(shí)，看到的卻是電線桿小廣告，用戶會(huì)被眼花繚亂的色彩和文字所干擾，這令人嚴(yán)重缺乏安全感。
為了解決以上問題，整體提升產(chǎn)品圖帶給用戶的安全感，我們從配色、配圖、版式和一致性這四點(diǎn)來分析：
(1)配色
保險(xiǎn)的購買，大多數(shù)屬于一種“弱關(guān)系交易”，是從用戶的自身需求為購買目的。保險(xiǎn)交易受用戶購買的需求和動(dòng)力因素波動(dòng)很大，一點(diǎn)體驗(yàn)上的不足很可能讓用戶失去點(diǎn)擊的動(dòng)力?；ɑňG綠的顏色，初學(xué)PPT式的字體，很可能讓用戶給這個(gè)商品打上不專業(yè)、不靠譜的標(biāo)記，而放棄點(diǎn)擊。
在主圖這么小的面積中，信息的色彩不宜用過多，1-2種即可，信息顏色與背景色盡量拉開對(duì)比，突出信息表現(xiàn)，讓人一目了然。
左圖文字信息顏色和配圖顏色協(xié)調(diào)、符合主題，整體感覺統(tǒng)一;右圖色彩過多。
(2) 配圖
產(chǎn)品主圖的很大面積是由配圖組成，構(gòu)成了用戶對(duì)這個(gè)保險(xiǎn)的第一印象。因此模糊的圖片、灰暗的色彩、雜亂的背景都會(huì)讓人產(chǎn)生粗制濫造、隨意的感覺，很難讓買家產(chǎn)生安全感。
因此，我們要盡量找與產(chǎn)品相關(guān)的、表現(xiàn)正向的高清圖片;背景不宜過于復(fù)雜，盡量突出主體;同樣，顏色也不宜過多，色彩盡量配合主圖整體色調(diào)。
左圖配圖主體清晰、正向，并符合產(chǎn)品主題;右圖配圖背景雜亂，灰暗模糊。
(3)版式
合理排版和突出關(guān)鍵信息，讓人一下子抓住重點(diǎn)。
在搜索結(jié)果中顯示的主圖，面積有限，不宜放置太多的信息，盡可能少的文字描述才能把關(guān)鍵的信息放大吸引注意。
一般按照左右或上下的結(jié)構(gòu)來安排畫面，信息可以做大小對(duì)比但不宜做變形，一定要對(duì)齊，給整體畫面注入秩序感容易閱讀。
左圖信息抱團(tuán)，左對(duì)齊為主，利用字號(hào)對(duì)比強(qiáng)調(diào)重要信息;右圖小字太小，版式結(jié)構(gòu)和信息的對(duì)齊方式影響閱讀。
以800px*800px的主圖為例，40像素以上的文字，在搜索結(jié)果列表的圖片里便于閱讀，40像素以下字號(hào)偏小。
(4)一致性
我們?cè)谔熵埰炫灥戡F(xiàn)有幾十款保險(xiǎn)產(chǎn)品，我們?cè)谠O(shè)計(jì)這些產(chǎn)品圖時(shí)也充分考慮了一致性。從版式、配圖風(fēng)格、字體，區(qū)別于其他保險(xiǎn)店鋪，形成統(tǒng)一的眾安產(chǎn)品圖的style。想要在保險(xiǎn)產(chǎn)品主圖同質(zhì)化問題嚴(yán)重的情況下突圍，產(chǎn)品圖必須擁有自己的品牌個(gè)性。
除了主圖本身的一些視覺表現(xiàn)外，還需要注意的是主圖與店鋪與產(chǎn)品商詳頁視覺上的一致性，用戶點(diǎn)擊產(chǎn)品主圖進(jìn)入商詳頁面后給予一種“說話算話”的感覺，產(chǎn)品與買家間的信任關(guān)系也由此產(chǎn)生。
4. 產(chǎn)品主圖的親和力
親和力源于人與人的心靈上的通達(dá)與投合，有親和力的雙方就有了合作的意向?？梢赃@么說，親和力是促進(jìn)合作的心理起因。
投射在電商設(shè)計(jì)上，就是讓受眾與商品產(chǎn)生一種親近感，拉進(jìn)買家與我們商品的心理距離，從而產(chǎn)生最大的轉(zhuǎn)化。
加強(qiáng)保險(xiǎn)產(chǎn)品圖的親和力，要注意以下兩點(diǎn)：
(1)加強(qiáng)包容能力，對(duì)用戶的理解
理解用戶，就要知道用戶喜歡看什么，傳說中有三種萬能素材圖，無人不愛，那就是：美女、動(dòng)物、嬰兒。為什么是這三類，因?yàn)槠梁蛙浢鹊臇|西大家都不會(huì)反感。
保險(xiǎn)產(chǎn)品圖也是這樣，要理解受眾的心理，不僅要有外在美，還要有內(nèi)在。用戶意識(shí)中的健康保險(xiǎn)是專業(yè)的、嚴(yán)謹(jǐn)?shù)?，那么下圖中打電話的美女醫(yī)生和專業(yè)嚴(yán)謹(jǐn)?shù)尼t(yī)生團(tuán)隊(duì)，哪個(gè)素材能夠給用戶美而且專業(yè)的感覺?不言而喻。
左圖專業(yè)高大上;右圖不難看，但是不專業(yè)
字體也能傳達(dá)親和力，簡(jiǎn)潔的無襯線字體更容易達(dá)到效果。我們?cè)诋a(chǎn)品圖中使用的中文無襯線字體，筆畫精致柔和，字形穩(wěn)重，可讀性強(qiáng)，更加容易讓人接受。
我們選用的有親和力的字體
(2)圖片傳達(dá)正向情緒的表達(dá)，避免煩躁情緒的干擾破壞
發(fā)自內(nèi)心的微笑，自然而然的讓人有親近感，減少了心里對(duì)保險(xiǎn)的抗拒。家庭和睦、家人團(tuán)聚的歡樂生活，家庭幸福的愿景，這也是保險(xiǎn)希望表達(dá)的。明亮的色彩，代表了一種積極向上的態(tài)度，讓人看后活力滿滿。
素材圖片要傳達(dá)正向的情緒和氛圍
保險(xiǎn)保的是什么，是各種風(fēng)險(xiǎn)。雖然投保用戶都具有了一定的風(fēng)險(xiǎn)保障意識(shí)，但是沒有人愿意看到風(fēng)險(xiǎn)落在自己頭上的場(chǎng)景。因此我們?cè)谶x擇圖片素材和場(chǎng)景表達(dá)時(shí)，會(huì)盡量避免讓買家感受到由風(fēng)險(xiǎn)帶來的負(fù)面情緒。
上圖就是我們盡量避免的，漫畫人物眉頭緊鎖，給買家代入一種壓抑感。場(chǎng)景下主人公還有那么多的煩惱，無疑增加了購買保險(xiǎn)的負(fù)擔(dān)。雖然用一把雨傘來指代保險(xiǎn)的保護(hù)，可是從整個(gè)畫面來看無濟(jì)于事。背景色彩使用明度和純度不高的藍(lán)色，給人憂郁的感覺。
不同類目屬性的產(chǎn)品，因?yàn)槠滗N售主體的不同，產(chǎn)品圖的內(nèi)容和風(fēng)格各不相同，但是設(shè)計(jì)的目標(biāo)都是相同的——提高轉(zhuǎn)化。
產(chǎn)品圖優(yōu)秀的原因，是根據(jù)不同產(chǎn)品屬性特點(diǎn)，給買家?guī)淼牟煌母惺?，需要具體問題具體分析。落實(shí)到保險(xiǎn)電商產(chǎn)品來說，產(chǎn)品主圖給買家?guī)淼母惺苤饕前踩泻陀H和力。
色彩、配圖、版式和一致性，從這四點(diǎn)展開設(shè)計(jì)可以給用戶帶來安全感，提升信任度。
而親和力是保險(xiǎn)主圖應(yīng)表達(dá)的情感，有助于拉近買家心理距離。
廣大電商設(shè)計(jì)師朋友，不要因?yàn)楫a(chǎn)品主圖小而忽略它，認(rèn)真對(duì)待產(chǎn)品主圖設(shè)計(jì)，舉一反三，方寸之地可以讓你的店鋪和產(chǎn)品脫穎而出。
以上就是海淘科技為你推出的全部?jī)?nèi)容。想看更多的內(nèi)容，可點(diǎn)擊：電商網(wǎng)站的促銷功能設(shè)計(jì)，于此同時(shí)，海淘科技還提供了相關(guān)內(nèi)容，可點(diǎn)擊：互聯(lián)網(wǎng)數(shù)字營銷，公司微博運(yùn)營方案
