蘋(píng)果“Mac之父”Jef Raskin曾經(jīng)說(shuō)過(guò)：“對(duì)于消費(fèi)者而言，界面就是產(chǎn)品?！苯缑媸怯脩?hù)體驗(yàn)我們產(chǎn)品最直觀的接觸。把界面做好，將極大的提高用戶(hù)使用我們產(chǎn)品的愉悅感。所以我們長(zhǎng)期以來(lái)都在不斷追求界面設(shè)計(jì)的進(jìn)步，以期在眾多的相似產(chǎn)品中脫穎而出。下面我將通過(guò)對(duì)目前排名比較靠前的幾家音樂(lè)網(wǎng)站界面做一些簡(jiǎn)單的分析，闡述一些我對(duì)于交互設(shè)計(jì)的感悟。

站長(zhǎng)網(wǎng)排名前三的國(guó)內(nèi)音樂(lè)網(wǎng)站分別是：百度音樂(lè)，蝦米音樂(lè)，以及音悅臺(tái)，我將從頁(yè)面的簡(jiǎn)潔性，美學(xué)性，色彩搭配以及細(xì)節(jié)處理幾個(gè)方面進(jìn)行分析。

百度音樂(lè)：

簡(jiǎn)潔性：★★

頁(yè)面過(guò)多的不必要的內(nèi)容堆砌，例如客戶(hù)端的二維碼，中間的廣告以及百度搜索框，使整個(gè)頁(yè)面給人雜亂的感覺(jué)。過(guò)多的文字堆砌而成的音樂(lè)分類(lèi)，似乎還停留在傳統(tǒng)網(wǎng)頁(yè)的水準(zhǔn)上，使得界面顯得很密集。

美學(xué)性：★★★

頁(yè)面使用了黃金分割的布局結(jié)構(gòu)，也采用了現(xiàn)在十分流行的扁平化設(shè)計(jì)，加上推薦音樂(lè)的小動(dòng)效，美學(xué)性倒也有幾分講究。

色彩搭配：★★

小編并沒(méi)有看出有什么明顯的色彩搭配設(shè)計(jì)，主要是契合百度整個(gè)色彩的調(diào)調(diào)。

細(xì)節(jié)處理：★★

小編并沒(méi)有發(fā)現(xiàn)什么特別好的細(xì)節(jié)處理，百度推廣無(wú)處不在倒是真是讓小編很反感。

蝦米音樂(lè)：

簡(jiǎn)潔性：★★★

蝦米音樂(lè)相比百度音樂(lè)來(lái)說(shuō)沒(méi)有一堆文字的堆砌，密集感沒(méi)有了。色塊與色塊之間通過(guò)留白的方式進(jìn)行區(qū)分，效果還是很不錯(cuò)的。但是色塊偏小，色塊較多，沒(méi)有一種大氣簡(jiǎn)約的感覺(jué)。

美學(xué)性：★★★★

蝦米音樂(lè)也是使用的黃金分割的布局結(jié)構(gòu)，集中在屏幕中間兩邊留白，主要是這樣可以集中用戶(hù)的視覺(jué)，抓住焦點(diǎn)?？ㄆ降纳珘K分布很符合現(xiàn)在的流行趨勢(shì)，也是現(xiàn)在最重要的模塊設(shè)計(jì)思想之一。

色彩搭配：★★★★

頁(yè)面雖然沒(méi)有大面積使用橙色，但是整個(gè)頁(yè)面給人的感覺(jué)確實(shí)以暖色調(diào)為主，人們習(xí)慣先入為主，在顏色的整體性上面還算是做得不錯(cuò)的。橙色的波長(zhǎng)居于紅和黃之間，是十分活潑的光輝色彩，是最暖的色彩，給人以華貴而溫暖、興奮而熱烈的感覺(jué)，應(yīng)用于音樂(lè)網(wǎng)站，還是會(huì)比較迎合用戶(hù)的心情的。

細(xì)節(jié)處理：★★★

界面是產(chǎn)品與用戶(hù)的交互，細(xì)節(jié)是能夠很打動(dòng)用戶(hù)的，蝦米音樂(lè)有一個(gè)細(xì)節(jié)我很喜歡。

今日音樂(lè)人這個(gè)小卡片的形式非常的俏皮可愛(ài)，每一天的圖片都處理得非常精美，感覺(jué)就像蝦米音樂(lè)每一天都送給你一張漂亮的明信片一樣?！奥?tīng)完吱一聲”，有沒(méi)有萌萌噠。

音悅臺(tái)：

簡(jiǎn)潔性：★★★★★

音悅臺(tái)的界面設(shè)計(jì)算是國(guó)內(nèi)設(shè)計(jì)得比較好的。一張大圖作為背景，整個(gè)界面顯得十分的簡(jiǎn)潔，不僅具有很強(qiáng)的視覺(jué)沖擊力，還對(duì)網(wǎng)頁(yè)的內(nèi)容作了非常好的補(bǔ)充，而大背景這種設(shè)計(jì)手法在國(guó)外的網(wǎng)站運(yùn)用是很普遍的。頁(yè)面通過(guò)留白的方式區(qū)分板塊與板塊，顯得很干凈

美學(xué)性：★★★★

