首页

筛选功能设计总结

资深UI设计者

从用户的操作流程上来说,如果用户想使用一个功能,必然首先要发现它。如果连功能入口都找不到,后续的用户体验也无从谈起。而筛选功能可以帮助用户对功能信息进行快速的定位,缩短用户的查找时间,这篇文章我就来跟大家聊一下筛选功能。


 三种常见基本样式


首先要明确一个概念,筛选功能并不是普通的单一功能项,它和导航一样是一个体系。既然是体系,必然有最基本的组成部分。筛选功能(体系)常见的样式有以下三种:tab类,(下拉)列表类,标签类。这三种样式是筛选功能最基本的组成元素,不管你产品的筛选功能做的有多么复杂,都可以看成是这三种基本元素的不同组合形式。


Tab


Tab是最常见的筛选样式,一个tab项代表一个筛选维度,直接平铺的展示出来,用户很容易感知到。

Image title


根据方向我们可以将tab分为横向栏tab侧向栏tab。横向栏tab可展示2-5个选项,如果超过了5个,那么就需要用户滑动才能看到。所以当筛选维度过多的时候,我们可以考虑使用侧向栏tab,京东商品分类这里用的就是典型的侧向栏tab,我数了一下总共40个选项,这里如果使用横向栏tab用户可能要侧向滑动8屏,操作成本过高。

Image title


当然当选项过多的时候,我们还有一个法子,就是使用弹框,用户点击后可以看到全部的选项。

Image title



列表式


列表式也可称之为list,其特点就是占用空间小。因为它可以将选项隐藏起来,用户需要点击才能看到所有的选项,因此在有限的空间里可以展示更多的筛选维度。碍于手机屏幕尺寸的限制,列表式筛选现在应用的越来越普遍。

Image title

列表式筛选的样式其实有很多。可以做成popover类,actionsheet类,activityview类。这些样式很难去说谁好谁坏,这里我就只是列举出来,具体用哪种样式,大家自己来判断。


标签式


对于标签式,很难进行准确的定义,我更倾向于将单选按钮,多选按钮,switch等统称为标签式,标签式只能针对单一条件进行筛选,这点和tab很类似。标签式很少单独出现,多数情况下都是与tab和列表式结伴而行。

Image title


在淘宝里用户可以点击视图icon来切换视图模式,这就是典型的标签式筛选。

 

当然以上三种只是最常见的筛选元素,其余的还有输入框,滑块,地区/日期选择器等主要用于信息录入的组件。 


常见的筛选体系 


了解了最基本的元素,接下来看一些比较复杂的筛选样式。上面我也提到了任何产品的筛选体系都可以看成是这三种基本元素的不同组合形式。为了让大家更好的理解,我一一举例来说明:


tab+tab:


tab之所以受到青睐,是因为其较低的学习成本。每一个tab代表一个类别,而且是直接展示给用户看的,所以很多产品的筛选功能都会优先考虑使用tab。即使功能结构复杂到无法用一层tab来完成筛选任务,设计师也会考虑使用双层tab样式(tab+tab)的样式。(PS.当然下图应该算是segment control+tab)

Image title



tab+列表式:


当产品不断的发展,功能结构愈发的复杂,过于扁平的tab已经无法满足筛选的需求。以看电影这个场景为例,用户的需求是找到合适的影片和电影院。对于用户来说,衡量一家电影院会从地址、票价、品牌和特色服务(支持改签、IMAX厅等)这四个角度入手。这些筛选需求很难通过tab来完成,我们需要列表式的协助。

Image title



tab+列表式+标签:


当产品的功能结构进一步复杂,这也给筛选功能增加了新的难题。以boss直聘来说,这里的筛选项主要分为四个:排序方式(推荐/)、工作地点、公司规模、岗位要求。其中后三个筛选项包含大量的条件,特别工作地点,需要进一步定位到街道或地铁站。对于这种多维度,深层级的筛选需求我们可以使用tab+列表式+标签的样式。

Image title


这里我选择boss直聘的另一个原因在于它的tab数用户是可以自己增减的,每一个tab代表一条求职意向,最多可以添加3条求职意向。

Image title



筛选体系的容器


筛选体系是由众多筛选项组成的,这些筛选项需要一个“容器”来承载。上面说的boss直聘用的是下拉列表,这种样式其实还比较简单的,我们可以看一些功能更加复杂一点的产品,比如各大电商平台。这里使用的是抽屉式筛选框,说它是抽屉式,因为它跟抽屉一样,用的时候可以拉出来,不用的时候可以关起来,节省了空间。从某个角度来说,我们可以把抽屉式看成列表式的一个放大版。抽屉式筛选框可以容纳更多的筛选条件,像我在上面提到的输入框,多选按钮都可以在这里使用。

Image title


从底部弹出的动作栏也比较常见,这里使用了滑块和单选按钮。

Image title


Airbnb的筛选功能以浮层为载体,还使用比较少见的switch和stepper。

Image title


当然Airbnb筛选功能最大的亮点在于可以向用户即时反馈筛选结果的数目,用户不太可能会进入搜索结果为0的空页面,避免无效操作。


以上说的筛选体系都比较传统,大部分都是基于对现有结果进行筛选,其实我们可以对筛选功能进行前置。例如,我们可以在用户进行搜索之前就对结果进行筛选。

Image title


甚至在新用户第一次使用产品的时候,可以让用户填写一些个人信息以便进行个性化推送。

Image title


筛选功能的存在意义在于帮助用户对功能信息进行快速的定位,对筛选功能进行适度的前置可以简化用户的操作流程,同样可以达到节省用户时间的目的。

【产品即场景】体验先行

资深UI设计者

产品即场景,体验又贯穿整个产品~孰重孰轻早已分不清

Image title

产品即场景,而场景化核心要素之一的“体验”,是其中最重要的一项。

本文从体验出发,结合AARRR(用户增长)模型进行阐述,其中我认为该模型的使用必须是在产品搭建的场景下才能运作的。而其中涉及每一步的良好体验刚好又反哺场景的完善。

从获取-激活-留存-转化-传播每一个步骤中都存在内部因素和外部因素。本文只讲内部因素,产品从最开始的外部获客,转向产品内部的使用体验,再转向外部传播的这么一个过程。

Image title

文章不是教案,更不是真理。希望大家带着批判的眼光去看待每一篇文章。毕竟思辨精神才是形成独立思维的法宝。由于文章较长,我会分成上下两部分发布,进入正文:


获取(ACQUISITION)分为三个部分:


一:自然流量的获取


自然流量的获取,我们能干涉其中的体验非常少,只能打磨产品本身。但是自然流入的用户一定是基于以下几个点中的其中一个或多个。我们或许可以干涉体验前~


1.某个社会现象、热点所引发的相关功能性需求(例如前不久滴滴司机杀害空姐事件,引发多少芳龄少女的恐慌。提高了强烈的安全意识,这时候你会发现App Store里面一款app杀了出来“怕怕”(有兴趣的朋友自行下载体验),正是这个社会热点现象引发的自然流量暴增。当然也不排除产品借这个热点营销自己的产品)


2.某个痛点确确实实需要解决(当某类用户存在某个痛点时,会自己通过搜索或者同类产品对比选择一款产品进行使用,如果你的产品刚好能帮助使用者解决痛点,那么你成功吸引了用户。)


3.纯粹进行产品的体验(产品发烧友、同类竞品的体验人员、无意中下载的等)。我们称为无效流量,因为这部分用户一般是不太可能成为产品的忠实粉丝的。他没有明确的目的、没有明确要解决的痛点。


二:运营推广的获取


运营推广这个名词在互联网诞生之前就已经存在了。只是说原来传统的营销手段即产品-价格-渠道-促销开始逐渐失效。转而变为场景化的运营推广。将推广落实到具体的小场景中。


1.线上推广

