成功的UI是无形的-A GREAT UI IS INVISIBLE

「爱情、让人受尽委屈。」 2022-02-20 03:09 164阅读 0赞

本文翻译自[A GREAT UI IS INVISIBLE][]，[codrops][].前端开发whqet，关注前端开发技术 分享网页相关资源。

一个可以向用户提供无缝交互体验的无形界面，可以帮助用户专注于自己的目标，逐步引导他们达成所需。

![20130514051408103][]

一个真正设计精良的UI应该让用户察觉不到它的存在，差的用户界面则往往喧宾夺主，强迫用户关注花哨的界面，从而忽略内容。用户登录某个网站大部分有明确的目的：买一本书、学习jquery、向朋友分享一篇文章、找找新歌、写篇小说或者类似的目的，用户一定不是来玩玩界面的。事实上，用户不关心界面。多年来，缺乏用户体验的桌面范式强迫人们考虑如何利用UI改善设计，但是，用户真的在乎这些吗？

用户已经很熟悉UI设计模式和UI组件，其实用户不应该知道、不在乎知道这些。近几年来，网页设计者们经常花成千上百小时去玩弄按钮颜色、阴影、边框和渐变试图让UI更漂亮实用。但是，真正精良的UI设计不应该是好看，而应该是隐形的！

![20130514052255673][]

不管你是否意识到，移动终端设备已经逐渐走入人们的生活。多点触控的移动设备使人们意识到，通过一系列的点击和排序，UI的本质是实现更加自然的人机交互以便于用户更好地理解内容。自然人机交互(Nature User Interface，NUI)更加“自然”的原因有很多，最重要的是可以允许用户直接操作内容，简洁的界面使用户易于使用，界面是无形的。

但是，我们仍然需要实用台式机、笔记本，仍然需要访问网站、实用web应用，而这些东西做不到像手持移动设备那样多点触控、实现自然用户界面。那，继续老一套？当然不是。无形的UI设计理念应该是每一个UI设计、开发者的目标。

# 用户界面，不是障碍 #

![20130514060324036][]

用户界面永远不应该成为阻挡用户查看内容或者达成目标的障碍；用户也不该必须跳过UI陷阱或乱七八糟的导航才能到达自己的目标。过去的几年里我们经常使用一些我们认为可以给用户带来便捷的UI，但实际上，这些UI却给用户带来了更大负担，Breadcrumb（用来表明用户所处位置的UI导航）就是个很好的例子。我们可能觉得Breadcrumb是一个非常好的导航方式，但实际上，它仅仅是累赘的UI组件，在设计合理的用户体验中没有存在的必要。  
       虽然Breadcrumb并不直接带给用户负担，但是她占用了屏幕的空间，而这些空间，原本应该用来显示一些和用户目标相关的内容。我们解决UI的问题经常通过增加新的组件，但是过于冗杂的组件势必造成浏览障碍。那么，怎样才能做到增加了许多UI组件，然而你的UI看上去却像是隐形的呢？

# 修复问题 #

![20130514060344379][]

建立隐形的UI意味着要从根本上解决问题，你需要知道到底问题出在什么地方。我们做网站或者APPs也会经常碰到问题，但是我们往往从表面上给出一些解决方案，而并没有从本质上考虑问题的发生。就像我们为了止疼吃布洛芬，但这不能改变疼痛的本质一样。  
       一般情况下，“吃止疼药”变成了我们当下的最佳策略，因为我们已经学会了如何与项目经理、网站拥有者、股东等做斗争，而且，也有很多时候可能是因为设计师们时间不够或者仅仅是因为懒惰而不想去做。我们经常会做一些用户体验，然后说：“嗯，我知道这里面有些小问题，但是我们让用户看看是否这些问题真的是问题吧。”很明显，用上面的态度去做UI是不能做出隐形UI的。做一个完全隐形的UI意味着你必须要解决深层次的设计问题和用户体验，只有这样才能使得UI不会变成对用户的障碍。

# 宽容的设计 #

![20130514060406380][]

