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

　　英文原文：10 Useful Web Application Interface Techniques

　　英文编辑：SmashingMagazine；翻译：Lucas Li，校对：Lucas Li

　　近年来，越来越多的桌面应用程序移植到互联网上面的。没有了平台限制和安装要求且作为一种服务模式的软件看起来很吸引人的。网络应用程序界面设计的核心是网页设计；但是，它的焦点主要集中在功能上面。为了和桌面程序竞争，网络应用程序必须提供简单，直观的以及响应快速的用户界面，这样才能减少用户完成事情的时间和精力。

　　过去我们没有用应有的方法来关注网络应用程序，现在该是仔细地研究一些有用的技术和设计方案，以便使网络应用程序更加友好和漂亮的。这篇文章阐述了第一部分我们在现代网络应用程序上面关于设计模式和有用的设计方案的广泛研究。下面你将看到我们收集到的10个有用的界面设计技术以及成功地将其应用到许多网络应用程序上。

　　请随时在评论中发表你的意见，方法以及代码解决方案。我们研究的第二部分将随即奉上：敬请期待。

　　1. 需要的界面元素

　　在用户界面设计中简洁是重要的。任何时候你在界面上所展示的控件越多，那么你的用户将要花更多的时间去了解怎么用你的界面。当有更少的选择时，可用的功能将变地更加明显和更易获取。然而简化一个界面是不容易，特别是如果你不想限制应用程序的功能。

　　当你在Kontain’s搜索输入框中点击搜索链接时，一个类似的下拉框出现了。因此，如果你需要控制搜索控件所占的界面空间，你可以使用下拉菜单来选择你所要寻找的内容类别。收起这些选择就可以简化搜索框。

　　使设计更加简化的方法之一是隐藏高级的功能控件。把最常使用的功能放置在你的界面上，其余的便可隐藏起来。你可以采取在桌面软件上非常常见的弹出框菜单和控件来达到这种效果。例如，你的搜索输入框有高级的过滤控件，那么可以在输入框尾部以特殊的下拉菜单方式将其隐藏。如果用户需要这些过滤控件，那么只需要一些点击便可使用。虽然决定哪些保留哪些隐藏可不是件简单的任务，但是可以根据每个控件的重要性和使用频率来进行判断。

　　当你在CollabFinder上点击搜索链接时，页面不会切换到新的页面。相反地，搜索框控件在当前页面下拉展开，直接开始你的搜索。

　　2. 特殊化的控件

　　对于在不同的情况下，选择正确的界面控件是非常重要的。不同的情况应该采取不同的方法进行处理，在设计界面任务时，采取特定的控件会显得更好。

　　Backpack为选择提醒日期提供了一个简洁的日历控件。
　　例如，你能通过使用下拉列表来选择某一天的具体的年月日日期。但是，和上图所示的特殊日历控件（Calendar pickers）相比，下拉框显得不是非常有效的，你不能直接点击所想要日期。相比于简单的下拉列表控件，Calendar pickers 也能帮助你更容易地看到天，周，月（特别是工作日和周末）以及允许你更加快速地做出一个通知决定。

　　MyBankTracker’s的滑动控件APY具有计算器功能，它能快速核算出不同项目的收益情况。

　　这方面另外一个好的案例是滑动控件。是的，你可以一直手动输入一些数字，但是对于一些特殊情况，滑动控件可以做的更好。你不但很容易的使用，只需点击和拖动，而且你可以了解到你的选择在最小值和最大值的有效范围内是否合适。

　　3. 不可点击的按钮

　　网络应用程序在由表单所引发的问题之一是提交流程。对于非常简单的表单，如果你非常快速的点击“提交”按钮两次或是更多次，表单将同样被提交两次或是多次。这显然是有问题的，因为这将产生许多重复的提交副本。阻止副本的提交并不是很难的，对于大部分的网络应用程序来说，这是理所应当的。

　　对于这个安全措施应从两个端口来进行验证设置：客户端和服务器端的。我们在这里将不会利用服务端器的安全措施，因为这个是基于你所使用的程序语言以及后台架构。你真正应该做地是在客户端进行一次验证，这保证了在表单提交阶段，任何正在提交的内容都不是副本，如果出现是副本的情况，将会阻止它。

　　在Yammer里，当你的新信息正在提交地时候，“上传”按钮将不可用。

　　客户端的设置将更加简化。你所需要做的事情是在“提交”按钮被点击的瞬间使该按钮不可用。最容易的方法是对“提交”按钮控件所属的代码行增加一段JavaScrip，其代码如下：

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

　　当然，我们也会建议你在服务器端进行验证，以确保副本不会被提交。

　　4. 阴影边角的模态对话框窗口

　　弹出框菜单和窗口周围的微量阴影并非华而不实的。它们通过加强周边尺寸来使菜单和窗口从背景当中凸显出来。它们利用阴影来暗化窗口周围的区域以达到降低窗口下面内容所引起的噪音。

