案例解析:UI設(shè)計師如何用產(chǎn)品思維做設(shè)計?
本文筆者將與大家分享一個小程序的迭代,通過這次迭代的過程,告訴你:怎么分析一款產(chǎn)品?做為UI設(shè)計師怎么全局的看待一個產(chǎn)品,以及如何運用產(chǎn)品思維思考設(shè)計?
案例解析
有些產(chǎn)品迭代因為項目時間緊急,到UI設(shè)計師手里可能是沒有原型圖的,就是照著線上的老產(chǎn)品優(yōu)化,增減功能,這時很大程度上需要產(chǎn)品的思維分析、優(yōu)化頁面。
1. 存在的問題分析
下面分析一下這次案例首頁存在的問題:
問題一:
“報名管理”的按鈕設(shè)計會給人一種,整個卡片只有最突出的藍色按鈕可以點擊的錯覺,實際上整個卡片也是一個可點擊項。
問題二:
“我領(lǐng)取的”應(yīng)該相對于“我發(fā)布的”弱化一些,其次“我領(lǐng)取的”并不符合功能標(biāo)題,“我參與的”更為貼切。
問題三:
這個算是一個低級錯誤,“發(fā)布中”和“已完成”應(yīng)該有不同的狀態(tài)區(qū)分。
問題四:
四個標(biāo)簽的設(shè)計識別性低,原因是:字小有的顏色相近須要仔細(xì)看,應(yīng)該用差異化的圖形體現(xiàn)各自的特征,這樣用戶對功能的認(rèn)知更為快速。
問題五:
產(chǎn)品上的問題“創(chuàng)建時間”放這里沒有任何意義,因為并不是用戶關(guān)注的點,“0/20”讓用戶一頭霧水,不知道是什么意思。(實際上是限定了活動的報名人數(shù),可以看到報名人數(shù)的一個進度)
2. 第一次改版
結(jié)合這幾個問題設(shè)計了第一個版本:
主題色運用了小程序圖標(biāo)的顏色,底部導(dǎo)航去掉,這也是主要改版迭代的地方。為了使產(chǎn)品使用更簡單直接,突出小工具輕量化特點,去掉復(fù)雜多余的元素,讓用戶打開產(chǎn)品唯一的入口就是產(chǎn)品的核心功能。
但是,這次的改版并不能算最理想的方案,分析一下這個頁面的設(shè)計依據(jù):
產(chǎn)品的特征是把用戶分成兩種身份:一種是發(fā)布者,一種是參與者。
現(xiàn)在頂部導(dǎo)航給了兩種身份的入口,頁面最為突出的按鈕是產(chǎn)品的核心功能,這樣的設(shè)計似乎非常的合理。但是,結(jié)合一個低頻小工具的特征來講,似乎整個頁面結(jié)構(gòu)設(shè)計,還不是那么輕量化和直接,參與用戶需要點擊“我的參與”才能找到所需要的,并不能直接觸達用戶的目的。
3. 第二次改版
下圖再次改版后的頁面:
經(jīng)過團隊的激烈辯論,最終決定把“我的發(fā)布”和“我的參與”放到一起,這樣能給用戶最直接的感受,原因有以下幾點:
- 此產(chǎn)品是小程序并非app,多數(shù)用戶第一次進入的產(chǎn)品,并非是首頁,而是分享到微信群里的活動詳情頁,用戶報名后可返回首頁查看活動的記錄,所以首頁更像一個歷史記錄。
- 產(chǎn)品的核心功能“活動、招募、點名、通知”都是有時效性的,用完就很少再關(guān)注,用戶也很少同時用到好幾個功能。所以,首頁展示的都是用戶正在進行中的一個或幾個活動項,所以去掉tab選項卡更為直接!
- 低頻小工具特點,多數(shù)用戶使用此產(chǎn)品不會有很多的活動記錄,所以最后的版本設(shè)計,就體現(xiàn)了更直接觸達用戶的目的。
但這還不是最終的版本,下面要說的就是很多設(shè)計師經(jīng)常愛犯的錯誤:
上圖哪種按鈕的形式更符合此產(chǎn)品呢, 從版面上看左邊的看起來更舒服些,因為頁面給人的視覺感受更平衡飽滿。
但是事實上有了更多的記錄,左邊的長按鈕遮擋了更多的內(nèi)容,而且一個不經(jīng)常用的大按鈕放在那里感覺很多余。所以,換成右邊的樣式,對內(nèi)容區(qū)域沒有更多的遮蓋,上下滑動感覺更為舒適,所以最終選擇右邊的樣式。
這里說明了一個問題:我們做設(shè)計時,應(yīng)該要考慮到全部的應(yīng)用場景,必要時需要把各種頁面狀態(tài)都設(shè)計出來,這樣全面的考慮,落地才是經(jīng)得起考驗的方案。
4. 詳情頁改版
改版產(chǎn)品的詳情頁面,這個頁面幾乎是多數(shù)用戶第一次接觸產(chǎn)品,看到的第一個頁面,下面分析一下現(xiàn)版本的問題:
- 標(biāo)題視覺太弱,整體頁面沒有重點;
- 不明確是什么錢,“0/50”不知為何物,用戶需要猜;
- 參加活動,用戶首先會看活動詳情,之后了解時間地點;
- 活動簡介下面是活動時間地點,不符合標(biāo)題描述;
- 活動時間格式雜亂;
- 已報名人員應(yīng)該優(yōu)先給用戶展示,并且可查看報名人員,不應(yīng)該只體現(xiàn)已報名人數(shù)量,因為活動有社交屬性!
改版前后對比:
- 活動圖片可自定義
- 標(biāo)題加重突出,加活動標(biāo)簽
- 解釋花費
- 可查看報名人員,報名可匿名報名
- 活動介紹優(yōu)先查看
- 加分享按鈕,實現(xiàn)傳播
- 時間格式加“星期”格式
5. 總結(jié)
- 總結(jié)思考產(chǎn)品的社交屬性后,增加可查看已報名人員功能。
- 通過思考用戶的操作使用習(xí)慣,把信息重新優(yōu)先級排列。
- 界面的多種形態(tài),確定按鈕的設(shè)計樣式。
- 從產(chǎn)品的特征思考,增加詳情頁的分享功能。
最后
此次改版因為直接對接需求方,所以要從產(chǎn)品的角度去設(shè)計,不然改版后的產(chǎn)品可能只是設(shè)計的更好看了,并沒有真正解決產(chǎn)品的問題。
我們UI設(shè)計師在設(shè)計前,是非常有必要對產(chǎn)品有充分透徹的了解,需要思考用戶的真正需求是什么,善于結(jié)合產(chǎn)品及交互的思維做設(shè)計,這樣才是在用設(shè)計解決問題。
UI設(shè)計師應(yīng)該是感性的也是理性的,要用感性去尋找靈感,用理性來將靈感變成具體的設(shè)計方案。
作者:吳星辰,微信公眾號:互聯(lián)網(wǎng)設(shè)計幫
本文由 @吳星辰 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自Unsplash, 基于CC0協(xié)議
不錯,思路很清晰,受教了。 ??
提兩點建議:
1.用大按鈕還是小按鈕,這應(yīng)該跟產(chǎn)品溝通,看他們需要達到什么樣的需求,比如:產(chǎn)品需求就是要引導(dǎo)用戶去發(fā)布,那這個需求就很強烈,所以應(yīng)該用大按鈕,如果產(chǎn)品需求沒那么強,我們再結(jié)合視覺表現(xiàn),從整體出發(fā)去綜合衡量,得出右圖最適合。
2.我覺得你的卡片上還應(yīng)該加入一個已過期大標(biāo)簽或者蓋章,不然你卡片是否可點擊,通過你下面參與的箭頭來表現(xiàn),我覺得還是太弱化了,用戶完全不知道哪些還可以參與。
同問
整體思路很清晰,受教了。
但有一個疑問,【經(jīng)過團隊的激烈辯論,最終決定把“我的發(fā)布”和“我的參與”放到一起】,就效果圖來看,我參與的活動能看出來嗎?整個頁面我只看出來發(fā)布活動的身份。而我參與了哪些活動,看不出來。
可以
寫的真好,感覺很受用
可以