Web前端经常使用的十种技术

Web前端应用十种经常使用技术，随着JS与XHTML的应用普及，愈来愈多的web界面应用技术出如今网站上，好比咱们常见的日历控件，搜索下拉框等，这些web界面应用技术大大的丰富了网站的表现形式，本文将为您精心推荐十种最多见的web界面应用技术。

Web应用程序的界面设计，其核心就是网页设计 ，但它的重点主要是在功能方面。要超越桌面应用程序， Web应用程序必须提供简单、直观和即时响应的用户界面，让他们的用户花更少的精力和时间去完成事情。

之前，咱们并无注意到web应用程序这个方式，可是如今是时候仔细看看一些实用的技术和设计解决方案，让Web应用更友好更漂亮。

一、界面元素的需求

在Web前端开发中，简单这个原则是很重要的。在任什么时候候，你在屏幕上显示越多的控制，您的用户将不得不花费更多的时间去搞清楚如何使用界面。当选择变少时，可用的功能变得更加明显更容易被发现。简化的界面虽然是不容易的，尤为是若是你不想限制应用程序的功能的时候。

当你点击 Kontain 搜索框的搜索连接时，会出现一个相似于下拉菜单的层。因此，若是您须要来缩小搜索范围，您能够选择菜单中你所须要的类型。这些选项的聚合简化了搜索框。

隐藏或者掩盖高级功能 是使事情更加简单的一种方法。找出最经常使用的功能，而且把剩下的藏起来。你能够用弹出式菜单和操做来作这件事，这在桌面软件中很常见。例如，若是您的搜索栏拥有高级过滤器，把它们放在尾部的一个特别的下拉菜单中。若是用户须要使用这些过滤器，他们只需几下点击即可以开启这些功能。决定该保留什么隐藏什么不是一个简单的任务，也会取决于重要性和操做时的频繁程度。

当你点击 CollabFinder 的搜索连接时你不须要打开不一样的页面，相反，搜索框的控制菜单下拉下来，容许你可以直接开始搜索。

二、专门操做

根据状况选择合适的界面控件 是很重要的。不一样状况下能够用不一样的方式处理，并且某些控件会比其余控件可以更好地完成他们的目标工做。

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

例如，你能够经过一个下拉列表来选择年月日，可是和日历选择器相比下拉列表不是很是高效的，在日历里你能够直接经过点击选择你想要的某一天。日历选择器也会让你更容易看到日期、周期和月份（特别是工做日和休息日），所以可以让你比用简单的下拉列表更快地作出更明智的选择 。

三、禁用按下按钮

在web应用程序的表单问题中有一个就是提交过程，很是简单的表单，若是你快速地点击两次或者更屡次“提交”按钮，这个表单会被屡次提交。这显示是个问题，由于它会重复建立相同的项目 。防止重复提交的不是很难，并且对于大多数Web应用程序来讲作到这一点是很是必要的。

它有两层维护：客户端和服务器端 。咱们不会经过服务器端维护是由于这将取决于您使用的编程语言和你的后端架构。基本上你应该作的就是在提交过程当中添加一个检测机制，去检查被提交的内容是否重复，而且是否须要阻止提交

在 Yammer 上，当你的新消息被提交以后，“更新”按钮将被禁止。

客户端则是简单得多。全部您须要作的就是在点击以后禁用“提交”按钮 。最简单的方法就是为“提交”按钮添加一段JavaScript，以下所示：

固然，咱们会建议您同时还对服务器端进行检查，以确保重复不会得到经过。

四、模拟窗口的阴影

在弹出菜单和窗口下的阴影不止是看起来很漂亮这么简单。它们帮助菜单或者窗口经过强调从背景中脱颖而出 。它们还经过周围暗色调区域来屏蔽掉背景内容的噪音。

这种技术来源于传统的桌面软件，帮助用户把他们的焦点放在出现的窗口上。因为大多数情景窗口是不容易从桌面程序中辨识出来，因此阴影帮助他们更接近于读者，由于感受上窗口彷佛是三维地浮在其余页面上。

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

五、空白状态告诉你要作什么

当你设计一个Web应用程序时，你不只须要经过样本数据去测试这个程序，并且最重要的是当什么内容都没有的状况下，你要确保它看起来不错并且是有帮助的 。

当在页面或者查询结果没有信息时，告诉你如何才能处理这些空白区域是一条颇有帮助的信息。例如，一个项目管理应用程序的网页可能会列出用户的项目，但若是没有项目，你能够提供一个建立项目的连接。即便已经有建立项目的按钮存在在页面上，但一点额外的帮助并不会有损失 。

Campaign Monitor 会在你开始创建一个邮件广告时指导你正确的方向。

