如何做好移动APP4个细节的用户体验设计?

如何做好移动APP4个细节的用户体验设计?

  启动页、空状态、动画反馈、框架界面… 今天提到的这4种状态,都是容易被忽视,而又能让移动App 脱颖而出的细节。如何做好这4个细节的用户体验设计?今天这篇好文总结了关键的几个原则。

  启动页

  当用户打开 app 时,最不能做的事情就是让他们等待。但是如果 app 的初始设置非常耗时,又不可能优化该怎么办?你不得不让用户等。如果他们愿意等,你得知道如何 吸引他们。启动页解决了等待的问题,让你有一个简洁有力的窗口来吸引用户。

  

  这里有一些小贴士,在设计启动页的时候记得注意:

  Google 和 Apple 都建议用启动页 模拟更快的加载 来提高用户体验。启动页给到用户即时反馈,表示 app 已经启动并正在加载。 为了保证人们等待的时候不厌倦,给他们一些 娱乐:有意思的,意想不到的,或者任何可以抓住用户注意力的东西,时间长到够 app 启动就好。

  

  如果 app 的初始设置超过 10 秒钟,考虑使用 进度条 来表示正在加载。记住,不确定时间的等待给人的感觉要比确定时间的等待更加漫长。所以,你要给用户一个清晰的标识,他们需要等多长时间。

  

  (通过使用进度条让加载过程更自然)

  空状态

  我们通常会设计一个丰满的界面,布局中的所有元素都完美的放置,看上去很美。但是如果界面正在等待用户操作,该怎么设计?我要说的就是空状态。设计空状态是非常重要的,因为即使它是一个临时状态,它也会是 app 中的一份子, 并且对用户 有用。

  空状态的意义不仅是一个装饰。除了向用户提示界面上将要展现的内容,它还可以作为一种 导引 (介绍 app,展示为用户做的事情),或者 助手 (出错时的屏幕)。这两种情况下,你都希望用户能做点什么事情,所以,屏幕不会立即变为空状态。

  

  下面是一些设计空状态时的小技巧:

  给新手用户设计空状态。记住新用户的体验很 重要。给他们设计空状态的时候要尽量简单。重点放在用户的主要目标,设计互动性最大化:清晰的信息,合适的图像,一个按钮,这就够了。

  

  Khaylo Workout 是一个关于空状态设计的很好例子。这个空状态告诉用户为什么会看到当前界面(因为他们还没有挑战任何朋友)以及如何操作(点击 图标)

  错误状态。如果空状态时由于系统或用户错误,你必须在友好度和帮助度之间寻找一个平衡。一点小幽默通常可以抹平出错的沮丧,但是更重要的是你要清楚的说明解决问题的步骤。

  

  迷失方向,孤立无援,就像在一个荒岛上?遵从 Azendoo 的建议,保持冷静,点个火,然后继续刷新。

  框架界面

  我们通常不考虑内容的不同加载速度——我们一直认为都是立马加载(或者至少非常快)。所以我们通常没有为用户需要等待加载的场合设计。

  但是网速不是总是有保障的,它可能比预期的要慢。尤其是下载比较大的内容时(比如图片)。如果你不能缩短时间,至少要让用户等待得舒服一点。你可以用临时信息容器 来保持用户的注意,比如框架界面和图片占位符。比起转圈的加载提示,框架界面能建立对内容的预期,减少认知的负担。

  几点建议:

  框架界面不必很抢眼。只需要凸显必要的信息,比如段落结构。Facebook 的灰色占位符就是个好例子——它加载时使用了元素模板,让用户熟悉正在加载的内容的整体结构。注意框架界面中的图片和线框并没有很大区别。

  

  对正在加载的图片,可以用图片中的主色填充一个占位符。 Medium 有一个很棒的图片加载效果。首先载入一个小的模糊图片,然后慢慢转变成大图。

  

  (真正的图片出现之前,你可以看到模糊图片填充的占位符。)

  动画反馈

  好的交互设计会提供反馈。在现实世界,像按钮这样的物体会对我们的交互做出反馈。人们会对 app 中的元素有同样水平的期望。可视的反馈让人们有 掌控感:

  它会告知交互的结果,让结果可见并可以理解。

  它给用户一个信号,这个对象(或者 app )执行一个任务成功或者失败。

  动画反馈通过即时的信息沟通来节约时间,并且不能让用户厌烦或者分心。最基础的动画反馈就是 转场:

  

  当用户看的点击/触摸操作引发的一个动画反馈,他们马上知道这个操作被接受了。

  

  当用户点击勾选任务已完成, 包括这个任务的区域就缩小并且变成了绿色。

  下面是关于动画反馈的一些提示:

  动画反馈必须经久不衰。第一次看着新鲜的东西,100 次之后可能就烦了。

  

  动画可以让用户分心,让他们忽略加载的时间。

  

  动画可以让用户体验打动人心,刻骨铭心。

  

  总结

  用心设计。app 的 UI 里面,每个微小的细节都值得密切注意,因为 UX 就是让所有细节协调的总和。所以,请从一而终,持之以恒的打磨你的 UI,创造真正无与伦比的用户体验。

