交互设计9种交互状态的设计

现在的UI设计团队通常先设计组件,多数界面几乎就是各种组件的结合。这会在用户的“异常路径”上留下不容小觑的断档。由于我们构建的是整个系统,而非几个页面,我们必须投入精力打磨这些常常被忽略的状态的设计,创造出组件的整个生命周期,来适应每一个人。我所理解的生命周期是这样的:

状态

1. 初始状态

一个组件做任何事情之前是怎样的?可能这是用户首次看到它。或者它还没被激活。根本上说就是这个组件存在,但还没有启动

1LNyqFzjiRNkqw186I2_YtQ

Jonas Treub的设计能确保你了解framer的最新动向。

2. 加载中

令人厌恶的一种状态。在理想状况下,没人会看到这个。哎,可我们这里是现实世界。有许多方法能使加载状态微妙而含蓄。Facebook在这方面做得很好:

1TpIehvczESpOJD7yQ3HF2g

Facebook使用“假文章”来代替传统的转圈圈。

3. 空状态

组件已经初始化,但是空无一物。没有数据,没有项目。这时候正适合引导用户采取行动(“点这里!”),或者给他们鼓励(“好样的,一切正常”)。

1IoVJzoP3v9_16IdpK9ww3g

Luke Seeley就将它作为了一种捷径。

4. 单一项目

开始有些数据了。在输入界面中,这或许是按下第一个键的状态。在列表中,可能是只有一项(或仅剩一项)时的状态。

1fnfAL-lYn5V4ulHM2f3vWg

又是Luke Seeley,MetaLab项目。

5. 有一些数据

这通常是你首先考虑的状态。某个组件的最理想状态是怎样的?数据加载了,也有内容输入,正是用户熟悉的状态。

1js-IckIHrUTT5KtZtiENSQ

UENO.舒适的大仪表盘。

6. 数据过多

哇!用户似乎操作过头了。产生了太多的结果(或许你现在正对它们分页处理),太多的文字(可能显示省略号?),诸如此类。

1dp8v6F66fu5tfa4Dq_c31Q

不错的翻页设计,来自Pete Orme

7. 错误状态

组件出错了。产生了异常。

1sk90HfKPbvisYcFsYjMm0A

dunked.com的错误状态很棒。

8. 正确状态

很好!这一项操作正确。

1D8fkoQeLLFx1TNt5lBS0GA

Ionut Bondoc ( ►IB )的设计

9. 完成状态

应用已经接受了用户的正确操作。他们不需要再为此操心了。

1r6NdBjvStCqOWe4orT7bNQ

Igor Chebotarev给出了一些积极的反馈。

随着不同页面、用户操作、数据更新还有任何你应用的状态改变,这些状态都会反复出现。深思熟虑地设计这些变化,就能为用户创造优美的体验,无论他们身处何种情况。

这其中许多状态都没有被考虑过,被遗忘,或仅仅是被忽略了。这是个巨大的错误,也是你赶超对手的机会。将状态的思考纳入你的设计流程,在与用户产生共鸣的同时,也能掌控好你的应用。

这9种状态的设计适用于所有设计项目和组件。即使你做出了清醒的决策要忽略其中某一种,遵循这套准则也能确保你的确思考过那些异常路径


原文链接:https://medium.com/swlh/the-nine-states-of-design-5bfe9b3d6d85

作者信息:
Vince Speelman
Designer, developer, diner, dreamer, discoverer, do-gooder, Detroiter.

译文作者:http://colachan.com/

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/10534/

(0)
iouedioued
上一篇 2015-11-09
下一篇 2015-11-09

