• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 遇到特殊的设计问题时,有一条原则帮了我

遇到特殊的设计问题时,有一条原则帮了我

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含经验分享,设计原则,设计方法等相关知识,希望在学习及工作中可以帮助到您

很多设计中,我们付出20%的精力就可以应付80%的 Normal Case,而剩下20%的 Special Case 却会花费我们80%的精力。换言之,普通情况谁都会高效处理,而为了应对一些少数派,我们将要付出更多。

Loading 失败时的错误提醒、搜索无少结果时的空白页面、打了车却没车接单……除了这正常流程下的失败反馈以外,最耗时间的是那些特殊流程或所有情况同时在一个页面堆砌出现的情况。

在设计前期,我们就应该尽可能地罗列特殊情况,即便它们出现的概率很低,也应留足设计时间。而应对非常规 Case 时,有一条原则帮了我很多次:

确保多数人体验的前提下,才去解决少数人的问题。

这不是说要为了多数人放弃少数人,还是造例子来说吧。

案例一:重复利用的物流单号

如果你在天猫有过退货经验就会知道,申请退货并得到商家确认后,需要填写退货的物流单号,当商家收货后才会把钱退给你。这里有个奇妙的问题,设计上是否允许多个用户填写同一个退货单号?

先来看看如果允许,会出现什么非常规情况:消费者AB两人各自在同一个商家C处购买了两台 iPhone,并且商量好分别发起七天无理由退货流程,商家C均同意。然后,消费者A先将手机按要求寄出,获取物流单号一个后填写到退货系统;同时,消费者B直接使用消费者A的退货单号填入系统,但不寄送自己的手机。

极端情况体现在,许多商家的店铺与仓储是分开的,当仓库收到A寄来的手机并确认收货后,店铺工作人员收到系统通知两个退货流程都已收货(其实是同一个单号),若不进行额外确认,就会把钱都退回去了。

再来看不允许重复填写同一个物流单号的情况:很简单,AB两个消费者是好人,但希望节省快递费,就商量好把两个手机放在一个包裹里寄回。此时若规则只允许一个单号只能填写一次,这种做法就无法实现。

错误的设计方法是这样的:用户填写退货单号时,新增一个流程询问用户该单号是否只关联了一个订单,订单号是多少;或者在原有基础上新增一个联合退货的功能,让多个用户合伙拼单退货。

正确的设计方法是这样的:消费者端流程全部不变,允许重复填写物流单号,但必须在后台记录一条单号被使用的次数。对于被多次填写的单号,在商家端告知商家须额外注意,一定与仓库确认好包裹内物品再进行退款操作。

错误方法的错误原因很简单,我们不能为了一些极端情况就去修改主流程,也不能为了少数人的需求就影响所有正常用户。

案例二:互相冲突的 Toast 提醒

天猫客户端的商品详情页中,当点击“收藏”按钮会有一个 Toast 告诉用户“收藏成功”,同样当点击“加入购物车”后,也会有 Toast 告诉用户“加入成功”。这样看好像没什么问题,但若用户点完“收藏”后马上点击“加入购物车”,就会出现两个 Toast 相互冲突的情况——视觉上互相重叠,或后一个 Toast 无法出现。再极端一点,如果出现了一个脑残用户,为了测试反复快速点击两个按钮,甚至会导致代码错误。

为了追求设计和代码逻辑的严密,我和开发同学花费了不少时间讨论对于这种极端情况,要如何设置 Toast 的出现和冲突机制。甚至为了应对极端情况,还需要调整 Toast 出现消失的动画过程与逻辑。但最后,我只设置了2个 Toast 在极短时间内前后触发的交互,也就是新的 Toast 慢慢把旧的推上去,并各自做淡入淡出动画——毕竟两次短促的操作是比较可能会发生的。

什么?你问我那个脑残用户怎么办?不好意思,为了满足所有正常用户的诉求,脑残用户的体验就只好先放一放了……

