《10大实用web应用界面技术》由会员分享，可在线阅读，更多相关《10大实用web应用界面技术（14页珍藏版）》请在金锄头文库上搜索。
1、10大实用web应用界面技术当今越来越多的应用程序迁移到web平台上。由于没有平台的限制和安装的要求，SAAS 的模式看起来非常有吸引力Web应用程序的界面设计，其核心就是网页设计，但它的重 点主要是在功能方面。要超越桌面应用程序，Web应用程序必须提供简单、直观和即时响 应的用户界面，让他们的用户花更少的精力和时间去完成事情。以前，我们并没有注意到web应用程序这个方式，但是现在是时候仔细看看一些实用的技 术和设计解决方案，让Web应用更友好更漂亮。本文主要介绍的是在现 代Web应用程 序中，我们对设计模式以及有效设计解决方案进行大量研究并得到结果的第一部分，您可以 在下面找到10个收集到的
2、实用界面设计技术以及在许多成功Web应用程序中得出的最佳 做法。你可以提出进一步的看法，第二部分会尽快出版。你也可以阅读以下相关文章： 5 Useful Coding Soluti ons For Desig ners and Developers 10 Useful Tech niq ues To Improve Your User In terface Desig ns 10 Pr in ciples Of Effective Design Five More Pr in ciple Of Effective Desig n Gett ing Creative With Tran spar
3、e ncy In Web Desig n1、界面元素的需求在用户界面设计中，简单这个原则是很重要的。在任何时候，你在屏幕上显示越多的控制, 您的用户将不得不花费更多的时间去搞清楚如何使用界面。当选择变少时，可用的功能变得 更加明显更容易被发现。简化的界面虽然是不容易的，尤其是如果你不想限制应用程序的功 能的时候。Home Entries Photos Videos AudioSearch：:Q Search)EverythingEntriestheeasies! op碍beautifulto blog QlVfdeoseos&audio当你点击Kontain搜索框的搜索链接时，会出现一个类似于
4、下拉菜单的层。所以，如果您需 要来缩小搜索范围，您可以选择菜单中你所需要的类型。这些选项的聚合简化了搜索框。隐藏或者掩盖高级功能是使事情更加简单的一种方法。找出最常用的功能，并且把剩下的 藏起来。你可以用弹出式菜单和操作来做这件事，这在桌面软件中很常见。例如，如果您的 搜索栏拥有高级过滤器，把它们放在尾部的一个特别的下拉菜单中。如果用户需要使用这 些过滤器，他们只需几下点击便可以开启这些功能。决定该保留什么隐藏什么不是一个简 单的任务，也会取决于重要性和操作时的频繁程度。当你点击CollabFinder的搜索链接时你不需要打开不同的页面，相反，搜索框的控制菜单 下拉下来，允许你能够直接开始搜索
5、。2、专门操作根据情况选择合适的界面控件是很重要的。不同情况下可以用不同的方式处理，而且某些控 件会比其他控件能够更好地完成他们的目标工作。Set a reminderWhen? I Ac a specific time. ； ,z 5et reminderi迹 95MTWTF52呂2930311234567n910111213141516171819202122232425262728293031124567Due:January8, 2-009at i T：i2iTT1Repeat this reminider? !. no T1Backpack里有一个紧凑的日历和时间选择器选择提醒日期。
6、例如，你可以通过一个下拉列表来选择年月日，但是和日历选择器相比下拉列表不是非常高 效的，在日历里你可以直接通过点击选择你想要的某一天。日历选择器也会让你更容易看到 日期、周期和月份（特别是工作日和休息日），因此能够让你比用简单的下拉列表更快地做 出更明智的选择。MyBan kTracker的APY计算器功能通过使用容易控制的滑块去快速尝试不同的推测结果。另一个很好的例子是滑块。是的，您可以随时手动输入一个数字，但某些情况下，滑块控件 做了更好的工作。不仅由于他们易于使用一只需单击并拖动一而且你也可以看清楚如 何在最小和最大的范围之间进行合适地选择。3、禁用按下按钮在web应用程序的表单问题中有
7、一个就是提交过程，非常简单的表单，如果你快速地点击 两次或者更多次“提交”按钮，这个表单会被多次提交。这显示是个问题，因为它会重复创建 相同的项目。防止重复提交的不是很难，而且对于大多数Web应用程序来说做到这一点是 非常必要的。它有两层维护：客户端和服务器端。我们不会通过服务器端维护是因为这将取决于您使用的 编程语言和你的后端架构。基本上你应该做的就是在提交过程中添加一个检测机制，去检查 被提交的内容是否重复，并且是否需要阻止提交。Share something with Usabilitypost:Attach FileDmitry Fadeyev: Hello world!reply5
8、tecontis 卸0 in Lfsabtfiryffast QiDmitry Fadeyev: Anoiher message.df) rfinrfi 3afi rn tfhilitvnfut in在Yammer上，当你的新消息被提交之后，“更新啦钮将被禁止。客户端则是简单得多。所有您需要做的就是在点击之后禁用“提交”按钮。最简单的方法就是 为“提交”按钮添加一段JavaScript，如下所示：vin put type=submit value=Submit on click=this.disabled=true /当然，我们会建议您同时还对服务器端进行检查，以确保重复不会获得通过。4、模拟
9、窗口的阴影在弹出菜单和窗口下的阴影不止是看起来很漂亮这么简单。它们帮助菜单或者窗口通过强调 从背景中脱颖而出。它们还通过周围暗色调区域来屏蔽掉背景内容的噪音。这种技术来源于传统的桌面软件，帮助用户把他们的焦点放在出现的窗口上。由于大多数情 景窗口是不容易从桌面程序中辨识出来，所以阴影帮助他们更接近于读者，因为感觉上窗口 似乎是三维地浮在其他页面上。Digg的登录窗口有一个厚厚的阴影围绕它来屏蔽网页噪音。为了实现这一效果，设计师往往建立一个透明的容器与PNG图像作为背景，把内容放进容 器中一在盒子各边加上等距的边框。另一种选择是使用一个拥有透明边框的背景图像并且 通过绝对定位来控制盒子内容的位置
10、。这正是Digg的做法一这是他们正在使用的图片(dialog.p ng)。这是他们使用的代码和CSS样式：(X)HTML:v/divv/divCSS:.dialog positi on: absolute;left: 50%;marg in-left: -315px;width: 630px;z-i ndex: 100001;http:/www.jojobox.c n/blog/blogedit.asp?id=151.dialog .body backgro und: url(/img/dialog.p ng) 0 0; /* semi-tra nspare nt .png image */p
11、add ing: 40px 13px 10px 40px;或者，你也可以使用基于javascript的lightbox特效库，或者通过使用之间我们介绍过的 CSS3属性去模拟阴影，但是你必须意识到现在的IE浏览器将不会支持它。Basecamp的项目切换窗口有一个大的轻阴影，帮助菜单区域脱颖而出。5、空白状态告诉你要做什么当你设计一个Web应用程序时，你不仅需要通过样本数据去测试这个程序，而且最重要的 是当什么内容都没有的情况下，你要确保它看起来不错而且是有帮助的。当在页面或者查询结果没有信息时，告诉你如何才能处理这些空白区域是一条很有帮助的信 息。例如，一个项目管理应用程序的网页可能会列出用户
12、的项目，但如果没有项目，你可以 提供一个创建项目的链接。即使已经有创建项目的按钮存在在页面上，但一点额外的帮助并 不会有损失。Welcome to Campaign MonitorYoure currently in the Manage Clients section of your account. To get you started, weve added Vitaly as the first client youll be sending campaigns for. You can add as many clients as you like.Once you start cr
13、eating and sending campaigns,this page will list all the activity across yourQ Create your first campaignaccount.Campaign Monitor会在你开始建立一个邮件广告时指导你正确的方向。这种技术实际上鼓励用户试用服务，并在注册之后直接使用这项服务。通过应用程序的单步 指导用户能够帮助他/她去了解程序提供的优势以及是否有用。同样重要的是把最重要的 操作呈现给用户并且只有这些而已一把所有功能都呈现出来并没有意义。请记住，用户通 常希望得到一些或多或少提供给他们的具体构思，但是他们不
14、想要直接跳到详细说明去 他们既没有时间也没有兴趣。通过空白状态去激励用户和行为，可以大大减少辍学”，并且帮助您的潜在客户，更好地了 解该系统如何工作。Wufoo的表单页面有很多，当什么都不存在时它会以友好的讯息邀请您创建一个新的表单。6、按钮的按下状态许多Web应用程序有自定义的按钮样式。这些都是用自定义图片作为他们背景的锚点或输 入按钮。默认输入按钮可能不适合在一些情况下，以及文字链接有时过于渺小。目前的挑战 是，当你把你的链接弄得看上去像按钮时，它们的操作也应该和按钮一样一一这包括当用户 点击它们时会有被“按动”的效果。这不是一个纯粹的视觉调整。提供即时反馈给用户将使应用程序感觉更有响应性，并且给用 户带来更接近于桌面软件的的用户体验。你可以通过CSS为按钮增加按下的效果。Highrise的按钮实际上是在你点击的时候显示一个按下的效果;用户一个非常舒适的反馈 感觉。7、在登陆页面提供注册的连接一些没有注册你的应用程序的用户将不可避免地停在你的登录页面上。他们想要使用你的应 用程序，但是却不能立刻找到注册页面。可能他们已经试过访问一个只提供给注册用户的特 定页面。Sign inYflu DMd a Detbddul Oiuni 惨Uwin悼力勺start 韓诟叩 boakrnafk-Ddiit 賊蓟 w 揖8unf? Cw呻 EdPftMWXdDelicious is