　　在传统的桌面应用程序中，这一技术覆盖了底部的内容以帮助用户能集中注意力于出现的窗口。由于大部分的模态窗口不容易从主内容界面凸显出来，因此，阴影使它们离读者更为接近，因为窗口看起来像是三维的放置在主界面之上。

　　Digg’s的登录窗口的四边有比较宽厚的阴影区域来降低页面底部的信息噪音。
　　为了达到这种效果，设计师经常设计出一个拥有透明度的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-属性的微量阴影我们早前已经介绍过的，但是你需要注意的是IE浏览器不支持这些的。

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

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

　　当你在设计一个网络应用程序的时候，不仅用样本数据进行测试是重要的，而且确保在没有数据的时候看起来也是好的和有用的，显得同样重要。你应该设计提示语。
　　当一个页面没有信息时或是有疑问时，在界面上空的地方放置一句有帮助的信息提示来告诉用户怎么开始将是有益的。例如，一个项目管理应用程序的首页可能会列出用户的项目，但是如果没有项目呢？你应该提供一个创建项目页面的链接，额外的帮助是有益的。

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

　　这项技术鼓励用户实际地使用所提供的服务以及在注册后直接着手使用服务。通过应用程序的简单步骤来引导用户可以帮助他或是她理解应用程序所提供的优点是什么以及是否有用的。只为用户提供最重要的选择也是很重要的，提供众多的选择是不明智的。记住用户通常想获得为他们所提供的或多或少的具体想法，但是他们不想涉及太多的细节–他们对此即没有时间也不感兴趣的。
　　使用提示语来刺激用户和鼓励用户采取行动，对于减少用户中途退出网站的数量是非常有意义的，同时，帮助潜在的客户更好地理解系统是如何工作的。

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

　　6. 已按按钮提示

　　许多网络应用程序有自定义风格的按钮。这些锚或是输入按钮用自定义的图像作为背景的。默认的输入按钮可能在一些情况下是不合适地，文本链接有时候不明显地。挑战就在于，当链接看起来像按钮时，它们的行为就应该像按钮-当然这包括用户点击按钮后的“已按”状态，让用户清楚地知道按钮处于已点击状态。
　　这并不是纯粹地视觉设计。给予用户快速地信息反馈将会使应用程序得到更好地响应以及为用户带来的体验更加接近桌面应用程序。
　　你可以添加一个通过定义链接的激活伪类的CSS样式的按钮状态，比方说，如果你的锚点已经定义了一个名字为add_task_button的类名，那你就可以添加add_task_button:active来定义它的激活状态。

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

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

还未注册你的网络应用程序的用户将可在登录页面直接完成相应的注册。他们可能想试用你的应用程序，但是一时找不到注册页面的。可能他们试着获得一个只有注册用户才有的功能。

　　仍然没有一个Delicious的帐户吗？没有问题的；在Delocious登录页面提供了一个注册链接。

　　Goplan在登录页面有一个彩色的按钮指向注册页面的。
对这些用户来说，在登录页面放置一个注册链接将使事情更加简单。如果你仍然没有一个帐户，你也没有必要寻找一个注册页面。我们的研究表明：18%有登录表单或是登录表单的链接的旁边放置了注册链接（例如YouTube, Reddit, Digg, Lulu, Metacafe）。

　　8. 上下文相关的导航
　　考量用户在所给的上下文环境中期望看到的东西和所需要的东西是重要的。你不需要在每个地方展示相同的导航控件，因为用户确实不需要在每个上下文环境中看到它。
　　最好的上下文相关的控件案例之一是微软在Office 2007界面上的最新变化，默认的工具条设置变成了缎带状的控件。在其上的每个标签里都有不同的但是行为类似的控件，有编辑图像，校对，写作。网络应用程序同样能从上下文相关的控件中获益，因为这些控件可以通过只显示用户所需要的，来使界面简洁干净，而不是显示所有可用的。

　　Lighthouse有个相似的标签导航菜单；但是，系列标签下面有二级菜单。这个级别只是展示了和网页相关的动作行为。

　　9. 更多的强调关键功能

　　并不是所有的控件都一样重要的。例如，在页面上创建一个新的项目，可能会有两个按钮：“创建”和“取消”。由于“创建”功能是用户在大部分时间都要用到的，因此“创建”显得更为重要的。只有很少的情况下，用户会取消页面。因此，如果这些控件被放在一起，你可能不想给它们相同的强调。

　　上图是Lighthouse的“创建标签”按钮。你可以看到 “取消”链接以纯文本方式放在它的旁边。这不仅给了创建按钮更多地可点击区域，而且帮助用户在搜寻该按钮的过程中获得更好地视线焦点。

　　10. 嵌入视频

