電商視覺離不開這些元素嗎「電商視覺策劃」

文/馮浩煜 雖然隨著電子商務(wù)的成熟和互聯(lián)網(wǎng)技術(shù)的提升，網(wǎng)頁上多了更豐富的元素，可是文字依舊是不可缺少的載體，缺少文字的電商設(shè)計(jì)往往不能給使用者帶來最舒適的使用感受。

文字可以出現(xiàn)在電商界面的任何地方，不論是首頁還是產(chǎn)品介紹，或者是導(dǎo)航處，文字的功能已經(jīng)不僅僅是一種書面語言，在傳達(dá)文化，更有提升網(wǎng)頁界面審美價(jià)值的附加功能。優(yōu)秀的文字設(shè)計(jì)與排版會(huì)增加整個(gè)電商網(wǎng)頁的視覺效果，吸引用戶瀏覽，從而促進(jìn)了產(chǎn)品的銷售。

首先，文字要清晰可見，容易識(shí)別，消費(fèi)者通過網(wǎng)絡(luò)進(jìn)行消費(fèi)尋求的就是簡(jiǎn)潔、直接、方便，好的電商視覺設(shè)計(jì)肯定會(huì)給消費(fèi)者干凈、便捷的最初視覺印象。其次，電商視覺設(shè)計(jì)中的文字一定要方便閱讀，文字的排版和布局對(duì)于瀏覽者視覺感受來說是非常重要的，我們可以從行間距、字距或者文字排列上進(jìn)行設(shè)計(jì)。

最后，電商視覺文字設(shè)計(jì)一般都是有輕有重的，在不影響整體風(fēng)格的前提下，多一些適當(dāng)變化的文字，使網(wǎng)頁界面更有節(jié)奏、更有朝氣。

Tab標(biāo)簽是網(wǎng)頁中不可缺少的部分，在靜態(tài)頁面設(shè)計(jì)中，盡量避免使用多排水平標(biāo)簽的布置，可以使用垂直標(biāo)簽代替；如果標(biāo)簽之間存在結(jié)構(gòu)，可以將標(biāo)簽分組，分組可以以下拉菜單或顏色分組等方式進(jìn)行；如果標(biāo)簽重要性或相關(guān)性存在區(qū)別，可以顯示最重要的標(biāo)簽，然后加入“更多”選項(xiàng)；如果標(biāo)簽之間都是相互平等的，可以考慮對(duì)標(biāo)簽欄進(jìn)行操作，如加入左右移動(dòng)按鈕等，允許用戶滑動(dòng)或拖動(dòng)。

Tab標(biāo)簽分為兩大部分，標(biāo)簽區(qū)和內(nèi)容區(qū)。標(biāo)簽區(qū)分為選中的標(biāo)簽及未選中的標(biāo)簽，一般情況下選中標(biāo)簽的顏色與未選中標(biāo)簽的背景色明顯區(qū)分開，具有較高的辨別度。標(biāo)簽區(qū)的標(biāo)題文字之間應(yīng)該有某種特定的聯(lián)系，信息之間不應(yīng)該存在對(duì)比或者并行的關(guān)系，標(biāo)題文字也應(yīng)該是簡(jiǎn)短精煉的。內(nèi)容區(qū)為重疊區(qū)域，每層內(nèi)容交替顯示，既整理了信息，又在有限的空間顯示大量?jī)?nèi)容，信息可以以文字呈現(xiàn)，也可以如下圖所示以標(biāo)志呈現(xiàn)，但是排布必須工整且統(tǒng)一。

導(dǎo)航表現(xiàn)為網(wǎng)頁的欄目菜單設(shè)置、輔助菜單、其他在線幫助等形式。網(wǎng)頁導(dǎo)航設(shè)置是在網(wǎng)頁欄目結(jié)構(gòu)的基礎(chǔ)上，進(jìn)一步為用戶瀏覽網(wǎng)頁提供的提示系統(tǒng)。網(wǎng)頁導(dǎo)航一般分為三種，主導(dǎo)航、次導(dǎo)航、面包屑導(dǎo)航。

