logo 返回列表
移动端产品设计完全指南【二】
2018-03-07 1716

2. 满足用户的控制感

2.1. 交互元素可预测、符合用户习惯

可预测性是用户体验设计的基本原则。当事情按照用户预计的方向运行时,用户会有强烈的控制感。在PC上,用户可以使用鼠标悬停来判断该元素是否可以点击或有交互,但在移动设备上,用户只能通过点击来判断是否为交互元素。这就是在移动端,要着重考虑按钮等交互元素设计的原因。如何能让用户清晰地感知该元素为按钮?应该将按钮和非交互的UI元素在外观上做明显的区分。

2.2. 请正确使用“返回”按钮

不正确的使用“返回”按钮会带来很多问题,用户点击“返回”键是想回到上一页,要避免用户点击“返回”直接回到首页的情况。好的设计应该是让用户更容易返回和修正误触,当用户清楚他们可以通过“返回”再次查看填写的表单或者选择的选项时,用户会更轻松地前往下一页。

2.3. 有效的错误信息

出错是情理之中。有时是用户误触或者误操作,有时是程序自身运行错误。不管是怎样的场景,错误和其解决方案都对用户体验产生巨大影响。给用户提示无用的错误信息,而不是告知用户正确的处理方案,会造成用户体验上的挫败感,甚至造成用户流失。

以Spotify的错误页面为例,这个页面并没有告诉用户错误是如何产生的,也没有告诉用户如何解决,那么用户就会很困惑:“现在我能做些什么呢?”

Spotify的错误页面只有“出现错误”字样,无任何解决方案

不要寄希望于用户的技术娴熟,能自己解决问题,要用简单明了的话术告知用户发生了什么。错误信息应包含以下内容:

  • 出了什么错,可能的原因;

  • 为了修复错误,接下来用户要怎么做。

3. 界面的无障碍设计

无障碍设计指设计方案应支持各类人群的使用。考虑下失明、失聪或其他残障人士应如何使用你的App呢?

3.1. 照顾色盲人群

全球的的色盲或者色弱人群占比4.5%,弱视人群占比4%,盲人占比0.6%。我们在设计产品时很容易忽视这部分用户,因为大多数产品经理和交互设计师都没有遇到这样的问题。

有一个简单的例子,App中表单填写的成功和错误提示分别用绿色和红色,但这两种颜色是色盲或色弱人群最难区分的。很多产品在表单填写处提示“红色标记字段是必填项”,虽然这是一个细节,但是如果设计成下图的方式,那对色盲人群来说就是个灾难。

色盲用户无法区分红色突出的字段

颜色可以被用作传递信息,但不应是传递信息、表示动作、提示或辨别视觉元素的唯一视觉手段,在使用颜色的同时,还应使用其他的视觉符号以确保任何用户都能够清楚认知界面信息。

同时使用标签、icon和颜色传递信息

3.2. 动效是可选项

一些用户习惯于关闭操作系统设置里的动画效果,当用户已经选择关闭动效时,App应尽可能地屏蔽掉其中的动效。

4. 导航栏设计

导航栏设计应该是App设计中优先级最高的工作之一。如果用户找不到功能或者内容入口,那即使App的功能再酷、内容再优质,也无济于事;另外,如果花费过多时间和精力去设计产品的导航架构,也可能会适得其反、失去用户。导航的设计标准应该是让用户自然、直观地使用App,无需任何解释或帮助信息就能完成所有的主线任务。

4.1. 使用标准化的导航组件

最好使用标准化的导航组件,比如iOS中的tab bar和Android中的抽屉导航栏(navigation drawer),大多数用户都习惯于这两种导航模式,即使首次使用App,也会比较容易上手。

Android的侧滑菜单(图片来源:Material Design)

iOS的tab bar(图片来源:Ramotion)

4.2. 不要混用导航模式

当选定了一种核心导航模式后,请不要夹杂其他的导航模式。避免出现同一个App中既有tab bar又有navigation drawer的情况。

4.3. 导航栏可见

正如Jakob Nielsen所说,认知比记忆更容易。始终保持操作和选项可见,能最小化用户的记忆负载。导航的位置应该清晰显著,保证随时可用,而不是只在用户必须使用时出现。

4.4. 标注当前的位置或层级标题

没有在页面中标注当前的位置或所处层级是许多App的常见问题。“我在哪儿?”这是用户需要知道的基本问题,也是产品必须告知用户的基本内容。要确保用户随时明确当前所处位置,可能大多数场景下,用户会无视这个页面标题或者位置提示,但当用户想知道却无法知道时,用户体验会大大下降。

