首页

「设计心理学」Uber利用心理学改善用户体验

分享达人

“Uber是一种非常独特的模式,没什么可以参考的产品”

——Travis Kalanick


Uber遍布全球65个国家,超过600个城市,拥有7500万用户,为很多人解决了交通不便的问题。


这个规模和增长速度是前所未有的,Uber提到这其中独特的商业模式和用户体验是驱动。


所以哪些是最重要的用户体验问题,Uber又是怎么通过科学的方式来解决这些问题的呢?


Uber用户最大的痛点-等待

-

想象一下你在凌晨2点的冬天,独自矗立在陌生城市的街头瑟瑟发抖;或者是你要参加一个重要的会议,如果Uber准时到达的话那就正好赶得上。


在这些非常紧急的情况下,人们对时间的感知是扭曲的,等一秒像是一分钟,等一分钟像是一个小时。

不仅如此,人们还会用这种扭曲的等待时间来评价整体用户体验,为什么会这样?这就用到一条心理学原则叫“峰终定律”(peakend rule).


隐藏在“难以忘怀的用户体验”背后的科学

-


Image via UI Patterns.com


峰终定律指的是人们基于最高峰体验和最终体验来评价整体体验,而不是在这段体验中的平均感受,这个定律对好体验和坏体验是通用的。


对品牌来说,顾客会深刻记住这两个点:最坏(或最好)的体验、最后的体验。

Photo by why kei on Unsplash


好体验对“等待时间”的要求是非常苛刻的,这也是用户给出好评的关键点,Uber花了无数时间来解决这个痛点,这就是Uber决定要应用心理学来完善用户体验的原因。


在这份调查中,Uber发现了3个关键原则,可以解决“等待时间”这个痛点:厌恶无聊,操作透明化,目标趋近效应。


1.厌恶无聊

-


“人们讨厌无所事事,他们需要一个原因忙起来”

——researcher Chris Hsee

Photo by Fabrizio Verrecchia on Unsplash


最近对心理学、幸福和用户体验的研究,揭示出一个原则,就是“厌恶无聊”,指的是人们在忙碌时感到更快乐,即使他们是被迫忙碌。


如何应用这一原则?


可以让用户参与读取信息、游戏化和增加视觉效果等方式,让用户保持忙碌的状态。


像下面Uber采用的方式,他们利用一个动画来愉悦用户,同时实时告诉你等待时间。

Uber Blog Australia


2.操作透明化

-


“当用户从我们为他们创造价值的过程中分离时,他们会感觉我们没有全力以赴。

这时候他们较少重视或肯定我们的服务。”

——Ryan Buell,哈佛商学院

Photo by Sitraka Rakotoarivelo on Unsplash


操作透明化是一种能让用户看到公司如何运营操作的直接方式,这样用户就能看到我们在整个过程中付出了多少努力。


根据最新的研究发现,操作透明化会让用户对产品的价值评价更高,让人们感觉更好。


如何应用操作透明化?


及时告知用户,让关键信息可见,还要帮用户理解信息来源。


在下面Uber Pool的例子中,他们提供了到达时间的计算方法这一信息。通过一种简便的方式告诉用户,即使是没有任何技术基础的用户也能看懂。

Engineering at Uber(右图详细解释:我们是如何计算到达时间的)


3.目标趋近效应

-

目标趋近效应表明人们更愿意为即将达成的目标而付出努力,而不是他们已经走了多远。

Photo by Jonathan Chng on Unsplash


越接近目标,用户就越愿意采取行动更快的去完成这个目标。


如何应用目标趋近效应?


想象目标趋近效应是一条真实存在的终点线,用户越接近终点,越能鼓励他们积极行动。


你也会经常看到这个原则应用在很多交互元素上,比如进度条,填写完成度等,用即将完成来鼓励用户完成任务。


Uber通过解释幕后发生了什么来应用这一原则,他们解释过程中的每一步,让用户感觉到为了达到他们的目标正在不断的努力。


最后

-

毫无疑问,Uber很大部分的收益来自利用科学改善用户体验,最先在Uber Pool运行的增加了厌恶无聊、操作透明化、目标趋近效应的实验版本,效果非常好:


“Express POOL团队用A/B测试的方式,发现增加这些解决方案后,取消率降低了11%”

——“Uber如何大规模利用行为科学”


如果你想在产品中应用这些原则,必须要结合非常严格的测试。一个原则的应用,可能要通过上百种实现方式对比实验,才能找到最佳解决方案。

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

文章来源:站酷 作者:彩虹BOOK
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



B端表格设计的基本交互形式

分享达人


蓝蓝推荐:这是一篇很实用的表格基本交互形式文章!
译文:
如果没有将数据可视化和具备编辑数据的功能,数据就毫无用处。未来行业的成功依赖于将数据收集与更好的用户体验结合起来,而数据表格的设计体验则非常重要。

固定表头

-

固定表头让用户随时都知道自己所在列的名称。


水平滚动

-
当展示大型数据列表时,水平滚动是不可避免的。可以 将具有标识性信息的数据展示在第一列中,并固定第一列方便用户对其他数据进行对比。


调整每一列的宽度

-

调整列宽可以让用户看到所有的内容。


设计表格样式

-

表格的样式有:白色和其他颜色相间的斑马线设计,单纯用线分割,自由形式等。

正确的设计行样式可以帮助用户浏览表格数据,对只包含少量数据的表格来说,减少视觉干扰非常重要,这时候就可以采用去掉分割线、斑马行的自由展示模式。但对于有大量数据的表格来说,自由模式容易让用户迷失,这时候用线分割,让用户能区分开每一行就显得尤为重要。而斑马线的设计样式适合包含多列数据的表格,需要水平移动的大量数据表格。 


表格密度展示

-

为列表设计不同的密度,用户可以根据需要自行切换,比较紧密的行距让用户无需滚动就可以浏览更多的数据。



数据可视化

-

让数据可视化,提供表格内容的概括性预览,让用户无需细读每一条数据就能得到想要的信息。



分页展示

-

分页设计方便用户跳转到相应页面,但是也常常被无限滚动加载的方式取代,无限滚动加载指的是随着鼠标不停地往下滚动,页面内容也会随之加载,这种方式适用于发现类的网站,但是对于考虑优先级的产品来说就不太合适了。


悬停展示

-

当用户悬停时显示更多功能可以减少视觉混乱。需要注意的是,它可能会导致可发现性问题,因为用户需要与表交互才能看到更多的功能。


直接编辑

-

直接编辑可以让用户在当前表格内修改数据和内容,而不用额外再跳转其他页面进行操作。


可扩展功能

-

可以扩展的表格设计允许用户在不丢失上下文的情况下浏览更多详细信息。


快速视图

-

与可扩展功能非常相似,快速视图使用户能够在保持上下文的同时查看附加信息。


弹窗

-

弹窗设计同样可以让用户停留在表格视图中,让用户更专注在附加信息和操作上。


多层弹窗

-

多层弹窗功能对于活跃用户来说非常强大,可以同时完成多种操作,或用来比较不同项目的详细信息。


点击详情展示

-

单击链接会将表格转换为左侧为列表项和右侧为其他详细信息的视图。它使用户能够解析大型数据,以及查看单独的项目详情而不会丢失它们的位置。


可排序的列

-

排序允许用户按照字母顺序或数字顺序对列进行重新排列。


基本筛选

-

提供基本的筛选功能来搜索表格里的相关数据。


列筛选

-

这种设计模式允许用户将过滤参数分配给特定的列。


可搜索的列

-

这种设计模式允许用户在每列中搜索特定值。


添加列

-

这种设计模式允许用户根据需求在数据表格中添加列。


可编辑的列

-

可自定义的列功能使用户能够选择他们想要查看的列并进行相应的排序。 这个功能还包括保存预设后再修改的能力。


...


为什么表格设计很重要

数据正在成为全球经济的原材料。对数据的追求推动了行业的重塑。能源、媒体、制造、物流、医疗保健、零售、金融,甚至政府都在经历数字化转型。


然而,如果没有可视化数据并对其采取行动的能力,数据就毫无意义。未来十年幸存下来的公司不仅将拥有卓越的数据;他们也将拥有卓越的用户体验。


良好的用户界面设计基于用户的目标和行为。用户界面反过来也会影响行为,从而推动进一步的设计决策。用户体验以微妙和无意识的方式改变了人类的决策方式。所看到的、呈现的位置以及交互的方式,都会影响行动。重要的是我们要做出能够带来更美好世界的设计决策,一个符合这个时代的数据表格设计。


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

文章来源:国外  彩虹BOOK翻译
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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





Web表单设计——你不知道的冷知识

分享达人

当我们设计Web表单时,往往用最直觉的设计经验本能驱动我们去解决一些看似在界面设计中最简单的问题,但每每到细微之处,又会有无数疑问从细节中冒出来给我们的设计造成困扰。

例如:在表单界面Label(标签) 和 Input(输入框) 上下还是左右排列合理、Label要不要加冒号、输入框到底多宽合适等等......

以上这类问题看起来并不影响用户完成任务,很久以来也少有人关心这些细微之处会不会对用户有什么影响。

以至于,我表达想写一篇探究这些细节的文章时,同事会偷笑说:你都开始研究标签末尾要不要加冒号了吗......,太冷了——真是个冷知识!

确实如此,这些偏门、细碎的内容,鲜少有人会去留意和思考。因此我在写下这些分享内容时期望可以达到目标是:“冷知识虽然冷,但有用”。用我了解的这些表单设计冷知识:启发你的冷思维、引出你的热思考。


话不闲聊,我们开始讨论第一个问题:

 

///


01.标签末尾要加冒号吗


有个表单细节不知道你有没有想过,标签末尾是否要加冒号?

这个问题在我前团队发生过激烈争论,有同事说:“不要加,占用间距,而且没人会留意它......”,也有人说:“要加,从含义上讲,冒号的作用就是提示上下文或总结上下文的停顿。加上之后能更好表示标签与输入域的关联......."。

听起来好像都有些道理,那到底谁更对呢!

首先,我们追溯一下 Web 发展史,早期可访问性核对清单中通常坚持要标签带冒号,因为屏幕阅读器一度必须依赖各种技巧才能理解标记不明的表单


而随着技术发展,Web表单使用“label”标签(tag)可以做正确的标记,那么屏幕阅读器就能通过标记(markup)把标签(label)和相应的字段对应起来则无需再借助冒号。

不过在客户端又有些意外!曾经 Windows Vista 指南中明确要求使用冒号, Mac Aqua 也有此要求但规则会稍灵活一些。这种情况是因为某些情况下屏幕阅读器在桌面环境与可阅读源代码的网页标记相比会遇到一些困难,桌面环境不会直接显示代码。也是这个历史原因,造成 Vista 和 Aqua 各自都有大量其标签包含冒号的历史表单。因为实在没有必要把它们全部改掉,直到今天客户端的表单依旧延续这一规则。

通过Web发展史我们明白表单标签带冒号的产生是为了解决早期屏幕阅读器的识别,如今的屏幕阅读器技术已转变为识别标签的底层代码,无需借助这种形式了。所以从这点来看要求标签带冒号已经站不住脚了

 

那从情感角度分析标签带冒号的是否对用户体验有影响呢?

回到最开始,我和同事们的争论……

 

先简单说下答案,无任何影响!

在《Web表单设计·创建高可用性的网页表单》中,作者(卡罗琳·贾雷特)曾经做过大量的表单测试,最终证明从未有一名用户谈论冒号是否出现,即使是有些在其他环境中很介意标点符号的人似乎在线上表单中也未曾注意到。

 

从以上两个角度不难发现,无论是从技术发展还是情感体验,都证明可不必要求表单带冒号;因为可用性访问清单不再有这样的要求,用户研究也证明几乎没有人会留意表单冒号是否出现。

这样的结论,看似表单带冒号是失败了……,但这并不妨碍它作为一种习惯或传统延续至今,无论在客户端还是Web设计系统中仍然常见。例如:苹果电脑的Mac系统,国内阿里的Ant Design Web设计系统。

 

