技术资讯

10个有用的技术改进你的用户界面设计

2009-02-15 09:47:00

网页设计最重要的组成部分是界面设计。创造美观而具有功能性的界面包含多种技巧。以下是我自己收集的，我认为你会在工作中发现派上用场的10个技巧。它们和任何特定主题无关，而更偏向于我自己的项目里常使用的技术。没什么其它问题的话，我们就开始吧。

1.填充链接区

链接（或是锚）默认都是内置元素，也就意味着它们可点的区域仅仅是文字的宽高。这个可点击的区域，或是你可以点击进该链接目的地的空间，可以极大提高可用性。我们可以通过增加填充，另外在有些情况下，也可以把链接转换成快状的元素。有个内置与填充链接的例子，它们可点的区域被高亮过了以示区别：

很明显，可点击的区域越大，点击该链接就更容易，因为错过它的机会就少了。把链接转换成块状元素使文本区涵盖整个容器的宽，除非宽被另外定义了。这样，把链接放到侧栏里是很理想的。我们可以通过下列的代码来实现它：

view plaincopy to clipboardprint?
a {
    display: block;
    padding: 6px;
}

确保也要给链接增加一个完好的填充，因为把一个链接转换成区域只影响其表现和宽度；增加填充可以确保该链接够高，而且有喘息的空间。

2. 排版按钮

对每一个细节的注重可以区分一个产品伟大还是平凡。例如，按钮和标签这样的界面元素每天会被你的用户多次点击，所以适当的给它们排版是有收获的；我所谓的排版是指把这些标签排列一下。以下有些我偶尔注意到的，误用标签的例子：

第一眼看到它们还行，但是注意那些文字被放的太高了，这是因为使用小写字母作为垂直居中对齐文字的导向，像这样：

无论怎样，如果我们使用大写字母和上格的小写字母（t、d、f、h、k、l）平衡就倒向了上面，使得标签看起来在按钮上太高了。在那种情况下，我们应该把大写字母的高度作为一个标尺-如果大多数字母是小写，就把它略标高一些。我的意思是像这样：

这样使整个按钮有一个更平衡的外观。这样的小打小闹距离使你的界面更有光彩且易用，还有一段很长的路。

3.使用对比来管理焦点

类似的，你也可以使用元素间的对比来管理你的用户的注意力。有一个例子关于发布头条和其下面的一些发布者、发布日期的元信息：

所有的文字都被设成黑色。让我们通过把文字设为很浅的灰色阴影来减小元信息（日期和作者名字）和背景的对比。

此处最强烈的对比元素是标题，所以它在字面上跳到我们眼前。其他的元素消逝到背景里。在此，我已经选择作者作为第二重要的元素，而日期是最不重要的。这些字在大小和风格上也有所区分，但是对比的强度可以非常有力。让我们把日期，作者和标题的重要性顺序调换一下：

你可以看到这对转换焦点是多么有效：现在是日期跳到你的眼前，而标题消逝了。这项技术对于信息量很大的网站来讲非常方便，例如博客，论坛和社会关系网，在这些地方你需要使大量信息易于被看到的同时，也显示大量附加内容，例如日期。把多余的隐掉使访问者易于把他们的注意力集中到最重要的文字上。

4.使用颜色来管理注意力

颜色也可以被有效的被用来把访问者的注意力集中到重要的，或是可行的元素上。例如，在美国总统大选的时候，很多候选人的网站把捐赠的按钮做成红色。红色是一种非常鲜艳而且有力的颜色，所以它吸引注意力，而且当网站的主色是蓝色或是其他冷色调的时候它显得更加突出。

形如红，黄和桔色这些暖色调本身很鲜艳，所以很容易吸引眼球。当和蓝，绿这些冷色对比的时候，它们也会“膨胀”。这意味着一个蓝背景上的橙色按钮看上去是向外流，并占据了前面的座位。相反，一个橙色背景上的蓝按钮像是向内的对比，更愿意作为背景。下面的图示说明了这一点：

以下是一些有效使用颜色来引导用户注意力到重要元素的网站范例：

