曹菲菲

【摘要】：互聯(lián)網(wǎng)高速發(fā)展的時代，電子商務網(wǎng)頁視覺設計越來越重要，以典型的電子購物平臺淘寶天貓網(wǎng)為例，以平面視覺元素分析為研究框架，從文字、圖片、色彩、版式四個方面對兩者進行了對比分析研究，得出了電子商務網(wǎng)頁視覺設計的一些基本規(guī)律。

【關鍵詞】：電子商務;網(wǎng)頁設計;視覺元素

一、前言

當今進入一個數(shù)字信息化時代，互聯(lián)網(wǎng)在全球的普及，給人們的生活帶來了很大的便利。尤其是電子商務的發(fā)展，極大地帶動了網(wǎng)絡經(jīng)濟的繁榮，網(wǎng)絡購物已經(jīng)成為當今中國人民普遍的生活方式。而作為商家和消費者連接的紐帶，電子商務網(wǎng)絡平臺的重要性越發(fā)顯著。對消費者來說電子商務平臺的頁面設計是最直接的視覺刺激，所以對其網(wǎng)頁視覺設計進行研究就具有了現(xiàn)實的必要性，此研究有利于改進現(xiàn)有網(wǎng)頁平臺的視覺吸引力，帶動更多的消費者提高消費欲望，從而為推動互聯(lián)網(wǎng)經(jīng)濟進一步發(fā)展做出貢獻。淘寶網(wǎng)作為中國用戶最多的購物平臺，研究淘寶網(wǎng)以及它旗下的天貓網(wǎng)的網(wǎng)頁視覺設計，對其它電子商務網(wǎng)頁設計來說具有很大的參考價值性，有利于推動其他電子商務和整體網(wǎng)絡網(wǎng)頁設計的發(fā)展。

二、網(wǎng)頁設計的視覺元素分析

1.整體的設計理念：以人為本

天貓網(wǎng)是淘寶網(wǎng)的進階版，兩者雖然在網(wǎng)站定位上有區(qū)別，但兩者的整體設計理念卻保持了統(tǒng)一，都是以用戶為導向，屬于典型的用戶體驗設計的網(wǎng)絡購物平臺。在這兩個網(wǎng)站首頁，用戶都可以很方便得用搜索欄搜索到自己需要的商品，或者通過左側的分類導向一樣很便捷地找到自己需要購買的商品。這里的對用戶沒有限制，用戶身份可以是新用戶也可以是老用戶，兩個網(wǎng)站都是為用戶提供最方便最快捷的操作方式。首頁界面分類齊全，種類繁多，方便了各種需求用戶的購物訴求，兩者都充分考慮到用戶的需求，尊重了用戶操作習慣，真正做到了以人為本的設計理念。尤其是淘寶網(wǎng)近兩年推出的根據(jù)用戶搜素習慣為每個用戶定制推薦商品一欄，更是極大考慮每個用戶的需求，推動了個性化服務發(fā)展。

2.視覺設計元素分析

淘寶網(wǎng)和天貓網(wǎng)是從屬關系，前者內容上包含了后者。后者是前者細分化的一部分，天貓網(wǎng)定位更高品質的高端化購物平臺。作為同類型的網(wǎng)站，對比而言，兩者有很多相似設計，在具體視覺元素設計分析上也有很多類似的特點，文字、圖片和色彩是具體表達了視覺信息，版式則是整體表達了視覺信息?？偨Y起來：都配有簡潔并富有變化的文字、展示了合適的設計感圖片、呈現(xiàn)出活潑溫馨的色彩搭配、形成了整齊有序的版面布局。但也存在著一些因為網(wǎng)站自身形象定位不同所作出的明顯區(qū)別。

2.1.簡潔并富有變化的文字

文字是最可以準確傳達信息的載體，網(wǎng)頁視覺設計在文字選擇上則更多強調文字傳遞信息的功能，但是近幾年注重了文字的審美。兩者整體來看是選擇了以黑色作為文字主要顏色，背景基本上為白底，這樣的設計呈現(xiàn)出簡潔明快的風格，優(yōu)化了用戶的視覺感受。導航欄淘寶和天貓都選了黑白兩色的文字搭配，并且在字體大小上也做出了合適的變化，方便用戶的視覺聚焦到重要網(wǎng)頁信息上?？傮w選擇了宋體和楷體兩種主流字體，只在一些欄目標題以及店鋪名稱上選擇了其他有具有美感的字體。淘寶的欄目名稱上的字體有多種類別，比天貓字體選擇更富有變化，呈現(xiàn)出商品琳瑯滿目的感覺。天貓基本上是選擇了宋體，彰顯出統(tǒng)一的美感，這種統(tǒng)一整齊感更能表現(xiàn)出一種高端質感，從而契合了天貓本身的高端化形象定位。在文字顏色上兩者都是黑色為主，少部分加入了橙色、紅色以及白色，這幾個顏色都是起著醒目的作用，在黑色文字的襯托下，更能起到突出某些信息的作用。淘寶和天貓網(wǎng)上的文字表達都是精簡準確，在傳遞信息方面效果明顯，滿足了用戶的信息獲取的需求，并且整體來看文字搭配符合網(wǎng)頁的特點。

