别让这10个设计误区毁了你的APP

色彩:鲜艳的色彩更抓眼球,适宜于可点击的元素使用
空间:在关键元素周围留下足够的空间,让用户更容易发现,也更容易操作
排版:使用简单干净的字体(尽量使用笔画粗细统一的字体),并且挑选适合屏幕的字体,确保整体可读性。

告知用户他们所处的位置,或者显示当前状态(比如光标悬停色彩改变等)
当某个动作执行的时候,应当给出相应反应(比如提交表单完成之后给予成功提交的提示)
告诉用户发生了什么,以及接下来将会发生什么(比如加载中的进度条)

无论你所设计的APP是哪种类型,设计上的错误一旦被采用,会对产品导致致命的结果。用户始终希望他们所下载的应用是有趣而好用的,希望它美观,同时能提供优秀的交互体验,也正是在这样的期待下,任何错误都会被明显放大。

正是作为设计师的我们太过于接近每一个设计项目,我们熟知每一个设计背后的原理和规则,反而更容易忽略那些普通用户更在意的问题和痛点。今天的文章我们来聊聊那些APP设计过程中最常见的错误和尴尬,让UI和UX设计师们真正规避开这些雷区。

1、糟糕的第一印象

别让这10个设计误区毁了你的APP

好的应用应当给人以良好的第一印象。毫无疑问,如果用户在APP的下载页或者第一次打开APP的时候,就觉得这个APP 看起来不舒服、不符合预期或者用起来不爽,用户自然是不会再打开,甚至会立刻删除的。第一印象至关重要。

设计和开发应当确保主屏加载速度足够快,而且UI设计也应该让用户容易理解,用色彩也控件告诉他们,这里都有啥,他们能干啥。尽量在一开始就展现出APP的特色,让用户看到让他们继续使用的理由。

APP最主要的交互应当简单且易于操作的,应用内的控件和细节也应足以反映品牌视觉的特征,并且以整齐有序的方式展现出来。

2、没有有效的引导和线索

别让这10个设计误区毁了你的APP

你的APP是用来干什么的?你的APP是如何同用户进行交流和沟通的?

每个APP中,视觉线索是重要的组成部分,它们告诉用户应该如何操作,应该向哪里浏览,哪些控件可以操作,甚至哪些操作可能会带来在哪些结果。所以,这里一定会涉及到信息的视觉化,所以这些视觉线索的设计应当遵循一定的规则:

  • 色彩:鲜艳的色彩更抓眼球,适宜于可点击的元素使用
  • 空间:在关键元素周围留下足够的空间,让用户更容易发现,也更容易操作
  • 排版:使用简单干净的字体(尽量使用笔画粗细统一的字体),并且挑选适合屏幕的字体,确保整体可读性。

3、杂乱的设计

别让这10个设计误区毁了你的APP

许多应用最大的败笔就是混乱。而这种混乱最常见的形态,就是设计师将这个应用中几乎所有的组件都塞到同一个界面中,无论它是一款游戏、工具或新闻类的应用。

所以,别这么做。

APP 主要还是为小屏幕所设计的,试图在一个界面上承载过多类型的内容,对于用户而言是极大的负担。

将每一屏都视作一个单独的容器,每个容器承载不同的内容,切换界面,呈现不同的内容。当内容足够引人入胜的时候,用户会不自觉的滑动,切换,干净整洁、组织完善的布局则确保了整体体验的一致和便捷性。

4、小而密集的元素

别让这10个设计误区毁了你的APP

元素靠的太近,或者过小了会让手指粗壮的用户非常难于操作。从某种意义上来说,巨屏手机的出现和这种体验诉求不无关系。

确保每个元素周围保留足够的空间和间隙,不仅仅方便用户点击,而且能够消除误触的情况。并没有一个万能的公式来帮你控制控件和间隙的比例,不过当你注意到这个问题的时候,通常不会犯错。

我通常会找一个手大的朋友,把他的食指按在屏幕上划出区域。按钮并不一定必须同这个区域一样大,但是触发按钮的范围不能比这个区域小,接近就好了。

