当设计移动端产品时, 有很多事情需要考虑, 在本文中, 笔者根据经历过的各项目, 总结了移动端产品设计中的一些建议, 希望能给读者以启发
现在相比于历史上任何时期, 人们对手机的依赖性都更强美国的人均使用手机时长达到 5 个小时, 其中的绝大部分时间都花在了 App 和浏览网页上
用户体验是衡量移动应用优秀与否的最重要标准, 尤其是用户对 App 的期待越来越高: 快速加载易用性趣味性如果想让你的 App 取得成功, 那么用户体验是不可或缺的, 是产品设计各阶段都必须时刻思考的
当设计移动端产品时, 有很多事情需要考虑, 在本文中, 笔者根据经历过的各项目, 总结了移动端产品设计中的一些建议, 希望能给读者以启发
文章较长, 文章目录如下, 各位同学可以根据自己的需要阅读
降低认知负荷
满足用户的控制感
界面的无障碍设计
导航栏设计
导航中的动效设计
关注用户的首次启动
加快 App 的响应速度
提高内容的展示质量
触控设计
情感化设计
优化消息推送
针对移动设备的优化
App 的设计应适应新兴市场
测试和反馈
1. 降低认知负荷
认知负荷指用户使用 App 时所需的大脑能量人脑的处理能力有限, 而且当 App 一次性提供过多信息时, 可能会让用户产生压迫感, 并促使他们放弃使用
1.1. 整理界面
减少产品的凌乱感是一个有效的方法凌乱是糟糕产品的最大特征, 如果界面堆满了杂乱的元素, 用户就要承载过多的信息: 每个新增的按钮图片和 icon 都会让界面更加臃肿
凌乱的桌面让我们心烦, 凌乱的产品则会让用户更加烦躁 (这点很容易理解, 智能手机的屏幕更小, 凌乱感相应地会被放大) 产品经理和交互设计师应该尽量去掉 App 中的不必要元素, 因为降低凌乱感有助于提高用户的理解力简约的界面和功能设计不失为好方案:
将内容数量保持在最低限度, 只展示用户必须知道的内容;
尽量减少界面元素, 让产品的界面更清晰, 这也有助于降低认知负荷;
使用渐进式呈现 (Progressive Disclosure) 的方法展示更多元素或者选项
1.2. 减少任务
寻找产品方案中任何可能需要用户思考的模块(可能是表单输入或者选项选择), 并找寻其他的替代方案举例来说, 某些情况下, 可以通过本地缓存记录数据, 而不是要求用户每次都在相同的地方反复输入; 此外, 还可以根据用户的使用行为和使用习惯, 为用户设置默认值
1.3. 分解任务
如果一项任务包含多个步骤需要用户执行多个操作, 那最好将其分解为若干相关的子任务这个原则在移动端产品设计上非常重要, 因为不应让用户一次性承载过多过复杂的任务一个很好的例子是电商 App 的下单购买流程, 在电商的购买任务里, 原本一个复杂的任务被分解为一系列逻辑递进的子任务, 用户在每个子任务中分别执行所需操作
一方面, 分解任务降低了用户的认知负荷, 另一方面, 也起到连接不同任务的作用比如浏览和购买在逻辑上相关, 但在实际操作中无关, 但由于用户在各个任务里的操作复杂度基本相同, 所以从浏览到购买有比较好的过渡, 用户在不同任务衔接时也不会感到突兀
1.4. 使用常见的界面设计方案
常见的界面设计方案是指多数 App 使用的设计方案, 包括导航栏位置交互方式 tab 话术等在近十年的移动端产品发展中, 很多界面元素的设计方案已经是习以为常的定式, 不需要规定也不需要解释, 因为用户已经熟悉这种设计方式了用户使用已形成的使用习惯来使用新 App 时, 避免了学习成本和可能带来的流失
Quora 的用户页
1.5. 尽量减少用户输入
在手机屏幕上打字的用户体验极差, 这单纯因为物理尺寸太小, 和软件性能无关, 再熟练的用户都会出现打错字的情况需要用户手动输入的最常见场景就是填写表单, 这里有一些建议可供参考:
删除任何不必要的字段, 缩短表单长度, 保证用户输入最少的内容;
使用 input mask, 这是一种帮助用户格式化输入文本的插件, 能够执行对输入内容的切断分组等操作, 帮助用户专注于表单填写上, 让用户更容易发现错误;
使用诸如自动填充的智能功能比如, 填写地址是任何登记类表单中最容易出问题的地方, 可以先根据手机定位自动填充地址信息, 这样在大多数场景下, 用户只需要进行简单的修正即可;
动态验证字段值提交后才能知道输入错误, 然后再返回更正, 这点的用户体验很差如果有可能, 应当在用户输入后立即检查输入字段的准确性, 以便用户可以立即更正;
根据字段类型显示键盘类型在输入电话号码时, 应显示数字键盘; 如果输入的是电子邮箱, 还需要包括 @键要确保这个功能在整个 App 中都是一致的, 而不仅限于某些表单
1.6. 预估用户需求
在产品设计阶段, 需要根据用户的操作路径使用产品, 主动发现使用流程中的潜藏痛点比如在下图中, 提示了用户需要提供信息的具体位置
1.7. 用视觉重量传达重要性
界面里最重要的元素应该有最直观的重量增加元素的重量可以通过改变字重大小颜色等方式实现
大尺寸元素比小尺寸更吸引眼球
1.8. 避免专业术语
在任何移动端产品设计里, 清晰准确地表达信息都是最重要的使用目标用户习惯的表达方式, 而不是你的产研团队习惯了的表达方式(或者行业术语)
1.9. 一致性设计
一致性是设计的基本原则, 一致性有助于降低混乱度在 App 设计中, 一致性意味着以下内容:
视觉的一致性: App 里的字体按钮形式文本标签样式需保持一致;
功能的一致性: 交互方式和交互元素在各个页面中应保持一致;
产品间的一致性: 同一系列的不同产品之间需保持一致性(比如网易邮箱和网易云音乐), 这样能降低用户使用相关产品的学习成本
关于设计一致性, 有如下的建议:
遵循平台指南 / 规范
每个移动端的操作系统都有界面设计的标准指南, 比如苹果的界面设计规范遵循平台规范很重要, 因为用户已经熟悉了他的手机操作系统, 任何与这个系统的交互模式相悖的产品都会在使用过程中出现摩擦造成用户的不适感
不要模仿其他平台的 UI 设计
在为 Android 或者 iOS 设计 App 时, 不要参考其他平台的 UI 设计 icon 功能模块 (输入框复选框开关等) 字体等元素应保持该系统原生的感觉尽可能使用原生系统的组件, 这样会增强用户的信任感
保持同一产品在不同终端的一致性
这属于产品间一致性的范畴如果你的产品同时有 web 端和移动端, 那么应尽可能地保持二者的风格一致, 这将减少用户在 PC 和手机间切换的不适感二者的不一致 (比如不同的导航方式或者不同的配色方案) 可能会造成混乱, 增加用户的认知负荷
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, 也会比较容易上手
来源: http://www.tuicool.com/articles/yURFzmb