5个主要UI错误将会置你的APP于死地!

小编:作为一名UI设计师,我们需要一些规范来约束自己,让工作变得更有条理,更具专业性。在完成APP的过程中会有很多的细节需要注意,今天就来为大家讲5个常犯的主要错误以及解决的办法。“设计不是科学,没有成功的魔法公式”,我们需要通过不断改变来提升用户体验的。

对于一个优秀的APP界面设计来说是没有一个普遍公式的(如果你知道一个,请让我们知道)。 但是,如果你想创造一个很棒的APP,我们确实了解APP设计过程中常犯的一些主要错误。

这里的每一个错误都是从所有级别的有着不同的设计师所犯的错误中总结出来的。这没有什么可耻的,一个好的UI设计都会面临多方面的挑战,很多方面都可能被简单地忽略掉。

对于移动端产品,我们经常为不满意他们产品的客户重新设计APP,希望可以改进他们的APP的视觉效果和用户体验。这是为什么我们今天想分享一下我们收集的一些重要的而又容易被设计师忽视的UI错误。

当然,我们将会提出解决方案,而不仅仅是指出这些容易犯错的点。 这就是为什么我们还会向你展示一个重新设计的APP的视图列表,通过这个案例我们可以更好的解释说明这5个主要的UI错误以及你或你的团队应该怎样解决这些错误。

UI错误1:滥用字体

我们从系统字体系列开始说起吧。例如,San Francisco是iOS的系统字体,而Android有Roboto系列字体。它们都易于阅读,并且非常相似。

