做好这4个细节设计,让你的移动APP 用户体验脱颖而出

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

做好这4个细节设计,让你的移动APP 用户体验脱颖而出

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

启动页

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

做好这4个细节设计,让你的移动APP 用户体验脱颖而出

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

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

做好这4个细节设计,让你的移动APP 用户体验脱颖而出

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

做好这4个细节设计,让你的移动APP 用户体验脱颖而出

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

空状态

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

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

做好这4个细节设计,让你的移动APP 用户体验脱颖而出

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

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

做好这4个细节设计,让你的移动APP 用户体验脱颖而出

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

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

做好这4个细节设计,让你的移动APP 用户体验脱颖而出

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

框架界面

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

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

几点建议:

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

做好这4个细节设计,让你的移动APP 用户体验脱颖而出

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

做好这4个细节设计,让你的移动APP 用户体验脱颖而出

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

动画反馈

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

  • 它会告知交互的结果,让结果可见并可以理解。
  • 它给用户一个信号,这个对象(或者 app )执行一个任务成功或者失败。

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

做好这4个细节设计,让你的移动APP 用户体验脱颖而出

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

做好这4个细节设计,让你的移动APP 用户体验脱颖而出

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

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

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

做好这4个细节设计,让你的移动APP 用户体验脱颖而出

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

做好这4个细节设计,让你的移动APP 用户体验脱颖而出

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

做好这4个细节设计,让你的移动APP 用户体验脱颖而出

总结

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

 

原文地址:Little Big Details For Your Mobile App

译文出自:掘金翻译计划

译者:mypchas6fans

校对者:DeadLionsiegeout

本文由 @掘金翻译计划 授权发布于人人都是产品经理,未经作者许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/27605/

(0)
CatherineCatherine
上一篇 2017-05-18 09:50
下一篇 2017-05-18 11:48

相关推荐

  • 线上讲座 | 送你一份全新的交互设计指南ヾ(゚∀゚ゞ)

    ▲ 向左滑动查看更多导师作品摘要:上期Designer Talk 我们邀请到的UI设计师Coraline,以“对现代科技发起交互”为媒介,来传达她所创作的艺术呈现,不知道同学们有没有通过对非现场性艺术分享,使思想脱离理性范畴,继而进行创作性的探索与尝试。本期Designer Talk我们将借助符号性的语言,将碎片化的艺术凝结在一起,打破虚无与现实桎梏,为您呈现全新的交互设计。关键词:交互设计 / 当下全新的非完美呈现分享导师Jason本...

    2018-04-19
  • 如何进行AR交互设计?

    AR类产品的出现,可能是第一次实现虚拟世界与现实世相互“融合”,完成屏幕的“跨越”,人机交互设计也开始从二维平面迈向三维世界。然而,由于市场和技术的因素,AR产品的人机交互界面仍然处于早期,各种理念和方法仍处于逐步形成与试验阶段。通过对现有AR产品交互设计的调研和思考,以及现有移动产品的对比,本文将阐述一些方法,以供思考和交流。AR效果的呈现有多种方式,市场在短期内主要分为基于手机等移动设备的移动AR和基于头显设备的AR眼镜(包括一体机...

    2018-04-29
  • 唯品会实习|面向19/18届,地点广州

    公司介绍唯品会(NYSE:VIPS)VIP.com成立于2008年,以“全球精选 正品特卖”为品牌宗旨,在中国开创了“精选品牌、深度折扣、限时抢购”的时尚特卖模式,在线销售服饰鞋包、美妆、母婴、居家、生活等全品类名品。招聘岗位商务助理(18/19届)■岗位职责:1. 负责跟进预上线商品的所有商品资料;2. 负责检查货品清单正确性、完整性、准确性、规范性,交接正确的资料给相关部门;3. 负责申请标准的档期,走档期流程并落实档期日期;4. ...

    2018-03-06
  • 窥探交互设计师成长之路指南!

    一部窥探交互设计师成长之路的实用指南!传授高效、靠谱的交互设计学习方法!IAMUE网站创始人倾力之作!

    2016-06-13
  • 【译文】”移动优先”的设计理念已过时了吗

    【译者注】Mobile First(移动优先)大概是移动设计师听到最多的设计理念之一,2011年Luke Wroblewski大神提出它时,打破了原来“先完成web设计再移植移动设计”的常规方式,为移动设计注入了一针强心剂,一时各大企…

    2016-02-19
  • 写给想要从事交互或者刚从事交互的盆友们

    本文作者是从一个工业设计毕业的学生,走过平面设计,做过UI设计,一步步转行到现在所喜爱的UX设计,并且一直处在努力开心地进步着的状态中。在本文中,也只想通过结合自己的经历和周围同学、同行的状况给大家一些实在的帮助。

    2017-05-08
  • 还有不知道锤子ROM新特性的吗?Smartisan OS v2.0.0 更新日志

    Smartisan OS v2.0.0 开始公测,本次更新新增功能 10 项。主要有:1.丑颜相机;2.超大图标;3.透明桌面;4.桌面人脸识别功能;5.欢喜云查岗。今天我们会将该版本随机推送给 520 位 Smartisan T1 手机用户。欢迎收到…

    2015-08-05
  • 深度长文|如何输出一份让团队满意的交互设计交付物

    本篇是系列小结的第二篇,简单总结一下自己对如何提高交互文档质量的一些思考。

    2017-05-16
  • 交互动画设计案例—1688首页动效

    随着CSS3和HTML5的发展,越来越多狂拽炫酷叼炸天的动效在网页设计上遍地开花,根据最新的浏览器市场份额报告,IE6的份额已经降到了5.21%,这简直是一个喜大普奔的消息,做动效可以完全不care低端浏览器的时代已经在…

    2015-04-24
  • 查遗补漏!可能你从未注意过的7个用户体验设计细节

    优秀产品的用户体验设计是贯穿整个设计过程的,从最早的设计阶段便已经开始。所以,完成产品所有的部分之后再想办法为其补做“用户体验设计”是不可能的——你需要打一开始就就将其放在心上。

    2017-05-24