首页

从功能、交互和UI看,如何进行数据表格的设计

周周


表格和网格一直是产品和后台面板的重要UI组件。然而,即使到了今天,也很容易找出设计不当或用户体验不好的数据表。

 

今天我们邀请了 Gil Bouhnick ,来跟大家一起聊一聊「如何设计出一个可观的数据表」。

 

接下来,就进入正题吧~

 

我使用过 30 多种 SaaS 工具和 SDK ,经常用它们的后台面板看数据,观察到了一些问题并做了反馈。实话说,它们在UI设计和基本功能上,对表格的展现形式还挺糟糕的(虽然它们都是很好的Saas产品)。


鉴于我开发使用表格 20 年的经验,决定为大家来总结一下最基本的处理表格的UI / UX规则了。

 

本文将从功能、UI设计美观性,这三个方面来阐述。



数据表设计之功能


1.从排序和筛选开始: 


是的,我也知道排序和筛选很烦人,我也讨厌他们,但必须先说它们。除非你打算做一个不到十条记录或者类似情况的精美表格。

 1.png

排序和筛选不仅是可用性或易用性的功能,更是摘要数据的关键:了解趋势,比较记录,查找特定值,没有排序和筛选就无法完成这些工作。

 

如果添加基于列的筛选(如日期,布尔值,字符串等元数据)成本太高,那么可以从更基本的内容开始筛选,例如现代搜索框或一些常用的硬编码。


2.确保列的大小可调整


这是一种查看信息的方法,无需深入研究每条记录。

 

不管你的列宽有多大,也不要将列表固定住,因为有时候用户需要进一步扩展。

 2.png            

3.允许列重新排序 


对于大型表格,不能一种大小适用于所有情况

3.png

通过重新排序列,用户可以设置符合它们特定需求的表格。这个相对小的功能可以减少混乱,并节省一些来回滚动。

 

这时,列的名称体现了大量信息。重新排序列能够使用户可以专注于特定区域并理解小块信息。

 

4.内联的编辑


有许多用于编辑单元格的UI解决方案:内联框,弹出窗口,可扩展节等。

 

我不认为上面的方案是最佳的,因为它依赖于功能、数据类型、使用案例。从用户角度出发,我最喜欢的方案是侧视图(快速视图)。

 4.png

一旦选择一个项目,它就会从侧面弹出的方法。


这个方案,我最喜欢的是它可以保持上下文(与弹出窗口不同),易于使用,即使是在垂直滚动视图中显示大量字段的情况下也效果良好。


数据表设计之交互设计

 

5.小屏幕设计


当然,大显示器看表格,设计和开发都会很爽,但是还是有人在用笔记本电脑或iPad!他们又做错了什么!/手动狗头

 

不停的滚动、缩小的列、隐藏的文本,这些都会干扰用户体验,所以一定要在小屏幕上验证你的设计,并且尽可能使用上一段时间去切实体验用户使用情况(而不是随意测试)。

 

如果确实很糟糕,你可能需要在解决问题上发挥自主创造力,不过前提是你很了解它。

 

6.彩色交替行 


使用大型数据表时,很容易丢失。

6.png 

斑马纹的表格可以帮助用户保持其位置,但是彩色的行必须非常浅,否则会引起误导,看起来像选定的行。


使用浅色时,应该将所有内容设置为浅灰色,避免使用黑色线条和深色边框。

 

7.使用固定表头和“冻结”列锚定一些标识符

 

我认为在任何屏幕上显示大量数据时,表格都应该能正常浏览。

 

要浏览数据,用户就需要经常滚动,这意味着需要一些锚点来辅助:

 7.png

  • 向下滚动时,列标题必须固定(这是最基本的)

  • 第一列应该被锁定(MS Excel和Google Sheets称其为“冻结”),因为,当你水平滚动时,需要该行联系上下文。 

  • 一个全行选择选项,用于在水平滚动时标记重要行。


8.设置固定的行高


表格和网格是体现结构化信息的,但是,当表格的列宽、行高不同时,就会变得混乱,信息也就会变得没有体系。

 

因此,为了整体的可用性和美观性,我觉得不管内容如何,所有行都应具有完全相同的高度。

8.png

为了更好地支持多行文本块,请考虑以下事项:

  • 用换行替换为空格,并将整个文本变成一行(通过调整列宽的大小)

  • 将(所有行的)行高设置为2行而不是1行(可以解决某些情况)

  • 使用工具提示(可以用,但是最好不要用)

  • 通过单击行来展开/折叠(刚需)

  • 采用浮动侧视图显示所选行的详细信息。


数据表设计之UI


美学设计可以带来更好的使用感。

 

以下是通过简单的UI设计修改来消除杂乱并提高内容可读性的几种方法:


9.增加单元格填充 


使用空格。

 9.png

加载信息的表,正是用户想要看到更多空白的地方,即使这会花费他们一些额外的滚动时间。         

10.消除不必要的边框


一旦数据结构良好并且留有空白,就该摆脱那些多余的边框,或者让边框线条变得超细且颜色浅。

  10.png

文章来源:优设网    推荐:墨刀_MockingBot


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




助力体验设计的10个方向

资深UI设计者


文章来源:站酷 作者:
再次微笑_

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

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

B端典型表格设计

周周


什么是表格?

表格页是公认为展示数据最为清晰和高效的形式,它的信息密度极高,就像是一个家庭衣柜,里面很多抽屉,我们需要把衣物整洁摆放收纳,提高空间利用率。

表格页由三个部分,如下图所示:

一、数据查看

数据查看可通过四个维度去自检设计是否合理,分别为信息降噪、呼吸适中、高效易读、详情查看。

1、信息降噪-内容

通过对表头内容删减,我们一眼就可以看到表格的重要信息,从而帮助用户能快速进行数据决策。因此,列数控制在7+-2,列表表头展示更为关注的数据,更多信息在详情中展示。

另外,如果不同用户想看到的信息侧重不同,我们还可以做自定义设置项,让用户自己去选择想要看到的表格内容。

用最少字数给表头做精简,精简到少一字不可。

另外,当遇到少一字都不可的长标题,我们可以定义专有名词,并且给一个解释专有名词的icon,便于第一次使用的用户易于理解。

2、 信息降噪-视觉

去掉不必要的分割线和斑马纹,用对齐和间距来区分列和行,可以鼠标滑上去给斑马纹,增强交互体验。

分割线的样式尽量轻盈,不要抢视觉,突出内容。

去掉不必要的装饰和颜色,为了防止视觉负担,少用面性图标,使用颜色保持克制,删除如果不是点击即可删除,可以不用预警色。

不要出现衬线字体,比如宋体,保持字体统一

3、 呼吸适中-单元格

定义单元格高度。字号、行高、上下间距进行规范,这里有一个比较常见的规范,将字号设为N,那文字行高就是

1.5N,上下间距为1.2N,单元格高度=内容高度+上间距+下间距。

4、 呼吸适中-列宽

我们将首列和尾列定义为N1,列与列之间定义为N2,随着页面收缩和拉伸,N1保持不变,N2自适应变宽变窄,这样页面会看起来会更均衡,这样会显得有呼吸感。一般定义一个最小值,当表格宽度大于页面宽度时候,固定首尾列,左右滑动

5、 高效易读-对齐方式

标题和内容一般采用左对齐,更高效的浏览顺序,有长短不一的数字时,右对齐方便比较。操作项一般放在尾列右对齐。

6、高效易读-不做无意义留白

当数据为零时就写上“零”,当没有数据时候就写上“-”。比如开发取不到的后台数据,我们就可以给“-”作为显示,如果得到的数据就是零,我们也要让它显示出来。

7、高效易读-选择合适的翻页器

选择合适的翻页器,利用分页可以缓解服务器的加载压力。无限浏览如果数据过多很容易使页面崩掉,使用功能较为强大的翻页器,每一页默认10行以上,减少翻页次数,增强用户体验,给出默认行数后,可以让用户自定义每页行数,相比跨屏翻页,向下滑动更便利。

8、高效易读-收起低频操作项

超过四项操作项收起来,可以用图标指引下一步操作。关于哪些可以操作项可以折叠起来,可以与产品经理沟通收起低频链接,或者埋点一个月时间查看点击量也可以做出决策。

9、高效易读-默认行数

当单元格内容长度不固定的时候,定义好内容的宽度和行数以及字数,超出显示的字数可以用省略号代替

10、高效易读-行的排序

默认最近创建的在表格中第一行显示,使用户感知最新情况。也可以带排序的表头,让用户自定义排序。

11、详情查看-入口

入口可以在操作里加详情,也可以把发起人做成可以点击样式,跳转详情,并且可以避免视觉干扰,也就是降噪,当鼠标Hover上去时候,发起人才显示出跳转色,提示可点击状态。

12、详情查看-交互方式

第一种是用弹窗的形式。第二种是第一种的延伸,当内容过多时候可以考虑抽屉样式。这些交互的共同有点就是没有脱离原页面。当详情内容较多且需要编辑时候,我们就考虑跳新页面,使用新页面进行承载。(这里有个细节,新开tab页可以打开多个详情页,如果覆盖原页面则只能打开一个详情页,并且不能同时查看原页面和详情页。所以我们要根据具体场景、业务需求去设计)

二、数据过滤

数据过滤由搜索,筛选和标签页构成。

1、搜索

搜索可分为模糊搜索和带标签的搜索。工作中常用的搜索为模糊搜索,优点是只要有相关的内容都会搜索出来,减少了精准搜索带来的记忆负担。缺点是容易把不相关的信息也带出来,例如搜索手机号,把相关编码也匹配了出来。带标签的搜索优点是搜索匹配精准度高。缺点是每次只能对单一条件进行搜索,当用户要搜索的时候都要去切换选择信息,多了一个步骤。另外,在实际工作中,可以通过埋点或者调研,如果搜索框搜索手机号频率较大,我们可以把手机号设置为默认选项。

2、筛选

筛选框可以分为下拉筛选和平铺筛选。下拉筛选的优点是空间利用率高,起到了很好的收纳作用。缺点是无法直观看到所有筛选项。平铺筛选优点是操作效率高,筛选项一目了然,支持输入更多筛选条件,可以自定义输入。缺点是空间利用率低,不适合选项太多的情况。如果用户点击其中一个选项概率最多,我们就可以将点击率高的一项作为默认项,然后选择第一种下拉筛选框。如果用户点击每个选项概率相等,在空间允许情况下我们可以平铺出来。

当筛选项过多时,信息排序应是用户目标优于业务逻辑,即排序应该考虑用户的使用习惯。例如当用户查找订单时候,第一反应都是搜索框输入,而一般通过价格过滤较少的应该放在末尾。

当然,我们还有更多优化空间,当筛选项过多时,我们可以默认折叠低频筛选项。折叠哪些筛选项还是得基于用户习惯,可以通过数据埋点或者用户调研得到用户使用场景。

当通过数据埋点或者用户调研发现绝大多数用户只需要用到搜索项,那么我们就可以只保留搜索框,其他选项全部折叠到高级搜索里面,当点击高级搜索时候出现一个弹窗,既可以保留更多筛选内容,又可以使页面不会看起来很拥挤。

(当弹窗内容选择完毕时候,高级搜索按钮会呈现高亮颜色,未选择更多筛选内容时候则呈现默认态。)

3、标签页

标签页是比较常用的数据过滤方式,切换样式包括基本样式、卡片样式以及胶囊样式。一般和时间、状态的流转有关。

同样我们可以通过数据埋点或者调研,将用户最关注的选项设置为默认选项,减少用户的选择,提高用户体验。例如下图,用户更关注的是销售中的商品,即将到店的客户,以及即将发货的商品,所以我们将这些选项作为默认项。

三、数据操作

数据操作从控制范围可以分为单行操作、批量操作和全局操作。从操作属性可以分为新增数据、编辑数据和删除数据。

当从产品那里拿来一个原型图堆叠很多操作项,我们就可以根据控制范围来区分判断,从而明确摆放位置。单行操作可以放到表格里,批量操作根据亲密性原则放在左上方,这样可以离打勾矩形近一些,如果有利于用户操作,也可以放在左下方。全局操作则可以放单独一行,使得层级更加清晰。

调整后,我们发觉虽然解决了多个操作放一块的行为,但是层级还是不够清晰,我们可以通过割裂板块或者板块颜色不同来调整,使得识别性更强。

后记

B端设计强调的是在好用的基础上让页面变好看,所以更考虑用户体验。所有设计方式不局限与一种,只要操作上是顺手,业务上是合理的,都是优秀的设计。如果一个页面占据半屏都是筛选项,那么我们就得好好反思,因为所有筛选项不可能都是高频操作,接下来就需要去做数据埋点并进行页面优化了。另外,一张只有筛选项和表格的页面,表格数据查看区域建议占整个页面的百分之六十到百分之七十,这个时候浏览起来是比较舒适的。





文章来源:UI中国    推荐:最多三分糖


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



实战经验!如何做好网页后台的表单和表格设计?

周周


一个完整的后台,由菜单/导航、数据/图形展示、表格、表单、控件/组件以及弹窗等构成,下面跟大家分享后台中的表格和表单的设计细节。

当接到一个全新的网页后台项目时,首先确定设计风格,然后考虑这个后台尺寸是做居中固定式,还是全屏响应式。全屏响应式的网页设计,除非有规定,否则你可以选择任意主流尺寸作为基尺寸来设计网页。当然,不管选择什么尺寸,都得基于做好一个后台而开展工作。

