UI 設(shè)計(jì)在電商首頁(yè)的應(yīng)用分析

王田

電子商務(wù)的主頁(yè)便是電子商務(wù)平臺(tái)的開(kāi)始，可以看到整個(gè)電子商務(wù)平臺(tái)業(yè)務(wù)整體結(jié)構(gòu)的寫(xiě)照。人們對(duì)計(jì)算機(jī)的第一印象大多來(lái)自于各種計(jì)算機(jī)軟件的界面。而且，電子商務(wù)網(wǎng)頁(yè)的界面設(shè)計(jì)是用戶(hù)對(duì)電子商務(wù)平臺(tái)的第一印象。其實(shí)，很多用戶(hù)對(duì)電子商務(wù)平臺(tái)的評(píng)價(jià)來(lái)自于電子商務(wù)主頁(yè)，因?yàn)?，后續(xù)的電子商務(wù)服務(wù)需要用戶(hù)使用時(shí)更深入的了解，因此，設(shè)計(jì)一個(gè)好的電子商務(wù)主頁(yè)就顯得極其重要。

一、電子商務(wù)首頁(yè)的價(jià)值

電子商務(wù)主頁(yè)是電子商務(wù)平臺(tái)中訪問(wèn)量最大的頁(yè)面，其具體價(jià)值主要體現(xiàn)在多個(gè)方面，不僅要滿(mǎn)足企業(yè)運(yùn)營(yíng)及贊助商的要求，更要滿(mǎn)足用戶(hù)的需求。

（一）企業(yè)的需求

對(duì)于一個(gè)企業(yè)而言，電子商務(wù)主頁(yè)是一種吸引用戶(hù)的營(yíng)銷(xiāo)工具，主要應(yīng)用于商品管理、活動(dòng)宣傳和用戶(hù)指導(dǎo)等方面。他們會(huì)在PC 端考慮這些因素：首先，如何通過(guò)電子商務(wù)網(wǎng)站的品牌給用戶(hù)留下深刻印象，包括網(wǎng)站的logo 和商業(yè)特色；其次，如何降低用戶(hù)訪問(wèn)首頁(yè)的損失率，讓更多用戶(hù)關(guān)注電商網(wǎng)站，在電商網(wǎng)站上進(jìn)行更多的交易，從而達(dá)到盈利的目的；第三，如何加大電子商務(wù)主頁(yè)的曝光率，讓更多的用戶(hù)了解活動(dòng)，進(jìn)行購(gòu)買(mǎi)；最后，如何正確定位網(wǎng)站，吸引更多用戶(hù)，滿(mǎn)足更多客戶(hù)的需求，從而提高用戶(hù)忠誠(chéng)度。

對(duì)于移動(dòng)APP 移動(dòng)端來(lái)說(shuō)，所考慮的因素迥然不同。用戶(hù)需要通過(guò)APP 主頁(yè)快速了解電商平臺(tái)的服務(wù)和功能，讓潛在客戶(hù)能夠在APP 上成功購(gòu)物。而且，設(shè)備的尺寸有局限性，導(dǎo)致APP 的展示面積有限，所以，需要為用戶(hù)提供醒目易用的導(dǎo)航，一目了然，加大用戶(hù)利用率。

（二）用戶(hù)的需求

