怎樣從視覺(jué)布局和圖片設(shè)計(jì)上提升網(wǎng)站用戶體驗(yàn)

時(shí)間：2023-02-02 06:52:01 | 來(lái)源：電子商務(wù)

時(shí)間：2023-02-02 06:52:01 來(lái)源：電子商務(wù)

目前網(wǎng)絡(luò)上關(guān)于網(wǎng)站視覺(jué)布局與用戶體驗(yàn)方面的文章，基本上都是譯自國(guó)外，以國(guó)外的網(wǎng)站作例子。雖然洋貨是我們的榜樣，無(wú)論視覺(jué)前瞻性還是整體、細(xì)節(jié)等，都非常精妙與講究，但是不得不說(shuō)，國(guó)內(nèi)與國(guó)外，無(wú)論是互聯(lián)網(wǎng)大環(huán)境還是用戶的使用習(xí)慣、審美習(xí)慣方面均有著非常度多的不同，所以這些譯文的參考性也會(huì)打一些折扣。

本人本身是做設(shè)計(jì)的，同時(shí)喜歡在網(wǎng)上做一些各方面的觀察研究與嘗試，很多網(wǎng)上項(xiàng)目都嘗試過(guò)，也得到不少收益和收獲。這一兩年鉆研威客、網(wǎng)賺類項(xiàng)目比較多一點(diǎn)?；旧纤兄嚓P(guān)網(wǎng)站都嘗試操作過(guò)，由于職業(yè)病，也喜歡從網(wǎng)站本身的界面設(shè)計(jì)、流程設(shè)計(jì)等等方面對(duì)網(wǎng)站進(jìn)行一些研究。在去年的時(shí)候，偶然接觸到一個(gè)網(wǎng)站：多寶趣，立即被吸引了。立即注冊(cè)為用戶，已然至今。關(guān)于網(wǎng)站其它盈利模式、營(yíng)銷等等方面今天就先不說(shuō)了，剛才說(shuō)了，這篇文章主要來(lái)自于我的職業(yè)病：設(shè)計(jì)。在我看來(lái)，縱觀類似網(wǎng)站，多寶趣無(wú)論是從界面視覺(jué)設(shè)計(jì)、UI、整體規(guī)劃、流程設(shè)計(jì)、乃至圖片設(shè)計(jì)等等細(xì)節(jié)，都是這個(gè)業(yè)內(nèi)一流的。我們主要就來(lái)聊聊這個(gè)網(wǎng)站的設(shè)計(jì)，主要涉及到web網(wǎng)站的易用性、用戶體驗(yàn)，及轉(zhuǎn)化率等方面話題。走起!

一、清晰、簡(jiǎn)明的頂部菜單設(shè)計(jì)：

清晰、簡(jiǎn)明的頂部菜單，可以在第一時(shí)間告訴用戶網(wǎng)站是干什么的。例如多寶趣的頂部菜單，你一看到，直接知道了該網(wǎng)站可以干3件事情：購(gòu)物、奪寶、賺錢。就算可能在一些具體功能上用戶還需要繼續(xù)研究，但是最起碼的功能，用戶已經(jīng)非常直觀的了解了。

注意，這是最主要的劃分，大家都知道，主業(yè)務(wù)下面還有分業(yè)務(wù)，那么菜單也是一樣。多寶趣采用了鼠標(biāo)移上的方式，很直觀的展示了下層功能：

由于多寶趣的奪寶與賺錢功能眾多，所以需要較大的面積來(lái)展示?？赡苁菫榱双@得更好的視覺(jué)效果，多寶趣采用了60X60的較大圖標(biāo)，這也造成無(wú)法在菜單區(qū)域展示所有子功能，所以在右側(cè)加上了下拉滾動(dòng)條。就這一點(diǎn)來(lái)說(shuō)略有瑕疵。上次我與多寶趣的客服交流，她說(shuō)正在修改這里的呈現(xiàn)方式，希望可以看到更好的呈現(xiàn)效果。

多寶趣的功能確實(shí)太豐富了。在不影響核心業(yè)務(wù)展示的情況下，網(wǎng)站采用了一個(gè)“+”更多菜單，鼠標(biāo)移上，會(huì)展示更多豐富的功能。由于該菜單位置顯著，所以并不會(huì)太多損失用戶關(guān)注度。可以說(shuō)在主次平衡上做得非常好。

而這一塊也非常巧妙，在非常狹窄的一條上，集成了多功能內(nèi)容搜索與不同類別的公告展示功能。恰當(dāng)?shù)南嘛@菜單，極大的節(jié)省了空間。

二、簡(jiǎn)明有序、富有節(jié)奏感的整體布局和細(xì)節(jié)：

全尺寸通欄大圖，滾動(dòng)幻燈焦點(diǎn)。按鈕直接呈現(xiàn)標(biāo)題，讓用戶一目了然，減少了一個(gè)鼠標(biāo)移上才能查看內(nèi)容的操作。易用性加分。

