首页

浅谈简约交互设计四策略

资深UI设计者

今天小编来带大家了解一下如何让产品能更加简单易用的四个设计策略:合理删除、分层组织、适时隐藏和巧妙转移;

交互原型细节提升之路

资深UI设计者

之前发布了几篇关于组件如何构建的文章,大家对组件的整体构建步骤有了一定的了解,整体的大框架上都较为熟悉。本次分享主要切入点是如何运用设计规范以及前端基础知识来辅助,进行原型交互细节提升,希望本次分享能够带给大家帮助。

设计师怎么玩概念

资深UI设计者

整个体验设计的大趋势是和社会科学的那一套思路走得越来越近,因此现在大家可以观察到做交互设计或者用户研究经常会借鉴心理学/社会学的研究方法去应用成熟的理论模型甚至建立模型、去“玩概念”,但可惜的是咱这一行大多数设计师都没有这样的教育背景,就算是所谓的“大厂公众号出品”,也难免会有思虑不周的时候。

交互设计之组件认识与解析

前端达人

组件是设计师常用且基础的知识点,随着软件设计和开发越来越成熟,已经延伸出很多的类型,能否正确合理的使用也是衡量交互设计水平的一个标准。文章里理论知识比较少,我想说点比较实用的东西,给大家解惑。所以关于基本的控件/组件类型的基础知识不做过多说明,理论和实践相辅相成,理论知识大家可以去优秀平台学习并吸收,但实践需要带入更多的思考。


分清控件和组件

 

控件可以理解为平台系统定义的某种形式,严格意义上来说,控件的专业叫法为“原生控件”,不过大家都习惯性的顺口说“控件”,这样会更简单点。


组件从字面理解就是组装而成,在技术层面,代码是需要封装的,那被封装在一起,就可以形成组件,能自定义内容,名称等。


原生控件相比较组件,颗粒感更细,一个组件可以包含多个控件,单个控件也可以作为组件。可以使用一个简单的例子来阐述他们的关系,控件就好比是药材,那么药方就可以理解成是一个组件。如果还不能理解,那可以用更具体的案例来说明下;

 

如下图是用户登陆流程中的一个交互组件,该组件由两种原生控件来组成,输入框和按钮,这样结合就构成“账号输入”的组件;

 

 

 

 

 


再如下图,单独的输入框控件也可以成为一个独立的“账号输入”组件;

 

 

 

 

 

 

以上两个例子,说明了组件可以由单一或多个的控件类型进行组成,如何去定义组件的构成,其实还需要结合具体的设计需求,上面第一个组件给账号修改增加一个按钮的控件,让用户可以通过按钮清除所有的字段,让用户直接重新输入,通过手动和按钮操作的两种方式去进行账号修改,第二个组件仅支持手动键入进行修改。通过增加了清除的交互方式,组件的构成就会有不一样的设计方式。

 

再深入聊下组件

 

各平台基本都有自己独立的设计体系,有自己定义的组件和组件库,学习组件要了解它分为基础组件和业务/高级组件两种类型。基础组件是一种底层组件,例如输入框、按钮、单选框;其特点是比较独立单一,通用性很强,适应各种业务场景;业务组件是一个基础组件集合而成的大组件,也可以叫高级组件,是复合型的区块组件,主要是针对解决业务问题;如下截图是flomo笔记用用的网页版本,以它的首页为例;页面按照左右结构类型区分,可以定义为两个大的业务组件,由浅入深,可以再细分,得到再定义更多的业务组件,这里,我以“发布笔记”的组件具体说明下,它是怎么组成来解决业务问题的;首先我们拆解下组成部分:文本内容,工具按钮(添加标签和图片、文本编辑、快速引用等三种类型),发布按钮。用户发布笔记的行为主要为文字输入-内容编辑-发布完成;结合用户行为和组件设计,解决了用户输入文本内容,给笔记归纳,增加图片,修改文本样式,快速引用,最终进行发布的问题。产品在迭代过程中,我们会发现更多的需求,业务组件就要通过再优化帮用户解决实际问题。

 

 

 

 

 

 

学做组件管理

 

结合自己的学习和设计经验,我把组件相关的内容和知识整理定义为组件管理,包括组件的样式定义,组件和组件库设计,搭建,沉淀优化应该都算是它的组成部分。组件和组件库作用,和基本概念我就不做过多描述了,毕竟市面上关于这些内容已经有很多了,我想从小的点去做深度思考,讲点有用的东西,呈现给大家;组件和组件库首先一定是遵循和围绕着设计的原则、理念、目标去构思,如苹果的《人机交互指南》里面提到的系统设计三大主旨(清晰、遵从、层次)和六大原则(完整性、一致性、直接性,反馈感、隐喻性、控制感),安卓系统《材料设计1,2》中提到的三大原则(材料就是隐喻、大胆,生动,有意、运动提供意义)。还有国内b端最权威的蚂蚁设计体系Ant design,从设计价值观延伸设计原则,从而思考设计模式。

 

 

 

 

 

