最近越来越多的软件应用迁移到Web 。因为没有平台的限制或安装的要求，在web上以软件作为服务的模式看起来非常有吸引力。 Web应用程序界面设计的核心是网页设计，但它的重点主要是功能。 与桌面应用相比， Web应用程序必须提供让他们的用户以更少的精力和时间来做事情的更加简单、直观和敏感的用户界面 。

在过去，我们并不关心Web应用程序的方式，现在我们应该、而且是时候去仔细看看一些有用的技术和设计解决方案，让网络应用更加方便用户和更加美丽。 本文介绍的是在现代Web应用程序中我们广泛使用的设计模式和有用的设计解决方案，并且是第一部分。 您可以在下面找到软晨学习网收集的10个有用的界面设计技术和最佳做法在许多成功的网站上的应用。

1. 界面元素的需求

简单是很重要的用户界面设计。在任何时间，您在屏幕上显示的控件越多，您的用户将不得不花费越长的时间搞清楚如何使用界面。 当选择更少，可用的功能变得更加明显和更容易浏览。 简化的界面是最好不过，尤其是当您如果不想限制程序功能的时候。

当你点击搜索链接Kontain搜索框，一个类似下拉菜单出现。因此，如果您需要缩小搜索范围，您可以使用菜单选择来排序您正在搜索的内容。折叠这些选项，简化了搜索框。

 隐藏或掩盖其先进的功能是其中一个使事情变得更加简单的方法。在您的界面或者其它部分找出最常用的功能，用最常用的桌面软件的弹出菜单和控件来制作它。比如，如果您的搜索栏有一个高级过滤功能，那么不要把它们放置在下拉菜单底部。如果用户需要这些过滤功能，那么他们只需几个点击就可以完成操作。 决定该保留什么以及什么该隐瞒不是一件简单的事情，不过，这将取决于每个控件的重要性和使用频率。

 

当你点击搜索链接CollabFinder ，你不必进入不同的网页，反而在搜索框中控制下拉，就可以直接开始您的搜索。

2. 特殊控件

重要的是选择正确的界面控件的位置，不同的位置有不同的处理方式，并且有些控件在完成预期功能的时候比其它一些做的更好。

 

Backpack有一个紧凑的日历日期和时间选择器用来选择提醒日期。

例如，您可以使用下拉列表来选择一个日期的年、月、日，但是与日历选择相比，下拉菜单并不十分有效。在日历选择里，您可以直接点击你想要的一天。 日历选择也能帮助您看到几天、几个星期和几个月内（特别是工作日和周末） ，因此日历选择比一个简单的下拉列表更容易让您作出更明智的决定。

 

MyBankTracker的 APY计算器的功能很容易使用，可以使用滑块控制快速尝试不同的预测。

另一个很好的例子是滑块。 您可以随时手动输入了一些数据，但某些情况下，大量工作利用滑块控制会做得更好。 他们不仅易于使用(只需单击并拖动)，并且你还可以看到如何选择适合的最低和最高的适用范围。

3.禁用按下按钮

一个Web应用程序遇到的问题-表单提交。非常简单的表单，如果您非常快的按一下“提交”按钮两次或更多，表单将提交两次或更多次。这显然是个问题，因为它会创建重复的相同的项，防止重复提交的并不很难，但是对于大多数Web应用程序必须做到这一点。

可以采取两种防护措施： 在客户端和在服务器端。在这里我们不会通过服务器端的防护措施是因为它将取决于您使用的编程语言和你的后端架构。 基本上你应该做的是一个验证，以确保在处理阶段不要提交重复，而且要阻止重复提交。

 

Yammer 禁用“更新”按钮，当您的新邮件已提交后。

客户端防护是简单得多。 您所需要做的就是让“提交”按钮不是时刻能点击:最简单的方法就是在“提交”按钮上添加一块JavaScript脚本，如下所示：

 1. <input type="submit" value="Submit" onclick="this.disabled=true" />

当然，我们也会建议您同时实施服务器端的验证，以确保不重复获得通过。

4.模式窗口周围阴影

下拉弹出菜单和窗口的周围阴影不只是eye candy (Photoshop外挂的滤镜中的一组,我们所常见的一些效果如火焰、冒烟、金属色泽、以及将影像立体化等效果)。 他们能够帮助菜单或窗口相对于背景更加显眼。他们还能阻止窗口周边地区昏暗内容的干扰。

这种技术来源于传统的桌面应用程序，帮助用户把他/她的注意力集中在出现的窗口上。由于大多数模式窗口的主要内容的区分不象桌面应用程序一样容易，阴影的出现似乎更接近读者，因为窗口是以三维的和放置在其余的网页之上的形式出现。

Digg的登录窗口有一个厚厚的阴影围绕它来阻挡网页下方内容的干扰。

为了实现这一效果，设计师往往要用一个透明的png图片作为背景和在里面放置内容的盒子(在各边作等距离填充的)来创建一个容器。另一种选择是使用一个带有透明边框的背景图片和使用绝对定位来定位的内容框。Digg正是这么做的- 他们使用（ dialog.png ）图片 。 这是他们使用的标记和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属性的下拉阴影 ，但你必须认识到， Internet Explorer将不支持他们。

Basecamp的项目切换窗口有一个大的柔和阴影，帮助菜单项更加突出显示。