因此,得到以下几点建议:

如果你希望自己的网页表单与流行的桌面环境保持一致,请使用冒号。

如果你已有大量使用冒号的表单,请保持继续使用下去。

如果你在建立一个新的系统,你也可以索性抛硬币决定,不过要严格遵循一种方法。


///


02.哪种标签对齐方式更好


在表单中标签与表单域的对齐方式,如果你的团队已有明确的规范和使用场景,你只要拿来主义即可。可如果某天由你主导定义一个新的表单规范时,不知道你会不会重新考虑哪种标签对齐方式更好,怎样区分使用场景!

通过科学实验发现,无论是在眼动仪的热图,还是在许多可用性测试的观察结果中,用户在填写网页表单时视线主要集中在输入框的左侧。他们的视线几乎不会落到输入框的右侧,甚至都不会瞟上一眼。

以此为基础,我们在网页表单设计中有3种最常见的标签对齐方式:顶对齐标签、右对齐标签和左对齐标签。你可能会说还有混合对齐标签、内联标签、图标标签等,这些确实存在但并不是最核心的几种对齐方式,它们基本是在这3种形式上变化,不脱离本质。

 

下面我们逐个分析一下:

 

1.顶对齐标签:

马泰奥·彭佐从2006年7月进行眼动研究发现,从标签移动到输入框只需50毫秒。比左对齐标签快了10倍,后者需要500毫秒;比右对齐标签方式快2倍,后者高达240秒。能迅速填完顶对齐标签表单的原因之一,是因为眼球只需要在标签和输入框之间进行上下单向运动。

优势:

最利于减少表单填写时间(标签和输入框位置最为靠近);用户视线固定,动线一直向下(清晰的完成路径);节省大量横向空间(可用于以多种方式组合的相关输入框)。

劣势:

占用额外的垂直空间(如果可提供使用的垂直屏幕空间较小,应当谨慎使用顶对齐标签);建议使用输入框50%至75%的高度作为相邻输入框间距。

适用场景:

希望用户快速填写表单,完成任务;同时,当输入项存在主次之分时,对标签扩展性要求高。

2.右对齐标签:

如果要尽量减少表单占用垂直屏幕空间,右对齐能提供快速完成时间。马泰奥·彭佐的眼动研究发现,专家用户和新手用户扫视(眼睛运动)右对齐标签表单的标签和输入框的平均时间分别在170毫秒和240毫秒,而填写完成时间比左对齐快2倍。

优势:

标签与输入框相邻(方便快速填写)。

劣势:

右对齐布局造成左侧不齐,影响了快速游览表单的效率问题;若标签文字宽度变宽,右对齐还存在灵活度问题。

适用场景:

既要减少垂直空间,又要加快填写速度的场景。

3.左对齐标签:

在顶、右、左三种方案中,左对齐表单填写速度最慢。因为左对齐表单解析问题时眼球定位次数最多,用户一般情况下都能将左对齐布局中的标签和输入框联系起来,只是花费时间较长。根据马泰奥·彭佐的研究,典型扫视时间为500毫秒,很长说明用户经历了沉重的认知压力。

优势:

容易游览标签;占用垂直空间较少。

劣势:

标签和输入框的相邻间距增大;适合于用户不熟悉表单要收集的数据或问题无法分成易处理的内容组,左对齐标签游览表单问题会更容易。用户只要上上下下阅读标签左栏,不会被输入框打断。

适用场景:

表单中存在较多的复杂或敏感信息,希望用户放慢速度、仔细思考(在一些注册类表单中较多使用)。

单从效率角度看,顶对齐标签>右对齐>左对齐,但是根据应用场景,效率快并不是我们选择标签对齐方式的唯一的指标。

因此,得到以下几点建议:

如果你希望用户放慢速度,仔细思考表单中每个表单项,左对齐标签是个好选择,特别是含有大量可选输入框或高级设置的陌生数据时;

而顶对齐标签在一些国际化产品的表单设计时,会有更好的延展性;

至于,右对齐标签虽然与表单域联系紧密,便于用户填写,但是要考虑好标签的长短不齐如何解决。能否精简标签内容,以及确定好表单与界面的边距。


///


03.标记必填与可选字段的困惑


许多表单设计中,有个常见问题:是否应该标记必填字段?如果表单中的大多数字段或全部都是必填的,我们是否仍然应该标记它们?

先简单回答:是肯定的,用户有时需要通过必填标记来评估工作量,了解输入信息量的最低限度。我会在下面具体解释原因。

 

了解不标记必填字段的诱惑

通常,设计师会觉得每个必填字段都有一个标记是重复的、丑陋的、占空间,而且干扰界面,甚至可能看起来很扰乱(有认知负担!)。因此通常采取以下一种或两种策略:

1.在表单顶部显示说明,说明中除非另有解释,否则所有字段都是必填;

2.只标记可选字段,因为它们通常较少;

3.在某些特殊情况下,也会什么都不做:相信用户会神奇地知道需要填写什么字段;如果不知道,那么只需要点击提交报错即可。

这些方法有什么问题?如果你这样想,我来告诉你

1.用户一般不喜欢阅读表单顶部说明。不难想象,用户不太可能阅读表单顶部的说明。表单字段需要自给自足,毕竟,每个字段都有特定指令——它的标签,为什么用户需要阅读其他任何东西来填写它呢?

2.即使用户阅读了说明,也可能忘记。你可能会说:用户阅读了顶部的说明,怎么就会忘记——这么简单的事情?

的确容易忘记,特别是当表单很长或填写表单被打断时(这种情况在移动端很常见)。即使用户记得,但这占用了工作记忆,增加了认知负荷。换句话说,你让用户完成任务更难了。填写表单本身对用户来说就相当有挑战性——为什么要让它更具有挑战性?

3.用户必须扫描表单以确定是否为必填字段。不难发现,无论是否在表单顶部包含说明,结果都可能相同,用户会忽略或忘记。他们会扫视表单,找到一个标记为必填或可选的标识。

而且有些用户甚至不会费心去环顾四周,他们只会做出假设。他们会想——“嗯,邮箱——不需要我的邮箱吧?先空着呢”。即使用户没有留空,也不得不暂停来思考一个字段是否需要填写,减慢交互速度并使过程看起来更长、更乏味。

想要解决以上问题很简单:标记所有必填字段。尽量明确和清晰展示每个必填字段,并标记它。当然,就像有些设计师所说:界面出现大量必填标识(红色星号*)确实会增加视觉噪声。甚至重复的星号 * 会带来一些认知恐慌。但相比之下,两害取其轻,这些负面因素是轻微的。


如何标记必填字段?

这里包含至少有两种方式:星号*(红色)和“必填”提示。星号*在网页上已经很常见,用户熟悉其含义。优点是它不占用太多空间,也看起来与标签文字足够不同,所以使用它。

可以使用其他标记形式吗?当然可以,但是最好遵循市面上常见的形式(雅各布定律),这样更符合用户认知。

星号应该在字段标签之前还是在字段标签之后?

这不一定有实际影响,但将其放在标签之前的一个原因是,只需扫视标签的最左边字符,就能轻松定位必填哪些字段。

星号*是一种视觉标记,应当仔细考虑表单中的标识位置。标识在标签左边能指引用户迅速浏览界面,并判断出必填项。如果在右侧由于输入框形式、长度各不相同,标识和输入框对齐会导致难以浏览和判断。


是否也应该标记可选字段?

虽然这不是强制性的,但标记可选字段确实减轻了用户思考:如果没有这个标识,用户要环顾四周,并根据其他标记字段推断该字段是可选的。如果“非必填”在字段标签旁边,那该任务会变得更容易。不描述可选字段,这没问题,但这样做会是一个很好的额外帮助。

为什么登录表单没有标记必填?

登录表单很短,一般由两个字段组成:用户名和密码,这两个字段总是必填的。如果使用星号*,标记这些字段的成本很低,并不会出错。但是,绝大多数用户都使用过很多登录表单,他们是知道要登录需要输入邮箱/用户名和密码的。所以,在登录表单中,可以省略这种形式。

而在注册表中不标记必填字段是危险的。注册表单因产品而异——不同公司在创建帐户时需要不同类型的信息。它不仅仅包含用户名和密码,所以请标记所有必填字段(包括用户名和密码)。

 

因此,提出以下几点建议:

基础前提,尽量去除任何不需要回答的问题,特别是涉及到用户隐私的内容。可以更容易让用户填完表单。

为了增加表单填写的机会,请尽量减少用户需要付出的努力和他们需要记住的信息。有很多方面有助于解决这些问题,但标记必填字段(以及可选字段)是最容易的方法之一。


///


04.表单域提供一些默认值有必要吗


先给出答案:这是肯定的!

在《选择的悖论》一书中,作者巴里·施瓦茨讨论了生活中选择过多的影响。并提出策略应付无处不在的过多选择。他特别叙述了智能默认的能量——即在满足多数人需要的地方放置选择——来帮助人们做出明智的选择。

而在Web表单中也有很多地方能利用智能默认减少不必要的选择次数或输入,加速表单完成过程。所以,只要合适就在表单域中预先为用户填写你认为他们想要的输入值。

通过提供合理的默认,能有效节省用户时间,就是这么简单。应用分担了用户思考或输入答案的工作。填写表单永远不是一件有趣的事情,如果这个模式能把表单填写的时间减少一半,用户会非常感激。

你可能会问:默认值不是用户想要的,误导用户怎么办?

在设计有默认值的表单域时,你要思考默认值是否是大多数用户可以接受的答案,如果不确信可以先去做一下用户调研,了解用户的心声。

就算默认值真的不是用户想要的,至少你也为他提供了一个示例来告诉用户答案应该是什么样子的。这一点也可以节省用户几秒的思考时间——或避免一条错误信息。

但并不代表所有的表单域都要给出默认值,我们只是尽可能的让用户节省时间。

 

如何使用:

在第一次向用户显示表单时,用一个合理的默认值预先填写文本框、组合框或者其他控件。也可以使用用户之前提供给应用的信息来动态地给出默认值(例:通过身份证自动识别出生日期;利用邮编,推导出对应省/市)。

如果只是因为你觉得不应该留下空白的输入域,那么不要使用默认模式。只有当你有理由确信绝大部分用户,在绝大多数情况下,不会修改这个取值时才提供默认值——否则,这将会给用户带来额外的工作!


///


05.输入框的宽度如何设定


有一个容易被忽视但实则举重若轻的问题,表单中输入框宽度如何设定?

在表单设计中,对于 Checkbox、Radio 等控件,很明确必须跟随内容自适应处理。但对于Input、Select等你会不会产生困惑,是定宽处理还是跟随内容更好。

不知道你是否试图这么理解过?输入框作为用户填写信息的主要方式,其表现形式是否可以提供给用户填写表单的有用线索。

唐纳德·诺曼的著作《设计心理学》中详细讲解过心理暗示方面的内容。而宽度的变化就是一种有效暗示。

在真实场景中,大部分输入框是存在理想长度的,那么就应该向用户暗示所需输入内容的长度来减轻判断负担。

下图就是典型案例,一个实际不需要花多少钱的金额输入框在左图中进行等宽处理,反而容易误导用户对输入金额的判断,造成一种不安全感。

表现形式要为用户填写提供有用线索,采用不同长度的文本框提供了暗示;这种暗示是一种有用线索,当输入框长度长短不定时,用户会很自然地思考为什么这样;填写输入框时会自然考虑这些线索。

请注意!保证暗示效果的同时,不要设定太多的宽度,反而会让表单显得凌乱;太少又会让表单看起来都像四四方方的盒子。最佳方法是找到适合产品的最佳模度值和数量。


什么是模度值和数量呢!