华企商城更多商品介绍:百度seo网站优化 博客营销工具软件 专利企业站模版

文章转载请注明出处:http://www.netshop168.com/article-9616.html


相关推荐

  • 如何做好移动APP4个细节的用户体验设计? 如何做好移动APP4个细节的用户体验设计?  启动页、空状态、动画反馈、框架界面…今天提到的这4种状态,都是容易被忽视,而又能让移动App脱颖而出的细节。如何做好这4个细节的用户体验设计?今天这篇好文总结了关键的几个原则。  启动页  当用
  • 带你认识几个用户体验设计中原则性错误   对于用户体验大家并不感到陌生吧!我们在设计的时候,或多或少都会接触到一些关于用户体验设计相关的问题,有些是我们需要了解知道就可以避免的,那么在用户体验中什么才是值得我们去关注学习呢?相对一些初学者可以不是很清楚,本期的用户体验设计学习将
  • 用户体验设计师的八个习惯  用户体验师似乎是一个很奇怪的职业,但是一个却是在设计中不可缺少的职业。如果在项目一开始就引入用户体验设计,就能避免过度复杂的解决方案。  今天来给大家说说用户体验设计师的八个习惯。  一:他们倾听用户  如果没有用户,就只能靠经验了。也就
  • 用户体验设计中3种常犯的错误 交互科技最近发现开始学习界面UI设计的朋友越来越多,界面UI设计领域的高手和爱好者也越来越多。于是,在这个领域中出现了大量的创新,设计流程以及手法等等,各种“原则”也开始出现,而用良莠不齐来形容现在的界面UI设计则是非常恰当的。界面UI设计
  • 用追女生的方法做设计!O2O用户体验设计方法之五线谱 编者按:O2O席卷各大城市的时候,设计师该如何与时俱进,打造线上和线下无割裂感的用户体验?今天阿里的李恬同学用一个特别有趣的例子(如何追到喜欢日系风格的女生),分享用户体验设计中一个超实用的方法:五线谱。想知道如何进行一场「好感倍增」的约会
  • 巨显科技:用户体验设计哪些书籍可以看   巨显科技:用户体验设计哪些书籍可以看?不要感谢我,我是雷锋,今日为你们介绍节本对用户体验设计有帮助的书籍,书不在多,重要的是领悟哦,只有好的领悟,才是有价值的。  上海巨显信息科技有限公司,主要经营从事计算机技术领域内的技术开发、技术转
  • 从9个方面聊聊用户体验设计的发展 如果您想订阅本博客内容,每天自动发到您的邮箱中,请点这里从9个方面聊聊用户体验设计的发展  今天饿了么UED的小满同学给大家翻译了一篇国外的用户体验设计回顾总结文,里边提到的9个观点都特别有前瞻性,剥离开细枝末节的视觉风格和交互原则,这些很
  • 回顾与展望!从9个方面聊聊用户体验设计的发展 一、扣像素是没前途的你可能仍然花着大量时间对着屏幕对齐像素描点勾线,不过到了2015年,你也终于意识到你的LinkedIn技能表需要添加上「用户体验」光环。如果真是如此,那么你的PS生涯可能就此结束了。不是说用户界面设计这行就要翘辫子了,而
  • APP设计分享!智能电视用户体验设计之遥控器篇 今天有请负责智能电视APP设计一年半的@卜卜胡萝卜1992给大家分享一些实用的设计经验,科普智能电视用户体验的基础知识。接上一篇继续探讨问题,本篇关于遥控器。那种一大条上面都是按钮的遥控器在互联网电视时代已经没有地位,现在不管是哪个品牌的电
  • 超完整的用户体验设计流程,规范化提升产品 可能每个公司都有各自的用户体验设计流程,流程合理能让我们更有效率地进行产品工作。下面这篇文章来自海外,让我们看看他们对用户体验设计流程有怎样的理解吧。文档编写有助于产品的概念形成、设计、创造和性能衡量。但是,编写文档的目的不应单单是为了产品
  • 谷歌用户体验设计十大准则 谷歌的愿景  Googl用户体验团队致力于创建有用的(useful)、快速的(fast)、简单的(simple)、有吸引力的(engaging)、创新的(innovative)、适合大众的(universal)、有用的(profitable
  • 浅谈网站设计用户体验设计的体验点 网站建设公司www.zhihone.com网站体验是近几年刚刚兴起的词汇,因此对于广大用户来说,网站体验依然很飘渺,感觉很神秘。本文就是针对此问题,将笔者所能想到的所有与网站体验有关的一些体验店整理出来了。一共总结了76点,共五大类。希望可

你的评论

就没有什么想说的吗?

最新博客

关于我们 移动版

©2017传客网    琼ICP备15003173号-2    

本站部分文章来源于互联网,版权归属于原作者。
本站所有转载文章言论不代表本站观点,如是侵犯了原作者的权利请发邮件联系站长(weishubao@126.com),我们收到后立即删除。
站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!

X