10个有用的网页应用程序界面技术.docx

　　CSS：

.dialog{

position:

absolute;

left:

50%;

margin-left:

-315px;

width:

630px;

z-index:

100001;

}

.dialog.body{

background:

url（/img/dialog.png）00;/*semi-transparent.pngimage*/

padding:

40px13px10px40px;

}

　　另外，你也能用基于JavaScript的轻盒子或是使用CSS3-属性的微量阴影我们早前已经介绍过的，但是你需要注意的是IE浏览器不支持这些的。

Basecamp's 的项目切换窗口四周的弱阴影使菜单区域凸显出来。

　　5.提示语告诉你该做什么

　　当你在设计一个网络应用程序的时候，不仅用样本数据进行测试是重要的，而且确保在没有数据的时候看起来也是好的和有用的，显得同样重要。

你应该设计提示语。

　　当一个页面没有信息时或是有疑问时，在界面上空的地方放置一句有帮助的信息提示来告诉用户怎么开始将是有益的。

例如，一个项目管理应用程序的首页可能会列出用户的项目，但是如果没有项目呢？

你应该提供一个创建项目页面的链接，额外的帮助是有益的。

　　当你开始构建一个邮件活动地时候，CampaignMonitor为你指引了正确的方向。

　　这项技术鼓励用户实际地使用所提供的服务以及在注册后直接着手使用服务。

通过应用程序的简单步骤来引导用户可以帮助他或是她理解应用程序所提供的优点是什么以及是否有用的。

只为用户提供最重要的选择也是很重要的，提供众多的选择是不明智的。

记住用户通常想获得为他们所提供的或多或少的具体想法，但是他们不想涉及太多的细节--他们对此即没有时间也不感兴趣的。

　　使用提示语来刺激用户和鼓励用户采取行动，对于减少用户中途退出网站的数量是非常有意义的，同时，帮助潜在的客户更好地理解系统是如何工作的。

　　如果没有表单存在的话，那么Wufoo's的表单页面会有一个较大的，友好的信息提示邀请你创建一个新表单。

　　6.已按按钮提示

　　许多网络应用程序有自定义风格的按钮。

这些锚或是输入按钮用自定义的图像作为背景的。

默认的输入按钮可能在一些情况下是不合适地，文本链接有时候不明显地。

挑战就在于，当链接看起来像按钮时，它们的行为就应该像按钮-当然这包括用户点击按钮后的“已按”状态，让用户清楚地知道按钮处于已点击状态。

　　这并不是纯粹地视觉设计。

给予用户快速地信息反馈将会使应用程序得到更好地响应以及为用户带来的体验更加接近桌面应用程序。

　　你可以添加一个通过定义链接的激活伪类的CSS样式的按钮状态，比方说，如果你的锚点已经定义了一个名字为add_task_button的类名，那你就可以添加add_task_button:

active来定义它的激活状态。

　　当你点击时，Highrise中的按钮就变成了已按状态，给用户提供了令人满意的响应反馈。

　　7.从登录页面链接到注册页面

     还未注册你的网络应用程序的用户将可在登录页面直接完成相应的注册。

他们可能想试用你的应用程序，但是一时找不到注册页面的。

可能他们试着获得一个只有注册用户才有的功能。

　　仍然没有一个Delicious的帐户吗？

没有问题的；在Delocious登录页面提供了一个注册链接。

　　Goplan在登录页面有一个彩色的按钮指向注册页面的。

     对这些用户来说，在登录页面放置一个注册链接将使事情更加简单。

如果你仍然没有一个帐户，你也没有必要寻找一个注册页面。

我们的研究表明：

18%有登录表单或是登录表单的链接的旁边放置了注册链接（例如YouTube,Reddit,Digg,Lulu,Metacafe）。

　　8.上下文相关的导航

　　考量用户在所给的上下文环境中期望看到的东西和所需要的东西是重要的。

你不需要在每个地方展示相同的导航控件，因为用户确实不需要在每个上下文环境中看到它。

　　最好的上下文相关的控件案例之一是微软在Office2007界面上的最新变化，默认的工具条设置变成了缎带状的控件。

在其上的每个标签里都有不同的但是行为类似的控件，有编辑图像，校对，写作。

网络应用程序同样能从上下文相关的控件中获益，因为这些控件可以通过只显示用户所需要的，来使界面简洁干净，而不是显示所有可用的。

　　Lighthouse有个相似的标签导航菜单；但是，系列标签下面有二级菜单。

这个级别只是展示了和网页相关的动作行为。

　　9.更多的强调关键功能

　　并不是所有的控件都一样重要的。

例如，在页面上创建一个新的项目，可能会有两个按钮：

“创建”和“取消”。

由于“创建”功能是用户在大部分时间都要用到的，因此“创建”显得更为重要的。

只有很少的情况下，用户会取消页面。

因此，如果这些控件被放在一起，你可能不想给它们相同的强调。

　　上图是Lighthouse的“创建标签”按钮。

你可以看到“取消”链接以纯文本方式放在它的旁边。

这不仅给了创建按钮更多地可点击区域，而且帮助用户在搜寻该按钮的过程中获得更好地视线焦点。

　　10.嵌入视频

     虽然图片和文字是一个传达和教你的应用程序功能给用户的好方法，但是如果你有资源制作成视频，那么视频资料将是一个更好的选择。

最近几年，视频在网上已经广受欢迎。

视频一般应用在市场性的网站上，是用于炫耀产品的视频秀。

但是这不是使用视频的唯一方法。

　　GoodBarry在首页上放置了一个视频用于炫耀它的产品功能。

在视频秀里面告诉了用户怎么样开始使用该产品。

　　MailChimp在管理面板里面包含了视频教程用于帮助新用户。

　　一些网络应用程序在程序内使用视频本身来教导用户如何使用特定的功能。

视频是一个快速告诉用户如何使用你的产品的极好方法，因为它让浏览者完全地了解到如何使用产品，所以它比起整页的纯文本更易消化，更清晰。