小程序開(kāi)發(fā)-UI設計師如何用產(chǎn)品思維做設計？
2019-08-07
案例解析
有些產(chǎn)品迭代因為項目時(shí)間緊急，到UI設計師手里可能是沒(méi)有原型圖的，就是照著(zhù)線(xiàn)上的老產(chǎn)品優(yōu)化，增減功能，這時(shí)很大程度上需要產(chǎn)品的思維分析、優(yōu)化頁(yè)面。
1. 存在的問(wèn)題分析
下面分析一下這次案例首頁(yè)存在的問(wèn)題：
問(wèn)題一：
[案例解析] UI設計師如何用產(chǎn)品思維做設計！
“報名管理”的按鈕設計會(huì )給人一種，整個(gè)卡片只有最突出的藍色按鈕可以點(diǎn)擊的錯覺(jué)，實(shí)際上整個(gè)卡片也是一個(gè)可點(diǎn)擊項。
問(wèn)題二：
[案例解析] UI設計師如何用產(chǎn)品思維做設計！
“我領(lǐng)取的”應該相對于“我發(fā)布的”弱化一些，其次“我領(lǐng)取的”并不符合功能標題，“我參與的”更為貼切。
問(wèn)題三：
[案例解析] UI設計師如何用產(chǎn)品思維做設計！
這個(gè)算是一個(gè)低級錯誤，“發(fā)布中”和“已完成”應該有不同的狀態(tài)區分。
問(wèn)題四：
[案例解析] UI設計師如何用產(chǎn)品思維做設計！
四個(gè)標簽的設計識別性低，原因是：字小有的顏色相近須要仔細看，應該用差異化的圖形體現各自的特征，這樣用戶(hù)對功能的認知更為快速。
問(wèn)題五：
[案例解析] UI設計師如何用產(chǎn)品思維做設計！
產(chǎn)品上的問(wèn)題“創(chuàng )建時(shí)間”放這里沒(méi)有任何意義，因為并不是用戶(hù)關(guān)注的點(diǎn)，“0/20”讓用戶(hù)一頭霧水，不知道是什么意思。（實(shí)際上是限定了活動(dòng)的報名人數，可以看到報名人數的一個(gè)進(jìn)度）
2. 第一次改版
結合這幾個(gè)問(wèn)題設計了第一個(gè)版本：
[案例解析] UI設計師如何用產(chǎn)品思維做設計！
主題色運用了小程序圖標的顏色，底部導航去掉，這也是主要改版迭代的地方。為了使產(chǎn)品使用更簡(jiǎn)單直接，突出小工具輕量化特點(diǎn)，去掉復雜多余的元素，讓用戶(hù)打開(kāi)產(chǎn)品唯一的入口就是產(chǎn)品的核心功能。
但是，這次的改版并不能算最理想的方案，分析一下這個(gè)頁(yè)面的設計依據：
[案例解析] UI設計師如何用產(chǎn)品思維做設計！
產(chǎn)品的特征是把用戶(hù)分成兩種身份：一種是發(fā)布者，一種是參與者。
現在頂部導航給了兩種身份的入口，頁(yè)面最為突出的按鈕是產(chǎn)品的核心功能，這樣的設計似乎非常的合理。但是，結合一個(gè)低頻小工具的特征來(lái)講，似乎整個(gè)頁(yè)面結構設計，還不是那么輕量化和直接，參與用戶(hù)需要點(diǎn)擊“我的參與”才能找到所需要的，并不能直接觸達用戶(hù)的目的。
3. 第二次改版
下圖再次改版后的頁(yè)面：
[案例解析] UI設計師如何用產(chǎn)品思維做設計！
經(jīng)過(guò)團隊的激烈辯論，最終決定把“我的發(fā)布”和“我的參與”放到一起，這樣能給用戶(hù)最直接的感受，原因有以下幾點(diǎn)：
此產(chǎn)品是小程序并非app，多數用戶(hù)第一次進(jìn)入的產(chǎn)品，并非是首頁(yè)，而是分享到微信群里的活動(dòng)詳情頁(yè)，用戶(hù)報名后可返回首頁(yè)查看活動(dòng)的記錄，所以首頁(yè)更像一個(gè)歷史記錄。
產(chǎn)品的核心功能“活動(dòng)、招募、點(diǎn)名、通知”都是有時(shí)效性的，用完就很少再關(guān)注，用戶(hù)也很少同時(shí)用到好幾個(gè)功能。所以，首頁(yè)展示的都是用戶(hù)正在進(jìn)行中的一個(gè)或幾個(gè)活動(dòng)項，所以去掉tab選項卡更為直接！
低頻小工具特點(diǎn)，多數用戶(hù)使用此產(chǎn)品不會(huì )有很多的活動(dòng)記錄，所以最后的版本設計，就體現了更直接觸達用戶(hù)的目的。
但這還不是最終的版本，下面要說(shuō)的就是很多設計師經(jīng)常愛(ài)犯的錯誤：
[案例解析] UI設計師如何用產(chǎn)品思維做設計！
上圖哪種按鈕的形式更符合此產(chǎn)品呢， 從版面上看左邊的看起來(lái)更舒服些，因為頁(yè)面給人的視覺(jué)感受更平衡飽滿(mǎn)。
[案例解析] UI設計師如何用產(chǎn)品思維做設計！
但是事實(shí)上有了更多的記錄，左邊的長(cháng)按鈕遮擋了更多的內容，而且一個(gè)不經(jīng)常用的大按鈕放在那里感覺(jué)很多余。所以，換成右邊的樣式，對內容區域沒(méi)有更多的遮蓋，上下滑動(dòng)感覺(jué)更為舒適，所以最終選擇右邊的樣式。
這里說(shuō)明了一個(gè)問(wèn)題：我們做設計時(shí)，應該要考慮到全部的應用場(chǎng)景，必要時(shí)需要把各種頁(yè)面狀態(tài)都設計出來(lái)，這樣全面的考慮，落地才是經(jīng)得起考驗的方案。
4. 詳情頁(yè)改版
改版產(chǎn)品的詳情頁(yè)面，這個(gè)頁(yè)面幾乎是多數用戶(hù)第一次接觸產(chǎn)品，看到的第一個(gè)頁(yè)面，下面分析一下現版本的問(wèn)題：
[案例解析] UI設計師如何用產(chǎn)品思維做設計！
標題視覺(jué)太弱，整體頁(yè)面沒(méi)有重點(diǎn)；
不明確是什么錢(qián)，“0/50”不知為何物，用戶(hù)需要猜；
參加活動(dòng)，用戶(hù)首先會(huì )看活動(dòng)詳情，之后了解時(shí)間地點(diǎn)；
活動(dòng)簡(jiǎn)介下面是活動(dòng)時(shí)間地點(diǎn)，不符合標題描述；
活動(dòng)時(shí)間格式雜亂；
已報名人員應該優(yōu)先給用戶(hù)展示，并且可查看報名人員，不應該只體現已報名人數量，因為活動(dòng)有社交屬性！
改版前后對比：
[案例解析] UI設計師如何用產(chǎn)品思維做設計！
活動(dòng)圖片可自定義
標題加重突出，加活動(dòng)標簽
解釋花費
可查看報名人員，報名可匿名報名
活動(dòng)介紹優(yōu)先查看
加分享按鈕，實(shí)現傳播
時(shí)間格式加“星期”格式
5. 總結
總結思考產(chǎn)品的社交屬性后，增加可查看已報名人員功能。
通過(guò)思考用戶(hù)的操作使用習慣，把信息重新優(yōu)先級排列。
界面的多種形態(tài)，確定按鈕的設計樣式。
從產(chǎn)品的特征思考，增加詳情頁(yè)的分享功能。
最后
此次改版因為直接對接需求方，所以要從產(chǎn)品的角度去設計，不然改版后的產(chǎn)品可能只是設計的更好看了，并沒(méi)有真正解決產(chǎn)品的問(wèn)題。
我們UI設計師在設計前，是非常有必要對產(chǎn)品有充分透徹的了解，需要思考用戶(hù)的真正需求是什么，善于結合產(chǎn)品及交互的思維做設計，這樣才是在用設計解決問(wèn)題。
UI設計師應該是感性的也是理性的，要用感性去尋找靈感，用理性來(lái)將靈感變成具體的設計方案。
訪(fǎng)問(wèn)手機端更方便
技術(shù)創(chuàng )造價(jià)值 服務(wù)締造品牌
Copyright ? 2011-2024 鄭州開(kāi)拓者電子科技有限公司 All Rights Reserved
友情鏈接：
小程序開(kāi)發(fā)