app用户体验设计的9项核心原则

设计一个移动应用程序时要记住最重要的事情是要确保它是有益和直观。如果一款app对用户来说没有实际价值,那么没有人有理由去使用它。如果应用程序是有用的,但需要大量的时间和精力去学习如何使用,人们也不会刻意学习如何使用它。

良好的UI设计解决了这两个设计问题:
为了有用性,每一款app应该是用户为中心。用户安装你的app是去解决问题的。因此,app应该有清晰明确的“目的感”。想想你的用户要用app完成什么,并如何专注于主要目标?他们用什么样的方式消除所有障碍?

你应该把以上思考的成功清晰地展现在UI上。要使你设计的界面是非常有效的,人们必须能够认识到它是什么和如何使用它。而且根本没有混淆的地方。

以下是九大用户体验设计原则,这是我认为是创造真正伟大的移动用户体验的关键。

1.除去杂乱的信息

用户的注意力是宝贵的资源,为此应作出相应分配。用户打开的界面承载了太多的信息:每个添加的按钮、图像和文本框,都会使屏幕显示得更加复杂。


*杂乱对于软件或网站来说就是一个大忌,一旦移动app也是如此,那简直更糟糕了一百倍。图片来源: ftrain*

Antoine de Saint-Exupéry一句名言:“什么都带不走的是做到了极致。”说的是,在设计中放弃增加一些东西是重要的,因为这些东西不一定是绝对必要的,而减少杂乱的信息会大大提高产品的合理性。

根据经验,简单的规则:每一屏都有一个主菜单栏。你设计的app的每一屏幕应该支持用户对其真正的价值的使用,更容易学习,更容易使用,也更容易在必要的时候增加或建立新页面。一百清楚页面好过单个杂乱页面。

拿Uber举例:Uber知道使用应用程序的用户的目标是要坐出租车。App没有太多的信息来淹没用户的视线:它会基于GEO数据自动检测用户位置和让用户唯一要做的就是选择终点位置。


*一个好的用户体验设计的基本规则就是为了减少用户投入工作量而得到他们想要的。*

2.让导航更明显

帮助用户定位应该是每一个app的重点。良好的导航像一只看不见的手引导用户开始他们的旅程。如果人们无法找到它,再酷的功能还是再引人注目的内容也是无用的。良好的移动导航的原则是:

  • 移动导航必须是清晰明确的。你应该使用合适的信号(正确的视觉图标),从而使导航不需要过多解释,并确保每个导航元素(如图示),直接指向正确的目的地。


    3.gif
  • 导航必须包含在app里。不要让导航跳转到新的位置或隐藏在不同的页面。这样会只会迷惑用户。
  • 移动导航应联系当前位置。App的菜单中未指明当前位置是最常见的错误。“我在哪个位置?”是用户要顺利进行导航的基础问题。

3.创建一个无缝的体验

不要进行孤立的移动的设计。创建同时可实现于移动端,台式机和平板电脑之间的无缝体验对于用户非常重要的。


4.jpeg

就拿苹果音乐为例。你可以在你的Mac上设置播放列表,它会立即显示在你的iPhone上。苹果公司指出,虽然移动应用程序的设计是非常重要的,创建可在iPhone,电脑桌面和iPad上的无缝体验对于用户来说也同样重要。

4.设计方便的点触目标

尺寸较小的触控热区是很难让用户点击。当你在设计移动界面,最好让你的触控热区足够大,让用户更很容易点开。

创建尺寸7至10毫米的触控热区,这样用户可以用手指精确点开。此类目标允许用户的手指紧贴在目标内。当用户点击它的目标时设置边缘可见。这为他们提供了清晰的视觉反馈,是否正在准确地点击目标。

用户界面控件必须足够大,以捕捉用户的指尖的动作,而不是提供了狭小的目标热区和令人沮丧的错误的操作提示。


*同时确保目标之间的间距良好的距离。*

5.文本内容应清晰可辨