Apple出品的Health App提供了当前页面的信息

5. 导航中的动效使用

动画是描述状态转换的最佳工具。动画能帮助用户理解页面之间的状态变化、触发了什么、以及如何恢复。

功能动画可以有效地引导用户注意力,使复杂的转化更好理解(图片来源:Jae-seong, Jeong)

5.1. 谨慎使用手势交互

在交互设计中加入手势确实很诱人,但在大多数场景下,还是避免这种诱惑为好。当手势作为一级导航时,大多会造成用户体验的混乱。为什么呢?因为手势不可见、使用方式不显著、大多需要额外的使用指引。

Thomas Joos在他的文章中指出:跳出按钮——开启手势驱动的产品设计。在产品设计中使用手势的最大障碍是用户的学习成本较高。每次用手势替换可见的控件时,App的学习成本就会上升一个数量级。这是因为用户较难发现隐藏的手势交互,建议产品设计中只使用已经习以为常的手势动作。

当产品设计中使用手势交互时,建议遵循以下几点:

  • 使用标准手势

所谓“标准”,是指用户使用App时自然的、习惯的手势,正因为用户已经习惯了,可以避免额外的学习成本和记忆负载。

  • 手势是可视化导航的补充品,而不是替代品

手势能提供导航的快捷方式,但不能完全替代导航栏。因此,即使可视化的导航栏会占用界面空间,也不可或缺。

6. 关注用户的首次启动——第一印象决定最终印象

首次启动是App成败的关键环节。在用户的首次启动中,产品只有一次机会。如果产品设计失败,那新增用户很可能就会变成沉寂用户(研究表明,有24%的新增用户会永远沉寂)。

6.1. 避免登录才能使用

一些产品不提供游客模式,强制只有注册/登录用户才能使用,这是用户弃用产品的常见原因之一。用户在强制注册时放弃产品,这对于品牌辨识度较低、产品特性不明确的产品尤其致命。

Pinterest要求用户必须先登录才可以使用

根据经验,应该只在必要时才要求用户注册/登录(比如,App的核心功能只对已登录用户开发),即使在这种场景下,最好还是延迟登录,让用户先体验一段时间,然后再轻轻地提醒用户注册,而非粗暴地强制要求,这样也能提高注册转化率。

6.2. 优化用户引导页的用户体验

优质的用户引导页是保证用户留存的重要手段之一,用户引导页的设计原则是准确、高效地告知用户App的功能和价值。

对于用户引导页,有一条建议非常有效:场景化设计。场景化设计意味着只在用户需要的时候才出现用户引导。Duolingo是很好的例子,这个App通过渐进访问的方式告知用户各个功能的使用方式。

Duolingo引导页的快速测试

另一条建议是在用户初次使用时,默认页面是空白状态,这样能引导用户通过自己的操作来填充数据。除了告知用户页面内容外,空白状态还能指导用户如何使用App。用户在空白的页面下进行操作,任何操作都能迅速看到反馈,这能加快用户对App的学习速度。

Expensify首次启动时是空白状态,为了告知用户如何使用

6.3. 不要在首次启动时,要求用户进行任何设置操作

有些App在首次启动时,强制要求用户设置一些参数,这个功能的体验极差。用户下载并启动App,就是希望能马上使用。因此一些个性化设置的内容,应根据大众需求预先设置好,并提供给少数用户自己配置的操作入口。

尽量从操作系统中获得设置信息。如果产品所需的设置信息是关于用户、设备或者系统的,应尽可能地询问操作系统,而不是让用户自己配置。

6.4. 避免在一开始就请求各类权限

避免用户在App首次启动时就看到各类请求许可的对话框。与强制登录、强制设置相似,应在App的核心功能必需某项权限时,才向用户请求权限。如果在某个任务中,用户必须同意该权限请求,这时候用户不会觉得受到打扰,比如在编辑照片时,用户很清楚为什么会弹出访问相册的请求。

Google建议的权限请求模式(图片来源:Material Design)

尽量在用户使用过程中请求权限,这样更可能获得用户的许可。

(图片来源:Cluster)

  • 只问你的App需要什么

不要请求所有权限。如果App的权限请求看上去不必要,那会让用户不信任。比如,一个闹钟App要求访问通讯录,这无疑很奇怪。

  • 如果原因不明显,那么请解释为什么需要这项权限

有时需要为权限请求增加更多的介绍文案。


相关推荐
微信扫一扫
微信扫一扫
关注公众号,了解更多资讯
联系客服

微信扫码联系客服