这里可以总结,平台在创造设计标准时,思考的方向都会不一样,所以系统遵循什么,没有统一的模式,况且这些名词本身就很抽象,这需要设计师们去思考应该把平台系统设计成什么样。这确实很依赖和考验设计师各方面的综合能力。所以组件设计和搭建,它并不是某一个人的事,而是整个团队的任务。

组件和组件库的设计和搭建过程中,需要了解系统平台,是苹果端还是安卓,web端,不同的系统设计的差异性很大,对应系统的控件类型我们也要很熟练的掌握。例如安卓一直保留的原生的底部导航栏的操作控件(返回、主页、菜单),反观苹果最早出现在底部的HOME键,随着硬件设计的升级,物理按钮的作用已经完全被交互手势操作替代,根据设计准则,可以先设计出确定的初版组件样式,然后设计师们要熟悉项目业务,深挖每个功能中的不同业务场景,并设计出对应的业务组件;这样设计师最终对于当前组件进行整合分类,做出版本的组件库;组件和组件库是设计和开发相结合的,设计师呈现页面上的模块是直观的,但都是技术人员进行底层代码拼接的再封装而成的,有规模的公司一般都会做成开源的组件库。去提升项目人员之间的协作效率,复用率高,节省成本。如下图是Ant design里面的部分按钮组件的样式和代码演示,作为国内独一档的免费学习的设计体系网站。如果大家能够从头到尾研究一遍,相信对你构建组件和组件库有十分大的帮助。

 

 

 

 

 

最后组件和组件库的优化迭代是贯穿整个产品设计的生命周期的,从搜集组件需求、思考组件优化、设计组件优化方案、验收更新组件和组件库;

 

搜集组件需求

 

项目角度:设计师开发过程中遗漏的、新的业务场景中发现的组件问题,设计和开发者评审讨论出来的包括影响协作效率的,不合理的问题;用户体验:产品中的用户反馈的功能体验不好,使用时体验差的模块;外部借鉴:团队人员从优秀的组建案例中发现的可借鉴的需求;

 

思考组件优化

 

思考方向1:设计师可以查阅资料,研究优秀的组件平台,从成熟的产品中查看同类的组件设计案例;或者和开发者、设计师进行深度交流,得到有用的建议;

 

思考方向2:结合业务场景,最好能够将应用场景穷举梳理出来,具体到某个的功能,考虑该功能里存在的每一个场景中,组件需要有什么样的状态和变化;

 

设计组件优化方案

 

设计师根据以上步骤完成组件优化的分析之后,可以相对应的设计组件优化方案,组织开发人员一起多次的评审,大家一起去讨论完善,最终技术人员再进行组件代码的开发和封装;组件设计优化,设计师要注意在既定的设计原则下合理优化,要保留分析材料和思考过程,进行有理有据的评审论证;

 

验收更新组件和组件库

当开发人员将组件样式通过代码落地之后,优化中的组件方案需要带入到实际功能场景中进行测试检查,验证组建优化的是否符合预期,在优化过程中,可以用一张《组建优化表》进行记录,可以方便项目人员追踪和查看。

 

组件设计的应用和思考

 

组件的设计本质上也是为了解决某种特定场景的问题。例如提示弹窗,为了让用户在操作过程中有反馈提示,提示中又可以通过解决某种场景问题,选择让用户进行操作或者不操作,所以平台设计出这种弹窗组件,即模态和非模态弹窗类型。下面通过两个例子,结合功能和场景具体分析产品应该如何做组件设计;

 

案例1:支付宝“商家转账功能”组件设计

 

我们去商店购买东西使用支付宝支付的过程中,可以通过扫描商家二维码,进行转账交易,转账支付的流程主要包括输入数额,选择支付方式,确认支付;因为每个流程中的组件都十分复杂,我们仅拿其中一个流程,对用户操作过程中涉及的组件进行拆解说明;输入金额和添加备注流程:页面的组件主要是用户信息文本,输入框、备注组件、键盘控件,弹框组件;这个流程包括2个行为事件,4个大的业务场景;

 

 

 

 

 

行为事件一:用户在商店通过扫码商家二维码,分别两次给商家转账20000和100000元的金额,

 

业务场景1:用户没有输入任何金额

业务场景2:用户转账输入的金额没有超过限制

业务场景3:用户转账输入的金额超过最大限制

 

 

 

 

 

 

