首页

页面跳转方式,如何设计更合理?

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

常见的页面跳转方式有直接跳转、左右跳转、上下跳转等,再设计时需要考虑好其中的关联性,给出最符合用户心理预期的过渡方式,从而做出最合适的设计。

页面跳转在APP中属于最常见,也是最基础的一个交互细节点。

我们常见的跳转方式:直接跳转、左右跳转、上下跳转、翻转、联动;其它酷炫的效果我们看过很多,但是现实中能做到的又有几个呢?

先讲一下:视觉顺序

首先我们看一下,我们的视觉顺序「阅读顺序」是:左→右,上→下。因此延伸出目前APP最常见的两种页面跳转方式:左右跳转,上下跳转。

直接跳转

最原始、最简单的跳转方式,web端常见,在APP中出现较少,标签切换常见,这个比较简单,没什么讲的。

常用于快速开发,Android中常用。

实现难度:无;

维护成本:无。

左右跳转

最常见的跳转方式。(ios原生效果)

实现难度:简单 ;

维护成本:低;

运用场景:夫级→子级→子子级,依次类推。

常用场景:

  1. 对应功能的展开:常以导航形式的存在,如美团首页的美食、电影、住店等分流入口。
  2. 对于内容的展开:如聊天列表>聊天窗;文章列表>到文章详情。
  3. 对于活动广告的展开:banner图广告、弹窗广告等,比较常见。

这里有个细节要注意,就是我们的返回键在左上角,也就养成了用户一种习惯,左上角的键,与点击之后的效果,往往就应该是页面从右侧退出的样子,与进入时反向的效果。

这也是为什么大部分APP不会把入口按钮放在左上角的原因。

那么左上角这个位置,除了给返回键当做固有的位置外。还常常用于抽屉式导航,因为抽屉式导航的方向,与返回时的移动方向是一致的。常见抽屉式导航APP如:滴滴打车、摩拜单车等。

上下跳转

相对于左右跳转,上下跳转就比较难理解了。

实现难度:简单 ;

维护成本:低。

这种跳转方式也很常见,但是大部分人不清楚什么时候用,这里我们简单分析下。

运用场景:

1. 对当前页面创建新的条目时;

2. 独立启动的一个子内容。(如小程序:微信/支付宝等)

比如我们在微信聊天页,发起一个聊天的时候:

还有我们新添加群人员时,新建笔记本时,新建地址时等。

我们用微信聊天页面在举例:点击+号离的内容时:图片、拍照、位置、红包、收藏等,都是采用下到上的方式呈现,因为这些创建都是对当前聊天窗口一次性产生内容。(大家可以去感受一下这些细节)

下面我们看下百度的设置>地址管理>添加地址左右>左右>上下

翻转

实现难度:中等;

维护成本:低;

运用场景:完全切换内容,换到一个全新的内容集合里。

常见的有平安好医生中间的按钮,一级大姨妈APP中间的商城。

联动性

实现难度:高 ;

维护成本:高;

运用场景:元素之间从上级到下级关联性强。

如APP store 每日推荐到介绍页。类似的还有Behance APP的作品展示。国内APP很少有这种联动效果,因为一旦页面结构改变,整个效果基本无法复用。

类似于这种强联动,我们会在很多概念设计稿中看到,但是在实际的APP是很少见到的。因为开发成本/维护成本都很高。

搜索页面打开

这里强调一下搜索页面。搜索页面的进入往往有两种形式。一直是icon做入口,另一种是搜索框做入口。

icon做入口:更像是上下级关系,常用左右跳转来实现。比如:抖音。

搜索框做入口:点击就给与获取光标的感知,所已做好做简单的联动过渡效果。比如:微信、云音乐。

其它方式

关于其它方式,基本上只有极个别的APP中可以看到。

其它的方式,要结合实际的情况来考究。一定要注意关联性。比如微信新出的浮动展开效果,因为元素要浮动,为了更加贴合所以有了收缩的效果。

结语

形式上其实就是上下左右内外。考虑好之间的关联性,给出最符合用户心理预期的过渡方式,就可以帮助我们找到最合适的设计。

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

移动端表单设计准则:酒店表单重构实践

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

表单作为平台与用户联系最为紧密的一环,也是影响商业交易成功与否的重要分水岭。良好的表单设计可以给用户提供流畅自然的交易体验,保证用户购物情绪的正向增长,而混乱无序的表单则引起用户的负面情绪,影响甚至阻碍用户交易的完成,降低用户的品牌好感度和信赖度。


那么在设计过程中,需要怎样规避风险,提升表单页面的产品体验呢?下面我们将结合实际案例,从七个方面介绍表单设计中的常见注意事项。当然,这些规则都是在表单设计中的一般准则,每条准则都有例外。


undefined

01  |  单列浏览

表单承载的主要功能是向用户清楚地传达信息,保持有秩序的单列表单形式更利于用户浏览动线,它能帮助用户识别并填写内容,而多列的表单形式则会破坏用户填写规律,影响效率。

02  |  竖向排列

在表单中有多个选项以供用户选择时,将每个选项以竖向的排列方式位于每个选项下方时,更利于用户阅读浏览的习惯。

undefined


03  |  操作一致

表单填写过程中我们应当避免在整流程中出现按钮样式、颜色的变化。需要用户确认的操作行为的一致能有效减少用户在行动时的困惑和犹豫,确保用户在表单填写过程中的流畅体验,从而实现最终商业上的交易成就。

undefined




undefined


04  |  标题不可取代

虽然通过使用占位符代替标题的方式扩充了表单的填写空间,减少了视觉噪音,但是这种做法并不利于用户的短期记忆。一旦用户触发输入,占位符消失,用户可能会陷入这里该填写什么的迷茫,必须删除所有输入内容后才能再次显示标题,显然,这是违背人性的。

undefined


05  |  输入域符合预期

输入域的长度与预期输入的内容成正比,确保输入字段长度符合用户心理预期,并能在表单中能完整呈现。

undefined


06  |  不隐藏基础帮助信息

作为一个购物流程中的信息确认和采集环节,需要用户对于购买的产品有明确的认知。因此在设计过程中对于用户填写表单有基础帮助的信息应该做强调或显示设计,避免出现因为隐藏帮助信息导致的客户投诉。

undefined



undefined

07   减少二次确认

基于OTA行业特性,出行表单业务对标电商购买表单业务需要填写的信息更为冗长,层级更为复杂,为了减少用户填写过程中的心理负担,降低填写难度,我们需要对不必要的信息进行删减或合并,为用户信息输入提供便利。

以注册环节为例,在Web设计时往往会有二次确认密码的环节,但在移动端这样的操作会增加用户填写的负担,因此大部分移动端界面上我们不建议对用户的密码信息进行二次确认,转而通过使用明文显示或者优化密码消失交互的方法来改善这一环节的体验。

undefined


08  |  *号的使用

沿用通用符号习惯,在表单设计中若是对业务必填的信息,我们往往采用 * 号的形式来帮助用户区分信息优先级。但当表单中必填信息多于非必填信息时,大量 * 号的应用反而会给用户认知增加负担,使得无法快速识别哪些是必须填写的,哪些是不必须填写的。因此在表单设计中,当必填项多于非必填项时,隐藏 * 号标记,转而通过暗提示标记非必填项的形式来帮助用户识别。

undefined



undefined

09   暗提示的应用

暗提示作为辅助用户填写表单的主要方式,在设计上,需要尽可能地减少视觉噪音,确保文案言简意赅,表现形式不干扰用户。因此,对比度过深或过浅,色彩过于突出的都不适合用于暗提示的视觉表现。