如何定义一个后台是好的?领导说好,用户说好,你自己也觉得好,那应该就是好的。大部分情况下产品已经定制好了每个功能模块,UI上只需要对着原型加以美化,如果你是这样做的,那么做出的东西一定会让人觉得有问题但是又不知道问题在哪里,总是想让你改。

跟产品经理好好沟通,他们只是把功能模块设计出来而已,并没有设计这些模块如何呈现,如何操作,如何结合,如何分类等等。交互上在后台设计很重要,如果有专业的交互设计师,这些可以交给他们,毕竟,交互设计的收入比UI要高。然而在很多中小企业,产品原型直接给到设计是很常见的。当缺少专业的交互设计时,不要让产品觉得我们只是按照他们的原型做美化,那跟美工有什么区别,不是看不起美工,美工的全程是美术设计工程师,很高大上的职称,但是大家还是不太愿意这样被称呼吧,可能觉得头衔套太大压力会很大吧。事实上,UI本来就应该具备基本的交互技能。

风格选定是很客观的,需要经过产品经理/领导确认,如果他们很相信你的实力,你得说出足够充分的理由,为什么要选择这种风格,而并不只是看起来更高大上或只是个人喜欢。

本人对后台网页设计的风格理解,大致可以分为三类:纯白背景风,轻淡背景风,深色背景风。在后台开始设计之前,你最好先选定其中一种风格,因为后面的所有元件的设计,都得基于这个风格来设计。刚刚好,在早些时间就已经发布了一个后台的三种风格界面设计的作品,大家可以看出每个模块的搭配和区分:

纯白背景风:线框/轻淡色(灰)背景(文字一般采用黑色)

实战经验!如何做好网页后台的表单和表格设计?

轻淡背景风:纯白色块背景(文字一般采用黑色)

实战经验!如何做好网页后台的表单和表格设计?

深色背景风:带有透明度的纯色背景(文字一般采用白色)

实战经验!如何做好网页后台的表单和表格设计?

设计过程是很主观的,所有设计参数都取决于设计师,但是要严格按照设计规范,并且让所有设计看起来和用起来都是合适的。

全屏响应式+轻淡色背景风是目前很主流的设计,也是很保守和安全的设计。对于轻淡色的HSB色值,可参考:H:0-360;S:0-5;B:90-97,当然没有绝对大部分情况用的浅灰是最多的,如H0;S0;B93-95。

以下将依据这个设计风格做例子展示。

一个完整的后台,由菜单/导航、数据/图形展示、表格、表单、控件/组件以及弹窗等构成,我把这些称为元件。这里主要分享的是构成后台中的模块和元件设计中的细节。下面重点跟大家分享表格和表单的设计。

你应清楚的是

为了避免在设计后台时一个人在YY,请保持左跟产品沟通,右跟前端沟通,这点非常重要。或许很多朋友在接到项目的时候不知道从何做起,会在网上寻找一些相关素材,然后会看到很多很炫的风格样式,像是各种各样的数据/图形展示,各种各样的统计曲线图,还有各种各样的展示动效,真想拖到自己要设计的后台。

如果合适当然可以,然而,很多情况下,统计分析一类的图表设计,产品已经有很多现成套用的模板,你可以做的很炫,但前端不一定会按照UI效果图来制作。从技术上来说,没有前端实现不了的效果,你真的不必怀疑前端的实力。所以,保持设计跟前端的良好沟通,更能提高工作的质量和效率,并且,很多时候口头/文字描述如何展示,是淡入淡出,还是弹出等等,前端是能理解的。通常地,做动效只是产品的一种展示,而并不是产品的本身,就当自己练手做动画吧。

简洁又灵活的表格

一个典型的表格(table)包含标题(表头单元格th),内容(标准单元格td),通常都是一行行(tr)展示。设计时,应该将标题和内容区分,比如标题文字加粗/颜色加深/字号加大,或标题背景加深。因选择淡灰背景风,一般用白色块区分的原则,表格设计也尽量不使用线框,然而一行行的标准单元格如果都是白色的就不便于预览,因此可以隔一行给背景设置比主背景更淡的背景。标题和内容一般有两种对齐方式,居中对齐,居左对齐,整个站的列表只选择一种对齐方式保持一致性。为了更简洁显示,我们还可以把每一列的间隔线去掉,但并不意味着间隔不存在。每一列的文字都不要贴边,给前端标记间距(内间距padding)值,告诉前端鼠标点击表头单元格的空白地方仍然可以拖动该列的宽度,拖动宽度时保持每一列的最小宽度并且标题仍然完全展示。

我们都遇到过这样头痛的问题,当列表字段太多,一屏无法完全展示,这时应该怎么做?给表格设计一个左右滑动的滚动条?如果内容真的太多并且已经确定,这也未尝不是一种办法,但是,重新设计过表格的字段或许会更好,这个时候应该跟产品好好沟通了。有以下方法:

  • 减少不必要的文字(如下图中表头的“全选”去掉)。
  • 缩略内容或者用…省略后面内容,鼠标经过出现更多内容(如时间可以缩略后面的时分,鼠标经过出现具体时间)。
  • 将不重要的列表隐藏,表头右边设计一个>>按钮,点击跳到隐藏的列表,点击以后表头左边出现一个<<返回默认表格的状态。

实战经验!如何做好网页后台的表单和表格设计?

因为每个列表的宽度是可以拖动的,我们不能决定其固定的宽度,但每一行的高度可以设置一个值,建议所有元件的高度、宽度、间距的数值参数都设置为偶数。

如果列表的数据很多,一般都会设计page控件,但是也有一些列表会设计点击加载更多,或者直接滑动滚动条加载更多。另外一种情况更常见,即设计固定高度的列表,一页最多展示5/10/20…条数据,不管多少条,它的高度都是相对固定的。然而有时候数据太少只有一两条,这个时候仍然要固定默认最多展示条数的高度,如图:

实战经验!如何做好网页后台的表单和表格设计?

那么问题来了,在响应式设计当中,可没有什么参数是固定的值,一般都是用百分比来设置。因为默认显示的数据条数在任何宽度的情况下仍然保持不变,因此当列表宽度缩小时,内容出现换行会增加高度而拉高整个列表的高度。值得注意的是,当其中一条数据的内容有出现换行而又有其他数据没有出现换行的时候,每一行的高度都应该按出现换行的且最高的高度保持一致,并且内容仍然保持垂直居中显示。另外,当前端做成这种响应式的列表时,一般不再让鼠标拖动列的宽度了。

同一组数据的不同宽度显示

实战经验!如何做好网页后台的表单和表格设计?

当宽度拖到第三种情况,按钮也出现了换行,那每一行的高度都应该按照这个高度保持一致,即使有一些数据只有一个按钮/地址并没有出现换行,如图:

实战经验!如何做好网页后台的表单和表格设计?

当然,如果你不想让内容出现换行,就可以用上面说的那三种方法来实现了。

不要再说为什么别人做的表格那么高大上,明明自己做的效果图还挺好看,为什么实现出来却那么丑,当你了解这里面的各种参数和逻辑,并且很好的跟前端沟通,参照以上规则,不管再复杂的列表都可以做的得心应手并且得以实现。

整齐并带有交互功能的表单

在后台设计中,表单出现的频率并不低于表格,甚至可以说几乎所有类型的网页都会出现。比如登录注册、信息录入、搜索、选择器等等。常见的表单有输入框、普通按钮、开关按钮、单选框、复选框、下拉菜单。

一个输入框,通常有标签名称label、提示信息placeholder(输入信息后提示文字消失)、初始值value(需手动删除)。如果是必填表单,在适当位置(标签的前后,输入框后)加上红色*号(或其他符号)。

实战经验!如何做好网页后台的表单和表格设计?

一些有字数规定的输入框,可以增加一个剩余字段提示

实战经验!如何做好网页后台的表单和表格设计?

事实上,在设计表单之前,我们就要先对表单的标签进行优化,标签字段尽可能的简约。每个组的表单,标签都必须是对齐的,输入框/选择框也应是对齐的。当这个组的表单的标签字数较少并且较对应时,可以采用左对齐的方式,并且最长标签的名称离输入框有margin值。

实战经验!如何做好网页后台的表单和表格设计?

另一种情况,也是更经常遇到的情况,当一组表单的标签很多时,某些标签字段不能更好的简化,标签的字段都不对应,这个时候可以采用右对齐的方式,这种方式更灵活。

实战经验!如何做好网页后台的表单和表格设计?

当一组表单的标签太多时,请跟产品沟通并对其进行分类。

实战经验!如何做好网页后台的表单和表格设计?

有些表单是有逻辑/顺序的,比如地区的选择、出生年月与生肖/星座的对应等等。例如,在选择省份之前,市区是不可操作的,在UI上做灰度显示不可操作。除了灰度代表不可操作,透明度也可以起到同样作用,这种方式也可以运用在按钮上。

实战经验!如何做好网页后台的表单和表格设计?

带有识别功能的输入框:

当输入有误时,尽量避免弹出框提示,可以直接对输入框设计不同的状态显示默认状态、选中状态、错误状态、成功状态。

实战经验!如何做好网页后台的表单和表格设计?

通过以上方式设计的一组信息录入型的表单设计,如图:

实战经验!如何做好网页后台的表单和表格设计?

表单的设计可以单独出一篇更详细的文章,还有筛选/选择器一类的表单,这里就不一一描述了。

友好舒适的弹窗

弹窗在后台的出现频率非常高,其强度一般分为三种,弱弹窗、强弹窗、重弹窗。字面上已经很好理解,轻弹窗,一般鼠标经过的时候即可出现而不用点击,比如提示说明,显示更多信息,鼠标移过后立即消失,它不会影响下一层(当前页面内容)页面的视觉效果和操作,因此这个弹窗通常会设计一个浮动带有阴影效果的框。

实战经验!如何做好网页后台的表单和表格设计?

而强弹窗则是一个对话框,它暗示你必须对这个对话框进行操作后才可以离开,如确认信息、错误提示信息。而重弹窗更像是一个新的页面,比如弹出的列表,详情,表单等。这两种弹窗通常是点击某一个按钮/经过某一个操作触发的。这两种弹窗一般会对下一层页面的视觉做蒙版处理,比如加上一定透明的黑色/白色,给下一层页面的内容做模糊滤镜等等。

实战经验!如何做好网页后台的表单和表格设计?

当然,这三种弹窗式可以结合的,针对不同场景使用不同的弹窗设计这点非常重要,这直接关系到用户体验效果。你是否可曾遇到过使用一款产品时,动不动就弹窗,并且需要去点某一个按钮才可以关闭。

任何一种场景在设计上都可以得以解决,什么情况下使用什么弹窗设计,或者有时候必须使用强弹窗,但是又不想让用户操作关闭,我们可以设计几秒后自动关闭,或者点击弹窗以外的区域直接关闭。

弹窗还有两种主要的表现形式,一种是顶部有关闭按钮,另外一种是直接点击确认按钮或者读秒关闭。在保持规范性的同时,尽量避免按钮功能的重复,比如一个提示信息必须让用户点击确认按钮才可以关闭,那么就使用没有顶部关闭按钮的设计。对于重弹窗,一般都会采用顶部有关闭按钮的设计。

实战经验!如何做好网页后台的表单和表格设计?

弹窗并不是后台的专利,它在移动端更高频率的出现,例如活动页面的弹窗,趣味性就显得更重要了。

总结:

这篇文章主要跟大家分享的是,当开始网页后台项目设计的时候,保持跟产品和前端的良好沟通。确定风格后开始设计,并分享了3个主要的点:

  • 制作灵活又简洁的表格
  • 设计整齐并带有交互功能的表单
  • 选择友好舒适的弹窗

后台还有其他元件设计,欢迎大家共同探讨。




文章来源:优设网    推荐:程远


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



超多案例!B 端后台类产品的图表设计思路及方法

周周

随着大数据的兴起,数据价值的不断挖掘,图表作为数据呈现与分析的有效手段,正扮演着越来越重要的角色。我们在进行 B 端平台设计时也在思考:如何让图表清晰的传达信息,同时带来美观的视觉感受。

为了达到清晰传达和视觉美观的目标,我们结合实际项目,进行大量探索及思考,梳理总结了一套适用于 B 端后台类产品的图表设计思路及方法,涵盖了曲线图、柱状图、饼图、雷达图、漏斗图等各类常用图表类型。

超多案例!B 端后台类产品的图表设计思路及方法

图表视觉层级

图表能够承载大量数据信息,同时视觉元素较多,如果只是凭借设计师的审美喜好进行视觉设计,没有整体信息读取考量,可能会导致重要信息未能凸显,降低用户读取效率。

超多案例!B 端后台类产品的图表设计思路及方法

为清晰传达信息,进一步提升读取效率,我们采用元素重要程度与视觉强度相绑定的方法。依据元素重要程度,将图表元素分为三类,分别为“底层元素”、“中层元素”和“顶层元素”,并依据不同视觉强度分别设计三类元素。底层元素最弱,顶层元素最强。通过这种方法,梳理图表元素的前后关系,能够清晰把握元素视觉层次,保证信息传递效率。

超多案例!B 端后台类产品的图表设计思路及方法

