toc

Intro

英文原文：3 Parts of Good Visual Interface Design

仅从基础层面来看，在我看来好的视觉交互设计有三个部分组成，或者说需要满足三个要素。每个部分的满足程度将直接影响整体作品的质量。如果都满足了，作品就达到了最好的境界；如果只是一两个满足了，作品质量也就马马虎虎；如果没有一个满足，那东西肯定稀烂。这三个部分便是：

• 清晰的界面元素
• 元素间的关联
• 作品各部分的组成效果

清晰的界面元素指的是每个元素都清楚的表达了自己的功能和可交互性（或者 affordances，译注：可以理解为”可供性”，在此推荐ID公社的一篇文章）。这些元素是否容易看到，其中文本是否易于辨别？按钮是否看起来就像按钮，并且用户是否知道它可以点击（可以交互）？列表看起来是不是像列表，且用户是否明白这些项的类型？控件喊的图标（icon）是否有辨读性？每一个交互元素，都以不同的清晰度呈现给用户它们各自能够做什么以及如何使用。

元素间的关联是指类似于元素组合起来将内容组织成一个有一定含义的单元，或者元素将对比、尺寸的变化来构建一种视觉层级，以此来引导用户的注意。文本中有标题，或者列表紧靠这标题，就是为了让其意有所指；按钮中一定会有的文本是将其作为标注从而让按钮易于理解；一组有关联的项必须很明确的和其他无关联的项隔开，就是为了让其能够理解为它们是一组；最重要的控件和内容一定要让它们作为首要元素脱颖于页面，等等。设计师通过使用颜色、对比和空间来组织界面，以此让用户很容易地交互与理解。

最后，我们将各部分有机地结合起来。将界面作为一个有机的整体而不是独立部分呈现会给用户美感的印象。因为单个元素在扮演各自的角色的同时以某种有意义的方式和其他元素连接，所有元素结合起来可以作为一个单元，一个统一的界面。建筑师装饰单独的窗户、门廊、墙壁以及屋顶并这些有机组合为一间房间，而访客则会将这些部分作为整体参观和体验，并会对这些效果做出评价。统一的界面将前面的两个部分以一种巧妙地有特定目的方式结合，这样也就达到美感的效果¹。

上面的解释，例如，为什么许多网站的可用性很好，界面却很丑陋。设计师只关心可用性而不管美感，或许是确保了每个元素能够清楚的表达其功能；或许是没有使用icon，取而代之的是清晰的文本标签；或许是为理解力低的用户增加了引导的描述；或许使用了明显的对比巨大的字体；或许将页面根据不同意义分组依次来吸引眼球到重要的内容，也就导致了整体界面完全缺乏美感，使整个界面看起来像一个造型丑陋功能完备的联合收割机而不是一个有着优雅的流线型外壳的小轿车。明晰的元素并不能确保整体界面的美观。要做到美观，页面上所有不同的元素需要和谐连接在一起，这样才能使之变成一个有机的整体性的界面。

---

于此相反的是，许多好的看的站点的易用性很差。当你只想要建立一个整体美观的效果，让元素协调而统一就不难实现。现今的许多设计师喜欢使用蒙着的，浅灰色的字体，但这些字体通常可读性很差。他们这样做的原因是，他们将文本仅仅是作为构建整体页面的基础材料而不是需要着重处理的关键元素。他们使用漂亮的大字标题，有趣的大图（hero image），新颖的菜单作为站点的全部组合，然后才顺便处理下文字，为了不影响他们美丽的设计，又让字体变得又小又浅，最后为了美观牺牲了可用性。

另一个形式大于功能的例子是，使用意思不明确的icon。icon比文本标签更小也更优雅，单从可用性考虑，它们却不是一个很好的考虑。人们通常不是很清楚icon代表了什么，还需要花时间去鼠标移到按钮来阅读工具提示（tooltip），除非这些icon非常普遍。icon大都被设计成有着相同长宽的方形图案，对视觉设计师来说它们是构建作品的理想选择。设计师玩玩会沉迷于icon所带来的视觉效果，因为文本标签尺寸不可控转而拥抱简介的优雅的icon，同样为了美观牺牲了可用性。

这三点的顺序也非常重要。一个华而不实的作品比不上一个丑陋却好用的作品（除非，它的功能就是变得美观）。因此我们首先得保证所有界面元素都是明晰的，然后确保元素之间的有着良好的关联，最后再确保作品是一个美观的整体。所有这些过程都是同时发生——例如，你在装饰单个元素的同时你会创建它们之间的关联，同时一开始你便确定了你最后想要的达到的视觉效果——但是，这三个点的完成顺序却影响了最终作品的是否表现的恰如其分。

最终，当所有的三点都很好的实现，所有的元素都很清晰，元素间定义了良好的关联，整体构造成一种栩栩如生的审美形象，我们便完成了一个好看而又好用的界面²；一个能够表达自己功能同时有着统一的样式和视觉印象的界面。

1. 有时候或许会这样，当我们完成第二点的时候第三点恰好也满足了——例如，一旦你解决了元素将的关联，和谐的整体自然而然的形成了。是的，一种协调的感觉达到了，但是我们想要的不仅仅是这些。我们在最后一步需要达到的是一种美感的效果，是一种设计师想要达到的视觉样式。举个例子，许多的新闻网站，它们都有着十分相同的内容单元(最新标题列表，链接部分，等等)，并且各自都有着明晰的定义，但是每一个网站最终都需要与其他的区别开来——你有机会组合你的作品让人欲罢不能。
2. 我的意思是美丽优雅和谐的感觉，而这些感觉来自于良好组织的设计，设计中的每个元素服务于其他的一切却并不出格。有些设计可以通过增加样式和装饰来锦上添花，有些就不行，就需要保持其简介的形式。