在交互上,暗提示也并不是一直存在的。当光标触发表单项时,暗提示保持显示,指导用户输入。而当用户输入字段后,暗提示内容隐藏,让用户专注于已填内容。

undefined


10  |  设置默认选项

在复杂表单中,对于如证件类型、手机区号、国籍等较为通用的选项,为用户提供默认选择的交互可以有效简化操作步骤,减轻用户填写表单的负担,更快地帮助用户完成表单内容的填写。

undefined


11  |  替代输入

对于表单填写过程中可以固化选择的信息,应让用户进行选择操作以代替手动输入,尽可能地让用户减少输入成本。

如:出游人信息采集时,提供添加常用出游人选项可以帮助减少重复填写的负担;证件类型采集时提供证件类型选项可以减少用户困惑,在已有的选项中快速选择;邮箱采集时自动联想显示Email网址可以辅助用户规范文本格式,快速完成表单填写。

undefined


12  |  键盘匹配

根据表单填写类型的不同,自动匹配键盘类型。如“中文输入”呼出中文键盘,“姓名(英文)”输入呼出锁定大写的英文键盘,“手机号码”输入呼出数字键盘……免去用户切换键盘操作的步骤。

同时根据填写步骤,合理的定义键盘右下角的功能键,帮助用户实现换行/完成的操作,省去用户收起点开键盘的重复动作和表单上下填写项的切换,让填写表单的过程更为顺畅,用户思考不被打断。


13  |  按钮层级

在用户面对多个按钮的场景选择时,我们应当帮助用户预先区分出主要行动和次要行动,通过视觉语言强调主要按钮,弱化次要按钮,引导用户进行选择。


14  |  二次确认

因移动端特性,用户在填写场景较为不稳定如吃饭途中、行驶途中等,当用户花费精力填写了部分表单信息后,为了防止用户误操作而丢失已填信息的场景,需要在此时进行二次操作确认,确认用户操作意图。当然,如果用户没有对表单进行任何编辑,这样的退出操作是不需要二次确认的。

undefined



undefined

15  |  多行文本

在复杂表单中,面对填写内容过长的同类表单,用户会在预览时产生输入压力。运用字号、颜色、间距等视觉手段将相似层级的信息进行逻辑分组,帮助用户更好地区分多行文本的信息层级,便于输入。

undefined


16  |  号码组合规律

对于一些常用的号码字段,可以采用线下通用的数字组合规律帮助用户阅读和记忆,如电话号码的组合规律为 3 4 4 ,银行卡号的组合规律为 4 4 4 4 3。空格在数字呈现处的应用虽然细微,但是在长数字的阅读场景中仍能给用户带来识别便利。

undefined



undefined

17  |  选项露出

在网页端表单设计中,用户在表单填写中需要对选项进行选择时,常用的交互形式是在选择器的下拉列表中进行选项的二次点击。而在移动端设计中,触发选择器后的二次点击会增加用户的填写成本。所以在设计时,当选项少于8时,在表单中直接显示所有可选项,当选项超出过多时则在列表浮层中进行选择。


18  |  减少页面跳转

在表单填写中我们期望用户保持专注,尽量避免产生引导用户离开当前页面的填写交互,这种交互跳转很容易打断用户固有的行为轨迹。因此运用浮层、弹窗等交互来完成辅助信息的采集是我们较为推崇的交互形式。undefined



undefined

19  |  关联标记

当用户提交表单信息后,如已填写的内容有偏差,需要明确的标记有问题的数据及错误原因,帮助用户找到问题并解决问题。杜绝报错信息描述模糊,信息不关联的报错信息引发用户困惑。

undefined


20  |  实时校验

在某些业务场景中,为了帮助用户在提交信息前校正他所填写的内容,避免大面积报错场景的出现。我们可以使用实时校验的方法,在用户输入完成后进行判断及结果反馈,如登陆注册流程的验证码校验就可以运用实时校验的报错方式。

当然需要注意的是,运用实时校验的表单需在用户明确离开此项输入状态时再进行结果反馈,而非在填写过程中进行实时校验,避免出现填写时持续报错的情况。

undefined


21   密码保护

在输入密码的表单中,部分平台会在密码输入时显示暗文字段以此保护用户隐私,而鉴于前述第七条准则,移动端的密码已简化至只输入一次,暗文的显示会让用户无法确认所输密码信息。因此在需要隐私保护的场景下,我们需要完善密码交互的呈现形式,当输入时,输入位短暂显示为明文,保持1秒或者保持到下一位密码输入后再变成暗文,这样的交互改善可以确保用户在输入中明确内容,也满足了其隐私需求。

undefined


22  |  提交反馈

在用户完成整个任务环节时,提供成功或失败的反馈能让用户在枯燥的表单填写后有更强烈的情感反馈。所以在设计时,我们需要提供正向的激励夸赞用户表单填写成功,在表单没有完成时鼓励用户修改内容,重新提交,不可以负面情绪责怪用户。

undefined




今年上半年,本着提升途牛产品调性,为内容传达提效的初衷,由途牛UED组织并发起了一次针对现有关键页面升级的项目,在架构升级全量推进初期,我们优先选取了酒店表单业务作为此次设计重构的首选试验点。

表单作为一个偏理性的产品,直接影响着用户决策到产品转化的数据,在此环节,更需要降低用户成本,维持产品决策热情以实现商业价值上的成功。在酒店表单业务改版过程中,除了应用上述七方面的设计准则帮助提升用户体验,我们也结合了酒店现有问题和产品特性进行了更为精细化的设计重构。




整合信息框架

体制让步

对用户来说,途牛是一个整体的产品,所有表单的基础体验应该是一致的。以往,基于企业平台的发展,酒店细分的国内酒店和国际酒店两个业务相对独立,虽然同样隶属于下单环节,但是业务迭代进程及侧重方向的不同导致表单前台呈现差异较大。

借助途牛整体关键页面升级的项目,在此次酒店业务重构初期,协同两个业务的产品、设计、研发我们共同整合资源,解决历史遗留体验问题,为国内、国际酒店表单业务进行整体体验的统一和提升助力。另一方面,UED也通过酒店业务的试点思路,将基础表单框架进行模块细分,逐步影响并推广至全站表单业务升级。

undefined


框架构建

回顾现有酒店表单业务的问题,主要体现在内容层级模糊,类型样式混乱上。这些随着每一次迭代需求增加而新增的表单项,只是基于业务类型进行了单模块的设计,而对于用户来说,差异化的表单项样式无形中增加了填写时信息获取的成本。

基于人体本身的生理构造,我们在获取文本信息时,并不会逐字阅读,往往采用“扫视”的方式识别段落轮廓从而获取信息,规律性的排列方式也会帮助持续这种“扫视”的节奏,提升信息转化效率。

因此在设计上我们遵循相似信息一致性的原则,简化重复冗余的视觉噪音,将每个单元表单项模型遵循“上类型+下内容”的形式帮助用户快速对所需填写的表单类型建立心理预期。在大量相同的填写区域,统一左侧内容标题对齐方式,并通过字色、字重等形式确保未触发时内容标题为主,暗提示为辅,填写后填写内容为主,内容标题为辅的视觉表达,从而在表单的不同阶段仍旧保证了用户对于主次信息的识别体验。

undefined


品牌信息传达

为了减弱表单填写页冰冷感,在框架信息整合的基础上,我们此次改版也将品牌解构,用色彩的形式融入表单页面设计,将品牌功能化,辅助产品以深化品牌用户心中形成立体感知。