落在具体设计上要先梳理产品中常见的表单类型,然后设置一个默认宽度。以此为基础来有规律的增加长度,并考虑清楚它们的适用场景;从而定义出不同的模度,最终制定出整洁有序的模度规范。这样就可以让一线的设计师们跳过部分繁琐磨人的细节思考,快速搭建出合适的表单宽度并合理有效。




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

文章来源:站酷 作者:百度MEUX

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



B 端设计总结·前言:设计体系

分享达人

众所周知,黑帕云这样的产品几乎使用了所有类型 B 端的组件。

由于我司设计资源有限,所以在拥有了组件库、设计师定好了设计规范之后,作为产品经理就直接可以手撸设计稿了。

这是是前面一文《 B 端产品中,一个 Epic 基本功能设计的过程》 提到,作为一个长大了的产品经理,有时候没有资源给你做交互没有资源给你画 UI 的,你要自己学会自给自足。


这个系列就是作为产品经理的我,在这两年中“自给自足”做设计的的一些总结与发现。

自给自足的前提是,前面说的组件库和设计规范,即拥有一个设计体系(Design System)。


01.什么是设计体系?

关于设计体系的定义和内容各家都不同,我找出来了以下案例供参考。


《设计体系:数字产品设计的系统化方法》

Tilio(一个写作和笔记应用)联合创始人,有十年 UX 设计经验的阿拉·霍尔马托娃在《设计体系:数字产品设计的系统化方法》一书中这么定义:

设计体系是为了实现数字产品的目的而组织起来的一套相互关联的模式和共享实践。
模式指的是界面中那些重复的要素:用户流程、交互方式、按钮、文本框、图标、配色、排版、文案,等等。
实践则是我们如何创建、捕获、共享和使用这些模式,尤其是在团队协作时做这些事情的方法。


书中将设计体系分成以下几个部分:

设计目的、设计原则、组件库、样式指南,以及用于提高设计师和开发人员沟通效率的工作流程和实用工具。


整理之后,可以参考下图:




Salesforce:Lightning Design System


Material Design


可以发现,以上设计体系无论如何定义概念,都是由设计原则+设计指南+一些基础的元素(比如 Design Token、Material Foundation、Icons)+组件库+其他资源工具构成。


形成这些内容的目的都是为了给自己产品建立一套保证设计质量、提升设计决策、提升沟通效率的“工具包”,从而让产品形成自己的符合设计原则的风格。


所以设计体系是什么不重要,重要的是如何在遵循设计原则下,能够高效做出高质量的设计。



02.设计原则(Design Principes)

一个开源设计原则和方法的网站 Design Principle 这样定义设计原则:

Design Principles are a set of considerations that form the basis of any good product.

译为“设计原则是构成任何好产品的一套基础考虑因素。”


比如 Salesforce 的设计原则是:清晰、高效、一致、美观。并且优先级由前到后。


可以理解为 Salesforce 会追求清晰大于高效、一致、美观,比如在产品设计中,让用户清楚的看到、理解、自信地去操作要比任何事情都要重要。

这个准则很容易理解,可以推论出 Salesforce 在度量体验时,将“易用性”放在了第一位,即作为一个 SaaS 产品,不能有任何让用户产生疑惑的地方。如果在设计上的美观而要牺牲清晰,这就是不可取的。



03.组件库

有了设计原则之后,下一步是需要一个组件库。这里说的组件库囊括了无论是原子化的颜色、字体、阴影、Icon 这些基本的元素,还包括了已经封装好的组件,如 Button、Alert、Toast、Text Input。


关于为什么要组件化,也不多说了,之前看过一篇阅文体验设计 YUX 的《组件化思维—— 适应并推动业务及产品变革的设计案例》写的非常清楚。

接下来我通过 Minecraft 这个游戏来总结了组件库。

玩过生存模拟类游戏大家都知道,在游戏中会有一些可以靠双手劳动得来的基础材料,比如砍树砍来的木头、地上捡的石头、挖矿挖的燧石。这些基础材料可以合成一些简单处理过的材料,比如把木头合成为木板。然后可以再把半成品进一步加工,比如木棍。


在 Minecraft 这个游戏中,如果玩家要制造一个弓箭,需要一个弓和一个箭。弓和箭的合成又需要一些半成品和成品或者原材料来加工制作,如下图:


对应在设计组件库中可以对照查看,一个完整的页面是可以通过一些元素、控件、组件、大组件组成:


04.适用人群

在系列开始之前,先声明一下文章的范围和适用人群。

关于 「B 端设计总结」这一系列,主要是我个人在已有了我们的设计规范和组件库后,“自给自足”的情况下探索出来的一些组件使用规则,更偏向产品经理或者交互设计师来参考。

所以系列中不会写设计规范,比如说字号、颜色、间距等等这些属于设计规范中内容。而是基于已有的规范,总结之前我们功能中涉及到的该使用哪些组件,也可以称之为狭义上的设计指南(Design Guidelines)或者设计模式(Design Patterns)。

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

文章来源:站酷 作者:高拉

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



设计思维101

分享达人

设计思维史

很多人认为设计思维是全新的概念,这其实是一种常见的误解。设计已经实践了很长时间:纪念碑、桥梁、汽车、地铁系统都是设计过程的最终产品。纵观历史,优秀的设计师都应用以人为本的创意过程来构建有意义且有效的解决方案。

在 1900 年代初期,夫妻设计师 Charles 和 Ray Eames 实践了“边做边学”,在设计他们的 Eames 椅子之前探索了一系列需求和限制内容,即使在 70 年后的今天仍在生产中。1960 年代的裁缝师让·缪尔 (Jean Muir) 以她对服装设计的“穿着设计”方法而闻名,她非常重视自己的衣服在他人看来的穿着感受。这些设计师都是他们那个时代的创新者。他们的方法可以被视为设计思维的早期例子——因为他们每个人都深入了解了用户的生活和用户未满足的需求。著名的 I ♥ NY 标志背后的设计师 Milton Glaser 很好地描述了这个概念:“我们一直在寻找,但我们从未真正意识到......正是对人的注意让你真正掌握那些东西。”

尽管有这些以人为本产品的早期例子,但设计在历史上一直是商业世界的事后想法,是仅用于修饰产品的美学。这种主题设计应用程序导致公司创建的解决方案无法满足客户的实际需求。因此,其中一些公司将他们的设计师从产品开发过程的下游(他们的贡献有限)转移到了起点。他们以人为本的设计方法被证明是导致公司差异化的一个因素:那些使用它的公司已经从创造符合人们需求的产品中获得了经济利益。

为了在大型项目中能够采用这种方法,需要对其进行标准化:一种将创意设计过程应用于传统业务问题的正式框架。

1990 年代,IDEO 的 David Kelley 和 Tim Brown 与 Roger Martin 共同创造了特定术语“设计思维”,并将多年来酝酿的方法和想法封装成一个统一的概念。


What——设计思维的定义

设计思维是一种伴随着过程而生的意识形态。

定义:设计思维是一种思想主张,一种注重实际操作,以用户为中心的设计方法来解决问题的思路。这种以用户为中心的设计想法有可能会带来创新,而创新可以带来产品差异化和竞争优势。设计思维包括 6 个不同的阶段,如下所示:


How - 过程

设计思维框架遵循 1) 理解、2) 探索和 3) 实现的总体流程。在这些更大的范围内分为 6 个阶段:同理心、定义、构思、原型、测试和实施。


同理心:进行研究以了解用户所做的、所说的、所想的和所感受的。

  • 想象一下,你的目标是改善新用户的入职体验。在此阶段,你将与一系列真实的用户交谈。直接观察他们的所作所为、他们的想法以及他们需要什么,问自己诸如“什么激励或阻碍了用户?”之类的问题。或者“用户在哪里经历了挫折?” 目标是收集足够的观察结果,以便可以真正理解你的用户及他们的观点。


定义:结合所有研究并观察用户存在的问题。在确定用户需求时,开始寻找创新机会。

  • 在定义阶段,使用在“同理心”阶段收集的数据来定义需求。整理所有观察结果,并在用户当前的体验中进行比较分析。不同的用户是否有一个共同的痛点?识别那些未能满足用户的需求。


想法:集思广益,提出一系列疯狂的创意想法,以解决在“定义”阶段确定下来的未能满足的用户需求。给你自己和你的团队完全的言论/想法自由;在此阶段没有任何想法是不合适的,收集大家的各种想法,此阶段想法的数量超过质量。

  • 在这个阶段,把你的团队成员聚集在一起,勾勒出许多不同的想法。然后,让他们彼此分享想法,混合再混合,在彼此的想法上再产生新的想法。


原型:为想法子集构建真实的视觉展示。此阶段的目标是了解以上几个阶段形成的想法中,哪些是有效的,哪些是无效的。在这个阶段,通过输出原型的过程,来权衡想法的影响与可行性。

  • 让你的想法可操作。比如,做一个新的登录页面,画一个线框图,并在内部寻求大家对此的反馈。根据反馈对其进行更改,然后用快速而简单的方式继续进行原型设计。然后,与另一组人分享。


测试:把原型给到你的用户来获取用户的真实反馈。问问自己“这个解决方案是否满足用户的需求?” “它是否改善了他们的感受、想法或完成任务的方式?”

  • 将你的原型展示给真正的客户,并验证它是否实现了你的目标。用户的观点是否有所改善?新的登录页是否会增加用户在网站上花费的时间?在用户操作原型时,持续测试和观察用户。


实施:将设计付诸实施。确保你的解决方案得以实现并触及到最终用户的生活。

  • 这是设计思维中最重要的部分,但也是最常被遗忘的部分。正如唐诺曼所宣扬的那样,“我们需要做更多的设计工作。” 设计思维不是魔法,并不能让你从实际的设计中解脱出来。Milton Glaser 的话引起了共鸣:“没有“创造性”这样的东西。仿佛创造力是一个动词,一个非常耗时的动词。这是在你的脑海中思考一个想法,并将这个想法转化为现实的东西。这将永远是一个漫长而艰难的过程。如果你做对了,那感觉就像是在创作。” 尽管设计思维对产品的影响很大,但只有执行设计想法才能带来真正的创新。设计思维的成功在于它能够改变最终用户生活的某个方面。第六步:实施——至关重要。


Why - 优势

为什么我们要引入一种新的思维方式?采用设计思维的原因有很多,足以值得单独写一篇文章,但总而言之,设计思维实现了这些优势:

  • 这是一个以用户为中心的思考过程,从用户数据开始,创建满足真实的而不是想象的用户需求的产品,然后用真实用户测试这些产品。

  • 它利用集体的专业知识并在团队成员中建立了一种大家都认同的想法,并得到广泛支持。

  • 它通过为同一问题探索多种解决途径的过程而来带来创新。

Jakob Nielsen 说:“一个解决错误问题的漂亮界面将会失败。”设计思维解放了创造力,并将它们集中在正确的问题上。 


灵活性 — 适应您的需求

上面的过程一开始会觉得很深奥,千万不要认为这就是打开成功之门的钥匙,相反,应该把它当作梯子,在需要的时间和地点为产品提供支持。

每个阶段都意味着迭代和循环,而不是严格的线性过程,如下所示。在构建和测试初始原型后,通常会返回到理解和定义两个理解阶段。这是因为直到线框原型化并且想法把变为现实,才能真正体现您的设计。很难一次性就准确评估您的解决方案是否真的有效,在这一点上,循环进行用户研究是非常有帮助的。为了做出正确的决策或确定开发顺序的优先级,还需要了解用户的哪些信息?之前没有研究过的原型产生了哪些新用例?

也可以重复阶段,通常需要在一个阶段内多次进行练习,以达到进入下一阶段所需的结果。例如,在定义阶段,不同的团队成员具有不同的背景和专业知识,因此看待问题的方法也不同。在定义阶段花费大量时间来使团队成员对问题的认知达成一致是很有必要的。


可扩展性——应用广泛

