世界上有太多難看的產(chǎn)品界面讓人精神崩潰，盡管我們?cè)谛牡桌镆呀?jīng)無數(shù)遍地對(duì)產(chǎn)品設(shè)計(jì)師表示了鄙視，卻只能硬著頭皮使用他們。這僅僅是因?yàn)橛脩魶]有其他選擇而已。

總有一天，會(huì)有更好用好看的競品出現(xiàn)。到那時(shí)候再改進(jìn)，恐怕為時(shí)已晚。

刪除視覺混亂的元素意味著人們必須處理的信息內(nèi)容變少了，從而能夠把注意力集中到真正重要的內(nèi)容上。我注意到，用戶口中所說的“干凈”的界面，意思就是其中沒有雜亂元素的界面。

設(shè)計(jì)師Edward Tufte曾在書中談到過要讓“數(shù)據(jù)墨水比”越來越高。換句話說，就是墨水（或像素）不應(yīng)該浪費(fèi)在那些不是內(nèi)容或者重復(fù)的內(nèi)容上。最大化數(shù)據(jù)墨水比例，圖表中的每一點(diǎn)墨水都要有存在的理由，并且這個(gè)理由應(yīng)該總是展示新的信息。應(yīng)用到dashboard，因?yàn)橐话憧偸秋@示在屏幕上，墨水可以換做象素的概念。

刪除混亂元素很簡單，觀察設(shè)計(jì)方案中的每一個(gè)細(xì)節(jié)，想一想為什么需要它。它能提供什么重要的支持，或者重要的信息？先把它從方案中刪掉，如果發(fā)現(xiàn)方案中沒它不行，再把它拿回來。

以下是一些減少視覺混亂的方法：

1、使用空白或輕微的背景色來劃分界面，而不要使用線條。

為什么？因?yàn)榫€條在前景中，而空白和顏色在背景上。前景會(huì)更多地吸引人們的注意力。

把你要呈現(xiàn)給用戶的內(nèi)容放在前景上，分隔頁面與內(nèi)容分類，放在背景就好了。所有東西都放在最前面，用戶會(huì)瘋掉的。

2、盡可能使用強(qiáng)調(diào)。

如果僅加粗就行了，就不必又加粗、又放大、又變成紅色。別用粗黑線，勻稱淺色的線更好

3、控制信息的層次

如果頁面中的信息層次超過3或3個(gè)層次，就會(huì)讓用戶迷惑。比如，要少用數(shù)字、大字體或粗字體。

最后總共不超過三個(gè)層次：標(biāo)題、副標(biāo)題、正文。

紐約時(shí)報(bào)的首頁設(shè)計(jì)十分合理，不同版面的分割簡潔美觀。用戶不會(huì)因?yàn)槊鎸?duì)一大堆信息而感到焦慮。

我們?cè)賮砜纯磭鴥?nèi)一些新聞網(wǎng)站的首頁

在作者看來，國內(nèi)的新聞網(wǎng)站版面設(shè)計(jì)和內(nèi)容大都過于繁雜，無數(shù)信息充斥其中。用戶完全無法找到自己想要的東西，只能到處亂點(diǎn)。這樣做只會(huì)加劇用戶的煩躁感和焦慮感。

這樣的設(shè)計(jì)在過去也許會(huì)為人們所接受，但是在今天，這樣的首頁已經(jīng)完全落伍了。加之國內(nèi)的產(chǎn)品經(jīng)理大多互相“借鑒”，各大門戶網(wǎng)站的首頁如此雷同也就不足為奇了。這實(shí)在是產(chǎn)品設(shè)計(jì)上的一種悲哀。

PS：做產(chǎn)品不應(yīng)該是看著別人有什么自己就抄過來。這樣的做法毫無意義。多思考自己的產(chǎn)品風(fēng)格和定位才是正途。

4、減少元素的變化。

舉個(gè)栗子：如果你要設(shè)計(jì)某個(gè)音樂APP的頁面，可能需要會(huì)一大塊放置熱門專輯封面的區(qū)塊，再加上五個(gè)放置稍微次要一點(diǎn)的專輯封面的區(qū)塊。這時(shí)需要注意的是：“不要讓頁面上出現(xiàn)六塊大小都不同的區(qū)塊。