业务场景123主要应用金额输入框组件,输入框组件根据用户操作行为,会有不一样的设计,用户没有任何操作,输入框内有默认文案提示“输入付款金额”,用户输入金额后,计算单位超过‘百’,数字金额上方会有单位提示,同时显示删除按钮,支持删除,重新输入,业务场景2中根据金额输入范围定义了产品业务规则,再细分出三种场景,不同范围内的金额,可以对应的组件设计方案解决确认转账确认问题;

 

(1)当输入金额范围在1-50000,进入新页面,通过点击按钮组件,进行转账确认

(2)当输入金额范围在50000-99999,在当前页面使用模态弹框组件,进行转账确认
(3)当输入金额范围在100000-999999,进入新页面,重新输入框内输入转账金额,进行确认,若两次金额不一致,出现弹窗提示用户操作。

 

 

 

 

 

当输入的金额超过限制后,弹框组件配合进行超限的toast提示。

 

通过拆解行为事件1,我们细分出了3个业务场景,通过运用输入框、键盘、和toast弹窗,它们相互关联解决了输入金额产生的各种问题;

 

无金额输入时,输入框能给予用户提示,这是比较常见的输入框组件设计,预置提示文本;

 

输入金额未超出限制,输入框中会带入计量单位,这就是组件设计的细微之处,转账金额是一个关联自己财产的行为操作,应当是需要谨慎的,所以计量单位也是在用户输入过程中出现,给用户一个提示,没有任何打断操作的意思,出现的时机很适合,再加上输入的文本数字已经足够醒目,能够提示用户输入有足够的准确度,如果没有加入这个字段,确实也不影响用户操作,但这种双重衡量的方式,潜意识里会让自己输入的更放心,不怕自己有误差;这就是组件设计给用户带来的惊喜感。

 

金额超出限制后,通过组件toast提示“付款金额超限”,第一提示框组件很好的限制键盘的数字输入,避免用户无效输入,第二toast提示框的触发时机设计,这里的方案是当输入金额超百万,按数字键盘的时候就会给予提示,而不是等用户输入完之后,再去按确认键的时候,弹出来提示金额超限。

 

行为事件二:用户点击备注按钮,添加转账信息。

 

业务场景4:确认完成输入金额后,给商户添加备注信息,20个字以内;

 

输入转账金额后,文字键盘上方出现备注按钮,点击弹出备注信息弹窗,在弹窗的输入框中写备注信息,其实添加备注,可以在页面中使用文本框,可为何去使用弹窗中增加输入框,确认之后再展示到页面中呢?输入金额和添加备注的行为的优先级来看,备注信息应该是比较低的,信息的展示的重要性也比较低。首先如果使用文本框,和输入框的组件层级在同一级,用户的关注点会被干扰,所以使用不突出的文字按钮组件进行区别,另外备注文字按钮出现的触发条件也是因为有输入金额这个动作,所以备注的信息展示在产品设计中就是很弱。另外在弹窗输入框中也提示了备注信息20个字以内,有这样的信息规则,弹窗组件比文本框更适合短文本的信息录入,这样和金额输入框组件能够被区分。

 

转账是涉及财产安全的业务,所以组件的设计除了解决不同场景下用户体验问题(及时反馈、合理提示、增加惊喜、操作方便),还要处理核心的业务问题(保证用户的财产问题)

 

 

案例2:“高清晰度体验引导用户付费功能”的组件设计

 

最近在做智慧电视项目时,产品经理提出在播放器页面,做一个“非会员用户可以体验视频高清晰度“的需求,主要目的是为了引导用户体验高清晰,提升用户的会员充值率。这里就通过解析如何通过组件设计解决这个问题;

 

首先我们结合业务规则有以下两点

(1):该视频内容资源是付费试看还是免费

(2):高清晰度体验时间,单次内容高清晰度体验时间,累计高清晰度体验总时间

 

考虑到用户在全屏播放器,需要尽量少的对用户观影降低干扰,所以在设计时,利用提示框的组件,针对不同场景状态,对组件进行设计优化。

 

用户观看付费影片,因为试看提示,通过操作按钮键,所以高清晰度体验的提示,通过提示文案来引导,避免按键操作冲突,组件设计如下图;

 

 

 

 

 

在体验过程中,播放器单次高清晰度体验时间会有状态变化,即正在体验-将要结束-已结束,组件设计如下图:

 

 

 

 

累计体验总时间结束后,再次进入到播放器,组件设计变为提示用户该片有高清晰度,组件设计如下图:

 

 

 

 

 

用户观看免费影片,因为片源免费,没有其他场景下的按键冲突,所以高清晰度体验的提示,通过提示“文案+按钮”来引导,组件设计如下图;

 

 

 

 

 

