發(fā)布時間:2023-12-28 15:52:16 瀏覽量:146次
本文筆者將與大家分享一個小程序的迭代,通過這次迭代的過程,告訴你:怎么分析一款產(chǎn)品?做為UI設計師怎么全局的看待一個產(chǎn)品,以及如何運用產(chǎn)品思維思考設計?

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

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

“我領取的”應該相對于“我發(fā)布的”弱化一些,其次“我領取的”并不符合功能標題,“我參與的”更為貼切。
問題三:

這個算是一個低級錯誤,“發(fā)布中”和“已完成”應該有不同的狀態(tài)區(qū)分。
問題四:

四個標簽的設計識別性低,原因是:字小有的顏色相近須要仔細看,應該用差異化的圖形體現(xiàn)各自的特征,這樣用戶對功能的認知更為快速。
問題五:

產(chǎn)品上的問題“創(chuàng)建時間”放這里沒有任何意義,因為并不是用戶關注的點,“0/20”讓用戶一頭霧水,不知道是什么意思。(實際上是限定了活動的報名人數(shù),可以看到報名人數(shù)的一個進度)
結(jié)合這幾個問題設計了第一個版本:

主題色運用了小程序圖標的顏色,底部導航去掉,這也是主要改版迭代的地方。為了使產(chǎn)品使用更簡單直接,突出小工具輕量化特點,去掉復雜多余的元素,讓用戶打開產(chǎn)品唯一的入口就是產(chǎn)品的核心功能。
但是,這次的改版并不能算最理想的方案,分析一下這個頁面的設計依據(jù):

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

經(jīng)過團隊的激烈辯論,最終決定把“我的發(fā)布”和“我的參與”放到一起,這樣能給用戶最直接的感受,原因有以下幾點:
但這還不是最終的版本,下面要說的就是很多設計師經(jīng)常愛犯的錯誤:

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

但是事實上有了更多的記錄,左邊的長按鈕遮擋了更多的內(nèi)容,而且一個不經(jīng)常用的大按鈕放在那里感覺很多余。所以,換成右邊的樣式,對內(nèi)容區(qū)域沒有更多的遮蓋,上下滑動感覺更為舒適,所以最終選擇右邊的樣式。
這里說明了一個問題:我們做設計時,應該要考慮到全部的應用場景,必要時需要把各種頁面狀態(tài)都設計出來,這樣全面的考慮,落地才是經(jīng)得起考驗的方案。
改版產(chǎn)品的詳情頁面,這個頁面幾乎是多數(shù)用戶第一次接觸產(chǎn)品,看到的第一個頁面,下面分析一下現(xiàn)版本的問題:

改版前后對比:

此次改版因為直接對接需求方,所以要從產(chǎn)品的角度去設計,不然改版后的產(chǎn)品可能只是設計的更好看了,并沒有真正解決產(chǎn)品的問題。
我們UI設計師在設計前,是非常有必要對產(chǎn)品有充分透徹的了解,需要思考用戶的真正需求是什么,善于結(jié)合產(chǎn)品及交互的思維做設計,這樣才是在用設計解決問題。
UI設計師應該是感性的也是理性的,要用感性去尋找靈感,用理性來將靈感變成具體的設計方案。
作者:吳星辰,微信公眾號:互聯(lián)網(wǎng)設計幫
本文由 @吳星辰 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自Unsplash, 基于CC0協(xié)議
熱門資訊
1. 10個免費學習UI設計的網(wǎng)站 提升你的設計能力
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網(wǎng)站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網(wǎng)頁設計、字體...
2. iPhone6的UI設計尺寸規(guī)范,原來如此重要!
想要了解iPhone6界面設計的尺寸規(guī)范嗎?這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范,包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
3. 移動端UI設計中常見的5種APP界面類型,你get到了嗎?
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型,幫助大家更好地了解UI設計的基本知識
4. 12個絕佳的UI設計網(wǎng)站,助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產(chǎn)生點擊欲望,從而提高點擊率。本文將為你...
6. 史上最全,平面設計UI設計必備的77個國內(nèi)外素材、設計資源網(wǎng)站
ui設計社區(qū),大神太多了。3、behance: https://www.behance.net/ ,著名設計... 對于品牌設計師來說,除了圖案素材收集之外,還有一個很重要的,就是設計故...
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
8. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
想了解武漢UI設計培訓班的費用是多少嗎?不知道學UI設計要花多少錢?不妨看看這篇文章,了解UI設計培訓班的學費價格以及學習內(nèi)容。
探索零基礎UI設計培訓的時長與薪資前景。了解數(shù)字藝術教育領域的專業(yè)課程,以及培訓后的職業(yè)發(fā)展機會。
最新文章
同學您好!