1. 底层元素设计

在各类图表中,我们把辅助说明数据的轴线、刻度等定义为底层元素。为了减少视觉干扰,最大程度突出主图形,底层元素全部使用浅灰色进行设计。我们发现,当元素与背景颜色的明度对比在 1.2:1 时,人眼较难看到元素;当对比度在 2.0:1 时,视觉强度过强,易吸引用户注意力。通过元素视觉强度的调研及视觉尝试,最终确定元素与背景对比度在 1.6:1 左右,视觉强度偏弱但人眼能够看清的程度。以保证元素视觉不突兀,只在需要查看时可以被发现。

超多案例!B 端后台类产品的图表设计思路及方法

2. 中层元素设计

中层元素的内容包括数据图形、数据线段等承载主要数据信息的元素,是图表中表达数据的关键元素。与底层元素相比,中层元素采用更低明度与更高饱和度的数据色来表现,使元素从页面中凸显出来,保证可读性。同时在样式上适当加入渐变、描边等样式,丰富视觉层次,带来美观的视觉感受。

超多案例!B 端后台类产品的图表设计思路及方法

3. 顶层元素设计

我们把顶层元素定义为图表高亮信息,内容包括悬停样式、悬停后的详细数据说明等。在设计上为保证视觉样式突出,使用深灰色、强调色等强对比度样式,并辅以动画、投影等手法保证明显的视觉强调效果,保证顶层信息最有效的传达给用户。

超多案例!B 端后台类产品的图表设计思路及方法

4. 最终效果

通过层级梳理,并绑定元素重要程度和视觉强度的方法,设计后图表主次信息均按重要程度进行对应视觉强度的展示,让用户能够在第一时间接收到最重要的信息,提升信息读取效率。

超多案例!B 端后台类产品的图表设计思路及方法

图表排版设计

图表排版是指各元素在图表中的尺寸及布局等,对于 B 端后台类产品来说,不同排版对用户使用体验造成较大影响。如何建立一套合理的规范保证用户的使用体验?我们经过大量讨论推敲,梳理出一套针对 B 端后台类产品的排版规则,力求保证用户图表的使用体验。

1. 图表尺寸

图表尺寸指图表整体长宽高。在项目中我们发现不同尺寸的图表对数据展现效果影响巨大,例如巨量数据的图表挤在名片大小的区域例显示,这使得信息读取的效率大打折扣。为此我们收集并提取出“全貌概览”、“多角度环视”、“详情分析”三类典型场景,并制定了“迷你图”、“中号图表”、“大号图表”三类尺寸,针对不同尺寸优化图表的信息展示密度,以达到高效读取信息的目的。

“迷你图”尺寸最小,舍弃了 Y 轴等不必要信息,利用小面积展示最关键的图表信息,并控制数据密度,保证信息高效读取。

“中号图表”尺寸受限,限制坐标轴刻度数量和数据的密度,例如曲线图数据点不高于每 4 像素 1 个数据点,Y 轴坐标刻度不超过 5 个,以确保信息密度不过载,这类图表尺寸通常用在针对某大类内容进行多方面检视时。

“大号图表”尺寸最大,不限制数据信息密度,给予最全最详细的展示,这类尺寸通常用在数据详情页等详细分析场景中。

最后考虑到多图表混合排列时,饼图、地图等大面积填色图表,相较折线图等描边型图表,视觉感受更加膨胀。我们缩小了填色类图表的实际高度,保证多种图表混合排列时,视觉感受的均衡。

超多案例!B 端后台类产品的图表设计思路及方法

超多案例!B 端后台类产品的图表设计思路及方法

2. 坐标轴

坐标轴在图表中出现的频率较高,那么坐标轴常见的设计问题有哪些呢?

第一是横纵坐标轴的刻度出现过密情况。

如果坐标轴所承载的是连续数据(连续数据指可量化的,连续不断的,在区间内可任意取值的数据,如时间、金额、人数等),设计师可自行增减刻度数量以保证视觉舒适度。如果承载是离散数据(离散数据指不可量化的,无关联的,不可在区间内任意取值的数据,如分类、软件版本、省份等),可采取增加坐标轴缩放功能解决。

第二个常见问题是刻度的说明文字过长。

如果是 X 轴(横轴)文字过长,除了在可控范围内减少刻度,还可采取文字倾斜 45°~90°的办法(如文字全部为中文,可用竖排代替倾斜 90°),缓解信息过密看不清的情况。

如果是 Y 轴(纵轴)文字过长,需联合研发一起调整数据的单位,比如把“元”调整为“百万元”。

如果不能调整,那就要根据所使用的图表库有针对性调整。例如常用的 Echarts 图表、D3 图表等开源图表库,需要提前预估刻度文字长度并预留出来,否则刻度文字可能会被页面裁掉而不能完全显示。如你是用的是 AntV 等可自适应的图表库,则不必提前处理,图表库会自动按刻度长度进行整体调整。

超多案例!B 端后台类产品的图表设计思路及方法

3. 图例

图例作为图表中不可或缺的部分,在各类图表库中位置不尽相同,由于不同图表样式差异很大,图例的位置需整体考虑并适当布局摆放,但在同一产品或页面内,过于随意的摆放图例,会导致页面统一性较差,同时增加用户的浏览成本。我们团队所负责的 B 端商业产品矩阵,作为面向用户的产品集合,产品间联系非常紧密。过于灵活随意的图例摆放不利于用户对于图表的浏览。为解决此问题,我们基于业务特点,针对 B 端商业产品矩阵制定了图例布局指导原则。

我们以提升屏幕信息密度为目标,分析不同场景的页面排布,制定了顶部和右侧两种较为宽松的指导原则,供设计师在没有明确的更优方案时选用。

当图表是左右两端对齐的类型,例如折线图、柱状图时,建议将图例放置在图表顶部。这样能结合标题等其他元素进行统一排布,减少占用空间。当图表本身左右都有空余空间时,例如饼图,建议将图例放置于图表的右侧。也能够节省页面的空间。

超多案例!B 端后台类产品的图表设计思路及方法

数据色板设计

色板作为常见的数据表达手段,能够利用不同颜色明确体现分类信息、数值高度、状态信息等。但目前市面上鲜有专业用途图表的配色工具。我们经过大量探索尝试,梳理总结出图表色彩的两个关键维度:辨识度与统一性。既需要颜色间突出强烈可清晰辨别,又需要颜色整体能形成统一风格,以达到清晰传递和美观的目标。如何平衡辨识度与统一性,是我们遇到的难题。

超多案例!B 端后台类产品的图表设计思路及方法

1. 辨识度

辨识度在图表中有两方面:颜色与页面底色的辨识度,各颜色之间的辨识度。对于第一种,我们采用控制颜色的明亮程度来确保色彩辨识度,尤其对于黄色、青色等本身较亮的颜色,降低颜色的明度,确保在浅色背景下颜色可辨识。

对于第二种也就是各颜色之间的辨识度,通过实验发现单纯的颜色色相变化,例如红色与橙色的区分,人眼不容易分辨。所以采用了色相变化+明度变化的方法,即深红色与亮橙色,深蓝色与亮紫色等,这样用户能在第一眼就明确分辨,保证颜色间的辨识度。最终把颜色映射到色彩空间的三维坐标中,运用欧几里得距离公式测算颜色间的距离长短,来衡量各颜色间色差数值。颜色间距离越远代表色差越大,利用数据辅助衡量辨识效果。

超多案例!B 端后台类产品的图表设计思路及方法

2. 统一性

色彩统一性的作用在于确保图表整体风格一致,色彩搭配舒适,从而带来美观、统一的视觉感受。为达目的,我们首先提炼商业产品设计风格为明亮、强对比,其次把设计风格转化为色彩数值。经过实验,把颜色明度限制在 50%-70%,把饱和度限制在 75%-85%,并在区间内不断波动。这样既保证了色彩视觉感受的统一,各颜色间又能够有清晰的辨识度。

超多案例!B 端后台类产品的图表设计思路及方法

3. 颜色量化与工具

量化颜色,将色彩转化为数值,利用数值来验证设计师的「感觉」,能够保证方案合理性,保证设计质量。但通过尝试,我们常用的色彩模式均不能科学合理的量化颜色。通过查阅大量资料,我们最终决定以小众的 HCL 色彩模式来衡量色彩。其中 H 表示色相、C 表示饱和度、L 表示明度。HCL 区别于传统的 RGB 或 HSB 模式,它能够将人眼对颜色的感知精确的量化为数值,例如黄色相比蓝色明度更高,都能如实的反馈到数值上。也由于此特性,HCL 模式在诞生距今不到 20 年间,已被一些先锋设计师用于数据可视化的呈现中。

超多案例!B 端后台类产品的图表设计思路及方法

但是 HCL 作为小众色彩模式,目前设计软件鲜有支持,造成了 HCL 色彩不直观、不方便调色等的问题。为解决此问题,我们已初步完成智能配色程序,只需输入品牌色,就能自动生成图表色版,并在风格上与品牌色匹配,达到整体色彩的统一。我们也将一套调配好的色板及 HCL 实用小工具附在文末,帮助大家直观的查看和使用 HCL 模式颜色。

结语

数据价值就像不为人知的宝藏,隐藏在一条条枯燥晦涩的数据背后。而图表则是开启宝藏的钥匙,是发掘数据价值的强有力武器。通过对图表的不断探索优化,我们希望能够最大化数据的价值。通过图表,让数据最直观的展现;通过图表,让其背后的规律浮出水面被人探知;通过图表,让 B 端不再有难懂的数据。

附:色板及 HCL 工具

超多案例!B 端后台类产品的图表设计思路及方法


文章来源:优设网    作者:百度MEUX


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


数据可视化设计必修课(一):图表篇

周周


图表是数据可视化中最常用的一种表现形式,一定要吃透它。

随着互联网数字化越来越完善,数据可视化这个词的使用频率也越来越高,而图表是数据可视化中最常用的一种表现形式。无论是工作汇报还是后台设计,都离不开图表的使用。然而关于图表类相关的资料太零碎了,不成体系,对于初学者非常不友好,本篇文章我从图表的祖辈开始,把它都给挖了出来,希望对你有帮助。

什么是图表

图表的定义:可直观展示统计信息的属性,对知识挖掘和信息直观生动感受起关键作用的图形结构,是一种很好的将对象属性数据直观、形象地可视化的手段。

英文叫法:Chart。

用户对图形的敏感程度远远大于文字,所以产品就需要把数据信息可视化,用简单的图形表示出更多的信息量,而图表是数据可视化中最常用的表现形式。

接下来我们来介绍图表的具体构成及元素解析。

图表的构成

图表是由:标题、图例、刻度轴、数据展示、网格线、提示信息、水位线、时间轴组成,每一个元素都有它存在的意义。在实际使用中不一定非得把元素全部展示出来,精简化显示想要展示的内容即可。

数据可视化设计必修课(一):图表篇

图表元素解析

1. 标题

顾名思义,标题就是图表的名字,标题是必不可少的元素。标题的内容一定要言简意赅,不要太长,能两个字写清楚绝对不用三个字。

标题的常用位置有 3 个:左上角、顶部居中、底部居中。

数据可视化设计必修课(一):图表篇

一般情况下,标题字号 / 色值要突出一些,用户第一眼看到 chart 的时候,要清晰的看到这个图表是做什么的。

特殊情况下,如果需要对标题有额外解释的话,两种展现形式:

  • 增加提示图标;
  • 增加提示语。

数据可视化设计必修课(一):图表篇

2. 图例

图例的组成

颜色、名称、数值、单位。

数据可视化设计必修课(一):图表篇

图例的展现形式

圆形、开关、矩形、鼓包线、实线、虚线。

数据可视化设计必修课(一):图表篇

图例的位置

从左至右、从上至下。

数据可视化设计必修课(一):图表篇

图例的作用

  • 标识出每个颜色所代表的的类别;
  • 开启 / 隐藏数据显示;
  • 图例显示的数值一般为当前值。

图例的颜色选择

同一组图例中,不要出现相近的颜色,否则在图表显示中分不清彼此。

数据可视化设计必修课(一):图表篇

产品使用中,要规范图例颜色使用,一般分为两种:

  • 常用的图例颜色(颜色本身代表着行业中的某种含义),此类颜色需要是固定色值,无论哪个 chart 中,都是这个颜色;
  • 无特殊含义的图例,可以规范出一个图例颜色的使用顺序表。那些无特殊含义的 chart 可以按顺序使用图例颜色,图例整齐划一。

图例过多时如何展示

  • 如果图例可整合前提下,展示主要图例 / top n 图例,其他的图例做整合,增加个详情页来展示完整的;
  • 如果图例不可整合/省略,则需要给出足够的展示空间。

共用图例

如果多个 chart 的图例一样,可进行合并,减少冗余图例。

数据可视化设计必修课(一):图表篇

图例省略

如果 chart 中只有一个图例的话,可省略。

数据可视化设计必修课(一):图表篇

图例名称限制

根据不同使用场景,为了更好的展示效果,要给图例名称设置一个最大值,超过最大值后省略展示。

数据可视化设计必修课(一):图表篇

3. 坐标轴

坐标轴分为 X 轴和 Y 轴,常规情况下为 1 个 X 轴+1 个 Y 轴。不过特殊情况下也会用到 2X+Y 或 X+2Y。

