帮你创造优质移动端UI的7项最佳实践

在几年前,关于网页和APP谁做主导的话题还很热,但是现在看来,APP无疑已经是为用户提供内容和服务的主流了,它是用户最信赖的内容和功能的呈现方式。于是,随之而来的问题就是如何在竞争无比激烈的市场中,让你的APP在诸多同类中脱颖而出,并且让用户留在你的APP当中。留白常常被认为是一个活跃的元素,而非被动存在的间隙和背景。—— Jan Tschichold小贴士:有效的移动端APP信息推送策略是采用多种类型的信息推送机制,推送通知,电子邮件,应用内通知,新闻Feed等。多样化的信息推送通过合理的协调,创造良好的用户体验。


在几年前,关于网页和APP谁做主导的话题还很热,但是现在看来,APP无疑已经是为用户提供内容和服务的主流了,它是用户最信赖的内容和功能的呈现方式。于是,随之而来的问题就是如何在竞争无比激烈的市场中,让你的APP在诸多同类中脱颖而出,并且让用户留在你的APP当中。

帮你创造优质移动端UI的7项最佳实践

这无疑是一个系统而宏大的话题,也许不是一两本书能够说明白的事情。不过,实例总是有说服力的,今天我们用7个APP设计的最佳实践来为你来展现优质APP的设计之道。

1、一屏一个任务

降低用户完成任务之时所需耗费的精力。

你为APP的每一屏都应当承载一个对用户有用、有价值的交互或者任务,一次完成一个任务,且只能有一个任务,其中应该不包含超过1次的行为召唤(CTA)。这样的设计能让用户更轻松地学习,更便捷地使用,在设计上也更容易添加删减以及构建。

以Uber为例,Uber 清楚地知道用户的目的是乘坐出租车,所以,应用程序不会一次给用户太多的信息,会根据地理信息自动检测用户的位置,而Uber 提供给用户的每一个界面的交互都是单个的,用户只需要选取位置,下单即可。

帮你创造优质移动端UI的7项最佳实践

2、隐形的UI

内容即是界面。

专注于内容,并且尽量删除不必要的元素,这样可以缩短用户集中注意力的时间,用户将会更快地被引导到他们正在搜寻的内容,而内容本身正是一个隐形的界面。最典型的就是Google 地图。在重新设计的时候,Google 地图删除了所有不必要的面板和按钮,地图本身就是最好的界面。

帮你创造优质移动端UI的7项最佳实践

3、呼吸的空间

使用负空间让重要的内容吸引用户的注意力。

留白,或者负空间,指的是页面设计布局中的空白部分,或者空白元素,它们常常被忽略和忽视,虽然许多设计师认为这样的设计会浪费屏幕的空间,但是留白本身就是设计的基本元素之一。

留白常常被认为是一个活跃的元素,而非被动存在的间隙和背景。—— Jan Tschichold

留白可以提升可读性和内容的优先级,在页面布局中也发挥着重要的作用。因此,它可以合理地简化UI并提升用户体验。

帮你创造优质移动端UI的7项最佳实践

遵循“少即是多”的原则。

4、直观的导航

导航应该是每个APP当中优先级最高的组成部分。移动端APP中导航应当容易被发现,可访问的,且尽可能少的占用屏幕空间。由于小屏幕的限制以及内容优先级的需要,移动端导航的可访问性设计一直是一个挑战。

标签栏和导航栏是非常适合用来展现较少的导航选项的,它们非常适合用来展示主要的导航选项,一个简单的点击就能流畅地切换到不同的页面。

帮你创造优质移动端UI的7项最佳实践

AppStore 中的标签导航。

5、单手操作

让你的设计兼容更大的屏幕。

iPhone 6和 6p 的发布标志着移动端设备彻底进入了大屏时代。

帮你创造优质移动端UI的7项最佳实践

关于用户如何握持手机,下面的图为你展现了最常见的三种模式:

帮你创造优质移动端UI的7项最佳实践

通过观察可以发现,85%的用户使用单手握持他们的手机,下面的热图展示了从2007年一来,各种不同尺寸的iPhone 的拇指操作区域。毫无疑问,随着屏幕尺寸的增加,拇指能够触及的区域的比例正在逐步降低。

帮你创造优质移动端UI的7项最佳实践

拇指的操作区域

所以,移动端界面的用户体验设计应当进行调整,尝试让你的APP 能够在iPhone 7和 7p 上面能够单手操作,将导航置于用户的拇指可以触及的区域之内。

帮你创造优质移动端UI的7项最佳实践

这是iOS版的 Pocket APP。所有的导航控件都集中在页脚,也就是手指可以轻松触及的区域,让你可以轻松的单手操作。

6、让APP运行快速

不要让用户等待内容呈现。

试图让程序的响应速度提升起来。许多任务尽量在后台跑起来,让前台的展现速度显得很快。将一部分操作打包到后台运行有两个好处:让一些等待和加载过程不再展现在用户面前,并且可以让许多操作在用户请求之前就发生。一个很好的例子就是 Instagram 中上传图片,当用户选择要共享的图片之时,上传就已经开始。

帮你创造优质移动端UI的7项最佳实践

Instagram 邀请用户在上传图片的时候添加标签,当用户准备按下分享按钮的时候,上传基本就完成了,接下来用户就可以轻松的分享照片了。

7、善用推送通知

在推送信息之前请三思。

