恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
移动端UX设计:关键原则
0.0°
2016-07-25 自译外文 经验/观点 原作者: Nick Babich 举报 2074 9 4 0

设计移动端APP时,最重要的一点就是要确保你的设计既是有用的,同时也容易上手。如果APP没有用的话,那它就没有实际使用价值,也就没人会用它;如果APP很有用,但是却需要很多的时间和精力去学习,那么人们也会没有耐心去学习。



好的UI设计可以解决以下设计难题:

  • 为了保持有用性,移动端APP的设计需要以用户为中心。人们下载你的APP,是因为他们需要去解决一个问题。因此,这个APP就有一个既定的目的。仔细地从用户的角度去思考,想一想他们到底要解决什么问题,聚焦在他们的关键目的上,或者是移除他们解决问题过程中的各种障碍。
  • 让你的UI设计尽量清晰。要让你设计的界面尽量有效,人们就必须可以明白它是做什么的,并且如何使用它。不要让用户产生迷惑。

接下来是9条UX设计原则,我认为它们对于创建真正好的移动端用户体验非常重要。



1.去除杂乱

用户的注意力非常珍贵,我们也要根据用户的注意力进行设计。杂乱的界面展示了过多的信息,让你的用户非常的累:每一个加进去的按钮、图片、文字都会使界面更加复杂。

对于桌面应用和网页来说,杂乱并不好。对于移动端设计来说,杂乱的效果要糟糕一百倍。

Antoine de Saint-Exupéry说过一句非常著名的话,“完美,意味着没有多余的东西需要被剔除。”移动端设计时,一定要注意避免任何非必要的东西,因为减少页面的杂乱将提高页面的聚合性和整体感。

一个简单的规则是:一屏一个主要操作。对于使用者,你设计的每一个页面应该仅提供一个具有真正价值的单一操作。这会让你的应用更易上手,更易使用,必要时也更容易添加功能。100个清晰的屏幕比1个杂乱的屏幕更好。

举Uber为例。Uber始终知道,使用Über的用户目的就是要叫车。APP没有用太多的信息去扰乱用户:它根据GEO数据自动检测用户的位置,用户需要做的唯一一件事就是选择上车地点。

优秀UX设计中最基本的一点是减少用户达到其目的所需要付出的精力。


2.让导航更加明显、不言自明

对于每一个APP来说,导航都拥有很高的优先级。好的导航应该在用户使用APP的过程中默默地帮助他们。要知道,即使有一个非常酷的功能或者非常吸引人的内容,如果没人能够找到他们的话,也是徒劳。优秀的移动端导航应该:

  • 移动端导航必须明了。你需要使用合适的符号或标记(正确的视觉符号),让你的导航不需要任何解释,并且确保每一个导航元素都能够去往正确的目的地。

Image title

  • APP内的所有导航必须一致。不要在不同的页面内移动导航,或者隐藏他们。这样的行为只会让用户失去方向感。
  • 移动端导航必须告知用户当前的位置。在APP菜单上最常犯的一个错误就是没法显示当先位置。“我在哪儿?”是一个成功导航必须解决的基础问题之一。


3.创建无缝体验

设计移动端应用时,需要从全局考虑。创建手机、电脑、平板之间的无缝体验,对你的用户非常重要。

Apple Music


例如Apple Music。你可以在Mac上创建一个播放列表,它会立刻同步到你的iPhone上。Apple明白,移动APP的设计非常重要,而创建一个iPhone、电脑、iPad之间的无缝体验对于用户来说也非常重要。



4.设计对手指友好的点击目标

小的触摸目标比大的更难触碰。当你进行移动端界面设计时,最好让你的目标足够大,让他们容易点击。

让你的触碰点7-10mm大,这样他们可以用手指准确的点击到。这样大小的目标对于用户手指来说非常舒适,在点击时,目标的边缘也是可见的。这可以让用户在点击目标之后得到清晰的视觉反馈。

用户界面的控制键需要足够大,才能捕捉到用户的拇指动作,这样才不会导致用户因为错误的动作和极小的目标而沮丧。图片来源:Apple

另外需要确保目标按键之间有足够的空间。



5.文字内容应易读