案例三:神出鬼没的 Loading

我们在客户端上做了一个比较酷的动画,对一个模块长按后可以弹出一张卡片,并在卡片中阅读一些详情(有点像 3D Touch)。问题在于,弹出卡片中的信息是触发卡片后才向服务器请求数据并加载的,正常情况下没有问题,但是弱网条件下,数据加载可能会花费不少时间。为此,第一版我们为这个数据请求设计了一个 Loading 的小动画(好吧,你就当是转菊花)。

这样做的结果是,对于网络非常流畅的用户,他们唤起这张卡片时,会看到一个菊花飞快地闪过,然后才看到数据加载——再流畅的网络下,数据也需要加载时间,哪怕是1ms,都会让菊花快速闪烁。

当然,不要 Loading 也明显不合理。弱网条件下,必须避免用户盯着空白的卡片发呆而不知道系统正在干什么。

所以,合理的做法是,为 Loading 动画的出现时间设置一个延迟:在卡片弹出的200ms内(卡片不可能突然闪烁出现在用户面前,必须有一个进场过程),如果数据加载完毕,则不显示 Loading 动画,直接显示数据。如果卡片进场完毕(200ms后)数据还没回来,则开始显示 Loading 动画。

这样,我们保证了正常用户的正常体验,避免他们每一次操作都为弱网这一极端情况买单。同时,也保障了弱网用户的体验。

最后,再总结一下我们的设计原则:确保多数人体验的前提下,才去解决少数人的问题。

镇雷的微信公众号:

「有哪些原则能帮你做好设计?」

  1. 《交互大厨的私房书单!10本设计原则的好书帮你进阶学习!》
  2. 《用超多案例,带你全面看懂尼尔森十大可用性原则!》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 该有的视觉元素全都有,设计不好到底差在哪里?
  • 为什么几个人的小团队更加高效更加靠谱?
  • 对于「以人为中心」的设计,你的理解可能太浅显了
  • 为什么大家都想学服务设计?来看CEO 的亲身经历!
  • 想为iPhone X设计UI?给你这11个设计小贴士
  • 疯传谷歌走All-White风?假的!其实只是合作伙伴的重设计
  • 在做产品设计的时候,预期和现实到底有多大的差别?
  • 设计出了错?很有可能是你没有问对问题
  • 为什么不要再问用户「你们到底想要什么」?
  • 想紧跟流行风尚?这5种平面设计趋势了解一下

相关文章

  • 2018-08-23高手用10分钟,就能让你搭配出好看的颜色
  • 2018-08-23这些至关重要的细节,同你的产品体验息息相关
  • 2017-08-06Unicode签名BOM引发的事故原因分析
  • 2017-08-06合理使用h1,h2,h3标签
  • 2017-08-06深入理解HTML5在移动开发方面的发展现状
  • 2018-08-23设计师被“拼多多”的一天…
  • 2018-08-23写给UI新手的APP结构指南:用户引导和提示
  • 2018-08-23腾讯干货!虚拟To B支付设计研究之基本知识科普篇
  • 2018-08-23设计反复修改?可能是你的信息层级没有梳理好!
  • 2018-08-23想成为互联网设计师?先来看这篇超全面的介绍!

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 做了50多个项目,才知道总监们看重的调研是这样的
    • node的包管理工具:yarn和npm
    • 想要提升用户体验,这6种使用插画的方法颇为不错
    • 秋风渐起,大咖们都跟随这些趋势做网页设计
    • 网页常用分享代码大全(前端必备)
    • 2018年过半,为你总结了这13个主要的设计趋势
    • 轻松看懂规范!详解组件控件结构体系之空数据类
    • 你好,我就是传说的佛系设计师
    • 想让你的网站看起来专业?搞定下面9件事情就行!
    • 学会这个批处理方法,5分钟搞定一小时的工作量!

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有