设计思维具有可扩展性。对以前那些无法改变思维方式的公司,现在有了一个大家都可以理解的指南,并增加了产品成功的可能性。这不仅适用于产品设计等传统的“设计”主题,还适用于各种社会、环境和经济问题。设计思维很简单,可以在各种范围内实践;即使是棘手的、未定义的问题。随着时间的推移,它可以应用于改进搜索等小功能,也可以应用于设计颠覆性和变革性的解决方案,例如:重组教师的职业阶梯,以留住更多人才。 

结论

我们生活在一个体验的时代,无论是服务还是产品,我们都对这些体验抱有很高的期望。随着信息和技术的不断发展,它们在本质上变得越来越复杂。每一次迭代都会带来一系列新的未满足的需求。虽然设计思维只是解决问题的一种方法,但它增加了成功和突破性创新的可能性。




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

文章来源:站酷 作者:ZZiUP

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



如何整理页面交互规约,让你的宣讲无懈可击

分享达人

小伙伴们画好视觉稿后,是不是页面的交互/视觉规约经常丢三落四,常常在设计宣讲时被开发测试提问?自己表面镇定,内心慌的一笔:这个...我没想到,那个...我没想到...

要想在宣讲时能够从容应对各种问题,就需要在设计稿完成后,把设计规约提前想好,那么设计规约要从哪些方面写起呢?往往B端产品的页面更加复杂,要补充的交互规约更多,小Zi就从实际工作中总结一些,供大家参考~

先来看个列子:

页面

交互规约如下

 

一个页面,交互和标注规则很长很长,很多同学反馈说不知道交互规约从何写起,看了上面的列子,大概从以下几个方面来书写规约:


大方面我习惯于分成【整体】和【具体内容】来写。

整体

一、页面自适应规则

首先从整体来考虑,首先要考虑页面是如何布局的,是自适应?还是定宽?常用的网页布局有:静态布局、百分比布局、响应式布局;页面的整体布局方式,也决定了页面具体内容规约的撰写;

参考文章《3种常用网页布局与设计注意点》:https://www.zcool.com.cn/article/ZMTIwMjYxNg==.html



二、滚动条/滚动区域

1.页面整体滚动区域

滚动区域是从哪里开始?是页面级滚动吗?


2.滚动条的样式

需要给出滚动条的视觉和交互


举例:

三、初始状态/空状态

页面“加载”是做设计时常常忽视掉的,因为大家肯定是重点考虑有内容的情况,并且页面数据是否需要加载、加载时长等等需要根据前后端接口返回情况确定。


1.补充初始状态的页面;初始页面是骨架图还是保持不变,是否添加页面引导?等都是需要考虑的;

2.补充页面数据为空的样式;

举例:

四、加载样式

页面级加载的样式是什么样的?也需要补充到设计稿中;

举例:

五、其他特殊情况的处理

比如“无权限查看”“记录已被删除”“已被拉黑”等等情况;

举例:

具体内容

当补充完页面整体上的规则之后,就可以着手补充页面具体内容的规约了。具体内容的规则其实和整体规则从大方向是差不多的,也是那几个方面,只是更细节:

一、考虑是否自适应,自适应的规则

如果页面整体是定宽的,那么内容也是定宽的,就不需要考虑内容随着页面拉伸或缩小带来的变化;如果页面整体是自适应的,那么具体模块可以根据功能需要来设置哪些区域自适应,自适应的规则是什么;

举例:


二、考虑内容过多时的样式

B端产品设计场景更复杂,内容更加不可控,再加上电脑屏幕大小适配,页面宽度可自由拉伸,种种因素都要我们更加仔细的考虑页面的各种极限值情况,如何写全面设计规约是难点。相信在设计评审会上开发和测试最常问到的一个问题也是:这里内容过多怎么展示?虽然我们在设计的时候是按照80%的场景去考虑,但是剩下20%的极限场景也需要我们给出设计规则。

内容过多,具体划分还可以分成以下几类:文字过多、选项过多、弹窗内容过多、按钮/标签过多、表格内容过多、功能过多等等情况,每种情况下有哪些解决方式呢,可以参考文章《B端交互设计之内容太多怎么办》:https://www.zcool.com.cn/article/ZMTE5NDAzNg==.html


举例:


三、考虑极限情况下的提示/反馈

用户反馈,页面中肯定不少,我们画页面时也会画出大部分提示,但是缺少提示/反馈依然是设计师常忽略的内容,主要是提示的场景非常非常的多,而且有很多细分情况:

1.数据处理慢的提示

问题举例:操作的数据过多时,后台数据处理慢是否有提示?


2.操作后的提示

成功、失败、进行中等,还有部分成功,部分失败的情况

问题举例:启用失败时如何提示?


3.无权限、禁用等的提示

问题举例:项目列表-阶段没有权限时,需要添加tips提示;


4.缺少二次确认提示

问题举例:新建页面点击取消是否需要二次确认提示?

四、考虑校验的时机和样式

1.校验的时机:是失焦后还是提交按钮时,还是实时的

问题举例:表单的必填校验,是失焦实时校验,还是在提交时校验?

 “实时校验”是在用户浏览表单时实时检查用户输入的有效性,而不是在用户提交表单时一次性检查全部输入:

验证消息显示在靠近输入的区域,并一起显示;

2.校验的样式:是在下方出提示,还是全局提示,还是什么的;

举例:


五、考虑是否缺少滚动条的样式

不仅要考虑页面整体的滚动区域,有些模块也是单独需要滚动的;

滚动区域是哪里?包不包括表头?标题?有没有内容需要锁定?滚动条的样式?这些问题都要给出规则。

问题举例:信息内容过多时,容器内展示不下怎么办?--答:展示不下时容器内出现滚动条,滚动区域是整个内容区;

六、数字方面的问题

1.数字输入超长的显示

问题举例:极限数字如何显示,比如筛选结果超过三位数:999+

2.数值是0时,是否有特殊的规则

问题举例:数值为0时,是否显示此模块?

3.是否有输入限制,比如,限制正整数、小数,小数精确到几位等等;


七、点击热区的范围

我们一般默认热区就是触发控件的区域,但是有时可能视觉上图标需要小一点的,但是热区需要更大一点,就要特殊标注出来。总之,方便用户操作为上。

举例





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

文章来源:站酷 作者:ZZiUP

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


应用程序设计中的色彩原则

分享达人

颜色会潜意识地为观看者提供有关应用程序的大量信息,即使他们从未阅读过任何文字。


什么是色彩心理学?

不同的颜色实际上可以对人类的情绪甚至行为产生深远的影响。这是全球各城市许多绿色和蓝色倡议者背后的想法:绿色和蓝色使观看者感到更加平静和放松。

绿色对减轻压力(和其他因素)的影响如此深远,以至于实际上可以帮助人们延长寿命

这对应用程序设计意味着什么?

嗯,颜色的影响不仅仅是观众喜欢与否,还会影响他们的感受。例如,深浅不一的蓝色会激发忠诚和可靠的感觉。绿色激发舒适和幸福。黄色与快乐和刺激有关。红色让人兴奋并引发欲望。

但是那些不一定是感觉的东西呢?人们是否也倾向于将某些价值观与颜色联系起来?

这项调查要求人们选择与某个词相关的颜色。他们发现:

  • 信任 = 蓝色(34% 的受访者)

  • 速度 = 红色 (76%)

  • 便宜或便宜 = 橙色 (26%) 和黄色 (22%)

  • 高品质 = 黑色 (43%)

  • 高科技 = 黑色 (26%)、蓝色 (23%) 和灰色 (23%)

  • 可靠 = 蓝色 (43%) 和黑色 (24%)

  • 乐趣 = 橙色 (28%) 和黄色 (26%)

  • 恐惧、恐怖 = 红色 (41%) 和黑色 (38%)

应用程序设计人员在开发应用程序时最好牢记这些关联。然而,这些都不是应用程序开发人员绝对必须遵循的硬数据。相反,它们是开发人员可以遵循的指南,并结合下面讨论的其他设计原则。


围绕颜色的文化差异


在选择颜色时,牢记应用程序的受众始终是至关重要的。

例如,在西方文化中,白色往往代表纯洁或纯真。然而,在亚洲的某些地区,白色是用来表示哀悼、厄运和死亡的。显然,如果应用不当,这可能会产生严重的意外后果。

为此,设计人员应该了解他们的受众并相应地选择颜色,这在日益全球化的社会中并非易事。


选择主调色板


应用程序设计人员和公司等都应该在确定其品牌的主要调色板之前进行仔细研究。最重要的是考虑观众和他们想要传达的内容。

蓝色是一种流行的颜色,因为它与信任和可靠性有关,但它也变得有点过度使用了。

橙色可以与廉价联系在一起,但也可以与乐趣联系在一起。

红色可以令人兴奋和振奋,但也代表恐惧。

更好的使用颜色来设计应用将有助于塑造观众的感知。设计人员需要了解颜色关联以及用户如何下意识地查看设计以创建成功的调色板。


色彩和谐


一旦应用程序设计人员确定了主要颜色,就该选择其他颜色了。使用一种颜色很简单,通常不会很引人注目。

但是,选择的颜色需要很好地搭配。

冲突的颜色会让观看者感到不安或有压力。相反,应用程序设计者应该寻求创造一种赏心悦目的组合。一种会让用户感兴趣并让他们对应用程序感觉良好的应用程序,从而引导他们尝试它。

这里有一些设计师可以遵循的基本原则,以在他们的设计中创造和谐的色彩。


单色

首先是在整个设计中坚持使用相同的颜色,但使用不同的色调。这增加了产品的兴趣但又不会很突兀。


类似色

另一个流行的选择是使用类似的颜色。这种方案也很难搞砸,尽管设计人员确实需要了解每种颜色的饱和度。

此方法可以使用色盘上彼此相邻的颜色。例如,绿色和蓝色,或橙色和红色。


互补色

互补色方案使用调色板上彼此相反的颜色。例如,黄色和紫色或蓝色和橙色。

使用互补色时,设计师必须仔细选择阴影和色调。如果做得不好,很容易创建一个视觉上不和谐的方案。

但是,如果做得好,互补色可以使应用程序设计真正流行起来,并在众多其他不那么吸引人的应用程序图标中脱颖而出。这可以使用户更有可能选择该应用程序而不是其他类似功能的应用程序。


分裂互补色


这种方法有点复杂,但可以产生一些引人注目的结果。它采用三种颜色,一种颜色和两种相邻颜色的互补色。例如,从紫色开始,然后添加橙色和绿色。

设计师必须小心使用这种方法,错误的组合会使设计从有趣变成突兀。


正确的应用程序设计颜色

总而言之,应用程序设计中的颜色世界非常复杂。没有一种颜色会吸引所有观众,也不会适合所有品牌。然而,选择正确的颜色绝对意味着一个成功的应用程序和一个普通的应用程序之间的区别。

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

文章来源:站酷 作者:ZZiUP

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

B端数据可视化组件设计规范:平台级项目复盘

分享达人

关于数据可视化项目


在贝壳,有店东、圈经、CA等多种服务角色依赖数据信息作业,各种各样的数据被用于管理、分析和制定目标。但是,房产垂直领域的数据非常庞杂,数据体量也在急剧增长,图表的应用场景越来越复杂,除了pc和移动端的数据看板,还出现了线下门店大屏场景。


与此同时,数据展示一直处于无可视化规范的状态,导致频频出现“数据堆叠”“数据出界”“数值无单位”等可读性低的问题。因此,把这些复杂、抽象的数据,通过更直观更容易理解的可视化方式展示出来,建立一套专注于房产领域的可视化组件规范,变得尤为重要。


图1 数据部分展示现状


Kecharts项目从汇总和梳理数据展示问题出发,聚焦并抽象问题点,旨在建立起统一的可视化规范。同时,我们还对极端数据的展示进行计算规则处理,从人工配置的效率考量,系统性地帮助用户进行高效分析和决策。


1.从不统一到有规范


数据规范的第一步,解决“知道什么数据用什么图表,了解颜色的使用规范、数据排版展示的要点、适配性原则”等基础规范,从配色、布局、基础展示规则上,满足数据展示的美观度和可读性。



