快速业务通道

10大实用web应用界面技术

作者 佚名技术 来源 CSS编程 浏览 发布时间 2012-05-26
务器端。我们不会通过服务器端维护是因为这将取决于您使用的编程语言和你的后端架构。基本上你应该做的就是在提交过程中添加一个检测机制,去检查被提交的内容是否重复,并且是否需要阻止提交。

\

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

客户端则是简单得多。所有您需要做的就是在点击之后禁用“提交”按钮。最简单的方法就是为“提交”按钮添加一段JavaScript,如下所示:

<input type=”submit” value=”Submit” onclick=”this.disabled=true” />

当然,我们会建议您同时还对服务器端进行检查,以确保重复不会获得通过。

4、模拟窗口的阴影

 


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

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

\

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

为了实现这一效果,设计师往往建立一个透明的容器与PNG图像作为背景,把内容放进容器中——在盒子各边加上等距的边框。另一种选择是使用一个拥有透明边框的背景图像并且通过绝对定位来控制盒子内容的位置。这正是Digg的做法——这是他们正在使用的图片(dialog.png) 。这是他们使用的代码和CSS样式:

(X)HTML:

<div id=”container”>
<div style=”display: block; top: 236px; opacity: 1;”>
<div>
<div >

</div>
</div>
</div>
</div>
CSS:

.dialog {
position: absolute;
left: 50%;
margin-left: -315px;
width: 630px;
z-index: 100001;

}http://www.jojobox.cn/blog/blogedit.asp?id=151
.dialog .body {
background: url(/img/dialog.png) 0 0; /* semi-transparent .png image */
padding: 40px 13px 10px 40px;
}

或者,你也可以使用基于javascript的lightbox特效库,或者通过使用之间我们介绍过的CSS3属性去模拟阴影,但是你必须意识到现在的IE浏览器将不会支持它。

\

Basecamp的项目切换窗口有一个大的轻阴影,帮助菜单区域脱颖而出。

5、空白状态告诉你要做什么

 


当你设计一个Web应用程序时,你不仅需要通过样本数据去测试这个程序,而且最重要的是当什么内容都没有的情况下,你要确保它看起来不错而且是有帮助的。

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

\

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

这种技术实际上鼓励用户试用服务,并在注册之后直接使用这项服务。通过应用程序的单步指导用户能够帮助他/她去了解程序提供的优势以及是否有用。同 样重要 的是把最重要的操作呈现给用户并且只有这些而已——把所有功能都呈现出来并没有意义。请记住,用户通常希望得到一些或多或少提供给他们的具体构思,但是他 们不想要直接跳到详细说明去——

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号