前言?

今天要跟大家分享的是一個(gè)小程序的迭代乐设，通過這次迭代的過程，告訴你怎么分析一款產(chǎn)品绎巨，做為UI設(shè)計(jì)師怎么全局的看待一個(gè)產(chǎn)品近尚，以及如何運(yùn)用產(chǎn)品思維思考設(shè)計(jì)！

案例解析?

有些產(chǎn)品迭代因?yàn)轫?xiàng)目時(shí)間緊急场勤，到UI設(shè)計(jì)師手里可能是沒有原型圖的戈锻，就是照著線上的老產(chǎn)品優(yōu)化歼跟，增減功能，這時(shí)很大程度上需要產(chǎn)品的思維分析格遭、優(yōu)化頁(yè)面哈街。下面分析一下這次案例首頁(yè)存在的問題。

問題一：

“報(bào)名管理”的按鈕設(shè)計(jì)會(huì)給人一種整個(gè)卡片只有最突出的藍(lán)色按鈕可以點(diǎn)擊拒迅，實(shí)際上整個(gè)卡片也是一個(gè)可點(diǎn)擊項(xiàng)骚秦！

問題二：

“我領(lǐng)取的”應(yīng)該相對(duì)于“我發(fā)布的”弱化一些，其次“我領(lǐng)取的”并不符合功能標(biāo)題璧微，“我參與的”更為貼切作箍！

問題三：

這個(gè)算是一個(gè)低級(jí)錯(cuò)誤，“發(fā)布中”和“已完成”應(yīng)該有不同的狀態(tài)區(qū)分前硫！

問題四：

四個(gè)標(biāo)簽的設(shè)計(jì)胞得，識(shí)別性低，原因是字小有的顏色相近須要仔細(xì)看屹电，應(yīng)該用差異化的圖形體現(xiàn)各自的特征阶剑，這樣用戶對(duì)功能的認(rèn)知更為快速！

問題五：

產(chǎn)品上的問題“創(chuàng)建時(shí)間”放這里沒有任何意義危号，因?yàn)椴⒉皇怯脩絷P(guān)注的點(diǎn)牧愁，“0/20”讓用戶一頭霧水，不知道是什么意思葱色。（實(shí)際上是限定了活動(dòng)的報(bào)名人數(shù)递宅，可以看到報(bào)名人數(shù)的一個(gè)進(jìn)度）

結(jié)合這幾個(gè)問題設(shè)計(jì)了第一個(gè)版本娘香！

主題色運(yùn)用了小程序圖標(biāo)的顏色苍狰，底部導(dǎo)航去掉，這也是主要改版迭代的地方烘绽，為了使產(chǎn)品使用更簡(jiǎn)單直接淋昭，突出小工具輕量化特點(diǎn)，去掉復(fù)雜多余的元素安接，讓用戶打開產(chǎn)品唯一的入口就是產(chǎn)品的核心功能翔忽。

但是這次的改版并不能算最理想的方案，分析一下這個(gè)頁(yè)面的設(shè)計(jì)依據(jù)盏檐！

產(chǎn)品的特征是把用戶分成兩種身份歇式，一種是發(fā)布者，一種是參與者胡野，現(xiàn)在頂部導(dǎo)航給了兩種身份的入口材失，頁(yè)面最為突出的按鈕是產(chǎn)品的核心功能，這樣的設(shè)計(jì)似乎非常的合理硫豆，但是結(jié)合一個(gè)低頻小工具的特征來講龙巨，似乎整個(gè)頁(yè)面結(jié)構(gòu)設(shè)計(jì)笼呆，還不是那么輕量化和直接，參與用戶需要點(diǎn)擊“我的參與”才能找到所需要的旨别，并不能直接觸達(dá)用戶的目的诗赌！

下圖再次改版后的頁(yè)面

經(jīng)過團(tuán)隊(duì)的激烈辯論，最終決定把“我的發(fā)布”和“我的參與”放到一起秸弛，這樣能給用戶最直接的感受铭若，原因有以下幾點(diǎn)：

1、此產(chǎn)品是小程序并非app递览，多數(shù)用戶第一次進(jìn)入的產(chǎn)品奥喻，并非是首頁(yè)，而是分享到微信群里的活動(dòng)詳情頁(yè)非迹，用戶報(bào)名后可返回首頁(yè)查看活動(dòng)的記錄环鲤，所以首頁(yè)更像一個(gè)歷史記錄。

2憎兽、產(chǎn)品的核心功能“活動(dòng)冷离、招募、點(diǎn)名纯命、通知”都是有時(shí)效性的西剥，用完就很少再關(guān)注荠藤，用戶也很少同時(shí)用到好幾個(gè)功能料滥，所以首頁(yè)展示的都是用戶正在進(jìn)行中的一個(gè)或幾個(gè)活動(dòng)項(xiàng)，所以去掉tab選項(xiàng)卡更為直接雁仲！

