区别IE和Firefox

【辨识符号】：「\9」

【范例练习】：

#tip {

background:blue; /*Firefox 背景变蓝色*/

background:red \9; /*IE6、IE7、IE8背景变红色*/

}

【说明】：因为IE浏览器看得懂「\9」，但是非IE的浏览器一律看不懂，因此就可以用这个语法来区分IE和Firefox(非IE浏览器，像是Opera、Google Chrome 、Safari等)，因此以上CSS范例中，非IE浏览器是显示蓝色背景，IE系列浏览器是显示红色背景。

——————————–我是分隔线——————————–

区别IE6、IE7、IE8、Firefox

【辨识符号】：「\9」、「*」、「_」

【范例练习】：

#tip {

background:blue; /*Firefox 背景变蓝色*/

background:red \9; /*IE8 背景变红色*/

*background:black; /*IE7 背景变黑色*/

_background:orange; /*IE6 背景变橘色*/

}

【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。

——————————–我是分隔线——————————–

区别IE6、IE7、Firefox (方法1)

【辨识符号】：「*」、「_」

【范例练习】：

#tip {

background:blue; /*Firefox背景变蓝色*/

*background:black; /*IE7 背景变黑色*/

_background:orange; /*IE6 背景变橘色*/

}

【说明】：IE7和IE6可读「*」(米字号)，IE6又可以读「_」(底线)，但是IE7却无法读取「_」，至于Firefox(非IE浏览器)则完全无法辨识「*」和「_」，因此就可以透过这样的差异性来区分IE6、IE7、Firefox，

——————————–我是分隔线——————————–

区别IE6、IE7、Firefox (方法2)

【辨识符号】：「*」、「!important」

【范例练习】：

#tip {

background:blue; /*Firefox 背景变蓝色*/

*background:green !important; /*IE7 背景变绿色*/

*background:orange; /*IE6 背景变橘色*/

}

【说明】：IE7可以辨识「*」和「!important」，但是IE6只可以辨识「*」，却无法辨识「!important」，至于Firefox可以读取「!important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。

区别IE7、Firefox

【辨识符号】：「*」、「!important」

【范例练习】：

#tip {

background:blue; /*Firefox 背景变蓝色*/

*background:green !important; /*IE7 背景变绿色*/

}

【说明】：因为Firefox可以辨识「!important」但却无法辨识「*」，而IE7则可以同时看懂「*」、「!important」，因此可以两个辨识符号来区隔IE7和Firefox。

——————————–我是分隔线——————————–

区别IE6、IE7 (方法1)

【辨识符号】：「*」、「_」

【范例练习】：

#tip {

*background:black; /*IE7 背景变黑色*/

_background:orange; /*IE6 背景变橘色*/

}

【说明】：IE7和IE6都可以辨识「*」(米字号)，但IE6可以辨识「_」(底线)，IE7却无法辨识，透过IE7无法读取「_」的特性就能轻松区隔IE6和IE7之间的差异。

区别IE6、IE7 (方法2)

【辨识符号】：「!important」

【范例练习】：

#tip {

background:black !important; /*IE7 背景变黑色*/

background:orange; /*IE6 背景变橘色*/

}

【说明】：因为IE7可读取「!important;」但IE6却不行，而CSS的读取步骤是从上到下，因此IE6读取时因无法辨识「!important」而直接跳到下一行读取CSS，所以背景色会呈现橘色。

——————————–我是分隔线——————————–

区别IE6、Firefox

【辨识符号】：「_」

【范例练习】：

#tip {

background:black; /*Firefox 背景变黑色*/

_background:orange; /*IE6 背景变橘色*/

}

【说明】：因为IE6可以辨识「_」(底线)，但是Firefox却不行，因此可以透过这样的差异来区隔Firefox和IE6，有效达成CSS hack。

Via：http://sofree.cc/ie6-ie7-ie8-firefox-css-hack/

