世界上有太多難看的產(chǎn)品界面讓人精神崩潰，盡管我們在心底里已經(jīng)無數(shù)遍地對產(chǎn)品設(shè)計師表示了鄙視，卻只能硬著頭皮使用他們。這僅僅是因為用戶沒有其他選擇而已。

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

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

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

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

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

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

為什么？因為線條在前景中，而空白和顏色在背景上。前景會更多地吸引人們的注意力。

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

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

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

3、控制信息的層次

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

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

紐約時報的首頁設(shè)計十分合理，不同版面的分割簡潔美觀。用戶不會因為面對一大堆信息而感到焦慮。

我們再來看看國內(nèi)一些新聞網(wǎng)站的首頁

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

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

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

4、減少元素的變化。

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

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

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

接下來是一個比較成功了例子：

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

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

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

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

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

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

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

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

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

結(jié)語

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

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

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