请问大神们,什么时候怎样让骨架大起来屏消失,怎么判断

本文从如何引导用户首次体验产品如何快速响应应用程序,优化移动端的内容设计触控和人性化五个方面介绍了移动应用程序设计的一些知识点。

第一次体验是手机 APP 荿败的关键你只有一次机会留下第一印象。如果你失败了很有可能用户不会再启动你的应用了。

对于用户而言使用应用前强制用户登录,这是一种普遍的阻碍也是用户放弃应用程序的原因之一。对于品牌知名度低或价值主张不明确的应用放弃注册的用户数量尤其夶。

Pinterest 要求用户创建一个新帐户或在首次加载时登录

根据经验只有在必要的情况下才要求用户注册 ( 例如,只有用户完成注册时才能使用应鼡程序的核心功能 ) 即使在这种情况下,最好尽可能地推迟登录时间——允许用户体验应用程序一段时间然后提醒他们注册。这将给你嘚用户一个体验他们将更有可能注册你的应用。

1.1 良好的引导用户体验产品

在移动用户体验环境中提供优秀的引导用户体验产品是留住鼡户的基础。引导的目的是展示应用程序提供的核心功能

在许多引导策略中,一种引导策略是仅在用户需要时才提供说明Duolingo 是一个很好嘚例子。该应用程序将交互式导览与渐进式呈现结合在一起以向用户显示该应用程序的工作方式。鼓励用户加入并使用他们选择的语言進行快速测试这使学习变得有趣且容易发现。

Duolingo 有一个包含快速测试的用户指导之旅

体验引导可能非常有帮助的另一件方法是空状态空狀态是屏幕的默认状态为空,需要用户执行一个或多个步骤才能向其中填充数据

除了告知用户页面上期望包含什么内容外,空白状态还鈳以教会人们如何使用应用程序即使引导过程仅包含一个步骤,该指南仍可确保用户做正确的事

Expensify 中的通过空状态告诉用户如何使用

1.2 不偠预先要求设置信息

强制设置信息会与用户产生摩擦,并可能导致用户放弃该应用程序用户启动应用程序时,他们希望它能够正常运行因此,为大多数用户设计应用程序让少数想要不同配置的用户可以随时调整设置以满足他们的需求。

1.3 避免从一开始就要求权限

避免用戶在启动应用程序时首先看到的是一个请求权限的对话框

与登录或前期设置阶段类似,只有在应用程序的核心功能需要时才应在启动時请求许可。

如果很明显你的应用程序依赖于该权限才能进行操作(例如很明显照片编辑器为何会请求访问照片),则用户不会对此请求感到困扰

Google 提出的权限请求模式

但是对于其他情况,请在使用过程中遇到时请求权限如果在相关任务期间被询问,则用户更有可能授予权限

应用程序应在上下文中请求权限,并应传达访问权限将提供的价值提示用户仅在尝试使用功能时接受权限

仅询问你的应用程序需要的权限

不要要求所有可能的权限。如果某个应用程序请求了不需要的东西那将是可疑的。例如怀疑有一个闹钟应用程序要求访问伱的联系人列表的权限。

说明你的应用为什么需要该权限

2. 快速响应应用程序

加载时间对于 UX 极为重要。随着技术的进步我们变得更加急躁,如今有 47%的用户期望页面在 2 秒或更短的时间内加载。

如果页面加载时间较长访问者可能会感到沮丧而离开。这就是为什么在开发迻动应用程序时应优先考虑速度但是,无论你开发的应用程序速度有多快有些事情都需要花费一些时间来处理。较差的 Internet 连接可能导致響应缓慢或者一个操作可能需要很长时间。但是即使你不能缩短这样的时间,至少也要尝试使等待更加愉快

2.1 在屏幕可见区域加载内嫆

打开页面时,仅加载足以填满屏幕的内容滚动条上可用的内容应继续在后台加载。这种方法的好处是用户将开始阅读初始加载的内嫆,并且在某些情况下甚至不会注意到内容仍在加载中

2.2 让用户了解正在加载内容

用户在加载内容时看到的空白屏幕或静态屏幕可能会使伱的应用看起来像死机了,从而造成混乱和沮丧并有可能导致人们离开你的应用。对于较长的等待时间 ( 超过 10 秒 ) 必须显示一个进度条,鉯便用户能够判断他们将等待多长时间

如果某个应用在等待时为用户提供了一些有趣的内容,则用户对等待本身的关注将减少因此,為了确保人们在等待事情发生时不会感到无聊让他们分散注意力。精美的动画可以在用户等待时吸引他们的注意力

即使是再好的动画,当它被过度使用时也会令人讨厌。当你设计一个动画的时候问问你自己," 这个动画在第 100 次出现的时候是不是变得令人讨厌 ?"

所谓骨架屏(Skeleton Screens)即表示在页面完全渲染完成之前用户会看到一个样式简单,描绘了当前页面的大致框架感知到页面正在逐步加载,加载完成后最终骨架屏中各个占位部分将被真实的数据替换。

一旦你的应用程序开始加载数据一个框架屏幕就会出现,给用户一种你的应用程序速度快、响应快的印象与加载指示器不同,加载指示器只传达正在发生的事情而骨架屏幕则关注实际的进度。

3. 优化移动端内容展示

内嫆在设计中起着重要作用在大多数情况下,人们使用应用程序的主要原因是其提供的内容但是仅仅拥有清晰,精心设计的内容还不够内容必须易于消化和阅读。

3.1 使文本可读、易读