每天用户都会被无数无用的推送通知所轰炸,被分散注意力,这也使得通知常常会显得颇为恼人。根据调研,超过70%的受访者表示,令人烦躁的推送信息是促使他们卸载应用的主要原因。

帮你创造优质移动端UI的7项最佳实践

所以,要做好移动端设计,需要用好每一次的信息推送。不要为了吸引用户而推送消息,这往往会适得其反。你需要将对于用户有价值的信息推送出去,这样才合适。

小贴士:有效的移动端APP信息推送策略是采用多种类型的信息推送机制,推送通知,电子邮件,应用内通知,新闻Feed等。多样化的信息推送通过合理的协调,创造良好的用户体验。

帮你创造优质移动端UI的7项最佳实践

根据内容的紧急性和正确性来选择通知类型。

结语

在设计移动端APP的时候,最重要的事情还是确保它有用而又直观。如果APP对于用户没有实用价值,又没有任何理由使用它,那么它的价值就相当有限了。如果它对于用户相当有用,但是需要花费大量的时间精力来学习和完成任务,那么你需要实用良好的UI和UX来解决设计问题。

 

原文作者:Nick Babich

原文地址:uxplanet

译者:@陈子木

译文来自:优设

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/26625/

(0)
CatherineCatherine
上一篇 2017-05-15 08:22
下一篇 2017-05-15 10:21

相关推荐

  • QQ国际版视觉探索:准备了两套视觉设计方案

    QQ国际版主要是针对国外用户打造的一款轻量社交产品。由于当前产品迭代周期相对较长,我们对当前视觉提出一个疑问:现有产品的视觉形态,是否符合国际版的产品调性?基于这个问题,我们开启这次探索之旅。

    2017-05-08
  • 译文 | 在UX设计中利用色彩影响情绪

    颜色是我们观察事物的第一认知,是最能触动我们感官的视觉元素。颜色可以激发我们的联想,刺激我们的情绪。在设计中,颜色的合理运用一直是个很重要的课题。现在就让本篇文章带你认识每种颜色的独特作用和如何运用在UX设计之中吧。

    2017-05-25
  • 2个方向4个维度,探索电商运营活动中的交互设计

    设计是为了达成一定的商业目标服务的,设计本身是我们的表达手段,在达成业务及用户目标的过程中需要一定的设计指导准则以达到优秀的使用体验。本文作者将针对电商运营活动的交互设计,讨论了交互设计师需要如何思考?

    2017-05-06
  • 掌握这10招,再也不愁公众号涨粉了!

    都说现在运营公众号非常难涨粉非常难别担心今天介绍10种强大的运营工具/技巧给你帮你解决下面这些问题帐号涨粉、爆文技巧、文章排版图片设计、数据监测、海报营销1运营公举小磊磊免费学习新媒体运营知识年收入上百万的全栈新媒体运营,全平台有10万新媒体运营关注,成百上千个自媒体大佬都是他的粉丝。公众号上有180万字的原创运营知识,教你写文章、涨粉、赚钱、提升运营能力。并且把新媒体知识梳理成了标准化的知识体系,让所有人都能免费学会公众号运营。长按识...

    2018-04-03
  • 令人惊叹的移动交互设计欣赏

    dribbble上令人惊叹的无线端交互设计!来自全球牛人们的奇思妙想,新颖动人的交互在这一张张GIF动态图上一览无余!当然界面一样打动人心,腾出手点赞的同时!记得另存哟! Dash Dash Jeff Broderick   Rally Inte…

    2016-05-24
  • UI设计案例分析:现代互联网和移动应用中出现的一些优秀的用户界面模式

    在这篇文章中,来自UXPin(一款用户体验设计的应用程序)的Chris Bank为我们带来了最近在现代互联网和移动应用中出现的一些优秀的用户界面模式,并将通过实例展示如何将这些出色的UI设计模式应用到其他的网站和应用中。

    2017-06-05
  • 用户体验必读:将用户需求转成产品需求

    如何挖掘需求,来和大家聊聊如何全面分析收集好的需求,如何判断需求真伪。通常收集到的需求,绝大部分都是“用户需求”,所谓用户需求,是指听到用户说想要的东西,以及用户以为自己想要的东西,而产品经理要做的,就是思考如下三个问题:1、这个需求靠谱么?(需求的判断)2、这个需求真的是需求么?(需求的挖掘)3、怎么向别人讲清楚这个需求?(需求的描述)需求的判断产品经理先要判断这个需求是否靠谱,判断的标准就是需求是否有“价值”,这个价值,具体包括:用...

    2018-03-03
  • web表格设计攻略

    在后台管理系统、数据类产品等的设计中,表格作为一种常见的信息组织整理手段,甚至是web页面的基础设施之一,其重要性不言自明。结合最近做的几个项目和相关设计经验总结,特此整理出这样一篇设计攻略,希望能够对你的设计有所帮助。

    2017-04-28
  • 快速学习时序图:时序图简介、画法及实例

    时序图作为常用的UML交互图,可以直观的传达系统内外之间的交互过程,经常用在详细设计文档中。下面本文综合参考了多篇时序图的教程,根据作者的思路将时序图做了更深入的讲解。

    2017-05-06
  • 减少返工!如何发现交互设计中的思维盲区?

    作为入行不久的交互设计师,我发现自己在交互设计的实践中无法顾及到方方面面,是存在思维盲区的。其中有欠缺经验的原因,也有自身知识局限的问题。进入开发阶段后,每次需要修改交互时,心里都会有些惭愧,感觉为…

    交互设计 2015-11-03