當(dāng)用戶(hù)通過(guò)不同渠道進(jìn)入電子商務(wù)網(wǎng)站的電子商務(wù)主頁(yè)時(shí)，其消費(fèi)心理和需求也是復(fù)雜多樣化的。對(duì)于PC 端來(lái)說(shuō)，消費(fèi)者有三種不同來(lái)源的不同心理和需求：第一是直接訪問(wèn)用戶(hù)，他們通常是通過(guò)口碑傳播或者媒體宣傳廣告來(lái)了解電商網(wǎng)站的，在訪問(wèn)網(wǎng)站之前可能已經(jīng)從口碑和廣告中掌握了一定的電商平臺(tái)信息，因此，這種用戶(hù)可能直接從網(wǎng)站達(dá)到目的，獲取更多品牌信息，并嘗試購(gòu)買(mǎi)商品；第二是隨大流型用戶(hù)。這些用戶(hù)可能通過(guò)某些導(dǎo)航網(wǎng)站、論壇、新聞、推送的文章或某些促銷(xiāo)活動(dòng)獲取網(wǎng)站信息。這些用戶(hù)通常被推薦的信息所吸引，進(jìn)入電商網(wǎng)站的首頁(yè)，幾乎都是抱著好奇冷漠的心態(tài)，特別在意首頁(yè)的第一印象；第三類(lèi)搜索引擎源用戶(hù)大部分被特定關(guān)鍵詞吸引，進(jìn)入電子商務(wù)主頁(yè)。這些用戶(hù)行為的不確定性更強(qiáng)，部分就是向電力企業(yè)品牌奔來(lái)的現(xiàn)有用戶(hù)。而對(duì)于移動(dòng)設(shè)備用戶(hù)而言，用戶(hù)通常通過(guò)應(yīng)用商店、論壇社區(qū)、社交層共享、媒體報(bào)道、宣傳活動(dòng)等渠道了解電子企業(yè)的APP 信息，通過(guò)掃描二維碼或直接在應(yīng)用商店下載和安裝應(yīng)用程序的過(guò)程，與以前PC 端分析的嘗試用戶(hù)的目的相似。用戶(hù)下載和安裝APP 的費(fèi)用很高，因此對(duì)于APP 打開(kāi)的主頁(yè)要求會(huì)更高。否則，如果第一印象不好，APP 很可能很快被清除，或者今后長(zhǎng)期不再使用。用戶(hù)希望通過(guò)電子公司APP 快速確定能夠提供的服務(wù)范疇、服務(wù)特征以及當(dāng)前的促銷(xiāo)賣(mài)點(diǎn)。從界面經(jīng)驗(yàn)來(lái)看，希望訪問(wèn)速度足夠快，信息更加簡(jiǎn)潔和豐富。

二、電子商務(wù)主頁(yè)UI 設(shè)計(jì)

做為一個(gè)高質(zhì)量的電子商務(wù)主頁(yè)，首先需要有高效全面的產(chǎn)品服務(wù)，然后是視覺(jué)、技術(shù)等方面產(chǎn)品設(shè)計(jì)的成功。這兩者都是相輔相成，缺一不可的。但主要的閃光點(diǎn)還是在于服務(wù)設(shè)計(jì)上。明確掌握潛在對(duì)象用戶(hù)的內(nèi)心需求和企業(yè)本身的經(jīng)營(yíng)需求決定了產(chǎn)品服務(wù)是否成功，以便在網(wǎng)站這個(gè)有限的空間內(nèi)能夠有效地深入融合。為用戶(hù)提供良好的服務(wù)，同時(shí)，給電子商務(wù)企業(yè)帶來(lái)巨大的商業(yè)利益，才是雙方所要達(dá)到的共贏目的。從以下三個(gè)方面?zhèn)鬟_(dá)電子商務(wù)主頁(yè)上的信息：

（一）傳遞品牌價(jià)值

品牌是要在用戶(hù)大腦中構(gòu)建的聯(lián)想信息，其核心價(jià)值是對(duì)用戶(hù)最具吸引力的內(nèi)涵。品牌的核心價(jià)值是通過(guò)電子商務(wù)網(wǎng)站的首頁(yè)傳達(dá)給用戶(hù)的。品牌的感染力在大多數(shù)情況下是無(wú)形的，是一種長(zhǎng)期持久的效果。電子商務(wù)網(wǎng)站的品牌形象設(shè)計(jì)不是短期效益，而是關(guān)注用戶(hù)對(duì)品牌的長(zhǎng)期滿(mǎn)意度、信任和忠誠(chéng)度。首先，我們需要設(shè)計(jì)好的品牌形象，使用戶(hù)能夠?qū)ζ放朴杏洃淈c(diǎn)，有良好的印象和心理認(rèn)知，或者可以將其具體化，賦予容易聯(lián)想的標(biāo)志。一個(gè)簡(jiǎn)單明了的網(wǎng)站名稱(chēng)，通常在網(wǎng)站的左上角。重新設(shè)計(jì)品牌的經(jīng)營(yíng)范圍和面臨的消費(fèi)群體，讓用戶(hù)知道品牌的定位和特點(diǎn)，設(shè)計(jì)主要的導(dǎo)航欄、詳細(xì)的分類(lèi)導(dǎo)航。然后，可以傳達(dá)品牌口碑、其他用戶(hù)的評(píng)價(jià)和反饋，展示整個(gè)社會(huì)的排名和獲獎(jiǎng)稱(chēng)號(hào)、交易后的好評(píng)。最后，品牌的使用安全性讓用戶(hù)對(duì)品牌產(chǎn)生信任感，通過(guò)展示、經(jīng)營(yíng)等各種證書(shū)、交易記錄、保障服務(wù)實(shí)現(xiàn)。