Function 有个“我们正在招聘”的链接在它们的工作页面。为了确保这个链接不被忽略，设计师给它设置了一个从深色背景的页眉突出出来的红色的背景，有效的抓住了注意力。

Causecast 使用颜色非常有效。4个粉红色元素跳到你眼前：logo，反馈链接，捐赠链接和网站描述信息。

想要网站上的“关于”抓住访问者的注意力？把背景设成黄色。想要使“加入”按钮突出？把它设成橙色。但是要确保不要强调过多的元素，如果你这样做了，它们会在彼此的映衬下迷失掉。

5. 空白表示了关系

界面上最富有争议性的元素之一是各个元素之间的空白。如果你对于这种空白还不熟悉，它的意思其实是：一个界面元素与另一个之间的空间，它可以是一个按钮，一个导航条，文章正文，一个标题或者其它。我们可以通过制造这种空白来表示特定元素，或是元素组合之间的关系。

因此，例如我们把标题放得接近文章正文，表示该标题与文字相关。然后文字被放到距离其它元素很远的地方，使之更具有可读性。下面是一个空白处可以被改进的例子：

文字看起来很好而且当然是可读的，但是由于标题上下两部分的空间是一样的，它们并没有清楚的把每一部分文字分割开来。我们可以通过增加每一段之间的空白来和略微缩小段落行距来改进这一点。

这样的结果是更加明确的界定了区块；我们可以容易的分辨哪个标题对映哪段文字，而且可以清晰的看到分隔的段落。好的设计师常常斜视一下或者从远处扫一眼他们的作品，这样让他们从整体上来看被空白间隔开来的区块元素。如果你不能清楚的看到这些组合，你可能需要调整一下你的空白。

#p#

6.字间距

网页设计对于版式设计师来讲是非常局限的。虽然这里只有一些安全网络字体，而且你也做不了太多把来定义它们的样式时，牢记我们依然有一些层面上的控制权是值得的。“径”是一个在排版上用来描述字间距调整的名词。使用CSS里的“letter-spacing”属性，我们有能力做到这一点。

如果按限制和品位来使用，这个属性将会有效改进你标题的样子。我不鼓励把字间距用在主体文字上，因为默认的间距已经提供了适宜小字号的最佳可读性。

以下是一个使用字间距的范例：

下面是上述案例使用的CSS代码：

view plaincopy to clipboardprint?
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.自动聚焦到输入框

很多网络应用和网站使用表单这一特性。它们可能是搜索表单或者是输入表单邀请你去提交一些东西。如果这个表单是你的应用或是网站的核心特性，你可能会考虑在载入网站的时候，自动把用户的鼠标指针聚焦到输入框上。这样会提高效率因为用户可以不用点击便直接输入。这方面一个很好的例子是谷歌和维基百科的站点。

以上是维基百科上的，搜索框已经被高亮，准备好来接收文字。

自动聚焦到输入框，你需要一点儿JavaScript。有很多的解决方法，你所需要的那种方法依赖于你想达到的功能。这么做最简单的方法可以是把一些下列的东西加到你的BODY标签后面。

view plaincopy to clipboardprint?
<body " />
    <input type="submit" value="Go" />
</form>

现在，每次这个页面加载的时候，文字框调用“form_field” 被自动选择，做好输入的准备。

这么做唯一的问题是，如果你的用户想要使用后退键回到前一页，他们不会成功，因为他们只会把输入框的字母删除掉。谢天谢地，你可以在这儿找到Harmen Janssen有另一个简单的JavaScript解决方案。他的脚本允许当输入框中字母都被删除的时候，后退键回到前一页。

8. Custom input focus 自定义输入焦点

虽然表单元素的默认外观足以应对多数功能，有时候我们希望东西做的更好看，或者在跨越不同浏览器和系统的时候更标准化一些。我们只需轻松的把输入框标注上“id,” “class” 或是更老的 “input” 就可以像这样风格化输入框：

view plaincopy to clipboardprint?
input {
    border: 2px solid #888;
    padding: 4px;
    font-size: 1em;
    background-color: #F8F8F8;
}

更有趣的是焦点在输入框上的时候也可以风格化；即当它被点击时候的状态。我们需要在“input”之后加上一个 “:focus”的属性：

