web前端应用常用技术大盘点new

《web前端应用常用技术大盘点new》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、Web应用程序的界面设计，其核心就是网页设计，但它的重点主要是在功能方面。要超越桌面应用程序，Web应用程序必须提供简单、直观和即时响应的用户界面，让他们的用户花更少的精力和时间去完成事情。　　以前，我们并没有注意到Web应用程序这个方式，但是现在是时候仔细看看一些实用的技术和设计解决方案，让Web应用更友好更漂亮。　　1、界面元素的需求　　在Web前端开发中，简单这个原则是很重要的。在任何时候，你在屏幕上显示越多的控制，您的用户将不得不花费更多的时间去搞清楚如何使用界面。当选择变少时，可用的功能变得更加明显

2、更容易被发现。简化的界面虽然是不容易的，尤其是如果你不想限制应用程序的功能的时候。　　当你点击Kontain搜索框的搜索链接时，会出现一个类似于下拉菜单的层。所以，如果您需要来缩小搜索范围，您可以选择菜单中你所需要的类型。这些选项的聚合简化了搜索框。　　隐藏或者掩盖高级功能是使事情更加简单的一种方法。找出最常用的功能，并且把剩下的藏起来。你可以用弹出式菜单和操作来做这件事，这在桌面软件中很常见。例如，如果您的搜索栏拥有高级过滤器，把它们放在尾部的一个特别的下拉菜单中。如果用户需要使用这些过滤器，他们只需几下点

3、击便可以开启这些功能。决定该保留什么隐藏什么不是一个简单的任务，也会取决于重要性和操作时的频繁程度。　　当你点击CollabFinder的搜索链接时你不需要打开不同的页面，相反，搜索框的控制菜单下拉下来，允许你能够直接开始搜索。　　2、专门操作　　根据情况选择合适的界面控件是很重要的。不同情况下可以用不同的方式处理，而且某些控件会比其他控件能够更好地完成他们的目标工作。　　Backpack里有一个紧凑的日历和时间选择器选择提醒日期。　　例如，你可以通过一个下拉列表来选择年月日，但是和日历选择器相比下拉列表不是

4、非常高效的，在日历里你可以直接通过点击选择你想要的某一天。日历选择器也会让你更容易看到日期、周期和月份（特别是工作日和休息日），因此能够让你比用简单的下拉列表更快地做出更明智的选择。　　3、禁用按下按钮　　在Web应用程序的表单问题中有一个就是提交过程，非常简单的表单，如果你快速地点击两次或者更多次“提交”按钮，这个表单会被多次提交。这显示是个问题，因为它会重复创建相同的项目。防止重复提交的不是很难，而且对于大多数Web应用程序来说做到这一点是非常必要的。　　它有两层维护：客户端和服务器端。我们不会通过服务器

5、端维护是因为这将取决于您使用的编程语言和你的后端架构。基本上你应该做的就是在提交过程中添加一个检测机制，去检查被提交的内容是否重复，并且是否需要阻止提交。　　在Yammer上，当你的新消息被提交之后，“更新”按钮将被禁止。客户端则是简单得多。所有您需要做的就是在点击之后禁用“提交”按钮。最简单的方法就是为“提交”按钮添加一段JavaScript，如下所示：  　　当然，我们会建议您同时

6、还对服务器端进行检查，以确保重复不会获得通过。　　4、模拟窗口的阴影　　在弹出菜单和窗口下的阴影不止是看起来很漂亮这么简单。它们帮助菜单或者窗口通过强调从背景中脱颖而出。它们还通过周围暗色调区域来屏蔽掉背景内容的噪音。　　这种技术来源于传统的桌面软件，帮助用户把他们的焦点放在出现的窗口上。由于大多数情景窗口是不容易从桌面程序中辨识出来，所以阴影帮助他们更接近于读者，因为感觉上窗口似乎是三维地浮在其他页面上。Digg的登录窗口有一个厚厚的阴影围绕它来屏蔽网页噪音。　　5、空白状态告诉你要做什么　　当你设计一个W

7、eb应用程序时，你不仅需要通过样本数据去测试这个程序，而且最重要的是当什么内容都没有的情况下，你要确保它看起来不错而且是有帮助的。当在页面或者查询结果没有信息时，告诉你如何才能处理这些空白区域是一条很有帮助的信息。例如，一个项目管理应用程序的网页可能会列出用户的项目，但如果没有项目，你可以提供一个创建项目的链接。即使已经有创建项目的按钮存在在页面上，但一点额外的帮助并不会有损失。　　CampaignMonitor会在你开始建立一个邮件广告时指导你正确的方向。　　这种技术实际上鼓励用户试用服务，并在注册之后直接

8、使用这项服务。通过应用程序的单步指导用户能够帮助他/她去了解程序提供的优势以及是否有用。同样重要的是把最重要的操作呈现给用户并且只有这些而已——把所有功能都呈现出来并没有意义。请记住，用户通常希望得到一些或多或少提供给他们的具体构思，但是他们不想要直接跳到详细说明去——他们既没有时间也没有兴趣。　　通过空白状态去激励用户和行为，可以大大减少“辍学”，并且帮助您的潜在客户，更好地了解该系统如何工作。