原文标题：10 Useful Techniques To Improve Your User Interface Designs
原文地址：http://www.smashingmagazine.com/2008/12/15/10-useful-techniques-to-improve-your-user-interface-designs/
作者： Dmitry Fadeyev
网页设计在大多数情况下，都由界面设计构成。其中有很多技巧，帮助制作许多漂亮而实用的界面。这里是我收藏的10个技巧，也许对各位有所帮助。这些技巧与任何特定的主题都没有关系，只是我自己使用到的而已。不啰嗦了，我们开始吧。
1. 填充 block 链接
链接（或锚点）默认情况下是 inline 元素，这就意味着文字的可点击区域仅在高度和宽度之间。链接的可点击区域或者说空间，我们可以增大它的面积来换取更好的可用性。我们可以通过填补的方法达到这一点，有时候，可以把链接改为 block 元素的形式。以下是一个比较 inline 链接和填补（padded）链接的例子，可点击区域使用高亮颜色以示区别：
显然，大面积的可点击区域更容易点击，因为鼠标漏过的大大减小。把链接改为 block 元素的形式使得文本区域覆盖了整个容器，除非另外设置了宽度。这种设置的链接放在侧边栏是再适合不过了。我们可以使用以下的代码：
a {
display: block;
padding: 6px;
}还有要注意的是填补链接要适量，因为把链接改为 block 元素的形式只会影响它的反应行为和宽度；填补时要确定链接有足够的空间，免得太过紧密。
2. 按钮排版
对细节的关注正是优秀与平庸产品的分水岭。用户每天都会点击某些界面元素好几次，比如按钮和标签，所以它值得我们给予适当的排版；而且这个排版，我的意思是给按钮上的文字一个准确的定位。下面两个是我有时注意到的错误的文字位置的例子：
乍看之下，它们似乎还不错，但是请注意这些文字的位置过于偏上了，以小写字母为标准放置在纵向的中心位置，就像这样：
但是，如果我们选择大写字母和高于“x”的小写字母（”t,” “d,” “f,” “h,” “k” 和 “l”），参考线向上移动，就会发现文字在按钮中摆得太高了。在这种情况下，我们应该设置大写字母的高度为标准——如果大部分都是小写字母的话就设置得更高点。我的意思就是以下这样的：
这使整个按钮看起来更加平衡也更有感觉。想这样细微之处的处理，对于设计一个更加精美的界面和令人满意的体验大有帮助。
3. 利用对比度控制焦点
相似的，你也可使用元素间的对比度，来控制浏览者的注意力。这里有一个例子，一篇文章的标题及下面的署名和日期：
所有的文本都设置为黑色。让我试试使用较浅的灰色，减少元信息（日期和署名）和背景间的对比：
这里对比最强烈的是标题，所以它最先被我们纳入视野。而其它元素则淡入了背景。这里我选择作者一栏为次重要的元素，日期最次。字体在大小和风格上也可以作出区别，但使用对比度的效果最为明显。让我们调换日期、署名和标题的权重看看：
你可以看到它是如何转移焦点的：现在日期最先被你纳入视野，而标题则淡入背景。这个技巧对于承载大量信息的网站非常好用，比如博客、论坛和社会网络，在这些网站上本就要浏览大量的信息，何况还有其它额外的东西比如日期之类的。淡化额外信息能让浏览者轻松地集中注意力在重要的文字上。
4. 利用色彩对比控制注意力
同样，色彩也可以用来有效地集中浏览者的注意力，到重要的或是可操作的内容上。比如，在美国总统大选期间，差不多所有的候选人的网站都使用红色的捐款按钮。红色是一种非常明亮而强有力的颜色，因此能够引起人们的注意，尤其是其余部分是蓝色或其它冷色的时候。
暖色调比如红色、黄色和橙色等自然明亮，所以往往能吸引眼球。当它们与冷色调比如蓝色或绿色放在一起时，也会显得具有“扩张性”。也就是说，如果一个橙色的按钮在一个蓝色的背景前，看起来像是向外流出并占据了背景的位置。反之，一个蓝色的按钮在橙色的背景前，看起来向内收缩；纳入了背景。这张图片可以帮助理解：
下面有几个优秀的例子，这些网站有效地利用色彩，将用户的注意力集中到重要的内容上：
Function 将招牌链接放在了其工作页面的显著位置。为了保证人人都不会略过这个链接，设计者使用了对比强烈的红色作为背景，把链接从暗色的背景中凸显出来，有效地吸引注意。
Causecast 充分利用了色彩。四个明亮的粉色元素最先吸引你的注意：徽标、反馈链接、捐赠链接和网站的描述信息。
想要你的网站上的“关于”信息最先吸引浏览者的注意吗？那就使用黄色背景吧。想要突出“加入”按钮？那就用橙色。要注意不要高亮太多内容；否则它们会互相混淆的。
5. 空白显示关系
在界面中最关键的元素之一就是各元素间的空白。如果你不熟悉所谓的空白，它是指：界面元素之间的空间，可能是按钮间的，也可能是导航栏间的、文章正文间的，或者标题间的等等。通过调整空白，我们可以表示出某些内容或某组内容间的关系。
因此，举例来说，把标题摆在靠近文章正文的地方，就表明它与这段内容相关。正文则被放在远离其它内容的地方，使其更具有可读性。这里有个例子，当中关于空白的处理还可以再改进：
这些文字看起来不错，而且相当易读，但是每个标题间的空白都是均等的，而没有分割开各个段落。我们可以稍作改善，略微增大各个段落间的空白，也略微减小段落的行高：
这样就显得更加清楚地划定了各个区域；我们可以轻易地分辨标题和正文，也可以清楚地区分各个章节。优秀的设计师通常会斜视或从远处扫一下网页，这样就可以看出空白将各个混杂的区域划分开来。
6. 字母间距
网页设计极大地限制了字体排印。只有为数不多的网页字体是可靠的，作为正文字体也不允许你自由发扬风格，这是我们应当记住的，我们仍然有一些限制。“Tracking”是字体排印领域中用于描述单词中字母间距的术语。我们已经可以使用CSS控制“letter-spacing”属性。
如果以克制的态度和欣赏的角度，就可以有效地利用这个属性来改善标题的效果。我不建议改变正文的字母间距，因为默认的间距一般都为较小的字体提供了最好的可读性。
应用字体间距的示例：
实现以上样例效果的CSS代码：
h1 {
font-family: Helvetica;
font-size: 27px;
}
h2 {
font-family: Helvetica;
font-size: 27px;
letter-spacing: -1px;
}
h3 {
font-family: Georgia;
font-size: 24px;
letter-spacing: 3px;
font-variant: small-caps;
font-weight: normal;
}这些效果可以用于制作更加精良美观或更新颖的标题。这里，我仅设置了几个像素的字母间距，就已经体现出字体风格上的极大的不同。
7. 输入框的自动对焦
许多网页应用程序和网站都使用表格。也许是搜索框或者输入框，或者其它需要你提交的。如果这些表格是你的应用程序或网站的核心功能，你可能想要在载入网页时，让光标自动停留在输入框里。这样做用户就可以省下一次点击的时间。Google 和维基百科就是很好的例子。
一进入 Wikipedia.org，搜索框就已经是高亮状态，可以直接输入文字。
要做到光标自动选定输入框，只需添加一点JS代码就可以了。实现这种效果的方法有多种。最简单的方法是在 body 标签中添加如下代码：
<body onLoad="document.forms.form_name.form_field.focus()">
你的表格代码应该是这样的：
<form method="get" name="form_name" action="#"> <input type="text" name="form_field" size="20" /> <input type="submit" value="Go" /> </form>
现在，每次载入页面时就会自动选定“form_field”字段，可以直接输入。
唯一的问题是，如果用户想要使用退格键返回上一页，就会很不幸地删去输入框中的字符。还好，Harmen Janssen 用一段简单的JS代码就能解决这问题。他的代码允许用户使用退格键后退而不删除输入框中的字符。
8. 自定义输入框样式
虽然默认的表格外观足以满足大部分的需求，但有时我们还是希望能让它变得更漂亮，或者在不同的浏览器和系统下统一样式。我们可以简单地对输入栏做一些改造，通过“id”、“class”或者古老的“input”来处理，像这样：
input {
border: 2px solid #888;
padding: 4px;
font-size: 1em;
background-color: #F8F8F8;
}
还可以设置当输入框被选定时的样式；也就是点选输入栏时的。要做到这一点，我们得在“input”之后添加上“:focus”属性：
input:focus {
border-color: #000;
background-color: #FFFE9D;
}
如果你对输入框设置了自定义背景，就可能与某些浏览器和操作系统默认的设置冲突。比如，这张截图是自定义设置和OS X系统默认蓝色发光的冲突结果：
在某些情况下，你也可以使用“input:focus”属性删除默认的风格。截图中的默认的蓝色发光也可以通过移除“outline”的效果来去除：
input:focus {
outline: none;
}那么蓝色发光就被删除了：
显然，如果你只想要自己的风格的话，就得删掉 outline 属性的效果，以免对效果和表格的可用性产生影响。
9. 悬停控制按钮
一些网页应用还有额外的实用控制，比如编辑和删除按钮，这些并不是每个项目旁边都有的按钮。这些隐藏的按钮可以简化界面，而让浏览者的注意力集中在主要的控制和内容中。例如，Twitter 中悬停控制按钮就在鼠标悬停在信息上的时候显示出来：
这些悬停控制按钮用一些简单的CSS代码就可以实现，不需要任何JS代码。当一个<div>所属的<div>处于悬停状态时就会显示一定的风格。以下代码用来隐藏和显示控制按钮（利用在一个含有class“message”的<div>下的含有class”controls”的<div>）：
.message .controls { display: none; }
.message:hover .controls { display: block; }当你悬停在“message” <div>上时，“controls” <div>就会显示出来，连同它所有的内容，就像上面的 Twitter 界面那样显示某些功能。
关于可用性可能还有一些值得商榷的地方，因为屏幕阅读器还无法读取隐藏的<div>。我们还有其它许多种方法来隐藏内部的<div>，比如使用负的margin属性来将它移除这个页面（比如设为“left-margin: -9999px”），或者把文字设为与背景相同的颜色，又或者用其它<div>来覆盖它。
这个技巧当然也不能滥用，因为你不会想隐藏掉你的重要的控制按钮；但是如果使用得当，就可是移除那些你不想总是显示的额外的链接，使界面变得干净。
请注意这可不适用于IE6，所以你得为IE6再写一段专属的CSS代码，要不然就在<head>部分加入以下代码：
<!--[if lt IE 7]>
<style type="text/css" media="screen">
.message .controls { display: block; }
</style>
<![endif]-->10. 在标签中使用动词
你可以通过按钮和链接上的标签，让选项对话框变得更实用。如果出现错误或信息显示在屏幕上，那么你就得读完整段信息才能选择“Yes” “No” 和 “Cancel”。看起来很正常，不是吗？
但是我们可以在标签中使用动词，这样就能方便选择。所以，将“Yes” “No” 和 “Cancel”替换为“Save” 、“Don’t Save” 和 “Cancel”按钮，你就不必再阅读整段信息来确定选择什么。所有的信息都包含在按钮标签里了。
在标签中的按钮和链接上使用动词使选项对话框更实用，因为标签就包含了所有用户需要的信息。
写在最后
希望各位都能找到对自己的设计有用的技巧。一如往常，最好在克制而经过深思熟虑的情况下，最有效地利用这技巧。比如，利用鼠标悬停显示控制按钮，能让界面变得更干净，但是它也增加了新访问者学习操作的门槛。但总是显示所有的控制按钮也不是什么好主意，这样用户就得阅读更多的东西才能找到他们要找的。
把握显示与隐藏间的平衡实在是一门微妙的艺术，一门完全掌握在设计者手里的艺术。不要为了使用这些技巧而使用：只做有意义的，形式为内容服务。
关于作者
Dmitry Fadeyev 是 Usability Post 博客的创始人，各位可以去读一读他关于优秀设计和可用性的思维。