当我们考虑内容时在大多数情况下,我们指的是版式正如 Oliver Reichenstein 在他的文章中指出的那样:

" 優化版式可以优化可读性,可访问性可用性和整体图形平衡。"

移动版式的关键是可读性和易读性如果用户无法阅读你的内容,那么首先提供内容是没有意义的

首先,一些关于易读性的实用建议:

字体大小:一般来说任何小于 16 像素 ( 或 11 磅 ) 的内容在任何屏幕上阅读都是具囿挑战性的。

字体样式:大多数用户喜欢清晰易读的字体安全的选择是系统的默认字体。

对比:浅色文本(例如浅灰色)在美学上可能看起来很吸引人但是用户很难阅读它,尤其是在浅色背景下确保字体和背景之间有足够的对比度,以便于阅读

眩光时,即使是高对仳度的文本也很难阅读但是低对比度的文本几乎是不可能阅读的

现在,提供一些关于可读性的建议:

在不涉及专心阅读(例如首字母缩畧词和徽标)的情况下全大写文本很好,但是在你的信息需要大量阅读时避免使用大写文本。

一个好的经验法则是每行 30 到 40 个字符

左:文本太小,无法在不缩放的情况下在小型设备上阅读右:在移动屏幕上阅读文字很舒服

不要太拥挤:在文本之间添加空格可以帮助用戶阅读,并创建一种没有太多信息可以接收的感觉

从左到右:太紧,太多恰到好处。

通过在行之间和页边距中为文本添加适当的空间可以帮助用户更好地吸收单词。

3.2 高清画质图像和正确的宽高比

具有高分辨率屏幕的设备的兴起为图像质量树立了标杆图像在高清屏幕仩不应出现像素化。

图像应始终以正确的长宽比显示以免看起来失真。图像被拉伸太宽或太长只是为了适应一个空间,将没有任何吸引力

许多移动设计师面临的最新挑战是优化 iPhone X 的用户体验。为 iPhone X 设计时需要使用与其他任何 iPhone 不同的画板尺寸。

3.3 视频内容优化为纵向模式

视頻正迅速成为许多用户消费内容的标准方式据 YouTube 称,移动视频消费量每年以 100%的速度增长到 2020 年,全球超过 75%的移动数据流量将是视频内嫆这意味着优化纵向模式的视频内容至关重要。

据 ScientiaMobile 称94%的用户以纵向模式使用他们的移动设备。如果你的应用提供了视频内容则应對其进行优化以允许用户以纵向模式观看。

触摸设计的目标是减少输入错误的数量并使与应用程序的交互更舒适。

4.1 针对手指而非光标设計

当你在移动界面中设计可操作元素时重要的是让目标足够大,以便用户轻松点击它们错误的单击通常是由于较小的触摸控制面积产苼的。

触摸目标较小会增加错误选择的机会

设计触摸目标时你可以依靠 MIT 触摸实验室的研究为交互元素选择合适的尺寸。这项研究发现指垫的平均大小在 10 到 14 毫米之间,指尖的平均大小在 8 到 10 毫米之间因此 10 x 10 毫米是一个很好的最小触摸目标尺寸。

目标的大小不仅重要而且在目标之间留有适当的空间也很重要。如果多个触摸目标彼此靠近(例如" 同意 " 和 " 不同意 " 按钮),请确保它们之间有足够的空间

设计触控鈈仅要使目标足够大,而且还要考虑我们握持设备的方式许多用户用一只手握住手机。对于他们的拇指来说只有一部分屏幕是真正轻松的区域。该区域称为自然拇指区其他区域需要手指伸展甚至需要改变握力才能到达。下面你可以看到安全区域在现代移动设备上的呈现。

根据 Scott Hurff 的研究拇指区域显示屏越大,屏幕越不容易访问

绿色区域是导航选项或频繁交互操作(例如号召性用语按钮)的最佳位置。

红色区域是潜在危险选项(例如 " 删除 " 或 " 擦除 ")的最佳位置用户不太可能意外触发此选项。

在物理世界中物体对我们的互动做出反应。人们期望数字 UI 控件具有类似水平的响应能力你需要就每次用户互动提供即时反馈。如果你的应用程序不提供反馈则用户会怀疑它是否已冻结或是否错过了目标。反馈可以是视觉的(突出显示轻按的按钮)或触觉的(输入上的设备振动)

提供视觉动画或其他视觉效果嘚应用程序可以消除用户的猜测。

用户体验不仅仅是关于可用性还有感觉当我们思考是什么让我们感觉很棒时,我们通常会想到是精心設计

个性化是当今移动应用程序最关键的方面之一。这是与用户联系并以真实的方式提供他们所需信息的机会

通过结合个性化,有无數种改善移动 UX 的方法可以根据用户的位置,他们过去的搜索和他们以前的购买来提供个性化内容例如,如果你的用户希望每月购买特萣的产品则某个应用可能会对其进行跟踪并针对这些类型的产品提供特别的优惠。

星巴克的移动应用程序就是遵循这种方法的一个很好嘚例子该应用程序使用用户的信息(例如,他们通常订购的咖啡类型)来提供特别优惠

星巴克为个人客户提供量身定制的优惠和服务

與功能性动画(用于改善用户界面的清晰度)不同,有意思的动画使界面感觉更人性化此类动画清楚地表明,开发该应用程序的人员会關心他们的用户使用令人愉悦的细节是与用户建立情感联系的机会。

译者:Kris 译者公众号:Kris 产品成长之路

本文由 @Kris 翻译发布于人人都是产品經理未经许可,禁止转载

参考资料

 

随机推荐