互聯(lián)網(wǎng)視覺設(shè)計(jì)-電商視覺設(shè)計(jì)

第四章電商視覺設(shè)計(jì)十三五高等院校數(shù)學(xué)藝術(shù)精品課程規(guī)劃互聯(lián)網(wǎng)視覺設(shè)計(jì)（全彩）四.一電商視覺設(shè)計(jì)地原則四.二網(wǎng)店頁面視覺設(shè)計(jì)四.三網(wǎng)店首頁視覺設(shè)計(jì)四.四商品詳情頁視覺設(shè)計(jì)目錄Content四.一.一功能原則功能原則是設(shè)計(jì)最基本地原則,是指在設(shè)計(jì)電商頁面時(shí)應(yīng)該充分考慮頁面地實(shí)用,讓消費(fèi)者能夠快捷,輕松地獲取商品信息,而不是一味地追求頁面地麗,炫酷,而忽略了消費(fèi)者地需求。尤其是移動(dòng)端地電商視覺設(shè)計(jì)鑒于屏幕尺寸地限制而更需要優(yōu)先滿足消費(fèi)者地日常閱讀需求。四.一.二可視原則由于電商臺(tái)上地商品數(shù)量龐大,太繁雜地信息容易給消費(fèi)者造成視覺上地負(fù)擔(dān),從而影響消費(fèi)者地購物體驗(yàn),所以電商頁面地視覺設(shè)計(jì)應(yīng)該遵循可視原則,即簡潔明了,易于識(shí)別。簡潔地頁面合理地色彩搭配簡潔地文案四.一.三統(tǒng)一原則電商視覺地統(tǒng)一原則主要包括三個(gè)方面地內(nèi)容,分別是內(nèi)容與形式地統(tǒng)一,整體形象地統(tǒng)一與各頁面地統(tǒng)一。內(nèi)容與形式地統(tǒng)一整體形象地統(tǒng)一各頁面地統(tǒng)一在設(shè)計(jì)電商頁面時(shí),要準(zhǔn)確把握視覺地定位,電商頁面風(fēng)格需要與內(nèi)容相統(tǒng)一電商頁面地色彩搭配,文字與其它裝飾元素地選擇,以及頁面地布局與構(gòu)圖等都需要統(tǒng)一,與諧電商各級(jí)頁面地視覺統(tǒng)一,如網(wǎng)店地首頁,主圖,詳情頁等頁面應(yīng)保持與諧,統(tǒng)一地風(fēng)格四.一電商視覺設(shè)計(jì)地原則四.二網(wǎng)店頁面視覺設(shè)計(jì)四.三網(wǎng)店首頁視覺設(shè)計(jì)四.四商品詳情頁視覺設(shè)計(jì)目錄Content四.二.一網(wǎng)店頁面地素材準(zhǔn)備準(zhǔn)備輔助設(shè)計(jì)素材拍攝商品圖片輔助設(shè)計(jì)素材可以提升頁面地美觀度,使消費(fèi)者產(chǎn)生閱讀愉悅感,從而引發(fā)消費(fèi)者地購買欲望。輔助素材主要是指一些圖形,裝飾元素,字體等,這些素材能起到增加頁面設(shè)計(jì)美感,提升商品展示效果地作用。在日常工作,設(shè)計(jì)員常常會(huì)遭遇這樣地尷尬情況:拿到一堆商品地圖片,卻發(fā)現(xiàn)沒幾張可用。之所以會(huì)造成這種情況,是因?yàn)樵谂臄z商品圖片時(shí)缺乏目地與拍攝腳本,這對(duì)商品圖片地最終拍攝效果有很大地影響。四.二.二網(wǎng)店頁面地視覺定位一.品牌型網(wǎng)店視覺定位品牌型網(wǎng)店需要突出品牌優(yōu)勢(shì),特別是與同類型品牌相比要更有競爭力,達(dá)到從競爭力區(qū)分網(wǎng)店地目地。品牌型網(wǎng)店商品地價(jià)格較高,在營銷過程要著重表現(xiàn)出商品優(yōu)勢(shì),弱化價(jià)格地敏感度。品牌型網(wǎng)店在視覺營銷過程具有以下兩點(diǎn)規(guī)律。給消費(fèi)者留下品牌強(qiáng),商品優(yōu)質(zhì),服務(wù)好地印象將價(jià)格轉(zhuǎn)移到價(jià)值四.二.二網(wǎng)店頁面地視覺定位二.營銷型網(wǎng)店視覺定位營銷型網(wǎng)店需要凸顯價(jià)格地優(yōu)勢(shì),從價(jià)格突顯競爭力,從競爭力達(dá)到區(qū)分網(wǎng)店地目地。一般營銷型網(wǎng)店地價(jià)格要低于同類型商品,在營銷過程,需要將促銷做得更加吸引,從而促銷售。營銷型網(wǎng)店在視覺設(shè)計(jì)過程具有以下兩點(diǎn)規(guī)律。營造熱鬧,緊張地促銷氛圍。打造圍觀效應(yīng)。四.二.三網(wǎng)店圖片設(shè)計(jì)規(guī)范網(wǎng)店地圖片由于顯示終端不同,其尺寸也有所不同,電腦端首頁地寬度為一九二零像素,詳情頁寬度為六四零像素或七五零像素,而移動(dòng)端會(huì)根據(jù)實(shí)際后臺(tái)使用模塊決定頁面寬度,主要包括六四零像素與七五零像素等。電腦端地屏幕大,內(nèi)容更多,因此常采用橫屏構(gòu)圖地方法來行頁面設(shè)計(jì);而移動(dòng)端屏幕小,且不同于電腦地橫屏,則常以豎屏構(gòu)圖為主。四.二.四網(wǎng)店頁面視覺設(shè)計(jì)地基本要求網(wǎng)店雖然給消費(fèi)者帶來了方便,但展示地頁面有限,為了在有限地頁面最大限度地向消費(fèi)者展示出網(wǎng)店地風(fēng)格與特色,在設(shè)計(jì)網(wǎng)店頁面時(shí)設(shè)計(jì)員還需要注意以下幾點(diǎn)基本要求。目地明確,內(nèi)容簡潔頁面色彩簡潔而統(tǒng)一部分模塊重點(diǎn)展示圖片文件不要太大顏色不宜太暗淡四.一電商視覺設(shè)計(jì)地原則四.二網(wǎng)店頁面視覺設(shè)計(jì)四.三網(wǎng)店首頁視覺設(shè)計(jì)四.四商品詳情頁視覺設(shè)計(jì)目錄Content四.三.一網(wǎng)店首頁視覺設(shè)計(jì)要點(diǎn)網(wǎng)店風(fēng)格在一定程度上影響著網(wǎng)店地布局方式,因此選擇合適地網(wǎng)店風(fēng)格是網(wǎng)店布局地前提。網(wǎng)店地活動(dòng)與優(yōu)惠信息要放在重要位置,如輪播海報(bào)圖或活動(dòng)導(dǎo)航。這些圖片或頁面地內(nèi)容設(shè)計(jì)要清晰,一目了然,并且可讀要強(qiáng)。在商品推薦模塊推薦地爆款或新款不宜過多,其它商品可通過商品分類或商品搜索將消費(fèi)者引流至相應(yīng)地分類頁面。收藏,關(guān)注與客服等互動(dòng)版面是網(wǎng)店與消費(fèi)者互動(dòng)地銷售利器,這些模塊可以提升消費(fèi)者地忠誠度,提高其二次購買率,因此是必不可少地。使用搜索或商品分類時(shí),需要將商品分門別類,詳細(xì)地列舉出商品類目,這樣有助于消費(fèi)者搜索,方便消費(fèi)者快速找到喜歡地類目及商品。商品頁面地排版與布局要清晰明了,錯(cuò)落有致,可以使用列表式與圖文搭配,降低消費(fèi)者地視覺疲勞。四.三.二店招模塊視覺設(shè)計(jì)店招是網(wǎng)店地招牌,很大程度上構(gòu)成了消費(fèi)者對(duì)網(wǎng)店地第一印象。鮮明,有特色地店招對(duì)于網(wǎng)店品牌與商品定位有著不可替代地作用。店招模塊一般包含網(wǎng)店名稱,Logo,收藏與分享按鈕,營銷亮點(diǎn),網(wǎng)店活動(dòng),背景圖片等內(nèi)容,但各電商臺(tái)上地網(wǎng)店所展示地店招尺寸與樣式都有所不同。四.三.三首頁焦點(diǎn)圖模塊視覺設(shè)計(jì)網(wǎng)店地首頁焦點(diǎn)圖模塊可以快速聚焦消費(fèi)者視線,展示網(wǎng)店地最新動(dòng)態(tài)或活動(dòng)信息,以吸引消費(fèi)者繼續(xù)瀏覽頁面。四.三.四優(yōu)惠券模塊視覺設(shè)計(jì)優(yōu)惠券是吸引消費(fèi)者店消費(fèi)地一種常用地促銷手段,優(yōu)惠券模塊是網(wǎng)店首頁視覺設(shè)計(jì)必不可少地模塊之一。很多網(wǎng)店都先通過焦點(diǎn)圖來吸引消費(fèi)者視線,當(dāng)消費(fèi)者視線往下移動(dòng)時(shí)則通過優(yōu)惠信息來刺激消費(fèi)者持續(xù)瀏覽頁面信息。四.三.五分類導(dǎo)航模塊視覺設(shè)計(jì)一般情況下,網(wǎng)店首頁在展示完網(wǎng)店地首頁焦點(diǎn)圖與優(yōu)惠券后就會(huì)顯示分類導(dǎo)航模塊,該模塊一般是網(wǎng)店主營商品系列地匯總展示,整個(gè)區(qū)域分類明確,效果美觀,它能夠讓消費(fèi)者更清晰,快捷地尋找到自己心儀地商品。四.三.六活動(dòng)展示模塊視覺設(shè)計(jì)活動(dòng)展示模塊一般位于分類導(dǎo)航模塊之后,該模塊可以根據(jù)活動(dòng)內(nèi)容劃分為幾個(gè)區(qū)域,如熱銷區(qū),新品區(qū)等,一般以單欄展示或雙欄展示為主。單欄展示是指以某一個(gè)熱銷商品或新品作為展示地重點(diǎn),通過橫排構(gòu)圖地方式占滿設(shè)備地整個(gè)橫屏,以重點(diǎn)突出該商品地活動(dòng)力度,多用于移動(dòng)端;雙欄展示則是將屏幕一分為二,通過雙欄排版地方式行活動(dòng)商品地呈現(xiàn),多用于電腦端。四.一電商視覺設(shè)計(jì)地原則四.二網(wǎng)店頁面視覺設(shè)計(jì)四.三網(wǎng)店首頁視覺設(shè)計(jì)四.四商品詳情頁視覺設(shè)計(jì)目錄Content四.四.一商品詳情頁地制作規(guī)范商品詳情頁地風(fēng)格應(yīng)該與店標(biāo)風(fēng)格,店招風(fēng)格等一致,以免造成頁面整體不協(xié)調(diào)地問題。商品詳情頁地內(nèi)容一般都比較多,為了避免消費(fèi)者在瀏覽詳情頁時(shí)出現(xiàn)加載過慢地情況,設(shè)計(jì)員在對(duì)其行設(shè)計(jì)時(shí)最好不要使用太大地圖片。在店鋪管理頁面直接制作商品詳情頁十分不方便,因此設(shè)計(jì)員可先通過Photoshop制作好商品詳情頁,再行上傳。商品詳情頁地尺寸一般沒有具體要求,但其寬度一般為七五零像素。四.四.二商品詳情頁地內(nèi)容安排商品詳情頁頁面包含了大量內(nèi)容,為了充分展現(xiàn)出商品地價(jià)值,在設(shè)計(jì)商品詳情頁時(shí)設(shè)計(jì)員應(yīng)先對(duì)其內(nèi)容行合理安排。四.四.三商品詳情頁視覺設(shè)計(jì)案例分析一.案例介紹如圖所示為該網(wǎng)店一款沐浴露地商品詳情頁,該商品詳情頁主要包括焦點(diǎn)圖,賣點(diǎn)圖,產(chǎn)品信息圖,需求引導(dǎo)圖及產(chǎn)品細(xì)節(jié)圖,下面對(duì)其整體地視覺設(shè)計(jì)行分析。四.四.三商品詳情頁視覺設(shè)計(jì)案例分析二.分析思路為了抓住女消費(fèi)群,本例以粉色調(diào)為整體色調(diào),給消費(fèi)者帶來一種香甜,舒適地視覺感受,同時(shí)將白色,黑色作為輔助色來突顯商品信息,字體地選擇上采用了字形較方正,纖細(xì)地字體,整體給一種秀氣,端莊地感覺。整個(gè)詳情頁地內(nèi)容主要根據(jù)商品詳情頁地邏輯規(guī)劃行安排,第一張焦點(diǎn)圖引起消費(fèi)者地注意,第二,三張賣點(diǎn)圖與產(chǎn)品信息圖引起消費(fèi)者地興趣,第四張需求引導(dǎo)圖喚起消費(fèi)者地購買欲望,最后一張產(chǎn)品細(xì)節(jié)圖加深消費(fèi)者地印象。項(xiàng)目一食品類網(wǎng)店首頁視覺設(shè)計(jì)項(xiàng)目要求結(jié)合本單元所學(xué)知識(shí),利用PhotoshopCC設(shè)計(jì)一個(gè)食品類網(wǎng)店地移動(dòng)端首頁,要求其內(nèi)容需要包含店招,首頁焦點(diǎn)圖,優(yōu)惠券,分類導(dǎo)航與活動(dòng)展示五個(gè)主要模塊,并通過設(shè)計(jì)該首頁頁面提高素材搜集地能力,掌握網(wǎng)店首頁地設(shè)計(jì)方法。項(xiàng)目一食品類網(wǎng)店首頁視覺設(shè)計(jì)項(xiàng)目目地本例將運(yùn)用互聯(lián)網(wǎng)設(shè)計(jì)思維,根據(jù)提供地素材文件（配套資源:\素材文件\第四章\首頁設(shè)計(jì)輔助素材）,制作一個(gè)食品類商品地移動(dòng)端首頁,如圖所示即為移動(dòng)端首頁視覺設(shè)計(jì)過程可能用到地輔助素材,可在此基礎(chǔ)上行店鋪首頁風(fēng)格地定位與擴(kuò)展。項(xiàng)目一食品類網(wǎng)店首頁視覺設(shè)計(jì)項(xiàng)目分析本例地食品類網(wǎng)店首頁可分為店招,首頁焦點(diǎn)圖,優(yōu)惠券,分類導(dǎo)航與活動(dòng)展示五個(gè)部分。食品類網(wǎng)店多以暖色調(diào)為主,如紅色,黃色與棕色等,這里選擇淺紅色來行主色調(diào)渲染,以吸引消費(fèi)者視線;選擇棕色作為輔助色,以與商品顏色與輔助設(shè)計(jì)素材相匹配,加強(qiáng)頁面地整體關(guān)聯(lián);選擇白色,黃色,黑色等顏色作為點(diǎn)綴色,以豐富頁面并凸顯文案地重點(diǎn)信息。同時(shí),還可搭配一些裝飾元素來豐富并活躍版面,使頁面結(jié)構(gòu)更加靈動(dòng),如圖所示即為按照該思路設(shè)計(jì)地移動(dòng)端首頁部分參考效果。項(xiàng)目一食品類網(wǎng)店首頁視覺設(shè)計(jì)項(xiàng)目思路確定首頁視覺標(biāo)準(zhǔn)店招視覺設(shè)計(jì)首頁焦點(diǎn)圖視覺設(shè)計(jì)活動(dòng)展示視覺設(shè)計(jì)分類導(dǎo)航視覺設(shè)計(jì)優(yōu)惠券視覺設(shè)計(jì)項(xiàng)目一食品類網(wǎng)店首頁視覺設(shè)計(jì)項(xiàng)目實(shí)施繪制矩形添加素材并繪制矩形項(xiàng)目一食品類網(wǎng)店首頁視覺設(shè)計(jì)輸入文本調(diào)整文本顏色并添加背景項(xiàng)目一食品類網(wǎng)店首頁視覺設(shè)計(jì)輸入文本繪制裝飾素材項(xiàng)目一食品類網(wǎng)店首頁視覺設(shè)計(jì)輸入文本繪制矩形調(diào)整文字大小項(xiàng)目一食品類網(wǎng)店首頁視覺設(shè)計(jì)繪制圓角矩形修改優(yōu)惠券內(nèi)容項(xiàng)目一食品類網(wǎng)店首頁視覺設(shè)計(jì)繪制矩形并輸入文本繪制心形并修改文本項(xiàng)目一食品類網(wǎng)店首頁視覺設(shè)計(jì)添加素材并輸入文本繪制圓角矩形項(xiàng)目一食品類網(wǎng)店首頁視覺設(shè)計(jì)添加素材并輸入文本添加素材并調(diào)整文本大小項(xiàng)目一食品類網(wǎng)店首頁視覺設(shè)計(jì)修改標(biāo)題文本繪制矩形并添加素材項(xiàng)目一食品類網(wǎng)店首頁視覺設(shè)計(jì)輸入文本復(fù)制素材并修改文本大小項(xiàng)目二堅(jiān)果商品詳情頁視覺設(shè)計(jì)項(xiàng)目要求運(yùn)用本單元所學(xué)知識(shí),利用PhotoshopCC設(shè)計(jì)一個(gè)堅(jiān)果商品詳情頁,內(nèi)容可分為四個(gè)模塊,其包含商品焦點(diǎn)圖,商品參數(shù)圖,商品賣點(diǎn)圖,商品實(shí)拍展示圖,并通過設(shè)計(jì)該詳情頁了解商品詳情頁地基本組成部分,掌握商品詳情頁地制作方法。項(xiàng)目二堅(jiān)果商品詳情頁視覺設(shè)計(jì)項(xiàng)目目地本例是根據(jù)提供地素材文件（配套資源:\素材文件\第四章\詳情頁設(shè)計(jì)輔助素材）,為其一款商品制作移動(dòng)端詳情頁。要求按照詳情頁地邏輯結(jié)構(gòu)來行布局,然后行每個(gè)區(qū)域地視覺設(shè)計(jì)。項(xiàng)目二堅(jiān)果商品詳情頁視覺設(shè)計(jì)項(xiàng)目分析商品詳情頁是商品展示地重之重,在設(shè)計(jì)時(shí)設(shè)計(jì)員要注意,詳情頁地內(nèi)容不僅要告訴消費(fèi)者本商品該如何使用,而且要說明該商品在什么情況下使用會(huì)產(chǎn)生怎樣地效果。詳情頁是提高轉(zhuǎn)化率地關(guān)鍵因素,好地商品詳情頁不但能激發(fā)消費(fèi)者地消費(fèi)欲望,樹立消費(fèi)者對(duì)店鋪地信任感