（二）流量引導(dǎo)指南

用戶(hù)進(jìn)入電子商務(wù)網(wǎng)站只是使用電子商務(wù)網(wǎng)站的開(kāi)始，如何引導(dǎo)用戶(hù)理解和體驗(yàn)后期的服務(wù)才是主頁(yè)設(shè)計(jì)的重要組成部分。電商網(wǎng)站的轉(zhuǎn)換設(shè)計(jì)沒(méi)有統(tǒng)一的設(shè)計(jì)方案，必須根按照具體要求進(jìn)行設(shè)計(jì)。

（三）促銷(xiāo)引流指南

營(yíng)銷(xiāo)部門(mén)希望能盡快銷(xiāo)售堆積的產(chǎn)品，或通過(guò)促銷(xiāo)提高新產(chǎn)品知名度的渠道。而用戶(hù)希望在促銷(xiāo)活動(dòng)時(shí)能找到自己需要的各種便宜又好的產(chǎn)品，二者各取所需，有著兩種截然不同的心理。典型的促銷(xiāo)策略如下：一是國(guó)慶節(jié)、春節(jié)等節(jié)日；二是活動(dòng)類(lèi)促銷(xiāo)(如會(huì)員優(yōu)惠、新產(chǎn)品上市等)、地區(qū)性人氣商品。

三、電子商務(wù)產(chǎn)品網(wǎng)頁(yè)UI 設(shè)計(jì)中的色彩應(yīng)用思路

（一）主體顏色選擇

電子商務(wù)產(chǎn)品網(wǎng)頁(yè)UI 顏色設(shè)計(jì)應(yīng)與網(wǎng)站的主題、服務(wù)對(duì)象等相結(jié)合，選擇適當(dāng)?shù)闹黧w顏色。主體的顏色在UI 顏色選擇中作為主要的參照物，其他顏色需要相應(yīng)調(diào)整。因此，設(shè)計(jì)師在決定主體顏色時(shí)，需要從觀眾體驗(yàn)、產(chǎn)品特征等方面選擇電子商務(wù)網(wǎng)站的代表性主體顏色。輔助顏色的選擇主要是為了主體顏色。電子商務(wù)網(wǎng)站的UI 顏色方案根據(jù)網(wǎng)站界面的需要選擇適當(dāng)?shù)妮o助顏色，突出主體顏色。

（二）標(biāo)志的配色

電子商務(wù)網(wǎng)站UI 界面元素較多，對(duì)不同元素進(jìn)行顏色選擇，印刷廠專(zhuān)門(mén)處理。標(biāo)志是網(wǎng)站的靈魂，也是網(wǎng)站的名片。Logo 必須在視覺(jué)上有沖擊力，獨(dú)特而具有代表性，并且，能夠與電子商務(wù)產(chǎn)品相關(guān)聯(lián)。在標(biāo)志配色體系中，標(biāo)志的著色設(shè)計(jì)要在標(biāo)志突出的同時(shí)，增強(qiáng)標(biāo)志的吸引力，吸引觀眾的眼球。電子商務(wù)網(wǎng)站標(biāo)志配色設(shè)計(jì)要注意三點(diǎn)：第一，顏色與人的情緒息息相關(guān)，所以色彩要充滿(mǎn)感情。暖色調(diào)的象征制造可以讓觀眾興奮。明度和純度顏色是激動(dòng)人心的顏色(如橙色、紅色等)來(lái)激發(fā)公眾的興趣。其次，顏色必須有明亮的樂(lè)趣。中度高亮度、純樸的色彩往往有清晰明快的感覺(jué)，能給觀眾帶來(lái)愉快的情感體驗(yàn)；第三，顏色必須有進(jìn)步感。暖色和亮色融合，可以想象在人的視網(wǎng)膜前端，有擴(kuò)大的視覺(jué)感覺(jué)。冷色、低光度的顏色，在視網(wǎng)膜的背面區(qū)域能感受到收縮感、后退感。高質(zhì)量的網(wǎng)頁(yè)配色設(shè)計(jì)，會(huì)使用戶(hù)賞心悅目，逐步帶著用戶(hù)暢游在網(wǎng)頁(yè)中。因此，電子商務(wù)網(wǎng)站標(biāo)識(shí)在顏色選擇上要選擇前進(jìn)的顏色，加強(qiáng)對(duì)淘寶、當(dāng)當(dāng)網(wǎng)、唯品會(huì)等觀眾視覺(jué)的沖擊。