体验过程中,播放器单次高清晰度体验时间也有状态变化,即正在体验-已结束,组件设计如下图:

 

 

 

 

累计体验总时间结束后,再次进入到播放器,组件设计变为提示用户该片有高清晰度,并可以点击操作,组件设计如下图:

 

 

 

 

 

 

在提示组件设计整个过程中,考虑了用户会员身份、视频资源付费类型、高清晰度体验时间等等因素,要持续保持用户能够触达会员充值的页面,所以在不同的情况下,始终保留遥控器按键可以操作,引导他们付费,虽然频繁的提示可能让用户反感,但最终功能上线后,也确实拿到了一定的成果,提示组件设计让用户付费充值率有很大的提升。

 

总结


组件设计的解析到这里就告一段落了。带大家回顾下文章的内容,主要有四点,第一点通过例子解释了控件和组件的区别,第二点介绍了基础和业务组件,第三点讲解了如何进行组件管理的内容,第四点通过两个具体的案例讲解了组件设计在实际产品中的应用和我的一些思考;总结以上几点,组件设计一定不能脱离用户场景和产品业务。在这个基准下思考组件设计才会有最优解。

 

 

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发



作者:Q什伍
链接:https://www.zcool.com.cn/article/ZMTU2ODA1Ng==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

B端交互设计之内容太多怎么办

资深UI设计者

B端交互设计之内容太多怎么办

ZZiUP
北京
/
设计爱好者
/
3年前
/
10353浏览
版权
私信
关注
B端交互设计之内容太多怎么办

ZZiUP
关注
做设计的时候,尤其是B端页面,我们一般按常用的场景去设计,但是内容过多的时候如何在页面中更好的显示呢?
我们知道B端产品设计场景更复杂,内容更加不可控,再加上电脑屏幕大小适配,页面宽度可自由拉伸,种种因素都要我们更加仔细的考虑页面的各种极限值情况,如何写全面设计规约是难点。相信在设计评审会上开发和测试最常问到的一个问题也是:这里内容过多怎么展示?虽然我们在设计的时候是按照80%的场景去考虑,但是剩下20%的极限场景也需要我们给出设计规则。我根据工作中遇到的内容过多的情况整理了以下这么多,当然解决办法也可能有更好的方式,都欢迎大家补充~~

【目录】

一、文字过多

1、标题文字过多

   标题因为页面、模块等宽度限制,标题文字超长的极限情况如何显示必然是需要考虑的。

   具体设计和写设计规则时要考虑场景、功能、页面布局等等情况再选择处理方式。

1)只有标题

a打点:

注意要根据页面布局结构,给出标题最大宽度,然后标题文字过长打点,hover出tips;优点是保持页面简洁、方便对齐;缺点是无法直观看到全部内容;

b折行:

给出标题最大宽度,然后标题文字过长则折行显示;优点是能够直观显示出全部内容,缺点是内容太多的话视觉不友好:

c先折行再打点:

给出标题最大宽度,然后标题文字过长则折行显示,折超过(比如2行)再打点。适用于大部分场景下最多2行就能显示全,而且文字内容对用户非常重要

2)有标题还有其他说明文字时

 当分组标题和说明文字结合时,一般要优先显示标题区域;当到达说明文字最小间距(比如40px)时,标题打点,说明文字显示不下也打点;hover时出tips

3)表单的标题

 标题文字较多时一般换行显示,最多显示(比如2)行,更多打点显示,鼠标经过显示tips;换行后算整体高度,距离下面的表单间距保持一致;

4)打点的规则

也就是从哪里开始打点,也是需要根据场景考虑的:

a.尾部打点,也是最常用的

b.中间打点,比如sketch画板的标题展示不全时是从中间开始打点的;

c.特定位置打点,比如标题里人名字过多时,没办法展示全,但是后边的【等120人打标签】又是极其重要的信息,这时候就需要给定人名称一个最大展示的宽度,超过最大宽度就在最后一个人名处打点显示;

2.文本框内文字过多

文本框需要考虑单行文本/多行文本、激活态/展示态下文字过多如何显示

1)单行文本

a有字数限制

很多场景下,输入框都不是无限输入的,需要产品给出最大范围,这时主要考虑校验报错问题:

在搜索框,往往会设置最大字数,超过则会截断:

b无字数限制

输入状态时,文字过多,光标定位在输入框末尾,可无限输入,输入框头部内容向前隐藏/截断:

展示态时,内容从头部开始显示,输入框末尾打点,或者渐隐,hover时可以选择出不出tips:

输入完成后的一些交互:

还有一种处理方式就是,超过字数限制后直接截断,不让输入。

2)多行文本

a有字数限制

b无字数限制

3.介绍/说明文字过多

用按钮,展开收起内容,展开收起可以常驻,也可以设置在鼠标hover时在显示出来。