2.极端情况的处理规则


最难解决但也最有价值的痛点是:数据体量大、维度多带来的“不确定性问题”,想要把海量、高维的数据以准确有效的方式展示,需要建立高质量的交互和配图规则。因此,我们在梳理基准展示规范的基础上,也对极端情况进行了一系列的规则处理。



3.人员可配的高效性


数据往往是由平台自上而下传达到城市,再由专业的商业分析师对数据进行分析和处理,很多数据需要人工绘制和展示。因此,Kecharts在设计数据规则展示的同时,也要考虑数据的可配置输出规则,尽可能减少人工操作成本,降低由于人工分析水平不同导致的报告质量方差。



一、建立图表可视化

基础规范


建立基础可视化规范,是为了将图表展示拉到基准线水平,也是当前要做的第一步。基础的规范建立,可以让图表迅速换身衣服,第一时间提升用户的感受。所以,第一步首先解决配色的使用、基础的布局、图形的基本表达等方面的规范问题,满足数据的基础美观度



1. 配色

更科学的配色带来崭新的视觉感受


图2 配色色板图示(局部)


优化前,Kecharts各种配色之间关联性低,与整体平台的表现层形式不统一。优化后色板的样式与KeDesign贝壳设计系统,“UXD笔记”公众号后台回复“贝壳”,领取VI规范文档)无缝融合。现有配色方案饱和度更协调,阅读体验更友好。


由于数据体量大,我们尝试将8种常用色扩展成10种常用色以及24种扩展色来更好地满足业务需求。并且根据不同品牌主色,进行明度调整。除此之外还增加了更沉稳的商务主题以及暗黑主题配色,满足特殊业务场景的使用。


图3 配色的概念图


2. 布局

更合理的布局带来清晰准确的表达


基础布局

图表的构成,由一系列独立的图形与法元素结合而成,如包含标题区、操作功能区、面包屑、图例区、单位区和图表区,通过合理的基础布局增强图表的秩序性一致性,同时规范标题、图例等元素的展示适配规则。


图4 数据基础布局规范(局部)



精细图形

整体的图形展示细节也做了统一调整,从整体排布、字体、字号、圆角、描边粗细、数据轴、标签等方面进行了优化设计,使整个图表看起来更加精细。


基础的配色、字号、布局调整之后,基本满足了数据的展示基准,从基础合理性展示和视觉感提升上,有了一定的改良。


图5 基准规范后的对比



3.适配

更灵活的规则带来细腻的交互体验


图6 栅格化设计图示



定义图表的适配规则

定义四种图表卡片的适配方案,当图表放大或缩小到某一区间时,内部布局会根据图表大小变化进行有权重的删减,使图表在多种区间内能够将核心数据表达的更清晰。


图7 栅格化设计图示



二、极致探索

极端情况规则


满足了数据的基准展示,并没有达到完整的可视化展示规范,海量和高维带来的展示问题依旧存在。所以,在建立基准规则的基础上,结合贝壳数据的特色,需要集中处理极端情况带来的问题,从基准线提升到具有易用性的“标准线”。

图8 以饼状图为例的极端情况分析



1.解决数据量过载

导致的不确定问题


过滤数据

首先从底层数据进行过滤,过滤底层占比0%的数据,减少数据呈现量。将占比为0%的大部分数据在图表的可视化展示中去除,转移到图例中展示,满足了用户需要完整数据的诉求外还大幅度提升了图表的可视化程度。


元素优化

优化标签、线条、指示等元素的展示规范,从定义边界位置、规范标签的展示内容上,对图表内元素的极端情况做适配处理。


智能检测

为了消除信息过载带来的标签碰撞,我们制定了标签的智能检测规则,当两个标签重叠超过1/3时,自动化地隐藏部分标签,被隐藏的部分可以通过悬停展示详细信息,不经意间大幅度的提升图表的展示美感和用户的浏览体验。

图9 饼状图为例的处理过程


2.拓展通用性极端处理规范


从单点问题扩展为通用性规范处理,在不同类型图表的极端情况处理过程中,从全局的角度出发,对极端情况下出现的核心问题做汇总并抽象,在颜色、碰撞、超图形等方面,输出极端情况处理规范。


图10 通用性智能检测规则(局部)



三、提升人工配置

的高效性


数据分析和传达的过程,依托于人工过滤、处理、绘制和展示,考虑数据的配置输出,人为水平难以把控,尽可能减少人工不必要的操作成本,从而提升数据报告产出的质量。


在配置自由度时结合产品定位、属性和功能进行思考。用户希望数据通过配置层处理后转化为可视化图表。普通用户期望通过简单的操作快速搭建数据看板;高级用户希望对可视化图表有精细化的自定义需求。


我们尽量用智能处理代替人工对数据无效数据的筛选,对数据的展示做智能的适配,如指标卡的展示,前置设置了一系列的展示模版,在用户选择指标数据的同时,会根据指标的数量做自动化贴合排布。与此同时,保留了一定的人工可配置自由度,支持用户可自由配置指标卡的细节展示等。

图11 指标卡用户配置示意



因此,针对大量杂乱的数据,数据的呈现通常需要两层呈现给用户。第一层是数据库和数据源,会自动过滤掉存在的垃圾数据和无效数据


第二层是数据分发层,尽可能的通过自动化的配置去辅助操作员进行数据的分发和最终数据面板的呈现效果。通过简化操作流程和匹配人为操作习惯,降低学习成本,提升操作效率,为操作者提供“顺其自然的设计”。


图12 数据处理分层图示



结语


Kecharts的初衷是保证数据的真实、高效展示数据、遵循美学原则。我们遵循数据能够真实呈现的原则,在可视化表达中确保不遗漏、不误导,确保数据准确性

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

文章来源:站酷 作者:大魔V

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

怎么将画像与体验工具打通赋能设计

分享达人

什么是体验可视化地图

它们是一种体验洞察和形成参考材料的工具,能够帮助业务人员探讨决策使用,它们都是结合真实用户反馈形成的。另外这些地图本身并不能直接提供答案,而是用于促进对话或作为决策导向,它能跨部门让人们聚在一起讨论业务目标,指出潜在的机会或达成一致的价值观与目标,使解决方案更可行。即促进共同参与、共同思考、共同目标、共同发力。像心智模型、空间地图、服务蓝图、用户体验地图、客户旅程地图都属于体验可视化地图,也有称为对齐图。


用户画像&用户体验地图介绍

用户画像 本身可以反映出服务对象的特征,便于改进业务服务,帮助研究用户需求或产品痛点,因此在一些体验可视化地图中会配合使用。并且可以帮助设计师指导产品功能、导航、交互、甚至视觉设计方面的决策,是一种联系用户诉求与设计方向的有效工具,总之它能让你知道产品是给什么人用的,他们有什么特征或诉求。


用户体验地图 以个体在某个产品或领域中的体验经历为主,关注产品是如何契合个体用户体验的,通过用户个体的行为触点与视角来洞察商业机会。是一种比较视觉化、有助于引发共鸣和聚焦用户体验的工具,比较贴合情感化设计的理念,适用于洞察用户视角下与产品系统交互的可视化地图。


所以在作品集里经常看见这些体验地图就能够理解了,一方面是作为战略层的研究报告说明,用于佐证设计或决策的依据。另一方面是为了其他读者达成共识,便于共情设计目标。当然丰富和美化作品集也是一方面,更多的则是希望不要滥用起来,形同虚设,成了一个没有深入作用的装饰工具。


两者工具的差异与特性

用户画像的因素

用户体验地图的因素

如何打通用户画像与用户体验地图

方便直观易懂的去解释用户画像与用户体验地图之间的关系作用,这里我通过流程、相互作用来解释一下;

从流程上看

体验地图是基于用户研究开展的,所以要考虑研究谁,研究什么问题,在什么场景或领域进行,因此就需要借助用户画像去界定范围,以及形成用户材料,再去考虑用何种体验可视化地图展现,而用户画像也将一直贯穿始终提供可参考的用户信息;

相互作用上看

用户体验地图一般都是聚焦于既定范围的目标群体,一份完整的用户体验地图应该包含用户画像信息,应交代清楚目标用户的背景、场景、需求、痛点等关联信息,方便读者了解,以便于代入用户视角深入到用户体验地图的讨论中。


而用户画像尽管提供了由外而内的视角或部分设计见解,但并不能满足项目多样化视角的需求,且不足以形成一系列的设计见解洞察,所以用户画像始终需要与心智、情景、体验地图或研究报告等结合使用。也就是说用户画像需要与用户体验地图配合输出,两者谁也替代不了谁。


体验可视化工具的一般流程简述

一个正式且有效的体验可视化地图一般必须经过四个阶段才能完成,最后再得出结论达成一致;

一、项目启动;通过内部识别或收集用户反馈找到需求点,计划研究目的,制定目标。

二、开始调研;通过研究手段向用户收集优化资料或数据,为创造体验可视化地图提供可靠的数据。

三、阐述分析;选择阐述方式,通过体验可视化地图将研究结果与核心价值进行呈现,为后面探讨做准备。

四、达成一致;使相关业务人员共同参与研讨,结合地图报告进一步的思考,指出潜在机会或达成一致的观点。

五、展望未来;根据研讨结果设计解决方案,提出价值主张,进一步跟进和实施起来。

真实应用中不用急着画图准备填充,先明确目标再从用户研究或资料收集开始。如果没办法找到目标用户进行访谈或测试研究,那么至少找到一线的人员进行访谈或测试,不要依赖自己的见解或认知套用,这些地图的精髓在于打破内部视角建立起一场具有包容性的对话,不同部门的参与者多多益善,所以这些地图只是研讨中心的参考物。


如何正确Get用户原型与画像

构建和使用画像时大致可以分为两类;

1. 根据用户研究建立正式的用户画像

2. 建立人物角色原型

具体取决于用途与条件情况等,制作任何一组用户画像都非依托想象力,都是基于事实或用户研究的。并且不只是简单的人口数据或个人信息描述,如果一组不能达到共情效果的用户画像也就失去了核心价值《如何有效快速共情-点击查看》,就像一份简历,没能体现出个人能力与专业素养一样。


人物角色原型

制作一个正式的用户画像是一个漫长的过程,还需要开展用户研究,如果你没有现成的调研对象或调研条件,你就可以采用人物角色原型,该方法是由《Lean UX》的作者Jeff Gothelf提出的,他描述到;

“人物角色原型是一个正式人物角色的变式,其最大不同在于人物角色原型不是用户研究的结果,而是更多的源于头脑风暴的结果。公司成员会从公司理念出发,基于自身领域的专业性和直觉,来明确谁是公司产品或服务的目标用户,用户的动机和需求是什么。”引:Jeff Gothelf."Using Proto-Personas for Executive Alignment,"UX Magazine(May 2012)

这类角色原型不用花费大量时间去做用户调研,它们是基于已知的特征情况或预期的目标用户,适合临时性使用,便于开展前期工作或达成一致的见解,但是人物角色原型并不能代替基于可靠数据的用户画像。


构建人物角色原型的方法

就是跨部门集体参与贡献观点与数据来构建。前线相关业务人员是必备的,人数控制在5-8个人就行,要有主持人把控节奏和参与度,尽可能收集到不同业务视角下的问题反馈,讨论开始前可以提出一两个角色原型来激发讨论,然后充实起来,尽管最后可能形成了多个角色甚至有些看起来有冲突,不过没关系,重点是让这些人物角色清晰明确下来,不一致的地方可以进一步的讨论。


人物角色原型的构成内容

一般人物角色原型在一页的篇幅内就可以显示完,主要五个板块。值得注意的是,一定不要脱离了产品主题的范围;

一、角色基本资料:角色头像、姓名、头衔、单位或一些可用的辅助资料。

二、人口统计特征:一般包含性别、年龄、职业、收入等与主题相关的人口统计指标(类似简历中的个人信息)。