当然品牌功能化的融入也需要有所限制,此次我们主要从氛围、控件、操作、提示这四个方面展开,在不影响表单主要信息呈现的基础上,遵循适度、适量两个原则。

undefined




内容层级排序


用户吸引

回顾整个购买流程,填写订单业务承担着维系用户在产品详情所产生的内容吸引到内容转化的责任,而如何在枯燥的酒店表单中维稳甚至加固用户的内容吸引?为此,我们参照了《Actionable Gamification》关于人性八大核心驱动力中的“拥有感&占有欲”和“失去&避免”这两条来帮助我们。

undefined

结合对用户使用场景的需求分析,我们将信息在用户心中的关注度进行了重新排序,首屏弱化了用户已经在详情页明确的酒店名称,转而对用户需在此环节明确的房型、入住时间、离店时间等内容进行了强化和整合,明确产品归属。同时为了加固用户的内容吸引,我们前置了酒店“超值价”、“可免费取消”等信息来解除用户对于产品价格和沉没成本的疑虑,从而正向地激励用户完成后续的表单填写。

undefined


细分模块

除了对首屏信息的排序重置外,对于需要用户填写的每个单元模块我们也做出了一些调整。

如取消险模块,此前为避免客诉,将所有需要用户确认和查看的信息都进行了高亮提示和行动引导。这些信息虽然是我们需要用户知道的,但并不一定是用户在填写时想要详细了解的,过多的信息干扰反而影响了有用信息识别,也降低了用户填写表单的效率。因此新版表单重构时我们将协议信息整合至末尾统一确认,同时对文字、icon进行视觉减负,统一弱化辅助信息呈现,转而强调用户需要确认的取消险金额和投保人模块。

undefined

从上图国际酒店改版前后的方案进行对比可见,每个细分模块都有着或多或少细节的调整,当然还有没有展现的辅助信息交互浮层框架的统一。这些信息呈现的形态与交互的逻辑也都遵循着前文“保持秩序、描述清晰、化繁为简、帮助用户、信息分组、减少跳转、及时反馈”这七大原则,每一个细节都可以展开来细细剖析,这里就不多加赘述了。




结语

蚍蜉亦可撼树,在产品升级的过程中,用户体验的提升往往需要依靠像表单这样一个个微小的业务作为突破点,从而裂变反哺至全局。此次酒店表单重构项目从产品角度来看,功能上并没有改变,而通过代入用户场景,用户感知,用户行为习惯等方面进行细节的体验升级。后续我们还将进行更加深入地探索与迭代,将体验升级持续扩散至其他业务,为每一位途牛用户带来更便捷、更自然的出行体验。

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

特价商品价钱页设计,不管怎样,得热闹起来!

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

 

 

微信图片_20190306095930.gif微信图片_20190306095951.gif微信图片_20190306095953.jpg微信图片_20190306095956.jpg微信图片_20190306095959.jpg微信图片_20190306100002.jpg微信图片_20190306100006.jpg微信图片_20190306100056.jpg微信图片_20190306100052.jpg微信图片_20190306100049.jpg微信图片_20190306100046.jpg微信图片_20190306100042.jpg微信图片_20190306100026.jpg微信图片_20190306100020.jpg微信图片_20190306100059.jpg微信图片_20190306100102.jpg微信图片_20190306100106.jpg微信图片_20190306100108.jpg微信图片_20190306100112.jpg微信图片_20190306100114.jpg微信图片_20190306100117.jpg微信图片_20190306100139.jpg微信图片_20190306100137.jpg微信图片_20190306100133.jpg微信图片_20190306100130.jpg微信图片_20190306100126.jpg微信图片_20190306100123.jpg微信图片_20190306100121.jpg微信图片_20190306100143.jpg微信图片_20190306100147.jpg微信图片_20190306100150.jpg微信图片_20190306100154.jpg微信图片_20190306100157.jpg

 

 

 

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

交互设计中的“所见即所得”原则

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

交互设计中的“所见即所得”原则


“所见即所得”原则我记得在之前的文章中就提到过,但是没有详细说明。最近在体验一些产品时,发现很多交互设计上的坑都可以归纳到“所见非所得”上。




所见非所得




我们可以首先来看一下“所见非所得”的案例:上周寄件去北京,在填写收件人信息时候,发现了一个“智能填写”的功能很有意思。所谓“智能填写”就是OCR识别技术,系统可以识别图片上的地址。例如,你的收件人地址正好是身份证上的住址,那么你就可以上传身份证照片,系统直接识别照片上的地址而不需要手动去输入。


Image title


用户具体的操作流程是:




1 拍摄/上传照片;




点击“上传图片”按钮,用户可以选择拍摄或者上传相册里的照片,框选合适的识别区域;




2 系统识别并展示结果;




系统会自动识别图片中的地址信息,并且在输入框中展示,如果有识别错误的地方,用户可以手动编辑修改;




3 用户确认;




用户对地址信息确认无误了,点击“智能填写”按钮,输入框里的地址信息会自动回填到地址栏;


Image title


了解了大致流程,我们来看一下两款竞品。产品A和B都提供了“智能填写”的功能,但是在交互设计上存在差异。产品A,当用户上传完图片才会出现“智能填写”按钮;产品B是全程展示“智能填写”按钮的。我个人更加偏爱产品A的处理模式,因为当用户都没有上传图片时,给用户展示“智能填写”按钮是没有任何意义的,这里的“智能填写”虽然可见但是不可得,用户也不能点击。当然有人会说,虽然不可点击,但是展示了也没什么问题吧?当然有问题,它会给用户带来两个痛点:




1) 增加了用户的学习成本;




对于新用户来说,产品A肯定更加容易上手。因为新用户一进入这个页面,只能看到上传图片的按钮,用户明白了我首先要上传图片。产品B是直接一股脑的把所有选项展示出来,用户不知道这些选项之间的联系和操作顺序。




2) 阻断正常操作流程;




给用户展示了他们本不应该看到的元素,可能会阻断正常的操作流程。用户如果还没上传图片,就点击“智能填写”按钮会直接报错,“所传参数不能为空”,用户哪里看懂这是什么意思。


Image title


之前在火车站取票,前面排队的大婶跟我说她的票取不了。我凑过去一看,发现她没有关闭购买保险的弹框。因为这个弹框没有盖住底部“确认打印”按钮,用户误以为还是可以点击的,导致无法正常完成取票流程。


Image title


了解到这些痛点,那么如何才能在交互设计上实现“所见即所得”原则呢?我总结了两个方法:限制和就近。




限制原则




了解限制原则,我们需要回答两个问题:




1)为什么要限制?




因为多才要限制,多会带来哪些坏处?内容多,用户处理不过来;选项多,用户挑花了眼;时间多,优惠券没有有限期限制用户懒得用。




2)限制什么?




限制用户与界面交互的触点。还是以智能填写为例,当前界面有三个触点:上传图片按钮、输入框、智能填写按钮。这三个触点分别对应着步骤一、步骤二和步骤三。如果我们在步骤一的阶段给用户提供了步骤三的触点,保不齐会有用户尝试去交互,这样的无效操作会触发报错场景。所以当用户处于一个线性的操作流程中,根据用户所处的阶段,分析用户可能进行交互操作,提供交互触点,保证用户看到的触点都是可交互的。




罔顾用户的操作阶段,一股脑的把所有触点都提供给用户。设计师倒是很省心,但是用户却会很糟心,他们需要花时间去判断和分析每一个触点的作用以及它们之间可能存在的联系。这个工作应该由我们代劳,我们来分析用户处于不同阶段所需要的功能触点。