云主机在国外有很多用户了，国内也有空间商使用了云主机的概念，大智若鲁强烈建议不要选购国内某些挂羊头卖狗肉的“云主机”。

如果你想选购云主机的话，如何辨别空间商卖给你的到底是不是云主机呢？还是根本就是拿VPS忽悠你？

有办法的，把下面几条背下来，包准你不会上当。

请大声朗读以下内容：
1)如果标称是“网格”或“OGSA(开放网格服务架构)”…那么，它不是云。
2)如果需要你向空间商提供一份几十页的需求说明书…那么，它不是云。
3)如果你不能用自己的信用卡来购买…那么，它不是云。 （这条是针对国外空间商而言）
4)如果他们想卖给你硬件设备…那么，它不是云。
5)如果没有提供API…那么，它不是云。
6)如果需要你重新构架你的系统…那么，它不是云。
7)如果你不能在10分钟之间部署(provision)服务器…那么，它不是云。
8)如果你不能在10分钟之间撤销(deprovision)服务器…那么，它不是云。
9)如果你知道你所使用的机器的具体位置…那么，它不是云。
10)如果需要有一个咨询顾问来帮助你…那么，它不是云。
11)如果需要你事先准备好所需机器数目清单…那么，它不是云。
12)如果它只运行一种操作系统…那么，它不是云。
13)如果你不用把它连到你自己的机器上去…那么，它不是云。
14)如果需要你安装软件才能使用它…那么，它不是云。
15)如果你拥有所有这些硬件…那么，它不是云。

效果是点击网页任意部位都能跳转到指定网址，不属于弹窗，不会被拦截，单纯的弹窗用户体验太差。如果再修改一下加上时间控制，体验就更好了。

<script>
var gcn=gcn||{};
gcn.listen=function(a,e,b) {
  if(a.addEventListener) {
    a.addEventListener(e,b,false)
  }else if(a.attachEvent){
    a.attachEvent('on'+e,b)
  }
};
 
gcn.redirect=function() {
  window.location='http://www.google.com.hk/webhp?hl=zh-CN&sourceid=cnhp'
};
 
gcn.listen(document, 'click', gcn.redirect);
  </script>

只是Stylish虽然能够直接套用别人做好的样式（而且有庞大的样式资料库 ），让你随意替换Gmail、Facebook或各种网站的外观，但是当你想要针对某个网站进行手动版面调整时，Stylish要求用户必须懂得CSS语法才能进行样式的修改。那么那些对于CSS样式语法不熟悉的用户怎么办？

现在， 透过「 Stylebot 」这款Google Chrome扩展，我们可以用非常简单的所见即所得编辑器，通过图形方式直接调整网站的CSS样式。任何人都能够轻易的将某个网站调整成自己喜欢的外观。

下载Stylebot： http://stylebot.me/

在Google Chrome中安装Stylebot，访问任何一个网站，点击网址列右方新增的「CSS」连结，就可以开启侧边栏。

这时候你必须在网页中用绿色框框点选一个你想编辑的版面区块，才能开始进行细节修改动作。在所见即所得的CSS编辑列中，你可以调整字体、行距、字距、背景颜色、栏位样式等等， 而所有修改都直接利用按钮选项调整即可，并可于网页中即时看到修改结果。

点击Stylebot编辑列下方的〔Edit CSS〕按钮，可以获得你刚刚进行的CSS样式修改语法（也可以在这里直接编辑）。

这对于想要修改自己博客、网站版面的用户来说，是一个很好的辅助工具。

对于开发软件或网站的设计者来说，将自己的构想通过图片传达给其他人，彼此互相讨论或修改是很重要的。 今天介绍一个可以在线设计软件或网站框架的在线工具MockFlow.

MockFlow的操作介面相当简单、易用，如果你需要在没有网路连线的环境设计框架，MockFlow桌面版会是不错的选择。

MockFlow上已经内建许多设计会用到的组件及图标等等。 比较棒的是MockFlow也具有多人协作功能，能让团队间互相沟通、提供意见，只要分享一个网址就能够存取，非常方便。

