看似簡單的喜馬拉雅FM主播等級體系，是如何做改版設(shè)計的？

2018-6-20    資深UI設(shè)計者

喜馬拉雅主播等級體系算是喜馬各業(yè)務(wù)線中資歷比較老的一員了，主要服務(wù)于主播用戶查看自身等級，以及特權(quán)享受，這次整理了近期關(guān)于主播等級線現(xiàn)存問題的改版。

一、產(chǎn)品背景

1. 產(chǎn)品層面

這次迭代的目的是：

  • 把流量分發(fā)的核心參考點「專輯質(zhì)量分」作為主播等級主要評判標(biāo)準(zhǔn)之一。
  • 讓主播能夠清楚的認(rèn)知自己在平臺的地位/影響力。
  • 給主播升級目標(biāo)，促進(jìn)升級。

通過溝通我們知道產(chǎn)品希望通過這次迭代來引起用戶注意，增加主播用戶和產(chǎn)品之間的互動，而提升頁面日活以及次日留存。

2. 設(shè)計層面

設(shè)計師的基本出發(fā)點是需要設(shè)計出不低于競品且更加精致的稿件，能夠更加有效傳達(dá)品牌理念和視覺延展性，進(jìn)而理解產(chǎn)品與競品之間的差異化，增強用戶認(rèn)知。

3. 用戶層面

此次迭代需要考慮到主播用戶的教育成本和接受程度，能否讓用戶感受到產(chǎn)品的差異性，能否讓用戶在第一時間看到我們希望用戶關(guān)注的東西。

二、設(shè)計前期分析

通過溝通我們明確了產(chǎn)品需求點，接下來需要針對需求進(jìn)行分析，我們從競品視覺分析、設(shè)計關(guān)鍵詞提煉兩點來進(jìn)行設(shè)計決策。

1. 視覺競品分析

針對性的通過對 VIP、等級等屬性的頁面進(jìn)行視覺收集。

2. 設(shè)計關(guān)鍵詞提煉

主播等級頁面的服務(wù)理念是為主播用戶提供更加清晰的等級提升指引。區(qū)別于喜馬其他等級線，整個流程中除了滿足等級查看的基本需求和特權(quán)展示的標(biāo)準(zhǔn)化流程，更多的差異是對目標(biāo)用戶需求的洞察和挖掘，我們從目標(biāo)用戶需求定義了主播等級線設(shè)計差異化的關(guān)鍵詞。

三、設(shè)計執(zhí)行

通過與產(chǎn)品溝通需求點，我們了解到視覺層面需要滿足或改進(jìn)的內(nèi)容；通過視覺競品分析我們獲取產(chǎn)品未來的設(shè)計趨勢以及具有前瞻性的設(shè)計概念；接下來在稿件輸出的過程中我們就可以打散原有頁面的信息層級并進(jìn)行重新分組，分析所有層級信息字段的屬性，然后整理出不可變動信息、可變動信息、可增加的信息、可變的布局樣式，不斷嘗試重組信息結(jié)構(gòu)，找出合適的視覺決策點。

針對設(shè)計稿件，開展設(shè)計內(nèi)部視覺評審，針對視覺稿件還邀請了產(chǎn)品以及交互進(jìn)行意見收集，最終選擇方案一作為主播等級迭代方案。

四、業(yè)務(wù)線視覺延展

在主頁面色彩偏好、功能布局定稿之后，為了在關(guān)鍵轉(zhuǎn)化點給用戶帶來統(tǒng)一有趣的視覺體驗，以主頁面視覺為參考以動效、ICON、插畫三個維度進(jìn)行設(shè)計延展，保證與競品的品牌差異性以及設(shè)計的統(tǒng)一性。

1. 特權(quán)ICON

為了達(dá)到設(shè)計稿件色彩傾向、品牌差異設(shè)計貫穿用戶每一個關(guān)鍵轉(zhuǎn)化點保持特權(quán) ICON 視覺語言統(tǒng)一，并增加趣味性拉開與競品的差異，提升用戶點擊轉(zhuǎn)化率。

2. 插畫延伸

針對產(chǎn)品等級攻略個性化需求的訴求點，圍繞等級提升的不同要求繪制場景化插畫，并保持視覺層面的輸出配套，通過十字交叉分析有針對性的進(jìn)行精準(zhǔn)推送。

3. 動效延伸

圍繞溫暖、成就感兩個關(guān)鍵進(jìn)行延展，在用戶點擊等級主頁入口的第一時間感受到等級提升的成就感以及統(tǒng)一色彩傾向帶來的重視感，通過特權(quán)展示達(dá)到所見即所得的直觀感受。

結(jié)語

設(shè)計并非一念間的靈感迸發(fā)，設(shè)計師對整個業(yè)務(wù)需要有清晰的理解，明白產(chǎn)品定位并通過前期設(shè)計分析奠定設(shè)計理念而進(jìn)行設(shè)計產(chǎn)出。

設(shè)計是一個逐漸嶄露頭角的過程，而我理解的設(shè)計師則應(yīng)該是快樂的戰(zhàn)士而不是輕言放棄的賭徒，還是那句話：每個人都有屬于自己的一片森林。一點工作總結(jié)希望對大家有多裨益，同時歡迎各位大佬加入喜馬拉雅FM。

分享本文至：

日歷

鏈接

個人資料

存檔