從蝦米音樂的改版,看未來設計趨勢

12 評論 20652 瀏覽 91 收藏 9 分鐘

對!沒錯蝦米這次又大改版啦!哈哈~前幾次改版被吐槽,那么,今天和大家一起看下蝦米改版中那些值得學習的點。

先看下一系列版本變化

蝦米從V.6.0.5 – V7.0 最大變化是產品內容變化和視覺風格改變,當然呢,也許是因為跟誰最新的蘋果風,最新版本的設計更加簡潔,輕量,呼吸感更強。那么前兩個版本視覺設計風格整體比較堵塞,功能內容堆積

LOGO的變化

LOGO變化圖形改變了的同時,顏色也比之前飽和度更加深了,由之前橘黃色變成紅色。

  1. 圖形上的變化感覺更加難以辨認,重心不穩;
  2. 色彩上飽和度深,有點更接近蘋果音樂了。

主頁風格變化- 迎合趨勢

蝦米音樂最大改變是去掉之前的眾多功能堆積,減少用戶選擇困難,首頁直接為用戶推薦一些個性化的內容。

  1. 視覺風格的改版,整體采用大網格,呼吸感更強,大標題,突出核心功能,去掉了灰色底,整體來說除去之前視覺上的混亂,更加輕量了一些(傳說中的蘋果風格);
  2. 交互上相對之前來說更加突出重要內容,減少了一些不常用的功能選項,大家感受下。

再來看推薦頁面的特色改變

推薦頁面最大特色就是頂部banner 下面四個圖標非常有特色,非常便于用戶記憶,非常有調性。

上面這個是韓國的一個音樂app ,當初我記憶最深刻就是這幾個圖標,非常具有個性化,非常出彩,至今難忘,所以蝦米這次圖標設計非常贊??梢钥闯鑫r米這次用心之作。

其他的亮點我就不說了 就是大標題嘛,沿用之前一致風格。

蝦米音樂本次改版統一圖標視覺語言

蝦米本次所有圖標統一風格線條粗細。這點和國外spotify 還有airbnb 設計方式一致都是線條,蝦米音樂圖標是采用 2px 的細線條,圖標設計比上個版本進步有超大提升,且本次圖標大多采用了蝦米的一些特質,融入了品牌DNA元素,當然有些二級頁面的圖標沒有全部修改完,不知道蝦米官方是不是逐步去迭代

題外話

早在去年九十月份時候我就留意到騰訊視頻提前采用大標題啦,但是當時我是吐槽的,為何呢,大家細心看下,騰訊視頻焦點文字和未選中文字之間的對齊方式比較奇怪,還有就是粗細對比比較粗魯,看著沒蝦米這般對比強力。蝦米這樣底部對齊,整體重心穩當,大小差異很強。

一級文字顏色的改變

本次去掉之前厚重的黑色,一級文字顏色采用 #4A4A4A ,一級文字和二級文字對比更強,一個采用 bold ,一個采用 regular 顏色有點偏airbnb 設計風格,怎么說呢,跟著大哥走,應該沒錯

交互上的特色改變

蝦米音樂詳情頁,改版本次比較有特色一個是關于歌手簡介采用了向下滑動展示更多內容,去掉了之前點擊 “更多入口” 進入二級頁面,這樣減少了用戶來回操作成本,這點非常贊!上下滑動手勢對于用戶來說非常省事,易操作

回顧蝦米本次改版一些亮點

  1. 去掉一些不常用的功能,首頁更加輕量,簡化;
  2. 頁面布局采用大網格,頁面呼吸感更強;
  3. 圖標統一視覺語言,統一粗細,這點便于后期管理維護,也是未來的一個趨勢,那么特色欄目采用個性化圖標風格,比如推薦頁面banner 下面四個圖標;
  4. 交互上優化了手勢操作,詳情頁,更多變成手勢。

不足點

當然也有很多瑕疵,比如導航上彈簧一樣的焦點確實非常有特色,但是,但是,這與蝦米音樂有什么關系呢?這個符號從哪里提取出來的?等等,這里就不細說,大家看下圖蝦米早期設計其實非常有特色的,頁面并沒有那么多功能堆積,整體設計很輕量,經過幾次折騰,那么這次也差不多改回來了一些

2018移動設計趨勢

1.今年移動端最大的趨勢跟誰Phone X大網格風格,我們從國外幾個大的APP 來分析目前主流設計趨勢也是同樣有隨蘋果風的影子;

2.隱藏掉一些不常用功能,突出用戶常用功能,從蝦米改版可以看出;

3.大標題,大網格,一級文字顏色逐漸淡出純黑色STYLE,最具代表性的APP 有pinterest , arbnb;

4.更加注重內容展示;

5.簡約輕量更扁平。

推薦閱讀

淺析Facebook改版設計

#專欄作家#

Tony,微信公眾號:洞見設計,人人都是產品經理專欄作家。百度設計師。很樂意幫助年輕設計師成長,簡歷指導,每周分享最有價值的設計經驗,擅長產品體驗設計,關注【洞見設計】后臺回復“彩蛋”領取設計資料。

本文原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來源于網絡

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. ????????I‘m on your side

    回復
  2. 其實這篇文章不是從蝦米看未來設計趨勢,而是蝦米是iOS11設計的踐行者,會不會引領其他app進行改版!

    回復
  3. 網易云音樂老用戶不服。

    回復
  4. 作者是怎么看出是彈簧的?明明的音頻電波之類的啊,長這樣的彈簧還能用么? ??

    來自廣東 回復
    1. 哈哈,老哥見笑啦!就是他們這個圖形來源于何處,我當然明白他們想表示音頻律動,但是任何添加的圖形都要有一些依據呢,有理有據的設計才能更好說服大家呢。

      回復
  5. 個人覺得蝦米的設計和未來趨勢沒有太多的關聯,整體結構還是比較傳統的啊。另外彈簧。。。。很明顯它是音頻啊,這一點我反而覺得是比較出彩的地方~~~

    來自廣東 回復
  6. 作者個人色彩有點重

    回復
  7. 導航上的那個不是彈簧吧,應該是電波、赫茲、音頻的意思,我覺得很形象呀

    回復
    1. 我也這么認為。

      來自江蘇 回復
    2. 確實是這樣~感覺這個應該是個亮點才對,被說成不足了。。。

      回復
  8. 蝦米代表未來?

    來自福建 回復