其中线上推广包含线上营销活动(营销活动又分为已有话题进行营销【可以选择融入当前的热点话题类似节日、娱乐圈大事件等】&【提供话题痛点解决方案进行营销】和制造话题营销【创造业内的话题】【通过深度用户进行制造话题】、优惠活动(包括邀请好友得好礼、会员优惠、某个节日优惠等)。线上推广无非就是通过网络搭建虚拟场景,通过场景边界的不断延伸,覆盖吸引更多的用户参与进来。


2.线下推广

线下推广包含地推(地推不可避免的会带来2部分的人群:被地推活动中的奖品吸引的人;确实被产品的介绍所吸引的人)、海报&代言(同样会有2部分人群:被明星效应所吸引的人;被产品介绍所吸引的人)、门店的互相导流合作。线下推广效率远远没有线上推广来的快。但是对于需要线下场景的产品来说,这又是必不可少的。


三:社群自传播


通过单点击破,这就需要运营团队有很好的洞察能力,找到符合产品调性的社群,通过事件引爆该社群或者社区,让社群成为你产品的拥护者和传播者。


1.通过老带新的模式进行获取用户

当产品与老用户之间建立很好的纽带关系后,老用户自然会以个人为中心,向外帮你宣传产品。


2.引爆社群

通过各类社区,找到符合你产品的目标人群。通过对该社群的研究,运用社群内部语言或者表达,调动整个社群帮你发力。有点及面的扩散,称之为“气球理论(很细的一根针就能戳爆气球)”这同样是能引爆传播性特别重要的一点。


3.参与感(社会关系绑定)

当你周围的人都在转发或者都在使用的时候,如果你不了解或不使用的话,会引起个体的孤独感。也就是说“他们都在玩,我不玩就落伍了”,但是这种情况在产品推广的前期一般不太会出现。当传播势能达到一定程度的时候,才会出现刷爆朋友圈!


激活(ACTIVATION)分为二个部分:


当用户从外部导流进产品后,这时用户的去或留都跟产品&业务有关。如何让用户在进入产品后自然而然的进行使用也就是防呆原则。对,通过引导或者吸引使用者进行下一步操作。(打个比方,你去一家陌生的餐厅,进去后没任何人招呼你,没人告诉你要去选位置或者点菜,是不是有不知所措的感觉,我想你很快就会另寻他家吧)


一:进入产品后的操作引导


1.视觉引导(包括页面元素优先级、页面元素突出强弱进行视觉上的引导,很常见的就是:在你第一次使用某个产品时,会引导使用者进行第一步第二步的操作,降低用户对产品的陌生感)


2.动效引导(通过页面浮层的形式教育用户如何进行操作,这也是在产品设计中,对新用户的一种引导方式)说到底就是为了消除用户对新鲜事物的陌生感和手足无措感。


二:产品本身是否能激起用户的探索欲


当然这个问题本身是建立在是否能真正的帮助用户解决某些方面的痛点。否则再强的探索欲,也跟你产品本身没有关系。如何激起用户的探索欲?


1.产品整体视觉表现、使用流程的体验是不是够吸引人,是不是有属于产品本身吸引人的点。(当年的path效果,直接将它送上全民热潮之巅)


2.产品是否对使用者产生持续的吸引能力,产品前期只有不断的通过各种方式刺激用户。(产品体验优化、活动力度、宣传方式、让惠让利等)但需要注意的是:过度营销不等于有效刺激。


3.产品的任务流程设置是否合理,正常情况都是由简单到复杂的程度设置任务,由于用户的沉默成本,当完成一定任务后,就会沉淀下来慢慢成为产品的忠实用户。(摩拜产品是先让用户填写个人信息,最后才提示充值押金,站在使用者的角度来看,已经把个人信息都出卖给平台了,还在乎那200多块钱吗?不然你让他把流程倒过来试试,先充钱,再填信息。保证没多少人会用)。流程设置就像钩子一样,慢慢慢慢的把用户勾住。


上半部分先到这里,下半部分会从“留存”“转化”“传播”角度进行展开~


多数人能够成为很厉害的设计师,很厉害的产品经理。凡事都会有所谓的套路,当你熟知了解某个行业,或者多个行业的套路时。你会站在更高的视角看待问题,同样你会走的比人家更远更快。所谓的套路,是基于个人而言,可能你有个很好的导师能够告诉你以往的经验。但是我更认为,套路是通过一步步看似笨拙的努力不断总结不断归纳

深度解读尼尔森十大可用性原则 | 如何做好移动端用户体验优化

博博


听云 2016-04-18 10:49:28

早在1995年,尼尔森的十大可用性原则就已问世,虽然当时针对的是web交互设计,但易用性对任何拥有用户界面的东西来说都适用。不管是网站,程序,移动页面或其他,具体的规则可能不同,但总的原则都源自人类上万年进化所形成的思维方式。

1、可见性原则

用户在网页上的任何操作,不论是单击、滚动还是按下键盘,页面应即时给出反馈。“即时”是指页面响应时间小于用户能忍受的等待时间。保证页面内容的可见性、状态的可见性、状态变化的可见性。

在用户与应用的交互过程中,系统需要即时的给予用户反馈。如果用户在操作过程中,页面出现一片空白,不清楚应用是否给予了用户反馈,这时候用户就会感到焦虑、恐慌,这些都是不符合可见原则的。看起来非常基础的要求,其实很多产品都做不到或者没做好。

有一部分App,在弱网情况下信息未加载完成时,显示空白页,无法给用户任何信息。

现在来看一款可见性做的比较好的App

深度解读尼尔森十大可用性原则 | 如何做好移动端用户体验优化

如上图,关掉WIFI在2.5G的网络情况下首次进入这个App,主页面内容虽然迟迟加载不出内容,但是有一个提示能够告诉用户,当前正在做什么,是怎样的进度。并且“内容炼成中”这句有二次元味道的提示,使App的整体感非常好,而且图片一定程度上分散了注意力,使用户对加载的时间不那么的敏感,为弱网环境下内容的加载争取了时间。

2、场景贴切原则

网页的一切表现和表述,应该尽可能贴近用户所在的环境(年龄、学历、文化、时代背景)。此外,还应该使用易懂和约定俗成的表达。

在做产品设计的时候,主要考虑到的是用户使用场景。产品的功能要贴近目标用户的真实使用环境,这一点非常重要。用两款导航类产品举例:

深度解读尼尔森十大可用性原则 | 如何做好移动端用户体验优化

还原一下导航时部分使用场景,比如在一个陌生的城市开车,需要使用导航,输入目的地,大部分的情况下手机不是手持状态,观察的模式也是以眼睛扫描为主。

在这个页面上的设计,大部分的信息对我第一诉求导航并没有直接的帮助,如果要输入一个目的地,需要用寻找的方式去使用它。输入框非常窄,不好找到,使用场景下导航并不贴切。

深度解读尼尔森十大可用性原则 | 如何做好移动端用户体验优化

相比之下看到锤子驾驶的界面,作为一款导航类的应用,它教科书式的讲解了什么是场景贴切原则。在开车的时候只要用眼睛扫一下手机屏幕就可以知道要导航的功能位置,并且可点击区域巨大,非常容易选中。

选中导航后优先用语音搜索目的地,这样可以减少对驾驶的影响。下方巨大的List也让用户比较容易的去点击最近去过的地方。这样就非常符合用户在驾驶中,或者说非手持状态的使用习惯。

3、可控原则

为了避免用户的误用和误击,网页应提供撤销和重做功能。用户对当前的状况很好地控制了解和掌控,并且有足够的自由。

掌握、可控、自由是人类安全感的重要来源,如果使用一款产品的时候提心吊胆的,生怕点击了某个按钮就发生了错误,很难相信这样的一款App有好的用户体验。有一个用户交互的金句:操作前可预知、操作中可有反馈、操作后可撤销。

像iPhone 的出现,为可控原则做了最好的注解,Home键也是教科书式的可控原则的体现。无论你在哪里,遇到了什么问题,一键回到桌面,一切重新开始。

4、一致性原则:

同一用语、功能、操作保持一致。用户需要在同一个产品中,接受同一套规范、逻辑。

这样做的一个好处是可以让用户对App有一个整体的感知,在相同的背景下做相同的操作会有可预期的结果,这样大大的降低了用户的学习成本。如下图这个出行类App,点击了旅行休闲,结果跳转了一个莫名其妙的页面。内容与旅行没有关系,违背了一致性。

深度解读尼尔森十大可用性原则 | 如何做好移动端用户体验优化

5、放错原则

通过网页的设计、重组或特别提醒或安排,防止用户出错。

这方面很多成熟的实体产品都比较好。App中这种防错设计随处可见,比如订票软件,已经过去的日期显示为灰色,以防订错机票的错误。

6、协助用户记忆原则

在需要记忆某些信息时,产品功能上要帮助用户记忆。尽可能减少用户回忆负担,把需要记忆的内容摆上台面。

7、灵活的原则

中级用户的数量远高于初级和高级用户数。为大多数用户设计,不要低估,也不可轻视,保持灵活。

移动端的用户大多数不是专家级用户,也不是小白用户。对页面的设计要更侧重于满足对大多数用户的需求,不宜复杂,也不宜过于简单无提示。

8、易扫原则

互联网用户浏览网页的动作不是读,不是看,而是扫。易扫,意味着突出重点,弱化和剔除无关信息。

在时候用一款陌生产品的时候,用户绝大多数是使用扫描的方式而不是阅读的方式来理解内容。如果想让用户快速发现想要的信息,就一定要保证页面足够清晰,简约。如果有较多的信息需要展示,那么一定要分清主次,要求界面足够简单,突出重点,内容易读。

9、容错性

帮助用户从错误中恢复,将损失降到。如果无法自动挽回,则提供详尽的说明文字和指导方向,而非代码,比如404。

例如各类应用中要恢复出厂设置,是一个比较重大的操作

深度解读尼尔森十大可用性原则 | 如何做好移动端用户体验优化

所以在恢复出场设置前需要输入解锁图案。这就是容错性的一个体现。对于用户正在进行的操作有着明显的提示,避免了误按误点操作造成的损失。

10、人性化帮助原则

帮助性提示最好的方式是:1、无需提示2、一次性提示3、常驻提示4、帮助文档。

一个系统或者是产品,如果不需要文档或是提示是最好的,一切都是自然而然发生的。但是在很多情况下,需要对内容做一个提示或者帮助,来便于用户更好的使用App。

帮助和提示在哪里用的比较多呢?设置。在设置页面里,可以看到无线网络、定位服务等是否打开,而中间遇到比较复杂的操作,用户对此一知半解,这时候就需要有相关的帮助提示。

现在几乎所有的移动端交互设计全部基于用户体验,而在定位准、细分市场准,遵守了尼尔森十大原则的情况下,还有一些问题是每个产品研发团队不能避免且无法解决的。

在每个产品的不同生命周期中,侧重点也会不同。初期注重种子用户的培养与新功能的增加。到了成长期会经历版本的频繁发布,系统不够稳定。这时候就需要用到更加专业的第三方工具去帮助应用发布后的性能问题进行管理。

深度解读尼尔森十大可用性原则 | 如何做好移动端用户体验优化

在产品真正上线后可以及时进行崩溃分析、网络请求与错误分析,交互分析等等通过App的总体性能评分与在同行业竞争中所处的位置来不断迭代产品,改进用户体验。

设计规范 | Web端设计组件篇-反馈类

博博


企服盒 2018-04-08 10:52:48

本篇讲述的是feedback反馈类;反馈就是用户做了某项操作之后,系统给用户的一个响应。这个响应根据场景的不同会有不同的响应形式和不同作用。

设计规范 | Web端设计组件篇-反馈类

设计规范中最重要的部分就是组件规范了,制定组件的规范有哪些好处呢?

  1. 简单:熟悉了解组件的用法之后,在做界面设计时,只需要合理运用组件就可以快速搭建web端界面,无差错。由于有成套的组件规范,所以在交互设计和视觉设计过程中无需每次都重复劳动。

  2. 统一用户体验:由于使用了统一的组件规范,所以保证了的视觉和交互设计统一性,保证整体的用户体验性。

  3. 提升设计综合能力:由于减少了做组件重复性劳动,交互设计师/PM 可以将更多时间和精力放在讨论业务、设计方法、设计思维、定义产品等综合能力方面。从而驱动业务创新。

根据组件的用途,可以分为六大类:Feedback 反馈、from 表单、basic 基础、data 数据 、navigation 导航、other 其他。

设计规范 | Web端设计组件篇-反馈类

本篇讲述的是feedback反馈类;反馈就是用户做了某项操作之后,系统给用户的一个响应。这个响应根据场景的不同会有不同的响应形式和不同作用。

toast

定义:用户产生操作,出现toast提示,一般2-3s消失;通过toast中的提示语告知用户需要了解的信息。让用户的行为在使用过程中得到反馈和帮助。

使用场景:

  1. 可提供成功、警告或错误等反馈信息。

  2. 顶部居中显示并自动消失,是一种不打断用户操作的轻量级提示方式。

例如简书在没有上传专题封面时就点击创建专题按钮,出现toast提示,提示用户要先上传专题封面才能创建专题。

设计规范 | Web端设计组件篇-反馈类

toast的消息提示分类一共有三种类型:成功类、失败类、常规类。

组件样式有两种:可以点击操作使其消失、不可点击操作使其消失。

设计规范 | Web端设计组件篇-反馈类

alert 警示提示

定义:当用户进行某种操作时,网站会出现对应的警告信息提示用户,该提示信息的状态不会主动消失。

使用场景:

  1. 当某个页面需要向用户显示警告的信息时。

  2. 非浮层的静态展现形式,始终展现,不会自动消失,有的组件用户可以点击关闭。

例如淘宝购物车,删除之后,会出现alert警示提示,淘宝的例子属于alert的变种,用户可以点击“撤销本次删除 ”进行还原之前的毁灭性操作。

设计规范 | Web端设计组件篇-反馈类

alert警示提示的消息分类一共有三种类型:成功类、失败类、常规类。当然也可以不含有icon操作,含有icon操作的话警示性会更强。

alert警示组件样式有两种:带有删除操作,不带有删除操作。

设计规范 | Web端设计组件篇-反馈类

dialog对话框

定义:用于提示用户当前操作,或是完成某个任务时需要的一些其他额外的信息。对话框可以用确定/取消的简单的应答模式,也可以是自定义复杂的模式,例如表单的填写。

使用场景:

  1. 用户在进行重要操作的时,需要进行二次确认。

  2. 用于重要的反馈提示,让用户知道信息提示。

  3. 承载少量的表单填写类,减少页面的跳转。

windows系统的确定按钮一般在左边,而Mac OS的确定一般在右边。因为这个原因,导致我们平时看到的确定有时候在左边,有时候在右边。

微博和微信公众号后台的的对话框,确定在左边,而淘宝的对话框在右边。微信公众号的对话框是小浮层弹窗,避免了遮罩出现,同时对话框也出现在操作按钮的附近,对用户的干扰性也是最弱的。

dialog对话框,有三种常见的使用场景。其中表单对话框、提示类、轻量级提示类、表单类样式都是基于二次确认类对话框样式的改变而得到不同的样式。

设计规范 | Web端设计组件篇-反馈类

Notification通知提醒框

定义:悬浮出现在网页右上角,用于全局的提醒式通知。常见于服务器异常、操作失败等

使用场景:

  1. 较为复杂的通知内容。

  2. 带有交互的通知,给出用户下一步的行动点。

  3. 系统主动推送。

Notification通知提醒框出现在网页右上角,一般4-5s消失,也可以点击叉号进行关闭。

设计规范 | Web端设计组件篇-反馈类

tooltip 文字提示

定义:简单轻量的的文字提示。

使用场景:

  1. 鼠标移入则立即显示提示,移出则立即消失,不承载复杂文本和操作。

  2. 常用于解释操作按钮的文字说明。

还有一种tooltip是浏览器自带的,浏览器自带的和本篇的tooltip的区别是:浏览器自带的鼠标移入一般2s才显示,多用于折行打点的文字提示。例如简书,而本篇的tooltip鼠标移入就出现,切组件风格和浏览器自带完全不一样。

设计规范 | Web端设计组件篇-反馈类

tooltip组件按照需要解释说明的对象位置不同,可以有以下不同的样式。

设计规范 | Web端设计组件篇-反馈类


UI设计的4个角度与14点思考

博博


设计师柠檬 2018-04-26 15:22:57

写在前面的话:文章内容源于网络,由柠檬整理发布,如有侵权请联系设计师柠檬删除

都说UI设计是用户看到产品的第一个门,从进入手机应用商店到下载界面再到产品的首页,设计师不考虑一下真的用交互稿和产品直接做么,从图标在应用商店的吸引展示力和用户的软件留存率,这些哪个不是和UI设计师有关系?

本文重点:1.学着像产品经理的角度思考

2.学着像交互设计师的角度思考

3.学着在用户的角度思考

4.学着在自己的角度思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考


如何利用 “峰终定律” 改善用户体验?

资深UI设计者

一、什么是峰终定律

峰终定律是由诺贝尔奖得主 DanielKahneman 提出的,百度百科上它是属于心理学上的定义。

我把它结合了自己的理解应用在设计学上可以解释为:

用户在使用某个硬件产品,软件产品或者服务系统来完成自己目标的过程中,用户情感地图曲线的波峰(体验最好)、波谷(体验最差)、结束点的体验,决定用户对整个过程的体验评价。

而在过程中体验好与不好体验的比重,好与不好体验的时间长短,对记忆几乎没有影响。

这一定律主要是阐述人对过去体验的记忆由两个因素决定,一个是「高峰」,一个是「结束」。

把用户情感地图曲线和峰终定律结合起来,简单画一张图:

既然用户整体体验与整个过程中好坏综合无关,只跟几个关键点有关,那么可以得到一个公式:

用户整体体验评价(E)=(y1-y2)+y3

y1,y2,y3 可以称为关键时刻 MOT(Moment Of Truth)

二、日常生活中的峰终定律

这两天和包子聊到宜家的峰终定律,突然明白了为什么我们有些课程调研,大家都喜欢去宜家调研了。

虽然它的店员很少,找货物也要自己找椅子搬下来,就算只买一件家具也需要逛完整个商场,但是每次逛完结束的时候都可以吃那个特别好吃的「一元冰淇淋」呀,这就是它的「终」。

而在逛的过程中,就像包子讲的,它的体验模式很棒,把产品作为空间的一部分。曾经有一位宜家的老顾客也说,宜家商品物有所值,展区实用,产品随意试用,大概这就是它的「峰」吧。

扔一个我的学习小伙伴包大佬的分析:

三、互联网产品中的峰终定律

如果说峰终定律怎么影响互联网产品的用户体验的话,可以先举几个体验差的例子。

很多时候,用户在某个平台完成某个任务后,会出现很多引诱用户点击的赞助商的内容。比如问卷星,每次填完,任务结束的时候,它还会打着抽奖的名义接广告……

再举个例子,你有没有过在某些 app 注册账号,登录 or 注册很多次却失败的情况,或者花了很久时间才注册 or 登录成功?原因可能是账号密码错误,可能是注册流程过多跳出率过高,可能是填写信息冗杂……

如果这款产品不是用户刚需的话,最终会导致很多用户卸载它,就算你之后流程的体验再好,用户根本无法体验到最后。

四、利用峰终定律打造「爽点」

一款好的产品不仅能够解决用户的「痛点」,也能刺激用户的「痒点」,更能打造用户的「爽点」。

有一些产品能在用户使用的过程中利用峰终定律打造 「爽点」,提升用户体验。

如果用外卖这个来举例子的话,应该算是一个大的服务系统,它会涉及到很多方,比如消费者,商家,骑手等,而这一整个服务系统的设计,只针对消费者而言,流程也会十分复杂,其中利用峰终定律考虑的就更多了。

那就其中用户(消费者)与饿了么 app 的交互流程来举例的话,用户点外卖这个任务:

从打开 app——选择店——选择美食——付款,用户的任务已经结束了,但是饿了么会在结束的时候,给用户一个分享领取红包的福利,用户会觉得自己获得了很大的优惠,体验会十分好,这也就是利用了峰终定律的「终」。

我发现游戏里面对峰终定律是用得最多的,曾经玩过 lol,王者荣耀,吃鸡手游……

如果问曾经玩 lol 或者王者最爽的时候是什么时候,那大概是:比赛过程中的 First blood,penta kill ,killing spree,legendary,you have slained an enermy 等这些配音和画面的视觉刺激吧。

按照常规的模式是,杀人后系统直接提示「您已经杀灭了一名敌人」,但是它会去强化这种杀人的体验,将杀人的场景分为多种类型,通过视觉上的弹框击杀提示与配音上的激励叠加,把杀人的体验不断深化,做到,另外在推塔和偷掉水晶的时候是不是也是最爽的时候呢?我觉得这里就利用了峰终定律的「峰」。

我记得在游戏结束的时候,比如 lol 里面推掉水晶的时候,游戏画面会停止几秒,然后再出现水晶慢慢破灭,加上大大的「胜利」二字,有的时候回到大厅还需要等几秒的时间。

王者荣耀,吃鸡这类在游戏结束的时候也会给用户很多激励,明明可以在结束后直接回到大厅,但它们会延长这些胜利或者失败的体验,如果胜利,当然是爽,还想再拥有这样的体验,继续打;如果是失败,那再接再厉,想拥有赢的体验,继续打……

总之就是会让用户上瘾。它们会把这些用户体验做到,在游戏结束的时候这些的体验就利用到了峰终定律的「终」。

五、利用峰终定律改善体验步骤

「峰终定律」改善用户体验的步骤:

  • 进行可用性测试;
  • 绘制用户旅程图;
  • 找到「峰」,「终」时刻;
  • 通过用户研究的方法找到用户心中的关键时刻;
  • 将「峰」、「终」,「用户心中关键时刻」的体验优化至。

移动端的导航设计模式

资深UI设计者

在《用户体验的要素》一本书中,Jesse James Garrett 将用户体验分为了五个层级,战略层,范围层,结构层,框架层,表现层。

其中在框架层里面有一个很重要的概念就是导航设计,作者对导航设计的定义是:元素的组合,允许用户在信息架构中穿行。

我觉得可以把导航设计理解为:我们从用户的心智模型出发,结合业务目标,对信息架构的一个梳理,来帮助用户完成目标。

通过自己手机里几十款 app,总结了以下六种导航设计模式,包括:标签导航,宫格导航,侧边导航,列表导航,菜单导航,轮播导航……

简单介绍了它们的优缺点,适用场景,以及一些衍生导航与相关案例……(不过导航设计一定是视产品和情况而定的,并没有确定的依据与理论)

一、标签导航

标签导航分很多种,有底部标签导航,顶部标签导航,底部标签导航又可以衍生出舵式导航,顶部标签导航又可以分为静态或者是动态导航……

底部标签导航是最基本的导航,几乎绝大部分 app 中都在用,tabbar 位于页面最底部,一般3-5个 tabbar,有文字+icon,也有纯 icon 形式,但大部分是文字+icon 的形式,我想是减少用户记忆负担吧,如下:

而关于底部标签导航的优点,缺点以及适用场景也简单整理了:

我发现很多用户发布或者生产内容的 app 会将底部标签导航进行变体,很多人把它称为舵式导航,就像这种:

中间的「+」一般是发布的意思,并且是 app 里面使用最频繁的一个功能,一般都会重点突出。并且,该标签中很多时候会有二级导航,二级导航里可扩展性就比较强,如图:

而顶部标签导航顾名思义就是 tabbar 位于顶部,最早知道它是在 Material Design 里面,因为 Google Pixel 手机底部存在物理导航,所以将标签导航置于顶部不会显得突兀。它很少用作一级导航,一般是二级导航比较多,而且我发现顶部标签导航,几乎都是纯文字的形式,比如:

突然想到今天交互设计课上的时候,老师讲的人机交互里,重要的操作放在大拇指可触达的范围内。

而顶部标签导航,如果是点击标签进行操作的话,用户单手操作就十分不方便,所以我发现体验好的 app 的顶部操作导航都是可以直接通过左右滑动屏幕的交互来切换。

而当标签类目过多的时候,可以通过左滑展现更多标签,比如很多新闻阅读类的 app:

如果是可以滑动查看更多的话,一定要通过一些方式告诉用户可以滑动查看更多,比如最后一个标签隐藏一半的方式等:

关于顶部标签导航的优缺点以及适用场景,如下:

二、宫格导航

宫格导航,也是十分常见的导航形式,除了一些工具类 app 外,大部分是作为二级页面展示出来,并且以 icon+文字的形式居多。

如果将宫格的 icon 换成 picture 的形式的话,可以衍生出一种新的类似于卡片式导航的形式 ,可以通过垂直滑动来切换,比如:

那,如果宫格信息太多,我发现很多 app 会采用分类展示的形式,并且通过水平滑动的方式来切换,比如:

但是上面两种可以垂直或者水平滑动的形式,一定要让用户知道是可以水平或者垂直滑动的,采取的是边界地方信息只展示一半的形式,告诉用户可以继续滑动……

除此之外,宫格导航还可以在电商里面运用,在首页的运营内容块,它可以根据内容的重要性调整模块的大小,比如:

关于宫格导航的优缺点和适用场景,如下:

三、侧边导航

有些书里面会把侧边导航叫做抽屉导航,这类导航其实比较少了,原本也是从 Google Material Design 里面提取出来的概念,一般会在首页呈现一个主要功能,将其他不常用的功能收纳放到侧边导航里,比如:

而关于侧边导航的优缺点以及适用场景,如下:

四、列表导航

列表导航也是十分常见,几乎在每一个 app 里面都会存在,大部分时候是作为二级导航存在,但是也会存在于一级导航的时候,比如邮箱,iOS系统自带的设置等。

一般在列表导航里都会有下一个层级,可以通过箭头来告诉用户是否有下级菜单。

当列表信息比较多的时候,可以对列表进行分类,可以添加小标题或者直接分隔开。比如:

而在有些列表导航里,我们还需要展示给用户一些预览信息,比如 iOS系统里的健康,个人信息里的一些基本数据展示,如下:

关于列表导航的优缺点以及适用场景,如下:

五、菜单导航

其实菜单导航也可以称为下拉导航。这也是今天上交互设计课的时候,老师以微信的「+」为例子介绍的一种导航形式。最初了解这种导航形式也是来源于 Material Design 里面的 Menu。

Menu 是临时的一张纸(paper),由按钮(button)、动作(action)、点(pointer)或者包含至少两个菜单项的其他控件触发。

比如:

当信息层级变多的时候,菜单导航里要展示一层或者两层信息,比如大众点评采取的形式:

关于菜单导航的优缺点以及适用场景,如下:

六、轮播导航

还有一些导航比如轮播导航,完全的沉浸式体验,高度简洁的导航,比如天气,但是这种导航因为轮播点的大小不会很明显,所以用户很难快速感知自己所在位置,并且轮播导航轮播的数量也不宜过多 。

其实导航的类型应该还有很多,并且在一个 app 里面几乎不可能只使用一种导航,哪怕只是一个页面,也会存在多种导航的组合形式,比如:

总结

  • 导航的形式一定是根据你的产品的诸多因素进行选取,并不能完全按照我上文的适用场景为依据;
  • 几乎每一个 app,每一个 app 的每一个页面,都会涉及到多种导航模式,需要结合具体场景进行组合选取;
  • 导航的具体展现可以通过:文字,icon,文字+icon 的形式;
  • 有些导航比如标签导航在设计的时候有多种状态,比如 unselected,selected 等状态;
  • 导航在 iOS 和 android 里面的应用会不一样,比如标签导航适配 iOS系统,侧边导航适配 android 系统;
  • 导航设计必须传达出它的内容和用户当前浏览页面之间的关系;
  • 能够引导用户以很好的体验完成目标的导航设计都是优秀的。

7条产品设计原则:纯干货总结,实用到没朋友

博博


人人都是产品经理 2016-05-16 10:07:04

来人人都是产品经理【起点学院】,BAT实战派产品总监手把手系统带你学产品、学运营。

一定有很多朋友在和我思考过一个同样的问题:优秀的产品是怎样定义的?周鸿祎给出答案:第一满足刚需、痛点、高频,第二要有良好的用户体验。第一点很好理解,我们今天主要来聊聊第二点。

7条产品设计原则:纯干货总结,实用到没朋友

参照产品设计原则,可避免产品设计师走弯路,设计出具有良好用户体验的产品。产品设计原则会随着社会的进步而更新迭代,以下是我在学习和工作中对产品设计原则的思考总结,希望可以给你带来参考和启发。

一、减少用户出错

错误对话框是最令人讨厌的交互方式,也是很多产品中滥用最多的。错误对话框一般不会给用户指明正确的道路,仅仅在保护程序不陷入麻烦。而且错误对话框打断了用户的注意流,愚蠢地停止了进度。用户犯错误的时候,不应该受到训斥,这个时候,他需要的是帮助和正确的引导,那么我们要做的就是帮助用户避免错误,告诉用户如何把事情做好。

7条产品设计原则:纯干货总结,实用到没朋友

二、易学性

好的应用像极了蓝颜知已,能看透你的心,在你需要的时候或者合适的的时间,用合适的方式提供暖心的帮助,指引你披荆斩棘,打怪升级。

帮助界面大概分为两种,导览教程和覆盖式教程。

1、导览教程是通过一组有序的图片介绍应用功能,或者指引用户完成一个目标。

新应用或者更新后用户,为了解决用户初始问题,绝大部分应用采用了帮助引导页面,然而真的是必要的么?我觉得未必。可能有的产品经理也觉得没必要,但这是种主流,所以还是选择加上。有的则仅仅为告诉用户产品是做什么的。其实用户可能根本没有那么多耐心去阅读好几页的产品说明,就算有耐心看完,也大多记不准。所以把引导放到使用情景中,在用户使用到此功能时展示给用户,也可把引导收起来,用户需要帮助时呼出。微习惯在引导方面,给用户惊喜。

7条产品设计原则:纯干货总结,实用到没朋友

2、覆盖式教程是另一种介绍方式,很简单的透明薄皮,少许箭头,少许注释,指出关键重点之处。

此方法不错,用户看起来明了易学。免费日程极简的箭头和引导告诉用户功能及使用。

7条产品设计原则:纯干货总结,实用到没朋友

做好后可以自我检测思考,用户学习的成本是不是足够低了?给用户的学习方式是不是最科学合理的?还有没有什么地方需要修改?还有没有更好的方式?用户学过一次后还需不需要重复学习?文案确定通俗易懂?

三、美学一致性、完整性

应用的完整性一致性就是外观和里面不同模块之间都有相似的外观、感觉和气质。产品的完整性一致性会让产品更易学易用。

1、从应用外部看,产品完整性一致性,容易培养用户围绕这点形成强烈的品牌意识,传播产品风格就是在传播品牌,可深入人心。一致不代表僵化,可围绕产品主线进行成长和演化。

2、从应用内部看,一致的用词、风格、色调、图标会给用户建立具有凝聚力的视觉系统,带来在产品上一致的体验。

7条产品设计原则:纯干货总结,实用到没朋友

四、输入方式更简单

移动端产品的使用场景,公车上,行走中,单手操作等,导致用户在使用手机时受到很多环境上的干扰,所以注定会在输入方式上给用户造成很多的不便和出错,为使用户减少使用手写或者键盘输入,减少浪费更多的时间和精力,改变移动端的输入方式就变得尤为关键。

1、减少移动端的文字输入,输入时可采用建议或者事件记忆。聪明的应用会根据用户之前的行为和信息给用户提出建议,根据记忆灵活地为用户当前的行为显示信息,使得用户在效率和满意度方面得到大大的提升。

7条产品设计原则:纯干货总结,实用到没朋友

2、为提供用户完成目标的效率,更为了减少用户出错,转变输入方式,改输入为选择或手势方式。

7条产品设计原则:纯干货总结,实用到没朋友

3、使用手机已有的传感器输入。输入文字搜索关注二维码,改变成长按识别二维码,减少输入麻烦和出错的问题。

五、为停止做准备

当人们全身心的投入到活动场景中,会对周围的干扰视而不见,这种状态被称为“流”,用户在这种状态下会有轻松的、温和的快感,处理任务,完成目标也是会非常的,但是很不幸的是,我们使用的手机,使用移动应用的场景,就是会因为各种事情而打断。想象一下,录下精彩的视频,发送时网络卡住了,不响应了;发微博发到一半手机停电了;网购付款时老板的电话来了,这在我们日常生活中太常见,所以聪明的、体贴的产品,是随时为停止做好准备的。

1、编辑中断、网络中断时,尽可能地保持之前状态,并存储好用户数据。我们总的原则就是让用户付出的劳动不至于付之东流,也减少用户的重复操作。例如美拍上传视频时网络中断,可帮用户存到草稿箱,用户稍后可重新编辑上传。

2、误操作或其他原因跳到错误页时,不要让用户无路可走,最好给用户下一步的选择。产品程序无法使用,那么告诉用户发生错误的原因是什么,给出用户选择,他们还能做点什么,并给出解决方法。百度之前有个很好的体验,在找不到页面的时候,展示帮找失联儿童的页面,页面找不到,可以帮忙找找孩子,很人性化的体验。

六、做好反馈

反馈是用产品的语言告诉用户应用正在做什么,进展怎么样了,接下来的操作会有什么结果。我们使用应用,就像用户与应用的交谈,用户肯定不希望应用是冷冰冰,无回应的。

反馈可以分为过程反馈和结果反馈。

1、过程反馈。用户在操作过程中,界面对操作进行反馈,告诉用户操作的状态变化,用户可根据反馈对任务进行下一步选择操作,一定要做到轻量,不突兀,细腻地反馈。富视觉非模态反馈,是用的比较多的一种反馈方式,通常为动态,视觉上很轻松地显示反馈,不需要用户做其他操作。我们看IOS的下载更新,就是这样。免费日程的发送邀约等待也是一种富视觉非模态反馈。

7条产品设计原则:纯干货总结,实用到没朋友

2、结果反馈。用户在完成操作后,告诉用户操作结果,使得产品看起来很贴心,很有生命力。结果反馈也避免了用户因为不确认而造成重新操作。连贯的动画和声音都可以为用户提供反馈。举个删除的例子,例如mac在删除成功后,会有收走到垃圾桶的动画,伴随着粉碎的声音,这种标志性反馈会给用户留下独特的印象。

七、内容为先

《移动优先》作者Luke,说设计原则为“内容优先,之后才是导航”。这句话是什么意思,这是在产品设计中一个经常容易犯的错误。如何让用户找到内容,所以造成了导航优先,而忽略了用户真正关心的内容。在移动设计中,可能你的产品界面很美观,图标很精致,动画很流畅,设计独到到令人耳目一新,用户可能会对此充满新鲜感,但是新鲜感终究有期限,用户不会为了这个而去一直使用你的产品,没有内容的产品就像一本只有华丽封面却没有内容的书,所以用户内容才是最核心的。

1、突出内容,使界面内容更开阔,使用户完成目标更专注。IOS备忘录中,采用点聚式导航,用户需要时才呼出,没有无关杂乱的内容,给界面一种开阔的感觉。

7条产品设计原则:纯干货总结,实用到没朋友

2、提升屏幕利用率,把焦点放在用户更注重的内容上。对于手机来说,屏幕资源利用率的提升要做到优化提升。知乎是以UGC为主的产品,用户在上划浏览内容时搜索消失,当用户需要时向下滑即可显现。

7条产品设计原则:纯干货总结,实用到没朋友

人人都是产品经理也是以UGC为主的产品,正所谓内容为王,吧啦吧啦,算了不说了,投稿去了。

用智能化登录页面提升数字营销转化率,Instapage获1500万美元A轮融资

博博


36氪 

今日,登录页面制作初创公司Instapage宣布他们完成了Morgan Stanley Expansion Capital投资的1500万美元的A轮。

Instapage是一家由数据分析引擎驱动的,提供个性化登录页面模板,帮助企业提高数字营销转化率的公司。Instapage目前拥有超过15,000名客户,平均转化率约为22%。

设计登陆页面似乎并不是创业者感兴趣的风口,但Instapage创始人兼首席执行官Tyson Quick表示,这对于营销人员来说却是一个真正的问题。

登陆页面(Landing Page)又被称为引导页,是指在数字营销中,当潜在用户点击广告或者利用搜索引擎搜索后显示给用户的网页。而在网站运营的逻辑里,最重要的三个因素是拉新、转化和留存,那么,作为第一个关卡的登录页面就显得尤为重要。

Quick之前曾在一家名为Jounce的营销产品上工作,他发现,即使有人点击了Jounce广告并最终进入了公司网站,其中只有3%的转化率。

“这有点荒谬,因为他们已经点击了广告,往往具有明确的消费意向。”Quick说。而采用针对核心客户群的个性化登录页面之后,Jounce转化率提高到了20%左右。

2012年,Quick决定将公司业务的重点转移到Instapage,现在Instapage成为了一个更广泛的平台,用于创建和测试针对不同访问者个性化目标网页。

“我们可以成为广告技术与传统营销和销售技术之间的桥梁,”Quick说,“这些技术能够帮助广告投放商锁定核心用户。一旦用户点击广告,自动化营销就会启动,将这些用户纳入企业的CRM系统。这是以往的技术中缺失的转换点。“

用智能化登录页面提升数字营销转化率,Instapage获1500万美元A轮融资

围绕Quick所谓的“点击广告后就引导转化”,Instapage开发了三个关键组件——可扩展创建,页面优化和个性化。而像Optimizely可能只会解决其中的一些问题,而Instapage将三者结合了起来。

而谈及如何采集用户数据,为企业订制个性化登录页面时,Quick认为公司不需要详细的用户数据:“个性化的标签来自广告本身。我们可以从他们点击的广告中收集到数据。“

之前,Instapage已经获得了200万美元的种子资金。而且目前该公司盈利,Quick说每年的经常性收入为1200万美元,并没有融资需求。但是,他发现Morgan Stanley Expansion Capital愿意挖掘并了解Instapage的业务。

Morgan Stanley Expansion Capital主管Pete Chung表示,“Instapage专注于提高数字营销效率这个细分领域,并且可以在不需要外部或技术资源的情况下进行更精准的广告活动,创造了令人印象深刻的产品。”


UI设计师基础设计规范

蓝蓝设计的小编

UI设计的基本规范,包括网页设计和APP设计的规范罗列

日历

链接

个人资料

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

存档