二、弹层内容过多

1、确认对话框

宽度自适应,文字自动换行,设置最大宽度;设置最大高度,内容过多则出滚动条;还要给出滚动区域,比如标题+内容的区域高度;

2、tips提示

tips宽高根据文字内容自适应,设置最大宽度;文字过长时自动换行,设置最大高度,超过最大高一般多于的数据不展示,因为tips都是比较轻的提示;

3、警告提示

宽度自适应,文字自动换行。设置容器最大高度,标题+内容数据过多,则产生滚动条

4、全局提示

容器宽高自适应,给出最大宽高,大于最高高度时出现滚动条,反馈信息建议精简到一至两行,icon位置固定不变。

5、模式弹层

弹层宽/高度可以给出定值,也可设置占视窗的百分比,设置占视窗的百分比,为了避免在窗口放大和缩小时弹层无限大或者无限小,一般就要同时设置最大最小宽度定值。比如设置弹层最大高度为页面高度90% ,也可以设置100%,即高度全屏的弹层;高度超过页面高度 90%时,则显示滚动条,最小高300px;宽度在600px到1000px之间自适应。

不管是什么弹层,其实都是承载内容的容器,内容很多时,容器不能随内容无限大就需要设置最大最小值或者百分比。

三、选项过多

1、选项较少

当选项较少,空间足够时,可以把选项平铺展示,一方面能让用户直观看到所有选项,另一方面也能减少用户操作步骤;可以设置单选、复选

2、选项较多

当选项很多,空间不够时,需要用弹层把选项收起以节省页面空间;

1)单选下拉选择器

当下拉内容还很多,而且需要分类,那么就需要:分组下拉选择器

2)复选下拉选择器

a.个数过多

复选下拉框内选中项【个数】过多时,需要给出下拉框的最大高度,超过最大高度则折行,出滚动条:

b.字数过多

选中项【内容】过多,需要给出选中项文字一个最大宽度,超过打点hover时显示tips

c.弹层规则

【下拉弹层内】根据下拉选项内容自适应撑开,还需要给出弹层的最大高度为(比如290px),内容过多产生滚动条;

d.加入搜索功能

如果下拉弹层内,选项非常多,那么用户应用起来比较费劲,虽然有滚动条能展示全部选项,但是从这么多选项中选出某个选项就比较难了。这时就可以在弹层上加【搜索框】解决,方便用户搜索;也可以在下拉选择框上直接设置检索功能;

四、按钮/标签过多

1、用按钮收起

最常用的解决方法就是用【更多按钮】收起更多不常用的按钮或标签;

比如:

2、箭头切换,轮播

还可以用【左右箭头】的方式进行切换:

3、渐进式设计

预先判断用户的操作,在用户进行特定操作后再出现按钮;渐进式设计是目前比较流行的,也是用户体验比较好的。

1)hover时再出现要操作的按钮:

2)勾选复选框后出现按钮:

如下图,选中选项后,筛选自动收起为一行同时操作区域出现覆盖筛选区,表格随着筛选移动;
取消所有勾选项或是点击关闭按钮,操作区收起恢复成筛选区,筛选恢复成勾选前的状态;

还有teambition的文件库,复选框勾选前:

复选框 勾选后出现行操作按钮,按钮覆盖标题的位置:

3)根据编辑态和展示态进行区分:

展示态下页面比较整洁,不显示多余的按钮:

编辑内容后,出现操作按钮:

输入完成后的展示依然比较整洁:

五、表格内容过多

B端产品的页面常常会用到表格来承载一条条数据/记录,那最好的情况就是表格列数较少,在最常见尺寸的屏幕下就能够全部展示:

但是,往往表格字段比较多,列数多会出滚动条,行数多出分页;

出现滚动条时为了关键的信息能够一直显示,常常会锁定首列或者操作列:

1、左侧列锁定:

锁定后,滚动数据列表内的滚动条左侧列首位置不动,只滚动右侧的数据,向左滚动的数据会被列首区域遮挡;

2、右侧列锁定:

滚动数据列表内的滚动条右侧列尾位置不动,只滚动左的数据,向右滚动的数据会被列尾区域遮挡;

3、横向滚动条

数据宽度超过屏幕宽度,则显示横向滚动条

4、纵向滚动条

数据高度超过屏幕高度,则显示纵向滚动条;滚动范围为表头与分页之间的内容区域;

六、功能过多

1、用导航划分

页面结构层面上信息过多一般会用一级导航,二级导航的形式划分内容

2、切换页签收纳

页面内容过多还常常用页签来收纳;

3、加入面包屑

当页面层级较多时需要加面包屑引导用户如何返回,告知用户的位置;面包屑不仅能让用户不迷路,还可以用来快速定位内容,便于用户快捷的选择;

