[案例解析] UI设计师如何用产品思维做设计!

今天要跟大家分享的是一个小程序的迭代,通过这次迭代的过程,告诉你怎么分析一款产品,做为UI设计师怎么全局的看待一个产品,以及如何运用产品思维思考设计!

案例解析

有些产品迭代因为项目时间紧急,到UI设计师手里可能是没有原型图的,就是照着线上的老产品优化,增减功能,这时很大程度上需要产品的思维分析、优化页面。下面分析一下这次案例首页存在的问题。

问题一:

“报名管理”的按钮设计会给人一种整个卡片只有最突出的蓝色按钮可以点击,实际上整个卡片也是一个可点击项!

问题二:

“我领取的”应该相对于“我发布的”弱化一些,其次“我领取的”并不符合功能标题,“我参与的”更为贴切!

问题三:

这个算是一个低级错误,“发布中”和“已完成”应该有不同的状态区分!

问题四:

四个标签的设计,识别性低,原因是字小有的颜色相近须要仔细看,应该用差异化的图形体现各自的特征,这样用户对功能的认知更为快速!

问题五:

产品上的问题“创建时间”放这里没有任何意义,因为并不是用户的点,“0/20”让用户一头雾水,不知道是什么意思。(实际上是限定了活动的报名人数,可以看到报名人数的一个进度)

结合这几个问题设计了第一个版本!

主题色运用了小程序图标的颜色,底部导航去掉,这也是主要改版迭代的地方,为了使产品使用更简单直接,突出小工具轻量化特点,去掉复杂多余的元素,让用户打开产品唯一的入口就是产品的核心功能。

但是这次的改版并不能算最理想的方案,分析一下这个页面的设计依据!

产品的特征是把用户分成两种身份,一种是发布者,一种是参与者,现在顶部导航给了两种身份的入口,页面最为突出的按钮是产品的核心功能,这样的设计似乎非常的合理,但是结合一个低频小工具的特征来讲,似乎整个页面结构设计,还不是那么轻量化和直接,参与用户需要点击“我的参与”才能找到所需要的,并不能直接触达用户的目的!

下图再次改版后的页面

经过团队的激烈辩论,最终决定把“我的发布”和“我的参与”放到一起,这样能给用户最直接的感受,原因有以下几点:

1、此产品是小程序并非app,多数用户第一次进入的产品,并非是首页,而是分享到微信群里的活动详情页,用户报名后可返回首页查看活动的记录,所以首页更像一个历史记录。

2、产品的核心功能“活动、招募、点名、通知”都是有时效性的,用完就很少再,用户也很少同时用到好几个功能,所以首页展示的都是用户正在进行中的一个或几个活动项,所以去掉tab选项卡更为直接!

3、低频小工具特点,多数用户使用此产品不会有很多的活动记录,所以最后的版本设计,就体现了更直接触达用户的目的!

但这还不是最终的版本,下面要说的就是很多设计师经常爱犯的错误

上图哪种按钮的形式更符合此产品呢, 从版面上看左边的看起来更舒服些,因为页面给人的视觉感受更平衡饱满。

但是事实上有了更多的记录,左边的长按钮遮挡了更多的内容,而且一个不经常用的大按钮放在那里感觉很多余,所以换成右边的样式,对内容区域没有更多的遮盖,上下滑动感觉更为舒适,所以最终选择右边的样式。

这里说明了一个问题,我们做设计时,应该要考虑到全部的应用场景,必要时需要把各种页面状态都设计出来,这样全面的考虑,落地才是经得起考验的方案!

详情页改版

接下来改版产品的详情页面,这个页面几乎是多数用户第一次接触产品,看到的第一个页面,下面分析一下现版本的问题!

1、标题视觉太弱,整体页面没有重点;

2、不明确是什么钱,“0/50”不知为何物,用户需要猜;

3、参加活动,用户首先会看活动详情,之后了解时间地点;

4、活动简介下面是活动时间地点,不符合标题描述;