某音樂APP的首頁有七個(gè)區(qū)塊（數(shù)量太多）。最后一個(gè)區(qū)塊已經(jīng)被擠到屏幕的最下方去了，并且與菜單欄重疊。如果用戶不滑動(dòng)屏幕，就很難點(diǎn)擊到這項(xiàng)內(nèi)容。

另一方面，不知道為什么，產(chǎn)品右側(cè)的屏幕卻完全被舍棄掉了。與其死命地去搶屏幕底部的那一點(diǎn)空間，不如考慮考慮如何把屏幕右側(cè)的空間利用起來。更能提高產(chǎn)品的易用性。

接下來是一個(gè)比較成功了例子：

Nokia Mix Radio是一款非常漂亮的音樂APP。它的首頁給人一種獨(dú)特的美感。由三種不同大小的區(qū)塊組成，給予用戶播放進(jìn)度的反饋。并且隱藏了頁面頂部手機(jī)信號(hào)、電池電量等圖標(biāo)，整個(gè)頁面簡潔易用。音樂的圖標(biāo)顯示又與Windows Phone系統(tǒng)整體的設(shè)計(jì)語言相互呼應(yīng)，不失為一款出色的APP。

再來看另一款小眾獨(dú)立音樂APP”落網(wǎng)”

它將用戶的個(gè)人中心分成了四個(gè)區(qū)塊（一個(gè)合適的數(shù)量），點(diǎn)擊音樂期刊，進(jìn)入音樂列表的同時(shí)軟件的背景也變成相應(yīng)期刊的封面（給予視覺反饋）。一塊屏幕正好顯示三組期刊。提供的信息正好是用戶所能接受的量，整個(gè)APP的設(shè)計(jì)簡潔大方，可用性也非常強(qiáng)。（更重要的是音樂好聽(～￣▽￣)～）

PS：“落網(wǎng)”的開發(fā)者僅僅是三個(gè)普通的獨(dú)立音樂愛好者而已?？恐鴮?duì)音樂的熱情和支持者的幫助，起起落落近13年。開發(fā)出如此出色的產(chǎn)品和網(wǎng)站，令手握巨量資源卻開發(fā)不出一款令人滿意的應(yīng)用的公司汗顏。至少，落網(wǎng)告訴了我們一個(gè)道理：掌握的資源并不是決勝的關(guān)鍵，存在人心中的信念和決心更能決定一個(gè)人的作為！

5、整個(gè)界面盡量用一種樣式顯示，三種或四種太花哨了。

優(yōu)酷APP的首頁推薦由兩個(gè)部分組成：上半部分的滑塊顯示近一段時(shí)間以來的推薦，下半部分的區(qū)塊則顯示最近的熱門視頻。很清楚，對(duì)吧。

而某云音樂的產(chǎn)品則推薦頁面則顯得有一些混亂，三種元素略顯花哨。中間的“私人FM”和“個(gè)性化推薦”如果采取橫向排列的方式會(huì)減輕擁擠感，下方的功能說明也顯得雞肋。用戶當(dāng)然知道“私人FM”和“個(gè)性化推薦”是什么意思，刪掉這兩句話反而可以讓產(chǎn)品更加簡潔。

電臺(tái)節(jié)目和歌單推薦混雜在一起，既降低了尋找歌單的用戶的效率，又降低了尋找電臺(tái)的用戶的效率。分開顯示會(huì)好很多。

PS:作者無意抹黑這款產(chǎn)品，只是它的界面實(shí)在讓我想吐槽。。。。

結(jié)語

產(chǎn)品呈現(xiàn)給用戶的視覺效果真的會(huì)影響人們對(duì)這款產(chǎn)品的評(píng)價(jià)。

如果可以的話，多多關(guān)注界面。讓你的產(chǎn)品更上一層樓吧！

本文由 @舟行加勒比（微信公眾號(hào)：youciwanghai） 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。