新人入门|7个移动 UX 设计要点,提高易用性

本文介绍的7个移动 UX 设计要点,诸如内容优先、导航设计、快速响应等都是基础而经典的设计知识,适合新手入门学习和查漏补缺。


本文介绍的7个移动 UX 设计要点,诸如内容优先、导航设计、快速响应等都是基础而经典的设计知识,适合新手入门学习和查漏补缺。

新人入门|7个移动 UX 设计要点,提高易用性

目录

  1.  一个屏幕,一个任务
  2. 看不见的用户界面
  3. 充分留白
  4. 让导航变得简单
  5. 单手操作
  6. 响应快速
  7. 让推送更加人性化

01. 一个屏幕,一个任务

减轻用户在获取所需信息上花费的努力。

为APP 所设计的每一个屏幕画面,都需要仔细斟酌,让每一个操作都发挥它的作用。

我们来看看下面这个Uber 的APP界面吧。用户使用这个APP的目的是为了搭上出租车,所以在这个界面中,为了不使用户感到混乱,我们限制了其他元素的出现。基于GPS 我们可以自动定位用户所在的位置,用户只需要选择自己想去的位置就可以了。

新人入门|7个移动 UX 设计要点,提高易用性

02. 看不见的界面

内容即界面。

为了让用户着眼于内容,我们可以将一些不必要的元素进行删除。这样可以缩短用户的关注时间,将他们引导到他们所需要的内容上。

以下面的谷歌地图为例。谷歌把全部不必要的面板和按钮统统省略,将地图本身便是界面这一理念传达出来。

新人入门|7个移动 UX 设计要点,提高易用性

03. 充分留白

为了让重要的内容变得注目,让我们来利用负空间吧。

负空间,又被人称为留白,指的是在设计和布局的时候在要素的四周被空出来的部分,这部分往往被人无视。虽然有人认为这是对有限空间的浪费,但留白空间对于移动应用界面设计是非常必要的。

不管是在提高可读性,排列内容的优先顺序,还是进行可视化操作的布局上都发挥着非常重要的作用。不但可以简化用户界面,还能改善用户体验。

新人入门|7个移动 UX 设计要点,提高易用性

04. 让导航变得简单

导航菜单不管是在哪种情况、哪种屏幕下都应该能让用户很容易地找到。建议从界面的尺寸限制和内容的优先级出发,决定用哪种导航。

标签栏作为导航菜单的代替,可以通过一个简单的点击跳转到不同的页面,对移动端APP来说也是非常方便的设定。

新人入门|7个移动 UX 设计要点,提高易用性

05. 单手操作

对应大屏来设计尺寸吧。自从iPhone 6 和 6 Plus 发售之后,大屏幕已经是今后主流的趋势了。

新人入门|7个移动 UX 设计要点,提高易用性

下面这张图片展示了大部分人是怎样持握移动设备的。(单手操作:49% | 一只手托着操作:36% | 双手操作:15%)

新人入门|7个移动 UX 设计要点,提高易用性

参加试验的用户中有85%是用单手操作手机的。接下来的这张热度图反映的是自2007年以后发售的iPhone 屏幕上单手大拇指所能操作的范围。正如你所看到的,随着屏幕的不断变大,所能操作的部分(图中绿色区域)正在逐渐变小。

新人入门|7个移动 UX 设计要点,提高易用性

为了改善用户体验,你也需要将上面的数据应用到设计之中。在制作对应大屏幕(如iPhone6或7等等)的APP时,你也需要考虑到单手能操作的范围。然后,在大拇指所能接触到的范围内配置你的导航菜单。

新人入门|7个移动 UX 设计要点,提高易用性

06. 快速响应

不要让用户将时间浪费在等待上。

你应该把快速启动时刻放在心上。通过后台提前运行,你可以让他看起来变得响应快速。这样做会有两个好处,用户看不见它们的加载过程,且在用户实际操作之前项目就已经加载完成。一个很棒的参考案例,就拿Instagram的照片上传功能来说,用户选择好想要分享的照片时,上传就已经开始了。

新人入门|7个移动 UX 设计要点,提高易用性

在Instagram上传照片的时候,他还会提醒用户添加标签。直到用户按下分享按钮,照片的上传工作就已经完成了,用户可以立即分享他们的照片。

07. 让推送更加人性化

在发送信息之前多想想。

每天通过APP给用户进行大量的推送会让用户的注意力变得分散甚至给他们带来烦恼。这些让人厌烦的推送也是用户选择卸载它们的原因之一(有71%的受访者这样回答)。

新人入门|7个移动 UX 设计要点,提高易用性

不要试图为了吸引用户而去给他们推送消息。而是将对用户来说非常重要的消息进行整理之后,再给他们进行推送。

为了有效的给移动端的用户推送通知,我们可以使用如推送通知、E-mail、应用内通知等各种各样的手段。增加你的消息推送方式,将他们很好的结合在一起,可以让你的用户体验变得更加友好。

新人入门|7个移动 UX 设计要点,提高易用性

最后

在设计移动应用的时候,要将便利性(英: Useful)与直观性(英: Intuitive)这两点时刻记在心上。如果应用对用户并没有多大帮助,谁也没有理由去使用它的;如果应用很便利,但使用又需要花费一番功夫,也没有几个人会去真正学习该怎样使用的。好的UI设计和UX设计,应该将以上两点问题全部解决。

