世界上有太多難看的產品界面讓人精神崩潰,儘管我們在心底里已經無數遍地對產品設計師表示了鄙視,卻只能硬着頭皮使用他們。這僅僅是因為用戶沒有其他選擇而已。

總有一天,會有更好用好看的競品出現。到那時候再改進,恐怕為時已晚。

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

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

刪除混亂元素很簡單,觀察設計方案中的每一個細節,想一想為什麼需要它。它能提供什麼重要的支持,或者重要的信息?先把它從方案中刪掉,如果發現方案中沒它不行,再把它拿回來。

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

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

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

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

2、盡可能使用強調。

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

3、控制信息的層次

如果頁面中的信息層次超過3或3個層次,就會讓用戶迷惑。比如,要少用数字、大字體或粗字體。

最後總共不超過三個層次:標題、副標題、正文。

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

我們再來看看國內一些新聞網站的首頁

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

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

PS:做產品不應該是看着別人有什麼自己就抄過來。這樣的做法毫無意義。多思考自己的產品風格和定位才是正途。

4、減少元素的變化。

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

某音樂APP的首頁有七個區塊(數量太多)。最後一個區塊已經被擠到屏幕的最下方去了,並且與菜單欄重疊。如果用戶不滑動屏幕,就很難點擊到這項內容。

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

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

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

再來看另一款小眾獨立音樂APP”落網”

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

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

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

優酷APP的首頁推薦由兩個部分組成:上半部分的滑塊显示近一段時間以來的推薦,下半部分的區塊則显示最近的熱門視頻。很清楚,對吧。

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

電台節目和歌單推薦混雜在一起,既降低了尋找歌單的用戶的效率,又降低了尋找電台的用戶的效率。分開显示會好很多。

PS:作者無意抹黑這款產品,只是它的界面實在讓我想吐槽。。。。

結語

產品呈現給用戶的視覺效果真的會影響人們對這款產品的評價。

如果可以的話,多多關注界面。讓你的產品更上一層樓吧!

 

本文由 @舟行加勒比(微信公眾號:youciwanghai) 原創發佈於人人都是產品經理 ,未經許可,禁止轉載。