数据可视化设计必修课(一):图表篇

刻度值代表的意义

  • 时间点:12:00;
  • 时间段:周一、周二。

数据可视化设计必修课(一):图表篇

坐标轴使用规则

是否带单位:

  • 如果刻度值的含义明确的情况下,可以不用带单位,比如:2018、2019、2020…;
  • 如果刻度值含义有歧义的情况下,必须加上单位(具体是统一一个位置加单位,还是每个刻度值上加单位,则需要根据场景来判断)。

数据可视化设计必修课(一):图表篇

对齐方式(常用,但非必须):

  • X 轴:居中对齐;
  • Y 轴:右对齐。

数据可视化设计必修课(一):图表篇

刻度值过多时如何显示:

  • 可选择规律性省略刻度名称;
  • 倾斜文字以显示更多的文案

数据可视化设计必修课(一):图表篇

刻度值的选用一定要是同一个规律,禁止同距离的刻度值代表不同数据。

刻度点的样式使用规则:

刻度的线朝外。

数据可视化设计必修课(一):图表篇

4. 数据展示

数据的展示是 chart 中最为明显的地方,可以说如果只显示一个元素的话,就是他了。

数据展示的使用规则:

  • 边界要清晰,不可虚化;
  • 多个数据同时显示的时候,要保证每个数据都能清晰的看到,可以采用透明度来保证所有数据的显示。

5. 网格线

网格线的作用

呼应坐标轴,美观度。

网格线的使用规则

  • 线的颜色要弱化,不要喧宾夺主;

数据可视化设计必修课(一):图表篇

网格线使用实线居多,尽量不用虚线。

使用场景

横、纵、横纵结合、无网格线。

数据可视化设计必修课(一):图表篇

6. 提示信息

通常情况下,提示信息用来标识出 chart 中重要点的数据信息,需要注意的是:重要信息尽量简化,信息量不要太大,言简意赅就好。

数据可视化设计必修课(一):图表篇

7. 水位线

根据不同产品的使用场景,有的时候会用到阈值,当达到某个阈值后,就会触发某种联动。这个时候就需要有个水位线了,它起到警示的作用。

形式有两种,实线和虚线,颜色的选取则取决于产品的警告级别。

水位线可以是一个,也可以是多个,视情况而定。

8. 时间轴

时间轴可以灵活地调节刻度值的上下限,从而更精确的看到自己想看的数据。

时间轴的功能及限制没有不是很复杂,所以就不过多解释了,需要用的话就用。

图表使用建议

1. 折线图 line

定义

折线图可以显示随时间(根据常用比例设置)而变化的连续数据,因此非常适用于显示在相等时间间隔下数据的趋势。折线图是通过线条的波动来表示数据的波动,主要体现的是数据随着时间的推移而变动的图表。

数据可视化设计必修课(一):图表篇

使用场景

常用于观察一段时间内数据波动的浮动变化,比如:一天内内存的使用情况。

使用建议

Y 轴刻度值选择要合理,当前显示的数据波动要最大化的显示;

数据可视化设计必修课(一):图表篇

重要节点可以单独做重点标注;

数据可视化设计必修课(一):图表篇

数据拐点要平滑,不要太锋利。

2. 面积图 area

定义

面积图和折线图比较类似,区别在于面积图把数据区域做了个面积划分,让数据的显示更加清晰。

数据可视化设计必修课(一):图表篇

使用场景

面积图展示尽量不要超过 3 个图例,否则数据多的情况下,数据的展示会特别乱,影响观看。

使用建议

面积区域要和折线的颜色用统一色系,不要换色系;

数据可视化设计必修课(一):图表篇

面积区域一般要比折线颜色浅一些,这样视觉上更加让人舒适;

数据可视化设计必修课(一):图表篇

如果多条数据情况下也用面积图的话,面积区域尽量使用透明度,否则有的数据会被遮挡看不到。

数据可视化设计必修课(一):图表篇

3. 柱状图 bar

 定义

柱形图,又称长条图、柱状统计图。用来比较两个或以上的价值(不同时间或者不同条件),只有一个变量,通常利用于较小的数据集分析。

数据可视化设计必修课(一):图表篇

使用场景

  • 柱状图分为横向和纵向两种展现形式;
  • 用于在同一维度下不同数据的对比,用柱状图更能清晰的对比出数据的差异化。

使用建议

柱状图的厚度不要是固定值,要做成自适应来应对不同尺寸的分辨率显示;

数据可视化设计必修课(一):图表篇

厚度与间距的对比要合理设计;

数据可视化设计必修课(一):图表篇

可使用小圆角,千万不要用大圆角,太丑了……

数据可视化设计必修课(一):图表篇

如果想要强调某个柱子的话,可以进行颜色区分,但是柱子颜色不要超过 2 个(同一维度下);

数据可视化设计必修课(一):图表篇

如果想要在柱子上显示数值的话,使用建议(下面的顺序为推荐顺序):

  • hover 的时候出现数值;
  • 数值默认在柱子上显示;
  • 数值在柱子顶部 / 右侧显示。

4. 饼图 pie

定义

饼图仅排列在工作表的一列或一行中的数据,它是有一个总和数据,方面查看每个类别分别占总数据的百分比的一种图表。

数据可视化设计必修课(一):图表篇

使用场景

  • 常用于做总结、年度汇报等;
  • 所有数据相加必须是 100% 才可用。

使用建议

  • 每个数据要使用单独的颜色来表示,不要有相同颜色;
  • 饼图中不能有负值;
  • 图例数量没有限制,但是如果遇到可以合并的图例,可以进行合并;
  • 饼图的开始点为 0/12 点位置。

数据可视化设计必修课(一):图表篇

5. 环形图

定义

环形图是由两个不同大小的圆叠在一起,切割中心部分得到的一种图形。

数据可视化设计必修课(一):图表篇

使用场景

  • 环形图有一个独有的特点,就是可以在中心圆的位置突出某一项指标的数值。
  • 它常用于做数据的监控,监控某一类指标是否正常。

使用建议

  • 环形图的开始点为 0/12 点位置;
  • 环的粗细要合理,不要太粗和太细;

数据可视化设计必修课(一):图表篇

环形图的两个圆要从中心对齐。

数据可视化设计必修课(一):图表篇

6. 堆叠面积图

定义

堆叠面积图是把数据面积按顺序逐步堆叠起来的一种图形。

数据可视化设计必修课(一):图表篇

使用场景

常用于不同资源中流量 / 容量的使用。

使用建议

  • 不要有重复的颜色;
  • 尽可能的把数据量按大小的顺序,由下至上的堆叠。

7. 堆叠柱状图

定义

堆叠柱状图是把数据柱状图按顺序逐步堆叠起来的一种图形。

数据可视化设计必修课(一):图表篇

使用场景

常用于不同维度下相同几个指标的展示。

使用建议

  • 不要有重复的颜色;
  • 按重要等级由下至上排序。

8. 非常用图表

上面介绍了常用的图表的使用建议,但是图表类型远远不止于此,还有很多非常用的图表类型,这次我先给大家列出来,如果大家感兴趣的话,我后面再写一期冷门图表的使用建议:

雷达图,散点图,K 线图,盒须图,热力图,旭日图,桑基图,树图,漏斗图,仪表盘。

数据可视化设计必修课(一):图表篇

常用的图表开源网站

1. echartsecharts

网站链接:https://echarts.apache.org/zh/index.html

数据可视化设计必修课(一):图表篇

2. highcharts

网站链接:https://www.highcharts.com.cn/

数据可视化设计必修课(一):图表篇

3. antv

网站链接:https://antv-g2.gitee.io/zh/examples/gallery

数据可视化设计必修课(一):图表篇

总结

Chart 是数据可视化必修课中最重要的模块之一,不可忽略。只有了解每个 chart 的定义及使用场景,才能在产品中用到最合适的那一个。



文章来源:优设网    作者:Luck gg


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



热门的手机用户输入设计模式

ui设计分享达人

对于任何手机应用程序,如果没有来自用户的一些初始和正在进行的输入,就不会发生任何事情。因此,手机产品设计师、开发人员和产品经理必须了解允许用户这样做的最佳方式。

虽然手机应用程序以及使用它们的用户通常是独一无二的,但是有许多常见的模式(新模式和旧模式)被用来解决这个特定的问题。


用户输入设计的6个目标


在我们深入研究模式之前,了解用户输入设计的六个主要目标是很重要的:

  1. 选择合适的输入和资料登录方法

  2. 减少输入量

  3. 设计有吸引力的数据输入屏幕

  4. 使用验证检查来减少输入错误

  5. 设计所需的输入文档

  6. 制定有效的输入控制


模式的概述


在记住以上设计目标的前提下,下面是我们在将本文中详细介绍的设计模式的概述,在我们的电子书《2014年手机用户界面设计模式》中有更详细的介绍:

1.智能键盘
2.默认值&自动完成
3.立即沉浸(或“惰性注册”)
4.操作栏
5.社交账号登录
6.巨大按钮
7.滑动操作
8.通知
9.显性控件
10.可扩展输入
11.撤销


1.智能键盘


Facebook记事本,Android联系人


问题
用户希望快速输入信息。


解决方案
当用户点击应用程序中允许输入信息的部分时,给他们与输入数据相关的键盘。这使他们不必在字母数字屏幕之间寻找正确的按钮,或者多走一步来访问键盘。这不仅方便了用户,而且还指示了需要从用户那里得到什么类型的输入。手机平台允许相应地标记文本字段,这允许在哪些按钮显示在更显著位置方面有一定的灵活性。


例如,在地址簿或拨号器中输入电话号码时,用户不需要完整的键盘。当他们点击这些字段时,数字小键盘就会弹出,而不是整个键盘,这样就减少了不必要的按钮,简化了操作过程。类似地,点击浏览器中的URL栏会弹出一个稍微修改过的键盘,其中“/”和“。com”按钮显示在空格键旁边,而不是符号键后面。通过连接到系统提供的这些智能键盘类型,你的UI可以根据用户当前尝试的操作进行调整。


2.默认值&自动完成

Skype, Flightboard


问题
用户希望快速完成操作。


解决方案
通过为用户提供预先填充的默认值或基于先前输入的数据的提示,预测频繁选择的项并使用户更容易地进行数据输入。这可以与自动完成功能相匹配,比如在谷歌Play Store搜索中,通过加速来显著改善用户体验。这种模式在标准化用户输入和在问题发生之前预测问题方面特别有用。例如,Skype会自动为输入的电话号码匹配国家代码。从用户的角度来看,这是有意义的,因为他们不习惯定期输入这些信息,但在这种情况下,这种匹配很重要,因为Skype是一个国际电话应用程序。


另一种实现方法是保存用户输入的最后一项,并在用户再次输入或搜索时显示这些最近使用过的项。例如,Flightboard在搜索框下面列出了以前使用过的位置,以避免用户再次输入。大多数地图或导航应用程序也采用这种模式,在搜索方向时自动输入用户当前位置,为用户节省几次点击,因为这是最常见的情况。


3.立即沉浸(或“惰性注册”)

Wunderlist


问题
用户希望在注册之前先尝试一下。


解决方案
越来越多的应用程序允许用户在任何事情发生之前——甚至是注册或登录之前——立即沉浸在应用程序中。


记住,他们一次只能做一件事,而且测试每个新产品的时间有限。随着应用程序的日益专业化,在扶持它们之前找到高质量的用户或客户越来越重要——他们可能会讨厌你的产品或很快意识到它不是他们想要的。向用户询问注册账户所需的信息可能是一件很困难的事情,而且会降低甚至是适合的访问者的注册率。在积极的方面,通过让他们立即体验你的产品,他们更有可能被吸引,因为他们能够在第一次体验时深入探索应用程序。这比我们接下来讨论的onboarding walkthrough UI模式更好,因为它向用户展示而非告诉他们应用程序如何工作。


对于Carousel或Duolingo等依赖用户数据来运行的应用程序来说,允许延迟注册是没有意义的,但Wunderlist或Houzz等应用程序可以允许用户在要求他们确认身份之前进入并使用该应用程序。通常情况下,注册会带来一些额外的好处,比如在Wunderlist中进行跨设备同步,或者在Houzz中创建一本想法书,这会让注册变得更有吸引力。延迟注册并不总是一个好主意,但是选择“注册前试用”可以很好地提高你的应用程序的参与度。


4.操作栏

Facebook Paper, Behance


问题
用户希望快速访问常用的操作。


解决方案
从应用程序的操作栏(或iOS术语中的“工具栏”)提供对重要操作的快速访问。虽然导航条主导了web和早期的手机应用程序设计, 但其他模式的使用,如折叠、滑出式工具栏和侧边栏、指向所有内容的链接、按钮转换、垂直的和基于内容的导航,产生了更简单的应用程序视图,用户可以专注于一级和二级操作,而不是二级导航。常见的操作有:在应用程序中搜索、共享和创建新内容。这个存留的菜单可以帮助用户熟悉UI,还可以通过专注于与用户相关的重要操作清除一些混乱。


5.社交账号登录

undefined

Beats Music, Flipboard


问题
用户需要一种更简单的注册和登录方式。