三、心理统计特征:与主题相关联的因素,主要指不可轻易观察的心理活动、态度、信仰、动机、观念的个人特征。

四、产品相关行为:指与产品体验有主要关系的行为或是行动,包括兴趣爱好、个人习惯、专业活动等。

五、需求与痛点:用户有哪些与主题相关的需求或痛点,你的设计可以满足用户那些需求和痛点缓解。



用户画像

用户画像本身可以帮助发现问题或进行决策,同时也反应出了对用户或用户视角的共同理解,并且可以在日常研发工作中持续使用,例如一些材料归档、分享、更新、辅助其他可视化地图等,以发挥出更多的余热。


如何打造可用的用户画像

定性还是定量类型

根据产品需求选择定性还是定量分析,亦或者结合,一般定性适用于用户需求深挖或业务创新等情况,讲究的是“为什么”,而定量更像是通过数据验证“有多少”,常用于数据分析、趋势分析、数据验证、做精细化运营和用户精准投放。  

定量需要足够的数据支撑,如果项目需要画像且企业不稳定、用户量级不够不能满足数据需求,则可以借助市场数据报告、白皮书、第三方数据服务平台、调研服务公司等来参考,这些数据也都是可靠的。大数据杀熟就是数据画像的反面引用,通过画像对用户进行分层,再挑出用户中的软柿子或老实人欺负。


识别用户群体优先级

对目标群体要有认知,要根据特征划分层级或类型,例如典型用户、潜力用户、专家用户。这些用户的界定范围需要业务相关人员去制定,类似一份简历我们可以根据能力对标级别,一般我们可以通过4个比较有影响力的指标进行划分,至于权重我们可以采用常见的四象限或卡诺模型;

在制作用户画像前可以合理的根据人物角色原型的特征过滤目标用户群体,但不要过分依赖,你只是需要找到符合的目标群体,而不是根据原型找到理想的那个人。

最终调研对象的关系表呈现;

定性类画像不用邀请很多用户参与研究,一般在5人左右,只有研究资源充沛时才会考虑邀请更多研究对象,一方面是研究发现5人左右就能反映出绝大多数问题了,另一方面是出于时间精力和预算情况考虑。


定性类用户画像要做什么

一、确认研究对象的优先级,根据需求背景或目标确认重点跟次要群体来挖掘不同用户视角下的问题;



二、通过线上招募(APP内或相关平台发布有偿邀请,亦或者寻求第三方服务公司帮助)、客户群(相关的用户答疑群邀请)、论坛社区(发布招募帖子等)、专家咨询、产品线上推送等方式,寻找目标群体并建立联系;


三、选择线上访谈、可用性测试、问卷调查、焦点小组等有效的用户洞察方式,并设计好相关问题或材料准备与用户进行深入研究(主要围绕已知问题或新的设计方案验证,再就是新的业务需求洞察为主);



四、整理用户资料,围绕研究主题建立用户画像信息,完成主要信息模块,可以根据业务需要,将用户技术特征、职业特征、环境因素进行补充(需要考虑是否与业务有一定关联或影响,否则无意义);



五、完善用户画像的细节,将价值信息同步到画像中,并对有效信息的细节进行补充,增加可信度还原真实性;


用户画像并没有一个模版标准,具体还是要看业务需求,而且网上的模版挺多的,自己甄别吧。另外在用户洞察的过程中,我们可以结合可用性测试、绘制故事板(这两种研究方法有兴趣可以查阅资料,一两句讲不清楚,有机会展开讲)等方式一同进行,而不只是把目的停留在建立用户画像上,这样反而获取的有效信息受限了。


定量类用户画像要做什么

一、数据采集

通过有效途径将用户产生的数据集中,不论是产品数据库、数据埋点、第三方数据统计或是定量调研的结果,这些数据都是重要构成部分,同时也决定了信息的范围,比如你拿不到用户的出行数据,那么就根本没办法构建相关标签或指标。

二、数据定义

对数据进行清洗整理,识别出用户行为数据、用户偏好、生命周期等数据,并进行标签化分类整理,这些标签或指标可以体现出某些维度的趋势或用户行为预测。不过值得注意的是,在构建这些标签或指标时尽量结合业务流程或生命周期来梳理,考虑画像建成目的与业务场景同时,也要思考标签的权重问题,标签不等于越多越好。 

三、构建画像

根据产品阶段或业务需要,把相关业务标签结合用户群特征信息整合成用户画像,一般的业务标签类型有增长策略、用户偏好、用户价值、营销触点等,这类画像可以包揽多个维度信息,还能对周期数据可视化显现趋势变化,但是在用户痛点或需求上,可能不会很直观,需要进一步的结合用户场景带入思考。



通常互联网产品前期,没有构建标签或数字画像的经验,可以考虑让团队引入相关第三方数据画像服务,它们可以更便捷的接入到你的产品中并帮助你打标签做统计;

以下截图来自第三方大数据画像工具(神策)

*第三方数据分析辅助产品也不少,这里只做交流使用


如何让画像角色更生动

画像中的角色应该更加生动,能够让我们感受到真实的存在,只有这样才能产生共鸣,赋予画像价值,为此我们可以通过控制以下六点来做的更好。


一、不要特殊化

特殊能加深印象,但是特殊化并不代表产品的典型群体,同时在实际应用时容易扰乱共情或分散注意力,例如用户群体是普通青年,就不要描述成一个帅气的学霸,也不要为用户添加一些奇怪的癖好,这些不相干的信息并不能让画像更加生动;



二、合理应用头像

通常作品集中的头像都比较美观个性,这没事儿。但实际画像应用中,头像也是很重要的一部分,会马上映入眼帘,这些头像不要使知名人群的,且贴合真实用户标签,不用暴露性感或是丑陋异样的,也不要使用插画、卡通、3D形象,不要有奇怪或不自然的行为动作。


三、充实细节

以一款线上教育产品作为背景,举例原本我们的用户信息写到:

那么即可根据产品属性结合实际情况进行丰富补充,例如调整为以下描述;

虽然没有过大的变化,但是已经将贴合教育产品的地域信息、课程阶段、收入情况进行了完善刻画;

接着再例如,虞溪女士的需求写到;

简单来看确实是透出了线上教育产品的需求,但是需求并不深刻,也没有刻画出虞溪女士的核心诉求,为此我们可以结合创造情景故事的方法,融合角色、场景、行动、事件、评价、情节这些元素去深度刻画描述,例如以下调整;

结合创造情景故事的办法是为了刻画出更多细节,不仅可以让浏览者更好的沉浸在角色视角,也能在完善的过程中深挖出更多有价值的思考;


四、创造情景故事

情景故事不会很枯燥会更抓人心,能够传达更多信息的同时,将产品信息与真实情景交融在一起,方便团队记忆理解以及更好的促进讨论。创造情景故事的元素通常有:角色、场景、行动、事件、评价、情节。看起来就像是在描述“我与xx产品的一天”。

  1. 角色:故事的主人翁或是参与者,不可缺少的重要部分;

  2. 场景:故事发生的时间地点物理环境,例如早上八点半我在拥挤的地铁上抢到了座椅,并打开了手机;

  1. 行动:能够观察到且与主题有影响的行为动作,例如我被这个问题难住了,解锁手机并打开了这个APP;

  2. 事件:发生了什么事儿,角色间做出了什么反应产生了何种结果;

  1. 评论:角色怎样评估并作出决策,有了怎样的目标,并如何进行下一步。其中任务目标是驱动的核心;

  2. 情节:一系列行为与事件的演变过程再到结果,从问题的发生到角色推进目标到结局。例如经典的戏剧结构:

*创造情景故事是要花费时间精力的,如果时间充裕你可以慢慢将相关描述进行转换,时间有限责挑取重点转化;


五、不要孤立使用画像

在前文就有描述到画像需要配合其他体验可视化地图一起才能更好的发挥效用,画像通常始终保持着个体视角,而且没有办法传达一系列完整的体验报告,所以为了更好的满足项目多样化视角的需求,尽量不要孤立的使用画像。



六、定期更新

产品发展中,会经历不同的阶段与市场变化,用户群体自然会变。如果说产品在研发新的功能去开拓年轻化的市场,那同样意味着目标群体趋向年轻群体,这种时候就需要变更或新增用户画像,就不要使用旧的画像起步了。



基本上做好以上细节,你的用户画像就大功告成了,这就像是结合STAR法则优化项目经历一样。最简单的标准就是业务人员能够去理解这些角色并代入角色视角思考,可以有效共情或决策。


如何用好用户体验地图

首先我们回顾一下用户体验地图的关键词:既定的用户群体、应用场景或领域,用户以某个持续性目标驱动与你的产品或服务发生交互,并且涉及多个阶段来实现目标,地图会通过由外而内的视角洞察产品服务是否契合用户的体验。



由此可见在与用户研讨时,我们的问题或测试任务应该覆盖相关阶段或重要的任务流程,以此来获取体验地图的相关重点信息。另外很多产品比较庞大,服务颇多,因此控制好体验的阶段范围也很重要,不仅会拉长工期也会使得焦点分散。

用户体验地图的构成简述

用户体验地图主要包含三个层面的内容,一、用户目标阶段,二、用户与产品服务交互,三、痛点机会洞察;

其实碍于不同产品和服务类型,体验地图的构成元素也有差异,不过在漫长的应用发展中也逐步趋于稳定。



常见的构成元素:

一、用户需求或目标:
在体验地图中,用户以需求或目标驱动与产品发生交互,需求或目标既定了要做什么,应该需要什么服务。


二、行为阶段:

行为阶段是界定场景的重要部分,以目标任务阶段的生命周期或者关键节点展开,不一定所有阶段托盘而出,阶段太多则不聚焦,细分太多则费时间也不一定快速见效。


三、采取的行为触点或步骤:

用户使用产品或服务展开的行为或接触的设备、泛功能应用等。


四、想法与问题:

在体验服务的过程中出现的问题或是一些真实的想法感受。


五、情绪波动与精神状态:

情绪和精神状态通常是反映服务好坏或用户满意度的重要因素,但同时也难以观察或量化,通常会根据用户对问题的描述来共情情绪,亦或者向用户提供情绪表情标签。


六、痛点或机会揭示:

结合上层阶段行为与用户的反馈信息向下垂直洞察产品服务的痛点或机会。


七、设备或其他图例补充:

例如跨端跨设备或包含特殊标签信息的补充说明。


*示例模版


用户情绪板怎么用才对

表情包早已成为网友互动和情绪表达的重要部分,但是在实际的可用性测试或访谈中,用户会相对拘束一些,也不会把各种各样的表情挂在脸上,所以才说用户情绪很难研究和洞察,更别说量化执行了。有些人可以进行表情管理,情绪更是难以琢磨;


那么体验地图中的情绪板怎么搞定呢?


就用户体验地图中的情绪块来讲,通常一定不只是表情icon来做表达,这样费解还缺乏实际价值,所以一定会加上相关描述来揭示用户情绪与观点。心智模型中用户情绪感受便是靠的文本描述来传达。


早期Pieter·Desmet在其《Designing Emotions》一书中提出了如何衡量情绪的研发方法,他开发了一款叫做产品情绪度量仪的工具,其原理就是为用户提供各种表情表达的卡通形象,用户在体验过程中根据自己情绪选出最匹配的那个卡通形象来示意自己情绪。这个工具经过不断迭代并丰富声音后已授权到:https://www.premotool.com/,我们可以在度量用户情绪或其他体验可视化地图中配合使用。 


另外在使用表情标签应用时,并不大推荐常见的微信表情、QQ表情等,这些表情在长时间的使用中,用户都会形成一些偏好,这会影响使用决策


在服务体验的过程中,很多时候情绪变化并非是单一线型上起伏变,例如:

我在观看电影高潮的部分突然网络异常,那么我的情绪应该是多样化的,一边是代入高潮部分的激动,另一方面是网络带来的失落感,同时还有等待网络恢复的焦急。

为此我们通常有两种方法来传递情绪变化;