3疗我、低頻小工具特點(diǎn)咆畏，多數(shù)用戶使用此產(chǎn)品不會(huì)有很多的活動(dòng)記錄，所以最后的版本設(shè)計(jì)吴裤，就體現(xiàn)了更直接觸達(dá)用戶的目的旧找！

但這還不是最終的版本，下面要說的就是很多設(shè)計(jì)師經(jīng)常愛犯的錯(cuò)誤

上圖哪種按鈕的形式更符合此產(chǎn)品呢麦牺， 從版面上看左邊的看起來更舒服些钮蛛，因?yàn)轫?yè)面給人的視覺感受更平衡飽滿。

但是事實(shí)上有了更多的記錄剖膳，左邊的長(zhǎng)按鈕遮擋了更多的內(nèi)容魏颓，而且一個(gè)不經(jīng)常用的大按鈕放在那里感覺很多余，所以換成右邊的樣式吱晒，對(duì)內(nèi)容區(qū)域沒有更多的遮蓋甸饱，上下滑動(dòng)感覺更為舒適，所以最終選擇右邊的樣式枕荞。

這里說明了一個(gè)問題柜候，我們做設(shè)計(jì)時(shí)搞动，應(yīng)該要考慮到全部的應(yīng)用場(chǎng)景，必要時(shí)需要把各種頁(yè)面狀態(tài)都設(shè)計(jì)出來渣刷，這樣全面的考慮鹦肿，落地才是經(jīng)得起考驗(yàn)的方案！

詳情頁(yè)改版

接下來改版產(chǎn)品的詳情頁(yè)面辅柴，這個(gè)頁(yè)面幾乎是多數(shù)用戶第一次接觸產(chǎn)品箩溃，看到的第一個(gè)頁(yè)面，下面分析一下現(xiàn)版本的問題碌嘀！

1涣旨、標(biāo)題視覺太弱，整體頁(yè)面沒有重點(diǎn)股冗；

2霹陡、不明確是什么錢，“0/50”不知為何物止状，用戶需要猜烹棉；

3、參加活動(dòng)怯疤，用戶首先會(huì)看活動(dòng)詳情浆洗，之后了解時(shí)間地點(diǎn)；

4集峦、活動(dòng)簡(jiǎn)介下面是活動(dòng)時(shí)間地點(diǎn)伏社，不符合標(biāo)題描述；

5塔淤、活動(dòng)時(shí)間格式雜亂摘昌；

6、已報(bào)名人員應(yīng)該優(yōu)先給用戶展示凯沪，并且可查看報(bào)名人員第焰，不應(yīng)該只體現(xiàn)已報(bào)名人數(shù)量买优，因?yàn)榛顒?dòng)有社交屬性妨马！

改版前后對(duì)比

1、活動(dòng)圖片可自定義

2杀赢、標(biāo)題加重突出烘跺，加活動(dòng)標(biāo)簽

3、解釋花費(fèi)

4脂崔、可查看報(bào)名人員滤淳，報(bào)名可匿名報(bào)名

5、活動(dòng)介紹優(yōu)先查看

6砌左、加分享按鈕脖咐，實(shí)現(xiàn)傳播

7铺敌、時(shí)間格式加“星期”格式

總結(jié)：

1、總結(jié)思考產(chǎn)品的社交屬性后屁擅，增加可查看已報(bào)名人員功能

2偿凭、通過思考用戶的操作使用習(xí)慣，把信息重新優(yōu)先級(jí)排列

3派歌、界面的多種形態(tài)弯囊，確定按鈕的設(shè)計(jì)樣式

4、從產(chǎn)品的特征思考胶果，增加詳情頁(yè)的分享功能

? 最后??

此次改版因?yàn)橹苯訉?duì)接需求方匾嘱，所以要從產(chǎn)品的角度去設(shè)計(jì)，不然改版后的產(chǎn)品可能只是設(shè)計(jì)的更好看了早抠，并沒有真正解決產(chǎn)品的問題霎烙。

我們UI設(shè)計(jì)師在設(shè)計(jì)前，是非常有必要對(duì)產(chǎn)品有充分透徹的了解蕊连，需要思考用戶的真正需求是什么吼过，善于結(jié)合產(chǎn)品及交互的思維做設(shè)計(jì)，這樣才是在用設(shè)計(jì)解決問題咪奖。

UI設(shè)計(jì)師應(yīng)該是感性的也是理性的盗忱，要用感性去尋找靈感，用理性來將靈感變成具體的設(shè)計(jì)方案羊赵！