5.在空闲状态，告诉人们该怎么做

当你设计一个Web应用程序的时候，在空闲状态告诉人们该怎么做这是非常重要的，不仅是为了测试样本数据，而且要确保它看起来不错并且是有帮助的，尽管那里什么也没有。

当进入一个没有任何信息或查询的网页，告诉人们该怎么做是一个很有用的信息。例如，一个项目管理应用程序的网页可能会列出用户的项目，但如果没有项目，然而，你可以提供一个指向该项目创建页面的链接。即使在网页上已经有一个这样做的按钮， 额外的一点帮助不会带来任何伤害 。

当您开始创建一个电子邮件活动的时候，Campaign Monitor能指点你正确的方向。

这种技术实际上鼓励用户试用服务，并直接在使用这项服务后注册。通过单一步骤的应用指导用户，这可以帮助他或她明白应用提供了什么优势，以及相对于他/她来说，它是有用的还是没有的。 同样重要的是，提供最重要的选项给用户，并确保是最重要的，因为给他们众多的选择是不明智的。请记住，用户通常希望您能提供给他们或多或少的具体想法，但他们不想进入细节，因为他们既没有时间也没有兴趣。

利用空闲状态去激励用户和引发他们的行动，可以大大减少“辍学” ，帮助您的潜在客户更好地了解该系统如何工作

Wufoo的表单网页有很多，如果您一个也没有，友好的讯息邀请您创建一个新的表单。

6. 按钮按下的状态

许多web应用程序有一个自定义风格的按钮，这些锚或输入框把自定义的图像作为他们的背景。在一些情况下默认输入框可能不适用，以及文字链接有时不太显眼。 目前的疑问是当你点击链接，他们表现的更象一个按钮。这其中包括当用户点击它们中“压”的过程 。

这不是一个纯粹的视觉调整。给用户的应用提供即时反馈，带给用户接近于桌面应用程序的更敏感和更密切的体验。

您可以利用CSS设计active伪类中的链接添加一个按下按钮的状态。例如，如果您的锚具有一个class属性add_task_button ，您可以定义这个class的样式:add_task_button:active 。

当你点击它们，Highrise的按钮实际上显示的按下状态为用户提供满意的反馈感觉。

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

有些尚未签署申请人有时会不可避免地进入登录页面。他们可能想尝试你的申请，但由于无法找到注册页面而着急。也许他们曾试过访问一个提供给注册用户的功能。

 

没有一个Delicious 账户，没有问题，在网页上有一个指向到注册页面的链接

 

在您的登录页面放置一个注册页面的链接会让事情变得更简单。 如果他们没有得到一个帐户，他们不应该但不得不去寻找一个注册页面。我们的研究证实 ： 18 ％的网站指向注册表格的链接放置在登录页面旁边（如YouTube,Reddit,Digg,露露,Metacafe等 ） 。

8. 上下文敏感导航

思考用户期望看到什么和在每一个特定的范围内他们需要什么是重要 。在任何地方，您不必显示相同的导航控件，因为用户不需要他们在各种情况下。

一个最好的上下文相关的控件的范例是微软Office 2007界面最近改变，该组预设的工具栏改为带控件。 每个标签上拥有不同控件来关联有关的特定活动，无论是图形编辑、校对或简单书面形式。Web应用程序也可以受益于这种上下文敏感的控件，因为这些控件帮助unclutter接口只显示用户需要的，而不是一切可用的 。

Lighthouse采用了熟悉的标签式导航菜单，但是，它也有第二级菜单下的标签。 这一级标签也只显示网站活跃部分相关的项目。

9.更加重视主要职能

不是所有的控制持有同样的重要性 。例如，在屏幕上创建一个新的项目，您可能有两个按钮： “创建”和“取消” 。 “创建”链接显得更为重要，因为这是用户大部分时间将要做的。只有很少用户需要取消操作。所以，如果它们肩并肩的放置在一块，您可能不想让这两个受到同样的重视。

Lighthouse ，“创建门票”按钮旁你可以看到“取消”链接以纯文本格式存在。“创建门票”按钮不仅命令更重要，而且也有较大的点击区域并且更容易点击。

现在让我们来看看“创建”链接，我们可以简单地使用不同的风格或类型的控件。 一些应用程序使用表单输入按钮来创建动作，并且取消动作只作为一种文字锚出现，这不仅可以创建更大的按钮点击区域 ，此外，它还可以帮助用户产生一个更好的视觉效果。

10. 嵌入式的视频

虽然图片和文字是进行交流和传授有关您的用户程序功能的一个伟大的方式，但是如果您有该刊物的资源，视频甚至可以成为更好的选择。在最近几年，影片已越来越受网站的欢迎。对于Web应用程序，一般影片作为一种screencast用于营销网站 ，以展示产品的功能 ，但是，这并非是使用视频的唯一的方式。

在GoodBarry的头版，功能视频screencast使产品更加突出。它还使用screencasts教人们如何开始使用应用程序

 

MailChimp教程视频帮助新用户如何使用管理面板。

一些Web应用程序内使用视频，本身是用来教用户如何使用某些功能。视频是一种可以迅速展示您的产品的很好方式，因为相比较超过一页的文字，它显得更容易 ，也更清楚，在这里观众可以清楚地看到该怎么做。

评论 (0) All

登陆 还没注册？