与电脑相比,智能手机的屏幕都相对较小,因此移动端设计的挑战之一就是如何把这么多的内容放到一块小的界面当中。也许你会想要把电脑端所有的内容都尽可能的挤进移动端的界面当中。要小心,你应该克制这种冲动。

移动端设计的规则之一:文字至少要有11pt,这样才能保证他们不需要放大就可以在移动距离内看清。



通过行高或字间距来提高可读性。很好,大一些的空白有时可以让最杂乱的界面看起来具有吸引力和简洁。

优秀UI设计包含很多舒缓阅读节奏的空间。图片来源:Apple



6.让界面元素清晰可见

你需要借助颜色和对比来帮助用户理解你的内容。为了支撑可用性,你可以选定主要、次要、强调颜色。确保元素间有足够的颜色对比度,这样低视力的用户也可以看见和使用你的APP。

文字颜色和背景颜色必须拥有足够的对比度,这样文字才具有可读性。W3C对主体文字和图片文字提供了如下对比度建议:

  • 小字需要与背景有至少4.5:1的对比度;
  • 大字(粗体14pt/18pt,甚至更大)需要与背景至少有3:1的对比度;

没有达到上述建议对比度的文字将很难阅读。图片来源:Apple

界面拥有足够的对比度对于移动端是非常重要的:用户在户外时,手机可能因为光线而只拥有较低对比度。

这一页上面的中性灰在室内是很好阅读的;但是在户外,效果就不太好。图片来源:usertesting


图标或其他关键元素也应当采用上述建议的对比度。

没有达到上述建议对比度的图标将很难从其背景上突出出来。图片来源:Material Design



7.根据手的位置设计控制点

Steven Hoober在他的移动设备使用调查中发现,49%的用户只依赖一个手指去完成所有的手机操作。下图中的图样大致是移动手机屏幕的可达区域示意图,各颜色代表了用户可以触及的与手机屏幕交互的点。

智能手机上单手操作的舒适区。图片来源:uxmatters


绿色代表用户可以轻松触及的区域;黄色代表用户需要一点稍微伸展一点;红色代表用户可能需要调整手持方式才能达到的点。因此,手的位置应该影响着移动端设计时各控制元素的摆放问题:

  • 一级菜单、高频按键和常用操作应该放置在绿色区域内,因为这样子单手很容易交互。

Tumblr常用操作。图片来源:Capptivate

  • 反向操作(例如删除和消除)应该放在单手难触及的红色区域,因为你可不想误点击到它们。



8.减少打字输入的需求

移动端打字是很缓慢且易错的过程。因此,使用一款移动APP时应尽量减少打字输入的需求:

  • 让表单短且简单,去除一切不需要的内容;

 没人喜欢填表格。表格越长越复杂,越少的人会去填。图片来源:Lukew

  • 适当时使用自动填充和私人数据,这样用户只需要输入最少的信息。

填写国家时的自动填充



9.检验设计

在大屏幕上,我们的移动端设计通常看起来很不错,但是当拿到一个真正的移动端时,它们甚至达不到预想的一半好用。即使是考虑的非常周全的UX设计,放到实际世界中使用时,还是会包含很多看不见的缺陷。这就是为什么你需要让你的APP在现实用户的不同移动端设备上进行测试了。你应该让真实用户完成一系列任务,之后你就会知道你的设计到底表现的如何了。把你的APP当做一个持续进化的实体,通过数据分析和用户反馈来不断提升用户体验。



结论

和其他的设计原则一样,以上的建议只是一个开始。一定记住,要组合这些原则,并将这些原则付以最佳时间。记住,design isn’t just for designers — it’s for users(设计不止针对设计师,它更是针对用户).

更新:2016-07-25

收藏

9人已收藏

  • 7

    作品

  • 3

    粉丝

  • 38

    关注

  • 长滑动的最佳实践
  • 打造好的产品
  • 2017年UI设计报告-自译
  • DAY3-【临摹练习】Principle 动效练习-1
相关标签
经验用户体验

    猜你喜欢

      2016-07-25 自译外文 经验/观点 原作者: Nick Babich 举报 2074 9 4 0

      移动端UX设计:关键原则

      0.0°

      你确定要举报移动端UX设计:关键原则

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年07月25日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      4
      9
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录