如何通過歸整設(shè)計(jì)來提升用戶體驗(yàn)

為家中的衣櫥或是儲(chǔ)藏室進(jìn)行物理意義上的清掃早已是老生常談，然而近些年來，一個(gè)十分新穎的概念涌現(xiàn)出來，這便是歸整設(shè)計(jì)。在互聯(lián)網(wǎng)領(lǐng)域，歸納整理能幫助提高網(wǎng)站的實(shí)用性以及用戶體驗(yàn)，以下是對設(shè)計(jì)進(jìn)行整理的四個(gè)建議。

01.簡化標(biāo)語

追溯至1997年，尼爾森諾曼集團(tuán)進(jìn)行了一項(xiàng)研究，了解用戶如何在網(wǎng)上閱讀。當(dāng)然，讓我們先對“閱讀”這個(gè)詞存疑，事實(shí)上，絕大多數(shù)人是通過快速瀏覽的方式獲取頁面上的信息。然而，有許多網(wǎng)站卻充斥著無關(guān)緊要的文字，雜亂和間接的重復(fù)司空見慣。于是，這便為縮減單詞數(shù)量以簡化屏幕上的內(nèi)容提供可能。

刪掉不必要的單詞，縮短流水句，移除冗余的文段，確保每個(gè)段落只有一個(gè)中心思想，對于快速瀏覽的讀者來說，這些都不失為一種極佳的寫作方式。最后在搭建文章架構(gòu)時(shí)，尤其是對于長篇大論而言，應(yīng)采用倒金字塔的結(jié)構(gòu) – 從結(jié)論開始，隨著內(nèi)容增長來添加更多細(xì)節(jié)。

這是我最為鐘愛的應(yīng)用程序之一，Days，用于事件結(jié)束之前倒計(jì)天數(shù)。在應(yīng)用程序的登錄頁面，幾乎難以見到任何重復(fù)。上面的截圖便來自于登錄頁面的一個(gè)部分，注意極簡的標(biāo)題，讀起來使人十分賞心悅目。

Aiia是一款防水揚(yáng)聲器，登錄頁面頗有種天馬行空之感。盡管精靈古怪，我卻深愛上頁面的簡潔，極盡短小的標(biāo)題讓用戶一眼便可采其大旨。

02.剪除視覺裝飾

說到視覺效果，我們有時(shí)會(huì)為了美觀而畫蛇添足。人皆有愛美之心，這樣的想法雖說是無可厚非，但放到具體實(shí)踐操作上卻經(jīng)常會(huì)過猶不及。這便是我為何提倡省去無關(guān)緊要的裝飾的原因。好在幸運(yùn)的是，即便去掉那些紛繁復(fù)雜的點(diǎn)綴，用戶的體驗(yàn)也基本不會(huì)大打折扣。

我想比較這兩個(gè)網(wǎng)站，VConcept （上圖）和Born（下圖）。

VConcept的頁面內(nèi)容較少，但卻難以理解，幾乎所有的裝飾都對視線形成了干擾。背景中的三角形圖案和移動(dòng)線同時(shí)映入眼簾，副本中存在三種不同樣式的字體 – 純文本和帶有黑色以及金色下劃線的文字，更不必說這節(jié)段落中的徽標(biāo)，這一切也太過分了。?另一邊則是Born的職業(yè)生涯頁面。的確，網(wǎng)站上的文字內(nèi)容較多，但因?yàn)闆]有點(diǎn)綴干擾的緣故，這樣的設(shè)計(jì)也是切實(shí)可行的。

想象一下，如果用單像素邊框?qū)⑦@些職位信息包裹起來，那么將勢必增加快速瀏覽的難度。

03.重復(fù)使用設(shè)計(jì)元素

整合并再次利用重復(fù)的元素，如若文字顏色紛繁，字體和樣式復(fù)雜，必然帶來混亂。重復(fù)使用設(shè)計(jì)元素能使一切變得井然有序，這種有序性將會(huì)為設(shè)計(jì)平添整潔的氣息。有鑒于此，一些經(jīng)驗(yàn)準(zhǔn)則也隨之被總結(jié)出來，比如，“不要使用多于兩到三種以上的字體”，“顏色和元素也是如此”。

如果你在頁面底部放置新聞捕捉部件，那么請確保在所有頁面上都保持一致，否則或許會(huì)為讀者帶來極大困擾。

現(xiàn)在，讓我們一起探討The Business Depot對于顏色的選擇。這是一家面向企業(yè)客戶的IT云產(chǎn)品網(wǎng)站，在主頁上產(chǎn)品頁面和聯(lián)系頁面之間，不同色彩的彩虹被毫無意義地隨意濫用。主頁的設(shè)計(jì)鮮艷得似乎只剩下了顏色，每個(gè)頁面背后仿佛別有洞天，但當(dāng)你點(diǎn)過去，才會(huì)發(fā)現(xiàn)后面其實(shí)根本就空無一物，因?yàn)轭伾母淖冊瓉硎侨Q于你當(dāng)前的所處頁面的。比如說，當(dāng)你轉(zhuǎn)到“關(guān)于”頁面時(shí)，顏色會(huì)變得柔和。當(dāng)你前往“聯(lián)系”頁面時(shí)，會(huì)變得強(qiáng)烈而又鮮艷。這種無謂的變幻，還不如將全部色彩都保持一致要實(shí)用得多。

