百度、蝦米、音悅臺網站交互設計淺析
蘋果“Mac之父”Jef Raskin曾經說過:“對于消費者而言,界面就是產品?!苯缑媸怯脩趔w驗我們產品最直觀的接觸。把界面做好,將極大的提高用戶使用我們產品的愉悅感。所以我們長期以來都在不斷追求界面設計的進步,以期在眾多的相似產品中脫穎而出。下面我將通過對目前排名比較靠前的幾家音樂網站界面做一些簡單的分析,闡述一些我對于交互設計的感悟。
站長網排名前三的國內音樂網站分別是:百度音樂,蝦米音樂,以及音悅臺,我將從頁面的簡潔性,美學性,色彩搭配以及細節處理幾個方面進行分析。
百度音樂:
簡潔性:★★
頁面過多的不必要的內容堆砌,例如客戶端的二維碼,中間的廣告以及百度搜索框,使整個頁面給人雜亂的感覺。過多的文字堆砌而成的音樂分類,似乎還停留在傳統網頁的水準上,使得界面顯得很密集。
美學性:★★★
頁面使用了黃金分割的布局結構,也采用了現在十分流行的扁平化設計,加上推薦音樂的小動效,美學性倒也有幾分講究。
色彩搭配:★★
小編并沒有看出有什么明顯的色彩搭配設計,主要是契合百度整個色彩的調調。
細節處理:★★
小編并沒有發現什么特別好的細節處理,百度推廣無處不在倒是真是讓小編很反感。
蝦米音樂:
簡潔性:★★★
蝦米音樂相比百度音樂來說沒有一堆文字的堆砌,密集感沒有了。色塊與色塊之間通過留白的方式進行區分,效果還是很不錯的。但是色塊偏小,色塊較多,沒有一種大氣簡約的感覺。
美學性:★★★★
蝦米音樂也是使用的黃金分割的布局結構,集中在屏幕中間兩邊留白,主要是這樣可以集中用戶的視覺,抓住焦點??ㄆ降纳珘K分布很符合現在的流行趨勢,也是現在最重要的模塊設計思想之一。
色彩搭配:★★★★
頁面雖然沒有大面積使用橙色,但是整個頁面給人的感覺確實以暖色調為主,人們習慣先入為主,在顏色的整體性上面還算是做得不錯的。橙色的波長居于紅和黃之間,是十分活潑的光輝色彩,是最暖的色彩,給人以華貴而溫暖、興奮而熱烈的感覺,應用于音樂網站,還是會比較迎合用戶的心情的。
細節處理:★★★
界面是產品與用戶的交互,細節是能夠很打動用戶的,蝦米音樂有一個細節我很喜歡。
今日音樂人這個小卡片的形式非常的俏皮可愛,每一天的圖片都處理得非常精美,感覺就像蝦米音樂每一天都送給你一張漂亮的明信片一樣?!奥犕曛ㄒ宦暋?,有沒有萌萌噠。
音悅臺:
簡潔性:★★★★★
音悅臺的界面設計算是國內設計得比較好的。一張大圖作為背景,整個界面顯得十分的簡潔,不僅具有很強的視覺沖擊力,還對網頁的內容作了非常好的補充,而大背景這種設計手法在國外的網站運用是很普遍的。頁面通過留白的方式區分板塊與板塊,顯得很干凈
美學性:★★★★
垂直滾動式的頁面展現方式,用戶在使用的時候很方便,這迎合了移動端的發展,同時在美學上也有很好的表達。整個界面渾然一體,從上到下保持著一樣的風格,每一個板塊分類也做得很分明,具有相當好的一致性和整體性。這樣的設計能夠讓用戶對你的網站印象深刻,甚至不需要刻意去記憶,我們就能夠記住音悅臺的網頁結構是怎么樣的,完美的塑造了品牌效應。
色彩搭配:★★★★
黑色和綠色搭配的色調設計。綠色是柔美的自然之色,黑色是沉穩之色,兩者結合網站的色調顯得穩重而柔美,清新而高貴。讓用戶有一種平和的心態,很寧靜,很舒適。
細節處理:★★★★★
萌萌噠的直到頂部設計
因為是采用的垂直的網站分布結構,所以用戶可能會下拉到很下面,在下拉到一定位置的時候這個可愛的小吉祥物就會出現啦,我們在需要的時候請求它的幫助就能夠立即回到頂部,是不是超級可愛呢?
用戶體驗極好的登錄驗證碼
http://www.geetest.com/
音悅臺使用的是近段時間比較火的極驗驗證推出的滑動驗證碼,用戶只需要拖動滑塊完成拼圖就可以了,驗證完成時間只需要不到兩秒。不僅美觀而且方便的極驗驗證碼是不是顯得音悅臺對待用戶的心格外真誠呢?
通過上面的分析,小編給大家總結一下幾點:
- 如何能夠設計出簡潔精煉的網頁呢,采用現在流行的扁平化設計,通過簡單的圖形,文字和顏色的組合,去除冗余厚重而繁雜的裝飾,來達到直觀而簡潔的設計效果。例如我們可以在網站使用大背景,不僅能夠達到很絢麗的效果,如果圖片能夠選取的好還能夠非常準確而深刻的向你的用戶表達網站的主題。大標題也是一個不錯的選擇,簡單而大氣的文字效果,能夠集中用戶的注意力,同時這樣并不會讓你的網站看起來密密麻麻的。
- 卡片的模塊表達方式似乎是現在非常受歡迎的一種,這要得益于移動互聯網的普及。卡片式設計能夠讓我們的網站更加有序,圖片的放置不是凌亂的而是整齊有序的,這樣也使得我們網站的易讀性增強了,用戶可以通過瀏覽圖片很容易找到他們喜歡的內容。通過研究發現人們在瀏覽網頁的時候更加喜歡圖片多過文字,圖片通過卡片式的設計方式呈現給大家能夠非常有效的提升用戶體驗。
- 我們知道顏色是可以直接影響用戶的情緒的,紅色代表熱烈,黃色代表溫暖,橙色很活潑,黑色很沉穩,綠色很自然,灰色很安靜,白色很純潔。單色調背景,通過陰影和顏色的深淺變幻能夠讓頁面具有流動性的美。絢麗夸張的色彩能夠帶來很強的視覺沖擊力,同時讓網頁充滿了藝術氣息。想讓你的網站呈現給用戶一種怎樣的感覺,就需要認真去考慮應該使用什么樣的顏色搭配。
- 通過對細節的處理我們可以讓用戶體驗到網站背后的設計人員的用心之處,那么投桃報李,用戶則會更加忠誠于我們的網站。細節是需要在生活中去發現和積累的,比如上面可愛的吉祥物引導,或者換上極驗驗證的滑動驗證碼這些細節都是可以借鑒的。
本文由 @顏小菲 原創發布于人人都是產品經理 ,未經許可,禁止轉載。
哈哈,和我們老板講產品一樣一樣的。
一樣兒一樣兒的哈~
分析的很有道理,但要是把網易云音樂這樣依然堅持質感的分析加進去就更好啦~
網易云音樂的確很喜歡呢?不過感覺網易云音樂不應該跟他們比,層次不一樣。
?? 就這樣被嫌棄了。。。
寫的什么玩意兒,都是視覺,交互在哪里?
視覺不是交互的一部分嗎?
始終停留在視覺層面。。。
是啊,由淺入深啊,視覺層面就有這么多可以改進的地方啊~~~