举个知乎的例子,知乎有一个“向知友提问”的功能。但是这个按钮只会在用户滑动搜索结果页3屏后才会出现,因为滑动了3屏,我们可以猜测用户对当前的搜索结果不满意,引导用户去提问。


Image title


当然限制原则不仅仅是限制交互触点,还可以应用到产品逻辑中,帮助用户解决很多问题。我曾经遇到过一个场景,公司上线了一款优惠券,用户点击“立即领取”按钮即可领取。但是有些用户会被风控判定为了风险等级过高,导致领取失败。对于这个报错文案,我们改了好几版,但是每次都会收到用户的投诉。我们无法直接告诉用户,你是因为风险等级过高导致无法领取,因为用户风险等级过高是因为开通了某项业务。当时开通的时候,我们并未告知开通后会被判定为高风险用户。所以为了不必要的麻烦,最好的办法就是进行判断前置,如果判断用户为高风险用户那么就直接不展示该优惠券。




就近原则




从上面的阐述中,我们可以发现“所见即所得”原则最根本的目的是为了节省用户的操作时间,提升产品易用性。广义的操作时间还应该包括了用户对于反馈的感知时间,因为只有充分理解系统反馈的信息才能进行进一步的操作。如何帮助用户快速的消化反馈的信息呢?因为反馈是系统对于用户操作的回应,那么我们可以让操作和反馈尽量的贴近一点,这就是就近原则。就近原则可以分为两类:位置就近和形式就近。




1) 位置就近




所见即所得,这里的“所见”即代表着用户的视线,而用户的视线总是停留在上一个交互触点附近。


Image title


例如,还是寄件的场景,要填写发件人信息,我懒得重新填写一遍地址,正好看到输入框右边有一个附近地址的功能。我点了一下,没有反应,又点了几下才发现底部出现了一个“附近地址”的列表。这里的交互触点是“附近地址”的文字链接,我的视线也是停留在附近,没有注意到下拉列表已经出现在底部。操作和反馈完全不在同一视觉区域。




2)形式就近




形式就近,这里的形式特指反馈形式。目前最通用的反馈方式是弹框,弹框的弊端也就恰恰在于它的“通用”上。所有类型的反馈都可以用弹框来承载,用户无法立刻感知到弹框所传递内容是什么。既然反馈是系统对于用户操作的回应,而用户操作又是一个个交互触点所触发的。如果我们可以通过改变触点自身形态的变化来完成信息的传递,用户感知起来会更加容易。


Image title


举个例子,用户在输入登录密码的时候,其触点是输入框。当用户密码输入错误的时候,我们可以通过抖动输入框的方式告知用户输入错误,这里抖动是现实生活中“摇头”的映射,我们都知道摇头代表着否定的意思,用户不用看到弹框上的“密码错误”几个字也能明白密码输错了。




总结




以上就是我对交互设计中“所见即所得”原则的总结和分析,如果你有不同的意见和看法,欢迎留言或者加群讨论

 

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

怎么样丰富您的界面,价格页签的设计。

用心设计

微信图片_20190228174510.gif微信图片_20190228174544.jpg微信图片_20190228174548.jpg微信图片_20190228174528.gif微信图片_20190228174600.jpg微信图片_20190228174607.jpg微信图片_20190228174537.jpg微信图片_20190228174540.jpg微信图片_20190228174551.jpg微信图片_20190228174620.jpg微信图片_20190228174617.jpg微信图片_20190228174613.jpg微信图片_20190228174557.jpg微信图片_20190228174554.jpg微信图片_20190228174623.jpg微信图片_20190228174626.jpg微信图片_20190228174629.jpg微信图片_20190228174632.jpg微信图片_20190228174635.jpg微信图片_20190228174637.jpg

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

 

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

上万字干货!超全面的网页设计规范:文字篇

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

文字是界面设计中最基本的构成之一,如何定义网页设计中的文字系统?可大体分为三步:

  1. 系统全面地了解文字的基础知识、显示方式、影响因素及当前网页设计中适合的文字系统;
  2. 梳理出自己团队所有产品文字使用情况;
  3. 综合第1步、第2步总结出适合团队业务的文字系统。

字符屏幕显示原理

1. 字符

字符是指计算机中使用的字母、数字、标点符号等等。

计算机最初发明出来是用来解决数字计算问题的。

后来发现,计算机还可以做更多的事,例如文本处理。其实计算机挺笨的,它读到的所有字符都是由1和0组成的字符串,因为计算机电路只有两种状态,「开」和「闭」,对应「1」和「0」。计算机也只可以直接存储和处理二进制数字。

2. 二进制

「二进制」是数字世界里的基本规则。

下面这些不同格式的文件,在本质上都是一串由1和0组成的代码,要了解这些文件首先要了解二进制。人有十根手指头,但计算机电路只有「开」和「闭」两种状态,所以满十进一位的计数方式更适合人类计算,而满二进一的二进制更适合计算机。计算机只需要1和0这两个数字就可以传递一切信息。

△ MP4

△ MP3

△ JPG

△ TXT

△ AVI

以图像为例,我们用电脑或手机看到的图像都是在某个角落里存储着下面这样的一串数据。开头的16位翻译过来就是 BMP文件开始的标识。

BMP文件标识后面的数字就是图像的各项基本信息。

△ 图像的各项基本信息

△ 颜色深度

最开始的24位,都是1,像素显示为红、绿、蓝三种颜色,相加后显示为白色。

接下来的24位,前8位是1,后面都是0,像素显示为红色。

再后面24位的前16位都是1,最后8位为0,像素显示红、绿两色,相加后显示为黄色。

根据这样的规则整个55×55的格子铺满颜色就得到一张完整的图片。所以一个 BMP图像文件中的1和0就在逐个记录图像中每一个像素点的颜色。

△ 二进制图片生成方式

△ 色光三原色和颜料三原色区别

下面所有文件的显示都和图像显示例子一样,文件中的1和0按照人们事先设计好的规则排列好,只需要找到正确的打开方式按照特定的规则来解读这些数据,我们就可以获得其中的信息。我们怎么才能知道某一个文件的1和0究竟是按什么规则排列的?我们又要用怎样的方式来解读?这就用到了扩展名,在文件的名字后面加几个特定的字符,就可以帮助系统辨别出文件的类型,从而提示电脑去按照某种特定的规则来正确解读其中的信息。

△ MP4格式扩展名

△ MP3格式扩展名

△ JPG格式扩展名

△ TXT格式扩展名

△ AVI格式扩展名

更多其他文件拓展名:

3. 字符编码

为了在计算机上显示字符,必须将字符转换成二进制数字。所以就有了统一、标准字符转换规则,即字符编码。字符编码是给所有的汉字定一个的数字编号,并用1和0来表示这个数字编号。

文字的一个字符对应一个编码(码点),而编码对应字符集里的一个「字」,字符通过字符集与「字」相连。像图中所示Unicode、GB 2312、Shift_JIS 都是字符集,其主要作用是为每一个「字」分配一个编码。

△ 文本编码流程

字符集里的每一个编码对应的是一个「字」而不是「字形」,也就是一个「字」在不同的地区或标准中可能有不同的「字形」,但字符集中只能对其分配一个编码(除非相差过大,比如简化字),要显示其不同的「字形」要通过使用为不同地区或标准设计的字体来实现。

△ 字异形(左简体中文,右日文)

4. 编码发展史

ASCII

