“好看的界面”與“難看的界面”

4 評論 16216 瀏覽 267 收藏 10 分鐘

世界上有太多難看的產(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)方案中沒它不行,再把它拿回來。

QQ截圖20151123173913

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

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

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

QQ截圖20151122183116

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

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

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

3、控制信息的層次

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

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

QQ截圖20151123200333

QQ截圖20151123200434

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

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

QQ截圖20151123175530

在作者看來,國內(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)品的易用性。

QQ截圖20151123170735

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

QQ截圖20151123155832

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

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

QQ截圖20151123163629

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

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

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

QQ截圖20151123172804

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

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

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

QQ截圖20151123173159

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)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 網(wǎng)易云 是公認(rèn) 最屌的 音樂app 請不要隨便吐槽。。。我不覺得大部分用戶當(dāng)然知道“私人FM”和“個性化推薦”是什么意思。電臺節(jié)目和歌單推薦混雜在一起這一點在安卓已經(jīng)做好了。而且電臺正好是網(wǎng)易的強項?。?!

    來自上海 回復(fù)
    1. 我從開始用網(wǎng)易音樂就覺得交互做的很平庸,但是社區(qū)運營的很好,這才是它的核心競爭力

      來自浙江 回復(fù)
  2. windows phone …..

    來自北京 回復(fù)
  3. ??

    來自廣東 回復(fù)