分享网站建设知识
推动网站应用价值

提供短小精焊并有价值的建站知识分享。

设计中视觉美观性与容错性
2019-09-17 15:19:11

正如上编文章小酷所讲,概念设计应该是把眼光放在未来,而落地设计是把眼光放在当下,所以概念设计可以把用户想的聪明一些,把目标用户对互联网产品的认知定义为N年以后,落地设计则需要尽可能的把产品做到易理解,降低用户的误操作几率。

 

即使如此也需要有一个尺度来衡量,并不是概念设计就可以忽略容错性。

 

那么视觉美观性与容错性有什么必然的联系呢?大家应该了解,交互设计不仅局限于页面的逻辑跳转,其实可以细分为三个方面,即表现方式、操作方式于反馈方式。

 

 

表现方式设计的目的就是让用户使用产品时做到操作前可以预知,比如很多金融类财经类产品会让用户对于产品的每一个元素做到操作前可预知,这样就会让视觉的美观度下降很多。

 

而娱乐类产品对于容错性要求较低,表现方式就可以含蓄一些,视觉的可塑性强随之美观度也会较高。所以视觉美观性与容错性是有“守恒定律”的,容错性做到一定阶段,一定是会损失部分美观度的。

 

容错性是产品对错误操作的承载性能,即一个产品操作时出现错误的概率和错误出现后得到解决的概率和效率。

 

容错性最初应用于计算机领域,它的存在能保证系统在故障存在的情况下不失效,仍然正常工作。产品容错性设计能使产品与人的交流或人与人借助产品的交流更加流畅。

 

说起容错性,设计者最基本要考虑到当产品本身出错而非用户误操作时,产品要有清晰的处理方式。比如当用户所处环境网络环境较差时,也是就是弱网状态下应该如何去处理。

 

 

常规的处理方式是首先给予用户明确的交互反馈,告诉用户当前页面已经在加载,如果当前页面加载了15秒还没有加载完成则可以给予用户Toast提示框,提醒用户当前网络情况可能不太好。

 

如果加载30秒之后仍然加载不出来,就可以终止加载,不再浪费用户的时间了。这是容错性最基本要考虑到的,无论是概念设计还是落地设计。

 

当然对于用户主观的误操作来讲,容错性可以体现 “限制用户错误的选择项”、“恢复现场的能力”、“协助用户记忆”等几个方面。

 

作为设计师来说,设计产品时就要尽量主观地把那些错误的操作避免,例如在买车票选择日期时,把昨天或者更早的日期直接不显示,或者在输入表单信息时,文字长度不够或者过长时,会出现一些无法进行下一步的提示按钮。

 

如图所示,“微信”在限制用户误操作方面就做得比较好,左图用户在发送语音时如果录音时间过短,会出现不可发送的Toast提示框;右图微信在发布朋友圈时,如果没有输入信息,则右上角的发布按钮不可点击,不给用户误操作的机会。

 

 

讲到“恢复现场的能力”或许很多小伙伴会有共鸣,在使用设计软件时,打开的文件过多、文件过大或超出系统承受能力时经常会出现卡死或者闪退的情况,当发生这种情况时用户是很容易产生负面情绪的。

 

放在移动端来说,有时候用户在浏览很长的文章或者信息很多的列表时,经常会不小心点击到另一个推荐的页面,如果返回的话,很多App是直接返回到上一个页面的原始状态,但此时用户更多的是想回到刚才阅读到的位置。

 

例如我们在阅读“微信”公众号的文章时返回到信息页面,再回到文章页,是记录了刚才阅读的位置,而不是从头开始,这种体验可以大大增强用户对产品的好感。

 

当然,类似的例子还有很多,很多情况都是举一反三。如图下图所示,左图是“美团外卖”,在使用外卖产品订外卖时,我们经常会点到一半想再去看看别家,这时用户在返回前一页后系统会记录这家餐厅所选的商品,再次进入就不需要重复选餐了;

 

右图中“字里行间”这种文字内容类的产品作者用户经常需要码很长的字,如果这个时候误点击了“返回”或者手机自动关机,产品就需要帮助用户去恢复现场,这也是产品可用性的一种体现。

 

 

“协助用户记忆”这个方法就很容易理解了,在用户使用淘宝购买物品,或者使用其他产品发起订单,付款时用户肯定不希望自己用大脑再回忆一遍刚才买了些什么,这就需要在付款页把刚才所购买的东西罗列出来让用户再确认一遍。

 

如果用户有多买或者少买了什么东西,这个体验是非常不容易接受的。如下图所示,左图“淘宝”在提交订单付款前会让用户再把购物车内的商品确认一遍;右图“饿了么”也是同理。

 

 

上面所举例的是最基础要注意的容错性设计,对于一些落地设计来讲,还有很多地方需要去迎合用户习惯,降低用户的学习成本。

 

但是概念设计则可以多在交互手势上面增加一些创新,逐渐培养用户习惯更简单高效的交互形式,这就是视觉美观性与容错性方向的差异体现。

 

 

 

< 真实信息体现,避免重复信息 >

 

信息重复且无规则是设计者在概念设计阶段最容易犯的错误,除了视觉上不美观之外,其实就算是文本信息的排列其中同样有很多要注意的细节,忽略这些细节会让页面的逻辑出现问题。

 

比如仅仅文本的适配规则就可以分为四种,即“换行”、“超出省略”、“缩字号”、“限定字符”。

 

换行的处理方式适用于多行几率较高的文本信息,并且对于当前页面的信息展示较为重要时。还有一种情况就是当前页面无二级页面时,必须通过换行的方式来显示全部。

 

比如微信朋友圈这种形式,没有必要单开一个二级页面,并且文本多行几率非常高,就适用于换行的处理方式,当然微信的规则是当文字超过一定长度后会单开一个二级页面进行承载。

 

 

超出省略的处理方式需要当前省略的信息有二级页面,并且二级页面点击频率较高,或者当前需要省略的内容非重要信息。

 

比如每日优鲜这类产品,图片为重要信息,文字为辅助信息,并且二级页面的点击频率较高,所以商品标题就可以采用超出省略的显示方式。

 

 

缩字号的使用场景相对较少,基本上只适用于文本超出一行的几率不大,但偶尔会出现时,或当前文本没有二级页面或者信息内容对于当前页面较为重要。

 

缩字号的处理方式有个缺点就是可能会导致两行文字大小不一致,比如由于一行文本超出显示范围而自动缩字号,而另一没有超出时,视觉上就会较为不统一。

 

比如京东品类区的这些活动入口,标题下方的描述文字超出显示区域时就可以使用缩字号的形式来体现。

 

 

防止文本适配出现问题最根本也是最方便的处理方式就是从后台录入信息的字符数量上解决,当然偏向于UGC的产品可以从前端用户输入信息时就设定明确的字符数量。

 

当然这种处理方式需要很明确的预估最大字符数量,如果预估的最大字符数量满足不了大部分用户,那么体验也会是极差的。

 

比如UC头条这种PGC内容类产品,后台直接限制新闻标题的文本数量可以从根本上解决文本的显示问题。

 

 

当然文本的真实数量显示只是一小部分,图片相比来讲需要考虑的规则更多,一张图时该如何显示,两张图该如何显示,最大可以显示几张等等,这些都需要设计者在做设计时有一个很明确的显示规则。

分享该编文章:

免责声明:本站部分文章由本网用户编辑转载并发布,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与本网联系,我们将在第一时间删除内容![声明]本站文章版权归原作者所有 内容为作者个人观点 本站只提供参考并不构成任何投资及应用建议。本站拥有对此声明的最终解释权。

相关资讯: