蛭石保温砖生产商:图解：降低用户界面(UI)的复杂性

降低用户界面的复杂性

整洁，简单易用，用户体验良好，直观。许多人都提倡这些规则却常常在实现的时候丢失了。主要体现在：太复杂了。如何处理好一个应用的复杂程度将成为它成败的关键。一个比较极端的例子就是一个复杂的界面可以让用户纠结在一个很简单的但是完全疏远他们的案例中。但是如果你在此之前仔细思考过减少那些确实很复杂的东西从而降低它的复杂程度，用户会很感谢你带给他们这么舒畅的体验。

我们最近在设计两款网络应用的时候面临着非常大的挑战，其中包括一个企业级管理系统.。接下来我们使用了一些能够帮助我们把复杂的应用变得简单易用。

[摘要:顺便一提，你知道Smashing Magazine 有移动版的吗？如果你有iphone,黑莓手机或者其他可以使用的设备，不妨试一试]

去掉不该要的

第一个对付复杂度这个坏蛋的武器是一把斧头。系统的分析一下能够发现80%的用户只会使用到软件里边20%的功能。那些没用的功能不仅是浪费开发时间，还会让程序越来越难用。应用程序在运作的时候常常想把任何事都做的很好。一个成功的应用应该是很可靠的：找出一个问题并且很好的去解决它。就像37signals说的那样“你没有尽力去比赛。”

想要做一个又可靠又好用的应用最好的办法就是做减法。在做决定的时候不管这个功能是不是必要的，我们都要先持有怀疑的态度，让这个功能成为讨论的话题。如果超过半数以上的用户在使用的时候都不怎么能用到它，那它真的可以被废掉。别误会我错了，要想做一个作决策的人是很困难的，但是当用户舒畅的使用过如此简单易用的应用以后，你就可以得到他的充分信任了。

把复杂的隐藏起来

如果当你不能砍掉某个功能的时候，最好的办法就是把它隐藏起来。很多时候，不经常用到的复杂的功能占据的屏幕空间要比经常用到的简单的功能要多很多。这是不应该的！一个良好的用户界面应该把最突出、最常用的东西直接展示出来并且把那些很少用到的东西都给隐藏起来这样他们就不会影响到操作了。

当我们重新设计我们的内容管理系统的时候，我们不能去掉那些比较特别的复杂的功能：批量编辑功能。在CMS以往的版本中，屏幕的一整列全都用来放批量编辑菜单。这个功能占据了整整30%的屏幕空间，但是我们发现只有非常少的用户会去使用它。我们的解决方法是插入一个单独的图标和一个数字在它的旁边标示出有多少项目在菜单里。点击图标或者数字可以在一个对话框中显示菜单里边的项目列表。这样可以节省大量的空间并且可以让绝大多数用户在工作的时候不会收到干扰。

    用John Meada老大说的话来形容就是：“当一个轻量的、不花哨的应用超出了我们的期望，我们不仅感到惊讶还会非常的高兴。”

降低视觉干扰

在此之前我们都在讨论如何降低界面的复杂程度以及隐藏掉功能。但是减少感官上的复杂程度也很重要。用户体验设计师Brandon Walkin说：“界面中大量的视觉干扰会对一个感觉很复杂的界面造成很大的影响。”保证最低限度的视觉干扰可以让一个界面看起来非常简单易用。两个降低视觉干扰最基本的方式就是留白和对比。

就像Mark Boulton定义的那样“留白，是构成作品的基础空间。”留白将会是你默认的排版工具。单靠感觉在设计中是绝对不推荐的除非你可以用留白实现同样的效果。你可以惊讶的发现单靠留白你可以完成很多事情。

当留白被大量使用的时候，对比应该越少越好。就像设计理论大师Edward Tufte提出的“少量的有效区分”提倡设计师使用最小的视觉变化有效的表达出他们的想法。事实上这句话是想强调什么是重要的，什么是次要的。