5、活动时间格式杂乱;

6、已报名人员应该优先给用户展示,并且可查看报名人员,不应该只体现已报名人数量,因为活动有社交属性!

改版前后对比

1、活动图片可自定义

2、标题加重突出,加活动标签

3、解释花费

4、可查看报名人员,报名可匿名报名

5、活动介绍优先查看

6、加分享按钮,实现传播

7、时间格式加“星期”格式

总结:

1、总结思考产品的社交属性后,增加可查看已报名人员功能

2、通过思考用户的操作使用习惯,把信息重新优先级排列

3、界面的多种形态,确定按钮的设计样式

4、从产品的特征思考,增加详情页的分享功能

最后

此次改版因为直接对接需求方,所以要从产品的角度去设计,不然改版后的产品可能只是设计的更好看了,并没有真正解决产品的问题。

我们UI设计师在设计前,是非常有必要对产品有充分透彻的了解,需要思考用户的真正需求是什么,善于结合产品及交互的思维做设计,这样才是在用设计解决问题。

UI设计师应该是感性的也是理性的,要用感性去寻找灵感,用理性来将灵感变成具体的设计方案!

互联网设计帮(公众号)

作者:XC


(0)

相关推荐

  • 设计思考:设计师如何提高产品思维 ?

    如何提高产品思维呢?文章认为产品思维有5个维度:以用户为中心,逻辑思维,数据思维,市场营销思维,项目思维,可以尝试从这5个维度来提升自己的产品思维. 作为一个互联网公司的设计师,经常会被产品或者资深设 ...

  • 通过实战项目,从UI设计师角度认识产品原型

    UI设计师应该了解原型图是如何产生的. [前言] 1.很多人误解UI设计师做的只是画图标和"填色",也有一些刚入行UI的朋友,拿着原型图就开始做设计稿.其实UI设计师也叫做用户体验 ...

  • UI设计师必读!iOS 10 人机界面设计指南 (3)

    小编:iOS 10人机界面设计指南中文版来了,感谢译者@喵大神经. iOS10发布了,苹果遵循了一切从简但又增加了一些提升用户体验的功能,比如向开发者开放了更多接口,设计者又如何跟随iOS的步伐做好产 ...

  • UI设计师必读!iOS 10 人机界面设计指南 (2)

    小编:iOS 10人机界面设计指南中文版来了,感谢译者@喵大神经. iOS10发布了,苹果遵循了一切从简但又增加了一些提升用户体验的功能,比如向开发者开放了更多接口,设计者又如何跟随iOS的步伐做好产 ...

  • UI设计师必读!iOS 10 人机界面设计指南 (4)

    小编:iOS 10人机界面设计指南中文版来了,感谢译者@喵大神经. iOS10发布了,苹果遵循了一切从简但又增加了一些提升用户体验的功能,比如向开发者开放了更多接口,设计者又如何跟随iOS的步伐做好产 ...

  • 设计师,别再埋头做设计,这些方法比PS都重要

    设计师,别再埋头做设计,这些方法比PS都重要

  • 交互设计师为什么需要具备产品思维?

    虽然还是会每天逛逛 Medium.Samshing 等平台看看国外设计相关的文章,但是好像从来没有给各位翻译过这些优质内容.好在这几年也收集了不少相关好文,所以打算在公众号开一个专栏,挑选我认为内容最 ...

  • UI设计师需要熟知的平面基础

    写在前面 随着互联网的发展带动了 UI 设计的短暂刚需,经过 3-5 年的发展,UI 设计也开始趋于平缓推进中.在此期间很多设计专业内部转岗与非行业转行也是一度热潮. 其中平面设计.电商设计.网页设计 ...

  • 如何成为一名优秀的UI设计师

    操作方法 01 如何成为一名优秀的UI设计师?一个产品能否成功,一方面看产品的质量和性能,一方面看产品的外观和体验,UI设计师要做的就是后者,给产品设计一个精美的外观,同时优化产品的交互性,给用户打造 ...