這樣的步驟及功能引導(dǎo)圖，在很多類似網(wǎng)站上都有，不過(guò)多寶趣在設(shè)計(jì)上更勝一籌：簡(jiǎn)約美觀，同時(shí)注重圖標(biāo)設(shè)計(jì)的細(xì)節(jié)，讓用戶能感受到是花了心思的。

左側(cè)是最新最熱的奪寶活動(dòng)商品展示，注意”熱度“圖標(biāo)會(huì)隨著數(shù)值變化而變化顏色，很用心的細(xì)節(jié)。右側(cè)是網(wǎng)站推薦的目前最熱的奪寶與賺錢的活動(dòng)。圖片本身的設(shè)計(jì)一看就是經(jīng)驗(yàn)豐富的設(shè)計(jì)師制作。值得一說(shuō)的是，一定要確保圖片內(nèi)容簡(jiǎn)明扼要。簡(jiǎn)單明確的信息，可以促進(jìn)用戶點(diǎn)擊欲望。

首頁(yè)的這塊，呈現(xiàn)了多寶趣網(wǎng)站兩大功能板塊：奪寶與賺錢。簡(jiǎn)明扼要的文字介紹下是明確的按鈕。下面動(dòng)態(tài)展示了最新的相關(guān)信息，可以直觀的引導(dǎo)用戶點(diǎn)擊按鈕，進(jìn)入下一步流程。什么是轉(zhuǎn)化?這就是轉(zhuǎn)化。

介紹文字看起來(lái)很簡(jiǎn)單，但還是非常直觀的表明了傳達(dá)訴求。清新亮麗的最新潮流圖片，是不是能夠吸引用戶的好奇呢?視覺(jué)吸引，然后下一步引入業(yè)務(wù)，這是最通行的聰明做法。簡(jiǎn)單而有效。這一塊多寶趣也是有細(xì)節(jié)處理的：鼠標(biāo)移上圖片后，就會(huì)出現(xiàn)商品的詳細(xì)信息。

大家注意到?jīng)]有，上面一大塊通欄整體白色元素之下，緊接著是3塊分隔開(kāi)的、有著絢麗色彩的廣告圖片。這是隨心而為嗎?不是的。在設(shè)計(jì)上，這就叫”節(jié)奏”：從白色到彩色的節(jié)奏、從整體到分割的節(jié)奏、從大塊到小塊的節(jié)奏。界面有了視覺(jué)的節(jié)奏，才會(huì)消除視覺(jué)疲勞感，從而確保持續(xù)的保留用戶的瀏覽興趣。看起來(lái)很簡(jiǎn)單?沒(méi)錯(cuò)，但是真正做好不容易。

由于社區(qū)功能相對(duì)來(lái)說(shuō)要次要一些，所以多寶趣將其放在了網(wǎng)站首頁(yè)較下方的位置。展示用戶最感興趣的內(nèi)容，這點(diǎn)非常重要。多寶趣展示了”曬單“(就是用戶獲得寶貝后曬出收到的商品)、用戶最新的”說(shuō)說(shuō)“(類似于QQ的說(shuō)一句)、以及最新的和最活躍的用戶展示。分析一下，曬單，可以直接引導(dǎo)用戶了解過(guò)往的訂單信息，以展示網(wǎng)站的誠(chéng)信，為引導(dǎo)用戶進(jìn)行下一步操作作準(zhǔn)備，而展示用戶的動(dòng)態(tài)、新用戶等情況，為的是展示網(wǎng)站的人氣。每一塊內(nèi)容，都是有其述求的。

    很多網(wǎng)站并不注重網(wǎng)站底部的設(shè)計(jì)。認(rèn)為這塊位置不是很重要，關(guān)注度不高。實(shí)際上，做好每一個(gè)地方的細(xì)節(jié)，在提升用戶體驗(yàn)上都非常重要。雖然多寶趣的底部展示內(nèi)容中規(guī)中矩，與類似網(wǎng)站展示的內(nèi)容差不多，但多寶趣也在設(shè)計(jì)上花了足夠功夫：1、采用整體深灰的色調(diào)，確保了整體感，不至于太花哨，喧賓奪主(因?yàn)檫@是通用底部，而底部?jī)?nèi)容又較多，如果全采用彩色的話，會(huì)極大的影響用戶關(guān)注點(diǎn));2、整體有序的排列，確保視覺(jué)感受的舒適;設(shè)計(jì)感及專業(yè)感很強(qiáng)的圖標(biāo)設(shè)計(jì)，確保了用戶的信賴感。

以上，就是對(duì)多寶趣網(wǎng)站首頁(yè)的視覺(jué)設(shè)計(jì)分析。要實(shí)際看看網(wǎng)站的，可以看[這里]。在后面，我還會(huì)陸續(xù)講解這個(gè)網(wǎng)站其它頁(yè)面的視覺(jué)設(shè)計(jì)及流程設(shè)計(jì)方面的東東，分析一下，一個(gè)好的網(wǎng)站視覺(jué)設(shè)計(jì)及，是如何提升用戶體驗(yàn)的。

(待續(xù))