那么,一起享受设计的乐趣吧。

 

原文地址:photoshopvip

翻译:@喪心病狂十六夜貓

本文由 @喪心病狂十六夜貓 授权发布于人人都是产品经理,未经作者许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-05-10 20:03
下一篇 2017-05-10 22:03

相关推荐

  • 两个交互设计鸿沟:评估与执行

    通过每次交互,用户都必须克服理解系统当前状态和了解如何改变系统当前状态的双重挑战。设计师可以通过意识到这些鸿沟并用透明的概念模型来消除这些鸿沟,从而为他们提供支持。上周,我买了一款很棒的新蓝牙耳机 ; 但遗憾的是,我花了一个多小时才把它连接到我的电脑上。尽管耳机手册和电脑支持网站作出了承诺,但耳机并未自动与计算机连接。我在重新阅读说明书之后,检查了耳机和电脑,确保它们都已打开,并且翻查了耳机评论以确认耳机与我的电脑兼容,甚至通过将耳机同...

    2018-03-13
  • 在做交互设计时,你需要知道这几大定律

    形式是跟随功能的,功能是满足用户需求的。尊重你的用户,让每个产品的细节都是合情合理的,然每一寸体验是“走心”的!

    2017-05-20
  • 扫盲贴|UI动效设计原来都是这些软件做的

    随着技术的不断发展动效越来越多的被应用于实际的项目中。手机、网页等等媒介都在大范围应用,那么问题就来了,为什动效越来越吃香?它有哪些优势呢?

    2017-05-10
  • 取消了Home键的 iPhone X,交互方式都有哪些变化?

    iPhone X 作为一台全面屏的设备,和上一代的 iPhone 7 还是有着很大的区别,这些区别不仅体现在材质和工业设计上,在界面交互上也有一些差异。iPhone X 的显示屏所能显示的内容和 4.7 英寸的 iPhone 7 一样「宽」(同为 375pt),但在高度方面就比原先多出了 145 pt ,再加上 iPhone X 去掉了最为标志性的 Home 键,这两点直接导致的就是界面的布局和交互会发生相应的变化。

    2017-09-18
  • 不以用户体验为目标的人工智能都是耍流氓

    上周末,老刘在家整理了一下旧物,忽然发现了这个。估计现在很多人都会觉得这简直是土到爆了,但在当年那可是先进到不行。听歌、拍照、玩游戏、上QQ,绝对是功能最强大的手机,每当老刘拿出来,那内心简直不要太骄傲。曾经把诺基亚这款手机当成宝贝的老刘,绝对没有想到,短短几年后,那些曾值得炫耀的功能,会变得不值一提。看看现在的手机,拍照都是自带PS的,玩游戏都是屏幕上直接操作的,买东西手机是可以直接付钱的,出门迷路了是可以直接导航的。老刘不禁感叹,科...

    2018-02-01
  • Axure做的APP原型,在手机上怎么预览

    自学Axure,在各大网站查询,终于从小白到学会做基本的交互,再到能在APP端预览自己做好的原型。下面就说一下Axure做的APP原型,在手机上怎么预览?(以苹果手机为例)1原型制作好之后,点击发布→“预览选项”→配置→移动设备,导入做好的图标。2点击发布,“发布到AxShare”。3复制链接,将该链接发送到手机上并使用Safari打开。4粘贴并前往,将原型界面打开。5点击底部工具栏。6选择“添加到主屏幕”。7编辑名称→点击添加。8然后...

    2018-03-18
  • 不看枉为互联网人互联网大会PPT精彩集锦

    当APEC峰会灿烂落幕,“双十一”血拼结束,下一个举世瞩目的焦点在哪里?浙江乌镇——首届世界互联网大会19日在这里启幕。 今天小编整理了互联网大会的精品PPT分享给大家,内容涉及与移动医疗最密切相关的三个互联网行…

    2014-11-21
  • 从「令人发指」的苹果来看所谓的细节设计

    什么是细节设计?在讨论这个问题前先来看个案例。如果你手里恰巧有 iPhone 4s / 5 / 5s,请随便打开一个可以调出虚拟键盘的应用「比如短信」。注意观察键盘的最后一行,相信看这篇文章的人都是中文用户,所以在你的…

    IxD案例 2014-10-10
  • AR场景下的交互设计研究——以中文输入为例 - UXPA中国2016行业文集

    增强现实场景下的交互设计研究         ——以中文输入为例1门文,百度时代总部,北京  2胡也畅, 邵颖,国际商业机器(中国)投资有限公司 摘要:随着近些年一系…

    2017-08-01
  • 设计思考模式:“删除、组织、隐藏、附加”

    Giles Colborne简约四策略是“删除、组织、隐藏、转移”,由于“转移”在实际设计过程中比较少运用到,所以我根据elya的知乎回答把四策略定义为“删除、组织、隐藏、附加”,elya没有解释她的理解,所以我根据自己理解重新定义。“删除每个页面上一半的文字,然后把剩下的文字再去掉一半。”(《Don’t make me think》中Krug可用性第三定律)“点击多少次都没关系,只要每次点击都是无须思考,明确无误的选择。”(《Don’t make me think》中Krug可用性第二定律》)

    2017-06-04