Prismic使用了過多的色彩，尤其是在博客上，為博文用編寫代碼的方式上色。這么做無異于鋌而走險(xiǎn)，但好在整體配色方案還算較為凝聚。更好的是來自于截圖的貼文中，顏色變?yōu)閱握{(diào)色，僅用藍(lán)色基調(diào)以保持上下文的協(xié)調(diào)一致。如果這個(gè)頁面上的所有內(nèi)容都是不同顏色，必然會(huì)為視覺感受帶來滅頂之災(zāi)。有一點(diǎn)需要指出，主人公臉上的藍(lán)色與徽標(biāo)和CTA按鈕上的藍(lán)色是同一種。正是這種協(xié)調(diào)，讓一切變得干凈整潔起來。

我一直是Lonely Planet的粉絲。網(wǎng)站目前的設(shè)計(jì)風(fēng)格無與倫比，這一切都要?dú)w功于相似的設(shè)計(jì)元素之間得到反復(fù)利用，即是在每個(gè)城市頁面都使用相同的模版以營造共性。Lonely Plant涵蓋內(nèi)容之廣，使其不得不利用模版為讀者簡化閱讀。

04.始終牢記個(gè)別用戶的目標(biāo)

關(guān)于整理的最后一點(diǎn)建議是關(guān)于給定頁面的目的 – 永遠(yuǎn)要從客戶的角度去構(gòu)建目標(biāo)。這樣的例子包括免費(fèi)注冊試用，了解某一篇特定的食譜，或是訂閱接收新聞資訊。如果您正在設(shè)計(jì)新的網(wǎng)站，一定要認(rèn)真思考用戶想要達(dá)成怎樣的目的，切勿在滿足用戶需求的道路上設(shè)置障礙。

始終懷揣堅(jiān)定的目標(biāo)，將有助于排除一切事物的干擾。比如說，如果您希望用戶下載圖書的示例章節(jié)，就避免同時(shí)推廣另一本書，而是直接讓用戶看到下載按鈕。如果是長頁面，則在不同地方重復(fù)展示CTA鏈接。與此同時(shí)，刪除一切和用戶下載試讀片段無關(guān)之內(nèi)容。

現(xiàn)在，讓我們來一起看看移動(dòng)旅行應(yīng)用程序Hitlist。對于用戶來講，最為顯而易見之事便是下載應(yīng)用程序。要達(dá)成這點(diǎn)，有幾種不同的途徑，用戶既可以輸入手機(jī)號(hào)碼獲取文字鏈接，也可以點(diǎn)擊“應(yīng)用商店”的按鈕。當(dāng)然，用戶也可以點(diǎn)擊別處，但頁面的主要焦點(diǎn)卻從不受其他內(nèi)容干擾。

Seedlip是一款不含酒精的烈性酒。網(wǎng)站的視覺風(fēng)格深受我喜愛，在瀏覽時(shí)不會(huì)讓用戶產(chǎn)生無所適從的感覺。整張頁面的CTA鏈接也僅有四枚，其中兩枚是購買按鈕，其余的則是獲取更多信息，以進(jìn)一步說服用戶購買Seedlip。由此可見，只要互不干擾，便可同時(shí)在一張頁面中擁有多個(gè)CTA鏈接。

本篇，描述了四種方式來整理網(wǎng)頁設(shè)計(jì)，此舉意義是為了寄希望于提高用戶體驗(yàn)和實(shí)用性。歸整設(shè)計(jì)其實(shí)并不難，還能極大改善用戶與網(wǎng)站交互的方式。畢竟，實(shí)用性和用戶體驗(yàn)齊頭并進(jìn)，才是網(wǎng)站外觀迫切需要掌握的兩把利刃。

文：Paula Borowska 翻譯：馬克筆設(shè)計(jì)留學(xué)·孫維

首席增長官CGO薦讀增長黑客：

• 《用戶體驗(yàn)的巨大泡沫：從UX到產(chǎn)品設(shè)計(jì)》
• 《高效信息流設(shè)計(jì)，增加用戶留存》
• 《《共鳴：內(nèi)容運(yùn)營方法論》說了些什么？》

更多精彩，關(guān)注：增長黑客（GrowthHK.cn）

增長黑客（Growth Hacker）是依靠技術(shù)和數(shù)據(jù)來達(dá)成各種營銷目標(biāo)的新型團(tuán)隊(duì)角色。從單線思維者時(shí)常忽略的角度和高度，梳理整合產(chǎn)品發(fā)展的因素，實(shí)現(xiàn)低成本甚至零成本帶來的有效增長…