ASCII(American Standard Code for Information Interchange,美国信息交换标准代码)出现在上个世纪60年代的美国,ASCII 一共定义了128个字符,包括英文字母 A-Z,a-z,0-9,一些标点符号和控制符号。ASCII 采用的编码模型是简单字符集,在英语系国家里 ASCII 标准很完美。但是世界上有好几千种语言,其他语言系的国家想使用计算机,ASCII 就远远不够了。所以编码进入了混乱的时代。

△ ASCII编码

混乱时代

计算机的一个字节是8位,可以表示256个字符。ASCII 使用了7位,所以人们决定把剩余的1位也利用起来。人们对于 ASCII 已规定好的128个字符没有异议,但是不同语系的人对于其他字符的需求不一样,所以对于剩下的128个字符的扩展千奇百怪。而且在亚洲语言系统中有更多的字符。于是就又产生了各种多字节表示一个字符的方法,每个语系都有自己特定的编码页(code pages),这就使整个局面更加混乱不堪。这时 Unicode 出现了。

Unicode

Unicode 就是给计算机中所有的字符各自分配一个代号。Unicode 可以认为是字符的编号,它为每种语言中的每个字符设定了统一并且唯一的二进制编码,Unicode 字符集和编码方式解决了跨语言、跨平台的交流问题。但在 Unicode 里每一个字符都是用4个字节来编码,原本英文字母仅需1个字节编码,中文需2~3个字节编码即可,这对于存储或传输资源而言是很不划算的。

UTF-8

UTF-8 基于 Unicode 编码的一种节约字节的编码,是一种可变长度字符编码方式。在UTF-8编码中,英文字母是一个字节,中文(非生僻字)是2~3个字节。可以认为, UTF-8 是对 Unicode 的一种压缩算法。UTF-8 等编码方式有效的节约了存储空间和传输带宽,因而受到了极大的推广应用。并且 UTF-8 兼容 ASCII 字符集。

UTF:Unicode Transformation Format

5. 中文编码类型

△ 中文编码类型

文字基础知识

1. 文字

「文字」是信息交流的工具,可读性、易读性至关重要。在网页设计中文字使用需要考虑几个要素:首先考虑字体,其次是字重、字号、行高、字间距、行间距、段间距等。

△ 字体、字重

△ 字间距、字号、行高

△ 行间距、段间距

2. 字体

「字体」是文字的外在形式特征,不同的字体有不同的性格。

字体种类

综合中文、英文都适用的广义分类。

衬线、无衬线

△ 衬线和无衬线差异1

△ 衬线和无衬线差异2

字体 – 中文

字体构成:

△ 笔画

中宫,是指等分成九个小方格最中间的那一格。

△ 中宫

△ 中宫和字体关系

△ 中宫紧凑、中宫松散

间架结构,汉字种类众多,笔划不等,空间排布极为重要。字体的间架结构可分为两类:单体字、合体字。

△ 单体字 间架结构

△ 合体字 间架结构

汉字字形众多,有些字形会产生视觉大小变化,顶格、缩格、出格就是针对不同结构的字体笔画特征进行微调,让他们看起来更加均衡、等大、视觉更完整。

△ 调整前

△ 调整后

字形调整实例:

衬线、无衬线字形演变:

△ 衬线 字形演变

△ 无衬线 字形演变

字体对比:

微软雅黑、方正兰亭黑简体、思源黑体、苹方-简,笔画宽度均匀,横平竖直。同一字号,微软雅黑最粗,小字号时阅读会较为吃力。方正兰亭黑从微软雅黑派衍生出来,可以更好地适应其他应用场合。

黑体、华文黑体、冬青黑体笔画末端宽度不同。

字体 – 英文

「字谷」概念来自西文字母设计,字谷指字母中部分或完全封闭的空间,即字母当中留白部分。

英文的字体结构是由4条平行线组成,有时候是5条,但是一般大写线会忽略。「基线」在西文中是标准,单个字母的所有立脚点都是在这条线上(除了 g、j、p、y)。英文文字结构多种多样,4条平行线的位置也会发生改变。

升部:上缘线和主线之间的内容。

降部:下缘线和基线之间的内容。

字体对比:Helvetica Neue、Arial、DIN

Helvetica Neue:中性,无衬线,现代主义风格字体。字体末端严格保持横平竖直,性格严谨、保守,没有任何的修饰,适合不同分辨率的显示器。该字体是 Helvetica 字体的升级版本,拥有更多的字重,更易于不同场合的应用。字形则相对偏胖,笔画更清晰,而且小字号的情况下可读性也很高。

Arial:Arial 是一套随同多套微软应用软件所分发,无衬线。该字体比例及字重和 Helvetica 极相似,其实是 Monotype Grotesque 系列的衍变。在字体及字距上都做了一些细微的调整和变动,以增加它在电脑屏幕的不同分辨率的可读性。

DIN:字形瘦长,无衬线,适合显示比较长的数字,但是小字号的情况下识别度较低。DIN 字体在德国有着悠久历史,是交通标志、路牌、门牌和车牌的标准字体。虽然曾经是德国纳粹使用的字体,但是经过设计和重新升级。DIN 在杂志、海报以及其他各种设计领域都被广泛地使用。

Helvetica Neue、Arial、DIN 数字对比:

3. 字重

「字重」是同一种字体的不同字形粗细,即字体重量。字重的划分根据不同字体厂商各有不同,不同的字重称呼也可以不一样,常见的划分如下:

在排版中,一种字体会在标题、正文、说明注释等不同内容下使用,单一的字重不能很好适应排版需求,于是衍生出了同一个字体的不同字重。

4. 字号

「字号」是字体的高度,不同平台字号规范不同。

在界面设计中,文字字号决定了信息层次和权重。首先要设定基准字号(最小字号),然后可依据一定规律设定导航、标题等稍大字号。一般网页基准字号有12px、14px、16px等。

字号也受阅读距离影响,眼睛到屏幕距离40~70cm,为较适合的阅读距离。

Ant Design 定义的电脑显示器阅读距离(50 cm)从原先的12上升至14,以保证在多数常用显示器上的用户阅读效率最佳。

5. 行高

「行高」可以理解为一个包裹在字体外面的无形的盒子。字号和行高决定着一套字体系统的动态与秩序之美。

西文:西文基本行高是字号的1.2倍左右,字体有上伸部(ascender)和下延部(descender)可来创造行间空隙。

中文:中文因为字符密实且高度一致,所以一般行高需要更大,根据不同人群的特点(儿童、年轻人、老年人)以及使用环境,可达到1.5~2倍甚至更大。

Ant Design 受到5音阶以及自然律的启发定义了10个不同字号以及与之相对应的行高。

6. 字间距

「字间距」是指一组字母之间相互间隔的距离,受字偶距和字体影响。

字偶距:是指两个字母(或其他字符,比如数字,标点符号等)之间的空白。不同的字母有不同的外形,所以字体使用相等的字间距是不协调的。所以需要调整字偶距来提升可读性。

按字间距可分类为:比例字体(Proportional)和等宽字体(Monospaced)。

比例字体:根据字符外形特点设置不同字距的字体,这种字体外形协调,可读性好。

等宽字体:每个字符设置相同字距的字体,其优点是可以很好的控制排版对齐。

7. 行间距

行间距(line spacing / leading):行与行之间的距离,作为一段文本中的留白,行间距让字与字之间有了可呼吸的空间,行间距对文章的易读性有很大影响。

排版推荐使用行间距1.2~2倍。

如何设定行间距,如何规范行间距

