5大要点,解析移动应用设计指南

2023-05-29 0 688

责任编辑从怎样引导采用者首度新体验商品,怎样加速积极响应插件,强化终端端内容,结构设计触摸屏和实用四个方面如是说了终端插件结构设计的一些习题。

5大要点,解析移动应用设计指南

1. 著眼首度新体验

第二次新体验是智能手机APP存亡的关键性。你多于一次机会留下印象。如果你失利了,很有可能采用者不会重新启动你的应用领域了。

对采用者来说,采用应用领域前强制性采用者登入,这是一类两极化的妨碍,也是采用者舍弃插件的原因之一。对国际品牌名气低或价值提倡不明晰的应用领域,舍弃注册登记的采用者数量尤其大。

5大要点,解析移动应用设计指南

Pinterest明晰要求采用者建立两个新账号或在首度读取时登入

根据实战经验,多于在必要性的情况下才明晰要求采用者注册登记(比如,多于采用者完成注册登记TNUMBERV12V4能采用插件的核心理念机能)。即便在这种情况下,最合适尽量地延后登入时间——容许采用者新体验插件一两年,然后告诫她们注册登记。这将给你的采用者两个新体验,她们将更有可能注册登记你的应用领域。

1.1 较好的引导采用者新体验商品

在终端采用者新体验环境中,提供更多杰出的引导采用者新体验商品是留住采用者的基础。引导的目的是展现插件提供更多的核心理念机能。

在许多引导思路中,一类引导思路是仅在采用者需要TNUMBERV12V4提供更多说明。Duolingo是两个较好的范例。该插件将互动式互动式与渐进呈现出紧密结合在一起,时向采用者显示该插件的工作方式。引导采用者重新加入并采用她们选择的词汇进行加速试验。这使自学显得有意思且容易发现。

5大要点,解析移动应用设计指南

Duolingo有两个包涵加速试验的采用者辅导之旅

新体验引导可能非常有协助的另两件方法是空状况。空状况是屏幕的默认状况为空,需要采用者执行两个或多个步骤才能向其中填充数据。

除了告知采用者页面上期望包涵什么内容外,空白状况还可以教会人们怎样采用插件。即便引导过程仅包涵两个步骤,该手册仍可确保采用者做正确的事。

5大要点,解析移动应用设计指南

Expensify中的通过空状况告诉采用者怎样采用

1.2 不要预先明晰要求设置信息

强制性设置信息会与采用者产生摩擦,并可能导致采用者舍弃该插件。采用者启动插件时,她们希望它能够正常运行。因此,为大多数采用者结构设计插件,让少数想要不同配置的采用者可以随时调整设置以满足她们的需求。

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

避免采用者在启动插件时首先看到的是两个请求权限的对话框。

与登入或前期设置阶段类似,多于在插件的核心理念机能需要时,才应在启动时请求许可。

如果很明显你的插件依赖于该权限才能进行操作(比如,很明显照片编辑器为何会请求访问照片),则采用者不会对此请求感到困扰。

5大要点,解析移动应用设计指南

Google提出的权限请求模式

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

5大要点,解析移动应用设计指南

插件应在上下文中请求权限,并应传达访问权限将提供更多的价值。提示采用者仅在尝试采用机能时接受权限

温馨提示:

仅询问你的插件需要的权限

不要明晰要求所有可能的权限。如果某个插件请求了不需要的东西,那将是可疑的。比如,怀疑有两个闹钟插件明晰要求访问你的联系人列表的权限。

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

2. 加速积极响应应用领域程序

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

5大要点,解析移动应用设计指南

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

2.1 在屏幕可见区域读取内容

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

2.2 让采用者了解正在读取内容

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

2.3 提供更多视觉干扰

到无聊,让她们分散注意力。精美的动画可以在采用者等待时吸引她们的注意力。

5大要点,解析移动应用设计指南