如果你不确定MockFlow适不适合使用，网站提供一系列的范例，你可以看看通过MockFlow所绘制出来的框架图，包括软件、网站。

网址：http://www.mockflow.com

GTmetrix 可以协助你开发一个更快、更有效率的网站，全方位改善你的网站用户体验。 在GTmetrix首页也提到，网站若没有在4秒内读取出来，大多数的访客就会选择离开，甚至 Google也将网页载入速度作为网站排名的众多因素之一，唯有提升网站效能才能让你的网站访客更多、更爽。

透过GTmetrix可以轻松帮你测量网站载入速度，这项工具结合了 Page Speed 与 YSlow 工具，提供相当好的建议，指示你如何改善网页效能。

进入 GTmetrix 后，在上方输入要测试的网站网址，然后按下GO会开始检测，这需要一些时间来产生报告。

接着就会显示YSlow及Page Speed的评分，越高分越好（A级），YSlow的平均得分为70%，Page Speed为79% ，如果你的网站低于这两个指标，代表可能需要着手进行最佳化，才能让访客获得更好的速度及体验。

在下方会显示每个测定因素所获得的级分，依照重要性（PRIORITY）来排序，越上面表示越重要，也更需要尽快修正.

在点选每个测定因素后，会显示出更完整、详细的资料，来协助使用者判断及改善。 如果你不清楚这代表什么意思，可以点击最右方的”What does this mean?”来显示详细说明，若对于英文上有困难，可以直接丢进Google翻译里来取得中文翻译。

Timeline会显示出网页里每个元件载入、开启或存取的时间，很容易就能看出是那个元件拖慢了网页开启速度。

对了，如果你想将报告设定为不公开、或是储存报告、定时检查网页评分的话，可以免费注册GTmetrix 帐户，在首页的右下角就能找到注册连结。

网址: http://gtmetrix.com/

这几个图标都很有趣,看上图,都能认的出来吧?

第一套: 金正日图标和奥巴马图标

下载地址:http://speckyboy.specky.netdna-cdn.com/wp-content/uploads/2009/12/political_characters_png.zip

第二套:胡总的图标

下载地址:http://speckyboy.specky.netdna-cdn.com/wp-content/uploads/2010/01/political_characters_png_vol2.zip

注意了各位,为了本博客安全,请勿在回复中提到我国领~导人的名字,谢谢! 最近河~蟹的很厉害.怕”链接被重置”

为什么会有这个网站呢？ 最初的设计者Jonno Riekwel 认为许多人当下设计出的素材，可能不是最终定案的版本，纵使这些设计很漂亮，但却很难再有机会被使用，不过你可以选择将它们贡献给365psd，让其他人免费下载、使用，同时也赋予这些设计新的生命。

你可以在这里找到许多优秀的设计，而且不需要花钱就能够免费下载它们（将滑鼠移动过去就会出现”Download”）。 此外，你还可以使用搜寻、标签来查找喜爱的素材。

网址：http://365psd.com/

]]> http://www.lzpnb.com/archives/1121/feed 3 http://www.lzpnb.com/archives/1105 http://www.lzpnb.com/archives/1105#comments Sun, 11 Jul 2010 02:36:30 +0000 大智若鲁 http://www.lzpnb.com/archives/1105

UI 设计的魅力在于，你不仅需要适当的技巧，更要理解用户与程序的关系。一个有效的用户界面关注的是用户目标的实现，包括视觉元素与功能操作在内的所有东西都需要完整一致。为了实现这个目标，你需要问自己 10 个最基本的问题。

1. 你的 UI 是否高度一致？

用户来到你的站点，脑子里会保持着一种思维习惯，你的 UI 需要保持一致，以免用户的思维方向被打乱。比如，如果你的某个品目下的产品可以拖放到购物车，那你站点中所有产品都应该可以这样操作。将按钮放到不同页面相似的位置，使用相契合的配色，使用一致的语法和书写习惯，同时，让你的页面拥有一致的结构。