4、抽屉收纳

抽屉可以收纳很多内容和操作同时保持页面整洁。

做设计的时候,尤其是B端页面,我们一般按常用的场景去设计,但是内容过多的时候如何在页面中更好的显示呢?

交互思考:怎么设计任务流程

资深UI设计者

任务,到底是怎么来的?是原本就存在的?还是人为设计而来的?

我理解中的交互设计与浅谈对苹果产品的人机交互与其设计哲学的感受

资深UI设计者

在之前文章的基础上加入了一些图示,可视化自己的理解

写文章来整理自己的思路,再谈谈自己对苹果产品的感受,欢迎一起讨论啊

看懂设计(合集):交互设计原则在设计工作中的理解和应用

资深UI设计者

本篇旨在简明扼要地向大家介绍交互设计中的一些原则,帮助大家理解和真正在工作中应用

设计师如何做产品需求分析:先聊聊两个“价值”

ui设计分享达人

近两年出现了不少“解放设计师双手”的设计工具、AI工具,我们似乎能很快输出N种流程方案、N种布局方案、N种UI风格等等。问题是:这样穷举设计方案的工作方式当真有效吗?
 
请警惕“莫得感情”的出图机器!具备竞争力的设计师必须有自主意识,包括清晰的思维逻辑、果敢的决策力。而体现这一意识和能力的重要环节之一,就是产品生产链路中的首个环节“需求分析”。
 
需求分析并不仅仅是产品经理的事儿。从共同目标的角度来看,互联网企业在岗位划分上区分了产品经理、设计师、开发工程师等,是顺应人的精力时间有限、术业有专攻的自然规律,但是从业务目标来说,每一个岗位都应该对“最佳用户体验和最大化商业利益的平衡”负责,确保这艘船在正确的航道上。所以,如果每个“船员”都具备主人翁意识和需求分析的能力,航程必然更健康稳健。
设计师如何做产品需求分析:先聊聊两个“价值”
 
 
对设计师来说,需求分析不仅仅是“这个功能要不要做”的问题,也会影响后续的设计方案决策。每一次的功能增删或调整,都是在改变用户接收产品界面信息的整体效用,那么每一个产品需求的分析都要评估这个功能在整个信息架构、用户体验链路的位置孰轻孰重,也就必然会影响你的设计方案决策。
 
产品需求从哪里来?
 
“有用户反馈说……"
“国庆节快到了,我们策划了一个活动……”
“这个付费转化率很低,达不到预期。我们想……”
……
产品需求的来源多种多样,可能来自产品经理、用户反馈、产品数据、市场风向、技术革新等等。当然,还有来自作为设计师的”我自己“。当我灵光一闪想到一个很炫酷的小创意,情感上免不了自以为是地想”咱们产品这么不做这个“——这个时候我也会用需求分析的框架来质问自己:
“值不值得做(价值评估)”、“应当先做什么(优先级)”、“用户需求要满足到什么程度(核心体验链路)”这三个问题。
 
做需求分析,要想什么?
我们常说产品需求要“洞察用户真正的需求”,要明确“用户价值”。刚入行的时候,我们都会点点头,心想“对哦”。可是什么是“真正的”、什么是“假的”、什么是“价值”?说实话,这些概念都挺虚的。只有当理论落到某个用户场景去分析,我们才能理解其深意。
 
先说点虚的,什么是“价值”?
 
价值是多维度的概念,在不同的学科中都会在“价值”前加一个表范围的定语,比如“劳动价值”、“经济价值”、”社会价值”。随着互联网的发展,我们出现了两个重要的新词“用户价值”和“产品价值”。
 
对于用户而言,他们购买或使用产品或服务是为了满足特定的需求,比如提升效率、获得愉悦、获取经济收益等。那么我们说这个产品具有“用户价值”。
 
所以需求分析首先是“评估价值”,而价值评估则拆分为“用户价值”和“商业价值”两部分。即使当下的需求目标是提升用户规模(拉新、促活、挽留等),并不需要用户掏钱,也是为了实现长远的商业价值。当然,这仅适用于以盈利为目标的企业,非盈利组织还有“社会影响力”的目标,不在本文讨论范围内。
 
下面我们进一步拆解价值评估:“用户价值评估”和“商业价值评估”。
设计师如何做产品需求分析:先聊聊两个“价值”
 
 
1、用户价值评估
解决哪些用户在什么场景下的什么问题?
 
这个问题越具体到“人”,就越容易分析。如果需求来自于用户反馈,我们溯源到具体的用户。
 