view plaincopy to clipboardprint?
input:focus {
    border-color: #000;
    background-color: #FFFE9D;
}

如果你在使用自定义的背景来风格化你的输入框，它们在有些浏览器和操作系统默认的聚焦效果下可能会冲突。例如，这里有一个自定义的风格和OS X 默认蓝色光雾效果冲突的截屏：

在这种情况下，你也可以使用“input:focus”属性来去掉默认的风格。以上截屏上默认的蓝色光雾可以通过禁止“outline”属性来去掉。

view plaincopy to clipboardprint?
input:focus {
outline: none;
}

蓝色光雾的效果将会被去掉：

如果你要把它替换成你自己的风格，显然你只会希望去掉外框，这样你不会给你的表单的无障碍访问以及可用性带来负面影响。

9. 悬停控制

一些网络应用有额外的实用工具管理，例如编辑和删除按钮，它们不需要一直在每一项的旁边显示。它们可用被隐藏起来从而简化界面，把访问者的注意力聚焦到主要的控制和内容上。例如，这些用在Twitter上，当你经过信息时的悬停控制。

这些悬停控制可以通过一些简单的CSS代码来实现，不需要任何JavaScript。简单的当它的父级层在一个悬停状态时，用这些控制把div风格化。以下是隐藏和展示这些控制的代码（在一个“message”属性的层内部，使用一个“controls” 属性的层）：

view plaincopy to clipboardprint?
.message .controls { display: none; }
.message:hover .controls { display: block; }

当你悬停在“message”属性的层，内部“controls” 属性的层就显示出来，同时还有它的所有内容，提供给你和上面 Twitter截屏所显示的一样的功能。

无障碍访问会有问题，因为屏幕阅读者也许读不到隐div。有很多其它的方法隐藏内部的div，比如用负值的边缘偏移把它移出页面（例如 “left-margin: -9999px”），把它的文字颜色设置的和背景色一样，或是简单的在它之上再放一层。

这项技术应该被加以限制的使用，因为你不想隐藏你重要的控制；但是如果使用正确，它将对通过移除你不希望一直显示的，额外实用工具链接来清理你的界面很有用处。

注意这些对IE6并不适用，所以你需要把你的IE6专属样式表隐藏的优先级覆盖，或者你没有的话，简单的在<head> 这部分里使用以下IE6专属代码。

view plaincopy to clipboardprint?

10.标签里的动词

你可以考虑一下你用在按钮和链接上的标签，使对话框更具有可用性。如果一个错误或是消息弹出来，选择是“是”，“否”和“取消”，你必须阅读整条消息来回答。看起来很平常，不是么？

但是我们实际上可以通过在标签里使用动词来提高效率。所以，如果除了“是”，“否”，“取消”我们可以使用“存储”，“不存储”，“取消”按纽，你甚至不用去阅读消息来理解这些选项是什么和会表现哪些行为。所有的信息已经包含在按钮的标签上了。

在按钮和链接的标签里使用动词使得选择对话框更好用，因为这些标签含有用户需要具备来作出一个选择的所有的信息了。

结语
如果顺利的话,你已经找到了将在你的工作里派上用场的一些新技术。和往常一样，有效使用它们需要限制和考虑周全的实现。例如，出现在悬停时的控制可能会使你的界面清爽，但是它们也会增加学习曲线，因为人们可能一开始没注意这些控制。但是同时显示所有的控制可能也不是最好的战略，因为用户需要去扫描更多的东西来找到他们要找的东西。

达到你所显示和你所隐藏之间正确的平衡是一项精细的艺术，作为一个设计师这也完全在你掌握之中。不要使用一项技术仅仅因为存在这项技术：使用它，如果它在你的上下文里有意义。

关于作者
Dmitry Fadeyev 是 Usability Post 博客的创始人，你可以在那里读到他关于好设计和可用性的想法。
原文：//www.smashingmagazine.com/2008/12/15/10-useful-techniques-to-improve-your-user-interface-designs/

(the end)

上一篇：加拿大预测网-在线预测:白宫网站改版之深度剖析

下一篇：加拿大预测网-在线预测:09年QQ登录Banner之转变