APP最常用的9种状态设计(附案例)

转载 2015年11月17日 16:15:56

转自:http://www.devstore.cn/essay/essayInfo/3565.html

现在做UI设计不仅要关注界面视觉,还得懂点交互和用研,今天这篇译文,囊括了移动APP操作过程中该有的9种基础状态(加载中、空状态、错误状态等),附上追波的优秀设计案例供学习,来收!

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

1. 初始状态

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

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

2. 加载中

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

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

3. 空状态

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

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

4. 单一项目

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

又是Luke Seeley,MetaLab项目。

5. 有一些数据

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

UENO. 舒适的大仪表盘。

6. 数据过多

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

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

7. 错误状态

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

dunked.com的错误状态很棒。

8. 正确状态

很好!这一项操作正确。

Ionut Bondoc ( ►IB ) 的设计

9. 完成状态

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

Igor Chebotarev 给出了一些积极的反馈。(此处图超大,压缩后失真,同学们可直接到追波看)

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

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

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

9种状态的设计

来源 http://www.colachan.com/post/3468现在的UI设计团队通常先设计组件,多数界面几乎就是各种组件的结合。这会在用户的“异常路径”上留下不容小觑的断档。由于我们构建的是...
  • ly137387869
  • ly137387869
  • 2016年02月26日 11:49
  • 277

人人都应该掌握的9种数据分析方法

说到数据分析,首先,我们要知道,什么叫数据分析。其实从数据到信息的这个过程,就是数据分析。数据本身并没有什么价值,有价值的是我们从数据中提取出来的信息。啤酒和尿布的例子大家应该都听腻了。再具体、深入一...
  • Ms_lan
  • Ms_lan
  • 2017年06月29日 16:56
  • 646

javascript常见的设计模式举例

近日重读《javascript面型对象编程指南》这本书,最后一章介绍了常见的javascript设计模式的实现。主要讲解了四种设计模式:单例模式、工厂模式、装饰器模式和观察者模式。js作为动态语言,实...
  • yingyiledi
  • yingyiledi
  • 2014年05月23日 18:15
  • 4160

java 常用十种设计模式示例归纳 | 已打包请带走

设计模式(Design pattern)是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。 GitHub地址 DesignPattern 文章说明 一个Demo,集合常用...
  • a214024475
  • a214024475
  • 2016年11月16日 16:58
  • 2810

APP规范实例(详细的UI设计方法)

这一套UI设计规范,包含了界面布局、颜色、文字规范、按钮规范、图标规范、图片规范、列表规范、控件规范、弹出浮层,超级详细。 大家可以借鉴下,学会自己设计一套APP设计规范,成为高级设计师。但是不...
  • yybj
  • yybj
  • 2016年04月23日 21:20
  • 1504

4. APP 接口实例

1.单例模式连接数据库 1.构造函数需要为非pulic 2.只能被自身实例化,不能在其他类中实例化 3.拥有一个保存类的实例,静态成员变量$_instance; 3.拥有一个访问这个实例的公共的...
  • enlyhua
  • enlyhua
  • 2016年10月28日 22:19
  • 650

设计模式之状态模式

定义:允许一个对象在其内部状态变化时改变它的行为,对象看起来似乎修改了它所属的类。 类图:      说明:Context表示环境类,它定义了客户应用程序感兴趣的接口,并维护一个Co...
  • u012569119
  • u012569119
  • 2015年06月28日 16:25
  • 757

实用设计模式之状态模式

状态模式的针对性很强,当有状态变化的时候很多工程师会倾向于选择状态模式,但在使用时仍然存在着很多问题,比如状态的拆分不清晰、状态的变迁不准确、类的职责划分不单一等,一旦与具体的业务逻辑和已有的代码上下...
  • caowenbin
  • caowenbin
  • 2013年03月17日 16:29
  • 3520

高性能MYSQL笔记-mysql字段类型和字段设计规范

1.优先使用符合业务需要的最小的数据类型 1.1 将ip用UNSIGNED INT存:内置函数INET_ATON(字符串)和INTE_NTOA(整数)分别是点分十进制字符串和整数的转换函数 1.2...
  • hjvgf
  • hjvgf
  • 2017年04月10日 21:42
  • 574

近100个C语言基础算法案例(初级篇)

下面这些C语言基础算法案例都是经过测试和验证过了的,欢迎各位使用。 本文是该系列的第一篇,都是一些相对初级的算法,很适合刚开始学C语言的同学。 1、C语言打印一条语句 源代码: /...
  • autowanglei
  • autowanglei
  • 2014年11月21日 10:06
  • 382
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:APP最常用的9种状态设计(附案例)
举报原因:
原因补充:

(最多只允许输入30个字)