为了说明这两点，我们来看看TypeKit的定价列表然后再看看改进版的：

修改以前

修改以后

你应该注意到了改进版中加入了粗描边，和HTML table的默认边框没什么两样。哪个版本将操作中的视觉影响降了到最低？(答案当然是原版的)大量的留白和少量的辅助对比减少了视觉影响并且时你的应用感觉很清爽。

轻量化、重复利用、再循环

在应用刚刚开发好的时候，有很多问题重复的在许多地方发生。这些重复出现比较有代表性的错误往往都有类似的解决方案。找出重复使用界面组件的方法。在不同的地方重复使用组件有两个优点：较少的开发时间，在用户使用应用的时候保证界面的一致性。如果用户学会了如何去完成一个操作，他们会一如既往的用同样的行为去进行另一次的操作。

在设计一个CMS系统的时候，我们花掉大量的时间去完善表单验证。我们用红色字符标示出错误，并且加入红色的验证气泡标识出有多少错误在每一个表单里面。

在此之后，一个比较功能被添加到了需求列表里边。我们创造的是一个验证框架，而并不是创造一个新的机制。表单改变后会用蓝色标识出，并且我们用蓝色气泡统计出所有的改变。这样我们可以快速的开始开发，让用户能更快的学会使用它。

    重用界面组件是另一个视觉复杂程度的办法因为用户会很快熟悉它并且知道自己接下来的操作会是怎样的。

不应该是空白的空白状态

空白状态是指界面里边没有任何信息显示，比如有人第一次使用这个应用的时候。作为设计师我们要花大量的时间去想出怎么把界面做的更好看，同时又常常忘记内容根本不会永远存在。

建立好合适的默认状态是非常重要的。空白状态往往是人们对这个产品的第一印象是他们是否要使用这个应用的决定性因素。一个好的空白状态如同一个引导系统，帮助用户完成最初的操作步骤。

显然，Versions(一个Mac的 SVN客户端)的工作人员在程序的空白状态上花了不少的心思。该程序突出的强调了用户第一使用它的时候可能用到的功能和操作。

再次强调下：别忘记了空白状态哦！

案例

我们做了很多混乱而复杂的软件 。仅仅是降低程序的复杂程度就已经很难了。我们只出色的完成了很少数的一些程序。

Invoice Machine 是其中一个最简洁的用户界面。这是一款典型的能够表达出精简以及非常注重细节的一个例子。

Freckle可以让你好好的控制你自己的行程安排。方便快捷的界面以及明快的颜色，让日常工作变得更加的愉快。

Image Spark使用了光滑的黑色和白色的渐变以及简单的立体效果。整个界面只有一点点交互，操作起来很简单。

Ballpark 拥有清晰的控制面板和整洁的界面，在用色方面也非常的简单。

Krop的精髓是在它的两个可输入文本域：地点和关键字。它只需要5秒钟就能找到你想要的招聘信息。

Fever的主要用途是用来减少你和你敢兴趣的博客文章之间的障碍。它通过简单，独一无二的界面做到了这点。

Screenr是一个出奇的简单的录制屏幕录像并且发送到Twitter的工具。值得注意的是不是所有的功能它都有，但是它也根本没什么功能。

Squarespace是隐藏复杂性做的很好的一个例子。然而它是一个全功能的Web发布平台，它的力量隐藏在一个简单的用户界面背后令人印象深刻。

结语

首先，通过减少不必要的功能然后隐藏掉不能减去的功能来降低功能上的复杂程度。其次，通过减少视觉干扰以及重用组件来降低感官上的复杂程度。最后，用空白状态来引导用户。

在界面中降低复杂程度可以帮助用户更快的、更有效的以及非常愉快的学会使用你的客户端。就像爵士音乐家Charles Mingus说的：“让简单变复杂很正常；让复杂变简单，变得非常简单，那叫创造力。”