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

時間：2022-07-12 10:45:01 | 來源：建站知識

時間：2022-07-12 10:45:01 來源：建站知識

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

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

一、清晰、簡明的頂部菜單設(shè)計：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(待續(xù))