用研干货！详析移动App 的9种使用状态（上）
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
用研干货！详析移动App 的9种使用状态（上）
编者按：用户在使用App 时通常会遇到9种状态，今天这篇好文把每一个状态的使用场景和注意事项都列了出来，用研新手可以拿来查漏补缺。
一，等待状态
其实iOS 人机交互手册里，Apple 建议开发者尽量不要展示闪屏。就比如国外的app我们能发现一个共同点：
他们都没有引导页有没有！！那么，为什么国内的App 都有启动页呢？原因就是如同以上三个app一样，他们正在等待调接口刷数据，而这个时候用户可能会焦虑的等待，可能是接口的问题，也可能是网络的问题。而国内的app他们希望在这个3秒中的时间内不让用户看这一片白花花的页面，甚至可以利用这三秒钟打广告也好，宣传品牌也好，展示逼格也好。那么他们都有不同的目的：提高用户体验，减少等待焦虑；品牌效应；功能展示或者情怀。
当然不同的产品所展示的启动页必然不一样，而我们这里主要需要说的是等待状态，根据产品使用人群的以及产品自身的定位来考虑启动页的形式，不呆滞，有缓冲。但是真正优秀的产品是不需要启动页的，努力优化程序，合理的缓存技术适当的异步任务调度等，让用户一打开App 就停留在主页面只需要100-300毫秒的加载，这样优秀的产品还需要启动页？
二，初始状态
刚步入初始状态，对于第一次进入App 的用户来说其实是懵逼的，同时也是用户是否对这个App 感兴趣的最关键时刻，这个时候请拿出12万分的激情以及真诚来欢迎用户，将最精华的部分展示出来，就好比相亲，许多相亲的结果就在第一印象，好了咱们仔细想一想是不是这样。
那么体验设计师如何做好初始状态的页面呢。这边我总结了四点：
1. 展示核心内容，并将其放大
毫无疑问一个产品的核心内容以及核心竞争力的体验便是在初始状态中，这个产品到底能为他解决什么问题，这就和产品所具有的功能所提供的服务相关，只有当用户能用该产品切实解决问题并且用起来爽了，那他才会一直用。所以，在这个阶段，对首页而言，核心功能的展示和好的交互体验显的尤为重要。
2. 告诉用户“他”在哪里
用户初次使用产品一般会出现两种情况，第一种－明确知道该产品功能但是第一次使用；第二种－不知道该产品只是听说好用好玩就下载下来。那么对于第一种用户你需要告诉他核心功能以及其他附加功能，但是第二种用户就只需要先明确告诉他核心功能，还有当前页面是在哪儿，不要让用户迷茫，因为没有人能花许多精力来研究你产品的所有功能。
3. 智能提供，让用户自己选择
对于深度使用用户而言，首页是信息的集合，用户希望只要打开首页就能知晓最近的活动和通知，并且能看到好的内容推荐。所以，内容的推荐和即时更新会让用户感到满足。同时用户能关注到自己为自己制定的推送内容。
4. 精致的UI界面
个性而不凌乱的配色，层次分明的信息展示，统一的控件及交互。对首次使用产品的用户而言，首页的好坏关系到用户对该产品的第一印象，用户第一眼看到的是界面，其次是内容。所以，在这个阶段，符合品牌的好的设计感和内容的丰富度会给用户的印象加分。
三，寻找（搜索）状态
当我们在设计信息架构时，需要考虑目标用户的信息需求，为不同的用户匹配不同的信息匹配方式。那么一般我们将搜索分为四种：
1. 目的性寻找（搜索）
举个例子，新房装修想买一组钢铁侠手办做装饰，那么我就打开淘宝输入钢铁侠手办1/4或者1/6，选择评价好的，价格低的店家就进行购买了，我知道在哪里能找到这样的手办，以及手办的类型，做工以及价格，所以我是带着明确的目标去寻找的。
2. 无目的性寻找（搜索）
举个例子：最近有了闲钱想置办一些手办，但是不知道买哪一种，随手输入了手办这个关键词，跳出来许许多多的手办，有些甚至称不上手办的玩偶也被列入了其中，这里就是信息不对称的结果。那么探索性搜索的局限性也非常大，那就是他对于平台的资源要求非常高。
3. 全面性寻找（搜索）
举个例子，我想买一个海贼王手办，但是我想尽量搜索到我希望得到的全部内容，这时候用户（我）将会自己创造关键词进行搜索，例如万代海贼王手办，眼镜厂海贼王手办，tsume海贼王，海贼王手办景品等等。
4. 重复性寻找（搜索）
举个例子，某一天我正在寻找我的钢铁侠手办，我找到了一家店铺卖的钢铁侠手办好评多，价格实惠，但是这时我被一件事打断了，导致之后我在想找这家店铺的名字我已经想不起来。所以这里对于用户的重复性寻找我们需要给出一个历史搜索记录来提供给用户。
四，无数据状态
这边无数据状态不仅仅是搜索之后没有相应数据的状态，也包括前后台通信错误，或者网络中断等一系列让数据无法正常展现在用户面前的状态。首先作为设计者我们应该明确知道，无数据此处应该是什么内容，导致没有内容的原因是什么，如何获得内容的途径以及解决方法。
和Web 端一样，移动端的空白页面越来越受到重视，不单单是视觉层面，空白页承载着更多内容，起到更多功效。同时，我们也将无数据页面分成三种情况：
1. 初次使用
初次使用的洁面应该算比较特殊的空白页面，它虽然有时候并不是空白，但实际对于用户来说，确实“无数据”状态，因为初次进入的初始状态用户对于此产品的功能架构并不熟悉，所以初状态空白页面也分为三种：1. 起引导作用的空白页；2. 提示文字＋操作按钮；3. 示例
2. 完成或清空内容
用户主动触发清空内容的操作，实际表明用户知道自己在做什么，误操作的可能性不高。这时候只需要给予用户结果的反馈就可以。但是有时清空内容并没有太多实际意义，却花费时间和精力，因此我们更倾向于给用户一些正面的反馈。同时需要思考用户在使用时的心理和目标，用户是否需要频繁的清空数据，如果是的话，可以考虑给出多种页面，随机出现增强趣味性。
3. 出错页面：
出错页面其实是可以被原谅的，但是请注意，不要进一步让用户迷惑，焦虑。需要做的是说明错误原因，并告诉用户接下来如何解决或者其他选择。
一般的用户遇到无法读取数据的时候第一个操作总是刷新网络，他们甚至会切换网络或者关闭重开网络来试图重新获取数据，但是在开发人员眼中，并不是所有状态都是网络造成的问题，只是用户觉得所有问题都是来自于网络。还有一种是在网络差读取数据慢的时候可以做一个预加载，提前告知用户将要出现的内容，这样也能缓解用户等待时的焦虑。
欢迎关注微信公众号：雷神U部落，分享产品设计好文。
「超实用的渐变色零基础自学指南」
名片制作指南：
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量150万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
我们的团队
大家在关注发送私信成功
满足所有需求，助您轻松工作
APP最常用的9种状态设计（附案例）
10:55 && 浏览量（2089） &&
现在做UI设计不仅要关注界面视觉，还得懂点交互和用研，今天这篇译文，囊括了移动APP操作过程中该有的9种基础状态（加载中、空状态、错误状态等），附上追波的优秀设计案例供学习，来收！
现在的UI设计团队通常先设计组件，多数界面几乎就是各种组件的结合。这会在用户的“异常路径”上留下不容小觑的断档。由于我们构建的是整个系统，而非几个页面，我们必须投入精力打磨这些常常被忽略的状态的设计，创造出组件的整个生命周期，来适应每一个人。我所理解的生命周期是这样的：
1. 初始状态
一个组件做任何事情之前是怎样的？可能这是用户首次看到它。或者它还没被激活。根本上说就是这个组件存在，但还没有启动。
的设计能确保你了解framer的最新动向。
令人厌恶的一种状态。在理想状况下，没人会看到这个。哎，可我们这里是现实世界。有许多方法能使加载状态微妙而含蓄。Facebook在这方面做得很好：
Facebook使用“假文章”来代替传统的转圈圈。
组件已经初始化，但是空无一物。没有数据，没有项目。这时候正适合引导用户采取行动（“点这里！”），或者给他们鼓励（“好样的，一切正常”）。
就将它作为了一种捷径。
4. 单一项目
开始有些数据了。在输入界面中，这或许是按下第一个键的状态。在列表中，可能是只有一项（或仅剩一项）时的状态。
又是Luke Seeley，MetaLab项目。
5. 有一些数据
这通常是你首先考虑的状态。某个组件的最理想状态是怎样的？数据加载了，也有内容输入，正是用户熟悉的状态。
舒适的大仪表盘。
6. 数据过多
哇！用户似乎操作过头了。产生了太多的结果（或许你现在正对它们分页处理），太多的文字（可能显示省略号？），诸如此类。
不错的翻页设计，来自
7. 错误状态
组件出错了。产生了异常。
<的错误状态很棒。
8. 正确状态
很好！这一项操作正确。
9. 完成状态
应用已经接受了用户的正确操作。他们不需要再为此操心了。
给出了一些积极的反馈。（此处图超大，压缩后失真，同学们可直接到追波看）
随着不同页面、用户操作、数据更新还有任何你应用的状态改变，这些状态都会反复出现。深思熟虑地设计这些变化，就能为用户创造优美的体验，无论他们身处何种情况。
这其中许多状态都没有被考虑过，被遗忘，或仅仅是被忽略了。这是个巨大的错误，也是你赶超对手的机会。将状态的思考纳入你的设计流程，在与用户产生共鸣的同时，也能掌控好你的应用。
这9种状态的设计适用于所有设计项目和组件。即使你做出了清醒的决策要忽略其中某一种，遵循这套准则也能确保你的确思考过那些异常路径。
& 收藏(9) 收藏 +1 已收藏 取消
& 推荐上头条 推荐 +1 推荐上头条 已推荐
回复@Zing:谢谢~好东西要一起分享
文章上传作者
m68的热门文章
开发者交流群：
DevStore技术交流群2：
运营交流群：
产品交流群：
深圳尺子科技有限公司
深圳市南山区蛇口网谷万海大厦C栋504
Copyright (C) 2015 DevStore. All Rights Reserved
DevStore用户登录
还没有DevStore帐号？
快捷登录：交互基础小科普！聊聊APP最常用的9种状态设计
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
交互基础小科普！聊聊APP最常用的9种状态设计
编者按：现在做UI设计不仅要关注界面视觉，还得懂点交互和用研，今天 这篇译文，囊括了移动APP操作过程中该有的9种基础状态（加载中、空状态、错误状态等），附上追波的优秀设计案例供学习，来收！
现在的UI设计团队通常先设计组件，多数界面几乎就是各种组件的结合。这会在用户的“异常路径”上留下不容小觑的断档。由于我们构建的是整个系统，而非几个页面，我们必须投入精力打磨这些常常被忽略的状态的设计，创造出组件的整个生命周期，来适应每一个人。我所理解的生命周期是这样的：
1. 初始状态
一个组件做任何事情之前是怎样的？可能这是用户首次看到它。或者它还没被激活。根本上说就是这个组件存在，但还没有启动。
的设计能确保你了解framer的最新动向。
令人厌恶的一种状态。在理想状况下，没人会看到这个。哎，可我们这里是现实世界。有许多方法能使加载状态微妙而含蓄。Facebook在这方面做得很好：
Facebook使用“假文章”来代替传统的转圈圈。
组件已经初始化，但是空无一物。没有数据，没有项目。这时候正适合引导用户采取行动（“点这里！”），或者给他们鼓励（“好样的，一切正常”）。
就将它作为了一种捷径。
4. 单一项目
开始有些数据了。在输入界面中，这或许是按下第一个键的状态。在列表中，可能是只有一项（或仅剩一项）时的状态。
又是，MetaLab项目。
5. 有一些数据
这通常是你首先考虑的状态。某个组件的最理想状态是怎样的？数据加载了，也有内容输入，正是用户熟悉的状态。
舒适的大仪表盘。
6. 数据过多
哇！用户似乎操作过头了。产生了太多的结果（或许你现在正对它们分页处理），太多的文字（可能显示省略号？），诸如此类。
不错的翻页设计，来自
7. 错误状态
组件出错了。产生了异常。
<的错误状态很棒。
8. 正确状态
很好！这一项操作正确。
9. 完成状态
应用已经接受了用户的正确操作。他们不需要再为此操心了。
给出了一些积极的反馈。（此处图超大，压缩后失真，同学们可直接到追波看）
随着不同页面、用户操作、数据更新还有任何你应用的状态改变，这些状态都会反复出现。深思熟虑地设计这些变化，就能为用户创造优美的体验，无论他们身处何种情况。
这其中许多状态都没有被考虑过，被遗忘，或仅仅是被忽略了。这是个巨大的错误，也是你赶超对手的机会。将状态的思考纳入你的设计流程，在与用户产生共鸣的同时，也能掌控好你的应用。
这9种状态的设计适用于所有设计项目和组件。即使你做出了清醒的决策要忽略其中某一种，遵循这套准则也能确保你的确思考过那些异常路径。
【本周最佳涨姿势系列好文】
设计四大原则之对比：
必读趋势之交互微知识！
提高设计效率的干货好文！
原文地址：
译文地址：
【优设网 原创文章 投稿邮箱：】
================关于优设网================
&#8220;优设网&#8220;是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量104万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
我们的团队
大家在关注不管是web和webAPP开发，目前响应式布局设计越来越重要啦！因为响应式布局是一个解决多类型屏幕问题的最优方案。
因此，今天25学堂来跟大家分享9个响应式布局设计的知识点或是概念。
第一点：响应式设计 vs 适应式设计
看似相同实则不然。这两种设计方式彼此相辅相成，所以说也没有对错之分。具体情况要依内容而定。2者解决的问题就是自适应的问题。确保可以在各个不同尺寸的终端显示效果一样。
第二点：内容流和信息纵向展示
随着移动屏幕尺寸越来越小，内容所占的垂直空间也越来越多，也就是说，内容会向下方延伸，这就叫做内容流。如果你习惯了使用像素和点进行设计，可能会觉得这个有点难掌握。不过没关系，习惯了就很好理解了。
第三点：相对单位和视区伸缩的布局
你的设计对象可能是台式桌面，也可能是移动端屏幕或者介于两者之间的任意屏幕类型。像素密度也会彼此不同，所以我们需要使用灵活可变，并且能够适应各种情况的单位。那么在这种情况下，百分比等相对单位就派上用场了。使用百分比时，我们说宽度50%就是表示宽度占屏幕大小（或者叫视区，也就是指所打开浏览器窗口的大小）的一半。
第四点：断点和CSS3
属性的合理使用
断点可以让页面布局在预设的点进行变形，也就是说，在台式桌面上显示3栏，在移动设备上仅显示1栏。大多数CSS属性都可以实现断点之间的变形。断点放置的位置通常取决于内容。比如，如果一句话要换行，你可能就需要加上断点。但断点使用时需要谨慎——如果搞不清内容之间的逻辑关系，很容易弄的一团乱。
第五点：最大和最小值 max与min
有时候内容占满整个屏幕宽度（例如在移动设备上）是好事，但如果相同的内容在电视屏幕上也撑得满满的，貌似就不太合理了。这就是为什么要有最大/最小值。例如，如果宽度为100%，最大宽度1000px，那么内容就会以不超过1000px的宽度填充屏幕。
第六点：嵌套对象
还记得相对位置吗？如果一大堆要素彼此都紧密联系，那么必将难以控制。因此，将要素放置到容器中就会让它们变得更加好理解，并且简洁明快。这种情况就需要用到像素之类的静态单位了。静态单位对于logo和按钮等不需要扩展的内容来说非常有用。
第七点：移动优先还是台式桌面优先
严格来说，项目从小屏幕入手过渡到大屏幕（移动优先），还是从大屏幕入手过渡到小屏幕（台式桌面优先）区别不大。但是，从移动端着手可以给你带来一些额外的限制，帮助你进行决策。通常情况下大家会从两方面同时着手，所以你还是要看哪种方式最适合你。
第八点：Web字体 vs 系统字体 也就是 选择合适的字体显示。
想让自己的网站拥有炫酷的Futura或Didot效果吗？那就是用web字体吧。尽管web字体看起来很炫酷，但你要记住，这些字体都需要用户下载，字越多，用户加载页面的时间也就越长。另一方面，系统字体加载速度则快得多（前提是用户本机就有），但太过普通。
第九点：位图 vs 矢量图的使用。如果在移动端尽量使用矢量图。
你的图标是否有很多细节，并且应用了很多华丽的效果？如果是，那就用位图。如果不是，考虑使用矢量图。如果是位图，使用jpg、png或gif。矢量图则最好使用SVG或图标字体。其各有利弊。但你要时刻牢记图标尺寸——未经过优化的图片不能传到网上。另一方面，矢量图通常比较小，不过部分比较老的浏览器可能不支持矢量图。还有，如果图标有很多曲线，那有可能会比位图还大，所以要明智取舍。
以上就是新手们在进行响应式布局需要注意的9项或者是需要掌握的9个知识点。
本文标题：
本文地址：/html5css3/7051.html
除非注明，本站文章均为原创或编译，转载请注明出处和原文链接，转载同时请务必保留原网站网址。
移动APP设计入门课程
为你推荐的相关文章
Copyright@
All Rights Reserved ICP备案号：桂ICP备号-2本站声明所有资源均是网上搜集或网友上传提供，如有侵犯您的版权，请及时联系我们（），我们将尽快处理。}