（三）導(dǎo)航的配色

導(dǎo)航是電子商務(wù)網(wǎng)站用戶(hù)界面設(shè)計(jì)的重要組成部分，它使用戶(hù)能夠通過(guò)一個(gè)清晰、有序、快速的顏色系統(tǒng)輕松地查找事物，從而提高電子商務(wù)網(wǎng)站使用的黏度。根據(jù)公眾訪問(wèn)的電子商務(wù)平臺(tái)統(tǒng)計(jì)，電子商務(wù)網(wǎng)站的瀏覽設(shè)計(jì)應(yīng)盡可能使用一級(jí)分類(lèi)，以便公眾能夠直接識(shí)別產(chǎn)品信息，找到合適的位置。同時(shí)，在設(shè)計(jì)導(dǎo)航顏色時(shí)，電子商務(wù)網(wǎng)站應(yīng)根據(jù)不同的產(chǎn)品類(lèi)型選擇具有高對(duì)比差的這種不同顏色，提高導(dǎo)航清晰度，使觀眾能夠快速分析和選擇導(dǎo)航信息。

（四）搜索區(qū)域的配色

搜索領(lǐng)域是電商網(wǎng)站的重要功能之一，主要是為了滿(mǎn)足迅速找到各類(lèi)商品的客戶(hù)的需求。搜索區(qū)域通常在電子商務(wù)網(wǎng)站的結(jié)構(gòu)布局中占據(jù)重要位置，例如，頁(yè)面頂部、右側(cè)等。對(duì)于搜索區(qū)域的顏色設(shè)計(jì)，應(yīng)該優(yōu)先考慮將周?chē)念伾艨?，或者使用周?chē)念伾珌?lái)強(qiáng)調(diào)搜索區(qū)域。例如，搜索輸入框呈淺灰色，隨著時(shí)間的推移而變化，同時(shí)，還包含常用的、引導(dǎo)式的搜索術(shù)語(yǔ)，以便于公眾搜索。搜索框的左側(cè)位于產(chǎn)品類(lèi)別下拉菜單的中心，可劃分產(chǎn)品類(lèi)別并減少類(lèi)別之間的干擾。

（五）強(qiáng)調(diào)局部區(qū)域的配色

在電子商務(wù)網(wǎng)站設(shè)計(jì)中，對(duì)強(qiáng)調(diào)地區(qū)的運(yùn)用更為廣泛。電商產(chǎn)品UI 設(shè)計(jì)的顏色方案要強(qiáng)調(diào)對(duì)強(qiáng)調(diào)區(qū)域的顏色選擇。例如，推出打折、促銷(xiāo)、秒殺、限時(shí)搶購(gòu)等領(lǐng)域時(shí)，會(huì)對(duì)顏色選擇產(chǎn)生更加視覺(jué)化的影響，成為電子商務(wù)網(wǎng)站的視覺(jué)亮點(diǎn)，引起觀眾的關(guān)注。有時(shí)還可以使用動(dòng)態(tài)的效果，加強(qiáng)視覺(jué)上的沖擊。另外，可以通過(guò)對(duì)主打商品的界面設(shè)計(jì)，突出特色，在該區(qū)域的色彩設(shè)計(jì)上更傾向于色彩明度高，飽和度高的暖色系。當(dāng)然也不乏需要為特殊節(jié)日考慮，選用季節(jié)色系，例如，3 月偏女性色彩的柔和色調(diào)，4月踏青主題選用清新、活潑的綠色系。

四、結(jié)論

如今電子商務(wù)不斷改進(jìn)升級(jí)，電子商務(wù)網(wǎng)站的設(shè)計(jì)也要展示新的東西，與時(shí)俱進(jìn)。不斷了解企業(yè)和用戶(hù)的需求，在掌握電子商務(wù)主頁(yè)設(shè)計(jì)的基礎(chǔ)上，通過(guò)UI 設(shè)計(jì)更多個(gè)性化、有價(jià)值的電子商務(wù)主頁(yè)，推動(dòng)電子商務(wù)行業(yè)的發(fā)展。