行间距由行高决定,为了确保可读性增加行间距,就需要增加行高。举个例子:字号12,行高设定20,那么行间距=「(行高-字号)÷2」×2,除2又乘2,我就简单的简化成行间距 = 行高 – 字号,那么行间距就是20-12=8,并且可以将这个数值固定下来,重复使用。

注:至于为什么是20,因为最初一个字节用8个二进制位来表示,所以现在的很多网页设计中常用到8。12+8=20,参考 Ant Design,网上有很多设计师总结的行间距计算方法,对于一个数学不好的我来说,参考已有总结和经验得出的数值,固定这个数值重复使用,这样最简单。

8. 段间距

段间距(paragraphs spacing):段落与段落之间的距离,可保持页面节奏,与字体、行高相互关联。为保证文章易读性,正文段间距,可以简单地取一个空行(也就是一个行高),这是比较常规也比较合适的做法。举个例子:字号12,行高设定20,段间距 = 行高 + 行间距。

小结

要设置「有节奏感的文本内容」就要遵循这些规则:段间距大于行高,行高大于行间距,行间距大于字间距。

字体选用基础原则

1. 网页文字显示方式

网页设计内容一般都是通过电脑各种浏览器来承载显示的,浏览器显示字体是直接读取用户操作系统里的字体。

2. 字体选用原则

字体是界面设计中最基本的构成之一,科学的字体系统:始终保证信息具有优秀的易读可读性,提升用户的阅读体验及工作效率。

  • 原则一:字体优先使用各操作系统默认的字体。
  • 原则二:有版权、笔画严谨、清晰可读、经典。

3. 操作系统

下图数据来源:世界互联网市场份额统计网站 Net MarketShare。

△ 操作系统市场占有率 TOP10

各操作系统默认字体:

4. 浏览器

电脑浏览器直接读取用户操作系统里的字体,不同浏览器对文字的渲染方式不同,因此了解市场浏览器使用情况很有必要。

下图数据来源:世界互联网市场份额统计网站 Net MarketShare

5. 字体版权

除了操作系统默认字体,其次需要优先选择使用的就是已购版权字体,如果没有已购买的字体,可考虑一些免费字体,非免费字体使用时需谨慎。

△ 公司常购版权字体

文字规范

1. 字体规范

字体使用三原则

体系化:在同一个系统UI设计中先建立体系化的设计思路,对主、次、辅助、标题、展示等类别的字体做统一的规划,再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性,提高字体应用的性价比,减少不必要的样式浪费。

重复:重复设计中出现的一个或多个内容。任何事情都可以重复。字体、字重字号、颜色、一条线、各种形状(如圆形、正方形或三角形)等。字体使用最好不要超过3种,一般同一个系统UI设计内容的字体数量建议2种即可,中文一种、英文数字一种。且字体样式上也遵循重复原则,避免毫无意义的使用大量字号、颜色、字重、行高等。

韵律:在需要拉开差距的时候可以尝试选择对比大的字体字号,令字号之间产生一种微妙的韵律感。为保证良好的阅读体验,每行保持适当的字符数量。每行上拥有适当的字符数量是文本可读性的关键。如果每行文字太短,视线必须反复折回来,打破读者的节奏。如果一行文字太长,用户的眼睛将很难专注于文本。英文无特殊要求避免使用全大写字符,因为会大大延缓用户扫描和阅读的速度。

现有产品字体统计

字体规范

综合考虑不同操作系统选用最佳字体体验。

代码声明:

  • Font-family:Helvetica Neue, Helvetica, Arial, 「苹方-简」, 「Microsoft YaHei」, 「微软雅黑」, sans-serif。
  • 英文字体:首先查找Helvetica Neue(Mac),然后查找Helvetica(Win),都找不到就用Arial(Mac&Win);若是以上三者都缺失,则使用当前默认的sans-serif字体(操作系统或浏览器指定);
  • 中文字体:选用平台默认中文字体 苹方-简(Mac),微软雅黑(Win)。
2. 字重规范

一般情况下会选用「一粗一细」两种字重。

粗体:在视觉面积上较重,笔画加粗,字腔(笔画间空间)小,突出显示,产生强调作用。常用于标题和标语。

细体:在视觉面积上较轻,笔画轻细,字腔(笔画间空间)大,结构疏朗清透,阅读时不会让读者产生压迫感。常用于正文和说明。

中文、英文推荐使用字重:

3. 字号规范

现有产品字号统计

字号规范

4. 行高规范

参考:Ant Design 受到5音阶以及自然规律启发定义了10个不同字号以及与之相对应的行高。

5. 字间距规范

使用比例字体,根据字符外形特点设置不同字距的字体,这种字体外形协调,可读性好。

6. 行间距规范

颜色规范

1. Ant Design 两大色彩体系

Ant Design 两大色彩体系:系统级、产品级。

系统级色彩体系

系统级色彩体系主要定义了蚂蚁中台设计中的基础色板、中性色板和数据可视化色板。

  • 基础色板:12个主色(薄暮/火山/日暮/金盏花/日出/青柠/极光绿/明青/拂晓蓝/极客蓝/酱紫/法式洋红)以及衍生色共120个颜色。
  • 中性色板:黑、白、灰,从白到黑共10个颜色。
  • 数据可视化色板:敬请期待。

产品级色彩体系

产品级色彩体系则是在具体设计过程中,基于系统色彩进一步定义符合产品调性以及功能诉求的颜色。

  • 品牌色应用:品牌色取自基础色板的蓝色#1890FF,应用场景包括:关键行动点,操作状态、重要信息高亮,图形化等场景。
  • 中性色:中性色主要应用在文字部分,此外背景、边框、分割线等场景中也非常常见。
  • 功能色:功能色代表着明确的信息及状态,如成功、出错、失败、提醒、链接等。
2. 系统级 中性色

中性色包含了黑、白、灰。在网页设计中被大量使用,合理的选择中性色能够令页面信息具备良好的主次关系,助力阅读体验。中性色板一共包含了从白到黑的10个颜色。

3. 产品级 中性色

Ant Design 的中性色主要应用在文字、背景、边框、分割线等场景中。产品中性色的定义需要考虑深色浅色背景的差异,同时结合 WCAG 2.0标准。中性色在落地的时候是按照「透明度」的方式实现。

VIP大数据用户体验部 的中性色也是主要应用在界面的文字、背景、边框、分割线等场景中。考虑到深浅色背景的差异,中性色根据设计需求在落地的时候可按照色值和透明度两种方式实现,两种方式优先使用色值方式,尽量避免两者混搭使用。

4. 产品级 功能色

功能色代表了明确的信息以及状态,比如成功、警告、失败、提醒、链接等。

功能色的选取需要遵守用户对色彩的基本认知。在一套产品体系下,功能色尽量保持一致,不要有过多的自定义干扰用户的认知体验。

文案

文案内容来源于 Ant Design,一文一字之间可研究琢磨的空间还很大。

分享一个感触很深的例子,里面有一个专业用语「阈yù值」和「阀fá值」,这两个字一开始我看了很久才看出来区别,查资料了解到,其实「阀fá值」在专业行业里是一个错别字,是一个错误的用词,其正确用法是「阈值」是所属行业认可通用词。「阈yù值」又叫临界值,是指一个效应能够产生的值或最高值。

所以精准、清晰的语言会更容易让用户理解,合适的语气更容易让用户建立信任感。因此在界面设计时,在使用和定义文案时要注意以下几点:

  • 从用户角度出发;
  • 表述一致;
  • 重要的信息放在显著位置;
  • 专业、精准、完整;
  • 精简、友好、正面。