也正是因此,卡片式设计对于用户而言是相当友好的设计。只需要点击卡片所在的区域范围内,就能触发其中的内容。

5、非标准的图标或操作

别让这10个设计误区毁了你的APP

对于许多设计项目而言,重新设计图标并没有那个必要。Facebook 的蓝色F图标,推特图标内的小鸟,这些都已经成为约定俗成的存在了,用户都了解它们的含义,改变它只会让用户感到迷惑。

使用标准化的按钮和操作,对于你的设计项目和用户而言都是省心省力的选择。

6、设计不一致

别让这10个设计误区毁了你的APP

一个APP内所有的元素应当看起来一致,交互和运作方式也应当统一。一致的设计让用户能够更快适应产品,统一的设计让用户对于不同的界面有了预期。

当用户在学习使用新的APP之时,他们对于APP本身的设计、体验也有着基本的期望,从色彩到样式,从交互到运作模式。当不一致的细节出现他们面前的时候,基本的预期被打破,自然会带来不好的印象。

7、不完整的反馈机制

别让这10个设计误区毁了你的APP

每一个交互都应当带来相应的反馈,就像物理学中的作用力和反作用力是成对出现的一样。

APP给予用户的反馈机制,赋予用户以参与感和操控感,它给用户提供了有价值的信息,甚至帮助用户做合理的决策。正确的反馈机制应当这样设计:

  • 告知用户他们所处的位置,或者显示当前状态(比如光标悬停色彩改变等)
  • 当某个动作执行的时候,应当给出相应反应(比如提交表单完成之后给予成功提交的提示)
  • 告诉用户发生了什么,以及接下来将会发生什么(比如加载中的进度条)

8、与系统不同步

别让这10个设计误区毁了你的APP

你所设计的APP应当和整个操作系统有着相似甚至相同的美学标准,这也是iOS和 Android 设计规范最重要的作用之一。想想看,整个扁平风界面上一个拟物化的图标,这是有多么出戏啊。这也是Instagram 近期图标改版的最重要的原因之一。

9、界面太复杂

别让这10个设计误区毁了你的APP

界面过于复杂也许是游戏类APP最常见的问题了。当你完全熟悉整个界面的时候,也许你都不想再玩它了。

界面设计应当是简单直观的,一眼能看明白的界面是好界面,当界面需要一份说明书来说明的时候,它的设计就算得上是失败了。

对于用户而言,每一个下载下来的APP都是用来解决问题的,每一个应用都是一个给用户的解决方案,千万不要让这个解决方案成为问题本身。

那么你的APP是给用户解决什么问题的呢?

10、忘记默认设定

别让这10个设计误区毁了你的APP

在界面中,尤其是在表单类的元素中,默认的设定值对于用户而言有很重要的参考价值。这些预设的默认值根据不同类型的表单、控件而有着不同的展现形 式,有的可以显示为空让用户选择,而有的则需要显示一个基本的数值,让用户后续调整,而一些文本输入框则需要在其中预先填入示例。

默认设定让用户明白如何使用这些设置、表单和控件,提供模板和参考,甚至让整个交互更易懂。默认设定对于反馈也有着重要的作用。许多表单用户是如何填写的,设置是如何选取的,最终都会反馈回来,从而让设计者更容易明白用户是怎么做的。

 

译文来自:优设

译者@陈子木

原文地址:designshack

原文作者:CARRIE COUSINS

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

(0)
CatherineCatherine
上一篇 2017-05-21 19:39
下一篇 2017-05-21 22:22

