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

相关推荐

  • Axure从入门到精通-第0课,课程介绍

    紫豆子开始新的教程编写,讲解Axure的使用。还是希望5次课程可以把这个软件讲通。这是一款很容易上手的产品,可能有的人已经会了。我们先看看下面由Axure做的网页是不是有点跟我们见过的Axure不太一样了为什么学这个软件?入门简单,它就像一个大的画布,你可以简单的通过拖拽组建在页面中添加你要放置的内容;不像PS那么难学。可以做一些简单的动画效果;可以让一个组建旋转、移动、缩放、消失、出现等等;可以做一些简单的交互效果;例如点击一个画布中...

    2018-04-29
  • 转载:昨天就听闻快的与滴滴的恋情,万万没想到今天就不要脸的在一起了。

    原文:阿西博客http://wangguangxi.net.cn/?p=126 今后我要怎么选择出门打车是开滴滴还是快的尼? 又或者这俩货都没了,直接统称一个快滴打车? 不过阿西梳理了几条关于上述两个产品的使用交互体验上的建议 1.打车…

    交互设计 2015-02-14
  • 阅读好体验的准则:100% Easy-2-Read

    阅读好体验的准则:100% Easy-2-Read | 艾欧交互设计 译者:前两天看到一篇文章,觉得挺不错的,就简单翻译一下分享给大家。   大多数网站都挤满了小号的文字,使人阅读起来感到很痛苦。产生这个问题的原因是…

    2014-11-13
  • 3种空状态出现场景,5种消灭空状态的技能教你玩转空状态

    举个例子:假设有一款图片分享类的应用,然后有个页面是“我的图片”,如果在我从来没有发布过图片的时候,这个页面理所应当就是空的。并且在这个时候,第一种方法显然是不可行的。当然,空荡荡的界面有不好,所以此时可以通过操作指引来引导用户产生内容。

    2017-05-28
  • 交互设计怎么入门呢?

    经常会有童鞋来问我:“交互设计如何入门?工业设计转行做交互设计的门槛高吗?用户体验和交互设计的区别是什么?”工业设计转行做交互的门槛并不高,就像工业设计需要考虑用户和实体产品之间的互动一样,交互设计更多的是考虑用户与界面之间的交互,只是换一个载体,其理论体系挺相似的。设计技能并不能弥补设计思维上的欠缺,技能只是一种表达方式,而Design Thinking才是最为核心的价值。基本概念浏览招聘网站上的讯息,就会发现UED,UX,UI等不同...

    2018-03-23
  • 让视觉设计变得高效+有说服力的4个步骤

    确定情感关键词 -> 情绪版 -> 脑爆概念设计 -> 用户验证

    2017-05-26
  • 交互设计的重要性

    陌陌年会以疯x做伴手礼 引起互联网一片羡慕今天以陌陌产品为例讲讲交互设计的重要性在浏览页面时,左滑、点击返回按钮都可以回到上一页为什么发布帖子使用的是取消按钮而不是返回,也不可使用左滑呢如下:发布圈子非浏览而是在完成某一任务,点击返回或者左滑返回上一页,给用户任务未结束的负担,我只是返回了 并未取消任务的困扰

    2018-02-23
  • 超实用!聊聊标签式导航的设计思路(附设计师做笔记方法)

    现在文章基本上都不深入,只是点到某个知识,跟大家说个理论的东西,然后罗列出所有导航的形式。读者看了之后跟没看是一样的,遇到问题还是没法解决,只知道有这类导航存在而已。今天这篇详细地讲了关于标签类导航的几个知识点,希望可以帮助大家在工作中更好的运用。

    2017-05-21
  • 【优秀作业展示】交互设计基础(三)

    《交互设计基础》是学习交互设计的重要课程,在大三上学期开课。任课教师是工业设计系的华梅立老师,通过老师的认真指导和对该课程的学习,大家对交互设计有了进一步的了解,在老师的引导下,同学们对高铁取订票界面设计进行了深入的分析和再设计,并选取了感兴趣的小方向进一步拓展。接下来就看看学完本课程后同学们的优秀作业。优秀学生作业第三期陆晗产品设计15201高铁购票界面设计搜索目的地如果没有没有您想要的目的地可以选择搜索功能选择日期如果选择三天以后出...

    2018-05-08
  • 在007里的用户体验是“爽”还是“不爽”

    有一天在微信上和007社群的班级一位同学聊天,一通天南海北的乱扯后,话题就回到007这个社群上了,因为这段时间我参与007社群的一些活动,对这个话题特别敏感,然而他却流露出对这个社群的很多不满意,我们之间的一段对话让我思考了很久很久。对了,这两天你看了你们小组的信息了吗?小组信息?刚看,不过我最近在考虑要不要直接退出007,感觉没意思,也啥时间整这些了。那你当初为啥参加007啊?没啥,就是觉得应该养成一个写作的习惯以及可以认识一些稍微志...

    2018-04-11