小贴士:即便是再好的动画,当它被过度采用时,也会令人讨厌。当你结构设计两个动画的时候,问问你自己,“这个动画在第100次出现的时候是不是显得令人讨厌?”

2.4 骨架屏

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

5大要点,解析移动应用设计指南

实际的进度。

5大要点,解析移动应用设计指南

3. 强化终端端内容展现

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

3.1 使文本可读、易读

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

“强化版式可以强化可读性,可访问性,可用性和整体图形平衡。”

终端版式的关键性是可读性和易读性。如果采用者无法阅读你的内容,那么首先提供更多内容是没有意义的。

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

字体大小:一般来说,任何小于16像素(或11磅)的内容在任何屏幕上阅读都是具有挑战性的。字体样式:大多数采用者喜欢清晰易读的字体。安全的选择是系统的默认字体。对比:浅色文本(比如浅灰色)在美学上可能看起来很吸引人,但是采用者很难阅读它,尤其是在浅色背景下。确保字体和背景之间有足够的对比度,以便于阅读。5大要点,解析移动应用设计指南

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

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

避免全部大写

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

5大要点,解析移动应用设计指南

限制文本行的长度。

两个好的实战经验法则是每行30到40个字符。

5大要点,解析移动应用设计指南

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

不要太拥挤:在文本之间添加空格可以协助采用者阅读,并建立一类没有太多信息可以接收的感觉。

5大要点,解析移动应用设计指南

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

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

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

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

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

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

5大要点,解析移动应用设计指南

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

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

据ScientiaMobile称,94%的用户以纵向模式采用她们的终端设备。如果你的应用领域提供更多了视频内容,则应对其进行强化以容许采用者以纵向模式观看。

5大要点,解析移动应用设计指南

4. 触摸结构设计

触摸结构设计的目标是减少输入错误的数量,并使与插件的交互更舒适。

4.1 针对手指而非光标结构设计

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

5大要点,解析移动应用设计指南

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

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

5大要点,解析移动应用设计指南

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

5大要点,解析移动应用设计指南

4.2 考虑拇指区

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

5大要点,解析移动应用设计指南

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

5大要点,解析移动应用设计指南绿色区域是导航选项或频繁交互操作(比如号召性用语按钮)的最佳位置。红色区域是潜在危险选项(比如“删除”或“擦除”)的最佳位置。采用者不太可能意外触发此选项。

4.3 互动反馈

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

5大要点,解析移动应用设计指南

提供更多视觉动画或其他视觉效果的插件可以消除采用者的猜测。

5. 实用新体验

采用者新体验不仅仅是关于可用性还有感觉。当我们思考是什么让我们感觉很棒时,我们通常会想到是精心结构设计。

5.1 个性化新体验

个性化是当今终端插件最关键性的方面之一。这是与采用者联系并以真实的方式提供更多她们所需信息的机会。

通过紧密结合个性化,有无数种改善移动UX的方法。可以根据采用者的位置,她们过去的搜索和她们以前的购买来提供更多个性化内容。比如,如果你的采用者希望每月购买特定的商品,则某个应用领域可能会对其进行跟踪并针对这些类型的商品提供更多特别的优惠。

星巴克的终端插件就是遵循这种方法的两个较好的范例。该插件采用采用者的信息(比如,她们通常订购的咖啡类型)来提供更多特别优惠。

5大要点,解析移动应用设计指南

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

5.2 有意思的动画

与机能性动画(用于改善采用者界面的清晰度)不同,有意思的动画使界面感觉更实用。此类动画清楚地表明,开发该插件的人员会关心她们的采用者。采用令人愉悦的细节是与采用者建立情感联系的机会。

责任编辑作者:Nick Babich

原文地址:

https://www.smashingmagazine.com/2018/02/comprehensive-guide-to-mobile-app-design/

品成长之路

责任编辑由 @Kris 翻译发布于人人都是商品经理。未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务