当与台式机桌面相比,智能手机有相对较小的屏幕,这意味着手机设计的挑战之一是把大量的信息表现在一个小UI界面中。你可能会忍不住在移动应用上试图提供尽可能多的信息,但事实上,你更应该避免如此。

经验所得的准则:字符应至少11号,可以在普通的观看距离看是清晰的,不需要进行缩放的。


6.png

通过增加线高度或字母间距来提高文字的可读性。看起来美观、大方的白色空格可以使一些零碎的界面清爽简洁。


*良好的用户界面给了用户有很大的喘息空间。图片来源:苹果*

6.使界面元素清晰可见

您应该使用色彩和对比度帮助用户理解你的内容。选择一级、二级和重点颜色可以让你的app颜色具有可用性。确保不同元素之间有足够的颜色对比,让用户视力低下的用户也可以看到并使用你的app。

  • 确保有字体颜色和背景使文字清晰可辨,有充足的对比。 W3C的建议正文文本和图像文本以下对比度:
    小号文本跟其背景色的对比度应至少为4.5:1。
  • 大号文本(14 pt bold/18 pt regular及以上)跟其背景色的对比度至少为3:1。


    *不符合建议对比度的本文是难以在背景下阅读。*

有移动足够的对比度这是非常重要的:用户可能会因为在户外的光线因素,在屏幕上的对比度更低。


*此页面的中性灰可以在室内看得不错,但在室外看起来却并不那么好。图片来源: usertesting*

图标或其它关键要素也应该使用上述推荐的对比度。


*不遵循色彩对比度建议的图标是很难在他们的背景下辨别的。图片来源:材料设计*

7.根据手势设计控制

Steven Hoober在他关于移动设备上使用手势的研究发现,49%的人是依靠一个拇指完成手机上的所有事务。下图中,该手机的屏幕上显示的图是近似的范围图,其中的颜色代表什么地方,用户可以用拇指与屏幕互动达到。


*人的单手覆盖在智能手机上的舒适区。图片来源: uxmatters*

绿色表示用户可以很容易到达的区域,黄色是需要一个伸展的区域,红色即需要用户拿住手机然后移动手势的方式操作了。手势和按压力度都对手机控制位置的设计有影响:

  • 把顶层菜单、经常使用的功能和常见功能放在屏幕的绿区,因为他们只要拥有舒适的拇指互动就达到了。


    *Tumblr common actions. Image credit: Capptivate*
  • 使用消极行为时(如删除或擦除),可以设计到红区,毕竟你不希望用户不小心会点击它们。

8.减小打字的需要

打字输入是手机上的一个缓慢而容易出错的过程。因此,最好尽量减少app中需要打字的次数:

  • 通过删除不必要的区域,保持简短的形式,越简单越好。


    *没有人喜欢填表格。用户更有可能会跳开更长或更复杂的表格形式,并开始填补空白。图片来源: Lukew*
  • 在适当情况下使用自动完成和个性化数据,使用户只需要输入最少的信息量。


    *Auto-complete field for country **自动完成*

9.对测试你的设计

移动设计,在一个大的桌面屏幕上查看时看起来不错,但事实上将近一半的设计在真实手机上的效果却并不如此。

即使是最精心考虑的用户体验设计,最终在实际应用中也会在包含一些看不见的缺陷。这就是为什么作为你的真实用户在各种各样的移动设备上测试你的app是如此重要。

你应该在真实用户进行常规任务后,看到设计如何真正执行。把你的app作为一个不断发展的实体,利用分析和用户反馈数据,不断完善的体验。

结论

就像任何其他设计元素,上述提示只能让你刚上手设计,结合这些原则匹配自己的设计确保产生更好的体验效果。要记住,设计不是为了设计师而是为了用户。

作者:Nick Babich

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,029评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,395评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,570评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,535评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,650评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,850评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,006评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,747评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,207评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,536评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,683评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,342评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,964评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,772评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,004评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,401评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,566评论 2 349

推荐阅读更多精彩内容