電商網(wǎng)頁(yè)界面視覺(jué)設(shè)計(jì)元素解析

馮浩煜

中圖分類號(hào)： J905 文獻(xiàn)標(biāo)識(shí)碼： A 文章編號(hào)： 2095-2457（2018）01-0159-002

1 基礎(chǔ)文字作為基石

在最初網(wǎng)頁(yè)形成時(shí)，網(wǎng)頁(yè)的界面其實(shí)只有文字，是當(dāng)時(shí)互聯(lián)網(wǎng)信息傳遞的唯一載體。雖然隨著電子商務(wù)的成熟和互聯(lián)網(wǎng)技術(shù)的提升，網(wǎng)頁(yè)上多了更豐富的元素，可是文字依舊是不可缺少的載體，缺少文字的網(wǎng)站往往不能給使用者帶來(lái)最舒適的使用感受。文字可以出現(xiàn)在電商網(wǎng)頁(yè)界面的任何地方，不論是首頁(yè)還是產(chǎn)品介紹，或者是導(dǎo)航處，文字的功能已經(jīng)不僅僅是一種書(shū)面語(yǔ)言，在傳達(dá)文化，更有提升網(wǎng)頁(yè)界面審美價(jià)值的附加功能。優(yōu)秀的文字設(shè)計(jì)與排版會(huì)增加整個(gè)電商網(wǎng)頁(yè)的視覺(jué)效果，吸引用戶瀏覽，從而促進(jìn)了產(chǎn)品的銷(xiāo)售。

就電子商務(wù)網(wǎng)站中文字的主要功能來(lái)說(shuō)，要準(zhǔn)確有效的傳達(dá)商品信息，就要考慮文字的整體視覺(jué)效果，是否符合電商網(wǎng)頁(yè)的特性，網(wǎng)站頁(yè)面的訴求力能否達(dá)到瀏覽者的要求。

我認(rèn)為電子商務(wù)網(wǎng)站中文字需要具有以下特性：首先，文字要清晰可見(jiàn)，容易識(shí)別，消費(fèi)者通過(guò)網(wǎng)絡(luò)進(jìn)行消費(fèi)尋求的就是簡(jiǎn)潔、直接、方便，好的電商網(wǎng)頁(yè)肯定會(huì)給消費(fèi)者干凈、便捷的最初視覺(jué)印象。其次，電商網(wǎng)頁(yè)中的文字一定要方便閱讀，文字的排版和布局對(duì)于瀏覽者視覺(jué)感受來(lái)說(shuō)是非常重要的，我們可以從行間距、字距或者文字排列上進(jìn)行設(shè)計(jì)。最后，網(wǎng)頁(yè)中的文字設(shè)計(jì)一般都是有輕有重的，在不影響整體網(wǎng)頁(yè)風(fēng)格的前提下，多一些適當(dāng)變化的文字，使網(wǎng)頁(yè)界面更有節(jié)奏、更有朝氣。對(duì)于電商網(wǎng)頁(yè)設(shè)計(jì)中這點(diǎn)同樣適用，例如給當(dāng)季正在促銷(xiāo)的區(qū)域標(biāo)題文字加粗、加框、加下劃線、改變文字樣式等，強(qiáng)化視覺(jué)效果。但是要注意的是，在電商網(wǎng)頁(yè)中不能濫用彩色字體，如果整篇頁(yè)面處處都是重點(diǎn)只會(huì)讓人眼花，不會(huì)起到任何美化效果。

2 必不可少的Tab標(biāo)簽

Tab標(biāo)簽是網(wǎng)頁(yè)中不可缺少的部分，在靜態(tài)頁(yè)面設(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ū)分開(kāi)，具有較高的辨別度。標(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)一。

3 多層次多形式且有指示性的導(dǎo)航

網(wǎng)頁(yè)導(dǎo)航表現(xiàn)為網(wǎng)頁(yè)的欄目菜單設(shè)置、輔助菜單、其他在線幫助等形式。網(wǎng)頁(yè)導(dǎo)航設(shè)置是在網(wǎng)頁(yè)欄目結(jié)構(gòu)的基礎(chǔ)上，進(jìn)一步為用戶瀏覽網(wǎng)頁(yè)提供的提示系統(tǒng)。網(wǎng)頁(yè)導(dǎo)航一般分為三種，主導(dǎo)航、次導(dǎo)航、面包屑導(dǎo)航。主導(dǎo)航一般位于網(wǎng)頁(yè)頁(yè)眉頂部或者banner下部，可以第一時(shí)間引導(dǎo)訪問(wèn)者進(jìn)入需要的信息欄目。次導(dǎo)航一般位于網(wǎng)站的兩側(cè)，當(dāng)訪問(wèn)者需要切換到其他欄目時(shí)，可以通過(guò)次導(dǎo)航進(jìn)入。面包屑導(dǎo)航是一個(gè)位置導(dǎo)航，用來(lái)讓訪問(wèn)者知道自己所在網(wǎng)頁(yè)的具體位置，是一種顯示訪問(wèn)者在網(wǎng)站或網(wǎng)絡(luò)應(yīng)用中的位置一層層指引的導(dǎo)航。

