網(wǎng)易云音樂iOS端界面改版設(shè)計分析

01 整合產(chǎn)品業(yè)務(wù),畫風(fēng)更輕

減少紅色占比,整體背景換成純白色

本次網(wǎng)易云音樂去掉了多處的品牌色(紅色):紅色的圖標改成黑色,紅色的標簽也改成了全局統(tǒng)一的黑色。原來皮膚選項里面的紅色皮膚也去掉了。

這一改動也許是為了保證全局統(tǒng)一色調(diào),保持清爽通透,免除紅色給人的強烈的品牌沖擊感。此外,即使是用到紅色的地方也由原來的暗紅色改成了通透一點的漸變紅,更加年輕了。

之前的整體背景顏色是有灰度的白色為了避免視覺疲勞,但是灰色難免顯臟。所以這次網(wǎng)易音樂直接將背景改成純白色,就像米色的墻換成白色屋子里馬上亮了。

 

首頁整合個性電臺模塊,“賬號”調(diào)整原來的列表結(jié)構(gòu)

網(wǎng)易這次將原來首頁的“主播電臺”大Tab整合到下面的金剛區(qū)??赡艹鲇跇I(yè)務(wù)上的需求,改動之后,很可能會提高“電臺、直播”的入口曝光率。

 

這次結(jié)構(gòu)變化最大是“賬號”頁面,整合一些主要功能到弱金剛區(qū)域,去掉列表后面的廣告文案。這樣對比改版之前整個頁面的雜亂,新的界面干凈純粹。(正式版的“賬號”頁,稍作了細節(jié)調(diào)整)

02 對比和留白更明顯

減少不必要的視覺分割,去掉線性分割

網(wǎng)易音樂這次改變了之前一直沿用的老式線性分割方式。比如播放界面去掉了頂部的分割線,使整個頁面融為一體,體驗更加沉浸。同樣的列表去掉了線采用留白分割,頁面更干凈,沒有割裂感。

 

加大留白

加大間距留白,整個頁面更有呼吸感,操作起來更加順暢自然。

 

線面圖標對比更加強烈

首頁金剛區(qū)的大圖標由之前的線性改成現(xiàn)在的面性,使得和下面的圈面更加和諧。也加強和其他線性圖標的對比,在整個界面里面更加突出。包括最下面的菜單欄除了將圖標縮小形狀優(yōu)化之外,選中效果采用圓圓的面性底,加大和沒選中圖標的對比區(qū)分。

03加強相關(guān)信息之間的親密性

縮小字間距

因為去掉分割線的硬分割,采用留白分割。這要求信息之間的親密性更要加強,才不會使得由于過多的留白造成的頁面散亂。

04 增加模塊和各元素的一致性,整體更圓潤

升級之后的網(wǎng)易云音樂,處處體現(xiàn)其圓潤的視覺特性。所有圖標形狀進行了優(yōu)化,更趨于logo的圓潤流動的形象。除了圖標,歌單列表卡片和歌單九宮格圖片加大圓角。這一特點的重復(fù)也加深了品牌印象。

這次網(wǎng)易音樂的升級改版,通過信息間加大對比,加強親密性和一致性。通過大量的細節(jié)考量和調(diào)整,在視覺上更加清爽透氣,沉浸流暢。

 

 

 

本文所有圖片版權(quán)歸網(wǎng)易云音樂所有

作者:Jasmine

每天更新,
全站高品質(zhì)素材免費下載!