激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

案例解析:UI設(shè)計師如何用產(chǎn)品思維做設(shè)計?

發(fā)布時間：2023-12-28 15:52:16 瀏覽量：141次

本文筆者將與大家分享一個小程序的迭代，通過這次迭代的過程，告訴你：怎么分析一款產(chǎn)品？做為UI設(shè)計師怎么全局的看待一個產(chǎn)品，以及如何運(yùn)用產(chǎn)品思維思考設(shè)計？

案例解析

有些產(chǎn)品迭代因為項目時間緊急，到UI設(shè)計師手里可能是沒有原型圖的，就是照著線上的老產(chǎn)品優(yōu)化，增減功能，這時很大程度上需要產(chǎn)品的思維分析、優(yōu)化頁面。

1. 存在的問題分析

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

問題一：

“報名管理”的按鈕設(shè)計會給人一種，整個卡片只有最突出的藍(lán)色按鈕可以點(diǎn)擊的錯覺，實(shí)際上整個卡片也是一個可點(diǎn)擊項。

問題二：

“我領(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)注的點(diǎn)，“0/20”讓用戶一頭霧水，不知道是什么意思。（實(shí)際上是限定了活動的報名人數(shù)，可以看到報名人數(shù)的一個進(jìn)度）

2. 第一次改版

結(jié)合這幾個問題設(shè)計了第一個版本：

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

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

產(chǎn)品的特征是把用戶分成兩種身份：一種是發(fā)布者，一種是參與者。

現(xiàn)在頂部導(dǎo)航給了兩種身份的入口，頁面最為突出的按鈕是產(chǎn)品的核心功能，這樣的設(shè)計似乎非常的合理。但是，結(jié)合一個低頻小工具的特征來講，似乎整個頁面結(jié)構(gòu)設(shè)計，還不是那么輕量化和直接，參與用戶需要點(diǎn)擊“我的參與”才能找到所需要的，并不能直接觸達(dá)用戶的目的。

3. 第二次改版

下圖再次改版后的頁面：

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

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

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

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

但是事實(shí)上有了更多的記錄，左邊的長按鈕遮擋了更多的內(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)版本的問題：

  1. 標(biāo)題視覺太弱，整體頁面沒有重點(diǎn)；
  2. 不明確是什么錢，“0/50”不知為何物，用戶需要猜；
  3. 參加活動，用戶首先會看活動詳情，之后了解時間地點(diǎn)；
  4. 活動簡介下面是活動時間地點(diǎn)，不符合標(biāo)題描述；
  5. 活動時間格式雜亂；
  6. 已報名人員應(yīng)該優(yōu)先給用戶展示，并且可查看報名人員，不應(yīng)該只體現(xiàn)已報名人數(shù)量，因為活動有社交屬性！

改版前后對比：

  1. 活動圖片可自定義
  2. 標(biāo)題加重突出，加活動標(biāo)簽
  3. 解釋花費(fèi)
  4. 可查看報名人員，報名可匿名報名
  5. 活動介紹優(yōu)先查看
  6. 加分享按鈕，實(shí)現(xiàn)傳播
  7. 時間格式加“星期”格式

5. 總結(jié)

  1. 總結(jié)思考產(chǎn)品的社交屬性后，增加可查看已報名人員功能。
  2. 通過思考用戶的操作使用習(xí)慣，把信息重新優(yōu)先級排列。
  3. 界面的多種形態(tài)，確定按鈕的設(shè)計樣式。
  4. 從產(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é)議

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定