1、将喜、怒、哀、乐、悲、恐、惊或需要的情绪标签化,每种情绪用一个颜色表示,然后使用同轴的趋势图结合用户行为阶段来表示;


2、即使一次展示多种情绪,也难免有积极情绪与消极情绪同时出现的情况,这种时候可以围绕一条分界线划分两类情绪区间,使用情绪曲线结合关键因素描述来显示更加全面而复杂的情绪心理,对应每个关键情绪节点可以使用不同表情图标细化辅助,使得情绪起伏的信息更充实有价值;


怎样完善用户体验地图

1、建立正确的项目目标是第一步,用户体验地图的优势与作用都有在前面讲过(如果忘了可以在“两者工具的差异与特性”中开始回顾),使用用户体验地图是有目的性地,它不是优化体验的万金油,通常都是收集用户反馈知道某一些阶段或环节存在问题,而建立优化目标开展的工作;



2、锁定存在问题的阶段,建立用户问卷、焦点小组或用户测试进行聚焦研究,尝试收集用户的意见或优化方案;



3、通过白板或线上协作工具建立简易的用户体验地图框架,并将研究用户的画像信息与碎片信息填入地图。白板共创的办法其实就是根据用户体验地图的框架,结合用户视角将自己的观点写到便签贴到对应的区域,避免你一句我一句难以记载和整理;



4、关注每个阶段的过渡,通常问题很容易出现在这些地方,例如付费前到付费后阶段,如何进入后者阶段就成了关键点,另外没啥优化空间或体验良好的阶段可以折叠起来留出更多空间关注核心;



5、用户体验地图的画龙点睛之处在于跨部门协作完成,而不是闭门造车,邀请一两个其他部门的人说明要求和完善地图并不是什么难事,只有这样最后的结果才能达成战略一致,而不是自己绘制完后要求其他人被动接受结果;


检验用户体验地图的标准

一、首先看你是否与用户建立联系,用户体验地图的个体对象是用户不是你自己,尽可能的获取真实的用户的信息。

二、一个产品运作是需要多个部门协作的,所以至少要有三个不同部门的人员参与进来。

三、协作完成用户体验地图和达成共识后,你会惊奇的发现问题如何解决,各个部门该怎么配合实现都清晰明朗了。


前一阵子跟UXren社区主理人宝珠老哥讨论过,就如截图所示,更重要的是将企业各部门协同在一起,达成一致的战略目标,共同参与探讨出解决方向为业务赋能,这才是体验地图的精髓所在。


什么是触点模版工具

用户体验地图通常包含了一系列阶段,而每一个阶段都会由多个触点编排成一段微型体验,而触点模板工具将会很好的为你建立和打开一片微型的体验模型,这种模型是由罗伯特·罗斯曼(j·Robert·Rossman)[美]与马修·迪尤尔登(Mathew D·Duerden)[美]在《最佳体验》中提出的一种体验洞察工具,它可以很好的结合体验地图去进一步的深挖某段流程或阶段里需要优化的体验,它们之间的关系就像一条路线图与一份详细的指引说明。当你完成某个触点模版时,你会对该触点上的体验设计有清晰的认识,并且会形成一份书面报告与执行团队共享和交流,触点模板可以很好的解释体验是如何设计的,并且将相关执行团队的角色联系在一起,这不是噱头,你可以根据后文指引进行尝试。


体验类型的框架

体验是复杂的,在用户触点模版工具中,体验被划分为平淡的、专心的、难忘的、有意义、革新性五种类型,并且它们具有连续性,是通过关键特征与关键属性定义出来的,它们结合了心理学理论基础,目的是方便更好的理解体验,并在设计实践中起到指引作用促进交流,因此我们在设计时也应该对用户体验结果有意向性的去设计,框架如图;

*关于参与感的两种系统思维是两种不同的思维状态,系统1更像是惯性思维,凭借认知或经验更加快速和自动化的思考,而系统2就会开始更主动的更深入的进行思考,参与阶段越高思维越深思。


而三个阶段分别是;

一、接受:个体意识到和接受体验过程中正在发生的事情。

二、思考->处理->计划:个体开始积极的思考体验,并对正在进行中的事物做出处理与反应,同时可能开始计划各种应对方案。

三、行动:深入的参与到体验中并引入新的触点和元素来维持互动,从而共同创造体验,例如《鱿鱼游戏》上映后,影片中的“扣糖饼”又带火了糖饼。

当新的事物被第三阶段引入后,又会重新开始接受并循环,不过这并不代表所有的体验都能够完整经历这三个阶段。


触点模板框架

触点是用户进行交互的重要部分,其周期可长可短,会产生不同感受,而一系列的心理感受会促成最终阶段或完整的体验。触点模版由11个部分组成,它们互相作用指导和揭示体验设计的方向与细节,并把设计结果引向预期的体验方向。


抬头信息

  • 编号:对应到体验地图的阶段编号或是触点编号,随着触点设计逐步完善,对应的位置可能会发生转移。

  • 标题:对应该触点模版主题的标题或是任务触点的名字。

  • 体验类型:触点的体验类型或整体的体验目标,从平淡的到革新性的五个体验类型。

  • 期望的反应:我们把期望的反应视为触点预期结果的北极星指标,它可以是多个。我们通过用户反应逐步提炼出预期的结果供予用户体验,例如期望的反应是笑容,那么我就可以提炼出“讲个笑话、开黑游戏”等可以促成反应的体验结果,同时期待的反应应该尽可能的传递用户价值。

核心组成部分

  • 期望的结果:根据期望的反应,我们要提供给用户哪些体验来实现。同时期望的结果应该跟类型相匹配。一般我们可以根据 “1. 产生积极情绪、2. 吸引注意力、3. 帮助发展和加强关系、4. 从更宏大的视角给人来带意义、5. 提升能力、6. 孤立自由选择” 这些类型内容作为起点,并根据体验项目的情况细化,例如“心情低落想要刷刷手机产生积极情绪”Change“在App上刷会儿短视频,看点有趣搞笑的段子来缓解下低落的情绪”


  • 体验场景元素:触点模板工具没有特定的行业或业务模式,因此这些元素根据需要完善即可。而实际的元素应用中也会有不同的权重,注意重点元素的设计应用。

  • 互动设计:可以是人与人互动、人机交互或更为复杂的互动,就是有意向性的将元素进行编排与用户产生互动获取必要的信息或传递。


  • 贡献者:整个体验阶段中,可见的幕前服务人员与后台的服务员,他们是组成完整体验的重要部分,例如餐饮店的服务员与传菜员就是可见的幕前服务贡献者,而厨师们就是幕后的贡献者。


  • 共同创造:共同创造和可供性是促进用户参与的两个重要的方法,并且参与度有高有低。好的体验更多是与用户共同创造的,建立合适的触点与用户共同创造体验是重要的!以微信的“拍一拍”来看就是个很好的例子,拍一拍功能本身是加强了微信聊天的可供性,给用户提供了更多的互动可能,同时用户可以自己编辑被拍以后的文本,加强了体验的趣味性,这便是共同创造的过程。可供性为用户提供更多互动体验的可能,而共同创造为用户提供DIY的空间。

  • 优化:对触点进一步的优化,加深体验感受。一般分成了两大类型,一类是技术优化、一类是艺术优化。例如让一个App加载短视频更快更流畅,这就是技术型优化,如果为一个服务器未响应的404界面配上缓解焦虑的插图,这便是艺术型优化。


  • 过渡:触点与触点之间的过渡可能波动、异常、缓慢、复杂等,如何引导用户正常的过渡到下一个触点也是重要的一部分,它可以是自动化的隐式过渡也可以是引导性的显式过渡,就像是安全通道的指示灯一样将用户从一个地点带往另一个地点。


*触点模版(可直接下载原图进行打印使用)


如何构建一个触点模版

通过一段音频聊天室互动体验之旅来揭示触点模版用法与效果,音频聊天室大家应该都熟悉了,这里就不聚焦用户画像与用户体验地图了,触点发生在用户第一次进入歌厅音频房间,那么应该怎么设计体验来为用户留下好印象呢?



触点是发生在注册后的第二个阶段,即首页房间列表(编号A02),完成注册阶段后见到的第一个界面。标题则暂定为“一次非凡的音频互动之旅”,我们希望新用户在选择好一个房间进入后能够有一次愉悦难忘的体验经历,而相应的期待反应则是“有人带我玩真棒!这个声音我好喜欢,下次还来找Ta们”。体验类型则希望是从平淡的体验类型升华到难忘的。

其中体验场景除了设备自身与软件环境,更多真实的环境因素碰撞我们无法预测和控制,因此仅锁定软件自身的场景元素。互动设计则是关键,软件本身更多是工具支持,我们需要利用好运营资源跟用户产生互动来促成体验结果,这里我们会根据技术可行性优先考虑能为用户提供的体验结果,再到互动设计部分。其次就是过渡部分,预期的过渡触点实际上会有多个方向,我们优先以充值消费作为一个触点(转化)、私信关注为另一个触点(形成互动联系方式),完善后的触点模版如图;


在该触点模版中,主要揭示了如何为用户打造理想的体验之旅,不仅涉及到运营方法也包含了软件的重点优化部分,它很好的展示了如何通过角色之间在软件中的互动来促成体验与商业价值,当你把这份资料在团队里分享后,完全可以清晰的对体验设想进行解释,以促进团队内的深入讨论与细节推进。至于相关功能的细节推敲同样可以采用触点模版继续深入。



接着A02触点模版中提到的标签体系优化,我们再一次的结合触点模版进行标签的体验设计,编号设定为“A03”,这是一个泛触点,它涉及到用户注册进入时、房间互动、系统消息、消费与充值、装扮标签的着落页,但归根还是在应用内。标题为“让标签为用户赋能意想不到的体验”,在这段泛触点中我们期望围绕标签为用户打造难忘的体验,让标签产生更多的价值与业务转换,经过初步的体验设计后,新的触点模版如下;


在这个触点模版上我们对标签的作用价值进行了定义,并对功能及业务流程上进行了设想,已经初步的形成了标签体验的设计,接下来只要将装扮标签的着陆页与房间内的应用进行完善设计,在辅以条件判断与消息通知打通闭环就算是完成主要工作了,再此后的内容你是继续用触点模版还是设计交互原型都是可以的,至少目标是明确的。相信写到这里,触点模版的应用与功效你已经一目了然了。


触点模版小结

触点模版的板块跟信息维度较多,但是考虑到触点或项目的实际情况,模板内的信息填充不用完整。并且它的确可以很好的将体验设计的思路整理出来并形成材料分享,对于多个触点只需要根据体验地图上的顺序打上编号后,即可将多个触点模版的关系连接起来,你可以将打印填充后的模版依次排列或张贴在白板上的体验地图上。


触点模版就像是一份交互自检表,它从多个维度去考虑和解释了触点体验的设计,尽管没有勾画出详细的设计细节,但是体验设计思路与执行团队的任务已经很明确了。


另外完成触点模版时,并非是要按照模版里的板块顺序作业,比如有时候我们是根据体验结果考虑运用哪些体验场景,如果有固定的场景,那么你就可以根据场景情况开始考虑,一般更倾向于先设定体验结果进行倒推。再就前面啰嗦过的,我们根据项目情况完善需要的模块即可。


服务蓝图介绍

更完整的服务流程可视化工具,可以结合用户体验地图对服务流程进行优化或调整,相比传统的业务流程图,它在用户角色关系与前后端分离上有明显优势。是一种服务可视化的工具,利于让产品保持精益(识别价值点、优化流程)

多角色的引入,虽然使得蓝图更加复杂,但是能够反映出更多角色的交互与流程关系。

服务蓝图的因素:

服务蓝图的构建元素:


结语

