電商網頁界面視覺設計元素解析

馮浩煜

中圖分類號： J905 文獻標識碼： A 文章編號： 2095-2457（2018）01-0159-002

1 基礎文字作為基石

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

就電子商務網站中文字的主要功能來說，要準確有效的傳達商品信息，就要考慮文字的整體視覺效果，是否符合電商網頁的特性，網站頁面的訴求力能否達到瀏覽者的要求。

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

2 必不可少的Tab標簽

Tab標簽是網頁中不可缺少的部分，在靜態頁面設計中，盡量避免使用多排水平標簽的布置，可以使用垂直標簽代替；如果標簽之間存在結構，可以將標簽分組，分組可以以下拉菜單或顏色分組等方式進行；如果標簽重要性或相關性存在區別，可以顯示最重要的標簽，然后加入“更多”選項；如果標簽之間都是相互平等的，可以考慮對標簽欄進行操作，如加入左右移動按鈕等，允許用戶滑動或拖動。

Tab標簽分為兩大部分，標簽區和內容區。標簽區分為選中的標簽及未選中的標簽，一般情況下選中標簽的顏色與未選中標簽的背景色明顯區分開，具有較高的辨別度。標簽區的標題文字之間應該有某種特定的聯系，信息之間不應該存在對比或者并行的關系，標題文字也應該是簡短精煉的。內容區為重疊區域，每層內容交替顯示，既整理了信息，又在有限的空間顯示大量內容，信息可以以文字呈現，也可以如下圖所示以標志呈現，但是排布必須工整且統一。

3 多層次多形式且有指示性的導航

網頁導航表現為網頁的欄目菜單設置、輔助菜單、其他在線幫助等形式。網頁導航設置是在網頁欄目結構的基礎上，進一步為用戶瀏覽網頁提供的提示系統。網頁導航一般分為三種，主導航、次導航、面包屑導航。主導航一般位于網頁頁眉頂部或者banner下部，可以第一時間引導訪問者進入需要的信息欄目。次導航一般位于網站的兩側，當訪問者需要切換到其他欄目時，可以通過次導航進入。面包屑導航是一個位置導航，用來讓訪問者知道自己所在網頁的具體位置，是一種顯示訪問者在網站或網絡應用中的位置一層層指引的導航。

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

4 信息精簡的延展表單

每當頁面中出現需要填寫的表單時，用戶就開始感到頭疼，有些用戶甚至直接選擇放棄，而設計者應該考慮的是如何讓用戶看到表單時不會產生反感，讓他們直接注意到他們需要填的必填項，減少其他信息的干擾。

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

5 面子工程——logo

Logo在傳播中起到識別和推廣公司或網站的作用，好的logo可以讓消費者記住公司主體和相關網頁，網絡中的logo主要是各個網站用來與其他網站鏈接的圖形標志，代表一個網站或網站的一個板塊。

Logo在電商網頁版面設計中也是必不可少的，當用戶在第一時間進入一個站點中時，電商網站logo無疑就是首先進入用戶的視線的，這時如果logo沒有任何特色就毫無吸引力，該網站很可能給用戶留下零印象。相反如果某個電商網頁的logo很吸引視線，就會讓人輕易記住該logo及網站，進而可以增加電商網站的交易量。所以，網站的logo作為電商網頁推廣最重要的一部分，是應用最廣泛、出現頻率最高的視覺元素。它不再是簡簡單單的一個圖形或者與文字的組合，它是根據特定的網頁類型、整體風格結構并考慮該網頁的受眾及應用環境，為網站量身定做的標準視覺符號。

6 圖形鏈接——Icon

在網頁的瀏覽過程中，使用者很容易迷失方向，不知道應該點哪里，圖標在網頁的作用也就體現在此，圖標不僅可以美化網頁界面，更能清楚的告訴使用者的位置及接下來該進行的步驟。圖標在網頁的使用成為了將信息高效率傳遞給消費者的有效方式之一。

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

7 合理有效地管理配色

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

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