拓展阅读:《4 tips on typography in UI design》(http://blog.invisionapp.com/4-tips-on-typography-in-ui-design/)

那么,在APP设计中,是否可以使用系统字体?答案是非常肯定的,这是一个安全可靠的选择。但是请记住,三星手机是允许用户更改默认字体的。如果手机用户切换到Choco Cooky字体,设计师精心设计的APP可以立刻被抹杀。

您还可以选择更复杂的解决方案并选择自定义字体。不过,如果你走这条设计路线,请记住:

少即是多。可能有许多很棒的字体,但是它们要被合理运用。始终要明确一点,字体应该被用于增加用户体验,字体类型,尺寸,颜色等太多会使设计复杂化。如果你选择使用自定义字体,注意保持字体简单和连贯。仅在需要时添加自定义字体,并且此时自定义字体也的确可以帮助提高产品的用户体验。为了拥有自定义字体而使用自定义字体并不是使用它的充分理由。

字体的授权许可。几个月前,我们被要求重新设计一个时尚APP。在查看字体的同时,我们发现该款APP中使用了两种商业字体,两种字体在APP中并没有发挥多大的用途,并且做这个APP的客户并没有这两款字体的授权许可证。这个错误可能会使客户花费$ 2,000!一种字体就是一款软件,需要持有授权许可才能被使用。如果将某种字体使用到APP中,请确保你阅读了授权许可和使用条款。如果不知道是否可以被授权许可使用某字体,那么就不要使用该字体。

UI错误2:过多的屏幕内容

在手机比现在的手机小得多的时候,设计师面临的问题是整合必要的东西到屏幕上。例如,iPhone 4的分辨率为640×960,比例为2:3。随着超级手机(或phablets)的出现,我们可以在屏幕上放置更多的东西,比如:更大的字体,更多的按钮和更花哨更潮的设计。

警惕陷入这个自由陷阱。更多并不意味着繁杂,所以要有选择性。每个添加到屏幕上的内容都必须是被用户所推动的,并取决于用户,以用户体验为导向。明智地吸引他们的注意力,以便他们轻松浏览和使用你的APP产品。如果屏幕上太多内容,用户可能会很容易迷失,不知道该怎么办或点击哪里。作为设计师,要通过设计来帮助用户将重点放在重要内容上,并希望用户以直观的方式直接访问重要的内容。

UI错误3:缺乏一致性

设计时要保持设计语言、设计风格的一致性。不要向用户传达混合混乱的设计信息。如果你的设计中使用了一个元素进行特定操作,请尽可能一直沿用该元素提示用户进行类似的特定操作。用户通过完成某些操作进行学习,如果用户时常遇到意外或不明确的操作,一定会破坏他们的产品使用体验,因此导致产品的用户体验大打折扣。

另一方面,还要保持产品的大部分界面在布局上的一致性。例如,使用相同的颜色和元素来创建重复模式。用设计规范来设定一致的设计标准,以便设计师或者设计团队可以在设计过程中保持正确统一的规范。

一致的布局可以帮助用户通过你的APP主动学习。当然,对于设计而言,也可以有一些例外,比如:登录页面或其他具有特殊用途的页面。每当你脱离了一致统一的模式,你要记住:每个元素仍然需要组成一个统一的整体。

UI错误4:从iOS版本 1:1地转移到Android 版本

以前,从iOS版本1:1转换到Android是有道理的。直到Android 4.0,当Holo Design出现后,这种1:1转换的合理性被打破,Holo Design是Android的第一个合乎情理的主题,它有自己的结构,指南和导航,而这些与iOS不兼容。

那现在,为什么不能直接从iOS版本转换到Android版本,反之亦然?它不会节省你的时间和金钱吗?

也许有可能,但我们最终的设计目标是创造最好的用户体验,对吧?我们都知道,用户有自己的习惯和喜好。他们一直使用手机,而且他们习惯了他们的特定功能。因此,如果你的APP的设计以及交互逻辑与用户的行为习惯不相符,那么用户不太可能享受使用你的APP。

Android和iOS有自己的交互互动模式,如果你为用户提供了需要从头开始学习的其他功能,用户可能不高兴。如果你从iOS转移到Android(或以其他版本),你还可能会犯一些从设备到设备的一致性的错误。

不过,这里有一个好消息,你APP的iOS和Android版本不必完全不同,尽量保持两个平台的大部分视觉风格统一。以汽车租赁App Silvercar为例,他们想出了自己的导航方式,但同时又保留了移动操作系统之间的一致性。

UI错误5:糟糕的信息层级处理

当你设计一些东西,不管它是什么,一张名片,一个网站,一个APP,这都意味着用户将以某种方式与你的设计进行交互。依据人与产品之间的交互逻辑,你需要根据所呈现信息的重要程度,进行信息层级规划以及展开设计工作。

坐下来想想你想要突出的最重要的内容是什么。一旦你知道了所呈现内容的优先级,你可以使用字体,颜色,大小,位置等帮助你区分,强调突出重要的内容。用户的行为可能符合或者违背你已经设定的交互逻辑,但你需要考虑或假设用户会用你的产品做什么,并相应地进行设计。

错误—解决方案—再实践

现在我们将向你展示所有这些错误在实践中是怎样的,以及如何解决这些错误。例如,我们将重新设计一个食品订购APP的视图列表。一个有食品订购APP的客户决定添加餐厅评级的选项,但以前的设计没有提供这样的解决方案。我们借此机会来改善一些设计。

之前的页面是在iPhone 5仍然占有大部分市场份额的时候设计的。它具有较小的单元格,较小的餐厅标志和更多的压缩文本。当在新设备上查看时,屏幕上出现太多元素,使界面更难阅读。

这就是我们首先进行优化设计并做了一些改变的地方:

正如你所看到的,单元格彼此更远,不再融合在一起,一切都看起来更加清楚。用户不会被屏幕上的内容数量所淹没。而且,信息层次也得到了改善。现在,最重要的元素是logo。一个返回的用户更有可能快速识别标志,而不是阅读品牌名称。之前的设计,品牌名称和logo冲突。

另一项优化提升工作是页面排版。我们使用Oswald字体的名称和标签。我们最初预计只有一行标签,但是一些餐厅的确有非常丰富的选择,所以我们使自己的设计能够适应尽可能多标签的情况。

我们的设计工作还包括Android系统字体的可视化和三星手机上的Choco Cooky字体问题。 我们通过添加Roboto字体作为自定义字体来解决这个问题。

为了添加客户想要的评级部分,我们决定使用星星。酒店和米其林指南使用它,所以对我们和用户来说是合乎情理的。

米其林指南,通常是指每年出版的“米其林红指南”,这是欧洲最古老的酒店和餐厅参考指南。

但是有一个问题。以前的设计中使用星星来标记喜爱的餐馆。所以,我们无法将这两个元素放在一起,这会让用户感觉困惑。喜欢餐厅与其评级无关,我们不能使用相同的符号来表示这两个动作;同时,我们不想让设计失去一致性,也不想将符号的含义从一个版本更改为另一个版本时发生变化。最后,我们通过屏幕信息解决了这个问题,通知用户已经添加了一个新功能。

“设计不是科学,没有成功的魔法公式。

即使你避免了这五个重大错误,你设计的内容可能会在用户接触时崩溃。所以,你根本无法预料用户可能会做的一切,这就是为什么你必须借助用户分析和其他工具来观察用户的行为和需求。 然后,作出相应的设计并改进APP。设计应该是通过不断改变来提升用户体验的。

永远不要满足于已取得的成绩,因为总有一些你可以设计得更好的地方。

作者:Artur Martynowski,Artur是移动端UX设计师,拥有5年的移动应用程序开发。

Luke Konior,Luke是首席运营官Luke Konior

invisionapp

译者:学UI网翻译社-鼹鼠

(0)

相关推荐

  • UI设计师必读!iOS 10 人机界面设计指南 (4)

    小编:iOS 10人机界面设计指南中文版来了,感谢译者@喵大神经. iOS10发布了,苹果遵循了一切从简但又增加了一些提升用户体验的功能,比如向开发者开放了更多接口,设计者又如何跟随iOS的步伐做好产 ...

  • UI最乐观的状态是什么?

    想象3个用户界面(UI)一起去了酒吧.第1个点了一杯酒,然后又再点了几杯.几小时后,它买了单,醉醺醺的走了.第2个界面点了一杯酒,直接把钱付了,然后又点了一杯酒,又马上买了单,几小时后也醉醺醺的离开了 ...

  • 学UI设计必须掌握的知识体系和职业规划

    那些想转行学习UI的伙伴们,但心中有无数个疑问,怎么学习,怎么做,相信你看完今天这篇文章会找到答案,快进来看看怎样掌握体系的UI设计知识和准确的职业方向? 当我们步入一个新行业的时候,对这个行业即使充 ...

  • UI设计是什么?

    想象3个用户界面(UI)一起去了酒吧.第1个点了一杯酒,然后又再点了几杯.几小时后,它买了单,醉醺醺的走了.第2个界面点了一杯酒,直接把钱付了,然后又点了一杯酒,又马上买了单,几小时后也醉醺醺的离开了 ...

  • COLORISTIC色彩丰富的手机APP(UI PSD免费下载)

    扁平化与极简主义流行的今天,国内所有的APP设计都同质化,除了色彩和logo的不同其他的都"半斤八两",今天我们要分享的是COLORISTIC色彩丰富的手机APP界面UI源文件PS ...

  • 50个天气移动应用UI界面设计

    小编:今天个大家带来的是由设计之家分享的50个天气移动应用UI界面设计欣赏.每当打开天气APP查看天气时,如果发现是雨天而界面又索然不味的时候心情一定糟透了吧!看一看今天的界面设计,舒适的颜色搭配总能 ...

  • 5款漂亮的UI KIT合集PSD&SKETCH下载!

    小编:今天给大家带来的是由海哥哥分享的5款漂亮的UI KIT合集,包含了app,web,icon等等各种方面的干货,设计师平时没事的时候就可以收集一些干活素材以备不时之需,工作可以事半功倍.所以enj ...

  • 如何开始学UI?

    最近在知乎被邀请哭了,邀请我回答的问题大概集中在: 1.我想学UI,请问看什么书啊? 2.我想学UI,请问哪个培训机构比较好? 3.我想学UI,请问如何入手? 4.我不是设计专业,但是我还是想学UI, ...

  • 关于APP社区模块的UI设计思考

    最近接到新的APP需求设计,是关于社区模块的UI设计:第一次接触社交性质的需求,赶紧去研究一下市面上活跃度很高的几款社交APP. 最近啊,接到新的APP需求设计,是关于社区模块的UI设计:之前一直做消 ...