开发移动应用,你应该注意这些小细节

简介: 本文讲的是开发移动应用,你应该注意这些小细节,你的 app 的成功涉及很多因素,但最重要的是总体用户体验。市场上脱颖而出的 app 都提供了很棒的 UX。具体到设计移动 UX,遵从最佳实践是一个好方法,但是构建蓝图的时候,往往容易忽略一些锦上添花的设计元素。
本文讲的是开发移动应用,你应该注意这些小细节,

你的 app 的成功涉及很多因素,但最重要的是总体用户体验。市场上脱颖而出的 app 都提供了很棒的 UX。具体到设计移动 UX,遵从最佳实践是一个好方法,但是构建蓝图的时候,往往容易忽略一些锦上添花的设计元素。而“不错的体验”和“非凡的体验”之间,通常取决于我们设计这些小细节的用心程度。

通过本文你可以看到这些 小中见大的细节 和设计中那些更明显的元素同样重要,以及它们如何决定 app 的成功。

启动页

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

图片来源: mobile-patterns

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

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

    图片来源: Cuberto

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

    通过使用进度条让加载过程更自然. 图片来源: de_martin

空状态

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

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

图片来源: inspired-ui

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

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

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

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

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

框架界面

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

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

几点建议:

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

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

    真正的图片出现之前,你可以看到模糊图片填充的占位符。图片来源: jmperezperez

动画反馈

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

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

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

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

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

使用不同凡响的 动画,一个 app 可以真正的打动用户。 下面是关于动画反馈的一些提示:

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

    图片来源: Rachel Nabors

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

    图片来源: xjw

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

    图片来源: Tubik

总结

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

谢谢!





原文发布时间为:2016年09月12日

本文来自云栖社区合作伙伴掘金,了解相关信息可以关注掘金网站。
目录
相关文章
|
22天前
|
机器学习/深度学习 人工智能 算法
探索移动应用无障碍功能的设计与实现
【4月更文挑战第2天】 随着智能移动设备的普及,应用程序已成为日常生活的重要组成部分。然而,对于有视觉、听力或其他身体限制的用户来说,传统的应用界面和交互方式可能构成重大障碍。因此,本文将深入探讨移动应用的无障碍功能设计,分析现有技术标准与挑战,并提出创新性的设计理念和技术实现策略,以期推动更包容性的数字生态建设。
|
3天前
|
开发框架 安全 Android开发
移动应用与系统:跨平台开发的未来
【4月更文挑战第21天】随着科技的不断发展,移动应用和操作系统已经深入到我们生活的各个角落。从智能手机到平板电脑,再到可穿戴设备,移动应用和操作系统为我们提供了丰富的功能和便利。本文将探讨移动应用开发的现状、移动操作系统的发展趋势以及跨平台开发的未来。
|
12天前
|
物联网 5G Android开发
移动应用与系统:从开发到应用
本文探讨了移动应用与系统领域的相关话题,涵盖了移动应用开发、移动操作系统等方面。通过分析现有技术和趋势,展望了未来移动应用与系统的发展方向,旨在为读者提供对这一领域的深入了解和思考。
12 0
|
1月前
|
开发框架 Android开发 UED
移动应用与系统:开发和优化的探索
【2月更文挑战第30天】 在数字化时代,移动应用已成为人们日常生活的重要组成部分。本文将深入探讨移动应用的开发、移动操作系统的运行机制,以及如何通过优化提升用户体验。我们将从移动应用开发的技术选型,到移动操作系统的性能优化,再到移动应用的用户体验设计,全面解析移动应用与系统的开发和优化。
|
10月前
|
小程序 容器
利用无代码工具开发一款小程序(二)
利用无代码工具开发一款小程序(二)
|
10月前
|
小程序 开发者
利用无代码工具开发一款小程序(一)
利用无代码工具开发一款小程序(一)
|
Web App开发 前端开发 JavaScript
如何利用ipad随时随地开发代码
如何利用ipad随时随地开发代码
370 1
如何利用ipad随时随地开发代码
|
移动开发 Dart 前端开发
移动端跨平台开发优秀案例收藏~不断更新
移动端跨平台开发优秀案例收藏~不断更新
|
存储 设计模式 程序员
多数程序员难以简单的方式开发应用?
  心理学中有一篇相当古老、但又非常重要的论文,题为《魔法数字七(上下浮动二):人类信息处理能力中的一些限制》。这篇文章衡量了大脑处理信息的极限,并给出了一个具体的数字:人脑可以同时容纳五到九个概念。我们当然能够把这个有趣的结论延伸到诸多领域当中,但对软件开发人员而言,下面两项含义最为重要:
108 0
|
测试技术 开发工具 git
规范语音聊天app开发流程,实现高效开发轻而易举
规范语音聊天app开发流程,实现高效开发轻而易举