隐形的UI要归功于它设计的非常有包容性，自然用户界面更加开放，而且不易出错，或者在用户出错的时候，能给用户以明确的方向指引。这几年不是流行一句交互金句么？操作前可预知、操作中有反馈、操作后可撤销！  
       宽容指的是当用户受困的时候（fall into a trap），设计者给予用户的不是告诉用户出错了。实际上，当用户没有明确的目标时更容易误操作，而此时UI会显示给他们大大的警告和出错提示。而一个隐形的UI设计绝对不会显示上面的东西。良好设计的UI会预先判断用户出错发生率高的地方，并在这些地方提供给用户解决出错的办法或者引导用户让他们避免陷入trap。  
       宽容还表示网页或者APPs允许用户对它们出错。因为用户出错之后，他们会从自己的错误中学到更多的东西，当然，他们出错的时候，肯定不能给他们一个大大的红色叉号或者繁杂的让人摸不着头脑的文字。（这种压迫感和腥红的色彩他们早在现实中就受够了）。

# 目标第一 #

![20130514060428097][]

上图的交互设计（Cooper building block）实际上非常简便，但是似乎这种设计我们平时并不多见，所以我觉得它-以目标为导向的设计-值得一提。UI设计应该围绕用户的目标，设计者应该挖掘用户的需求，并能通过引导来完成或迎合用户的需求。用户对他们想通过什么方式达到自己的目标很有主见，但是对他们对需要什么却没有任何想法。所以，UI设计师的工作应该是找到用户的需要而不是提供给他们某种方式。  
       找到目标并且允许用户快速的达成他们的目标将是最好的用户体验，因而你也根本没有必要设计一个非常华丽的界面去吸引用户的眼球。不要用华丽的UI设计作为对目标不够明确的弥补。

# 真正的一致 #

![20130514060447410][]

在UX的世界中，我们谈论一致性显得理所当然。实际上一致性在UI设计中也非常重要。如果你的UI组件都在同一个地方，具有相同的颜色和功能，那么你的UI设计将会随着时间的推移慢慢的从人们的眼球中消失…有点像Marty McFly。但是，仅仅把功能按钮放在每一页的相同的地方或者在整个应用中使用特定的动作来对应相同的东西可能并不能解决连续性的问题。  
       另外，我们在UX设计经常倾向于应用来源于其它APPs或者网页的那些和我们的设计相通的东西来装扮我们自己的APP。我曾经写过一篇文章来阐释相类似的环境能够让界面显得更加舒适。但是当我们致力于设计一个隐形的UI时，仅仅一致并不足够。我们要的是真正的一致！这就意味着不仅仅是组成、价值、链接以及数据等在APP中的一致，它们应该在上下文内容中也要一致。  
       例如，你可能注意到很多APP中，登陆按钮一般都会在右上角，因此你会自然而然的认为其他APP的登录按钮应该也会出现在那个位置，这想法没错。但是，这种布局可能在你的APP中不太合适。那么，你就不必要这么做，你要按照自己APP的布局，将组件放在适合于你APP中的地方，并让它们在你的APP中保持高度的一致性。

# 总结：激活用户 #

最后，一个真正好的UI要能够做到激活用户。当用户界面可以排除障碍引导用户直接采用他们想要的方式，用户可以将 精力集中在他们的目标上面。

界面应该提供数据和内容的无缝交互，这便于用户用户爱上它们。用户固然喜欢摆弄一个聪明的UI，但是隐形的UI设计更容易脱颖而出

[A GREAT UI IS INVISIBLE]: http://tympanus.net/codrops/2013/03/21/a-great-ui-is-invisible/
[codrops]: http://tympanus.net/codrops/
[20130514051408103]: /images/20220220/7b2408802e5f4709afa308708459688a.png
[20130514052255673]: /images/20220220/284c12c0983a4a198322ec0c17e1df57.png
[20130514060324036]: /images/20220220/8040d2be49494328b14cb244a9d92320.png
[20130514060344379]: /images/20220220/2a782a965cf848d09e96bd5e6c63ccab.png
[20130514060406380]: /images/20220220/c7d0385ece714fc5a4dfd62b437fb947.png
[20130514060428097]: /images/20220220/011622df26164e2cbf3bb15eb1ec402d.png
[20130514060447410]: /images/20220220/128c4d0e92ec42b482e6b08cccc04d6d.png