交互设计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

相关推荐

  • 分享两个交互设计作品

    今天跟大家分享的是二两童靴的两个交互设计作品,第一个是平安保险产品配置后台交互设计,第二个是台州银行客户经理移动办公App交互设计,希望大家多多交流。如果你也有好的作品想在我是UE网上展示,可以加学习群15…

    2015-07-02
  • 电梯按钮的交互设计

    开始注意和观察电梯的按钮面板,是因为觉察到自己因常乘的两部电梯设计细节方面的种种不同而陷入了混乱。电梯常常会和自己"想的不一样",即预设的或已建立的心理模型失效了,我们不得不重新审视电梯的操作面板,重新建立心理模型,找到对应的按钮。如果日常常搭乘几部电梯,它们之间的操作规则和心理模型还不一样的话,一是容易让人混乱,二则给人增加了记忆负担,实在是很麻烦。觉得这一小块可操作区域很有趣很值得分析之后,好奇之下找了不少图进行研究,五花八门的设计...

    2018-02-06
  • 【干货】2018年APP交互设计趋势

    全感官体验人有五感,强化体验记忆的最有效方式就是五感相结合。看见、听见信息已成为体验常态,而更真切的感知信息是用户体验升级的客观诉求,全感官体验能更好的打造“身临其境的沉浸式”体验印象。2018年我们将会看到更多以虚拟+实体组合的全感官体验方式,用户在交互过程中获取更多维的与真实场景匹配的信息反馈(听觉、嗅觉、触觉等),加深对信息的理解和体验记忆。运用案例全感官体验目前在游戏领域有了较为广泛的探索。《星舰指挥官》一改沿用十几年的鼠标,键...

    2018-02-18
  • 交互设计中几个要注意的关键词

    作者:Guibin@DesignGB   sprint “罗马不是一天建成的。” “千里之行,始于足下。” 将一个大问题,拆解成很多小问题,一点一点实现并验证可行性,一个版本一个版本改善,用迭代的思想输出成果。越早交付价值,就越早…

    交互专题 2017-08-07
  • Sketchbox:会画图就能使用的AR建模应用

    在目前的情况下设计虚拟现实和增强现实产品并不容易,仍存在挑战。Unity和Epic Games可以说是现在比较常用的编辑应用,帮助用户以非常精确的方式去编辑虚拟现实内容。但需要指出,这两者都是为已掌握相关技术的人群所提供的技术项目,虽然没必要会写代码,但是了解一些简单的原理和技术能达到的界限也还是需要的,从这方面看,设计VR或AR产品的门槛相对还是比较高的。最近,Y Combinator的最新一期项目中的Sketchbox可以帮助设计师...

    2018-03-23
  • 在新用户引导流程中,如何用好空状态界面?

    今天的文章,我们将会提供一些使用空状态来优化新用户引导的策略和技巧。

    2017-05-01
  • 译文 | 用户体验要素之连接性

    科技推动社会的发展,也改变着人机交互的模式和服务方式。科学家创造了先进的科技,设计师们则将这些前沿的科技融合在服务日常民生的产品中,更好的为用户服务。当人工智能技术逐渐成熟后,设计师就将AI技术整合到汽车中来辅助司机驾驶;当低功耗蓝牙技术成熟后,设计师就将iBeacon连接到商场的销售服务体系中… 如何将不同的技术、产品连接在一起来创造更好的用户体验,就是下面译文中将要阐述的。下面进入译文。

    2017-05-29
  • 2019交互设计考研普通长期班招生简章

    “应部分报考交互设计方向考生特殊需求,我们在保证搭建一个完整交互知识框架体系及备考专业课复习完整性标准下,特开设交互设计长期普通班课程。该课程更强调考生的“主动学习”能力。”招生简章开设课程:交互设计长期普通班(线上课程)课程时间:2018年5月中旬——2018年12月初试前(每周3课时)课时       :110课时(每课时1小时)费用      :7500元招生人数:线上课程16人(超数不招生)课程总框架:Part 1▪交互知识学习...

    2018-04-06
  • 是时候聊聊具有直觉性的UI和交互设计了

    UI和交互设计中常常会强调某项设计需要足够的“直觉性”,但是直觉性的设计说来容易,实现却往往差强人意。但是不得不承认,它是目前交互和UI设计的刚需。“想象一下,如果桌面上反过来一颗球让你去转动控制,感觉应该比鼠标运作顺畅些。我们原本认为这是个好点子……可是我以前从未观潮这种触感的细节。”“当孩子们操作鼠标和遥控杆的时候,会不自觉地低头看输入装置……后来有人想到,如果操作时运动肌肉群范围较大,也许他们可以不必低头。我们做了一个大型轨迹球装置,让他们可以用手臂甚至肩膀牵动来操作,这样就把问题解决了。”“我们先是观察什么样的操作方式比较合乎自然,然后提出想法,再进行测试。”“心智模型指一个人对于事物运作的思维过程,即一个人对于周遭世界的理解。心智模型的基础是不完整的显示、过去的经验甚至直觉感知。它有助于形成人的动作和行为,影响人在复杂情况下的关注点,并确定人们如何着手解决问题。”(如果你仔细观察,会发现这个时候的设计师将纸的纹理运用到窗口上,此处的设计和Material Design 中纸的隐喻不谋而合,这又何尝不是一种潜意识的引导呢?)

    2017-05-16
  • O2O/商场权限管理系统设计方案

    一、管理权限分级概览 二、管理账号管理逻辑 三、账号权限定义 管理账号预设角色分为四种:超级管理员、商场管理员(独立收银)、商场管理员(统一收银)、店铺管理员; 超级管理员: 具有商场后台所有功能的权限,…

    2017-12-28