详细解析APP最常用的9种状态设计分享

2016-02-16 19:39 8 1 收藏

下面是个详细解析APP最常用的9种状态设计分享教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!

【 tulaoshi.com - 平面设计 】

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

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

1. 初始状态

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

详细解析APP最常用的9种状态设计分享,PS教程,图老师教程网

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

2. 加载中

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

详细解析APP最常用的9种状态设计分享,PS教程,图老师教程网

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

3. 空状态

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

详细解析APP最常用的9种状态设计分享,PS教程,图老师教程网

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

4. 单一项目

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

详细解析APP最常用的9种状态设计分享,PS教程,图老师教程网

又是Luke Seeley,MetaLab项目。

5. 有一些数据

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

详细解析APP最常用的9种状态设计分享,PS教程,图老师教程网

UENO. 舒适的大仪表盘。

6. 数据过多

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

详细解析APP最常用的9种状态设计分享,PS教程,图老师教程网

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

7. 错误状态

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

详细解析APP最常用的9种状态设计分享,PS教程,图老师教程网

dunked.com的错误状态很棒。

8. 正确状态

很好!这一项操作正确。

详细解析APP最常用的9种状态设计分享,PS教程,图老师教程网

Ionut Bondoc ( IB ) 的设计

9. 完成状态

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

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

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

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

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

来源:http://www.tulaoshi.com/n/20160216/1572678.html

延伸阅读
当你第一次打开一款应用的时候常常会看到精美的引导页设计,它们在你未使用产品之前提前告知你产品的主要功能与特点,第一次印象的好坏会极大地影响到后续的产品使用体验。因此各个公司都在努力将这几个页面设计好,从一开始就引人入胜。那接下来我跟大家一起来探讨关于引导页的设计。 一、 目的区分根据引导页的目的、出发点不同,可以将...
App Store和Google Play里的app多如牛毛。很难说未来的趋势是什么,不过显然我们可以轻易选出当下的5种趋势并加以分析。今天十萬個為什麽同学简单归纳了当下的5种移动APP设计趋势,来涨姿势吧。 看看时下的app中的颜色、创意和简单朴素,我们能从中学到一些设计移动app的技巧。 App中的色彩 公认的,色彩始终是设计的一部分。不过,近来很多...
关于手机APP的导航设计讨论已经有很多了,特别是针对汉堡菜单的讨论。今天翻译的这篇文章,是原作者在真实的APP中对导航进行改版,观察数据并进行分析的一则小文,实战意义很强,可供借鉴。 在移动界面设计中,使用各种菜单控件来简化界面,对设计师来说很有吸引力 特别是在小屏幕的设备上。但是,将 App 的核心部分隐藏在这些菜单里,可能会...
标签: 孕期
宝宝语言胎教的禁忌     胎教在现代育儿过程中,是孕妈妈们很关心的问题。采取哪种胎教方式来培养胎儿成长,通关哪种比较有效方法使自己将来的宝宝比较别家的孩子智商更高更聪明呢?孕妈妈们在胎教过程Tulaoshi.com中不要急功近利,育儿专家提示,进行胎教应该注意三个禁忌。    &...
标签: 生活常识
粉色的闺房设计分享 似乎很多女生对粉色有着特别的偏爱,这里与大家分享一些粉丝的闺房设计,稀饭的饱饱眼福。

经验教程

426

收藏

88
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部