解决方案
整合社交账号登录方法,允许用户通过现有账户登录。这意味着他们少了一个需要担心的用户名/密码组合,同时,你也不必担心密码的安全性。Facebook、Twitter和谷歌是主要的OAuth登录提供商,根据平台和目标受众的不同,你可以在你的应用程序中提供所有这些或其中之一,而不是让用户建立一个他们可能会也可能不会在未来使用的单独的帐户。使用这个注册和登录模式也可以为你提供一些基本的关于用户的数据(当他们使用应用程序时,会自动填充数据), 同时,通过不强迫用户在刚下载的陌生应用程序中输入他们的详细信息,让他们更加舒适。这个简单的特性可以在很大程度上改进你的UX,因此这种模式正在成为一种期望。


6.巨大按钮

Tinder, Shazam


问题
用户希望立即知道他们可以采取哪些操作。


解决方案
理想的触屏点击目标大小可能是72 px,但是一些应用程序,像Tinder,也会给你巨大的按钮让你确切地知道该做什么, 无论你在什么位置,无论你在做什么,你都能很快完成操作——很难错过这些巨大的按钮,即使你没在仔细看。这在更简单的应用程序中尤其有价值,因为在这些应用程序中,用户需要执行的操作非常有限,因此更有理由让他们在各种情境中更容易地执行这些操作。例如,Shazam是用来看电视或听音乐的,它实际上只做一件事。对于试图在这种分心状态下进行多任务处理的用户来说,巨大的按钮是一个巨大的改进。


7.滑动操作

Carousel


问题
用户希望关注特定的内容。


解决方案
允许内容被滑动或移动。这为用户提供了一种非常直观的方式来处理屏幕上的信息。例如,谷歌中的“卡片”现在可以在你不需要的时候被滑走,以清理杂物;类似地,Tinder中的配置文件可以向左或向右滑动,以表示积极或消极的响应。这个模式与我们在导航模式中讨论的滑动视图不同。在这里,滑动手势被用于一项操作,而不仅仅是浏览。有些应用程序结合了两种滑动模式,比如Carousel,它可以让你通过将照片滑动到一边来浏览多张照片,也可以通过向上或向下滑动来分享或隐藏照片。邮箱推广了电子邮件客户端的左右滑动操作,允许你分别通过向右或向左滑动将邮件标记为已读或安排为待处理。Secret用让你发现新菜单的方式来让你发现新动作。向左滑动一个secret代表你喜欢它。


8.通知

LinkedIn, Facebook


问题
用户希望了解他们应该浏览的新活动或操作。


解决方案
通过标记新内容来突出最近的活动。这个模式有几种实现方式。例如,在标签上放置一个计数徽章是由iOS推广开来的,但现在这也可以在许多其他应用程序中看到,如LinkedIn、Facebook或Quora。Twitter在通知按钮上也这样做,但它在时间轴图标的顶部还有一个小点,以更微妙的方式指示新的活动。另一种显示通知的方式是在应用程序中使用一个向下拉的横幅来显示新活动。Facebook应用程序也能做到这一点,当新闻推送中出现新条目时,它会弹出一个小窗口。


9.显性控件

Secret


问题
用户希望快速访问那些二级的或仅与应用程序中的特定部分或内容相关的控件。


解决方案
清理杂物,让用户只在需要时才发现特定的操作。这些看不见的控件可以通过任何手势来访问——滑动、轻击、双击、长按等等(我们在手势模式中讨论过)。这使你能够将这些操作保留在屏幕之外,从而节省一些宝贵的空间。例如,Secret使用手势而不是可视控件。向右滑动,就会出现一个动作菜单,这是我们前面介绍过的折叠模式的简化版。在创建内容时,用户可以在背景上水平滑动或垂直滑动手指来改变背景的颜色和图案,或者在使用图片时,可以改变图片的亮度、饱和度或模糊度。没有其他控件允许你这样做——也不应该有其他控件。这种UI设计模式非常直观、清晰,你一定会看到更多这种类型的交互。Pinterest是另一个使用手势隐藏动作按钮的应用程序。长时间按下一个图像,就会出现一个按钮,用户可以通过将弹出控件拖动到该按钮上来对其进行固定或评论。


Uber是这种设计模式的另一种实现方式。Uber还可以让你在预订和查看车费估算之间进行切换,只要你选择了你想要的乘车类型,就可以通过点击滑块按钮来查看车费估算。这是一个简单而又重要的UI设计模式,每当我在做五件事的同时还想搭个便车,同时还要确保Uber不会用峰时价格来骗我的时候,它都会让我微笑。Snapchat和Facebook Messenger允许你在需要的时候通过滑走所有朋友的账户来访问这些功能。


10.可扩展输入

YouTube


问题
用户希望关注内容,而不是牺牲屏幕空间给控件。


解决方案
设计当用户点击时会展开的控件。这使得大多数控件在用户需要它们之前都不会出现。例如,YouTube和Facebook通过将搜索栏隐藏在一个图标后面来节省屏幕空间,当用户点击这个图标时,它就会展开成一个搜索栏。


11.撤销

Gmail, Chrome


问题
用户希望在没有中断(例如:确认)的情况下快速地执行操作,但是可以选择恢复意外操作。


解决方案
为用户提供一个简单的方法来撤销他们的操作,而不只是要求他们事先确认。在某些情况下,某个操作可能会导致不方便或数据丢失,例如删除电子邮件或编辑一些文本。用户可能因为不知道会发生什么而完成了一个动作;一个宽容的用户界面可以让他们体验到更多的参与感和友好。对于高级用户来说,撤销功能也很强大,他们会喜欢在整个过程中不用UI反复询问他们是否确定要继续操作,就能更好地控制局面。在解释将要发生的事情时,确认弹出窗口可能很有用,但是用户可能直到看到操作的结果才会理解其含义。在这种情况下,最好是让开,同时提供一个安全网络,以防出现错误。


获取用户的输入
时刻记录你应该从用户那里获得输入的位置,他们是否曾经查看过这些输入区域,他们使用这些输入控件的频率,他们从哪里来,又从哪里进入应用程序(即用户流),等等。不断地重新安排、重新排序、调整大小和调整这些控件,直到你获得更多所需的操作。当然,当用户能够提供输入时,要深入考虑他们实际上是如何使用你的移动应用程序的——确保你在设计应用程序时没有遗漏什么明显的东西。

文章来源:站酷  作者:马克笔设计留学

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

聊天机器人的用户体验

ui设计分享达人

今天的聊天机器人远非“智能”,它们引导用户通过简单的线性流程,我们的用户研究表明,每当用户偏离这些流程时,它们都会遇到困难。

聊天机器人是智能助手的可怜“亲戚”。


定义:聊天机器人是一种特定于基于文本的对话界面,支持用户完成有限的任务。


在其他地方,我们讨论了智能助手的6个特性:语音输入、自然语言处理、语音输出、智能解释、代理和前面所有特性的集成。聊天机器人只需要具备这两种属性:自然语言处理和智能解释。换句话说,聊天机器人应该能够以自然语言接收查询,并正确地理解和解释它们(然后执行它们)。


在当今世界,至少有三个不同的因素推动着聊天机器人的发展和普及。首先,人们希望通过用机器人取代人工代理人来降低客户服务成本。其次,像微信这样的基于对话的系统的成功,提出了聊天机器人作为企业和服务的交互渠道的想法,旨在补充现有的渠道,如移动网络和移动应用程序。最后,Alexa和Google Home等语音智能助手的流行,促使许多企业在较小规模上效仿它们。


这些因素映射到今天可用的两种不同类型的聊天机器人:

在企业与客户之间的聊天交互中,客服机器人会接管部分人工负载。这类机器人的例子包括UPS的Ask UPS和阿拉斯加航空的Ask Jenn。


交互机器人的目的是提供与业务交互的额外通道,而不是用于客户服务。例如,Domino的批萨机器人允许用户订购批萨;来自Progressive公司的Flo可以提供一份汽车保险报价。这种交互机器人可以在各种平台上使用,其中最著名的是Facebook Messenger。(其他平台包括Twitter和Slack。)然而,它们也可以存在于应用程序(美国银行的Erica)中,或者通过短信(Capital One的Eno)提供服务。

UPS.com网站使用聊天机器人来回答客服问题。

Kiehl ‘s Messenger聊天机器人:用户可以通过在“发送消息”文本框中输入文本或选择屏幕上显示的选项之一(发送位置或邮政编码;文本输入框下面的主菜单选项)。


虽然客服机器人通常是纯文本的,但交互机器人将文本与可视化UI元素结合起来作为交互方法。


研究


为了了解聊天机器人的可用性,我们招募了8名美国参与者,让他们在移动设备(5名参与者)和桌面设备(3名参与者)上执行一组与聊天相关的任务。其中一些任务涉及为客户服务而与人或机器人聊天,另一些任务则针对Facebook Messenger或基于短信的聊天机器人。


对机器人的态度


一般来说,人们对机器人的态度从中立到略微积极。互动机器人是一个相当模糊的渠道:在我们的美国研究中,大多数参与者之前从未与此类机器人互动,他们也不知道它的存在。相比之下,微信公众号页面通常是这些机器人的复杂版本,我们的中国参与者对它们很熟悉。我们的一些参与者惊喜地发现了这个互动渠道,其他人则认为与其他传统渠道如网络或移动应用相比,它并没有带来足够的价值。


人们普遍认为客服机器人不如人类代表有帮助,但我们的参与者也认为它们有一些优势。最重要的优势是速度:与人类聊天通常需要很长的等待时间(要么在队列中,要么在对话开始之前,要么在人类为客户的问题寻找解决方案时),而机器人可以是即时的。另一方面,人们觉得与真人接触表明公司关心客户:“真人真的很好。他们卖给你一件昂贵的物品,所以他们必须在代理人身上花更多的钱。”另一个人说:“如果你有一个人(负责客户服务),那意味着你足够关心;如果你有一个机器人,那么·你应该有一个真正好的机器人。”


交互机器人通常很容易被识别为机器人,但客户服务机器人很难识别。有些企业并不总是提前向客户透露他们正在与机器人进行交互。我们认为这是一个错误。我们的研究参与者很高兴看到企业使用机器人是透明的,因为他们可以调整自己的期望和语言。例如,当用户意识到他们是在和机器人说话时,他们往往会更直接,使用基于关键字的语言,并避免礼貌标记。这种类型的语言通常比通常在正常对话中使用的复杂、间接的语言更成功。


用于交互聊天机器人UI


交互样式
文本和链接/按钮都可以用于向交互聊天机器人输入信息。它们的目的略有不同:

  • 预先确定的链接和按钮避免了用户输入。这些通常显示在一个轮播列表中,可以包括图像。人们喜欢有这些选项,甚至希望它们成为常用输入。

  • 文本允许用户在选择他们想问的问题类型方面有一定的灵活性,并允许他们偏离聊天机器人(通常过于严格)的脚本。


这两种输入机制都很重要,应该同时存在。


当机器人不允许用户选择选项,而是要求用户输入时,用户会抱怨。例如,一个参与者被Booking.com的机器人惹恼了,因为它不允许他选择日期,他必须输入日期。在输入“感恩节”之后,他说:“应该有一些明显的东西来预先填充它。选项应该预先填充——手动输入很乏味。我应该可以点击按钮才对。”

人们更喜欢选择一个选项(左边是Domino的聊天机器人),而不是输入冗长的文本(右边是Booking.com)。考虑为最常见的输入创建按钮。


一些机器人完全取消了输入文本的选项,迫使用户选择屏幕上显示的选项之一。这种类型的设计使机器人类似于一个网站,并限制了用户可以在系统内探索的路径。

Car Dealer聊天机器人不允许用户在选择库存选项后输入自由文本。


当链接和按钮被清晰地标记时,它们的效果最好,人们希望能够点击交互机器人显示的几乎所有非文本元素。例如,当eero Messenger机器人展示一组图片来说明eero的行为时,我们的大多数研究参与者都会点击这些图片,希望获得更多信息。

Eero for Messenger(左):为了告诉我更多信息,该机器人显示了一个轮播,上面有几张图片和一组可能的延续(文本在圆形框中)。用户希望能够点击轮播项,但这些并不是链接。Kielh’s for Messenger (右):轮播上的大图片是不可点击的,但是下面的链接是可点击的。


除了常规的按钮和链接,一些交互聊天机器人还有一个菜单元素,当被选中时,它会显示一组可能的任务。菜单有时显示在输入文本框下面,有时显示为旁边的一个小汉堡包图标。

金州勇士队在输入框下面有一个主菜单链接。选择此链接将显示一组可用的任务。当用户开始在输入框中输入时,菜单图标就显示在它旁边。主菜单链接和汉堡包图标做了同样的事情。


其他链接有时显示在消息框下面。这些链接是相当容易发现的:我们的几个用户与它们交互;然而,靠近输入框的图标不太可能被使用。

CNN bot:信息区下面的链接显示了聊天机器人的一些主要任务(头条新闻、主题、设置)。


线性流


交互聊天机器人似乎最像Alexa的技能:它们被设计用来指导用户完成少量任务。机器人支持的任务最好被概念化为具有有限数量分支的线性流,这些分支依赖于可接受的用户答案。机器人提出一个问题,其答案将推动机器人前进到流的右边分支。

一个线性流程的例子,机器人可能通过它来完成一个任务


