以人人都是產品經理為例——如何升級交互/UI?
編輯導讀:一個成熟的產品,即使已經形成了自己的風格,也會在日后不斷進行優化迭代,適應用戶行為的變化,提高用戶體驗。本文作者以人人都是產品經理為例,對其交互設計展開分析,希望對你有幫助。
人人都是產品經理屬于我常年存在手機但是卻很少打開,但也不會卸載的一款應用。
雖然集結了眾多頭部大佬的文思泉涌,但這么多年來APP端的UI風格和交互體驗始終“停留初心”。
(可能由于大家工作or摸魚瀏覽的場景都是在PC端,所以把APP端放養了哈哈(亂猜))
選擇這個APP做改版練習,一方面是考慮到有比較大的優化空間,第二也是很久沒出作品了鍛煉一下動手能力。有不同的觀點歡迎在評論區留言。
一、前期調研
1. 產品是什么?
人人都是產品經理是一個專注于產品、運營、設計的多方位交流學習平臺,以高質量行業文章為主要載體吸引用戶,以工作問答為交流媒介留存用戶。同時附帶課程、職場招聘等功能。
2. 什么樣的用戶在使用?
各類PM、運營、交互設計等對產品設計感興趣的群體,用戶年齡集中在20-35歲區間,男性用戶遠多于女性。
3. 用戶想要達到什么目的?
通過瀏覽文章和相關行業資訊來拓寬視野,與同行們相互交流探討答疑解惑,提升自己。
二、分析現有功能
首先第一步先去全方位的體驗和了解這款產品,分析現有的頁面框架、功能流程、視覺UI方面存在的問題,以便于為后續的改版方向提供切實依據。
1. 首頁
框架結構問題:
頂部總切換title是【文章】,可下面卻包含問答、課程和圈子等范疇,框架結構劃分不夠恰當。
流量分發效率低:
首頁的主要目的是為各個功能模塊進行流量分發,目前的頁面布局(以文章縱向流為主,中間穿插各種其他功能)圖片占比過大,導致首屏只能展示4篇文章,用戶觸達信息十分受限,屏效比低下。且大量的圖片占據視覺重心,對比之下文字標題過于弱化,不利于用戶抓住信息點。
Icon表意不當:
右上角更多icon常用于分類的全部展開,這里放在和大title同級別,但內容包含的卻不是同一類型,而是專題、作者和早報等不同的功能集合。
2. 問答頁
【提問】按鈕引導弱:
問答本身是一個帶有社區屬性的功能,利用用戶好奇、學習、答疑解惑的心理、通過用戶之間自發的互動產生活躍和留存。這種場景下【提問】是一個非常重要的交互按鈕,現在放在右上角不明顯且不易觸達,影響了用戶提問的主動性。
瀏覽順序受阻:
【回答亮了】板塊是對于問答下的優秀回答單獨拎出來一個tab,但這里的瀏覽行為就有點反人類。正常應該是有問才有答,但這里的瀏覽順序目前是:先瞄到回答,然后看看問題,再回頭來看回答。這是比較不太合理的。
3. 個人中心
生產者 or 消費者?
用戶可以大致分類兩類:內容生產者和內容消費者。當前個人中心將發表的文章、參與的問答、點贊粉絲優先展示,可以看出來是側重于內容生產者,對于絕大多數內容消費者而言并不友好。
關注 or 訂閱
【我的關注】和【訂閱作者】從字義上理解很容易混淆,這里的產品邏輯是:通過文章可以對作者進行【訂閱】,點進作者個人主頁則顯示為關注。訂閱了不代表關注,但是關注了這個人你的訂閱則會出現(這里的兩種叫法和特意區分個人看來實無必要,沒搞懂)。
功能劃分混亂:
下方的功能列表劃分混亂,粉絲區和上方數據重復。
三、交互細節思考
1. 個人中心用什么布局
個人中心承載的功能比較雜,既包含了各種用戶數據、設置,還有付費內容。如何去排布功能的優先級、劃分結構層級是重點。
- 方案一:將收藏和課程收到二級頁面中,讓個人中心有更多其他內容的展示空間,優勢在于內容的分發效率比較高,但是對于收藏的內容展示空間受限,不夠直觀
- 方案二:收藏的內容作為吸引用戶二次進入和留存的關鍵,具有較大的長尾價值,相比于發表的內容來說,普通用戶對于收藏的查看需求更大,方案二的優勢在于直接鋪開了收藏,但缺點在于功能的拓展型較差。
- 最后的方案:保留了收藏內容的鋪開形式,增加金剛區圖標對重要板塊進行靈活放置,滿足核心收藏、課程足夠突出的同時也兼顧了內容的可拓展性
2. 是否需要【最新】板塊 ?
什么時候需要放【最新】呢?我的想法是:這關系到內容本身。
比如知乎就沒有【最新】板塊,因為知乎更注重內容是否專業權威有說服力,時間這個緯度對內容偏好的影響不大,有價值的內容過個幾年再去看仍然有價值。而豆瓣小組就相反,甚至【最新】的優先級還要高于【推薦】,因為時間影響到了小組成員對內容的判斷和采納,最新的內容更能滿足成員對于信息的需求。
對于人人問答這個場景來說,用戶期望關注的是熱議問題和有價值的答案,那最新的吸引力顯然要弱于參與度高的問答,所以單獨給一個tab去讓用戶切換查看的成本是比較高的。所以將頂部切換中的最新拿掉,最新的問答將以權重占比在推薦中展示。
3. 【賞金】按鈕跟隨鍵盤還是頁面
在原版提問的頁面中有一個懸賞紅包的按鈕,原版是跟隨鍵盤出現,點擊開啟后頁面中會彈起選擇框,選擇紅包類型后才會出現金額選擇模塊。
原版:
改版后:
四、視覺風格
本文由 @晚一 原創發布于人人都是產品經理,未經許可,禁止轉載
題圖來自 Pexels,基于 CC0 協議
不太清楚你大面積使用綠色的依據是什么呢
說實話,綠色和藍色來回跳根本沒辦法靜,還是用單色好些
大佬,真的帥!
真好看,不知道其他設計在哪里看呀
挺好看的
真不錯,又看到你了
優秀,我也下載了人人很久,第一次了解的這么詳細哈哈
大佬們有UI的坑請聯系我??