有一个朋友出去创业,想做一个“找饭搭子”的同城陌生人交友软件。他说,偶尔看到微信朋友圈有人召唤“有没有人一起探店”的动态,去网络社区搜索“饭搭子”、“同城探店”等词汇也能看到不少帖子。而且探店吃饭这件事直接关联消费,商业模式很清晰。他想通过他的产品解决“用户|在探店场景中|无法及时找到饭友”的问题。——“找饭友”是一个行为动作,没有切入到用户的内在需求。
 
定义用户价值不能只停留在“行为上”,可以尝试找到目标用户做定性访谈,进一步深挖问题。比如,我们想进一步把问题下钻,可能会问到这些问题:
 
● 用户为什么要找饭友?不能一个人探店?
● 用户为什么找不到“饭友”?
● ……
 
我们进一步细化“用户-场景-问题”的价值定义:
解决 一线城市年轻用户(尤其是刚迁移新城市的年轻人)|通过约伴探店|解决 同好交友(社群需求)、 “量大”餐馆均摊成本(省钱需求)、获得更愉悦的吃饭氛围 (情绪需求)的问题。
设计师如何做产品需求分析:先聊聊两个“价值”
 
 
那有了这个用户价值定义是不是就可以顺利立项呢?——看这个文章的篇幅,你只读了不到一半,当然还有更多需要推敲的问题,请继续阅读。
 
这个需求接触不到真实用户怎么办?
 
有时候我们的需求来源可能是市场风向、技术革新带来的未知变化。我们无法直观地获知“具体的用户是谁”、“TA在什么场景遇到什么问题”。
——这种情况,我们则需要反向思考:这个需求如果做了,获益的用户是谁?满足了他们在什么场景下的需求?如果不做,用户会不会因此弃用我们的产品?可能流失的用户,大盘占比可能是多少?是不是高价值用户?
设计师如何做产品需求分析:先聊聊两个“价值”
 
 
用上面的思路去层层推敲,可能会否定原来的产品策划,可能会挖掘出新的需求,可能会改变需求的优先级。
 
值得一提的是,有时候经过层层推敲,最终得到的决策可能会与市面上的竞品有所雷同。也就是我们经常会问的一个问题:为什么A产品已经做了这件事,B产品还要做同样的事情?
 
有的功能或服务是顺应用户需求而产生的,如果有所缺失,就无法达成用户目标。比如短视频产品都会做点赞和评论,因为视频创作者和消费者分别有“获得认可”的被尊重诉求、”表达意见“的掌控欲等心理需要。而产品则需要这些点赞和评论数据去评判内容热度和丰富个性化标签,以优化内容的推送机制。很多同一赛道的产品会有雷同的功能,虽然常常被调侃为”相互抄“,但是真正做需求分析才能看清“什么是无脑抄”、“什么是必然如此”。
 
2、商业价值评估
用户会为你这个新产品/新功能买单吗?
 
我们找到一个有用的需求点是简单的,因为需求的来源真的太多太多,但是当我们发现,用户不一定会为我们的新产品或新功能买单。
请注意,这里的“买单”不限于用户掏钱,还包括用户决定使用哪个产品的决策成本、用户愿意花费在某个产品的时间和学习成本等。
 
那我们怎么预判用户会不会买单呢?或者,如何提升用户的买单意愿呢?
 
如前面所言,“用户价值”就是通过你的产品获得了预期的效用。效用可以是省了时间、省了钱、省了学习成本、获得情绪价值、获得安全感等。而用户对效用的感知,往往是对比过去经验的解决方案得到的。所以,我们首先要看用户之前是怎么解决这个问题的,然后是用户迁移到新的解决方案(使用新产品或新功能)要付出多少成本。
 
继续用上面“饭搭子”的案例:
设计师如何做产品需求分析:先聊聊两个“价值”
 
 
——我们从这个案例可以看到,当我们做成本对比,不能简单地说新旧方案哪个成本更高。用户付出的“成本”是多维度,包括“时间成本”、“经济成本”、“安全风险”等维度。
“饭搭子”这个新方案,对比旧方案,并没有没有压倒性的成本优势。我们虽然可以通过产品设计和运营降低当中的用户成本,比如通过用户历史参与数据(参与饭局次数、饭友评价、真实职业信息等)提供用户靠谱度评分,以降低安全成本。但消除用户成本,需要花费较大的资源投入,我们可以预判这不是一个高ROI的产品项目。
有趣的是,人不是完全理性的。有的场景,只要其中一项成本感知强烈,人就可能选择弃用这个产品。比如“饭搭子”这个案例中,女性用户对安全风险更为敏感,女性用户更不愿意尝试陌生社区。
设计师如何做产品需求分析:先聊聊两个“价值”
 
 
如果我做的是一个非常创新的项目,真的没办法找到“旧方案”做对比呢?或者我无法获知旧方案的用户成本呢?——我们依然建议尽可能地接近用户、收集足够多的信息,以辅助判断。如果依然非常不明朗,可以通过MVP的方案去预估。关于MVP实践的书籍和网络资料很多,大家可以自行搜索。
 
