2018-6-20 資深UI設(shè)計(jì)者
喜馬拉雅主播等級體系算是喜馬各業(yè)務(wù)線中資歷比較老的一員了,主要服務(wù)于主播用戶查看自身等級,以及特權(quán)享受,這次整理了近期關(guān)于主播等級線現(xiàn)存問題的改版。
1. 產(chǎn)品層面
這次迭代的目的是:
通過溝通我們知道產(chǎn)品希望通過這次迭代來引起用戶注意,增加主播用戶和產(chǎn)品之間的互動(dòng),而提升頁面日活以及次日留存。
2. 設(shè)計(jì)層面
設(shè)計(jì)師的基本出發(fā)點(diǎn)是需要設(shè)計(jì)出不低于競品且更加精致的稿件,能夠更加有效傳達(dá)品牌理念和視覺延展性,進(jìn)而理解產(chǎn)品與競品之間的差異化,增強(qiáng)用戶認(rèn)知。
3. 用戶層面
此次迭代需要考慮到主播用戶的教育成本和接受程度,能否讓用戶感受到產(chǎn)品的差異性,能否讓用戶在第一時(shí)間看到我們希望用戶關(guān)注的東西。
通過溝通我們明確了產(chǎn)品需求點(diǎn),接下來需要針對需求進(jìn)行分析,我們從競品視覺分析、設(shè)計(jì)關(guān)鍵詞提煉兩點(diǎn)來進(jìn)行設(shè)計(jì)決策。
1. 視覺競品分析
針對性的通過對 VIP、等級等屬性的頁面進(jìn)行視覺收集。
2. 設(shè)計(jì)關(guān)鍵詞提煉
主播等級頁面的服務(wù)理念是為主播用戶提供更加清晰的等級提升指引。區(qū)別于喜馬其他等級線,整個(gè)流程中除了滿足等級查看的基本需求和特權(quán)展示的標(biāo)準(zhǔn)化流程,更多的差異是對目標(biāo)用戶需求的洞察和挖掘,我們從目標(biāo)用戶需求定義了主播等級線設(shè)計(jì)差異化的關(guān)鍵詞。
通過與產(chǎn)品溝通需求點(diǎn),我們了解到視覺層面需要滿足或改進(jìn)的內(nèi)容;通過視覺競品分析我們獲取產(chǎn)品未來的設(shè)計(jì)趨勢以及具有前瞻性的設(shè)計(jì)概念;接下來在稿件輸出的過程中我們就可以打散原有頁面的信息層級并進(jìn)行重新分組,分析所有層級信息字段的屬性,然后整理出不可變動(dòng)信息、可變動(dòng)信息、可增加的信息、可變的布局樣式,不斷嘗試重組信息結(jié)構(gòu),找出合適的視覺決策點(diǎn)。
針對設(shè)計(jì)稿件,開展設(shè)計(jì)內(nèi)部視覺評審,針對視覺稿件還邀請了產(chǎn)品以及交互進(jìn)行意見收集,最終選擇方案一作為主播等級迭代方案。
在主頁面色彩偏好、功能布局定稿之后,為了在關(guān)鍵轉(zhuǎn)化點(diǎn)給用戶帶來統(tǒng)一有趣的視覺體驗(yàn),以主頁面視覺為參考以動(dòng)效、ICON、插畫三個(gè)維度進(jìn)行設(shè)計(jì)延展,保證與競品的品牌差異性以及設(shè)計(jì)的統(tǒng)一性。
1. 特權(quán)ICON
為了達(dá)到設(shè)計(jì)稿件色彩傾向、品牌差異設(shè)計(jì)貫穿用戶每一個(gè)關(guān)鍵轉(zhuǎn)化點(diǎn)保持特權(quán) ICON 視覺語言統(tǒng)一,并增加趣味性拉開與競品的差異,提升用戶點(diǎn)擊轉(zhuǎn)化率。
2. 插畫延伸
針對產(chǎn)品等級攻略個(gè)性化需求的訴求點(diǎn),圍繞等級提升的不同要求繪制場景化插畫,并保持視覺層面的輸出配套,通過十字交叉分析有針對性的進(jìn)行精準(zhǔn)推送。
3. 動(dòng)效延伸
圍繞溫暖、成就感兩個(gè)關(guān)鍵進(jìn)行延展,在用戶點(diǎn)擊等級主頁入口的第一時(shí)間感受到等級提升的成就感以及統(tǒng)一色彩傾向帶來的重視感,通過特權(quán)展示達(dá)到所見即所得的直觀感受。
設(shè)計(jì)并非一念間的靈感迸發(fā),設(shè)計(jì)師對整個(gè)業(yè)務(wù)需要有清晰的理解,明白產(chǎn)品定位并通過前期設(shè)計(jì)分析奠定設(shè)計(jì)理念而進(jìn)行設(shè)計(jì)產(chǎn)出。
設(shè)計(jì)是一個(gè)逐漸嶄露頭角的過程,而我理解的設(shè)計(jì)師則應(yīng)該是快樂的戰(zhàn)士而不是輕言放棄的賭徒,還是那句話:每個(gè)人都有屬于自己的一片森林。一點(diǎn)工作總結(jié)希望對大家有多裨益,同時(shí)歡迎各位大佬加入喜馬拉雅FM。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com