当用户遵循流程并提供符合系统期望的“合法”答案,而没有跳跃步骤或使用未知的单词时,用户会感到成功和顺利。例如,一些参与者能够成功地与Domino ‘s Pizza、Wingstop、Progressive等公司的聊天机器人进行交互。然而,一旦用户偏离了规定的脚本,问题就出现了。


例如,当Domino ‘s Pizza机器人询问她的位置是公寓还是房子时,一名参与者输入townhome,机器人回答“我很抱歉。我好像听不懂。”另一位寻找巴宝莉腰带的用户在消息框中输入了“腰带”,但是收到了订单取消的信息。当她把它转换成“女式腰带”时,她被告知要从一个链接列表中选择,没有一个链接与她要找的匹配。

巴宝莉的聊天机器人很难理解用户想要完成的任务,并在机器人的指令表中列出了若干任务。


机器人也很难从问题或意外输入中恢复,有时会迫使用户从树的顶部重新开始,并做更多不必要的工作来获得答案。例如,我们的一个用户想知道起亚是否有四轮驱动的电动车型。为了找到匹配的任务,她不得不遍历整个决策树,回答诸如汽车需要容纳的人数和MPG等问题。当她对车辆类型偏好回答“不”而不是选择一个显示选项时,机器人就会停止并强迫她重新开始。


然而,有些机器人更加灵活,能够理解偏离脚本的请求。例如,一个参与者知道Domino ‘s Pizza正在进行促销活动,他可以让机器人将其加到自己的购物车中。在订餐流程的晚期,他还能够改变其中一个比萨饼的外壳。

Domino ‘s Pizza聊天机器人能够对不属于预订披萨的主要线性流的请求做出满意的响应。左图:用户可以在订购前将订单加到他的购物车中。右图:用户更改了正在订购的两个比萨饼中的一个的外壳。


一些机器人很难做出假设并建立查询的上下文。例如,我们的一名参与者试图与Capital one的基于文本消息的机器人Eno进行交互。他碰巧有两张来自Capital One的信用卡,每次他问一个问题,机器人就会强迫他澄清查询涉及的是哪个账户,而不会将上下文从一个交互传递到下一个交互。


当启动新任务时,机器人通常也不能利用之前输入的信息。例如,我们的一名参与者首先决定叫披萨外卖;她输入了自己的地址,但她被告知Domino ‘s不送货上门。她又开始一遍,这次的目标是去商店取货而不是送货。机器人第二次问她的地址,显然完全忘记了她已经输入了地址。

Capital One的机器人Eno要求用户在回答完每个问题后澄清他询问的是哪个账户。左:Eno只识别用户查询中的关键字“transaction”(尽管拼错了),无法回答用户的特定问题;相反,它给出了其指令库中一个匹配任务的答案。右:Eno重复了之前问的问题。


文章来源:站酷  作者:马克笔设计留学

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



做好国际化体验设计,你应该知道的事

ui设计分享达人





章节一:为什么要坚持国际化设计?



坚持走国际化设计的背景

出海早已成为中国互联网公司的不二选择。相比在国内厮杀,国外有更多的人口/政策/资源红利。并且因为互联网的可复制模式,使得成熟的经验可以快速运用到国外,从而抢占先机。而做好国际化的本质就是【做好每个地区的本地化设计】,想用一套国际化的标准去用在全世界的各个地区取得成功是非常困难的

那有什么好的方法和理论能够让设计提前着落,为业务带来一线用户信息和设计价值呢?接下来我将给大家介绍一些实际的方法和案例帮助大家做国际化的设计,让自己的设计价值有理可依


*以下内容与公司无关,更多的是基于笔者国际化工作经验的复盘,如有错误,欢迎指正(Salute~)



写在前面

首先我们要知道,一套通用的设计标准很难在多个国家吃的开,从而拿到用户信任

我们先来看个案例,这个是日本UBER司机端和日本滴滴司机端对比

最明显的区别在于,滴滴国际化在日本业务和Global业务这块,司机端采用的是移动端(global)+平板端(日本),而UBER则是一套方案解决全球问题,可能有些人会问,一套设计不是成本更低,效率更高么,为什么非要制作两套。这就要从决策成本的角度去考虑问题,而日本市场相对于滴滴其他地区市场有着完全不同的因素,涉及到了资本,使用场景,市场地位,用户画像等多方因素决定,这时的【成本与效率】已经无法排在做与不做的第一位了,接下来我们通过两张照片来看下日本司机的接驾场景

通过照片我们是否发现日本司机的画像其实和全世界其他的出租车司机都不太一样?是不是明显发现他们的年纪相对的更大一些?会穿制服佩戴白手套? 那年纪更大是不是意味着司机的视力会相对于中年人有所下降,白手套是否会影响他操作屏幕交互,那针对这么不同用户群体是否需要单独设计呢?最终的目标是占领市场的话是否要根据本地情况去服务好当地司机呢?


那我再来举两个例子来看看,我们来看看针对日本本地化做的特殊设计细节在哪些方面?



案例一:针对司机群体老龄化设计———大屏幕设计:

日本属于老龄化国家,司机平均年龄更是在50岁以上,高龄人群的视力相比于青年处于退化阶段,因此对于高龄人群来说在驾驶的过程中去读和操作小屏幕来说是一件非常痛苦的事情,UBER采用的是一套国际化的设计语言并没有针对日本的市场进行单独的设计,DiDi在日本则是针对司机群体采用了单独平板端设计,更大的屏幕降低了司机误操作可能性的同时,也能将字体放大,尽可能让司机方便识别



案例二:针对日本司机人文的设计———语音接单

“日本服务业发达,体现在服务的细节。出租车司机出于对客户的尊重,都会戴上白手套。但是在带着手套的时候,司机很难去点击屏幕进行操作,而且在行车过程中,触碰屏幕本来就是不合规的行为。无论是从法律层面还是价值观层面我们都不鼓励司机做出这种行为,于是开发了语音接单的功能。考虑到司机群体的年纪特征,我们选用了在日本相对普及又好识别的“了解しました(りょかいしました)”进行快速语音接单,在新版本上线后,司机可以通过屏中屏的方式去学习语音接单功能,只有他完全掌握这个功能才会为他完全展现,如果司机因为自身原因无法很好地说出那句话,我们依旧会为他保留按钮输入的方式”------国际化业务中的本地化设计


(图片来自于SUXA文章《国际化业务中的本地化设计》-吕诚)




国际化设计的思维框架

通过两个日本的案例我们能明确一个点【国际化实质就是做好每个地区的本地化设计】

怎么样让国际化的设计有法可依,我们先来看懂一个关系框架。做好一个产品实质是服务好每一个场景,那一个场景由哪几个方面组成,简单来说是由【业务】+【用户】组成,这并不难理解,我们作为产品设计师,首先是背靠业务,解决公司的商业诉求,给业务带来利益的同时给用户带来更多的使用价值然后获得用户的认可。在这个过程中,我们会将商业诉求和用户价值进行一个有效的结合,从而满足双方,但是还不够,因为一个场景还依赖客观的条件,比如时间和空间维度,最终也会影响整体的质量,我们将所有的因素通过包含关系展示出来

接下来我们往细的方向进行拆解,【业务】根据公司行业,阶段的不同以及基础能力的不同,呈现的点也不尽相同。最核心的点在于当前所属阶段,是1.0阶段力求生存下来,还是说2.0和竞品之间产生差异化,还是活3.0去打败竞品阶段。在不同阶段设计师要了解的事情也不同,对于1.0阶段来说,更精准的展示出用户画像和了解当地的文化与习惯是重中之重。但是到了2.0则应该更加关注产品目标与竞品的差异化竞争,通过差异化(杀手级)的功能形态获取更多的摇摆用户

不同的赛道,业务不同,打法也不同。我今天主要想讲的就是左右场景的另外一个因子【用户】。那如何定义一个用户呢?我们先来列举些具象的特征:

【外貌/文化风俗/地域特征/语言等】是一个用户的画像的基础组成,但是光有画像基础并不精确,因为每个国家的【法律/政策]同样会影响用户的行为。而在当今的互联网模式下,用户体验的提高必须得考虑各地区【硬件的水平以及当地的网络状况】,最后就是如何与【本地化的设计团队进行友好的合作】让体验和设计策略能够更加精准的传达到真实用户手里,获得用户认可,特别是在20年后,疫情的爆发导致设计师无法到前线进行真实有效的实地探测,那么加强合作以及对齐目标,为业务拿结果将是重中之重,接下来,我将对于每个影响【用户】的因子进行举例讲解








章节二:如何快速了解你服务的用户



做任何的设计都离不开用户画像,而做国际化设计一定也绕不开-霍夫斯泰德文化维度理论

可能你知道,在给拉美客户做单的时候他们会要求你的界面颜色亮丽,看起来更加奔放,而在给亚洲客户做单的时候则会相反,整体看起来更加约束。但是你能清楚的知道背后的原因么?如果不清楚那你的这块分辨更多是依赖于经验和他人的总结。那有没有一套理论能够很好的去辅助你去分析你的客户用户画像,去支撑你的设计。答案是有的,他就是【霍夫斯泰德文化维度理论】


霍夫斯泰德文化维度理论(Hofstede's cultural dimensions theory)是荷兰心理学家吉尔特·霍夫斯泰德提出的用来衡量不同国家文化差异的一个框架。他认为文化是在一个环境下人们共同拥有的心理程序,能将一群人与其他人区分开来。通过研究,他将不同文化间的差异归纳为5个基本的文化价值观维度


百科连接:霍夫斯泰德理论详情 (<-点击快速查看)

完全不懂的可以看看上面的链接,我们这里跳过部分解释….通过文化将维度理论我们将文化价值观划分成6个维度

了解完霍夫斯泰德理论以后我们该如何去使用呢?我们先从拉美用户和日本用户的差异对比开始

通过霍夫斯泰德官网查询我们可得知差距最大的两个分别是【男性化与女性化(Masculinity versus Femininity)】与【长期取向与短期取向(Long-term versus Short-term)】,差值比例达到了46和44.

接下来我们来对【差值较大】以及【分值较高】的因素进行解释和举例,去理解背后的原因



男性化与女性化(Masculinity versus Femininity)

日本是个生性好斗竞争意识强烈的民族。在日本企业中工作狂是他们男性气质的一种表现;而日本男主外女主内,62%的女性在第一个孩子之后选择辞职,也是男性气质的另一表现.

在日本想要成为一个出租车司机,就要在5年之内不能有任何违规,某些地方还会有特殊的考试,这里面的合格率并不高。并且在通过考试之后再在通过一系列的评分后,才能被评为A级或者AA级别的出租车,虽然这仅仅只是一张小贴纸,但是他也代表着一个出租车司机的荣誉。在这一方面,也体现日本社会的男性气质的确定性。

相比较日本,巴西人更会以家庭为中心、以教育为重心、博爱、具有个人风格意识。家庭是关键。家庭是巴西人生活的中心,也是其社会的核心价值观。对于一个家庭而言,家人共同用餐的时间是非常重要的,还有星期天的烧烤活动,能让更多的远房亲戚和朋友聚会。所以在巴西你很难看到休息日去工作的同事,甚至无法联系上他们:)



长期取向与短期取向(Long-term versus Short-term)

日本人将生命视为一个非常短暂的时刻,所以调查发现日本人普遍相信宿命论,他们鼓励节俭和现代教育的努力,作为为未来做准备的一种方式。

巴西相较于日本经济落后,人民的收入水平普遍不高,很多司机收入仅仅能够维持一家的支出,很难有结余,在巴西工资会按照周维度支付,以保证一家人的生活开支能够承担。

针对巴西的情况我们做了适合当地政策和环境的本地化服务。钱包1.0的时候我们先是和当地的银行合作推出了巴西99卡,允许司机随时提现且提现速度远远大于了当地的其他银行(48小时),那这种优势在收入较低的司机群体当中就会发挥很大的优势。在3.0的改版中,我们将钱包打造长了本地生活平台,我们允许司机通过平台去完成转账/水电费/电话费/还款等行为,原本需要走到线下便利店的服务被我们搬到了线上,更是大大的方便了使用99卡的群体。未来呢,我们将加大加多权益,达到使用场景独占的目的。通过这些服务为我们给用户带来了使用价值,同时我们也给业务带来了价值,更多的绑卡渗透率为我们后续的推广和矩阵式的打法提供了导流的入口

(99与当地银行合作的线上本地生活功能-99Pay)



不确定性的规避(Uncertainty Avoidance)

日本地处自然灾害频发地带,没有丰富的自然资源,生存条件不太好,所以日本人有很强的危机意识,学会了为任何不确定的情况做好预防措施,对待事情也希望有明确性

而巴西虽然处于平原,没有自然灾害,但是因为社会安全因素,整个社会对于社恐事件还是有较强烈的危机意识,所以司机会更加关注接送流程中是否会前往不安全地区,以及乘客的质量

(日本司机的真实驾驶场景)


费用收取的正确与否也是服务体验优秀的表现,日本司机会用计步器进行计价,如果涉及到了其他的费用则会使用单独的计算器进行精确计算,这么做的原因是为了避免计算错误给乘客带来困扰和争执,那从这个环节来看,司机为了规避【计算错误的可能】而预备了计算器,减少了差体验的可能