客观来讲,这些体验地图时常保持争议,特别是逐步大范围在业内曝光后,形式化、假把式、滥用等标签也愈发明显呐,这些体验洞察工具并不总是能够在项目中发挥预期作用,它们也需要区分使用场景跟项目需求情况,如果你没有尝试过,可以积极引用,当你熟悉应用后你会发现收获更多的是一种体验设计的思维,一旦需求或痛点摆到面前时不再像一只无头苍蝇。

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

文章来源:站酷 作者:泡泡bing

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

“留量”时代,做设计需要运营思维

分享达人

写在前面


今年的“双十一”,朋友圈异常安静,没有了以前电商活动的氛围,没有漂亮的数据,没有晒图,有人说是用户消费疲软了?数据不会骗人,今年”双十一”一天的GMV还是比去年高了将近500亿,而且一大波尾款人在11月1日就已经结束。再加上直播电商,用户购买渠道变多了。李佳琦直播带货一晚就超100亿的GMV,说明用户的消费意愿和消费力还是很强的。算一下,50个李佳琦直播一晚上就能抵上“双十一”一整天的GMV,有点厉害。中国伟大复兴的道路还在继续,随着人民生活水平的提高,文化素养提高,互联网普及,消费力只会增不会减,只是战场在变化。


前些日子发了PP微助手的优化作品,本篇将结合改版思路和最近对互联网设计行业的思考进行一些分享,希望对大家有一定的帮助,欢迎大家来指正吐槽~


点击可以查看   PP微助手改版优化







流量变“留量”




互联网产品最重要的就是流量,没有流量,就算产品设计的再好,早晚也会运营不下去。纵观这些年移动互联网的发展,市场已经被分割的差不多了,各个行业都有龙头企业(社交:微信、购物:京东淘宝、出行:滴滴哈罗、外卖:饿了么美团、旅游:携程等等),各大互联网公司业务也趋于稳定,红利期已经过去,流量市场已经变成了“留量”市场。就像淘宝这种大流量的产品,也在吃流量老本。




回归到设计,在互联网公司做设计,一直在强调需要有产品思维、用户思维,然而在“留量”的时代,更需要我们具有运营思维,同行业的业务趋同、需求趋同,可挖掘的需求少之又少,可以打开同一行业的各类app一看,就知道产品形态大同小异。所以只能在“留量”里下功夫,既要减少存量用户的流失,还要在这基础上让存量用户创造更大的价值。必然,我们在做设计改版的时候就需要结合一些运营知识。






曝光



“曝光”一词相信大家都听过,在拍照时,“曝光”时间越长,照片细节就越丰富,当然过度“曝光”,也会让照片失真。在运营一个互联网产品时,也需要用到“曝光”,这里的“曝光”是指产品内容的“曝光”。


用户在进入某款产品的时候,都是带有一定目的性,通常情况都会经历三步操作,从看见内容,到与产品互动,最后得到想要的结果。




这里的“看见”,就要说到产品承载信息的曝光,合理的信息曝光才能更精准快速的触达用户。同时,运营同学最关心的数据和流量,也是需要安排合理的信息曝光才能有有效的数据和流量。在手机这么一小块屏幕想把所有内容都曝光出来,是不太现实的,就算能,也不合理。把过多的信息一下子全部曝光给用户,效果反而会很差。通常做法就是对页面进行楼层的分割,流量进行合理的分发。大流量的产品,每个楼层都需要单独部门去运营的,这样就会出现业务主次和优先级,不然各部门就会为了争夺"屏幕地盘",无限撕逼。




作为设计师,就需要和运营部门做好以下确认:


1、楼层怎么分割,哪些楼层是产品部门控制,哪些楼层是运营部门控制,每个楼层显示哪些内容,设计师需要根据每个楼层的重要性,去定义屏占比


2、哪些模块需要首屏曝光,哪些是需要第二屏曝光,依此类推,这个至关重要,设计师就要考虑各类机型适配问题,比如iPhoneX一屏能显示下的内容,在其他手机未必能显出来,这样会直接影响曝光,导致数据不好(等着背锅吧~),严格来讲要根据实际用户使用机型占比去定义首屏显示的内容。


3、每个模块内容的信息层级,明确信息优先级才能结果为导向去做交互布局和视觉呈现,这时候就是你发挥的时候,对比、亲密关系、留白等等,都可以上了。






这里结合PP微助手的一些改版优化(非全套),分享一些改版思路。


PP微助手改版思路解析


项目背景:PP微助手是取代电视遥控器一部分功能开发的一款小程序,核心需求有几点


1、账号统一,PPTV时代的用户,大多都是使用的PPTV的账号,为了方便管理苏宁易购账号体系,会引流把PPTV尚未升级的账户统一升级合并至苏宁易购账号。

2、投屏功能,看影片终端还是以电视机为主,所以只做投屏,不做在线播放功能

3、智能语音,结合苏宁小biu智能语音系统,可以和电视机语音互动,实现交互功能

4、会员业务,移动端开通会员比电视端更方便,同时可以用一些运营手段促进用户开通会员

5、推送活动,电视机打开频次不如移动端,推送活动给用户,移动端可以实时看到



电商行业通常会把用户分成“大明”、“笨笨”、“小闲”三大类用户,在视频类产品,绝大多数用户都是“小闲”用户,来平台都是找乐子打发时间的。




思路一:架构改变(产品思维):


PP微助手本来就是辅助电视机的,用户觉得用遥控器操作麻烦才会选择用小程序操作。在设计的时候,把用户当成是一个并不想动脑子并且很懒的傻子,产品设计越简单越好,否则用户干嘛要用小程序,遥控器挺好的,遥控器的大多交互都已经习惯,也没啥学习成本。






从用户角度分析,进入小程序无非就是找片源、看片以及看片过程中的一些基础控制操作(播放、暂停、快进等等),所以简化了产品整体框架,从原来底部5个tab(首页、片库、遥控、搜索、我的),改为3个tab(首页、遥控、我的)。产品呈现给用户的样貌更加简单直观,也相应的培养了用户心智,让用户对PP微助手这款小程序有个基本定位。





思路二:楼层分割(运营思维):


首页改版前,按照iPhoneX的尺寸,首页第一屏也就曝光了3个分类,而且下滑到底总共也就几个分类,片源的曝光度不高,banner呈现也相对普通,就是那种正常电商类头部banner。同时交互成本也高,要点击“更多”才能看该分类影片的全部列表,要知道多一步操作就会多损失一部分用户转化。


改版后,针对第一楼层推荐影片采用电影宣传时的大海报样式,视觉焦点更强烈,同时曝光也更强烈一些,你去电影院的时候,看到的电影宣传海报,大多都是这类竖版的,用户已经有一定的心智模型,所以在这里采用竖版更为好一些。这些推荐影片在这里也作为“hook”,后面会讲。当然像电商类产品,首页需要考虑严谨的屏占比,这类尺寸肯定不合适。


第二楼层是影片的分类,采用文字tab左右滑动的方式,这种分类方式虽然没啥设计感,也普普通通,但是在一个分类众多的产品里,这种处理方法相当不错。减小了楼层的冲突,也提高了内容的曝光。像腾讯视频、爱奇艺、优酷,分类tab都是吸顶固定的,很直观的传达给用户影片信息。下拉的时候,这里采用feed流,用户在交互习惯上,连续操作时,对同一种交互会有惯性和依赖,上滑时查看更多影片,能满足用户的预期,也不会因为调整新的交互(上述的点击跳转查看更多)方式让用户反感。在视觉形式上,采用了横版的样式,是为了和第一楼层形成对比,也是为了节省屏幕空间,能曝光更多的内容。二楼的影片内容也可以分布一些“hook”



搜索也是一种用户找片源的方式,后面再讲,这里要考虑到流量分发的情况。





思路三:引导用户(运维思维)


按照福格模型B=MAT,完成行为的三要素:动机、能力和触发器。



用户进了影片详情,说明已经有动机了,这时候需要抓住机会,按照产品需求可以完成两个行为目的,一个是让PPTV账号升级成苏宁易购账号,二是转化成会员用户。


这里要看一下进入详情的数据,是“hook”进来的用户多还是非“hook”进来的用户多。如果是“hook”进来的多,说明用户主观意愿不是很强,这部分用户可能会流失,如果是非“hook”或者搜索进来的更多,说明平台用户主观意愿更强,有较高的粘性,更容易促进会员的转化。



对平台来说,希望用户进来完成两条路径:


1、未登录的用户,点“推送”和“开通会员”按钮,进入下一步登录或者升级账号流程。当然这一步会流失用户,部分用户会反感登录这种操作。


2、已登录的用户,可以快速推送影片,完成自己的看片目的,如果是会员影片,这里就需要用户先开通会员,当然只是引导,还会有一部分用户不想开通会员,选择离开。





防止用户过多的流失,就需要平台一定的干涉,加强登录或者开通会员的意愿,可以从以下几点入手:


1、沉浸式体验,进入详情,头部区域自动播放影片花絮或者预告,快速让抓取用户眼球,增加下一步操作的意愿。

2、醒目的豆瓣评分,“hook”影片选择一些评分高的,用户针对豆瓣评分已经有一定的认知,评分优质的影片,用户更有意愿观看,更容易促进下一步动作,提高会员的转化率。

3、各类标签,比如:首播、独家、会员免费、会员半价、4K高清等等,能清晰定位影片,捕捉各类用户看片心智。

4、会员相关信息展示,未登录的提示“登录领券、限时活动等”,非会员提示“会员权益、开通会员的利益点等”刺激用户。



思路四:优惠券吸引用户(运维思维)


改版前优惠券和体验券在不同入口,流量分散了,券的目的就是要让用户去使用,需要缩短路径,更直观的展示给用户,能让用户快速做决策。如果券种类多的话,还需要区分各种券样式,需要让用户快速定位想使用的券。

其中已使用和已过期的券对用户来说就是已经没用的券,并不需要再用单独的tab分类,并且弱化处理。因为PP微助手会员券相对比较少,不像电商一样,会送很多商品券,所以用最简单的形式展示给用户就行。


值得注意的一点,不是说已过期的券就没用了,如果运营把控好节奏,发券有一定规律,用户看到过期的券会有一定的挫败感,就会经常来关注券。“废券再利用”也能增加用户的粘性。针对快过期的券,必要时候可以做二次提醒,给用户造成紧张感,会激发用券欲望。


说服用户下决定,一般从以下三个点去考虑:时间紧迫性、暗示稀缺性、后果恐吓性







流量分发和流量承接



产品的流量来源有很多,除了自身用户进入产品的流量,还有线下广告、线上广告、分享链接等等各种来源。目前主要的流量分发方式包括:搜索分发、算法分发、社交分发、人工分发、付费分发。PP微助手主要应用算法分发、搜索分发、人工分发。




先讲一下“hook”,在电商里是“钩子商品”,这里我把“hook”当做是“钩子影片”,运营精准推荐的一些“hook”,会取到不错的转化效果。



用户在产品内的行为路径是不可控的,一大波流量进入首页,每个用户都有自己的目的,所以需要对用户进行分流。一部分用户去了搜索,这类用户目的很明显,知道自己想看的影片名称,这部分就是搜索分发的流量;一部分用户被“hook”勾走了,"hook"激发了用户的看片动机,这部分就是人工分发的流量,需要运营去干预;一部分用户在不停的浏览,在浏览过程中找自己的影片,产品会分析用户行为,显示千人千面的首页,这部分就是算法分发的流量。


有流量分发,那必然就有流量承接,流量承接都是相对流量分发的,在电商产品里,站内的流量承接一般都在商详,以及对应的后置链路(订单确认、结算等等),从各渠道进来的流量,最终汇总在商详。在商详,会突出各种利益点和产品自身优势去刺激用户下单。至于利益点,活动时候的各种优惠信息就是典型例子,产品自身优势,比如:淘宝的先享后付、京东有京东物流次日达等等。在PP微助手这里流量承接就是影片详情以及后置链路会员套餐页,具体可以看上面的“思路三”的分析,怎么去承接流量,怎么去促进转化。

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

文章来源:站酷 作者:胖冷不冷

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档