頂部水平欄導(dǎo)航是當(dāng)前兩種最流行的網(wǎng)站導(dǎo)航菜單設(shè)計(jì)之一，最常用于網(wǎng)站的主導(dǎo)航設(shè)計(jì)中，且通常放在網(wǎng)站所有頁(yè)面的網(wǎng)站logo的上方或下方。對(duì)于信息過(guò)于繁雜的電商網(wǎng)站來(lái)說(shuō)，這種導(dǎo)航最為常見(jiàn)，因?yàn)榭梢允褂脩舨僮髌饋?lái)更簡(jiǎn)便舒適。次導(dǎo)航有幾種呈現(xiàn)形式，比如抽屜式導(dǎo)航，默認(rèn)情況下導(dǎo)航菜單根本不顯示，只有當(dāng)鼠標(biāo)觸及到指定圖標(biāo)時(shí)才會(huì)打開(kāi)。當(dāng)觸及到其中一個(gè)欄目時(shí)，第二層的內(nèi)容才會(huì)繼續(xù)逐漸展開(kāi)，給用戶清晰明朗的內(nèi)容導(dǎo)航。這種導(dǎo)航對(duì)于電商網(wǎng)頁(yè)最為合適，不僅節(jié)約了本就緊促有限的網(wǎng)頁(yè)空間，更能給使用者指清操作路徑。其次，在導(dǎo)航設(shè)計(jì)中盡量降低鼠標(biāo)的操作難度。網(wǎng)站建立好不是為了讓用戶漫無(wú)目的的瀏覽，而是要引導(dǎo)用戶最終訪問(wèn)網(wǎng)站的目標(biāo)頁(yè)面。最后就是應(yīng)該重視面包屑導(dǎo)航設(shè)計(jì)，明確告知用戶目前所在位置。面包屑導(dǎo)航是幫助用戶判斷當(dāng)前位置的最好方法，所以一定要設(shè)計(jì)的易于識(shí)別，可以通過(guò)字體顏色改變、字體加粗、字號(hào)加大等方式與頁(yè)面中的其他文字區(qū)分出來(lái)，不要在這里設(shè)計(jì)太多花哨的東西。

4 信息精簡(jiǎn)的延展表單

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

對(duì)于商業(yè)中的表單來(lái)說(shuō)，用戶的目的是獲取網(wǎng)站商品信息及完成購(gòu)買(mǎi)；商業(yè)目的是提升銷(xiāo)售量，獲取利益最大化。網(wǎng)頁(yè)表單是必要的，而往往是設(shè)計(jì)師和用戶的痛點(diǎn)。隨著時(shí)間的推移，用戶已經(jīng)形成一種期望，表單的外觀應(yīng)該如何以及如何運(yùn)作。他們通常期望網(wǎng)頁(yè)表單有以下六個(gè)組成部分：標(biāo)簽、輸入框、行為、幫助、信息和驗(yàn)證。同樣，構(gòu)成電商網(wǎng)頁(yè)表單的這六個(gè)部分的功能之間也是互不相同但相輔相成的，標(biāo)簽可以告訴用戶即將輸入的元素的含義是什么；輸入框可以讓用戶提供反饋，包括文字輸入框、密碼輸入框、復(fù)選框、單選按鈕、滑塊以及更多；行為是在用戶按下鏈接或按鈕時(shí)表單會(huì)執(zhí)行相應(yīng)操作的按鈕；幫助會(huì)在用戶填寫(xiě)表單時(shí)提供及時(shí)有效的操作指南；信息是系統(tǒng)對(duì)用戶輸入信息的反饋，在上圖登錄名后方的信息，給予的反饋屬于負(fù)面反饋，是對(duì)用戶輸入信息的不肯定，也有正面反饋，如“用戶名可使用”這種信息等；驗(yàn)證是最基本的確保用戶提交數(shù)據(jù)符合可接受參數(shù)。

5 面子工程——logo

Logo在傳播中起到識(shí)別和推廣公司或網(wǎng)站的作用，好的logo可以讓消費(fèi)者記住公司主體和相關(guān)網(wǎng)頁(yè)，網(wǎng)絡(luò)中的logo主要是各個(gè)網(wǎng)站用來(lái)與其他網(wǎng)站鏈接的圖形標(biāo)志，代表一個(gè)網(wǎng)站或網(wǎng)站的一個(gè)板塊。

