hello, world

1. 按需的界面元素
在用户界面设计中，简单化是很重要的一部分。你在屏幕上放越多的控件，你的用户就要花越多的时间来弄明白怎么使用这个界面。当可选择的东西少下来之后，那些可用的功能就显得很明朗了。然而简化界面并不是那么容易的一件事情，尤其是当你不想因此而限制了应用程序的功能性时。 ##CONTINUE##

当你点击Kontain的搜索文本框时，一个类似的下拉菜单就出现了。所以如果你想缩小你的搜索范围，你可以用这个菜单来选择你想要找的内容的各类。把这些选项隐藏起来就使搜索框得以简化。
有一个方法很简单，那就是把高级的功能给隐藏起来。找出你界面中最常用的那些功能，然后把剩下的都藏好。你可以用弹出式的菜单或者控件来实现这一功能，这在桌面软件中是非常常见的。比方说你的搜索栏有一些高级的过滤器，就可以把它们放进搜索栏后面的一个特殊的下拉菜单中。如果用户需要过滤器，他们只需用鼠标点几下就可以使用了。然而决定留下什么隐藏什么就不那么简单了，这取决于这些控件有多重要，被使用到的频率又有多高。

当你点击CollabFinder中的搜索链接时，并不会跳到另一个页面去。相反的，一个控件拉了下来，你可以在此直接开始搜索。

2. 专业化控件
选择适合当前情况的界面控件很重要。不同的情况可以用不同的方式来处理，而某些控件在处理特定情况的时候就比别的要好。

Backpack在选择一个提醒时间的时候有一个简洁的日历控件。
比如说要选择一个日期的话，你可以通过下拉列表来分别选择日、月、年。然而同一个你可以直接点击并选择日期的日历控件比起来，下拉菜单就显得不那么高效了。日历控件还可以帮你更轻松地选择日期、星期、月份（特别是区分工作日和周末），因此可以让你的决定带有更多的信息量，也比用简单的下拉列表要来得快。

MyBankTracker的APY计算器用了一个很方便的滑动选择器可以让你尝试不同的组合。
另一个很棒的例子就是滑动选择器。当然，你总是可以手动输入数字的，但是在某些情况下滑动选择器控件好多了。不仅仅因为它们很容易使用——只要点点拖拖就行了——而且你可以看到你的选择在最小值和最大值的范围里处在一个什么位置。

3. Disable pressed buttons禁用点过的按钮
在表单使用上Web应用常碰到的问题之一就是提交的过程。在一个简单的表单里，如果你在快速点多次“提交”按钮的话，这个表单也会被提交多次。这样所带来的不良后果是它会创建同一项目的多个副本。要防止重复提交并不是很难，但是在大多数Web应用中却是非常重要的。
防止这种行为分成两个层面：客户端及服务器端。我们并不讨论服务器端的事情，因为这随着你使用的编程语言和后台架构不同而有所变化。你所做的就是对于任何提交过来的数据，都检查它是否重复，如果重复的话就阻止住它。

Yammer在你的新消息提交的时候把“更新”按钮禁掉。
客户端要做的事情就简单多了。你要做的只不过是在“提交”按钮被点击的时候把它禁用。最简单的方法就是用一段JavaScript代码：< type="submit" value="Submit" onclick="this.disabled=true">当然了，我们会建议你也要实现服务器端的检查以确定能拦住这些重复数据。

4. 给模态窗口加上阴影
给弹出菜单或者窗口加上阴影可不仅仅是为了吸引眼球。这些阴影通过增加菜单或者窗口的维度来使它们变得醒目，同时也能来把这块区域变暗以阻止下方内容的干扰。
这个技巧在传统的桌面应用中已经根深蒂固了，它帮助用户把注意力放到出现的窗口上。由于在Web应用上，大多数模态窗口并不是很容易和主内容区分开，而阴影则让它们看起来离用户更近一点，因为这样窗口看起来就像在一个三维的空间中并且位于页面其它内容的上方。

Digg的登录窗口有一个很宽的阴影，它挡住了正文页面对弹出窗口的影响。
要达到这个效果，设计者们通常会创建一个容器，用一张透明的PNG图像作为其背景，并把内容放在这个容器中。而在这个盒子的四周则设有等宽的内间隔。另一个方法就是用一个一张带透明边框的背景图片，并且用绝对定位来进行定位。这也就是Digg的实现方法——这就是他们使用的图片（dialog.png）。而以下则是他们使用的HTML代码和CSS样式：
(X)HTML: <div id="container">
< div style="display: block; top: 236px; opacity: 1;" class="dialog">
< div class="body">
< div class="content">
...
< /div>
< /div>
< /div>
< /div>
CSS:.dialog {
position: absolute;
left: 50%;
margin-left: -315px;
width: 630px;
z-index: 100001;
}
.dialog .body {
background: url(/img/dialog.png) 0 0; /* semi-transparent .png image */
padding: 40px 13px 10px 40px;
}
另一种选择是，你也可以使用基于JavaScript的阴影效果，这用到了我们在之前讨论过的CSS3的属性。需要注意的是IE并不支持这些属性。

Basecamp项目切换器用到了一个大的淡色阴影来使菜单醒目。