主導(dǎo)航一般位于網(wǎng)頁頁眉頂部或者banner下部，可以第一時(shí)間引導(dǎo)訪問者進(jìn)入需要的信息欄目；次導(dǎo)航一般位于網(wǎng)站的兩側(cè)，當(dāng)訪問者需要切換到其他欄目時(shí)，可以通過次導(dǎo)航進(jìn)入；面包屑導(dǎo)航是一個(gè)位置導(dǎo)航，用來讓訪問者知道自己所在網(wǎng)頁的具體位置，是一種顯示訪問者在網(wǎng)站或網(wǎng)絡(luò)應(yīng)用中的位置一層層指引的導(dǎo)航。

每當(dāng)頁面中出現(xiàn)需要填寫的表單時(shí)，用戶就開始感到頭疼，有些用戶甚至直接選擇放棄，而設(shè)計(jì)師應(yīng)該考慮的是如何讓用戶看到表單時(shí)不會(huì)產(chǎn)生反感，讓他們直接注意到他們需要填的必填項(xiàng)，減少其他信息的干擾。

表單有以下六個(gè)組成部分：標(biāo)簽、輸入框、行為、幫助、信息和驗(yàn)證。標(biāo)簽可以告訴用戶即將輸入的元素的含義是什么；輸入框可以讓用戶提供反饋，包括文字輸入框、密碼輸入框、復(fù)選框、單選按鈕、滑塊以及更多；行為是在用戶按下鏈接或按鈕時(shí)表單會(huì)執(zhí)行相應(yīng)操作的按鈕。

幫助會(huì)在用戶填寫表單時(shí)提供及時(shí)有效的操作指南；信息是系統(tǒng)對(duì)用戶輸入信息的反饋，在上圖登錄名后方的信息，給予的反饋屬于負(fù)面反饋，是對(duì)用戶輸入信息的不肯定，也有正面反饋，如“用戶名可使用”這種信息等；驗(yàn)證是最基本的確保用戶提交數(shù)據(jù)符合可接受參數(shù)。

Logo在電商設(shè)計(jì)中也是必不可少的，當(dāng)用戶在第一時(shí)間進(jìn)入一個(gè)站點(diǎn)中時(shí)，電商logo無疑就是首先進(jìn)入用戶的視線的，這時(shí)如果logo沒有任何特色就毫無吸引力，很可能給用戶留下零印象。相反如果某個(gè)電商網(wǎng)頁的logo很吸引視線，進(jìn)而可以增加電商網(wǎng)站的交易量。網(wǎng)站的logo作為電商推廣最重要的一部分，是應(yīng)用最廣泛、出現(xiàn)頻率最高的視覺元素。

在瀏覽過程中，用戶很容易迷失方向，不知道應(yīng)該點(diǎn)哪里，圖標(biāo)在網(wǎng)頁的作用也就體現(xiàn)在此，圖標(biāo)不僅可以美化網(wǎng)頁界面，更能清楚的告訴使用者的位置及接下來該進(jìn)行的步驟。圖標(biāo)在網(wǎng)頁的使用成為了將信息高效率傳遞給消費(fèi)者的有效方式之一。

圖標(biāo)在一般意義上，它是一個(gè)圖像，一種表示手法，是重要的，并且具有持久效用符號(hào)。點(diǎn)擊圖標(biāo)可以產(chǎn)生不同的行為結(jié)果，好比打開一個(gè)文件或者執(zhí)行一個(gè)程序。在大部分情況下，圖標(biāo)所采用的圖像是與它所要表現(xiàn)的內(nèi)容緊密相關(guān)的。

在電商設(shè)計(jì)的眾多構(gòu)成因素中，顏色比文字與圖形更能引起人的視覺反應(yīng)。合理的運(yùn)用顏色可以對(duì)購(gòu)物網(wǎng)站的商品進(jìn)行分類，從而提升使用者的瀏覽速度，更為便捷的搜索到自己所需要的產(chǎn)品類別，并定義了整個(gè)電商頁面的風(fēng)格。

① 官方頭條號(hào)：設(shè)計(jì)智造 頂級(jí)創(chuàng)意設(shè)計(jì)師必備

② 本篇為 設(shè)計(jì)智造www.cocoo.top 編輯整理，版權(quán)歸原作者所有，轉(zhuǎn)載請(qǐng)注明出處！