多少用户会买单呢?
✅ 确认了这个需求有用户价值
✅ 确认了有XX需求的用户很可能会买单
——接下来可以开干了吗?
 
不够,还需要
预判收入规模
。因为:收入=客单价x支付用户数=客单价x访问用户数x支付转化率。
这个等式适用于一般的to C产品,不同的产品可能有差异,比如视频用户的使用时长可能与产品收入挂钩,那么用户时长也需要作为一个变量放入到你的产品收入公式中。
当我们要开发一个新的付费互动功能,我们需要做数据预估:这个互动功能放在这个位置,每天的曝光可能是多少?按照此页面同样位置的点击转化和其他功能的付费转化,能否预估这个新功能的收入?这个收入规模值得投入X天的开发人力吗?
如果这个需求的直接目标不是收入,而是获取更大用户规模。我们也同样用“等式”这个思考方式来去做数据估算,只是把“收入”理解为用户量或其他目标数值、而非金钱收入。
当然,通过历史数据估算收入是比较理想的情况。如果身处一个数据体系建设落后的企业中,我无法获取足够的数据支持,怎么办呢?或者,这是一个绝对的革新体验(比如AI辅助内容创作),我无法用过往的数据或经验评估收入规模,怎么办呢?
那么,至少解答“解决哪些用户在什么场景下的什么问题”,来看看这个需求的用户场景覆盖是否足够广;再权衡为了获得这个新产品/新功能带来的新体验,用户要投入哪些成本,以此做需求的排除法——跟创业一样,做产品本身就存在了诸多不确定性,并非所有的决策都能通过公式去论证。
我们只能在有限条件下尽量选择做正确的事
,排除那些大概率不能成功的事。然后尝试MVP,或直接交给市场和时间验证。
此外,如果设计师想作为初创成员加入新产品,还要跑通可持续的盈利模式。这里又是一大块学问,比如了解这个企业做这件事的资源优势等等,本文作者的知识域和本文篇幅都有限,建议感兴趣的朋友翻看商业分析相关书籍。但是新旧方案的用户成本对比、收入公式的拆解,依然是重要且可行的商业价值视角。
 
3、优先级
“优先级”可以分为两层理解,一层是产品需求之间的优先级排序,另一层则是功能范围层的优先级,也就是我们聊需求经常会问的问题:我们明确了这个产品需求当下就要启动,但是当前要做到什么程度呢?
前者,对比不同需求的产品价值大小,再结合开发实现成本和耗时、是否需要追赶某个时间节点等,产品需求之间优先级不难得出。而设计师更多要思考的是后者。
举个例子:开学季马上要到了,产品经理了解到学校有类似“语文朗诵作业打卡”的作业打卡诉求。我们希望抢时间窗去满足这个大规模的家校场景,即“如何最快地满足每日/周重复的信息收集需求”?作业打卡场景可否
延伸
到其他打卡场景,不同的打卡有何共性或差异?
其中“最快”暗含的意思是“
这个功能至少要做到什么程度才能满足最核心的用户需求
”。这个时候,我们拉了一个表格,快速梳理不同用户角色(比如区分“打卡创建者”和“参与打卡者”)的体验链路,再决策
各个体验环节的功能复杂度要到哪里。
从全盘中抽取出体验闭环的最小集
从全盘中抽取出体验闭环的最小集
 
不要忽视商业竞争中的时间差,因为抢先占领市场的产品实际上是提升用户迁移到竞争对手的成本。过去我们提倡匠人精神,不放过每一个细节。而当前激烈的市场竞争环境下,“有的放矢”比“抠细节”更加重要。
 
小结
我们归纳一下需求分析的思路,多问问这些问题:
设计师如何做产品需求分析:先聊聊两个“价值”
 
 
需求分析是比较考验全局观、逻辑性、数理分析和共情能力的。工作中可以通过拉表格、思维导图、白板等工具梳理思路。如果你喜欢写文字,那就用写的方式。总之,切忌接到产品需求就动手出界面方案。


作者:腾讯ISUX
链接:https://www.zcool.com.cn/article/ZMTYxODM0NA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

 

洞察用户心声:解锁用户习惯,让产品成为用户的贴心小助手

ui设计分享达人

例如,Windows和Mac操作系统的用户在面对不同的软件关闭方式时,会因为习惯的差异而感到不适应。这种不适应性揭示了改变用户习惯需要付出学习成本,而这种成本的高低也直接影响用户对产品的接受程度。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档