在巴西,滴滴如果对司机派单如果过远会或者是危险地区会进行提示,允许司机取消派单。并且根据调研司机群体特别是夜班司机会有随身携带防护性的武器用来自我保护,那么也能很好的说明整个社会对于社恐事件还是有较强烈的危机意识。那么做为设计师,是不是意味着可以把危险地区的派单做的更加醒目,让司机能够更快识别,更快决策,而不是为了平台和用户利益进行隐藏。是不是可以把安全链路透传做的更强,让司乘都能更加快捷第一时间选择自助服务









章节三:绕不开的硬边界



法律法规的约束

每个国家的发展阶段不同,对于隐私重视程度不同,因此针对不同地区的海外市场,作为业务的合作伙伴设计师们需要针对不同的市场配套不同的安全合规方案,这一点格外需要注意,不然会被罚的很惨,通常获取地理位置/账号信息保留是每个公司都非要需要的,因此在空投其他国家之前需要了解是否立法关于隐私相关的法律,如果有则需要通过配置化将其他国家上线的隐私条款和设置方式复制过来使用

LGPD和GPDR风控合规

简单来说就是要做到信息安全,保护个体隐私。大家都知道在中国我们的信息被侵犯的体无完肤。其实在国外也是一样,各种权限,各种信息默认保留和上传。但是随着各国的重视,个人隐私也逐渐走向明确的法律保护层面。在拉美有LGPD,在欧洲有GPDR


GDPR 是(The European General Data Protection Regulation )的缩写,即通用数据保护条例。是欧盟议会和欧盟理事会在 2016 年 4 月通过,在 2018 年 5 月开始强制实施的规定。

GDPR 意义在于推动强制执行隐私条例,规定了企业在对用户的数据收集、存储、保护和使用时新的标准;另一方面,对于自身的数据,也给予了用户更大处理权。也就是说在18年生效之后,如果再有欧洲任何公司App不对用户的数据进行合规处理,擅自收集信息就将会受到严惩



智能硬件的普及度以及新旧

硬件的普及率以及新旧差异也同样影响着本地化设计,通过调研和外界公布的数据我们得知,在拉美高端手机的占比远远低于发达国家。因此在给发达地区做设计的时候可以考虑更多体验上的拓展,但是在给发展中国家做设计的时候则需要进行小屏幕最小尺寸的适配,这样做是为了最好的进行向下兼容,从而保证所有用户都能够使用。同样,如果你在给发展中国家做设计,那么复杂的动效和高清晰解析的大图最好是不要去做的

(网上后台数据展示截图)



当地的网络环境和下载速度及物流环境

拉美国家,基建水平滞后,网络下载的速率波动较大,且存在不稳定的情况,以及流量费用的价格差异。因此某些设计手法在较发达国家能带来体验但是在发展中国家可能会是灾难


举个例子,司机端的历史列表如果存在400条记录,如果司机有诉求想刷新查看更多的订单,是一次性下拉刷新展示全部好呢?还是一次性展示50条好呢?还是一次性展示20条呢?


答案是一次性展示20条是最稳妥的选择,因为网络的不稳定性,一次性加载太多数据会导致过长时间,而网络不稳定极有可能导致下载失败,并且一次性下载太多数据可能并不符合司机查询的最初诉求,反而浪费司机的宝贵流量,最终会引擎流量消耗过快引发进线,这里的决策是损失一些用户的体验去保障司机的收入,但是在拉美因为手机的性能/网速的稳定且快速/套餐足够便宜,因此我们可以尝试使用一次性加载全部的数据,这样能让体验感受更好

(99信用卡的申请权益展示/激活流程页面)


再举个例子,拉美物流相对没那么发达,且因为政治/经济局势的不稳定性,导致物流包裹存在无法送达的情况,如果收件人不知晓当前的状态而超出了等待的预期,那么他就会进线询问。那在这个场景我们有什么更好的办法?是否可以透传更多的包裹进度方便收件人查看,再者再将用户导流到客服自助而非进线?这样的好处一来体验的链路完善了,让司机可以找到自助的出口,二是方便我们可以更好的了解哪些地区收到邮寄的折损率最大?从而探索新的业务,发现新的机会点








章节四:生活习惯和历史文化遗留带来的本地化策略



收入/支出方式占比反映了一个群体的现状

聊这个话题前我们先将选择的范围进行收缩,聚焦在一个国家的一个群体内去看会比较容易解释。在巴西司机的收入的往往只能支撑下一周的家庭支出,难有结余。这也导致司机会选择双开(同时使用UBER接单或者其他竞品)或者进行其他赚钱的方法,如果整个群体都是这样的情况下,那么司机的忠诚度(这里指的忠诚度不是贬义词,而是每周的出车时长)必然下降。那样对于大盘的运力来说便是损失。那有没有什么办法帮助司机更好的应对这些问题


我们该如何思考这个问题,通过马斯洛的需求理论我们能够将人的诉求归为三类,基础的生存诉求/归属感和成就感。那这三种可以再细化成两类,物质层面的诉求和精神层面的诉求。司机愿意在滴滴平台跑单是基于了物质层面。那么,我们是不是可以丰富收入以外的奖励形式,提供活动奖励或者权益的折扣,又或者尝试下小额贷款,那这些是不是可以给用户带来价值点呢?


精神层面我们是不是也有发挥的空间,对于补贴,往往是有限的。那如何做到持续长期刺激司机群体?如果一个乘客对于司机进行了表扬和小费的激励,是不是可以给司机带来更大的信心去服务好乘客,那我们是不是要加强这方面的透传。是不是可以给司机提供虚拟奖励,让司机存在足够的拥有感和成就感,让司机群体也能感受到平台对他们的看重。如果勋章可以,那等级是不是也是成就之一呢?



现金与线上支付普及与思考

不同的国家线上和现金的支付比例大不相同,这里受经济环境和政治环境影响较大。总的来说习惯了线上支付的习惯后就很难回到现金支付的环境,因为确实更加方便便利。一个国家大量使用现金支付的情况下,往往是互联网公司能做的发力点和蓝海。核心做法是通过核心业务导流到钱包模块,在与当地的银行和机构进行合作,增加卡和账户的渗透率。然后通过做权益和服务,满足用户的生活诉求,从而达到场景独占。最终将会让公司的业务矩阵从单核的核心业务到核心业务+本地生活




文字的适配/i18n翻译的本地化(不同地区/国家语言精准翻译,拒绝里语/文字长度折行问题)

这里我们需要提到一个概念,i18n(其来源是英文单词 internationalization的首末字符i和n,18为中间的字符数)是“国际化”的简称。在资讯领域,国际化(i18n)指让产品(出版物,软件,硬件等)无需做大的改变就能够适应不同的语言和地区的需要。对程序来说,在不修改内部代码的情况下,能根据不同语言及地区显示相应的界面。 在全球化的时代,国际化尤为重要,因为产品的潜在用户可能来自世界的各个角落。通常与i18n相关的还有L10n(“本地化”的简称)


了解完i18n的相关背景以后我们大概可以把他定义成做国际化翻译的一个中台,所有的本地化设计在经过研发代码实现后,都会进过他们去对文案进行翻译校对,最终变成当地人可以理解的话术落地到界面上,从而进行本地化的空投,但是这里面往往存在一个适配优化的问题。大家知道英文的单词平均长度要长于汉字,而西语和葡语是英文的1.25倍到1.5倍之间,而俄语的长度更是能达到葡语的1.25倍。那么面对多国空投的适配不仅仅需要i18n进行精准翻译,还需要把控字符长度,避免折行和省略问题


我们来看下下面这个例子


(不严谨的快速翻译,只是为了更方便的展示不同文化下的文字长度)


不同国家的语言不同,文字也不同,则会存在单词,句子长度/行高的差异。如果一个产品在初期没有做好适配的话,到后期替换当地语言的时候极有可能出现文字溢出的问题,这也是为什么在做海外设计的时候最好拿当地的语言进行设计,能初筛出一些细小的问题 ,避免在和翻译中台对接的时候因为文案太长提供的空间不足而修改页面间距和留白的适配问题



中东国家客户的产品需要注意适配

如果你服务中东客户,务必需要呈现出当地的阅读排版方式(尊重本地化设计)具体的适配细节这里就不过多说了,网上搜索【RTL适配方法】即可

(Material Design中的RTL适配)



缩写是否合适(日期/业内专属名词)- 时间格式/货币符号/联系方式/地址等

格式也是做国际化中一个非常常见且体现专业度的地方,不同国家的时间展示方式不同,会影响用户的阅读,举个例子“03/08/2019”,如果在A国理解是2019年3月8号,在其他国家复用是会存在理解成2019年8月3号的,更别说我们加上的星期之后的展示方式。这就要求我们在进行开新的国家的时候务必于前线进行更好的沟通,保障阅读的习惯和当地一致,那货币符号/地址等也应该遵守当地的习惯去展示,通常的解法是设计团队去收集信息并且与前线当地人员进行交流确认,将格式记录下来,最后与研发根据上线的国家展示不同的格式









总结

因为时间仓促,无法面面俱到的将每个点都进行举例论证,尽可能把我认为重要的点都提了出来。理解了这篇文章并不代表看懂看明白就能做好国际化,它更像是一个方法论,帮助没做过国际化业务的同学能够快速理解当地的用户和业务的打法


希望我的文章能够抛砖引玉,给大家一些灵感,也希望更多朋友能够将国际化的经验分享给设计的朋友们。让我们一起把中国互联网国际化的业务做到越来越好


最后引用我一老哥的话进行收尾“更好的国际化就是以更好的本地化思维去看待,去理解它们。而不是仅仅以一个理性的角度去看待。要站在用户的角度去看,永远不要轻易地相信自己的理解

文章来源:站酷  作者:大宝蛋

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


设计师要懂的用户习惯

ui设计分享达人


前言:


前些天对用户习惯进行了总结,这两天重新优化了一遍。我们在互联网产品的设计过程中,有时会听到一个词:用户习惯。设计师希望尝试更多新颖的交互方式、视觉效果,却常常容易被其他人挑刺指出不符合用户习惯,建立在用户习惯上的创新才是好的体验。


尽管设计师经常将用户习惯挂在嘴边,但是却很难有人说出用户习惯究竟是什么?我们如何判断所做的设计是否符合用户习惯?用户习惯是否始终不能打破?道理我都懂,就是不会做,实际上确实是这样,因为很大程度上取决于设计师对用户习惯的理解深度。


用户习惯本身很难被量化,但是不代表就是一个模糊的概念,你仍然能从用户反馈、操作行为数据对比等分析中一窥究竟,用户习惯是可以随着设计师的学习、经验、眼界等的提升而提升的。



什么是用户习惯?


心理学上认为,习惯是人在一定情境下自动化地去进行某种动作的需要或倾向。或者说,习惯是人在一定情境中所形成的相对稳定的、自动化的一种行为方式。 习惯形成是学习的结果、是条件反射的建立、巩固并臻至自动化的结果。

 

所以,习惯有两大特点:


需要注意的是,“长期”本身是是没有明确时间界限的,更强调多次的重复。这里的习惯,侧重于描述“习得性”,即人们通过经历、学习、刻意练习等方式形成的,所以这种习惯理论上是可以被改变的。


此外,习惯还有一种潜藏特性,区别于上面描述的“习得性”,是天生的、物种特有的行为模式。比如人空腹状态下,闻到香的食物会产生强烈食欲。这种特性习惯是刻在基因里的,几乎无法被改变。



试想,我们在使用 App 时,是否遇到过因为习惯的问题而感觉到不适应的场景?


举个最常见的例子,Windows 与 Mac 系统的软件关闭方式。使用 Windows 的电脑时,我们形成了关闭操作在右上角的自然习惯。后来开始使用 Mac 电脑,关闭方式都在左上角,在一段时间内,每次关闭时都感觉到格外不习惯。而 Mac 的关闭方式没有比 Windows 产生显而易见体验升级,改变操作习惯成本高,部分用户可能会认为 Mac 的关闭操作不好用。


当然,假如最开始接触的是 Mac 电脑,再使用 Windows 电脑,也会自然认为 Windows 不好用,这是先入为主的观念,一旦产生习惯,改变习惯将产生一定的学习成本。

 


用户习惯的产生


设计师需要思考用户行为的本质,而尽量减少主观判断。产品是给人使用的,所以了解人们的行为特征很重要,而只要涉及到对人本身的了解,就是极其复杂的,人类对自身的行为特征了解远远不足,但这不妨碍我们以现有知识去做一些分析和判断。


用户行为习惯的产生,与记忆的特点有很大关联,我们可以把记忆划分为外显记忆和内隐记忆。


外显记忆大家比较习惯和容易感知到,比如我们在学校学习时背诵的课文、公式法则等,可以用语言、文字等显性方式描述出来的记忆。


内隐记忆也叫非陈述性记忆,我们无法用行为描述而又确实存在,比如骑单车,学会之后很难会遗忘。刚开始学习时,会需要意识的介入,经过多次练习,行为会逐渐“自动化”,比如学习开车时,我们会注意力很集中,而习惯开车后,可以一边开车一边聊天。

我们平时说的肌肉记忆、条件反射也和内隐记忆息息相关,而且一旦形成,不太容易改变。需要注意的是,肌肉记忆只是一种简单描述,负责此记忆的是小脑,其实肌肉没有记忆。