相关推荐

  • AB测试告诉你,你以为的设计不是你以为的设计。

    用户体验设计不是忽悠,也许5分钟口水攻势能让前台小妹觉得你的设计非常高大上,但是要让每一个用户对着屏幕上的UI欲罢不能以身相许还需要数据支撑。

    2016-08-29
  • 【面试】不吹牛13,我是如何7天拿到百度&网易&创新工厂等6个实习offer的...

      “不卑不吭,保持谦逊”,这是管静总结的与HR和面试官打交道的八字法典。 又是一个40度的夏天,没有喧闹,只有窗外吱吱的蝉鸣。刚过完大三的同学,都开始了寻找实习的路程,有人欢喜有人愁。就读于贵州一所普…

    交互设计 2015-08-17
  • 【18应届报考北师大map用户体验方向】经验分享贴

    BNU学习小组互助互帮,轻松考取北师大,我们团队致力于为报考北师大MAP心理学专业的学弟学妹提供最精准的专业课辅导,官方微信:yanni513351。QQ:2194691060。专业课方面:普心、社会心理学我主要是看书背知识点,这两门课不难理解,看书熟悉内容以后将知识点背熟就可以,另外要通过做题检验自己的程度。测量心理学、实验心理学和统计心理学这三门课注重理解,尤其是统计心理学,要将每个知识点弄懂是什么意思,再做题巩固。而实验心理学重点...

    2018-04-15
  • 为什么交互设计师总觉得自己的方案不完美?

    最近和一个交互设计师闲聊,聊到了关于对自己设计产出物的满意度问题,感触颇深,专门整理了一下分享给大家。

    2017-04-29
  • 用通俗的方式告诉你什么是交互设计。

    通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。所以今天就来给大家分享一下我作为一个交互设计师眼中的交互是什么样的。文章的目的是帮助对交互设计不太了解,但工作相关或对此感兴趣的人对交互设计进行基础入门的了解,所以采用了尽量平实简单的描述方式,以帮助大家快速理...

    2018-04-03
  • 译文 | 在UX设计中利用色彩影响情绪

    颜色是我们观察事物的第一认知,是最能触动我们感官的视觉元素。颜色可以激发我们的联想,刺激我们的情绪。在设计中,颜色的合理运用一直是个很重要的课题。现在就让本篇文章带你认识每种颜色的独特作用和如何运用在UX设计之中吧。

    2017-05-25
  • 《用户体验要素》的笔记 (2) 第三章 战略层

    1. 战略层主要解决两个问题:1)我们想通过这个产品得到什么?即产品目标是什么?2)用户想通过这个产品得到什么?即用户需求是什么?此处的关键词是【明确】。当我们能越清楚的表达我们想要什么,以及确切的知道其他人想要从我们这里得到什么时,我们就能越精确的满足双方的需求。注:而最终导致产品失败的原因也经常出现在这个环节,很多产品口号喊的很响亮,但就是不愿意进一步去描述,并不是说产品经理一定要上层决策好目标和需求的每一个字,然后就不容易出错,没...

    微信热点 2018-04-08
  • 交互设计师的60日计划之第三天

    此次分享的 [button type="info" text="交互设计师的60日计划" url="https://www.iamue.com/tag/interaction-designers-of-60-days" open_new_tab="false"] 来自 Killa.G 让我们一起跟着学习和并学会做自己的总结与…

    2015-08-20
  • 设计师升维:集创思维构架设计逻辑

    现时代的设计师不应只看到美感,从长远而言,需要从商业/产品/体验/视觉多个角度综合考量构建设计形态(集创思维)。体验分析_方案1_产品提供的原始方案
    方式:点击条目>输入数值或点击加减>点击确定完成
    最大操作次数23次:点击条目1次,点击21次+号到最大值,点击确定1次,少数用户会使用此方式。
    常规操作次数6次:点击条目1次,点击输入框1次,输入数值3次(如3.5),点击确定1次。
    最小操作次数3次:点击条目1次,点击+号随即完成1次,点击确定1次。体验分析_方案2_提前防止用户出错
    方式:点击条目>滑动弹窗>点击完成
    最大操作次数4次:点击条目1次,滑动到最底部需要2次,点击选择1次。
    最小操作次数2次:点击条目1次,无需滑动,当前已有他要的选择,点击选择1次。体验分析_方案3_减少操作
    方式:点击数值选择
    最大操作次数1次:直接点击选中
    最小操作次数1次:直接点击选中
    屏占比:半屏
    扩展性:低
    操作点击次数降低,但屏占比过多,且不适用于当数值更大时(如果以后数值扩展到100%,那么整几屏都是按钮)体验分析_方案4_减少操作,防止出错
    方式:拖动圆点选择
    最大操作次数:1次
    最小操作次数:1次
    屏占比:低
    扩展性:高
    操作次数低,效率高,屏占比少,具有适用性,可以多个此类操作叠加使用

    2017-05-17
  • 快速搞定日常专题,我的流程与案列分享

    有一些朋友问我能不能分享一些关于活动专题的,但是我始终觉得我前面分享的已经很多了,在banner上自己去提升和延展就已经是日常的专题活动了。

    2017-05-15