这种技术实际上鼓励用户试用服务，并在注册以后直接使用这项服务。经过应用程序的单步指导用户可以帮助他/她去了解程序提供的优点以及是否有用。一样重要的是把最重要的操做呈现给用户而且只有这些而已——把全部功能都呈现出来并无意义。请记住，用户一般但愿获得一些或多或少提供给他们的具体构思，可是他们不想要直接跳到详细说明去——他们既没有时间也没有兴趣。

经过空白状态去激励用户和行为，能够大大减小“辍学”，而且帮助您的潜在客户，更好地了解该系统如何工做。

六、按钮的按下状态

许多Web应用程序有自定义的按钮样式。这些都是用自定义图片做为他们背景的锚点或输入按钮。默认输入按钮可能不适合在一些状况下，以及文字连接有时过于眇小。目前的挑战是，当你把你的连接弄得看上去像按钮时，它们的操做也应该和按钮同样——这包括当用户点击它们时会有被“按动”的效果 。

这不是一个纯粹的视觉调整。提供即时反馈给用户将使应用程序感受更有响应性，而且给用户带来更接近于桌面软件的的用户体验。

你能够经过CSS为按钮增长按下的效果。

Highrise 的按钮其实是在你点击的时候显示一个按下的效果，给用户一个很是温馨的反馈感受。

七、在登录页面提供注册的链接

一些没有注册你的应用程序的用户将不可避免地停在你的登陆页面上。他们想要使用你的应用程序，可是却不能马上找到注册页面。可能他们已经试过访问一个只提供给注册用户的特定页面。

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

在你的登录页面上放上注册的链接 会让一切容易不少。若是他们没有帐户，他们不该该去寻找注册页面。咱们研究证明：在注册页面，有18%的网站有登陆表单或者连接到登录页面的链接。

八、上下文关联导航

思考什么是用户指望看到的以及在每一个给与的情景 中他们须要什么是很重要的。你不须要在每一个地方显示一样的导航控件由于在用户可能不是在每一个环境中都须要它们。

上下文关联控件的最佳范例之一是最近在微软office 2007中的界面，在它的界面中默认的工具条被带装控件代替。每一个标签上有不一样控件相关的特定操做，不管是图形编辑，校对或者简单书面形式。web应用程序也能够受益于这种上下文关联的控件，由于这些控件经过只显示用户须要的内容来帮助整洁界面，并不是显示全部的内容 。

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

九、更加剧视主要功能

不是全部控件拥有相同的重要性 。例如，在屏幕上建立一个新项目，你能够有两个按钮：“建立”和“取消”。这个“建立”的连接更重要一些，由于是用户大部分时间会去用的操做。只有少数才会去取消。因此若是这些控件挨着排放，你可能不会想要给于相同的重视。

这个 Lighhouse 的“建立任务”按钮。你能够看到“取消”连接在旁边以纯文本格式。这个按钮不只具备更重要的操做并且会有较大的点击区域而且容易去点击。

为了让用户的重点转向“建立”连接，咱们能够简单地利用不一样的样式或者控件形式。一些应用程序的表单输入按钮用来做为建立动做，而且把取消操做做为一个文字链接。这样不只给与建立按钮更多的点击区域 ，并且也帮助那些在搜寻内容的用户得到更好的焦点目光 。

十、嵌入式视频

当图片和文字做为一种很大的方式去和你的用户沟通而且教育你的用户有关你程序的特色时，若是你有资源去投入，视频甚至能够成为更好的选择。视频在最近几年的web应用上已被愈来愈受欢迎。对于Web应用程序，视频一般做为展现产品特色的示范影片 被用于市场网站中。可是这不是使用视频的惟一方法。

GoodBarry 特色是在头版有示范视频去展现产品，它也经过利用示范影片去教育用户如何开始使用

一些Web应用程序使用视频嵌入在程序自己教导用户若是使用某些特定功能。视频是一种很是好的方式去快速展现你产品是被怎么使用的，由于它更容易描述超过一页文字的内容，也清楚得多，由于观众能够清楚地看到该怎么办。

一位好的Web前端开发工程师在知识体系上既要有广度，又要有深度，因此不少大公司即便出高薪也很难招聘到理想的前端开发工程师。那么如何系统的学习企业实用的web前端技术呢，为此创建了一个web前端的直播上课学习扣扣裙，【web前端前面数字是四八四，】【web前端中间的数字是七五七】，【web前端最后是七六零】，将数字链接起来就是了。真正想要学习的能够进入，打酱油的就不要浪费你们的时间了。如今说的重点不在于讲解技术，而是更侧重于对技巧的讲解。技术非黑即白，只有对和错，而技巧则见仁见智。