相关推荐

  • 交互译文—清晰度,可读性和可理解性:让用户阅读你的文章

    所谓成本是指:阅读你的文字所带来的长时间、理解内容带来的困惑、混乱的排版所带来的负面情绪等。
    所谓收益是指:阅读你的文字能让我获得的信息内容和质量,以及获得的积极情绪。

    2017-05-31
  • 在网页设计中如何引导用户的注意力

    每个界面都应该有一个清晰的起点。用户应该从哪里看起?要设计清楚。△ UX策略1 – 在页面标题部分添加视觉对比

    2017-05-24
  • 如何利用数据可视化改善移动端的交互体验?来自华尔街日报、Bloomberg 等顶级新闻工作室的新媒体从业者们是这样思考的:

    手机地图  移动交互 数据可视化 移动大潮席卷了你我。 如何利用数据可视化改善移动端的交互体验?来自华尔街日报、Bloomberg 等顶级新闻工作室的新媒体从业者们是这样思考的。 本文的原 po 给几乎每个案例、工具都…

    2016-04-08
  • 帮你梳理:卡片式UI的设计最佳实践

    卡片式设计依然是目前UI设计的热门,虽然我们在前几天的文章《不是万能!卡片式设计并不能支撑所有的设计需求》当中探讨了卡片式设计为数不多的“局限”。今天我们从基本的规则入手,为你展示卡片式设计的最佳实践。小贴士:Material Design 中常常会让卡片拥有微妙的阴影,这种设计是非常有道理的,阴影和深度会给予用户以视觉感知力,强化它的可见性,以及知觉上的“可点击性”。小贴士:卡片中的正文部分只需要一个Normal 字重的非衬线体就行了。

    2017-05-13
  • 用户体验 | 远大车用肺保一键清新,自由呼吸

    随着人们生活水平的不断提高,家用汽车已经成为大家的出门代步工具,开车上下班、旅游、走亲访友,基本上每天在车内都会呆上几个小时。汽车看似密闭的空气,但是由于交通的拥堵,车内空气不流通,空气质量越来越差,就会出现头晕、胸闷、咳嗽等症状,从这之后我也一直在关注着车载空气净化器设备。之前购买过一款车载净化器,但是效果不大,就一直在车内处于吃灰状态,今天我要和大家说的这款远大车用肺保FC3。是一款采用H13级别超大面积的PTFE超级过滤器,可以9...

    2018-02-02
  • 昨天交互设计讨论群里发生的事与微信读书自来水的故事

    文章来自IAMUE交互学堂讨论群黄韦分享,希望加群的请加阿西群主个人微信号之后由由他邀请入群,二维码进不去了人多了限制二维码入群了,请知悉。

    2016-02-22
  • iOS和Android规范解析——简易菜单、简易对话框和弹出框

    今天的这几个控件的中文名字,在网上查了半天,没有找到统一的叫法,所以自己翻译了一下:简易菜单对应的是MD(Material Design,下同)中的Simple Menu;简易对话框,对应的是MD中的Simple Dialog,弹出框对应的是iOS中的Popover。

    2017-05-02
  • PS、AI、Sketch 用着太费劲?这些插件本宝宝力荐!

    虽然 Mac 和 Windows 平台有许多特别棒的软件或工具,但 PS、AI 和 Sketch 仍然是设计师的标配。有时候看到一个特别棒的效果花了很久才折腾出来,殊不知一些插件能够轻松完成,这里小编推荐一些特别实用、效率翻倍的插件给大家,让设计工作事半功倍!GuideGuideGuideGuide 是小编用过的最棒的参考线拓展工具!没有之一!再也不用从标尺一条一条拉参考线还要担心位置不精确,只要输入需要的数值就可以自动生成对应的参考线...

    2018-03-03
  • 腾讯X项目的交互设计小结

    最近在做腾讯内部系统X项目的交互,具体的项目内容现在还无法透露,趁热打铁,先来一段交互小结吧。 一、可视化 当系统的数据过多,数据结构繁杂时,可以将数据可视化展示。能让使用者更好的理解数据,有效提高使用…

    2016-09-19
  • ​50多个网页界面的设计素材下载,提供sketch格式的源文件ui设计素材下载

    50多个网页界面的设计素材下载,提供sketch格式的源文件ui设计素材下载素材下载方法:长按识别二维码,用微信扫描或者长按识别二维码即可加入。并不是只是下载这个素材。超过200G精品素材全部任意下。素材不断更新,添加。。。有任何问题,请联系微信uisheji----------------------------------------欢迎订阅,查看更多精品UI设计素材下载,请关注公众号mobileui

    2018-04-08