5. 告诉你该干些什么的空白状态
很重要的一点是你不光要用一些样本数据来进行测试，还要确保它在暂时还没有数据的时候也能看起来不错并且有所帮助。
当这个页面上还没有信息或者查询的时候，我们可以把一些有用的消息放入空白处来告诉用户该从哪里开始。比如说，一个项目管理应用程序的主页上可以列出用户的项目，但是如果还没项目的话，你就可以在上面放一个链接指向创建项目的页面。即使在页面上已经有一个可以实现此功能的按钮了，再加一点点帮助信息也坏不到哪去。

Campaign Monitor在你准备开始创建一个电子邮件活动的时候把你指向正确的位置。
这一技巧可以促动用户去尝试各项服务，并且在注册之后继续使用服务。给用户展现应用程序的每一个步骤说不定可以帮助他们理解应用程序所提供的优点，以及这些对他们是否实用。给用户展现一些最重要的选项也很好，但是只要那些最重要的就够了——给他们看太多选项并没有什么意义。请牢记，用户通常只想知道一个大体，知道他们能从中得到些什么，他们可不想了解细节的问题——他们没时间，也没兴趣。
使用空白状态来促动用户，你可以大大地减少那些立马离开的人数，并且帮助你的潜在用户了解你的系统是怎么运作的。

如果你还没创建过表格的话，Wufoo的表单页面有一个很大的、友好的消息，上面邀请你来新建一个表格。

6. 鼠标按下的按钮状态
许多Web应用都有自定义样式的按钮。这些是用加了自定义的图片作为背景的链接或者是输入按钮做出来的。默认的输入按钮在许多情况下也许并不那么合适，而文本链接有时候则太难以察觉了。所以挑战来了，当你把你的链接弄得和按钮长得一样的时候，它们的表现应该也和按钮一样——这包括当用户点击链接时的一个按下的状态。
这不仅仅是视觉上的调整。即时给出反馈可以让应用程序看起来更加敏捷，并且让用户体验更加接近于桌面应用。
你可以通过配置CSS中链接的active伪类来添加一个按下的按钮状态。比方说，如果你的链接有一个add_task_button的样式，你可以去更改它的活动样式add_task_button:active。

7. Link to the sign-up page from the log-in page在登录页面放置注册页面的链接
没有在你的应用程序上注册过的人们总是难免会来到登录界面的。他们很有可能想试试看你的应用程序，但是不能马上找到一个注册页面。也许他们想试一试那些只有注册过的用户才能使用的功能。


没有Delicious的账号吗？没问题，在Deliious的登录界面上就放了一个注册链接。

Goplan在登录页面上放了一个漂亮彩色的按钮，指向注册页面。
在你的登录页面上放一个注册链接可以使这一切变得简单。如果他们没有账号的话，他们无须去找这个注册页面。我们的研究也证实：（在100家Web表单值得关注的流行网站中）有18%都在登录表单旁边放了一个注册表单或者是通往注册表单的链接（YouTube、Reddit、Digg、Lulu、Metacafe等）。

8. 上下文相关的导航
还有很重要的一点就是在每一个的上下文中想一想用户希望看到些什么，以及他们需要些什么。你没必要在哪里都显示同一个导航控件，因为并不是所有的情况下用户都会需要它的。
上下文相关控件的一个最好的例子就是Microsoft Office 2007界面中的一个改变——原先的工具栏被Ribbon控件所代替了。Ribbon中的每一个选项卡都放置了与某一特定活动相关的控件，比如说编辑段落、校正或者写作。Web应用也可以从类似的上下文相关的控件中得益，因为这些控件给你看到了一个更加清爽的界面——它只展现用户所需要的，而并非全部内容。

Lighthouse有一个熟悉的选项卡式的导航菜单；然而在每个选项卡下它还有一个二级的菜单。这一级的菜单只显示与当前的活动选项相关的一些项目。

9. 给关键功能更多关注
并不是所有的控件都有着同样的重要性。比如说，在创建一个项目的时候，你可能会有两个选项：“创建”和“取消”。“创建”链接就更重要一点，因为这是用户在大多数情况下会去做的事情。只有很少的情况下他们才需要取消这一操作。所以如果把这两个控件并排放置的话，你就不能同时给它们相同的重要性。

在Lighthouse中的“创建”按钮。你可以看到在它旁边有一个文本的“取消”链接。按钮不光体现出了重要性，而且有一个更大的可点击范围，而且因为它有边框，也就更加容易被关注。
要把强调放在“创建”链接上面的话，我们可以为它使用不同的样式，或者是使用不同类型的控件。有些应用程序在创建的时候使用表单输入按钮，而把取消动作当成文本链接。这不仅仅给了创建按钮更多的可点击空间，还让用户在寻找创建按钮时能把目光放在按钮身上。

10. 嵌入视频
如果说图像和文本是用来沟通和教会你的用户使用你应用程序特性的一个好方法的话，视频就是更好的选择了。在网上，视频这种方式在近几年来已经积攒了大量人气。对于Web应用来说，视频通常用于当作展示产品特性的屏幕录像，尽管这并不是使用视频的唯一方法。

GoodBarry在首页上放一了段视频来展示其产品。它使用屏幕录像的方法来告诉用户从哪里开始。

MailChimp的管理面板上就有一段教程视频用于帮助新用户。
有些Web应用在应用程序内部使用视频来告诉用户如何使用某些特性。用视频来演示你的产品该如何使用真的很棒，因为相比于一整页的文字来说视频更加直观，也清楚多——用户们一看就知道该做些什么。