- 原文地址:6 Bad UI Design Examples & Common Errors of UI Designers
- 原文作者:Annie Dai
- 译文出自:掘金翻译计划
在深入讨论之前,让我们来先分清什么是UI(用户界面)设计?就像当我参观你的房子,我希望我感受到我是被受欢迎的。同样,每一个浏览网站的用户,也喜欢得到这样的体验。
简而言之,用户界面是用户和网站交互(沟通)的方式。包括:人机交互(互动)方式,页面间的逻辑,以及外观(美观)。一个网站或者APP,相较于外观有多美丽,提供(交付)给用户好的创意和产品更为重要、更为有用。
UI的目的是能够用一个恰当、优雅的方式把产品提供给用户。所以,你可能有困扰,什么样的UI设计算是好的设计呢?UI设计中的常见错误是什么?如何有效避免这些错误?别担心,我会一一介绍,其中还包括6个最糟糕的UI反面设计示例。
好的界面设计和坏的界面设计区别
网上会提到不少UI设计原则,但UI设计的首要黄金法则将是下面的4E。4E法则可以作为判断是否是好的UI设计的标准:
- 没有错误
- 用起来顺手
- 易于理解
- 对最终目标或者产品非常有效

很显然,良好的UI可以让我们感觉在家里一样,所有东西都放在合适的地方;糟糕的UI感觉让你觉得嘴里有一种不好的味道,想快速逃离。
而且,糟糕的UI让用户觉得网站很复杂,很难操作;好的UI会引导用户用清晰直观的方式与网站互动,即使他们是第一次访问网站。糟糕的UI设计不仅完全破坏了设计师的创意,也向用户传递了错误信息。所有这些都会给用户带来困惑、无语甚至生气不耐烦。显然,糟糕的UI设计带来糟糕的用户体验,看看iPhoneX上的“刘海”,你就会知道了.....
用户界面设计中常见的6大错误
在糟糕的设计旁边放上相反的优秀例子,是很有趣的。更重要的是可以给设计师提供经验。正如Jared Spool所说,“好的设计,当它做得好的时候,就变得看不见了。只有当它做得不好时,我们才会注意到它。”对于设计师来说,有一些容易忽视的常见错误和潜在的陷阱。我已经给你列了一张清单。
1. 设计缺乏对比
当浏览一个网站时,我们希望看到一个清晰明了的对比。以便帮助我们更好地阅读和理解(核心)信息,从而知道如何进行操作。如果没有对比,无论网站的色彩搭配还是整体展示效果都会让我们不知所措,无从下手。阅读下面网站上的内容非常困难。

差的案例: 缺乏对比

好的案例: 设计中运用了对比
2. 没有响应式设计
使用响应式设计非常流行普遍。因为我们发现,如果打算制作的网站不能适应给定分辨率或者设备大小,就没有着手制作的必要性。对于来自手机端的用户,那些购物车模式的网站/APP,必须具备这样的条件:能够适应给定分辨率或者设备大小。

差的案例:没有响应式设计

好的案例: 响应式设计
3. 用户对非原创的设计不感冒
从别人的设计作品中获得灵感并不是一件坏事,但我们需要确保拥有足够丰富的用户基础数据,来做出正确的决定。以下是一个典型的失败例子。

差的案例: 非原创

好的案例: 得到了用户的互动响应
4. 糟糕的信息结构
每个人都想从人群中脱颖而出,自己的设计作品可以吸引别人的眼球。然而,有时如果我们过分执着于设计中的与众不同,它就很容易会走向另一面。应该在视觉层次结构中保持良好的平衡,这样可以给用户留下良好的印象,并提供更多的信息。下面这这个例子,会给我们一种或多或少混乱和困惑的感觉。

差的案例: 布局结构糟糕

好的案例: 结构布局很好
5. 风格不一致
这并不是说混搭风不好,但是如果整个界面有巨大而丑陋的视觉冲突,那最好重新设计一下。一个优秀的UI设计会在风格上保持一致,以便让用户清楚地理解,并且能够响应页面上给定的内容。风格上保持一致也有利于提高工作效率。

差的案例: 风格不统一的设计

好的案例: 风格统一、有连贯性的设计
6. 冗长复杂(杂乱无章)的表单
有时,我们需要通过设计更好的表单来收集与用户相关的信息,但是冗长复杂的表单完全是在浪费用户的时间。更好的做法是按照一定的逻辑关系组织成线性流程,使表单看起来简洁明了。

好的案例: 好的用户注册表单
[用户注册表单]或[评论区]等内容是设计中的社交元素。添加社交分享按钮( 像Facebook, 推特, YouTube and 领英),或者在注册时要求用户提供电子邮件来获取新闻,不仅增加了传播我们信息的途径,还能够提高用户的留存率。我们可以从下面这个例子得到一个很好的参考。

好的案例: 有社交元素的网站
如何避免UI设计者最常见的错误?
通常,UI设计者会遇到5个常见问题:
- **不再进一步去探索更多可能性。**由于给定的截止日期和潜在风险或许多其他因素,不少设计师在确定最终设计方案之前没又充分地广泛尝试其他各种创意。对于设计团队来说,通常需要3-6个月的时间来确定并改进设计计划。
**-设计没有以用户为中心。**这是最重要但容易被忽视的部分。所有的设计都应该以用户为导向。设计师需要更多的数据分析和UI资源,以确保设计最终能够被用户很好地接受和认可。
**- 对目标受众群知之甚少。**我们应该设身处地为顾客着想,而不是只顾着个人喜好。这将有助于打破我们自身的局限性,从而创造良好的卖点。
- **前期做得太多了。**通常是在设计的早期阶段,我们试图(直接)太过具象化太过深入地在头脑中勾勒出整体。然而,这并不明智。(在初期,)从不同甚至相反的角度去探索,可以帮助我们发现更多的惊喜。
**-过度利用动态效果。**说实在的,如果几乎所有地方都有许多无意义的动态设计,那只会给我们的用户带来失望。最好避免啰嗦的装饰性动画效果,以便优化用户体验。

差的案例: 不必要的动画
总结
我们可以得出结论,一个好的UI设计的确应该在外观上看起来很漂亮,但重要的是:有一个清晰的结构,关注用户体验,独一无二,简洁明了,便于用户理解。这听起来很简单,对吗?但操作起来并不容易。有时我们觉得我们的设计理念没有问题,但当我们开始做的时候,会出现有很多没有考虑到的事情。能否在实际操作中实现这些要点,是对个人能力的考验。