本文筆者将與大家分享一個小程序的叠代，通過這次叠代的過程，告訴你：怎麼分析一款産品？做為UI設計師怎麼全局的看待一個産品，以及如何運用産品思維思考設計？

案例解析

有些産品叠代因為項目時間緊急，到UI設計師手裡可能是沒有原型圖的，就是照着線上的老産品優化，增減功能，這時很大程度上需要産品的思維分析、優化頁面。

1. 存在的問題分析

下面分析一下這次案例首頁存在的問題：

問題一：

“報名管理”的按鈕設計會給人一種，整個卡片隻有最突出的藍色按鈕可以點擊的錯覺，實際上整個卡片也是一個可點擊項。

問題二：

“我領取的”應該相對于“我發布的”弱化一些，其次“我領取的”并不符合功能标題，“我參與的”更為貼切。

問題三：

這個算是一個低級錯誤，“發布中”和“已完成”應該有不同的狀态區分。

問題四：

四個标簽的設計識别性低，原因是：字小有的顔色相近須要仔細看，應該用差異化的圖形體現各自的特征，這樣用戶對功能的認知更為快速。

問題五：

産品上的問題“創建時間”放這裡沒有任何意義，因為并不是用戶關注的點，“0/20”讓用戶一頭霧水，不知道是什麼意思。（實際上是限定了活動的報名人數，可以看到報名人數的一個進度）

2. 第一次改版

結合這幾個問題設計了第一個版本：

主題色運用了小程序圖标的顔色，底部導航去掉，這也是主要改版叠代的地方。為了使産品使用更簡單直接，突出小工具輕量化特點，去掉複雜多餘的元素，讓用戶打開産品唯一的入口就是産品的核心功能。

但是，這次的改版并不能算最理想的方案，分析一下這個頁面的設計依據：

産品的特征是把用戶分成兩種身份：一種是發布者，一種是參與者。

現在頂部導航給了兩種身份的入口，頁面最為突出的按鈕是産品的核心功能，這樣的設計似乎非常的合理。但是，結合一個低頻小工具的特征來講，似乎整個頁面結構設計，還不是那麼輕量化和直接，參與用戶需要點擊“我的參與”才能找到所需要的，并不能直接觸達用戶的目的。

3. 第二次改版

下圖再次改版後的頁面：

經過團隊的激烈辯論，最終決定把“我的發布”和“我的參與”放到一起，這樣能給用戶最直接的感受，原因有以下幾點：

1. 此産品是小程序并非app，多數用戶第一次進入的産品，并非是首頁，而是微信群裡的活動詳情頁，用戶報名後可返回首頁查看活動的記錄，所以首頁更像一個曆史記錄。
2. 産品的核心功能“活動、招募、點名、通知”都是有時效性的，用完就很少再關注，用戶也很少同時用到好幾個功能。所以，首頁展示的都是用戶正在進行中的一個或幾個活動項，所以去掉tab選項卡更為直接！
3. 低頻小工具特點，多數用戶使用此産品不會有很多的活動記錄，所以最後的版本設計，就體現了更直接觸達用戶的目的。

但這還不是最終的版本，下面要說的就是很多設計師經常愛犯的錯誤：

上圖哪種按鈕的形式更符合此産品呢， 從版面上看左邊的看起來更舒服些，因為頁面給人的視覺感受更平衡飽滿。

但是事實上有了更多的記錄，左邊的長按鈕遮擋了更多的内容，而且一個不經常用的大按鈕放在那裡感覺很多餘。所以，換成右邊的樣式，對内容區域沒有更多的遮蓋，上下滑動感覺更為舒适，所以最終選擇右邊的樣式。

這裡說明了一個問題：我們做設計時，應該要考慮到全部的應用場景，必要時需要把各種頁面狀态都設計出來，這樣全面的考慮，落地才是經得起考驗的方案。

4. 詳情頁改版

改版産品的詳情頁面，這個頁面幾乎是多數用戶第一次接觸産品，看到的第一個頁面，下面分析一下現版本的問題：

1. 标題視覺太弱，整體頁面沒有重點；
2. 不明确是什麼錢，“0/50”不知為何物，用戶需要猜；
3. 參加活動，用戶首先會看活動詳情，之後了解時間地點；
4. 活動簡介下面是活動時間地點，不符合标題描述；
5. 活動時間格式雜亂；
6. 已報名人員應該優先給用戶展示，并且可查看報名人員，不應該隻體現已報名人數量，因為活動有社交屬性！

改版前後對比：

1. 活動圖片可自定義
2. 标題加重突出，加活動标簽
3. 解釋花費
4. 可查看報名人員，報名可匿名報名
5. 活動介紹優先查看
6. 加分享按鈕，實現傳播
7. 時間格式加“星期”格式

5. 總結

1. 總結思考産品的社交屬性後，增加可查看已報名人員功能。
2. 通過思考用戶的操作使用習慣，把信息重新優先級排列。
3. 界面的多種形态，确定按鈕的設計樣式。
4. 從産品的特征思考，增加詳情頁的分享功能。

最後

此次改版因為直接對接需求方，所以要從産品的角度去設計，不然改版後的産品可能隻是設計的更好看了，并沒有真正解決産品的問題。

我們UI設計師在設計前，是非常有必要對産品有充分透徹的了解，需要思考用戶的真正需求是什麼，善于結合産品及交互的思維做設計，這樣才是在用設計解決問題。

UI設計師應該是感性的也是理性的，要用感性去尋找靈感，用理性來将靈感變成具體的設計方案。

作者：吳星辰，互聯網設計幫

本文由 @吳星辰 原創發布于人人都是産品經理。未經許可，禁止轉載。

題圖來自Unsplash, 基于CC0協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部