本节书摘来自异步社区《众妙之门——网站UI设计之道（修订版）》一书中的第1章，第1.2节，作者【德】Smashing Magazine，更多章节内容可以访问云栖社区“异步社区”公众号查看
1.2 可视界面设计的工具箱
可视界面设计就是让用户能够在他们的电子设备屏幕上看到你的界面的物理表现的过程。可视界面设计的主要目的是通过精心制作合适的可视界面，让用户理解应用程序的用途以及如何操作应用程序。
可视界面设计由一系列过程组成。选择合适的类型、对齐每个元素、将不同元素以一种有意义的方式组合起来，用户界面中不同的功能和特性借此传递给了用户。下面就是可视界面设计中的一些主要元素。
1.2.1 布局和定位
布局规定了界面中所有可视元素的结构。通过元素之间的距离，还确定了元素之间的层级和相互关系。元素距离比较近表明它们之间存在相互关联，例如图标下面的标签。定位也能改变整个界面的流畅性。例如将标签放在文本输入框的上面，而不是左边，这样我们就可以方便地从上往下扫描所有元素，而不需要先看左边，然后再找右边哪个输入框与其对应。
1.2.2 形状和尺寸
形状通常用来区分元素。例如，通过改变图标的外形，能够让它们被更快、更容易地辨认出来。尺寸经常用来表示重要性，越大的元素就越重要。尺寸也可以改变可点击控件的可用性。费茨定律告诉我们，一个可点击区域越大，用户将鼠标移动到该区域就更快。把经常使用的按钮做大，不仅让用户的点击变得更容易，同时提升了点击率。
1.2.3 颜色
很多地方都用到颜色。一种颜色在与它反差强烈的背景色下是能够吸引人的注意（比如，在白色背景中的一个亮黄色警示箱）。不同的颜色可以表示不同的意义。例如，红色经常用来表示危险或停止（交通灯里的红灯），所以最好用红色来表示错误信息。而绿色一般用来表示成功或者继续进行的信号，所以应当用在表示这类信息的内容上。颜色也可以用来突出显示一些关系，例如在编辑的时候，根据按钮的关系，以不同颜色高亮显示，来帮助用户识别。
创造一个产品的外观和感觉并不是可视界面设计的主要目的，而仅仅是一个部分。最主要的目的还是沟通：通过沟通的行为帮助用户理解应用程序。
在使用颜色的时候要记住两件事。首先，不同文化中颜色代表的含义有所不同，所以确保你的目标用户能够识解你所选颜色的含义。其次，不要忘记色盲用户，在区分不同元素时，多花一些心思，使用一些颜色以外的技巧，例如一个图表中的长条。如果用户是色盲，他们就不能区分特定的颜色，多数色盲患者都是红绿色盲，所以你需要使用其他的方法，例如形状、材质等。
1.2.4 对比
一个元素周围的黑暗或者明亮将会对元素在界面上的可用性产生影响，这其实就是对比度在起作用。白色背景中的黑色文本具有高对比度，比起白色背景中的灰色文字，更容易辨认和阅读。调低一些元素的对比度，将它们融入到背景当中，用户就能够区分出重要元素和次要元素。
1.2.5 材质
在交互设计中有一个概念叫做Affordance。Affordance 是一种能够让用户明白如何使用一种东西的特质。以把手为例，做一个单向门的最好办法就是在拉的这一面安装一个把手，在推的那一面装一个平坦的手柄挡板。看到门，人们自然就知道什么时候拉、什么时候推，因为门把手已经告诉了人们如何去使用。也就是说，提供了最好的互动方式，来让用户集中精力于正确的一个上面。
我们可以把这个主意应用到用户界面设计中，在屏幕上使用材质。例如，在可视界面中一些元素是可以拖拽的，就像在一个窗口的四角，我们可以对这个窗口进行缩放。为了让用户知道可以点击、拖拽它，通常会使用一些粗糙介质的突起。现实生活中，那些可以用手拉的物品通常会具有比较粗糙的材质。这个主意被转移到了屏幕上，不同的是我们不再用手指，而是用鼠标来进行拖拽。
