首页

浅谈B端和C端的不同

博博

想要了解B端C端不同,那么我们先了解B端是什么

一、B端是什么?

B释义为:Business(业务),顾名思义B端产品更偏重于业务,偏重于功能的使用,B端设计在更加注重对于使用者的效率,这个功能是否方便直接达到目的。B端产品最直接的使用者是企业或者说每个“小企业”(班级、部门团队等)要做的就是直接帮助他们用更低的成本使他们的效率大大提高。我们目前对于B端产品最简单的理解就是疫情期间火爆的“钉钉”以及各位都熟知的“飞书”,在我们使用这两款软件时,我们就会发现这些功能好多面面俱到,“请假、汇报、签到”等,不论多小的功能这两款软件都有,但是如果是C端的话,一些次要、点击率低的功能指不定那天就消失了。单从产品角度来看就能看出B端与C端的区别,这些显而易见的B端产品好像多了一丝冷静但是很体贴的直男,C端就像一个花言巧语哄着你的playboy(仅举例子区分,他们对于我们来说都是必不可少的产品)就像下面的自我介绍对比就能明显的看出哪个是B端,哪个是C端。

这些通过你应该已经初步了解了什么是B端,那么接下来我们从更深层次的开始了解。

二、B端和C端的不同

B端C端的不同在于哪些呢?

1.用户:

B端的使用者更多是企业单位,老板等,需要共同协作,比如你的上级领导千里之外就能给你派发加急任务;我们部门需要一起进行这个需求等,这时B端产品的特性就体现了,就像现在经常有人说“只要听到“钉”的一声”和“红色闪电”心里就突然揪了起来。

C端的使用者在于用户本身,通过精准推送直击用户痛点,增加用户粘性购买度等。

2.场景

B端大多为办公场景,项目需求、审批等

C端则较为广泛,某宝买买买,某音看看看!

3.价值观

B端的价值更体现在我们整个团队的效率,这个项目的使用成本,;比如说我需要通过这个软件帮助我们整个团队的效率提升,大家一起协作作图、一起探讨。