用户能自由掌控自己的操作吗？

你应当分析一下，自己的站点是否容易导航。用户应当可以自由掌控自己的浏览行为，确保他们能从某个地点跳出，能够毫无障碍地退出。那些在用户离开前弹出窗口的行为是 UI 易用性的一个大问题。

你知道谁是你的用户群吗？

要设计有效的 UI，必须对你的用户群有所了解，不同的用户阶层对不同的设计元素有不同的理解，17~25 岁年龄段的人，和 40~55 年龄断的人有不同的喜好。你的 UI 设计必须针对你的用户群进行设计。

你是否有足够的预防错误的措施？

应该尽可能检查程序中的错误和 BUG，虽然你可以弹出一个窗口告诉用户发生了什么，但为了更好的用户体验，最好减少这些东西。Beta 测试是消减错误的最好方法。

你是否首先将最重要的东西展示给用户？

将重点放在重要的内容上面，首先为用户展示最重要的内容，以便用户更好地理解你的内容。

你的设计是否简约？

很多站点的设计十分简约，简约设计可以增强 UI 的易用性，可以让用户不必关心那些无关的信息。你的 UI 应该是这样的，它的功能很强大，但设计很简约，拥挤的界面，不管功能多么强大，都会吓跑用户。

你是否使用了视觉提示？

如果你使用了 Ajax， Flash 一类的技术，当内容在加载的时候，应当提供视觉提示，应当始终让用户知道目前在做什么。

你的 UI 是否有操作提示？

你的用户是否靠自己研究或 FAQ 文档学习如何操作？你应当在 UI 现场提供简单的操作提示，比如，使用 jQuery 在你的各个 UI 元素上显示操作提示。

你的内容是否清晰？

确保你的文本准确，清晰，易懂。

你如何使用色彩？

色彩是 UI 的重要元素，不同的颜色代表不同的情绪，你对色彩的使用应当和站点以及主题相契合。还应注意，有的用户是色盲，你应当考虑到他们的感受。色彩的使用应该一致，一旦选定了某种配色，就应该在整个站点一致使用这种配色。

你的 UI 是否大象无形？

UI Engineering 曾经说过，”最好的设计不是用来看的，是用来体验的”。这意味着，你的 UI 应该让用户去体验，而不是放一些花哨的东西给用户看。UI 设计越简单，用户体验越好，不要滥用设计元素，不要使用拥挤的界面。

你的 UI 是否有良好的结构？

你的 UI 中，各个元素应当放在他们应当放的位置，总体结构应当清晰，一致，相互关联，那些不相关的东西应当单独放置。

本文国际来源：spyrestudios.com Diving Into The User Interface With Fundamental Questions （原文作者：Joel Reyes ）

网页设计者会发现有些漂亮的字体并不一定能在所有访客的电脑里正确显示，这是因为该字体有可能不存在于这些使用者的电脑里（比如微软雅黑），解决的方式之一是将字体文件上传到网页空间，在访客进入网页时自动下载并使用该字型来显示某段文字。但有些字型的容量并不小，也容易造成网页开启速度缓慢、流量增加等等问题。

而 Google Font Directory 就能解决这项问题，它将开源字型托管于 Google, 不但能节省你的流量，也可以让你轻松调用于个人或商业项目。

在点击其中的任何一个字型后，会出现该字型的相关资讯，包括设计者、API 参数名称、License 及档案大小，且会有该字型在各种尺寸下显示的范例、字集、描述等等。

点击 “Get the code” 后，会出现如何将该字形插入你的网页、及从CSS 调用的简易语法教学。这只是最基本的用法，更多操作说明可以参阅 WebFont Loader 文件。

目前 Google Font Directory 仍是以英文的开源字体为主，暂时没有中文的字形可以使用（但开源的中文字形应该也不多），期待哪天Google 字型目录能提供更多更丰富的开源字体。

网址：http://code.google.com/webfonts