在有限的空间内将重要的信息放在最前面,让用户第一眼看到最重要的内容。(或通过高亮、留白等方式突出重要信息)。

结语

因为硬件软件一直在变化,设计规范和内容也要定时更新,规范是为了在繁多复杂业务中寻求一种平衡,帮助各团队更的完成任务,有些内容适合强制规定,有些内容适合规范一个范围,有些内容适合制定一种规律方法……当出现特殊情况时需要重新审视和不断完善灵活使用。

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

 

为人设计,请说人话

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

UXRen

打造有价值产品的首要规则是,它应该对某些人有真正的使用价值。也就是说,一个真实的人(或许多个人)会因为你的工作而解决了某些问题或实现了某些需求。

这个道理是显而易见的,但是,如果你去听一听这些产品设计们的日常用语,就会发现,在日常生活中,我们不常这样说。

反而,在语言交流中,设计师经常会“走捷径”。有时会直接使用行业语言或专家术语来提高表达度,但大多数情况都是为了避免废话。

举例来讲:

  • 我们要如何增加用户对这种功能的使用?
  • 为什么这两方面看起来不够统一?
  • 这里的点击率这么低,可能我们太过强调了。
  • 我感觉这里干扰信息太多了,要怎么解决这个问题?
  • 这个设计需要更多“呼吸空间(留白)”。
  • 我们应该将这点设计地更简洁一些。
  • 这一指标需要提升,现在的曲线走向并不理想。

想象一下,当用户听这些话时,他们能相信我们的最终目的是为他们创造价值吗?

当然,我们在使用语言捷径时,其实是在把我们脑海中的各个点连接起来,这种基于对内容的理解,在脑海中将一个概念与另一个概念联系起来的思考方式——就像是火车在有序的系统中飞驰而过,直到停留在人们期待的站台上一样。

但在实际交流中,有可能出现两种完全预料不到的结果:

第一种情况是,当与一个认知和你不太一致的人交流时,你认为重要的事情,对方有可能完不理解为什么这样。

比如说,作为一个设计师,当我说“为什么这些东西不一致”的时候,我自己的逻辑是这样的:

不够一致=> 这些东西虽然看起来很像,但当点击的时候,可能有人会选A,也有人会选B=>这就会使用户困惑,并且影响他们从我们构建的内容中获得最大的价值。

其他精通设计语言的人,一般而言都会跟我一样的思考问题。比如,让东西“简洁”其实是指让它专注于最重要的点,以便人们能一眼就知道如何使用它。让界面“可以呼吸”则是指让人们在阅读或者浏览时能更轻松愉悦。

但如果你并没有建立这些认知连接,你可能会不解:一致性、简洁性和可呼吸空间为什么这么重要呢,这些价值观看起来是不是有点随意?而且这些疑惑有可能是对的,为了一致性而保持一致也许并没有必要。如果这世上没有人会对两个看起来相似但反应不同的事物感到困惑的话(假设开发成本投入不算很大的话),那么这不会是一个问题。

许多工程师和产品经理跟我讲过,关于“一致性”的讨论经常意见很难统一,但当我说“目标是让用户感觉没有困惑”时,争议就不存在了。

使用“语言捷径”的第二个意想不到的后果是,我们有可能会忽视真正的最终目标。你看待问题的方式和角度会更多地从公司出发而不是用户真正面临的问题。

举个例子,我们要如何提高这一功能的使用率?这可能并不是任何一个你的用户会关心的问题,在讨论这一问题的时候,你有可能会开始从公司角度思考解决方案,比如让功能更显眼,不断提醒用户这一功能的存在等。

但其实这些做法只有在强调的功能的确很重要的时候,才会起作用。但如果这一功能的使用率本来就低,那么更有可能说明这一功能对用户而言没那么重要。如果你没有真正以人为中心来思考问题,很难发现这一点。

归根结底,虽然语言只是一个小的方面,但我相信它是非常重要的。多关注一点在工作时使用的谈话方式,如果你是为人设计的,那么请用人们更熟悉的语言。

举例来讲:

  • 我们要如何增加用户对这个功能的使用?=> 是什么让这个功能对人们更有价值?
  • 为什么这两方面不够统一?=> 让我们确保,用户不会因为这两个看起来相似但有不一样功能的东西而感到困惑。
  • 点击率真的很低,可能是因为强调得不够。=> 人们可能会意识不到这个功能的存在,因为这实在太容易被忽略了。
  • 我们发现很多用户流失,我们该怎么办?=> 那些试用过我们产品的用户不会再回购,为什么会这样呢?
  • 这个设计需要更多的呼吸空间。=> 用户阅读浏览信息的体验应该更轻松、愉悦。
  • 我们应该将这点设计地更简洁一些。=> 用户应该能在第一眼就注意到最重要的信息,并知道他们应该做什么。不该用过多的选择给用户压力。
  • 这一指标需要提升,现在的曲线看起来并不理想。=> 我们的产品还没能让用户觉得足够有用,从而进一步回购,所以我们应该提升我们所提供的价值。
  • 蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


这不是EDM,这只是邮件回执。

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 回执单的界面设计;

 微信图片_20190228174510.gif微信图片_20190228174528.gif微信图片_20190228174537.jpg微信图片_20190228174540.jpg微信图片_20190228174544.jpg微信图片_20190228174548.jpg微信图片_20190228174551.jpg微信图片_20190228174554.jpg微信图片_20190228174557.jpg微信图片_20190228174600.jpg微信图片_20190228174607.jpg微信图片_20190228174613.jpg微信图片_20190228174617.jpg微信图片_20190228174620.jpg微信图片_20190228174623.jpg微信图片_20190228174626.jpg微信图片_20190228174629.jpg微信图片_20190228174632.jpg微信图片_20190228174635.jpg微信图片_20190228174637.jpg

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

百度行业首发《2019.AI人机交互趋势研究报告》

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

人工智能已经成为新一轮科技革命和产业变革的核心驱动力,正在对世界经济、社会进步和人类生活产生极其深刻的影响。其中,普罗大众对人工智能感知最为深切的当属人机交互。语音交互、人脸识别等人工智能技术已经化为应用产品走进了我们的生活。近日,百度人工智能交互设计院发布了一份聚焦于未来3年内的AI人机交互趋势研究报告(以下简称“《报告》”)。


该报告是百度人工智能交互设计院基于过去一年多对AI领域前沿技术、产品和设计的深入研究和洞察,结合产业界和学术界的经验探析而来。AI赋能的人机交互革新了大众的生活形态,未来,AI加持的人机交互模式又会呈现出什么样的态势呢?


《报告》从“人机交互介质”、“交互对象”、“AI应用场景”、“人机关系”等方面总结了AI人机交互的八大趋势。


趋势一:语音交互技术进步,更趋向人类自然对话体验


研究公司Ovum预测称,到2021年,地球上的语音助手的数量会和人类一样多,人们会越来越倾向于向语音助手寻求情感上的帮助。在AI人机交互中,语音交互技术在用户终端上的覆盖最为广泛。


以智能音箱为例,有数据显示,2018年全球智能音箱市场同比增长200%。其中,中国智能音箱市场增速达到罕见的5370%。谷歌、亚马逊、苹果等全球巨头企业均加速了用语音交互技术开启大众智能生活的步伐。截止2018年12月31日,搭载百度对话式人工智能操作系统DuerOS的智能设备激活量也已超2亿。


