web前端应用十种技术

1.界面元素的需求
　　在Web前端开发中，简单的原则非常重要。任何时候，你在屏幕上显示的控制越多，你的用户就必须花更多的时间来了解如何使用界面。当选择较少时，可用的功能变得更明显，更容易被发现。简化界面并不容易，尤其是当你不想限制应用程序的功能时。

　　点击Kontain搜索框的搜索链接时，会出现类似下拉菜单的层。因此，如果需要缩小搜索范围，可以选择菜单中需要的类型。这些选项的聚合简化了搜索框。

　　隐藏或掩盖高级功能是使事情更简单的方法。找出最常用的功能，隐藏剩下的。你可以用弹出菜单和操作来做这件事，这在桌面软件中很常见。例如，如果你的搜索栏有一个高级过滤器，把它们放在尾部的特殊下拉菜单中。如果用户需要使用这些过滤器，他们只需点击几次就可以打开这些功能。决定隐藏什么不是一项简单的任务也取决于操作的重要性和频率。

　　当您点击Colabfinder的搜索链接时，您不需要打开不同的页面。相反，下拉搜索框的控制菜单，允许您直接开始搜索。

2.特殊操作
　　根据情况选择合适的界面控件非常重要。不同的情况下可以以不同的方式处理，有些控件可以比其他控件更好地完成目标工作。

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

　　例如，您可以通过下拉列表选择日期，但与日历选择器相比，下拉列表效率不是很高。在日历中，您可以直接点击选择您想要的一天。日历选择器也会让您更容易看到日期、周期和月份(特别是工作日和休息日)，因此您可以比使用简单的下拉列表更快地做出更明智的选择。

3.禁止按下按钮
　　在Web应用程序的表单问题之一是提交过程，这是一个非常简单的表单。如果您快速点击两次或两次以上的提交按钮，表单将多次提交。这表明这是一个问题，因为它会重复创建相同的项目。防止重复提交并不难，对于大多数网络应用来说，这是非常必要的。

　　它有两层维护：客户端和服务器端。我们不会通过服务器端进行维护，因为这将取决于您使用的编程语言和后端架构。基本上，您应该做的是在提交过程中添加一个检测机制，以检查提交的内容是否重复，是否需要阻止提交。

　　在Yammer上，当您的新消息提交时，更新按钮将被禁止。

　　客户端要简单得多。你所需要做的就是点击后禁止提交按钮。最简单的方法是为提交按钮添加JavaScript，如下所示:

　　当然，我们建议您同时检查服务器端，以确保重复失败。

4.模拟窗户的阴影
　　弹出菜单和窗口下的阴影不仅仅是看起来漂亮。它们帮助菜单或窗口通过强调从背景中脱颖而出。它们还通过周围的深色区域屏蔽背景内容的噪音。

　　这种技术来自传统的桌面软件，帮助用户专注于窗口。因为大多数场景窗口不容易从桌面程序中识别出来，阴影帮助他们更接近读者，因为他们觉得窗口似乎是在其他页面上立体浮动的。

　　Digg的登录窗口周围有一个厚厚的阴影来屏蔽网页噪音。

5.空白状态告诉你该做什么
　　当你设计一个Web应用程序时，你不仅需要通过样本数据来测试程序，最重要的是，当没有任何内容时，你应该确保它看起来很好，很有帮助。

　　当页面或查询结果没有信息时，告诉你如何处理这些空白区域是一个非常有用的信息。例如，项目管理应用程序的网页可能会列出用户的项目，但如果没有项目，您可以提供创建项目的链接。即使页面上已经有创建项目的按钮，一点额外的帮助也不会丢失。

　　当你开始建立邮件广告时，CampaignMonitor会指导你正确的方向。

　　这项技术实际上鼓励用户尝试服务，并在注册后直接使用。通过应用程序的单步指导，用户可以帮助他/她了解程序提供的优势以及它是否有用。同样重要的是向用户呈现最重要的操作，只有这些—呈现所有功能毫无意义。请记住，用户通常希望得到一些或多或少提供给他们的具体想法，但他们不想直接跳到详细说明——他们既没有时间也没有兴趣。

　　通过空白状态激励用户和行为，可以大大减少辍学，帮助潜在客户更好地了解系统如何工作。

6.按下按钮的状态
　　许多Web应用程序都有自定义的按钮样式。这些都是以自定义图片为背景的锚点或输入按钮。在某些情况下，默认输入按钮可能不适合，有时文本链接太小。目前的挑战是，当你让你的链接看起来像按钮时，它们的操作应该和按钮一样——这包括用户点击时按的效果。

　　这不是一个纯粹的视觉调整。提供即时反馈给用户会让应用感觉更有响应性，给用户带来更接近桌面软件的用户体验。

　　您可以通过CSS为按钮增加按下效果。

　　Highrise的按钮实际上显示了点击时按下的效果，给用户一种非常舒适的反馈感。

7.在登录页面提供注册链接
　　一些没有注册你的应用程序的用户将不可避免地停止在你的登录页面上。他们想使用你的应用程序，但他们不能立即找到注册页面。也许他们已经尝试访问一个只提供给注册用户的特定页面。

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

　　在您的登录页面上放置注册链接将使一切更容易。如果他们没有账户，他们就不应该找到注册页面。我们的研究证实，在注册页面上，18%的网站有登录表或链接到登录页面。

8.上下文关联导航
　　思考用户期望看到什么，以及他们在每个给予场景中需要什么是非常重要的。不需要在每个地方显示相同的导航控件，因为用户可能不需要它们在每个环境中。

　　上下文关联控件的最佳例子之一是最近微软office2007中的界面，其界面中默认的工具条被带有控件的工具条所取代。无论是图形编辑、校对还是简单的书面形式，每个标签编辑、校对还是简单的书面形式。Web应用程序也可以从上下文相关的控件中受益，因为它们只显示用户需要的内容，而不是显示所有内容。

　　Lighthouse提供熟悉的标签导航菜单，但标签正下方有二级菜单。这个级别只显示当前项目相关活动的部分。

9.更注重主要功能
　　并不是所有的控制器都有同样的重要性。例如，在屏幕上创建一个新项目时，您可以有两个按钮：创建和取消。这个创建链接更重要，因为它是用户大部分时间都会使用的操作。只有少数人会取消它。所以如果这些控制器被排放在旁边，你可能不想给予同样的关注。

　　这个Lighouse的创建任务按钮。您可以看到取消链接以纯文本格式附近。该按钮不仅操作更重要，而且点击面积大，点击方便。

　　为了让用户的焦点转向创建链接，我们可以简单地使用不同的风格或控制形式。一些应用程序的表单输入按钮用于创建动作，并将取消操作连接到文本中。这不仅给了创建按钮更多的点击区域，也帮助那些在搜索内容时获得更好的焦点。

10.嵌入式视频
　　当图片和文本以一种很大的方式与您的用户沟通，并教育您的用户关于您程序的特征时，如果您有资源投资，视频甚至可以成为更好的选择。近年来，视频在网络应用程序中越来越受欢迎。对于网络应用程序，视频通常被用作市场网站上展示产品特征的示范电影。但这并不是使用视频的唯一方法。

　　GoodBarry的特点是在头版有示范视频来展示产品，它还通过使用示范电影来教育用户如何开始使用。

　　一些Web应用程序使用视频嵌入程序本身，教用户如果使用某些特定的功能。视频是快速显示你的产品是如何使用的一个非常好的方法，因为它更容易描述超过一页的内容，楚，因为观众可以清楚地看到该怎么办。