垂直滾動(dòng)式的頁(yè)面展現(xiàn)方式，用戶(hù)在使用的時(shí)候很方便，這迎合了移動(dòng)端的發(fā)展，同時(shí)在美學(xué)上也有很好的表達(dá)。整個(gè)界面渾然一體，從上到下保持著一樣的風(fēng)格，每一個(gè)板塊分類(lèi)也做得很分明，具有相當(dāng)好的一致性和整體性。這樣的設(shè)計(jì)能夠讓用戶(hù)對(duì)你的網(wǎng)站印象深刻，甚至不需要刻意去記憶，我們就能夠記住音悅臺(tái)的網(wǎng)頁(yè)結(jié)構(gòu)是怎么樣的，完美的塑造了品牌效應(yīng)。

色彩搭配：★★★★

黑色和綠色搭配的色調(diào)設(shè)計(jì)。綠色是柔美的自然之色，黑色是沉穩(wěn)之色，兩者結(jié)合網(wǎng)站的色調(diào)顯得穩(wěn)重而柔美，清新而高貴。讓用戶(hù)有一種平和的心態(tài)，很寧?kù)o，很舒適。

細(xì)節(jié)處理：★★★★★

萌萌噠的直到頂部設(shè)計(jì)

因?yàn)槭遣捎玫拇怪钡木W(wǎng)站分布結(jié)構(gòu)，所以用戶(hù)可能會(huì)下拉到很下面，在下拉到一定位置的時(shí)候這個(gè)可愛(ài)的小吉祥物就會(huì)出現(xiàn)啦，我們?cè)谛枰臅r(shí)候請(qǐng)求它的幫助就能夠立即回到頂部，是不是超級(jí)可愛(ài)呢？

用戶(hù)體驗(yàn)極好的登錄驗(yàn)證碼

http://www.geetest.com/

音悅臺(tái)使用的是近段時(shí)間比較火的極驗(yàn)驗(yàn)證推出的滑動(dòng)驗(yàn)證碼，用戶(hù)只需要拖動(dòng)滑塊完成拼圖就可以了，驗(yàn)證完成時(shí)間只需要不到兩秒。不僅美觀而且方便的極驗(yàn)驗(yàn)證碼是不是顯得音悅臺(tái)對(duì)待用戶(hù)的心格外真誠(chéng)呢？

通過(guò)上面的分析，小編給大家總結(jié)一下幾點(diǎn)：

1. 如何能夠設(shè)計(jì)出簡(jiǎn)潔精煉的網(wǎng)頁(yè)呢，采用現(xiàn)在流行的扁平化設(shè)計(jì)，通過(guò)簡(jiǎn)單的圖形，文字和顏色的組合，去除冗余厚重而繁雜的裝飾，來(lái)達(dá)到直觀而簡(jiǎn)潔的設(shè)計(jì)效果。例如我們可以在網(wǎng)站使用大背景，不僅能夠達(dá)到很絢麗的效果，如果圖片能夠選取的好還能夠非常準(zhǔn)確而深刻的向你的用戶(hù)表達(dá)網(wǎng)站的主題。大標(biāo)題也是一個(gè)不錯(cuò)的選擇，簡(jiǎn)單而大氣的文字效果，能夠集中用戶(hù)的注意力，同時(shí)這樣并不會(huì)讓你的網(wǎng)站看起來(lái)密密麻麻的。
2. 卡片的模塊表達(dá)方式似乎是現(xiàn)在非常受歡迎的一種，這要得益于移動(dòng)互聯(lián)網(wǎng)的普及。卡片式設(shè)計(jì)能夠讓我們的網(wǎng)站更加有序，圖片的放置不是凌亂的而是整齊有序的，這樣也使得我們網(wǎng)站的易讀性增強(qiáng)了，用戶(hù)可以通過(guò)瀏覽圖片很容易找到他們喜歡的內(nèi)容。通過(guò)研究發(fā)現(xiàn)人們?cè)跒g覽網(wǎng)頁(yè)的時(shí)候更加喜歡圖片多過(guò)文字，圖片通過(guò)卡片式的設(shè)計(jì)方式呈現(xiàn)給大家能夠非常有效的提升用戶(hù)體驗(yàn)。
3. 我們知道顏色是可以直接影響用戶(hù)的情緒的，紅色代表熱烈，黃色代表溫暖，橙色很活潑，黑色很沉穩(wěn)，綠色很自然，灰色很安靜，白色很純潔。單色調(diào)背景，通過(guò)陰影和顏色的深淺變幻能夠讓頁(yè)面具有流動(dòng)性的美。絢麗夸張的色彩能夠帶來(lái)很強(qiáng)的視覺(jué)沖擊力，同時(shí)讓網(wǎng)頁(yè)充滿(mǎn)了藝術(shù)氣息。想讓你的網(wǎng)站呈現(xiàn)給用戶(hù)一種怎樣的感覺(jué)，就需要認(rèn)真去考慮應(yīng)該使用什么樣的顏色搭配。
4. 通過(guò)對(duì)細(xì)節(jié)的處理我們可以讓用戶(hù)體驗(yàn)到網(wǎng)站背后的設(shè)計(jì)人員的用心之處，那么投桃報(bào)李，用戶(hù)則會(huì)更加忠誠(chéng)于我們的網(wǎng)站。細(xì)節(jié)是需要在生活中去發(fā)現(xiàn)和積累的，比如上面可愛(ài)的吉祥物引導(dǎo)，或者換上極驗(yàn)驗(yàn)證的滑動(dòng)驗(yàn)證碼這些細(xì)節(jié)都是可以借鑒的。

本文由 @顏小菲 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理 ，未經(jīng)許可，禁止轉(zhuǎn)載。