目前,语音交互技术已经加速在智能家居、手机、车载、智能穿戴、机器人等行业的渗透和落地。《报告》指出,未来随着语音技术的不断完善,语音交互的自然度将进一步提升,并愈加趋向人类自然对话的体验。具体表现为:语音交互将从机械的单轮对话进阶到更流畅的多轮对话;合成语音更自然、真实,接近真人水平;语音交互具备听觉选择能力,提升多人对话体验;语音交互将支持多种方言,并针对细分群体进行差异化设计。



趋势二:人脸、手势等通道更多出现在产品中,多通道融合交互成为主流交互形式


媒介学家雷吉斯·德布雷(Régis Debray)曾提出:“技术能实现不同区域里不同文化的人之间的连接”。随着技术的发展,人与人之间的连接早已不成问题。当前,AI技术更是拓展了人与智能体交互的通道。除语音交互外,计算机视觉技术的发展已使得智能体实现了通过识别人脸、指纹、面部表情、肢体动作等人体信息,而更加快捷多元地与人类进行交互。但是不同的交互通道在有其独特优势和场景适用性外,也有一定的局限性。


《报告》认为,未来,人与智能体的交互将融合语音、人脸、手势、生理信号等多种方式,为人类打开更多的交互空间和应用场景。具体表现为:人脸检测及识别聚集更细维度的面部特征,拓展更多的交互空间和场景;空中手势交互将成为新热点;触控、语音、手势、人脸最有可能成为多通道融合的主流通道;生理信号、触觉、嗅觉等也将成为辅助通道融入多通道交互中。



趋势三:智能体开始拥有明确的人设


近期,明星“人设”崩塌已成大家茶余饭后的热门话题。但是你想过,智能体也将拥有明确的“人设”么?《报告》认为,未来,用户可以更加明显地感知到智能体鲜活的“人设”。


所谓智能体的“人设”是指,用户在与智能体的互动过程中,根据感知到的综合特征推断出一种具有一致性的角色形象,一般由性格(如外向、善良等)、关系(如助手、朋友等)和基本属性(如性别、年龄等)构成。《报告》指出,目前,智能体人设的设计和表达主要聚焦在语音(如音色、语调等)和语言层面(如表达方式),并且通常局限在部分场景、部分话术上,缺少一致性和全局感。


《报告》提出,未来,智能体人设将从语音、产品外观、虚拟形象等多维度进行设计,甚至聘用编剧设计具有统一形象特点的话术,利用混合现实(MR)、全息投影等技术将人设具象化,让用户在不同场景下均感受到智能体一致、明显的人设特征。换句话说,未来,智能体的人设会具有很明显的特征,但不会轻易崩塌。


此外,《报告》还认为,打造用户喜爱的人设也将成为企业在市场竞争中形成差异化、吸引更多用户的重要方式。



趋势四:智能体在被动交互外,开始出现主动交互行为


技术的发展虽然革新了我们的生活方式,但是长久以来,人机交互一直延续着人类“输入”,机器“反馈”的循环模式,人类始终是主动的,机器始终是被动的。


《报告》认为,人工智能赋予了机器情境感知和自主认知能力,使我们有机会构建机器主动服务于人的交互模型。智能体出现主动交互行为的具体表现为:主动交互越来越“贴心”;主动交互在“家”和“车”的场景下率先商用落地;主动交互将提升公共场景下人机协同的效率。



趋势五:智能体开始拥有情感判断及反馈智能


2014年在北美上映的动画片《超能陆战队》中的机器人大白,以对主人公关怀备至的暖萌形象收获了大批影迷的喜爱。观影后的每个人都希望自己能够拥有一台如大白一样忠心耿耿又温柔体贴的机器人。令人欣喜的是,具有情感判断和应对能力的智能体正逐渐成为现实。


过去20年,在人机交互中,机器基于表情、文本等方式的的情感识别能力已有很大的提升。目前市面上出现的如情感陪护机器人、智能音箱、智能汽车等已经初步具备一些情感识别能力,可以根据不同的场景、对象,进行适当的情感交互。


《报告》指出,未来,情感计算技术的提升及硬件升级将赋予智能体在“视”“听”等方面更强的情感识别能力;同时智能体对于人类思维理解、情景理解能力也将更加完善,情感交互能力将更智能、更体贴。



趋势六:AI对特定人群的关怀得到快速发展和应用


人机交互的发展为儿童、老人、残障人士等群体更便捷地利用机器获得服务,提供了充分可能。当前市面上已经出现大量针对儿童教育的AI产品。搭载DuerOS的小度智能音箱也针对以儿童为中心的家庭语音互动需求,特别开发了儿童语音识别引擎,并定制儿童语音播报音色及对话逻辑,陪伴儿童一起成长。在养老领域,为老人提供陪聊、提醒等陪护服务的智能产品也被AI企业提上了日程。此外,少数AI产品也开始专注残障、病患等更加细分的人群,如2018年11月,百度推出了AI眼底筛查一体机,帮助患者快速筛查眼底疾病,为基层医疗带去了极大的便利。


《报告》提出,未来,AI对人类的关怀将得到快速发展和应用,覆盖更加细分的人群和更深入的场景。为儿童,AI将从易于交互到提供心智陪伴的服务;为老人,AI将缩小他们与科技的鸿沟,助推他们开启品质生活;为感官残障人士,AI将帮助他们重获对世界的立体感知;为特殊疾病人群,AI将提供预测、诊断和康复服务。



趋势七:智能设备互联互通,多场景衔接


以BAT为首的互联网企业,在2018年纷纷调整组织架构,转向To B。巨头重提产业互联网战略成为当前市场新现象。此现象背后,正是AI、5G、云计算等新兴技术的发展与升级。2018年的政府工作报告,进一步强调了“产业升级的人工智能应用”。“产业化”和“应用化”成为未来几年人工智能的两大发展方向。


《报告》指出,随着AI技术的进一步成熟和落地,及其与大数据、IoT的结合,AI将从单品智能、独立场景到互联智能,场景融合进阶。智能设备将互联互通,场景将进一步融合,实现多场景衔接;VR/AR将促进线上和线下、虚拟和现实的联结,未来,VR会加速拓展到更多的产业和实体,AR中的现实与虚拟将从简单叠加到有机融合,实现用户可以源自自然意识进行人机互动。



趋势八:人机开始走向深度协同,信任构建成为首要突破点


2018年6月,百度研究院发布并开源“神经条件随机场”的AI算法。该算法拥有强大的肿瘤病理切片检测能力,可以大幅提升医生阅读病理切皮的效率和准确率。人机协同即,通过人工智能增强人类智能,让人工智能成为人类智能的自然延伸和扩展。


目前,人机协同已在工业领域初步实现,而随着智能体从工业生产领域向商业服务、社会服务和家居服务领域拓展,人机将走向深度协同。《报告》认为,人机深度协同可以最大化发挥双方优势,实现合作共赢。


而人们对AI的信任,是智能体全面进入人类工作和生活,实现真正人机协同的前提。即,信任构建成为了实现人机深度协同的首要突破点。与此同时,AI伦理道德将更加细化,成为所有从业者需遵守的行业准绳。AI行业的发展在带给大众便利生活之时,避免算法歧视、保护人类隐私、尊重人类价值等也变成了从业者们亟需重视的问题。


最后,《报告》指出,AI时代的人因工程是一个真正的系统工程。而每个人机交互行业的从业者都需要拥有AI思维。最重要的是,中国的人机交互设计和研究者们将首次和发达国家站在同一起跑线上,我们有机会去定义这些体验标准,而不再是追随或遵守。


AI时代大门缓缓开启,属于中国和中国企业引领世界前沿的新时机已到来。

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

日历

链接

个人资料

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

存档