英文原文：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>        

        

        
        
      
        
it知识库：10个有用的网页应用程序界面技术，转载需保留来源！
        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。