C端的价值体现在这个活动这款产品怎样使用户更好的体验,在使用时很快乐的把单下了;比如我们在某物购物时,购买完成后会获得一张3D虚拟卡片,我们的购物体验之旅是不是会极其开心,这里就使用了峰终法则(如果用户在一段体验的高峰处和结尾处是愉悦的,那么用户对这段体验的整体感受就是愉悦的。

4.业务导向

B端更注重这个功能的实现,我在使用这个功能时是否可以更高效,更加的去节省我的使用成本,再设计时我们需要去理解整个业务逻辑、业务导向,介于B端产品比较私密,很少有公开的,所以比较设计起来难度较为提高。我们我们平常面对小伙伴B端的问题时,如果不去了解他们整个业务流程就很难客观地去判断,很容易对他的指点使他造成一次工作失误。

C端的业务导向,更在于对于用户心理、使用体验的拿捏,能让用户做到“0”成本学习,无脑上手无脑冲冲冲,就比如你搞优惠搞了半天复杂操作做后才200-10这谁不气?光明正大割韭菜啊。

三、B端C化

我在资料中查阅到未来的B端的进步就会在“B端产品在使用体验和视觉感受这两个方面和C端产品接近”,B端C化其实很简单,就是将B段专业性强会忽略视觉这一点进行补充,B端产品也可以使自己的产品视觉更加富有冲击力、3D、情感化、就像一些大厂最近的展示更多的去运用了一些3D玻璃质感提升B端产品的用户视觉体验,飞书也会制作情感也会在缺省页的时候用emoj表情对你体现“话语安慰”是你在使用功能时不再那么枯燥,钉钉的IP设计同样也是在拉近与用户之间的距离,通过IP让本就繁琐的产品得到心情的愉悦,这都是在进一步提升B端的情感化,淘宝的功能、抖音的功能更加方便高效其实也是B端的体现,所以我们B C端其实归根结底我们的目标服务都是为了人设计的,设计也一样,服务于人,都是以更加舒适的道路上前进。

总结

其实B端C端从根本来说不同点很小,因为都是为了“人”去服务,未来的发展也是为了更好的让我们去高效的使用;就很像国内国外设计有什么不同,其实没什么不同,我们设计每一个项目、每一个作品时不管我们是否属于哪个国家,我们的目的也只有一个“为了让这个世界因为有了设计而看起来更美一点!”





作者:小芦同学有大脑袋      来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司 

B端体验设计之列表设计

博博

B端中后台产品中,列表页和表单面占了80%以上的页面,以下文章针对如何设计一款好用的B端产品列表页进行了讲解

列表页多用于一个功能的首屏,是一个功能的数据集中载体,它的主要功能就是集中处理、展示、查询、以及统计数据等。列表页一般包含5个组成部分:标题、查询、操作、统计以及表格。

一、标题


系统中只要是功能,就一定有标题,就像只要是个人,就一定有姓名一样,标题的展示根据系统的结构,可能在面包屑中,可能在标签栏中,也有可能在页面容器中。如果标题放在容器中,位置一般是固定的,不随着页面滚动而滚动,标题字体也要和内容字体做区分,一般是字号增大或者加粗等方式。



二、查询

查询条件的设计也是五花八门,根据查统页使用场景大致可以分成两种:一种是省空间的设计,一般只需要放一两个查询条件,那么它就可以和操作按钮放一起,多出现于数据字段比少且简单的情况;一种是经常需要混合高级查询,一般会独立有一块查询条件模块,多出现于数据统计类页面。

2.1、省空间查询条件


为了达到省空间的目的,查询条件和操作放一行,一般会只放一两个查询条件,输入或选择后即执行查询,不需要单独点击查询按钮,这种方式好处就是省空间,缺点是它默认展示的筛选项比较少,需要再点击“更多查询”才能看到更多。设计这种查询方式需要注意的是,输入查询一般是输入后即执行查询,容易导致执行过于频繁(输入一个字符即执行了),因此会做防抖设置,可以在输入0.5s后执行。再一个,这种展开收起的情况,用户容易看不到隐藏的筛选,因此需要一些标记,比如展示已选择的数量。



2.2、独立查询条件


独立查询条件的方式,就是将查询条件单独划出一个模块,可以一次性展示多个查询条件。这种方式的好处就是,查询更便捷,还可以做更多的拓展性方案,如用户可以自定义高级查询方案。缺点就是占空间,对于小分辨率电脑不是很友好。



三、操作


列表的操作是由产品的功能权限控制,由权限决定哪些人能够使用和查看数据,下面从操作的类型、组合、操作反馈以及状态的角度分析如何设计好操作功能。

3.1、类型


操作模块一般是由一组用于操作表格数据的按钮组,主要分为3种:一种是全局性操作,一种是选择数据进行操作,一种是混合型操作。全局性操作(如新增数据、导入、导出模板、刷新等)不需要勾选当前具体某行数据,就可以直接点击操作;选择数据进行操作(如删除、编辑、审批等),即操作前需要至少勾选一条数据,因为它是对当前已存在的数据进行操作;混合型操作(如导出、更新状态等),在勾选数据的时候会对当前数据进行操作,未勾选数据的时候默认会全部处理或者其他的操作,比如“导出操作”,勾选数据时会导出已选数据,未勾选时则默认导出空模板或者导出全部数据(根据具体产品要求)。



3.2、组合


操作组一般会由一个或多个按钮组成,通常只有一个主操作(primary)。主操作是带有引导性的功能,如“新增数据”,还有若干个普通按钮(default),不带有引导性。按钮组还可以根据操作类型形成组合,以分割线或收纳的形式展示,收纳按钮主要有两种展示形式:一种是带主操作的收纳按钮(如归纳同类型的操作),一种是直接收纳,不带主操作的(如按钮太多需要进行收起)。操作的顺序通常也会根据优先级和操作频次来决定。



3.3、操作反馈


操作后需要给个反馈,告知用户操作结果,告知结果分三种情况:1、直接给结果,如toast提示,操作成功/操作失败;2、给操作建议,如:toast提示,请先勾选至少一条数据;3、警告提示,如删除数据时候告知风险,二次确认防止误操作。



四、数据统计


数据统计一般是拾取表格数据某些维度的统计结果,用于快速知晓当前所有数据的情况,有些统计还带交互,比如点击选中后进行数据过滤。



五、表格


市面上封装好的表格组件可配置api很多,像antd,但是想要做的更强大,还有很多能够做的细节,我们先来分析下表格的组成。表格是由行和列组成的网格数据,表格可以分2种,明细表和交叉表,查统页中采用的就是明细表中的横表,即表头是横向的。


5.1、表格设计原则


表格的设计原则遵循以下几点:数据可读性、展示效率、操作便捷性、以及灵活性等。



5.1.1、数据可读性


表格作为信息密度最大的组件,在设计的时候要考虑数据的可读性,可以从以下几点入手。

  • 对齐方式。比较常用的是左对齐,数字金额百分比一般是右对齐,方便百分号小数点和千分位的对齐。如果表格不带竖向分割线,则表头也要和表体内容对齐。
  • 斑马线。尤其是屏幕比较宽的时候,两个字段隔得比较远,在眼睛移动过程中容易看错行,斑马线就是解决这个问题,当然,如果不嫌麻烦,鼠标悬停上去,该行的背景色一般也会变化。
  • 行高。文字行高一般是字号大小的1.2-1.8倍。单行文字表格行高一般在32px-56px之间,如果支持换行则换行文字自动挤开表格行高。
  • 表头样式。表头要和表体在样式上做区分,如文字加粗,背景色等。
  • 滚动。当表体产生滚动的时候需要出现滚动条或者在固定列旁边出现阴影。


5.1.2、展示效率


B端产品尤其是ERP这种数据密集程度很高的产品,对空间的利用要求是很高的,因此在设计的时候要充分考虑展示的效率,可以从行高、列宽等角度去设计表的细节。我设计表的时候习惯先跟产品讨论清楚每个字段大概的长度,在设计的时候就会预留匹配的默认字段宽度,比如14号字体的表格,在展示“创建时间”字段的时候,字段宽度不会超过170px,我会留180px的默认宽度,既有呼吸感,又不浪费空间。最后预留一个字段宽度作为auto自适应,给到个min最小值,这样在不同分辨率上能展示相同的效果。


5.1.3、操作便捷性


表格在展示数据的时候往往会遇到一些问题,比如字段显示不完整,这时候就需要手动支持调节列宽,或者悬停tips展示全部内容。再比如想要复制某段内容,而文字展示不全,又不支持调整列宽,这时候要么在比较常用于复制的字段后面跟个“复制”图标,或者悬停出现tips的时候鼠标移上去不会马上消失,这样用户就能框选文字复制了。



5.1.4、灵活性


表格设计的时候不一定能覆盖所有用户和场景,因此需要预留一些灵活调整的空间,下面介绍几个常用点。

  • 调整字段顺序。有些产品为了能让用户根据习惯更灵活地查看内容,会让用户直接拖拽表头进行重新排序。
  • 调整字段宽度。表格内容有些长度是未知的,在使用的时候发现信息看不全,因此通过拖动可以快速调整字段宽度。


5.2、表格元素


表格元素包含了背景、数据(文字、图片、图标、标签、附件等)、序号、边框、选择框、操作项、斑马线等。这些在设计表格的时候都是设计师需要去定义展示形式


5.3、操作列


为什么要单独把操作列拿出来讲,因为操作列的设计蕴含了太多内容需要考虑,设计师在设计的时候很容易忽略。


5.3.1、形式


目前操作列按钮主要两种形式,“图标按钮”和“文字按钮”,图标按钮主要用于比较简单易懂的一些常规操作,优势是长度可控,容易对齐,劣势是,有时候需要悬停上去才知道含义,不够直接;文字按钮用的范围比较广,简单明白,缺点是长度不可控,不好对齐。



5.3.2、数量控制


操作列和复选框一样,一般作为固定列,不随着字段横向滚动。数量也不可控,根据业务情况,有多有少,因此在做的时候要解决数量问题,如果全部展示,则势必影响内容的展示面积,因此设计师根据真实的操作数量设定固定列宽度规则,操作项超过一定数量或一定长度做“更多”按钮收纳。还有一种展示方式,默认不展示,鼠标悬停展示该条数据需要展示的操作,这样既可以解决信息展示面积问题,又不需要考虑和其他行数据的操作对齐,还不需要定操作列列宽规则,缺点是,不够直接,如果不悬停就不知道还有操作项。有的产品干脆直接把操作项去掉,全部采用上面的全局操作,勾选数据后执行,总之各有各的优缺点。



5.3.3、操作状态


设计师经常会困惑,什么时候操作禁用,什么时候隐藏。按钮隐藏一般根据数据权限控制,“隐藏”通常是角色无该操作权限的时候采用,“禁用”通常是由于数据本身的问题导致暂时性失效。举例个例子,组织架构的页面,管理员对所有组织架构和成员有编辑和删除权限,而普通员工只能查看数据,这时候操作按钮就需要隐藏。再比如订单功能,有的订单已经进入审批环节不可删除,那么它的删除按钮就会变成禁用,而有的订单还未进入审批环节,这时候是允许删除的,这时候删除按钮就会亮起。


5.4、分页器


数据量比较大的时候会用上分页器,设计师在设计的时候也要定好默认一页几条,不然开发就会根据自己的臆想来做。分页器位置的设计也分两种,在表格上方和表格下方,市面上看到的大部分都是在下方。放在下方就有个问题了,是要固定页面位置还是随着表格自动计算位置?我对比了几个比较成熟的产品,大部分都是固定在底部,不随着页面滚动,整个页面滚动的区域只有表身,有小部分是跟在表格尾部,每页条数超过屏幕高度可展示量,分页器就会被挤到下面看不见,这种好处就是省了一点展示空间,不好的地方就是,要想再使用分页器得往下找。还有极小部分产品兼容了这两个方案,当条数少的时候跟在表格尾部,当条数多的时候,会顶在底部,类似固定钉功能。总之不管采用哪种方案,都要兼顾便捷性和易用性。



5.5、表头


5.5.1、表头筛选


表头筛选平时用的比较少,因为外面已经有独立的筛选功能,有些也放出来,补充一些不常用的筛选。



5.5.2、表头排序


排序规则主要由产品提供,设计需要知道一下。一般默认是以产品的创建时间为排序,排序不带具体业务含义的一般采用时间倒序,最新数据在表格最上面,这样每次新增数据就可以快读看到,不用划到最后面甚至翻页后才能看到。有的采用时间正序,最新的数据在最后面,这种一般是数据本身带有排序属性,如果贸然在最上面插入数据会打乱已设定好的顺序,这种带排序属性的表格,往往还有调整顺序的操作。触发排序一般只需要点击表头即执行,通常点一次会进行正序/反序,再点一次会反过来,再点一次取消排序。如果点另一个字段的排序则默认会采用最新的排序字段。



5.5.3、表头提示


有些比较难懂的字段需要在表头增加一个提示信息,来辅助用户理解字段含义



5.6、表格配置解决方案


前面讲了表格的各种属性,为了使用的灵活性,有些成熟的产品会设计一个设置表格属性的功能,可以让用户自定义表格属性,如字段展示(筛选)、字段顺序、字段对齐方式、字段固定列、是否展示序号、斑马线等。事情有利必有弊,灵活也意味着学习成本高和投入开发成本大,是否需要做有各自的真实情况决定,不过作为设计师得知道,这些就是你能雕琢的地方。



六、额外功能


还有一些额外的设计过程中你不一定会注意到但挺好用功能推荐。


6.1、只看已选


在选择数据的时候,为了便于一眼看到选中的数据,会做这个么个操作。



6.2、已选数量


表格的选择,默认一般是不支持跨页选择的,所以产品或者设计需要要求开发支持跨页选择,而一旦支持跨页选择,就容易忘了到底选了多少条,因此会展示选中条数,以及一键清空选中,这个功能还可以和“只看已选”功能混合着用。



6.3、只看表头


对于有些带明细数据的表单,通常在表单中会分表头和明细(表身),举个例子,商品订单中会包含一些像订单编号、客户名称、发货时间、发货地址等等这种,叫做表头。像具体的明细数据,如订单中包含100个a商品,200个b商品等等,叫做明细(表身),因此在列表功能展示的时候有时候需要一眼看出明细数据,就会以表身明细数据为主数据展示,但是数据量会蹭蹭往上,因此用户可能会选择是按“表头”数据展示还是按“表头+明细”数据展示。



七、总结


列表页承载了一个b端系统半壁江山,设计师在设计过程中需要不断打磨,设计出符合自己产品特性的列表。





作者:落难的黑人      来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司 

QQ邮箱 I 重设计

博博


QQ邮箱 I 重设计
QQ邮箱 I 重设计
QQ邮箱 I 重设计
QQ邮箱 I 重设计
QQ邮箱 I 重设计
QQ邮箱 I 重设计
QQ邮箱 I 重设计
QQ邮箱 I 重设计
QQ邮箱 I 重设计
QQ邮箱 I 重设计


作者:DorisPei

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作,也请与我们联系01063334945。 

分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司 

用户访谈、共情地图、用户画像、用户故事、5w1h、价值主张、竞品分析、HMW

ui设计分享达人

一、与用户共情 Empathize


理解同理心


同理心是在某种情况下理解他人感受或想法的能力。


同理心vs同情心 


同理心有时会与同情相混淆,但这两个词并不是同一个意思。同理心是指理解别人的感受或想法,通常是通过自己感受这些情绪。同情是一种表现出关心或同情而不去感受情绪本身的体验。


通过有效地与用户感同身受,尽最大努力了解他们的需求,你为产品体验奠定了良好的基础,这将有助于解决他们独特的问题。


同理心意味着什么? 


带着同理心进行设计将提升你所创造的产品。通过与用户建立更深层次的联系,您将更好地理解他们的观点和痛点。尽早找到这种联系可以引导你走上正确的设计道路,并避免在设计过程的后期阶段大量修改产品。 


为什么要共情


作为一个用户体验设计师,与用户共情可以帮助我们创造体验更好的产品,因为我们在设计过程中会站在用户的角度去体验产品。我们越是善于预测用户的欲望和需求,用户对我们的设计就越满意,用户才越有可能长期地使用我们设计的产品。


如何与用户共情 


1.问很多的问题


设计师要避免自我假设很多需求,我们要通过问很多的问题来了解用户的直接需求和想法(跟我们需要设计的产品相关的问题)。可以使用是什么、为什么、怎么样等问题来深入了解用户。


2.更细心


需要注意整个用户,而不仅仅是他们的语言。详细研究用户与产品互动的过程,用视频、录音、笔记等方式详细记录。


3.做一个积极的倾听者


全神贯注地倾听,理解并记住与你互动的用户所说的话,避免分心。在用户体验设计中,练习积极倾听可以帮助你直接从用户那里得到公正的反馈,你可以应用它来改进你的设计。


4.多元反馈


收到的反馈是客观和公正的,这点很重要。朋友或同事通常会提供偏颇的、大多是正面的反馈,因为他们想支持你或取悦你。因此,不同的来源和不同的用户组的反馈很重要。在寻求反馈时,可以多使用开放式的问题。


5.避免偏见


我们都有偏见。记住,偏见是基于有限的信息而对某事或某人有偏见。作为用户体验设计师,我们必须把这些偏见放在一边,以便更好地与他人产生共鸣。你的目标是理解用户,而不是用你自己的观点和情绪复杂化他们的反馈。


6.跟进UX研究的最新进展


关注研究人员,加入在线社区,了解影响用户体验设计师和用户的最新研究。随着我们对人类心理学的了解越来越多,研究也在不断变化和发展。紧跟潮流会让你在理解听众和与听众互动方面更有优势。


用户访谈


步骤1:定义研究目标 


为了确保访谈中能够充分利用时间,不谈一些偏离的话题,需要先制定访谈目标。


下面是一些关于与用户共情的常见研究目标: 

我想了解人们在使用我设计的产品解决问题时所经历的过程和产生的情绪是怎么样的 

我想确定目前人们对此问题是如何解决的?其常见的用户行为和体验如何? 

我想了解用户的需求和不满

步骤2:写下访谈问题

时刻记住访谈目标,提前写下你的访谈问题,访谈问题越符合你的目标,你得到的数据就越有用。 

多问开放式的问题,访谈者可以更自由地分享他们真实的想法 

保持问题简短明了,访谈者才容易理解你的问题 

追问问题,在访谈者回答完一个问题后,试着多问他们“为什么?”或者用“多告诉我一点”来获取更深层的信息

步骤3:创建一个筛选调查,以找到合适的参与者


选择研究对象需要基于研究目标和所设计产品的目标用户。可以发送一份筛选调查问卷来确定潜在参与者是否符合研究要求,收集的数据例如:年龄、地理位置、职业或行业、性别等。


步骤4:开始招募参与者 


一旦你确定了研究目标和书面采访问题(在如何确定你的研究目标和问题),并创建筛选调查,以找到研究参与者的代表性样本,你就可以开始招募参与者了! 


如何以及在哪里找到研究参与者取决于你工作的公司、你设计的产品类型、研究的时间限制、项目预算和目标用户的可访问性。基于这些项目细节,您可以选择从各种各样的方式来寻找研究参与者。 

个人社交圈。考虑一下符合你的目标用户的家庭、朋友或同事。 

现有用户。如果你的产品已经有一些用户基础,你可以从现有用户中招募参与者。

互联网招募。如果是为新成立的企业设计产品,最简单的招募参与者的方法是网上招募。你可以使用社交媒体来寻找研究参与者,或者使用专门招募用户的网站,如用户测试和用户访谈。你也可以找一些符合你目标用户群体的聊天群去招募用户。

走廊测试。去最可能遇到产品目标受众的地方,比如狗公园或咖啡店,现场拉一些路过的人进行测试。如果你招募的参与者不多,时间有限,或者你想免费进行研究,那么走廊测试是比较好的选择。然而,以这种方式寻找参与者是有风险的,因为他们可能不是你的潜在用户。 

第三方机构。有预算的企业可以雇佣第三方研究机构,他们可以节省你的时间,而且更加专业。

步骤5:进入用户访谈 


1.制作脚本


将你要问用户的所有问题列下来,在实践中已经证实保持访谈者问题的一致性很重要。当然,访谈脚本只是一个指南,当有必要的时候我们可以偏离准备的问题以了解用户更多的痛点。


2.准备物料


制作一份访谈所需物品的清单,比如一台电脑、一份打印出来的问题清单,或者纸和铅笔。如果你在访谈中需要使用新的设备或技术,一定要提前了解清楚怎么使用。


3.研究用户


尽可能提前了解你要访谈的人。如果你准备访谈的用户在访谈前提供了他们的个人信息,要注意确认他们的个人信息是否符合真实情况,避免访谈一个竞争对手的卧底。


4.模拟访谈


在正式访谈之前练习一下你要问的问题,跟同事或朋友模拟地进行一次访谈。


5.开场白


感谢用户的到来。在面试开始前,感谢用户花时间与你见面并分享他们的观点。感谢用户是建立良好关系的一部分,可以帮助他们觉得自己的意见是有价值的。 


收集基本的细节。当你与用户见面时,记得询问与访谈者相关的基本信息,如他们的姓名或人口统计信息。11 


6.问访谈问题


遵守访谈礼仪
提问时,说话要清晰简洁,无论用户如何回答问题,都要保持专业。当用户分享他们的观点时,表现出你在积极地倾听,比如点头、进行适当的眼神交流或做笔记。 


问开放式的问题
避免问那些会导致简单回答“是”或“不是”的问题,最好多问一些以“为什么”开头的问题。如果参与者确实提供了一个简短的“是”或“不是”的回答,你应该追问一些问题,让他们分享更多信息。 


及时记笔记
如果不做笔记,准确复述参与者所表达的几乎是不可能的!当你在面试中观察和倾听参与者的谈话时,尽可能多地写下你能捕捉到的内容。当你想出解决用户痛点的想法时,一份完整的笔记和观察清单将会很有帮助。这里有一些最好的做法,可以帮助你在面试中做笔记: 


突出引人注目的报价
面试中最明显的部分就是记录面试者所说的话。有趣的引用是用户真实想法和感受的有力指示器。在你的同理心地图中包含引用是一种很好的方式,以真实用户的第一手视角为特色,这可以在你开始设计时提供有价值的见解。 


记录对参与者的观察
不仅要记录用户所说的话,还要记录他们的情绪、表情、肢体语言和行为。要特别注意外界因素,比如噪音或干扰,这些可能会影响面试结果。在创建同理心地图时,所有这些观察结果都是重要的考虑因素。 


语音/视频记录访谈
询问参与者是否允许你录入访谈。如果他们同意的话,录下来的访谈在之后会很有帮助,可以帮助你回顾访谈中你可能不记得的部分,或者在访谈结束后整理额外的笔记。 


7.追问补充分享


在你问完所有的访谈问题后,给用户一个机会分享他们对面试中讨论的任何项目的最终想法。一些参与者可能会公开他们的观点,并透露他们之前没有分享的见解。 


8.感谢参与者


另外,记得再次感谢参与者。你要让用户在访谈结束时对你及未来的产品和你可能代表的公司有一个不错的感觉。


同理心地图/共情地图


帮助设计师以图表的形式梳理每次访谈的信息,以明确用户需求


背景目的


你的公司正在开发一个新的应用程序来帮助人们安排遛狗的时间。该应用程序的目的是将合格的遛狗者与需要帮助照顾他们的狗的客户匹配起来,类似于拼车或家庭共享应用程序。你是用户体验团队的一员,你的团队处于设计应用程序的早期阶段,并正在了解用户的痛点。一位同事已经采访了经常使用该应用程序的狗主人和专业遛狗者。现在你有责任用同理心地图总结每次采访。


采访记录示例:


名称:Makayla斯科特


情境:Makayla是一名45岁的女教师,住在德克萨斯州休斯顿。她有两条狗。作为一名四年级老师,Makayla日常的工作比较多。放学后,她还自愿担任排球教练。Makayla的伴侣是一名全职儿科外科医生,经常在当地医院的夜班和白班之间轮流工作。


UXR:
你能描述一下你目前的工作情况以及是如何照顾你的狗的吗?


Makayla:
我是一名教师,放学后我要教排球,所以我的狗Reggie和Snowball在很长一段时间内要被单独留在家里。我的伴侣在一家医院工作,需要随叫随到,还通常有12个小时的白班或夜班。当我们都很忙的时候,我们需要有人遛Reggie和Snowball。


UXR:
你在照顾你的狗狗时面临什么挑战?这让你有什么感觉?


Makayla:
我爱我的狗!他们是那么的可爱。如果问他们要出去玩多少次,他们肯定会说一天想要遛五次!但是,按照我们的日常工作情况,很难经常带他们出去。我每天早上第一件事就是把它们放出来玩一会儿,然后晚上也会把它们放出来玩一会儿。有时候,我会付钱给隔壁邻居17岁的儿子让他帮我遛狗。但是,我们去旅游的时候就会有很大的困扰。我和我的伴侣喜欢去旅行,我们不能总是带着我们的宠物。如果我们能预定一个遛狗的人,那我们就能安心地出去玩了。
我们邻居的儿子今年就要毕业了,他的日程安排越来越不稳定。我不能在一直依赖他,我担心他没有专业的照顾狗狗的经验。当然,一个17岁的孩子只是每天带狗散散步是没问题,但如果他周末带狗出去玩,Snowball生病了怎么办?他怎么知道该做什么,或者该不该给我打电话?这确实让我很担心,但我又不想把狗狗拿去宠物店寄养。
还有很多地方我不能带Reggie去,他比Snowball大得多。他不像Snowball那样容易过敏。因为它太大了,带它去公路旅行都很困难。我们去年刚搬到休斯顿,可以求助的人不多。我考虑过在网上发布广告,但我不确定把谁留在家里会比较安全,谁可以和狗很好地相处。


UXR:
你觉得有什么方法可以解决这些挑战吗?


Makayla:
我想找一个遛狗的人,我希望我可以了解更新他们的信息并且提前筛选。我希望能有一种固定预约的方式。比如这个人可以每个周末来,然后在我白天工作的时候也可以约一些特定的时间。理想情况下,我可以提前几天安排遛狗。我只需要一个固定的遛狗者,希望可以通过筛选,确保他们是安全可靠的,与宠物可以友好相处的!我愿意多花一点钱来得到这样的服务,而不用老是向我的邻居求助。


创建同理心地图/共情地图


Step 1:添加用户名称 

把被采访人的名字写进你的同理心地图 

Step 2: 所说 

逐字引用访谈中的内容。准确地写下这个人说了什么而不要用你自己的话来总结。如果总结了访谈者的话,可能会错误地解释用户的意思。在访谈中要时刻关注用户的状态,并记录他们的痛点。例如,如果用户在访谈中多次重申相同的问题,那么这可能是一个主要的痛点。 

Step 3: 所想 

在这里,你可以总结一下用户表达的想法。添加用户通过肢体语言、语气或其他明显的指示来传达的感受,即使他们没有口头上向你表达。你可以对这些感觉做出推断,但你必须注意不要对用户做出假设。例如,Makayla对邻居十几岁的儿子表示担忧,并提到了他的年龄和资格。一个假设是,Makayla想要一个成年遛狗者。一个推论是,她想要一个有汽车和驾照的遛狗人,可以带狗去急诊兽医。如果你发现任何矛盾,你可以让你的用户解释他们的肢体语言。 

Step 4: 所做 

Makayla向我们详细说明了她为克服遛狗面临的挑战而采取的行动步骤。 

Step 5: 所感 

在访谈中,注意用户的愤怒、沮丧、兴奋等情绪,列在这个模块。它可能与你在“所想”中列出的一些内容重叠,没有关系,就重叠地列出来。如果用户在访谈中没有明确提到任何感受,你可以通过追问“这让你有什么感受?”来探究用户感受。



这张同理心地图分解了你的团队在决定你的应用如何满足Makayla需求时需要考虑的所有要点。真正的挑战来自于你要从所有用户访谈中得出的聚合共情地图,并找出每个潜在用户需求的重叠。


同理心地图/共情地图类型


重要的是要理解有两种类型的共情地图:单用户共情地图和聚合共情地图(也称为“多用户共情地图”)。

单用户共情地图是通过从一个用户的访谈中获取数据并将其转化为共情地图来创建的,就像本文前面的例子一样。这种方法可以帮助设计师将单个用户的想法、感受和特征提炼成一种更容易收集数据的格式。


聚合共情地图,代表了一组拥有相似想法、观点或品质的用户。聚合共情地图是通过创建多个单用户共情地图来创建的,然后将用户表达类似内容的地图组合成一个新的共情地图。这有助于设计师确定有相似倾向的人群,他们将会使用产品。聚合共情地图的洞察力允许设计师确定主题,这有助于他们更好地与他们正在设计的群体共情。

要了解更多不同类型的共情图,请查看尼尔森·诺曼集团关于共情图的这篇文章。
https://www.nngroup.com/articles/empathy-mapping/


用户画像



角色是虚构的用户,多个用户汇聚成一类角色,他们的目标和特征代表了更大的用户群体的需求。您创建的每个角色都将代表一组具有您通过研究了解到的类似特征的用户。角色是设计过程的关键,因为它们反映了用户的生活方式,并给你的团队提供了如何满足用户需求或挑战的思路。


在用户体验设计的世界里,用户永远是第一位的。我们要了解用户需求,必须知道我们的用户是谁。


角色是通过进行用户研究、确定痛点来创建的,痛点是指用户体验方面的痛点,它们会挫败和阻碍用户从产品中获得他们需要的东西。


在创建人物角色时,要在数据中查找最常见的标签,并将这些标签拟人化的用户分组在一起。例如,想象一下,从遛狗应用程序的用户访谈中收集的数据显示,许多年龄在45岁到60岁之间的潜在用户都担心遛狗者能够进入他们的家。这肯定是你想要在代表特定年龄段用户的角色中包含的痛点。


一般来说,创建3到8个角色就足以代表产品的大部分用户。把人物角色看作是你所有研究和采访的总览。虽然人物角色准确地代表用户很重要,但不可能满足他们的每一个特定需求。角色也是特定于环境的,这意味着他们应该专注于用户与产品有效互动的行为和目标。


以下是Daniela的用户画像:




专业提示:


在构建用户角色之前,先征求团队对产品用户的意见。在你构建了角色之后,审查来自你的团队的建议,并将它们与你创建的角色进行比较。指出数据是如何验证或反驳他们的建议的。团队中的每个人都需要理解角色,这样才能与用户真正地建立联系。


用户故事




例子:安妮卡


“作为一名为团队收集咖啡订单的市场实习生,我想提前提交和监控团队订单,以便更好地管理订单准确性和计划取货时间。”


安妮卡是一家中型广告公司的市场实习生。每周两次,在晨会之前,他们会从附近的咖啡店为团队收集6-12杯咖啡。但有时他们会发现自己点的菜不完整,或者因为等了太久才来取菜而凉了。他们需要一种方法来提前下单,跟踪订单状态,并更好地计划他们的到货时间。


例子:阿离


“作为一名每天花3-4小时学习和购买产品的远程学生,我希望能够在不起床的情况下点餐,这样我就可以享受CoffeeHouse的产品,并继续工作。”


阿离是一名厨师,住在一个小城市,大部分时间在晚上工作。白天,阿离会参加3-4小时的在线编程训练营,学习一项新的就业技能。他们通常在当地的咖啡店进行新兵训练营,但有时会因为座位有限而感到沮丧。他们还担心,如果他们站起来点新的咖啡或食物,会失去他们的桌子。阿离可以使用CoffeeShop应用程序预订店内工作区,并在顾客到达后通过该应用程序下单。



在用户调研的时候考虑无障碍设计 


无障碍设计是为残疾人设计产品、设备、服务或环境。无障碍设计是考虑所有用户的旅程,牢记他们的永久性、临时性或情境性残疾。通过研究残疾人如何与你的产品互动,你可以更好地理解如何为他们设计。我们不可能准确猜测用户体验产品的所有方式,这也是为什么在你的研究中包含残疾人是如此重要的原因之一。
当你在设计过程的共情阶段进行研究时,需要考虑以下几点。


触觉


你会如何为那些只使用一只手的用户设计,无论是永久的、暂时的还是情境的?

  • 根据手的不同尺寸来决定按钮的位置。
  • 创建允许双击以避免意外点击图标的功能。
  • 启用单手键盘功能和一般键盘兼容性。
  • 允许定制按钮,方便访问用户认为最重要的信息。

视觉


你将如何为那些视力有限的用户设计,无论是永久的、暂时的还是情境的?

使用更大的字体来设计更适合读者的应用程序。 

确保应用程序和图像有可被屏幕阅读器读取的替代文本。

检测用户是否在驾驶机动车。 

使用高对比度的颜色设计应用程序。 

不要依赖文本颜色来解释导航或下一步操作。例如,不要单独使用红色文本作为警告的指示。相反,你的设计应该包含明确的说明。

可定制的文本


还有一些额外的网页辅助工具,有阅读障碍或其他视觉处理障碍的人可以从中受益。其中一种方法是自定义文本,该特性允许用户更改文本的显示方式,以便更容易地阅读文本。文本定制包括更改从颜色或字体到文本大小甚至间距的所有内容。例如,有些字体可能更便于用户阅读,因此定制字体可能会有很大帮助。因此,可定制文本提供了比简单地放大或放大文本更多的选项,使内容更具适应性,同时保持功能。


听觉


你会如何为那些永久性、暂时性或情境性听力受限的用户进行设计?

不要仅仅依靠声音来提供应用更新,比如新消息通知。相反,应该启用触觉技术,即吸引用户触觉的振动和通知灯。 

对所有视频应用封闭字幕。 

在应用程序中提供一个文本消息系统,允许用户通过书写进行交流。

语言


你会如何为那些永远、暂时或情境性不能说话的用户设计? 

  • 除了基于视频的内容外,还要为用户提供书面介绍、描述和说明。 
  • 在与用户通话或应用程序支持时提供实时短信。 
  • 为依赖语音识别的自动化系统安排替代方案。 
  • 提供应用内部消息系统,允许使用表情符号和图片上传。 

在为残疾用户设计时,这个列表只是需要考虑的一小部分。了解如何改进你的设计的最好方法是进行研究并直接从残疾人那里获得反馈。


辅助技术 


创造一个考虑到每个能力范围的产品设计是非常困难的。值得庆幸的是,有一些服务和应用程序旨在帮助弥合这一差距。例如,手机供应商最近新增的一项服务是“实时短信”(Real-Time text),用户可以在打电话时发短信,以改善沟通。 


另一个帮助残疾人的功能是替代文本。视力低下或失明的人通常依赖屏幕阅读器大声朗读屏幕上的内容。但是,如果信息图标没有标签或替代文本,屏幕阅读器就无法向用户描述该按钮的功能。不是每个图像或图标都是信息,所以只在必要的时候添加描述。 


研究和学习辅助技术将帮助您更好地理解这些技术的影响。这里有一些链接可以帮助你开始: 

讨论残疾技术的价值:YouTube上TEDx演讲中的残疾技术 

https://www.youtube.com/watch?v=eFkhFxJZvho 

科技的可达性如何改变生活:盲人如何利用科技从YouTube上的TEDx演讲中看到世界 

https://www.youtube.com/watch?v=0EQOZRIA-nA 

智能手机可访问性:来自Uswitch的全面指南 

https://www.uswitch.com/mobiles/guides/smartphone-accessibility/ 

谷歌无障碍信息中心主页 

https://www.google.com/accessibility/

将包容性设计付诸实践 


为了将包容性设计付诸实践,重要的是让自己沉浸在残疾人可能使用的辅助技术中,并与他们讨论他们的经历。为你周围的世界进行同理心设计的最好方法是与你的用户互动,并询问他们你的设计可以帮助他们成功的方法。 
要了解更多关于包容性设计的知识,这里有一些额外的资源可以帮助你入门: 

描述方法设计产品包容性:包容性设计:12种方法为每个人设计从Shopify 

https://www.shopify.com/partners/blog/inclusive-design 

谷歌的包容性设计的无障碍方法:从谷歌I/O的包容性设计的无障碍过程 

https://www.youtube.com/watch?v=TAzkrXTGEOM&feature=emb_title 

分解重要的包容性设计原则:来自UX Planet的6条包容性设计原则 

https://uxplanet.org/6-principles-for-inclusive-design-3e9867f7f63e

理解人行道斜坡效应





路沿石切 Curb cut


坡道与相邻街道形成坡道的人行道的斜面


人行道斜坡效应 Curb-cut effect


路沿切割通常在十字路口发现。多亏了路缘切割,坐轮椅、腿支架或拐杖的人可以更自由地在他们的社区里穿行。但是,有趣的是:削减路沿的好处延伸到每个人,从推婴儿车的人到骑自行车的人,搬家的人,和老年人。很有可能,路边停车对你也有帮助。路缘切割已经成为无障碍设计的一个非常流行的例子,现在有一个完整的概念以它命名。


“人行道斜坡效应”是一种现象,描述的是为残疾人设计的产品和政策如何最终帮助到所有人


二、定义并陈述问题 Define


识别用户面临的问题是用户体验设计中最重要的部分之一。在这篇阅读中,你将学习如何定义用户未说出口的痛点,并利用它们形成强有力的问题陈述。


痛点和问题陈述之间的联系 


痛点:任何让用户受挫并阻碍他们获得所需内容的用户体验问题。


想想遛狗应用和我们的一个用户角色,Arnold。Arnold快50岁了,他的孩子们鼓励他升级到智能手机。Arnold是公司的领导者,他不习惯承认自己对技术不适应。妻子去世后,Arnold成了家里动物的主要照料者。但是,他每周工作60多个小时,无法每天两次带着他的三条狗散步。Arnold向遛狗软件求助。





痛点可以分为四类: 

财务:与金钱相关的痛点。 

产品:与质量问题相关的痛点。 

过程:与用户旅程相关的痛点。 

支持:与从客户服务获得帮助有关的痛点。 

Arnold的痛点属于过程范畴。他最大的挑战是他不懂技术,所以他很难理解如何使用这款应用。 要构建问题陈述,您可以利用5w1h框架。


5个w和1个H:谁,什么,何时,何地,为什么,如何 


用于创建问题陈述的最常用框架是5w1h框架。在定义了用户的痛点之后,您可以回答谁、什么、何时、何地、为什么以及如何解决用户的问题。



谁正在经历这个问题?
了解用户及其背景能为用户设计更好的解决方案。

你想要解决的痛点是什么?
尽早确定用户的痛点可以让您回答剩下的这些问题,并阐明痛点的上下文。

当用户使用产品时,他们在哪里?
用户的物理环境对您的设计很重要。

什么时候出现问题?
也许是漫长而乏味的过程刚刚结束,也可能是每天都在发生的事情。知道问题何时发生可以帮助您更好地理解用户的感受。

为什么这个问题很重要?
了解这个问题如何影响用户的体验和生活将有助于明确潜在的后果。

用户如何使用产品以达到他们的目标?
了解用户如何达到他们的目标可以让你绘制用户通过你的产品的旅程。

以Arnold举例:


谁:一个忙碌的主管 。
事情:Arnold想为他的三只狗雇一个每日遛狗的人。 
地点:Arnold很可能在工作中,在路上使用这款应用。 
何时:当Arnold打开应用程序时,他会感到沮丧。 
原因:Arnold在手机应用或类似技术方面没有太多经验。 
如何操作:Arnold希望从应用程序的主屏幕轻松切换到遛狗者列表,再到确认屏幕。


问题表述公式 


那么,如何创建问题陈述呢?首先定义用户是谁,他们的需求和动机是什么。


【用户名】是一个【用户特征】ta需要【用户需求】因为【洞察】


现在把这个公式应用到Arnold身上。Arnold是一个忙碌的专业人士,他需要一个遛狗人。但它的洞察力是什么?他的电话!他的孩子们给了他一部闪亮的新智能手机。Arnold分享说,他经常与技术作斗争,在应用程序导航上有问题。 


好的问题

该问题以人为中心,专注于特定角色的需求; 

该问题有发散的空间; 

该问题可以用实用的设计方案来解决;

陈述解决方案


有两种常用的方式可以用来陈述解决方案:


如果.....那么....(关注用户需求)


如果Arnold下载了遛狗应用程序,那么他们就可以利用“简化”模式设置只查看应用程序的基本功能。 
如果Arnold斯注册了遛狗软件,那么他们就可以快速轻松地选择适合自己时间表的遛狗者。


我们相信,....将...(从团队的角度描述并保持对用户需求的同理心)


我们相信,Arnold的遛狗应用程序的简化模式将允许他们高效地雇用遛狗者。 
我们相信,Arnold可以方便地找到遛狗的人,这将增加他们为宠物选择的散步次数。


好的方案


该方案说明了一个具体的操作,并能够说明解决方案应该让用户做什么;
该方案成功满足用户需求的期望结果;


价值主张 


我们如何使用到目前为止构建的所有内容(共情地图、人物角色、用户故事、问题陈述和假设陈述)让用户认为,“我必须拥有这个!” 。答案是:从定义产品的价值主张开始。


价值主张总结了消费者为什么应该使用一种产品或服务。


价值主张的例子:


看看一个你可能认识的产品——Gmail——然后问问你自己,你是否能认出它的一些价值主张。当谷歌在2004年推出Gmail时,他们进入了一个已经非常拥挤的免费电子邮件服务市场。Gmail提供:

免费收发电子邮件 

电子邮件分类、归档和星星功能 

垃圾邮件过滤 

电子邮件对话视图 

1g的云存储

清单上的两项是当时其他电子邮件服务无法提供的独特服务:电子邮件对话视图,它将单个电子邮件放在更大的线程上下文中;还有整整1gb的存储空间,这是竞争对手提供的存储空间的1000倍。这些都是Gmail独特的价值主张。 


你的产品所提供的一切对你来说可能是显而易见的,但你必须把自己放在用户的心里。用户还不知道你的产品,也不了解它的价值。这就是价值主张的用武之地。

首先,你需要做一些调查,以回答以下两个问题:

  • 你们的产品是做什么的?清楚地解释你的产品为用户提供的服务。
  • 用户为什么要关心?描述你的产品如何解决用户的痛点。 

一旦你回答了这些问题,你就可以遵循一系列的步骤来专注于你的产品独特的价值主张。让我们以遛狗应用程序为例来探索这是如何工作的。


步骤1:描述你的产品的特点和好处



列出你的产品的所有伟大的功能和好处,无论大小。列出所有想到的东西,然后再缩小范围。

步骤2:解释产品的价值





任何你确定为价值主张的东西都需要对你的用户有益。在本例中,对于遛狗应用程序,在用户访谈中确定了四类产品价值:可访问性、遛狗者的专业体验、成本和可靠性。第一步的功能和好处被分成了这四个类别。 


最初的列表中有一些功能和好处不属于这四个类别,并没有为用户增加真正的“价值”:

每月为您的宠物提供有机食品和新产品资讯 

专门供遛狗使用(不含其他宠物) 

遛狗者分级系统 

培训技巧

这些特性和好处没有被分类到这四类,而是被放在了一边。


步骤3:将这些特性和好处与用户的需求联系起来




我们的目标是确定对用户真正有价值的东西,而不仅仅是用户没有要求的酷功能。为了确定价值,将你所开发的人物角色与满足其最大痛点的价值主张配对。


步骤4:回顾你的官方价值主张清单


通过将它们与实际用户需求相匹配,您已经缩小了大量好处和功能的范围。现在是时候回顾你的产品提供的价值主张清单了。对于遛狗应用程序,以下是与早期开发的人物角色相匹配的价值主张:

  • 遛狗者的专业培训
  • 可将遛狗者升级为狗保姆的预定散步功能
  • 可以追踪遛狗者的地理位置
  • 日期预选
  • 延迟取消费用通知
  • 为您的房子钥匙提供方便的储物柜
  • 易于使用的应用设计

这就是你的价值主张清单!然而,您的竞争对手也提供了其中的一些功能和好处。那么,你如何知道是什么让你的产品在竞争中脱颖而出呢?确定应用的独特价值定位。这意味着要重新审视与你的人物角色相匹配的价值主张列表,并删除竞争对手也提供的价值主张。

了解你的产品的竞争对手的方法之一是阅读评论。将评论从低到高进行排序,仔细检查评论者对你的竞争对手分享了什么。以下是一款竞品遛狗应用的一些评论:





你能在这个例子中找出最大的痛点吗?在一些评论中,一个共同的主题是需要对遛狗者进行彻底的、面对面的培训,以确保遛狗者知道如何做好他们的工作。一些评论还呼吁遛狗者需要可靠。没有其他遛狗应用程序可以满足这种需求,所以这是我们的应用程序可以提供的独特价值主张! 


关键点


关于价值主张最重要的一点是,它们必须简短、清晰、切中要点。用户希望能够很容易地准确地确定您的产品将如何满足他们的独特需求,以及是什么使您的产品在市场上与众不同。有时候用户不知道他们需要什么,除非你向他们解释。这才是产品设计创新的真正核心。


三、创意想法 Ideate


在创意想法之前的准备活动

第1步:和用户共情


设计师需要了解我们是为谁解决问题,他们的需求是什么。我们可以通过用创建共情图、角色模型、用户故事和用户旅程图

第2步:定义问题


首先我们需要定义好所面临的问题,这样团队中的所有成员才能为了解决同一个问题而集中发力。明确我们所面临的问题也可以帮助我们始终将用户需求放在第一位。


第3步:准备一个适合创造的环境


我们需要一个舒适的空间,让团队中的每个人都可以聚在一起表达各自的想法。如果是线下会议,建议选择一个不同于平常工作环境的创意空间。如果是远程会议,可以在家里找一个容易集中精力的地方。


第4步:设置有限的时间


日常的设计工作是无穷无尽的,我们需要给自己充分的时间去创意想法。然而,你不能一直头脑风暴,所以需要设置头脑风暴的限定时间并且开始更深刻地思考你想出来的创意点。


第5步:组建多样化的团队


一个由不同种族、性别、能力和背景的成员组成的包容性的团队,将帮助你想出各种各样的解决方案。


第6步:跳出思维定势


不要把自己局限于传统的想法和解决方案,我们需要天马行空的创意。如果你有一个看起来与众不同的很酷的想法,把它写下来!


扩展阅读
https://careerfoundry.com/en/blog/ux-design/what-is-ideation-in-design-thinking/
https://designthinking.ideo.com/


竞品分析


竞品分析是对竞争对手优势劣势的分析,可以从中获取产品的基本市场情况,也可以帮助我们设计出对用户更有帮助和更独特的产品。竞品可以分为两种:直接和间接。直接竞品与你的产品功能相近、用户群体相同。间接竞品与你的产品功能相近但用户群体不同,或用户群体相似但功能不同。


竞品分析的作用

  • 帮助我们了解市场上现有的产品及其设计
  • 当前面临的一些设计问题可以从竞品中获得解决方案的灵感
  • 找到市场上目前无法满足用户需求的产品缺口,使我们的产品相对于竞品有独特的竞争力
  • 了解当前市场上产品的预期生命周期
  • 了解当前产品有哪些方向可以改进,参考这些改进点给竞争对手带来了什么影响

竞品分析的局限性

  • 限制了思维,不利于创新
  • 依赖对研究结果的解读
  • 竞品的设计并不一定适用于你的产品
  • 竞品分析需要持续地做多次

竞品分析步骤

案例项目背景:假设你正在为你的新客户花园汉堡进行关于快餐汉堡餐厅的竞品研究。花园汉堡认为他们目前的网站缺少吸引力,获客少,他们想让你帮助公司重新设计他们的网站。

第1步:明确分析目标


目标:比较竞品网站的用户体验 

使用一致的维度来梳理竞品信息可以帮助我们更加直观地对竞品评级。 

推荐评级标准: 

需改进:无法满足用户需求 

良好:有缺陷,但可以满足用户需求 

优秀:较好地满足用户需求,但易用性有待提升 

卓越:符合或超出用户预期,并且体验一致


第2步:竞品罗列


可以询问客户来了解他们的直接或间接对手有哪些。比如花园汉堡认为汉堡来了是他们的直接竞争对手,而你根据自己的研究发现约翰汉堡和小高牛肉汉堡是与花园汉堡在同一区域的汉堡餐厅,因此他们是两个更直接的竞品。同时,你还发现有个叫素食汉堡的间接竞品,他们网站上的图片非常吸引人。通过以上信息,我们可以构建竞品分析图表的框架如下:



第3步:列出分析维度


举例:
第一印象:网络是否有延迟?跨设备的适配怎么样?你觉得这个网站怎么样?
交互:有哪些功能?是不是所有用户都可以访问网站?对不使用英语的用户包容性如何?在使用过程中是否会感到困惑?导航是否清晰?
视觉设计:视觉是否一致?品牌是否与目标用户匹配?页面设计是否让人难忘?
文案内容:文案内容是否符合公司品牌?用户可以找到他们感兴趣的细节吗?
可以将列举出来的维度放在竞品分析表的第一行,然后我们需要填写每一个竞品的这些信息。


第4步:调研每个竞品


目标群体


调研发现,千禧一代及其家庭是竞争对手们的主要目标群体,其次是z世代的大学生。这与花园汉堡的目标群体非常相似。只有素食汉堡的目标群体不同,因此它被列入间接竞品中。




第一印象


第一印象最好的是小高牛肉汉堡和素食汉堡。两者的图片都很清晰且吸引人,网站的响应速度很快。汉堡来了和约翰汉堡的网站不太容易记住,它们的导航很清晰,但是布局需要改进一下。 就手机网站体验来说,只有汉堡来了没有做好适配,手机端的间距不对,导致一些信息看不到。 评分较低的网站最大的问题是菜单,有时菜单无法访问或展示的形式难以阅读。这绝对是你重新设计汉堡花园网站时要注意的事情!



交互

小高牛肉汉堡的网站有加载动画,约翰汉堡的网站首页有很多不必要的内容使得人们很难找到他们想要的重要信息。另外,清晰的导航(明确哪些元素可点击,哪些不可点击)在网站设计中非常重要,素食汉堡在这方面做的很好,具有定位商店等功能和全面的可访问性,包含多种语言选项并且兼容多种浏览器。



视觉设计

网站清晰和一致的视觉设计可以吸引用户去了解产品和公司。花园汉堡目前的网页设计非常扎实,但是存在一些优化点可以更好地反应他们的品牌调性。 

小高牛肉汉堡和素食汉堡通过独特的颜色、字体和图片传达他们的品牌。约翰汉堡和汉堡来了缺少一致的网站风格设计,约翰汉堡并没有很好地传达自身品牌




文案内容


文案的描述也是传达公司品牌和吸引用户的另一个好办法。大多数花园汉堡的竞品都使用吸引注意和有趣的语言来迎合他们的客户。花园汉堡的语言基调有一些不一致,并且没有它的竞品那样感觉让人放松。
总的来说,竞品的内容简短且易于理解。汉堡花园目前的网站描述显得有些枯燥和冗长。





第5步:总结洞察

在进行研究、收集数据和分析洞察之后需要进行总结。需要根据竞品分析目标来梳理报告中的内容以及呈现洞察。


例如,如果竞品分析目标是对了比较竞争对手的目标群体,我们可以使用一些信息图形来呈现数据。或者,目标重点是视觉设计,我们可以截取竞品的图片并突出显示重点区域。


如何展现竞品分析


可以使用ppt或书面文档的形式来展现竞品分析报告,ppt会更有视觉冲击力表现形式更丰富,但需要花费更多的时间。书面文档写起来很方便,如果你的报告对象比较少,建议使用书面文档。


信息结构上的注意点


概述研究问题、研究方法以及与竞品相比较的一些产品特征,这部分内容可以让团队对竞品分析的目标有一个清晰的认知。





为了更好地向听众传达信息结构,在每个部分开始前需要有一个标题页,就像下图所示:





下一步,总结你从竞品身上学到的以及跟自身产品的对比。一定要指出本产品的优势和可以改进的机会点。
在你组织信息呈现的时候,要注意思考如何最有效地展现你的洞察点。保持整体设计简单和干净,避免杂乱,让听众能聚焦在重要信息。





最后,总结关键点。竞品最多可以比较10家公司,这里面的信息量非常大,总结概括最重要的信息来帮助听众记忆。


有效地展示数据


展示数据的方式会影响听众的解读,不同类型的数据需要用到不同的展现形式。例如,你的报告有很多数字或量化数据,一个图表或图表可以帮助听众比较数据。为了演示竞品的特定功能或问题,可以在演示中加入录屏视频。


最后,可以加入你在竞品分析中使用到的评分标准的说明。例如,我们在示例中将评级分为“需改进”到“卓越”,对应每间餐厅在每个类别中以1到4的等级,从而形成最终的评级。


其他小提示

  • 提前分享报告,获得反馈,在正式汇报前不断改进。
  • ppt上的文字尽可能少,细节留给演讲。
  • 坚持挑亮点。如果想了解更多细节,可以将它们添加到演示的附录中,或者创建一份书面报告。 
  • 使用笔记。提纲或便条卡可以帮助你记忆主题。
  • 提前练习。在重要的日子之前做几次测试,以适应你演讲的内容和节奏。 
  • 使用相关的图片。确保所有的图片和图形都与你的演讲主题直接相关。仔细选择图像和图形,以确保它们增强清晰度。 
  • 控制自己的偏见。要意识到你自己的设计偏见,并尽量防止它们在演示过程中影响你的判断。 
  • 能够为自己的结论辩护。确保你有证据支持你的结论。尽可能使用实际数据和具体例子。 

《福布斯》的这篇文章将帮助你缓解演讲时的紧张感,听听来自专家的关于与听众沟通的建议:
https://www.forbes.com/sites/markfidelman/2014/08/15/20-world-class-presentation-experts-share-their-top-tips/?sh=2920b075c40d


头脑风暴设计创意点


方法一:我们如何能够 How Might We (HMW) 


“我们如何能够 How might we (HMW)”是一种将问题转化为设计机会的设计思维活动。HMW可以激发设计师的创造力,并引导设计师从不同的角度思考问题,从而想出各种各样的解决方案。要想创建好的HMW问题,我们需要一个好的问题陈述来定义问题。


来自斯坦福大学设计学院的思考角度建议:


假设用户Darren面临一个问题:Darren是一个音乐会观众,他需要一直拿着音乐会门票,因为他们在通过安检时需要门票。 

放大好处(如何利用问题中的积极因素来解决问题) 

我们怎样才能使记录门票成为朋友间的一种有趣的竞争呢? 

探索相反的方向(将如何解决你所列出的问题的反面) 

我们怎样才能发明一种不用拿着票的方法呢? 

改变现状(想想完全改变这个过程的方法) 

我们如何制作非纸质的音乐会门票? 

将POV分解为碎片(这对于长时间、复杂的问题尤其有帮助) 

我们怎样才能使顾客的票不丢失呢?我们怎样才能让安全团队更容易处理丢失的机票呢? 

消除坏处(想想如何完全消除问题中消极的部分) 

我们怎样才能让音乐会观众不需要门票就能进入场馆呢? 

改变现状(把消极的形容词试着变成积极的) 

我们怎样才能使门票持有者在进入音乐会场地时不那么紧张呢? 

质疑假设(删除或更改任何有质疑的流程) 

我们如何在音乐会中取消安全检查程序? 

根据需要或上下文创建一个类比(考虑将这个用户体验与另一个用户体验进行比较的方法) 

我们怎样才能让通过安检像玩电子游戏一样? 

识别意外资源(考虑一下如何通过问题陈述中没有提到的资源来解决问题) 

如何使用面部识别软件帮助管理音乐会入场?

更多资讯:https://static1.squarespace.com/static/57c6b79629687fde090a0fdd/t/589cc8b8d2b85721b37d3efe/1486670008488/HMW-Worksheet.pdf


实践思考


开放的 

一个好的HMW模型应该允许多个解决方案。例如“我们如何使跟踪门票变得有趣和有竞争力?”可以用无数种方式来回答。 

不要太宽泛 

HMW是全面的,但要足够聚焦,才能关注到解决方案的重点。一个过于宽泛的HMW问题的例子:“我们如何才能使票务更好?”这个HMW没有为提出解决方案的想法提供足够明确的指导。 

进行多次修改 

在写完HMW问题后,可以修改它们。如果你发现你的HMW不能帮助你想出任何有用的解决方案,那就改变它! 

创造性的 

HMW意味着富有想象力,甚至是有趣的。你可以使用上面斯坦福大学列出的建议,想出新的、有创意的方法来组织你的问题。 

写尽可能多的HMW 

你拥有的HMW越多,你就能想出更多的解决方案。如果你能从所学的一个框架中提出不止一个问题,那就大胆写下所有!


方法二:八个疯狂创意 Crazy Eights


将一张纸对折3次,得到8个用划痕划分的模块,分别记录下8个设计创意点。相比于电脑,纸更加快速方便,只需要八分钟,你就可以获得八个解决方案并且非常方便团队交流。注意要控制创意时间,大概1分钟画1个方案草图。每个人选择两三个自己认为优秀的方案和团队成员共享交流,选出最好的方案,然后继续细化。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系。 



作者:腾讯ISUX团队    来源:伊糖巷陌



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

灵动岛,是创新还是妥协?

博博

2022苹果秋季新品发布会,最大的亮点是iPhone 14 Pro系列一改之前「刘海」设计,首次采用了「药丸」挖孔屏。

01

什么是灵动岛(Dynamic island)

2022苹果秋季新品发布会,备受关注的新一代iPhone如期而至,此次发布会最大的亮点是iPhone 14 Pro系列一改之前「刘海」设计,首次采用了「药丸」挖孔屏。虽然「药丸」在安卓阵营中并不是什么新鲜玩意,但一向以创新著称的苹果还是玩出了不一样的花样,带来了全新的交互方式,模糊了硬件和软件的界限,通过实时变化显示重要的提醒、通知以及简单的功能操作,苹果把这一创新称之为灵动岛(Dynamic island)。



02

灵动岛能做什么 / 不能做什么

灵动岛其实可以简单的理解为基于前置摄像头区域拓展的消息通知和快捷操作的新交互方式。

来电

当有来电时,灵动岛会发生变化,并在后台打电话时显示通话时间和声音波纹。



音乐

有点类似于锁屏后的音乐功能操作,保留了基本的播放、暂停、前进、后退等功能。



Airpods

连接AirPods后,AirPods的型号外观和当前电量会一起显示。



导航

显示导航方向和距离,并且能够在适当的时候放大显示更多导航信息。



Face ID

以前Face ID认证会显示在屏幕中间,现在集成于灵动岛的扩展功能之中。



充电

当充电时,会显示充电的状态以及当前电量百分比。



当然,目前除了官方展示的这些功能以外,还会有更多的应用方式,在此不一一列举。但灵动岛也并不是万能的,例如会存在以下的局限性:

重度使用场景

从官方给出的样例来看,灵动岛更多的是承担了消息通知和提醒的作用,并不适用于重度使用和复杂交互等场景,例如消息聊天、刷短视频、买卖交易等等。

过于复杂的图形

受限于前置物理摄像头,灵动岛这个区域并不能显示过于复杂的图形,并需要避开摄像头区域,因为该区域是不能显示任何图像的。



软硬件的边界

灵动岛的实际效果并不会像宣传图中那样好,特别是在反光强烈的户外。摄像头的挖孔清晰可见的,即使是在黑色不发光的OLED屏幕上,软件和硬件的界限还是能够明显区分。



03

对于灵动岛的各方反应

新事物的出现,总会伴随着支持和反对两种声音,此次灵动岛的创新交互,自然也是褒贬不一,还需要经受时间的考验,因为即使是苹果这样的公司也难免会犯错,比如3D Touch、MacBook上的Touch bar等。

支持方认为「灵动岛是继刘海屏之后的又一个成功设计,甚至会超越刘海屏,更受欢迎」。

「灵动岛的设计非常讨巧,同时也给挖孔屏带来了更多的想象空间」。

而反对方的理由也十分充分,首先是罗永浩第一时间发表了自己的观点,表面上是硬赞这个创新,但实则是讽刺了这样多此一举的方式,「先在脸上涂屎,然后再把屎的颜色调整得跟粉底差不多」



很多的舆论认为,灵动岛的创新是苹果的一种无奈和妥协,因为自从第一代iPhone革新性的使用触摸屏之后,十多年以来手机在工业设计方面并没有太多的创新,大部分厂家是在屏幕分辨率,后盖材质,摄像头像素上面做文章,而苹果作为一个工业设计创新的公司,也只能通过后置摄像头模组的排列来维持每一代iPhone的变化。所以此次灵动岛的创新,被认为是工业设计乏力之后推动交互设计创新的无奈之举。



但无论支持还是反对,前置摄像头挖孔屏终究是一个过渡性的方案,最终会被全面屏所替代,而在这个过渡时期,很明显苹果的解决思路与国内的绝大多数厂商都不一样。

04

为什么国产手机不做灵动岛

国产手机的前置摄像头解决方案除了「刘海」以外,单摄像头「圆孔」和双摄像头「药丸」设计都已经非常成熟,但是为什么经过这么多年的迭代,依然没有创新呢?

思维方式的差异

国产手机厂商的思路跟苹果相反,希望尽可能的把前置摄像头做得越小越好,甚至头部的厂商尝试探索升降摄像头和屏下摄像头的解决方案,目的就是为了把前置摄像头隐藏。而苹果的思路则是,既然现阶段的技术没有办法把前置摄像头隐藏,那么干脆就以此为基础,把这个区域运用到极致。

缺少创新和引领者

似乎国内的用户更关心的是电量是否持久、屏幕刷新率高不高、拍照功能强不强大等问题,秉持着「人民需要什么,我们就造什么」的成功理念,各大厂商也开始在这些方面内卷,从60Hz到120Hz刷新率,从千万像素到一亿像素,从莱卡加持到一英寸大底传感器... 大家都在做从1到100的事情,而很少有关注从0到1,因为这样做的性价比的确不高。



市场的接受和认可程度

当刘海屏第一次出现的时候,很多用户都在吐槽,其中也包括很多苹果的忠实用户,宁愿买iphone8P也不愿意使用刘海屏的iPhone X。而经过一两年的审美教育以及国产手机的跟风之后,才慢慢的被更多用户所接受。因此国内的厂商很难有信心通过一己之力去改变用户习惯,并赢得市场的认可。我相信,苹果发布以后,各大厂商已经在积极的学习和模仿,新的一轮内卷即将拉开帷幕。

即便如此,国产厂商也并不是完全没有在前置摄像头的区域努力尝试过。例如魅族曾经在前置摄像头上显示当前电量,称之为「环形电量」,并尽可能的使其与状态栏的其它信息融为一体。



荣耀的通话时间胶囊和自拍胶囊,都以前置摄像头为基础做延展,可以看得出在想尽办法的规避前置摄像头所带来的不好体验。




虽然VIVO的原子通知不是围绕前置摄像头区域拓展,但从效果和想法来看,也与灵动岛的概念比较类似。



HTC曾经出过一款HTC U Ultra,当然那时候还没有全面屏的概念,所以HTC把它称之为副屏,可以显示消息通知、音乐播放操作、App快捷入口等等。



除此以外,几乎所有刘海屏的手机都有把刘海隐藏起来的功能。



05

对设计师的影响

灵动岛的出现,对 iOS 原本通知、交互、卡片、弹窗等一系列交互规范进行了解构再重做,就好比「刘海屏」首次出现的时候,需要设计师对全新交互逻辑、卡片行为、动画等重新适配。那么对于「灵动岛」我想需要考虑的是这几个方面。

新的交互方式

之所以叫灵动岛,就是因为它是「灵动」的,拥有不同的状态变化,以适应各种功能提示和操作。设计师在使用这个功能的时候,需要充分考虑其场景,恰如其分的给予提醒而不给用户带来过多的打扰。

新的容器

不同形态的容器可以装载不同的内容,相比于以往常规的通知提醒,新的容器可以展示更多的信息,甚至是简单的功能操作。在提出解决方案的时候,留给设计师更多的想象空间。

新的表达方式

灵动岛相当于一个永远在桌面上的岛屿,比任何App的优先级都要高,所以会成为各个应用的必争之地,使用一种好的表达方式,必然能够达到事半功倍的效果,因此也是考验设计师在寸土寸金的区域中,通过视觉化手段表达的能力。

最后,我想苹果的初衷是为了更好的用户体验,消除一部分用户对于挖孔屏的焦虑,如果能够真正的站在用户的角度、克制的去使用新的交互方式,会得到用户的喜爱和市场的认可。

我认为灵动岛既是一种创新也是一种妥协,对于工业设计硬件创新乏力的妥协,更是对技术发展的妥协。我也相信,真正的全面屏时代终究会到来,期待那个时候苹果再一次给我们带来真正意义上的,里程碑式的,创新!


作者:捡蘑菇的人


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 


分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司 

网易云音乐一起听陌生人版项目总结

博博

 一起听 」背后的设计故事

01.背景


电影《再次出发之纽约遇见你》中有一个浪漫的场景,男主和女主通过一根耳机分线器一起听着音乐,一起感受着当下同一段旋律。通过这根分线器,他们分享着自己的歌单,分享着当下的情绪,隔绝外界的纷扰,游荡在大街小巷。


这种听歌方式我也很喜欢,同样的歌曲让人产生了不一样的感受。我想,可能是陪伴和共鸣赋予了这首歌新的生命力吧!


如今,无需分线器,网易云音乐一起听可以让你和那个TA随时一起欣赏音乐、分享心情。前年7月份上线的这个功能获得了用户的一致好评,之后的数据表现也是远超预期。但是,在众多的用户反馈中,最多的一个痛点是:身边没有人陪我一起听,能不能做个匹配功能,找陌生人一起听?


站在业务的层面考虑,一起听作为一个熟人听歌的功能,在恋人和亲密好友之间普及度非常高,但同时也要考虑当这部分用户数据增长到达瓶颈后,一起听如何拓展新的用户群。陌生人一起听是一个很好的方向,能够突破熟人社交的限制,拥抱更多社交关系拓展的可能性。


02.第一期探索


为了满足这一部分用户的需求,陌生人一起听的项目在决策层的支持下进入了探索阶段。这一阶段主要想要知道什么样的产品形态适合陌生人一起听,是在原有的熟人一起听的框架内进行拓展,还是大胆颠覆更加让人眼前一亮呢?每位小伙伴都描述着自己的构想,朝着不同方向探索。经过一轮轮的方案讨论,最终我们选择了“星球”作为框架,来承载陌生人一起听的设计。大概的构想是这样的:当我在听一首歌,感觉孤单并希望有人陪伴时。可以通过一个入口进入到一个由光点组成的星球,每个光点代表一个当前也在听这首歌曲的用户。我可以展示自己的状态,和其他的用户进行互动。当我对一个用户感兴趣时,可以选择“跟随”TA,每当TA去往另一个星球(也就是听其他的歌时),我也会自动移动到那个星球,跟随着TA一起听。


根据上述设想,设计团队还产出了一些方案来还原大家心中的“星球”,下面是早期一个方案的动态演示,黑胶上的封面变化为一个同色系的星球,每个光点代表一个正在听这首歌的陌生人。


我们将这个大概构想告知开发同学后,得知需要的人力和时间成本远超我们预期。由于决策层希望能够在一起听的热度未退时尽快上线陌生人版,我们不得不把这个星球版的方案暂时搁置,重新构想在原有框架内的设计方案。


决定在原有框架内进行设计后,我们就需要收拢之前发散的想法。针对主要需求进行设计,把有限的资源用到刀刃上。最终确定的产品形态似乎很简单直接,点一下按钮,匹配一个愿意和我一起听歌的人,但是到了视觉设计阶段,就需要考虑更多的问题。


从关系的角度讲。熟人之间比较亲密,陌生人之间要保持一定距离,慢慢了解对方。与熟人一起听有着稳定的预期,但是陌生人带来的是不稳定,这种不稳定可能是缘分和惊喜,也可能是骚扰和惊吓。考虑到这种不同,做陌生人一起听的功能就不能够完全套用熟人的设计,而是要针对性地进行重新思考。


首先,功能的入口能够给用户第一印象,我们用了一个动画表达两个陌生人沉浸在音乐中的含义,两个匿名小人安静地呆在一起,音符环绕着它们运动,暗示他们正在一起听歌。通过这种表达帮助用户快速了解功能,同时渲染氛围,吸引用户使用。


在熟人一起听歌过程中,为了表达亲密,表现形式上采用了耳机共享,头像叠放的表现形式。但在陌生人之间,为了避免过于亲密,就去掉了耳机线。为了控制社交距离,头像不再叠着放了。陌生人的头像也模糊处理来保持神秘感。


为了保证没有社交意愿的用户不被打扰,同时为了避免社交过程过于快餐化,陌生人一起听采用了一方申请,另一方同意才可以公开身份的规则。为了配合这个规则,我们设计了陌生人揭面机制来引导用户和传达信息。匹配成功后,双方会先隐藏身份听歌。以此来鼓励用户尽量关注音乐本身,而不是纯粹为了交友而进行一起听。当一起听了5分钟后,对方的面具会小幅度上下移动,暗示用户可以点击。点击对方的面具后会发出公开身份的申请,对方同意后才可以揭开面具。后续听歌过程中,双方就在身份公开的情况下一起听歌。如果相处愉快,可以去对方主页了解更多信息,甚至互关成为好友,下一次以熟人的身份邀请一起听。


“于千万人之中,遇见你所遇见的人”,这是我们想在匹配的过程中体现的缘分感。受限于开发成本,匹配动画只能在一个小小的圆形容器里去设计。下面四个方案是前期的探索稿,主要是把人抽象成一个个点,点可能代表一种颜色、一颗星星、一个光点,点的运动表达寻找的过程。


最后选用了第四个,进行最终优化后的呈现如下。通过雷达的转动表达寻找,浮动的光点代表一个个陌生人,最终受到召唤的那个TA飞入雷达范围,发出代表回应的音波后,变大形成一个蒙面的头像。(由于时间关系,此动画后半段仅在安卓端实现)


如果你仔细地用过一起听,可能会发现双红心彩蛋,这份惊喜感也是我们希望让双方感受到的。当你喜欢了一首对方也喜欢的歌曲,都会出现一个两个爱心碰撞出音符的动画,在惊喜的同时也会体验到来自陌生人的认同感。


至此,在这一版的一起听中,我们希望用户能够获得的感受是:“两个陌生人虽然素不相识,不方便通过言语交流,但是彼此分享同一首歌曲,互相陪伴,产生共鸣,温暖而美妙。”正如孤城的诗《门前》里的那句:“草在结它的种子,风在摇它的叶子。我们站着,不说话,就十分美好”。


03.倾听用户的声音


陌生人一起听上线后一个月左右,我们和用研团队一起在杭州的几个大学周边进行了用户访谈,包括面访和拦访,在一线倾听用户的声音。主要调研使用过一起听用户的使用情况、未使用过一起听用户对于一起听的认知情况,总结问题后为一起听后续的功能迭代和运营策略提供参考和建议。


根据调研结论,我们按照用户使用一起听前中后的顺序将问题进行排列,分析用户的问题和痛点,确定了之后的优化方向。


04.第二期探索


4.1 一起听聊天


我们结合数据表现和用户调研,计划在接下来的迭代中实现更多有趣的玩儿法。首先亟待解决的是用户聊天的需求。在熟人一起听中,用户一般使用微信作为聊天工具,一般不会考虑在云音乐里进行聊天。当陌生人一起听上线后,能够即时地与陌生人聊天就是一个最刚需的社交需求了。虽然云音乐已经有私信功能可以供我们进行复用,但是我们希望能够将一起听时的聊天做得足够轻量且能够随时触达,以此来提高聊天功能的使用率。


设计过程中我们结合场景进行思考和创新,经过几轮方案的筛选,最后大家对于一个问题产生争论:是进入聊天模式才可以收发消息呢?还是直接在播放页展示消息,随时聊天呢?


下图中,方案1能够减轻打扰,但是无法在播放页第一时间看到对方发的消息。


方案2有一定的打扰,但是能够第一时间看到消息,让听歌场景和聊天场景无缝衔接。


为了减少用户的操作步骤,把功能做得轻量化,最终选择了更加直接的方案2,同时为了避免打扰,每一方的消息气泡的展示数量设置上限为2条,超过2条就会收起到记录中。


下面的视频是聊天的简单演示,可以发现气泡通过背景模糊来区分前后内容,气泡的出现和消失不改变黑胶页的原有结构。


4.2 个人信息逐步展示


很多人用社恐来自嘲,表达自己想与人社交,但是又存在迈出第一步的障碍。陌生人一起听是一个匿名功能,很适合希望轻度社交的用户。在匿名的基础上,我们希望在听歌过程中,能够为用户带来更多轻量的、无压力的社交方式,帮助希望社交的用户逐渐熟悉彼此,找到志同道合的朋友。


个人信息逐步展示就是基于上述的需求诞生的创新功能。随着匿名一起听的进程,用户可以逐步解锁对方的信息,一部分是双方的共同信息用以产生共鸣,另一部分是对方的特色信息用以展示自身特点。在听歌的过程中逐渐了解对方,最后决定是否揭面进行更深度的交流。


首先,在共同信息的提示方式的设计上,我们并没有简单地用一个红点去提醒用户。而是用头像的发光来表示共鸣的含义,头像四周飘散的粒子来隐喻共同信息。让每一处的设计都能贴合一起听的风格。


共同信息在一个浮层上展示,我们把当前展示的信息控制为一个,通过上下滑动来切换。除了共同信息,用户可以直观地设置自己的状态,让自己更加像一个活生生的人。


4.3 一起听结果页


当完成一起听后,会有一个结果页来记录听歌过程中产生的各种数据。旧版的结果页用户反馈信息不够丰富,分享欲望不强。


新的结果页增加了双方的相似度、聊天条数这些数据,并且根据这些数据不同,会生成一个表达关系的成语,颜色有对应的变化。比如我们相似度很高,并且互发了很多条聊天消息的话,就会得到一拍即合的成语和红色的结果页。


与陌生人度过一段听歌之旅很容易让人产生分享欲,在社交媒体搜索一起听可以发现很多用户都用结果页配图发帖,并诉说自己与陌生人之间的互动故事。


05.总结


一起听经过这两次比较大的更新后,获得一些不错的成绩。截止至2021年12月,周末的平均DAU数据从130W提升到了200万,增量的70W中有大约30%来自于陌生人一起听。在2021年3月的云音乐整体满意度监测中,22%的用户表示自己经常使用一起听,满意度得分4.66(满分5分),在云音乐所有主要功能中居首位。


未来,我们会继续一起听的创新脚步,还有更多的可能性等待我们探索。希望未来能够为用户带来更多元的一起听体验。最后,我想用下面的这张图来结尾,它是同样主打与陌生人社交和陪伴的游戏《光遇》的一张美宣图,是我最近无意间在它的官网发现的。当时看到这张图后突然发现它和陌生人一起听的入口介绍图表达方式竟然这么接近。在这个温馨的画面里,代表“光”的白鸟围绕着你和我正如音乐环绕着你和我,彼此陪伴、传递温暖、分享喜悦~



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作,也请与我们联系01063334945。 

分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司 

动态引导设计

博博

01 前言

在产品设计中,当有新上线的功能或隐藏功能时,我们通常会给予用户提示。常见的有小红点、角标、黑色遮罩+文字提示等这类静态提示。

而人类是视觉生物,相比于静态内容,我们的注意力更容易被动态内容吸引。

今天来聊一下页面中常见的动态引导。

02 一个小案例

当你看到这个页面时



我想你会先被色彩凸出的元素吸引,然后是面积占比大的元素,最后根据阅读习惯从上到下,从左到右,依次查看其他内容。(大致如下图)



而当页面元素都赋予细节时



假如我想让你关注到其中某个较小元素



其实只需要为它添加动态,便能使其脱颖而出,这就是产品设计中的动态引导。



03 动态引导的作用

  • 新功能提示
  • 重要内容强调
  • 诱导用户操作
  • 操作教学指引
  • 信息高效传递

新功能提示 

当产品上线新功能时,设计师们都会根据功能重要程度,来决定使用什么形式让入口元素和其他元素区分开来。常见的有小红点、标签、气泡这类静态点缀元素(通常这类形式只出现一次,当用户点击后就会消失)。当然,也有将上述点缀元素动态处理的。如果入口是图标,甚至可以为图标制作动画,这在很多电商产品的品类区经常可以看到。



动态处理的形式,比原本的静态更容易引起用户对元素的注意力(与动态方式有关),甚至传递某种情绪。由于是循环播放的动画,因此可以持续吸引用户注意力。

ps:据说,每当页面多出一个会动的元素,后台就会多出这样一些留言,捅了开发窝了[Doge]。



诱导用户操作 

动态引导还常常被设计师用来强调重要内容(有可能被产品、运营拿刀架脖子),来达成某些数据指标,通过利用动态诱导用户操作。

例如:在会员卡片中添加光效、在广告中让按钮进行缩放、为签到入口图标设置动画。



这些都能充分引起用户注意,甚至提升功能点击率。



隐藏功能提示 

我们知道,在大屏上有更多空间可以展示信息。但在移动端,受屏幕大小限制,设计师通常会折叠或隐藏不常用的功能,来保持页面简洁。



对于这些不可见的功能,在初次使用时需要进行引导,才能被用户感知与使用。



操作教学指引 

讲到引导,还必须要提的是手势引导,通过动态直观展示不同手势的作用,提示用户如何与产品进行交互。



这在游戏教学中就常常使用,它可以帮助用户快速理解游戏玩法。



回到视频 App 中,你是否留意到,当你第一打开视频时, App 会提醒你双击屏幕可以点赞,上下滑动可以切换视频。



在产品交互设计中,如果使用到一些新颖的交互方式,这类引导可以大幅降低用户学习成本,帮助用户快速上手。

信息高效传递 

动态叙述的直观性,使得我们可以减少对复杂信息进行大量文字描述。通过动态设计,我们可以创建视觉故事,这有助于将复杂信息以更简单、清晰的方式进行传递,从而帮助用户快速完成任务。

也因此,在一些含有复杂操作的弹窗中,渐渐开始应用。



但是需要注意的是,上述这些大多都只在第一次使用时才会触发。

当然有特例,例如:

在 App Store 每次下载应用进行验证时(面容解锁的情况下),系统会通过动态提醒用户电源键位置,并告知用户需要双击进行人脸识别。



在扫码时,弱光场景下出现的手电筒,通过动态引起用户注意,指引用户使用。



以及作为动态演示,帮助用户理解如何使用手掌滑动截屏



如何进行NFC感应等等..



04 总结

动态引导像是设计师用来控制我们眼睛的法宝,有的人用它改善产品体验,有的人用它提升商业转化。

但法宝虽好,我们只有理性使用,才能避免用户迷失在这眼花缭乱的世界中。








作者:
零三



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司 

为了让用户买买买,小红书做对了哪些事?

博博

在网络购物发达的互联网时代,大部分年轻人(包括小摹)在购买商品前都会在各种平台上找测评贴,其中小红书就是代表平台之一。

小红书入驻了许多博主,从明星到素人,他们经常发布笔记帮大家种草或者拔草,UGC+电商的模式也实现了完美的购物流程闭环,使得小红书拥有了一大批忠诚用户(小红薯)。那么为了让用户买买买,小红书都做对了哪些事情呢?

本篇文章将从小红书App的界面设计和交互设计进行分析。

一、小红书至简的界面设计

『色调』

小红书色调以红色为主,与其名称呼应,同时红色受到年轻女性欢迎,与用户的产品形象相吻合。

该设计还采用了女性喜爱的可爱清新风格

小红书为其垂直官方帐号(穿搭薯、娱乐薯、校园薯等)也设计了可爱的卡通人物形象,为用户打造了小红薯表情包。

『界面』

小红书与其它同类的竞品风格不太类似,其界面给人简洁而又清晰的印象。这种简洁和清晰源自对于功能设置上的克制。在Feed流上,为用户提供最佳的信息阅读体验。

『Icon』

小红书在一些内容丰富的页面,icon一般为线性,降低视觉感;面性的icon则会出现在比较醒目的地方,提醒用户点击;拟物风格的icon一般为礼物图标等。

二、交互设计,如何做到简单?

小红书的整体界面比较简洁,使用起来很简单。首页只有三大功能模块,用户操作路径清晰。底部导航条之间分类明确,互不干扰,常用功能都能很快找到,不常用功能放在侧边栏中,节省了页面空间。

小红书的3种内容方式

图文:图文笔记的浏览界面就是图片与文字分开的形式,图片左右滑动浏览,一般用户会增加标签辅助说明。文字也只能利用图形来增加可看性。此外在文章内还可以增加商品链接,直接引导转化。

视频:短视频的浏览界面与抖音非常类似了,文字说明的内容超过一定字数会折叠。当然也有一些短视频没有的功能弹幕。右上角有分享功能,点赞、收藏和评论则在左下角。

直播:小红书直播内容主要是以互动为主,不同于其他的直播模式,而是以主播分享体验向用户推荐商品,这样的方式更能提高用户对商品质量的信任程度。直播过程中用户可以右滑进入简洁模式,这样直播的弹幕以及礼物点赞特效则会隐藏。

三、小红书的购物方式

小红书电商体量没有淘宝大,商城首页很干净使各个活动入口更加清晰,使用卡片的布局形式展示,可以有效的与轮播广告相区分。小红书在商品界面设计上更加清新、层次分明,让用户能明确操作流程。

购物模块与笔记社区有着非常巧妙的联系,在添加笔记时,小红书也鼓励用户关联商品订单,如果关联,商品购买链接就会显示在笔记中,不仅缩短了用户查找时间,也直接进行了流量引导转化



作者:jongde          来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司 

深度解析蚂蚁财富设计语言

博博







作者:菜菜不甜          来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司 

B端设计思考总结

博博


本文主要从业务分析、交互体验和设计规范三个层面进行总结。



一、业务分析层面

与C端不同,B端产品主要围绕业务为核心展开,面向专业的人员,有固定的业务属性,我们只有将业务理解透彻,熟悉业务的运作流程,才能在B端设计过程中,输出良好清晰的设计架构,更好的解决业务问题。因此,设计师的业务分析能力在B端设计中至关重要。进行业务分析可以从以下几点着手:

1.深入透彻的理解业务场景

我们可以从多方面收集业务相关的信息,包括梳理需求文档,与业务人员沟通等,来了解行业背景、业务目标、组织架构,理清一些专业名词等。业务场景理解的越深入透彻,我们才能建立起一个系统性的逻辑思维,对我们接下来的设计脉络的梳理以及整体设计的把控是越有利的。

2.梳理业务流程

我们可以通过绘制业务流程图,将零散的业务信息通过具象的流程图清晰地呈现出来,有助于我们宏观系统的了解整个功能流程,同时也能够确保业务的标准流程都能够走通,不会出现逻辑问题及功能场景的缺失。

3.理清角色权限

B端用户因其岗位角色的不同,使其具有清晰的角色权限。比如普通成员、管理员、超级管理员,分别对应不同的权限,不同的权限背景下,其功能和业务路径也是不同的。理清角色权限,聚焦当前角色本身的任务流程,避免被无关的信息干扰,可以使我们的业务功能更加清晰,避免冗杂无用功能在不同角色间的穿插,有助于分解信息结构呈现的复杂性。

二、交互体验层面

我们知道,B端设计的核心目标为降本增效,在交互体验层面可以理解为降低认知成本,提高使用效率。而B端设计的一个显著特点就是功能、场景复杂,要达到降本增效,需要我们在交互体验层面上注意以下几点:

1.视觉降噪与引导

B端注重对页面的高效操作,因此在设计的过程中要保持简洁克制,排除过多的干扰元素,聚焦主要功能,弱化或隐藏非必要功能,保证页面信息呈现轻量化,降低用户认知负荷。

同时,通过视觉设计,比如颜色、字号、字重、合理排版等,使页面信息呈现有层次、有重点,能够合理有效的进行优先级的引导,页面信息呈现更加清晰有序,降低页面的复杂性。

2.设计一致性

设计过程中,遵守设计规范,在视觉与交互上保持一致性至关重要。

一方面保持视觉上的一致性,包括字体、颜色、间距、结构等,能够使页面信息呈现严谨有序,保证易读性;另一方面,保持整个系统交互操作的一致性,则可以大大降低用户的学习成本,同时还能够提升开发效率。

3.符合用户心智模型

B端功能交互逻辑复杂,在设计过程中,尽量保持已成标准的用户操作习惯,尊重用户已有的认知,保证内容的可理解性,可以增加用户的熟悉度,降低学习成本。

4.信息层级划分

B端的信息结构复杂,如果将信息完全平铺呈现,不仅占用页面空间,还会大大加重用户的认知负担。这就需要我们站在用户的角度,基于用户的行为路径,进行信息层级的划分。

第一,对页面信息进行梳理,明确主要信息和次要信息,必要信息和非必要信息,将次要信息和非必要信息进行隐藏、收起、删除等,可以有效聚焦核心内容,避免分散用户注意力;

第二,对需要展示的主要、必要信息进行分类归纳、信息分组,通过合理的页面排版布局,使信息结构清晰有序的呈现;

第三,注意层级步骤的拆分,让用户逐级获得信息,路径清晰,避免过多信息杂乱无序的呈现,增加用户认知负荷。

5.预测用户行为

首先,我们通过预测用户行为,在关键交互节点增加功能曝光,给予用户操作建议和提示,可以帮助用户高效流畅的完成任务目标;其次,对用户行为进行预测,主动帮助用户完成一部分操作,比如信息默认值填充等,可以提升用户体验,减轻用户的操作负担。

6.保留旧版返回入口

B端产品结构功能复杂,有使用学习的过程,如果对B端产品进行大的改版升级,会让已经熟悉旧版本且已经产生使用习惯的用户产生一些不适应感。保留旧版本返回入口,让用户慢慢习惯过渡到新版本,可以减小用户学习的压力,避免因习惯问题影响产品的正常使用,无论是对用户的接受度还是对我们改版的顺利落地都是一种不错的方式。

三、设计规范层面

B端系统庞大且复杂,建立起统一的设计组件和设计规范至关重要。

组件规范的建立:

第一,能够保证交互及视觉设计的一致性,提升设计效率和降低用户学习成本;

第二,能够提升团队的协作效率,提高设计还原度,降低对接成本;

第三,组件化设计,可复用性强,能够提升开发效率,在后期的迭代开发中,也可以进行统一的更新和应用,能够减少开发工作量,便于维护。

设计规范比较具体,且不同的项目在规范细节方面也会有所不同,下面主要整理了一些比较常涉及且可以通用的规范和组件。

1.布局

B端系统用户的主流分辨率为1920、1440和1366,我们在选择分辨率时,首先确定目标用户使用场景是否对分辨率有特殊要求,如果没有特殊的场景分辨率要求,基于上下好适配性,通常会选择1440的尺寸进行设计。

由于B端业务场景复杂,信息量比较大,通常选用24栅格系统。

考虑结构布局,根据不同的结构布局,给出动态缩放适配方案。常用的布局为:左右布局和上下布局。

左右布局:通常是将左边的导航栏固定,对右边的工作区域进行动态缩放。

上下布局:通常是对两边留白区域进行最小值的定义,当留白区域到达限定值之后再对中间的主内容区域进行动态缩放。



2.色彩

B端用色讲究简洁克制,使用户能够高效聚焦功能内容,Ant Design上面对色彩应用的描述为“色彩在使用时更多的是基于信息传递、操作引导和交互反馈等目的。在不破坏操作效率,影响信息的清晰传达的这些原则之上,理性的选择颜色是关键。”基于色彩使用的目的,B端用色主要分为主色、功能色和中性色。

主色:通常是品牌色,或者根据用户群体、产品定位以及使用场景来定义,主要用在主要按钮、选中状态、高亮信息、空状态等。

功能色:代表了明确的信息以及状态,如成功、错误、提醒、链接等。功能色的使用需要遵守用户对色彩的基本认知。

中性色:主要用于文字、分割线、边框、背景等。

3.文字

字体:中文常用字有:Ping Fang SC、微软雅黑、思源黑体;英文常用字体有:San Francisco UI(SF字体)、Helvetica Neue、Arial。

字号:最小字号不小于12px,常规字号大小一般为14px。辅助文字12px,正文(常规)14px,小标题16px,标题18px、主标题20px,字号的选择可根据具体情况进行定义。

字重:字重通常选用regular、medium、semibold,分别对应代码中的400、500、600。

行高:行高设置一般为字号的1.5倍左右,我们也可以采用,字号+8px做行高。

4.按钮

(1)按照基础样式分为:主按钮、次按钮、虚线按钮、文本按钮、链接按钮



(2)定义按钮的交互状态:Normal(默认状态)、Disable(禁用状态)、Hover(悬停状态)、Press(点击状态)、Loading(加载状态)



(3)对按钮进行规范的制定:包括尺寸、圆角、文字、颜色、背景等


5.表单

表单通常由输入框、选择器、单选框、多选框等组成,具有收集、校验、提交数据的功能。

(1)表单的状态:设计时,要明确规范表单的三种状态

默认状态:即用户输入信息之前的状态;

焦点状态:即用户正在输入信息时的状态;

反馈状态:即用户填写信息后的校验状态。


(2)输入顺序:表单设计时信息的输入顺序按照先易后难,先必填后选填,先公开信息后隐私信息进行,可以减轻用户填写表单的心理压力。

(3)对齐方式:对齐方式分为三种:顶部对齐、右对齐和左对齐。

对齐方式的选择,需要根据浏览效率、屏幕空间以及标签长度来实际判断,做出选择。

首先,需要明确,浏览效率上,顶对齐>右对齐>左对齐。

然后结合屏幕空间和标签长度做判断:

顶对齐:效率最高,标签长度可以更灵活一些,但垂直空间占用多;

右对齐:效率次之,文本字数不可控但又不是很多时可使用右对齐;

左对齐:浏览时间最长,效率最慢,标签字数可控或者需要用户谨慎确认信息时,可使用左对齐。

需要注意的一点是,顶对齐的标签布局之间要有合适的垂直间距,才能浏览舒适,效率更高,通常使用输入框 50%至 75%的高度作为相邻输入框的垂直间距。


(4)校验反馈:校验反馈要具有准确性和及时性。

准确性:主要体现在,要给予用户准确清晰的错误原因和解决方案,以及准确的错误位置。

及时性:表单填写时,出现错误是难免的,为了避免用户盲目填写信息或者出现大面积报错,可以进行实时的校验反馈,比如用户输入完成鼠标失焦后进行信息校验,但反馈的前提条件是不打扰到用户。

需要注意的一点是,成功或者错误等的反馈,不能仅用颜色来区分,需要加入明确的图标和文字来提示,以达到视觉无障碍设计。

(5)标签与占位符:标签和占位符都要尽量简洁,避免文字过多,给用户造成视觉负担,信息描述应该准确、直观且完整。

(6)表单分步:当表单内容多而复杂时,会让用户感到烦躁和不知所措,表单分步不仅有利于减轻用户的填写负担,缓解焦虑情绪,还能够明确了解表单填写的步骤流程。

(7)数据与默认值填充:在用户进行信息录入时,可以通过后台数据库进行匹配,自动填写已知信息,也可以设置合理的默认值,满足多数人需要的默认选择,帮助用户节省时间,快速完成表单填写。

(8)输入框宽度与高度设定:输入框的大小通常对用户输入信息的多少有着暗示作用,输入框尺寸越大,用户会认为是可以输入很多字的。因此,并不是所有输入框宽度一致,就是好的设计,需要根据实际情况,设定输入框宽度,但是也不能设定太多宽度,宽度太多会使表单视觉效果凌乱,宽度设定要合理适当。

输入框的宽度是固定的,但是高度可以根据内容进行自适应调整,来保证信息的显示完整性,给用户以良好的体验。



(9)选项便捷性:表单填写要始终遵循能不填写就不填写,能选择就不要输入的原则。当选项多于5个时,适合使用下拉框的形式进行展示。当选项内容过多,超过下拉框的高度,用户筛选比较困难时,可以考虑是否输入更快,采用输入的方式。

6.表格

B端表格的设计本着清晰易读的原则进行,设计上需要我们注意以下四点:

(1)表格宽度:表格宽度的处理需要考虑自适应问题,主要有三种方式:

a.设定表格的最小宽度,最大宽度不做限制,可以无限延伸,当表格达到最小宽度时,做极限处理;

b.根据需要设定多个等级的最小单元格宽度,当单元格达到最小宽度时,做极限处理;

c.也可以按照表格宽度的百分比,设置单元格宽度,或者固定部分无放大需求的单元格宽度,对剩余单元格按照百分比进行缩放;

(2)极限处理:极限处理主要针对最小宽度,当表格达到最小宽度时,信息展示不全的情况下,常见的处理方式有:文本信息缩略显示、文本信息换行显示、横向滚动显示。


(3)单元格高度:单元格的高度直接影响表格的高度,信息呈现量,以及阅读体验。单元格高度一般在38px~58px之间,高度太大或者太小都不利于阅读,个人实践建议高度为字体行高的2.5倍。

(4)对齐方式:为了提升浏览效率和数据的对比效率,通常采用文字左对齐,长数字右对齐的方式,空数据使用“-”填充。


总之,做好B端产品的设计,需要我们多思考、多总结,规范与标准不是一成不变的,设计过程中要与业务、产品、前端多沟通,才能够做出体验更好的产品。





作者:陈小花儿          来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司 

日历

链接

个人资料

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

存档