2.2.合適的設計感圖片

網(wǎng)頁上的文字主要功能是傳遞信息，在視覺傳達方面給人更多的是平淡的感覺，而圖片則能在視覺上給用戶帶來強有力的沖擊，對用戶的視覺刺激是最直接的，在視覺傳達效果上是最佳的。圖片的重要性得到越來越多的人重視，目前的電子商務網(wǎng)頁設計都是以圖片為主，文字為輔。淘寶和天貓網(wǎng)也是采取了圖片為主，文字為輔的設計格局。打開這兩個網(wǎng)站的首頁，首先映入眼簾的就是大幅的圖片，淘寶圖片在尺寸大小上比天貓的小，淘寶更多是拼接的方式將圖片組合在一起，而天貓的大幅圖片尺寸基本整幅占滿了屏幕，這樣帶來的視覺沖擊是非常大的，配以高純度底色，天貓首頁帶給用戶高端時尚的感受，這一點也是牢牢契合天貓的高端化定位，對比之淘寶就樸實一點，大小不一的圖片組合在一起，突出種類繁多的景象。再從圖片內容上看，基本上都是對商品的展示，并且多角度的來展示，有的突出商品本身的特性，有的展現(xiàn)模特使用商品的良好效果。圖片都是基本上采取了分辨率高清晰的照片，并且首頁圖片都加入了設計元素和后期加工，極具美感，更加注重了圖片的審美性。另從實用性方面來說，展示的圖片都準確傳達了商品的信息，用戶很容易解碼圖片從而選擇需要的商品。圖片基本形式也是以白色或者灰色為底，配之具體的商品樣式，這一點在天貓網(wǎng)表現(xiàn)更明顯，給人很強的秩序感。在這兩個網(wǎng)頁設計上，圖片不僅有具象照片形式的，也有抽象圖標形式的，具體和抽象相互結合，主次清晰，相得益彰。

2.3.活潑溫馨的色彩搭配

色彩是網(wǎng)頁設計非常重要的一部分，一個網(wǎng)頁的整體色彩是用戶形成第一印象的最關鍵的因素。色彩本身是沒有任何感情因素的，但是由于人體感官的發(fā)展，人眼對色彩形成了比較固定的感情聯(lián)想。最基本的就是基于色相的不同，分成了冷暖色系，暖色系如橙色，紅色等，冷色系則有藍色，綠色等。在明度和純度這兩個坐標上，明度是從色彩明暗程度來說的，明度高給人生機勃勃，活潑歡快的感受，明度低給人暗沉的感受。純度是從色彩的鮮艷程度來說的，純度越高越接近原色，越純度低則越暗淡并且雜加白、灰色。首先淘寶和天貓這兩個網(wǎng)站都有統(tǒng)一的顏色基調，淘寶的顏色基調是明度純度都很高的橙色，天貓的顏色基調則選擇了明度稍暗純度很高的酒紅色。首先這兩個顏色的選擇都是屬于暖色調的，橙色和酒紅色都營造了活潑溫馨的購物氛圍，這兩者都屬于紅色系，有心理學研究表示紅色系的色彩能使人體的脈搏增加，血壓升高，使人的情緒處于興奮而沖動的狀態(tài)。這樣來看這兩者使用橙色和酒紅色顏色基調無疑對提高用戶購物欲望是有幫助的。天貓選擇的明度適中純度高的酒紅色基調，增加了頁面華麗的感覺，更突出了它最為高端化購物平臺的定位。其次，這兩個網(wǎng)頁設計都增加了大片的白色，灰色作為搭配，因為大片的紅色系看多了容易讓人疲倦，增加了白色和灰色這兩個安全平淡的顏色，中和了紅色帶來的強烈刺激感，這樣不容易讓人造成視覺疲倦，更顯人性化設計理念。

2.4.整齊有序的版面布局

網(wǎng)頁的版面布局是從整體來看的，版面設計關系到網(wǎng)頁給人整體感受。隨意無序的版面設計給人混亂感受，無法吸引用戶有效瀏覽，而整齊有序的版面設計則會帶給用戶審美和實用上的雙重享受。版面設計的秩序感，即方便了用戶最快捷地找到需求信息，也通過井然有序的編排帶給用戶審美上的滿足。淘寶和天貓在這一點上都采取了整齊規(guī)劃的版面設計，以欄格式為基本的區(qū)分方式，區(qū)域以長方形為基本形狀。在兩個網(wǎng)站首頁屏幕上，都采取了三縱欄的版式，導航欄放在上方，分類欄放在左方。比較來看，淘寶的分欄更多，更小，更細，而天貓的分欄則更加簡潔。在秩序感上天貓比天貓更加強烈，更能顯示出天貓的高格調的定位。