虽然图片和文字是一个传达和教你的应用程序功能给用户的好方法，但是如果你有资源制作成视频，那么视频资料将是一个更好的选择。最近几年，视频在网上已经广受欢迎。视频一般应用在市场性的网站上，是用于炫耀产品的视频秀。但是这不是使用视频的唯一方法。

　　GoodBarry在首页上放置了一个视频用于炫耀它的产品功能。在视频秀里面告诉了用户怎么样开始使用该产品。

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

　　一些网络应用程序在程序内使用视频本身来教导用户如何使用特定的功能。视频是一个快速告诉用户如何使用你的产品的极好方法，因为它让浏览者完全地了解到如何使用产品，所以它比起整页的纯文本更易消化，更清晰。

阅读本文英文版（英文编辑：SmashingMagazine；翻译：Lucas Li，校对：Lucas Li）

请随时在评论中发表你的意见，方法以及代码解决方案。我们研究的第二部分将随即奉上：敬请期待。

1.需要的界面元素

当你在CollabFinder上点击搜索链接时，页面不会切换到新的页面。相反地，搜索框控件在当前页面下拉展开，直接开始你的搜索。

2.特殊化的控件

图片[1]-10个有用的网页应用程序界面技术 - 千百度社区-千百度社区
Backpack为选择提醒日期提供了一个简洁的日历控件。
例如，你能通过使用下拉列表来选择某一天的具体的年月日日期。但是，和上图所示的特殊日历控件（Calendar pickers）相比，下拉框显得不是非常有效的，你不能直接点击所想要日期。相比于简单的下拉列表控件，Calendar pickers 也能帮助你更容易地看到天，周，月（特别是工作日和周末）以及允许你更加快速地做出一个通知决定。

MyBankTracker’s的滑动控件APY具有计算器功能，它能快速核算出不同项目的收益情况。

3.不可点击的按钮

网络应用程序在由表单所引发的问题之一是提交流程。对于非常简单的表单，如果你非常快速的点击“提交”按钮两次或是更多次，表单将同样被提交两次或是多次。这显然是有问题的，因为这将产生许多重复的提交副本。阻止副本的提交并不是很难的，对于大部分的网络应用程序来说，这是理所应当的。
对于这个安全措施应从两个端口来进行验证设置：客户端和服务器端的。我们在这里将不会利用服务端器的安全措施，因为这个是基于你所使用的程序语言以及后台架构。你真正应该做地是在客户端进行一次验证，这保证了在表单提交阶段，任何正在提交的内容都不是副本，如果出现是副本的情况，将会阻止它。

在Yammer里，当你的新信息正在提交地时候， “上传”按钮将不可用。
客户端的设置将更加简化。你所需要做地事情是在“提交”按钮被点击的瞬间使该按钮不可用。最容易的方法是对“提交”按钮控件所属的代码行增加一段 JavaScrip，其代码如下：

当然，我们也会建议你在服务器端进行验证，以确保副本不会被提交。

4.阴影边角的模态对话框窗口

弹出框菜单和窗口周围的微量阴影并非华而不实的。它们通过加强周边尺寸来使菜单和窗口从背景当中凸显出来。它们利用阴影来暗化窗口周围的区域以达到降低窗口下面内容所引起的噪音。
在传统的桌面应用程序中，这一技术覆盖了底部的内容以帮助用户能集中注意力于出现的窗口。由于大部分的模态窗口不容易从主内容界面凸显出来，因此，阴影使它们离读者更为接近，因为窗口看起来像是三维的放置在主界面之上。

Digg’s的登录窗口的四边有比较宽厚的阴影区域来降低页面底部的信息噪音。
为了达到这种效果，设计师经常设计出一个拥有透明度的PNG图像并作为背景的容器，在这容器里面放置内容-容器四边拥有等距离的内边距。另一个选择是使用一个带有透明边框的背景图像以及把内容放置在运用了绝对定位的盒子模型里面。这就是Digg所做的-这是他们所使用的图像（dialog.png）。这是他们所使用的标记语言和CSS样式：
（X）HTML:

        …

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浏览器不支持这些的。

千百度

1.本站内容仅供参考，不作为任何法律依据。用户在使用本站内容时，应自行判断其真实性、准确性和完整性，并承担相应风险。

2.本站部分内容来源于互联网，仅用于交流学习研究知识，若侵犯了您的合法权益，请及时邮件或站内私信与本站联系，我们将尽快予以处理。

3.本文采用知识共享署名4.0国际许可协议 [BY-NC-SA] 进行授权

4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，需在24个小时之内从您的电脑中彻底删除上述内容，否则后果均由用户承担责任；如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担，如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。

5.本站是非经营性个人站点，所有软件信息均来自网络，所有资源仅供学习参考研究目的，并不贩卖软件，不存在任何商业目的及用途

THE END

web前端