Logo在電商網(wǎng)頁(yè)版面設(shè)計(jì)中也是必不可少的，當(dāng)用戶在第一時(shí)間進(jìn)入一個(gè)站點(diǎn)中時(shí)，電商網(wǎng)站logo無(wú)疑就是首先進(jìn)入用戶的視線的，這時(shí)如果logo沒(méi)有任何特色就毫無(wú)吸引力，該網(wǎng)站很可能給用戶留下零印象。相反如果某個(gè)電商網(wǎng)頁(yè)的logo很吸引視線，就會(huì)讓人輕易記住該logo及網(wǎng)站，進(jìn)而可以增加電商網(wǎng)站的交易量。所以，網(wǎng)站的logo作為電商網(wǎng)頁(yè)推廣最重要的一部分，是應(yīng)用最廣泛、出現(xiàn)頻率最高的視覺(jué)元素。它不再是簡(jiǎn)簡(jiǎn)單單的一個(gè)圖形或者與文字的組合，它是根據(jù)特定的網(wǎng)頁(yè)類型、整體風(fēng)格結(jié)構(gòu)并考慮該網(wǎng)頁(yè)的受眾及應(yīng)用環(huán)境，為網(wǎng)站量身定做的標(biāo)準(zhǔn)視覺(jué)符號(hào)。

6 圖形鏈接——Icon

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

圖標(biāo)在一般意義上，它是一個(gè)圖像，一種表示手法，是重要的，并且具有持久效用符號(hào)。點(diǎn)擊圖標(biāo)可以產(chǎn)生不同的行為結(jié)果，好比打開(kāi)一個(gè)文件或者執(zhí)行一個(gè)程序。在大部分情況下，圖標(biāo)所采用的圖像是與它所要表現(xiàn)的內(nèi)容緊密相關(guān)的，比如文件夾的icon就是一個(gè)文件袋的圖。電商網(wǎng)頁(yè)中也有大量的圖形元素出現(xiàn)，而且圖標(biāo)所表現(xiàn)的行為或者它所代表特殊的網(wǎng)頁(yè)性質(zhì)也使圖標(biāo)區(qū)別于其他網(wǎng)頁(yè)，但是在電商網(wǎng)頁(yè)中，有幾個(gè)固定含義的圖標(biāo)為大部分電商網(wǎng)頁(yè)通用。如收藏夾的icon就是一個(gè)正五角星，這個(gè)圖標(biāo)的不同配色運(yùn)用于各個(gè)電商網(wǎng)頁(yè)，但是都代表著收藏夾的含義。

7 合理有效地管理配色

在電商網(wǎng)頁(yè)的眾多構(gòu)成因素中，顏色比文字與圖形更能引起人的視覺(jué)反應(yīng)。合理的運(yùn)用顏色可以對(duì)購(gòu)物網(wǎng)站的商品進(jìn)行分類，從而提升使用者的瀏覽速度，更為便捷的搜索到自己所需要的產(chǎn)品類別，并定義了整個(gè)電商網(wǎng)站的風(fēng)格。我認(rèn)為，電商網(wǎng)頁(yè)顏色的設(shè)計(jì)的過(guò)程是通過(guò)進(jìn)行市場(chǎng)調(diào)研，選擇符合那些對(duì)該網(wǎng)頁(yè)感興趣的潛在用戶的感受，而不是緊緊跟隨設(shè)計(jì)者本身的顏色搭配，從而了解到該電商網(wǎng)頁(yè)的風(fēng)格要求，這樣設(shè)計(jì)出的色彩才不會(huì)令訪問(wèn)者失望。

電子商務(wù)網(wǎng)站的顏色具有幾個(gè)特性：首先，電商網(wǎng)頁(yè)的顏色具有導(dǎo)向性，工業(yè)設(shè)計(jì)色彩專家安契爾霍金認(rèn)為“色彩能夠直接影響人的思維狀態(tài)及心理活動(dòng)，這是商品和生產(chǎn)銷(xiāo)售的命脈”。根據(jù)色彩對(duì)人心理的影響，合理地加以運(yùn)用。其次，電商網(wǎng)頁(yè)的顏色也具有功能性。根據(jù)色彩給人留下的印象深淺排名，暖色一般給人留下的印象比較深刻；同時(shí)色彩還具有特定的聯(lián)想和象征意義，例如，藍(lán)色多出現(xiàn)在電商網(wǎng)頁(yè)的男士用品區(qū)，就像生活中男廁所的標(biāo)志也多用藍(lán)色一樣，藍(lán)色與男性已經(jīng)形成了一定的對(duì)應(yīng)關(guān)系。最后，電商網(wǎng)頁(yè)中的顏色可以引發(fā)瀏覽者的心理情感。顏色可以很直接的給人呈現(xiàn)出美的感受，其中包括與網(wǎng)頁(yè)內(nèi)容有關(guān)的互融性美化和與網(wǎng)頁(yè)內(nèi)容沒(méi)有關(guān)系的色彩裝飾性美化。同樣色彩也會(huì)引發(fā)人的疲勞感，在視線長(zhǎng)時(shí)間面對(duì)同一種顏色時(shí)，首先會(huì)出現(xiàn)視覺(jué)疲勞，接著就是引起了心理疲勞，瀏覽者開(kāi)始在心理上產(chǎn)生了尋求新型刺激物的需求，產(chǎn)生了更多的心理需要。像消費(fèi)者看到橘色就會(huì)聯(lián)想到淘寶網(wǎng)一樣，某些電商網(wǎng)頁(yè)中的顏色會(huì)給瀏覽者留下永久的記憶，所以好的色彩使用能使電商網(wǎng)頁(yè)受益無(wú)窮。