所以有时候,我们感觉体验某个 App 时,会习惯性在某页面寻找某功能,或者觉得体验和其他 App 有区别,都可能是内隐记忆的用户习惯引起的。举个例子,某天你刚使用一个没用过的 App ,这时你想要找设置功能,那你大概率会不自觉的点击 App 的最后一个主 Tab (如“我的”),因为大部分 App 的设置功能都在这个场景,用户自然也就形成了习惯。


这里我且采用由心理学家基思·斯坦诺维奇(Keith Stanovich)和理查德·韦斯特(Richard West)率先提出的术语,用以说明大脑中的两套系统,即系统 1 和系统 2。


·系统1的运行是无意识且快速的,不怎么费脑力,没有感觉,完全处于自主控制状态,也叫快系统。

·系统2将注意力转移到需要费脑力的大脑活动上来,例如复杂的运算。系统2的运行通常与行为、选择和专注等主观体验相关联,也叫慢系统。


而这两个系统,是可以互相转化的,慢系统通过刻意练习,把新的习惯注入快系统,而这时快系统就是习惯的表现,这样快系统可以在日常生活中完成大部分工作,这就是我们常听说的熟能生巧,习惯经常能帮我们节省思考的精力,这又让慢系统进一步通过刻意练习,向快系统不断注入更多好习惯。


举个例子,你刚用一个 App 时,可能需要先体验一下你要的功能在 App 的哪个位置,但你用久之后,就会不假思索地找到它。就像你用微信,最常用的功能可能是回复信息、看朋友圈,所以一定会形成习惯。但是假如有人让你找一下微信里面“生活服务”的入口,你可能会先想一下可能出现在什么入口,这就是因为平时比较少用导致的。假如你常用这些入口,也会形成习惯,下次要使用这些功能的时候,就能够快速找到。



避免改变用户习惯


1、挑战用户习惯的风险


既然说到用户习惯的特点是“长期养成”且“不易改变”,那么挑战用户习惯一定会造成不适,甚至引起强烈反感。几年前 Ins 的 logo 改版,将 logo 由拟物化改成了扁平化,颜色也发生了变化。暂且抛开视觉效果不说,从用户视觉记忆上,已经习惯了下图左侧的效果,而右侧新版效果很难与左侧产生记忆上的关联。


许多用户反馈桌面上找不到这个应用、许多用户吐槽很丑甚至不想再使用。所以我们比较容易理解,为什么有时候 App 改版容易反而引起用户的反感,这很大程度上是用户习惯的影响。



2、如何避免挑战用户习惯


产品的用户是谁?


了解产品的用户是谁、用户的行为特点是什么。不同产品由于定位不同,所以用户群体也不相同,用户群体的不同自然代表用户行为特点的不同。如果设计师知道用户群体,但是不清楚具体行为习惯特征,可以尝试让你身边的用户帮你体验。


举个例子,B 站的整体用户画像相对而言更偏年轻化,所以产品设计上,无论是代表形象、UI 风格、交互体验都更显年轻化。而“小年糕”小程序的用户群体主要为中老年人,所以设计上不会显得很年轻,而是以操作明确、字号偏大、去除多余信息为主。


关注竞品的体验


关注主流产品的用户体验很重要,这些竞品的操作往往代表用户的习惯操作(或被培养出来的习惯操作)。大多数情况下,你需要了解竞品能做到什么程度,用户容易将习惯从一个场景带到另外一个相似场景。


比如点外卖,有的用户可能会下载美团和饿了么,尽管平台不同,但是在用户习惯中,操作模式是相似的,所以如果你要让用户的体验不突兀,那就往往遵循相似的操作逻辑。当然这些不是为了让一个产品去抄另外一个产品,而是要追寻更好的使用体验,你的产品比竞品体验更优,就更能吸引用户的青睐。


了解人类的行为/阅读模式


每个人本身都会具有相对稳定的行为、操作、信息阅读习惯,我们能见到的体验好的产品,都是符合用户的基本行为习惯、信息阅读习惯的,要想了解这些习惯,需要了解深层次的交互行为特征。


从操作而言,需要了解用户与界面交互的行为习惯,比如用户的操作(手势操作、信息布局如何才能便于操作),比如尼尔森可用性原则等。


从信息阅读角度而言,需要考虑人们眼睛观察事物的规律,比如格式塔原理:接近性原则、相似性原则、连续性原则、闭合性原则、主体/背景原则、简单对称性原则、共同命运原则。


了解平台设计规范


就移动互联网产品的领域而言,大家都是与手机互动,目前手机系统的两大平台:iOS 和 Android 也都各自有提供关于人机界面设计有清晰的指导,尤其是 Android 的 Material Design ,对于设计师快速了解设计规范、设计原则有很大作用。


iOS 与 Android 的人机界面规范链接:

iOS:https://developer.apple.com/

Android:https://material.io/



培养新的用户习惯


1、何时培养新的用户习惯?


我们提到挑战用户习惯会有风险,但用户习惯并非是永远不可改变的,有时我们需要培养新的用户习惯,也就是大家常说的“教育用户”,否则世界可能一直很难进步。


移动互联网兴起之前,大家都是线下打车,但是滴滴打车颠覆了传统线下打车的用户习惯;以前大家都是现金支付,但是微信支付颠覆了现金支付的用户习惯。


《设计心理学》里面有这么一段话:“如果用新的方式做一件事只比原来好一点,那么最好与以前保持一致。如果必须做出改变,那么每个人都得改变。新旧混杂的系统会让每个人困惑。当新的做事方式明显优于旧的方式,那么因改变而带来的价值会超越改变本身所带来的困难。不能因为某样东西与众不同就认为它不好。如果我们故步自封,我们将永远不会进步。”


改变的价值大于改变的困难


这里的价值包括但不限于用户价值、商业价值(短期价值、长期价值)等,当新习惯会需要用户改变旧习惯时,这个设计带来的价值有多大,值不值得让老用户付出学习成本。有时候,明知改变会引起用户的强烈抵触,仍然改变用户习惯,可能因为改变的价值大于改变的困难。


刚才提到的 ins 的例子中,有的人不知道 ins 为什么要改版,创新咨询公司 IDEO 的沟通设计主管 Remy Jauffret 说:“当品牌、组织超越了最初的商业意图,或扩展业务提供不同的产品,或领导希望吸引新的客户,这些情况都可能需要新的品牌视觉。变化总是大家不舒服,然后又平息,我认为时间才是检验真理的唯一标准。”


改变带来明显的体验升级


我们在设计中,有时候会遇到自己的产品某个功能体验比较差,但是延续了很久,而市面上其他同类产品在相同功能的体验上已经做的很好,我们可以往主流交互体验上改版吗?这时需要权衡改变之后是否能带来明显的体验升级,还是说对于用户来说是不痛不痒的变化,可改可不改?


以安卓为例,在几年前,安卓手机的底部有 3 个实体键,后面手机更新迭代,变成了虚拟三键设计,因此底部存在3个不同功能的热区。而在 Android 4.0 设计规范中,为了避免底部标签栏与已经存在的底部虚拟键产生交互上的冲突,安卓明确说明了不要使用底部标签栏。


但这种规则,在使用体验上、开发者的适配上都发生了问题,用户更接受 iOS 的体验,后面谷歌在 Material Design 中,允许了底部标签栏的存在。这相当于和原来的用户习惯不一致,但却带来了更好的用户体验。



2、如何培养新的用户习惯?


这里结合上瘾模型的触发、行为、多变的酬赏、投入进行阐述,这四个步骤是一个循环,当用户越沉迷于这个循环,说明你的产品对用户的吸引力越强,用户习惯也就越强,这里会侧重于从培养用户习惯的角度进行拆解。



触发:外部触发和内部触发 


外部触发说白了就是加强产品曝光,让用户一下子就能想起你。举个例子,“充电五分钟”下一句是什么?你大概率会想到“通话两小时”,这种经过外部的长期触发,最终已经转变成了内部的习惯,会让你记忆深刻。


外部触发的类型主要有4类,通过将信息渗透进用户生活,吸引他们采取下一步行动:


付费型触发:做广告、搜索引擎推广都是付费型触发,争取新用户;

回馈型触发:公关和媒体等领域的触发,比如对产品做正面报道、推荐等;

人际型触发:熟人之间的口碑传播是一种极其有效的外部触发,可以为产品带来“病毒式增长”;

自主型触发:以驱动用户重复某种行为作为重点,让用户形成习惯,比如新闻订阅、每天早晨的闹钟等。


内部触发是用户心理产生的使用动机,内在情绪驱动自己去使用一款产品。


当某个产品与你的思想、情感或者是原本已有的常规活动发生密切关联的时候,那一定是内部触发在起作用。对于习惯刷朋友圈的人来说,拿起手机就不会自觉打开微信;对于习惯刷微博的人来说,拿起手机就会刷起微博,甚至自己都没有意识到。一再重复这种场景,会用户就会对此形成一种稳定的联系,进而形成习惯。


行动


斯坦福大学福格博士曾提出“福格公式”,福格行为模型可以用公式来呈现,即 B = MAT。B 代表行为,M 代表动机,A 代表能力,T 代表触发。只有动机、能力 、触发三者皆备,才能跨过“行动线”。


触发:即上面所提到的外部触发与内部触发。


动机:动机决定你是否愿意采取行动。福格博士认为,驱使我们采取行动的核心动机主要是三种:追求快乐,逃避痛苦;追求希望,逃避恐惧;追求认同,逃避排斥。


能力:这里要详述的是能力,所谓习惯,是指人们在几乎无意识的情况下做出的举动。一种行为的复杂程度越低,无论是体力上的还是脑力上的,被人们重复的可能性就越大。越简单的操作成本,记忆成本越低,越容易形成用户习惯。


举个例子,刷抖音就是用户行为成本极低的场景,你在刷抖音时,不需要多余的交互行为,切换视频甚至不需要点击,只需要向上滑动。除开抖音算法的精准推荐不说,从交互层面而言,也是足够简单并且形成习惯了。


如果改变会打破认知习惯,要让用户能快速了解新设计的使用方式。最好的方式是能够让用户快速与已其他竞品的操作习惯产生关联。比如采用其他主流应用成熟的交互方式。


如果改版会很大程度上改变用户行为,也可以考虑尝试以下的方式。


· 改版操作指引:这种方式较为常见,但是仍应注意避免繁琐的操作指引,切勿把操作指引当作体验差时的解决方案。


· 兼容多种用户习惯:这种方式可以让不同用户选择适合自己的交互方式,最大程度考虑到所有用户,但同时也可能造成了功能冗杂的情况。比如安卓底部三大金刚键,后面手机全面屏时代,新增了全面屏手势。考虑到安卓老用户的使用习惯,三大金刚键(底部虚拟按键)始终被保留下来;


· 允许切换新旧版本:这种方式一般是改版变化过大,用户一时间不容易接受新的体验方式,常见于网站,如站酷早期的大改版,但是仅适用于过渡期。


当然,除上述方式外,肯定还有一些其他让改变行为习惯更舒服的方式,这里不一一列举。


多变的酬赏


多变酬赏主要表现为:社交酬赏,猎物酬赏,自我酬赏。这几种酬赏会加强用户对产品的使用习惯。


社交酬赏:人们从产品中通过与他人的互动而获取的人际奖励,比如被认同、重视、喜爱等。比如人们喜欢发朋友圈、微博等,期望得到回馈,某种程度上都是为了获得社交酬赏。

猎物酬赏:人们从产品中获得的具体资源或信息。比如浏览信息流,丰富的信息流内容为用户提供了资讯,比如刷抖音,人们追求视频的新鲜感、追求内容的丰富性都是属于猎物酬赏。

自我酬赏:人们从产品中体验到的操控感、成就感和终结感。在目标驱动下,我们会去克服障碍,即便仅仅是因为这个过程能带来满足感。就像你玩游戏,希望赢过对面,或者期待将游戏玩通关,本质上属于自我酬赏。


投入


如果希望继续培养用户习惯,与产品产生更紧密的联系,就需要鼓励用户进行一些投入,以增加他们使用产品的可能性。行动只是用户使用的第一步,促使用户对产品的投入,才会真正增强用户与产品之间的联系,形成更强的用户习惯。但是如果用户自身没有投入,即替换成本低,那么随时都可能有被其他产品取代。


举个例子,移动互联网时期,微信早早入局,人们的关系链都在微信里面沉淀,即人们越使用微信,关系链沉淀越多,就越难以更换其他产品,所以两年前想要挑战微信的多闪、马桶 MT 和聊天宝这三款社交 App 不可避免的失败了。


用户越愿意投入,就证明用户粘性越高,在此过程中,用户习惯也会不断加强。



结语:


现阶段,人人大谈用户习惯,但是用户习惯不以自身为标准,而是需要考虑产品用户的行为特征,以及人们在使用产品时更加深层的、甚至用户本身都没有发现的习惯,这就需要设计师对习惯的产生、习惯的判断、习惯的培养有深入的认识。


一般情况下,产品不适合贸然改变用户习惯,但是在有特殊需要的情况下,还是不可避免的改变产品的用户使用习惯,当然我们需要如何让用户更加容易接受。大多数产品,都希望用户能够形成对自己产品的习惯,所以需要了解用户如何对产品产生习惯、加强习惯,使产品拥有更强的吸引力,但是良好、正向的用户习惯一定是基于用户体验的。


文章来源:站酷 作者:热风_

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



日历

链接

个人资料

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

存档