半夜三更抱着电脑在床上写这篇文章，起因是我之前下载了很多网上的javascript弹出层类，几乎没有一个让我满意。要么就功能不完善，无法满足基本应用；要么就是设计过度，无法二次开发（连编写风格都困难）。 弹出层大多运用在交互比较频繁的网站中，如FaceBook，校内，开心，163Mail等，它取代了浏览器自带的警告提示和模态窗口，具有更好的易用性。它让web如桌面软件一样易用。

由于项目需要，我不得不把页面各种交互元素“封装”好，以便统一管理这些样式。这是其中一个选项卡圆角导航，兼容主流浏览器，高度宽度都能自适应。 优点 兼容：IE5.5\IE6\IE7\IE8\..,FireFox,Chrome,Opera,Safari。 可适应文字大小：当火狐等浏览器开启“仅缩放文本”，使用缩放文本功能，这个选项卡图形同样保持比例，照顾视力不好的用户。

最近设计了一款世界之窗浏览器3皮肤(已发布在官方论坛)： http://bbs.ioage.com/cn/thread-109576-1-1.html 浅谈理念上的理解： 火狐浏览器在用户体验上明显不及goolge的chrome，原因就输在“轻”上面。火狐的默认配色和布局设计非常单调沉闷，加上先天的启动延时，一直让人感觉他非常沉重。而google则相反，几乎没有一点多余的东西，整个设计感觉就像一张薄纸，轻快小巧！也就是说同样几种浏览器图标放在桌面，我会下意识的点击chrome，而不是火狐，因为长期使用已经让我有了潜意识。 设计感强的界面往往能够在第一时间吸引别人，但是使用时间一长就会发现样式很乏味，尤其设计过度会造成视觉疲劳，用户最终将回归到简约的样式，回到自己最朴素的视觉体验。 所以，我理解的“轻”即是：通过简约的设计，合理的组织交互元素，让人从心理上感觉到产品特有的轻快，更加舒适的与程序交互。 世界之窗程序本身就是很轻巧的，尤其它吸取了chrome的理念之后推出的3.0版更是如此。 浏览器虽然有很多功能，但是人们最常用的却只有个按钮，我在这款设计中重点表现了“前进、后退、标签卡、标签卡滑动条”这几个按钮。淡化不常用按钮的视觉地位，并且把这类按钮用一种视觉样式组织起来，让整个浏览器界面更显简约明朗。 此款皮肤取名叫“翠竹”，青青翠竹，如竹一样“青”巧！

网上有很多锚点平滑滚动的javascript脚本下载，但是很多脚本需要手工在XHTML上写入鼠标事件，更加别说支持链接到新页面的锚点了。而AnchorArt.js却可以做到一次引入自动给页面带锚点的链接添加平滑滚动效果，并且支持链接到新页面的锚点！AnchorArt.js（压缩版）仅仅只有2KB大小! AnchorArt.js by planeArt.cn 演示地址》 源文件下载》 关于链接到新页面的锚点平滑滚动的思路：

现在国内IE5.5几乎没有几家网站支持了（少数门户网站除外），甚至很多国外网站都逐渐放弃了对IE6和IE6更低浏览器的的支持。 对于一个前端页面制作者来说，我们应该尽可能的考虑到更多的用户与设备。我们没有权利拒绝用户使用IE6和更低的浏览器，但我们可以放弃这些用户更好的浏览体验，至少让这些用户能看到一个简洁的“裸奔”页面，而不是因为出现错位或者javascript错误干扰用户阅读。 如何让IE低版本的浏览器裸奔？ 很多人可能会想到使用IE专用的条件注释，但是条件注释并不被火狐等非IE浏览器支持，所以那些非IE的浏览器也跟着裸奔了！ 我采用一种新的注释套嵌的方法： <!–[if IE]><![if gte IE 6]><![endif]–> <!–显示火狐等非IE浏览器、IE6或之上的版本的css和javascript–> <!–[if IE]><![endif]><![endif]–> 原理： 条件注释分为两种形式 一、IE普通的条件注释，如： <!–[if lte IE 6]>[内容]<![endif]–> 这种形式的条件注释在非IE浏览器解析成普通注释，包裹的内容非IE浏览器不执行。 二、非标准注释的条件注释，如： <![if gte IE 6]>[内容]<![endif]> 这种形式的条件注释包裹的内容却能被IE6+和火狐等现代浏览器执行，而IE也能对其执行条件判断。 第二种条件注释其实已经达到我们需要的效果，但是这个却并非标准的HTML注释，不能通过W3C校验。为了防止以后出现问题我把这两种注释套嵌起来，于是就是文章开头所推荐的方法了。 关于条件判断释义： if lte：低于或等于 if：如果 if !：如果不是 if lt：如果低于 if gte：高于或等于 注意： 条件注释是HTML注释的形式存在，所以只能写在HTML文档里面而不能写在CSS或者JavaScript里面！ 作者的个人网站演示(可以使用IETester查看页面在IE5.5的效 果)：http://www.planeArt.cn 原创文章，转载请保留原始地址:http://www.planeart.cn/archives/227

可交互元素（如按钮、连接）在页面中既是最常见也是很重要的，应该重点表现它们。同样是相同功能的按钮，但是由于设计带来的点击率却大大的不同，而点击率却直接影响网站的PV(访问次数)，所以我们不能再忽视它了，那些重要的按钮不要偷懒，在图形上、在用户交互的视觉反馈上多做一点工作。 我们通过视觉上的信息告诉访问者这是可以点击的元素（貌似我说了废话），应该用视觉变化表现如下信息： 可交互元素在页面中的特殊性表达。合理的设计各个元素之间的其主次关系，如导航等。 通过交互产生不同的状态需要出现恰当的视觉反馈。如鼠标靠近出现视觉反馈、是连接还是选项卡（是否会刷新页面）、点击过后的变化等。 通过上面两点一延伸，页面上可交互元素更多的状态需要我们用心去设计，但是我们同时也会减弱那些页面装饰性图片的数量重要性，实际上我们的工作应该会变得更轻松而有趣起来！

很多时候长文本不能自动换行，文本经常把页面撑开，比如在文章中插入代码框：在IE下强制换行可以使用”word-wrap:break-word“，而火狐却不支持这个属性，很多人为了界面整洁直接使用了”overflow:hidden“隐藏了过长的文本，这是极其错误的，使得用户不能阅读与复制文本！试问：对于用户而言，究竟是内容重要，还是界面重要?所以做界面设计的不能太自恋啊…… 当然也有些朋友使用”overflow:auto“，文本过长的时候将自动出现滚动条，如果页面上出现很多滚动条那界面就惨不忍睹了。 怎么样才能两全其美呢?那就只让用户阅读的时候才出现滚动条把！ pre code { word-wrap:break-word;/*IE：强制文本换行*/ overflow:hidden;/*火狐：默认隐藏超出文本*/ } pre code:hover { overflow:auto;/*火狐：用户鼠标靠近时才出现滚动条*/ } 原创文章，转载请保留本文链接地址:http://www.planeart.cn/blog/?p=87