元素层叠级别及z-index剖析
声明
定位元素：position属性值设置除默认值static以外的元素，包括relative，absolute，fixed。
平台：win/IE win/FF
z-index:
用来确定定位元素在垂直于显示屏方向（以下称为Z轴）上的层叠顺序
值： auto | 整数 | inherit
默认： auto
适用于： 定位元素
继承性： no
理解stacking context
每个box都归属于一个stacking context,它是元素在z轴方向上定位的参考。根元素形成 root stacking context，其他stacking context由定位元素设置z-index为非auto时产生。如#div1{position:relative;z-index:0;}即可使 id=div1的元素产生stacking context。stacking context和 containing block 并没有必然联系。
理解stack level
在一个stacking context中的每个box，都有一个stack level（即层叠级别，以下统一用stack level），它决定着在同一stacking context中每个box在z轴上的显示顺序。同一stacking context中，stack level值大的显示在上，stack level值小的显示在下，同一stack level的遵循后来居上的原则（back-to-front ）。不同stacking context中，元素显示顺序以父级的stacking context的stack level来决定显示的先后情况。于自身stack level无关。注意stack level和z-index并不是统一概念。（将在后文慢慢理解）
stack level规则
每个stacking context中可包含块级（block）元素、内联（行内inline）元素，还有设置float属性的元素、定位元素等等他们在同一父级 stacking context中的显示顺序是怎样的？即stack level是怎样的呢？比如一个块级元素和内联元素发生层叠的话谁会在上面呢？是不是谁在后面谁就在上面呢？
根据w3c关于stack level的介绍可以得出以下stack level规则
每个stacking context都包括以下stack level （后来居上）:
- 父级stacking context的背景、边界
- z-index值为负值的定位元素（值越小越在下）
- 文本流中非定位的、block块级子元素
- 文本流中非定位的、float浮动子元素
- 仿佛能产生stacking context的inline元素
否则，inline元素的stack level将在block元素之前。 - z-index：auto/0的定位元素
- z-index值为正的定位元素（值越大越在上）
以上stack level在浏览器执行情况:
firefox3.0下测试完全吻合，firefox2.0下稍有不同即：“z-index值为负值的定位元素”在“父级stacking context的背景、边界”之前。
ie6.0和7.0中：inline元素的stack level位于block元素之前，且“文本流中非定位的、float浮动子元素”（以下简称浮动元素）和“文本流中非定位的、block块级子元素”（以下简称block元素）处于同一级。
FF下测试
测试页面：demo01.html（请分别在FF3.0和FF2.0中打开）
代码说明：
由前所述，如果元素的stack level同级则后来居上；元素的stack level高，这无论代码在文档中位置如何都显示在上面，即使代码在最前面；如果元素的stack level低，无论代码位置如何都将显示在下面，即使代码在最后面。
我们就根据这一点，以“3.文本流中非定位的、block块级子元素”和“4.文本流中非定位的、float浮动子元素”为例，如果我把“float元素” 的代码写在“block元素”的前面，且实际显示为：“float元素”在“block元素”之上。即可证明：”float元素”的stack level级别较“block元素”高。因为如果同级,或者“block元素”的stack level高都应是“block元素”显示在上。
根据以上，根据标准中的顺序，把stack level高的元素代码写在前面，stack level低的代码写在后面，如果显示结果是：代码在前面的元素显示在上方 ，即证明上面的stack level规则。
测试结果：
在FF3.0中结果和标准顺序一致。FF2.0中“z-index值为负值的定位元素”在父级stacking context的背景下面。（注意ff2.0的这个特殊性）
IE下测试
测试页面：demo02.html (请在IE下浏览)
代码说明：
此代码也是根据上面的测试思想，但由于inline元素在ie中的特殊性，把inline的代码写在了后面，事实证明结论是正确的。对于“block元素”和“float元素”顺序大家可以交换顺序测试。
测试结论：
IE下（无论ie6.0或者ie7.0）“float元素”和“block元素”属同一stack level，而“inline元素”较其stack level低。
解释：
“float元素”，“z-index：auto的定位元素”仿佛产生了新的stacking context，但其真正能产生新的stacking context的后代任按其父级stacking context定位。（但IE中“z-index：auto的定位元素”
会拥有z-index值0，产生一个新的stacking context，并影响其子元素定位。这是IE一个BUG）
inline元素在FF中仿佛能产生新的stacking context，而在IE中则不能。
至此stack level规则内容已经完毕，现在应该能理解stack level和z-index的不同。stack level来决定这一个stacking context中各元素在z轴上的显示顺序，对于同一stack level的定位元素才由z-index进一步决定显示次序。
一些问题的解释
怿飞版主在《z-index在IE中的迷惑》一文中最后提到的问题：
演示地址：demo03.html
认为：
解惑：IE浏览器似乎给body元素默认了一个相对定位属性（position: relative）。
真是这样吗？
演示地址：demo04.html
分析：
box1显示在body的下方，根据上面的stack level规则，IE中，如果body默认了一个位置属性，即body是其父级stacking context，box1应显示在其上方，事实却不是这样。而且当我们给body加上position：relative以后，显示效果和stack level规则一致。所以body并没有默认位置属性。
那为什么负值的定位元素在IE和FF下显示不一致呢？
ie 中根据stack level规则： z-index为负的定位元素的stack level比父级stacking context（此处是root stacking context）高，显示在其上方。故box1在ie中能显示。ff3.0和标准一致，也能显示。大家可以试一下。
ff2.0 中由于那条特殊的stack level，即 z-index为负的定位元素的stack level比父级stacking context（此处是root stacking context）低，所以显示在root stacking context下方。故不能看见。
另外，上面的代码中加上opacity那条后，在ff2.0中即可显示了。这又是什么原因呢？
推测：在火狐中如果给元素设置opacity属性（1除外），即会产生新的stacking context。
上面加上opacity属性后在ff2.0中可显示box1在body下，ff3.0box1在body上，（可以根据上面的stack level规则自己分析）符合推测。
在w3c的说明中也证明这点
引用：
In future levels of CSS, other properties may
introduce stacking contexts, for example ‘opacity’
[CSS3COLOR].
总结：
在一个stacking context中元素的z-轴显示顺序，由元素所处的 stack level 决定。对于同一stack level的定位元素由z-index的大小进一步决定显示次序。
- ie中给元素设置position属性（static除外）可产生新的stacking context
- ff中给元素设置opacity属性（1除外）可产生新的stacking context
除此之外（也许设置其他属性也会产生新的stacking context，但还不知道）只有定位元素设置了z-index(auto除外)才会产生新的stacking context，子元素将按照新的stacking context，定位。
相关文章/讨论：
经典论坛讨论：
http://bbs.blueidea.com/thread-2872952-1-1.html
本文链接：http://www.blueidea.com/tech/web/2008/6140.asp
纽约100 11th大道公寓设计
这幢由法国设计师Jean Nouvel设计的位于纽约100 11th Avenue大厦现已破土动工，Jean Nouvel的100 11th Avenue公寓楼最显眼的就是它那马赛克般的（或者说蒙德里安画作）玻璃幕墙，这幢23层大楼将尽1700片玻璃具有不同的颜色以及安装角度，因而它在不同角度和不同时间具有不同的视觉效果。
转自[视觉中国]
LOGO设计流行趋势——叶子
在现代LOGO设计当中，叶子的形状被视做好的创意。或者说，是一种变革的想法。在网页中他们大多被用于轻量级的解决方案、干净的不抽像的设计。在实际当中，叶子也好、植物也好、以及自然界中随处可见的装饰品。它是一种随时会替换掉的标志。在现代的网站设计中，有很多网站可以更换主题，正因为如此，他们可能用叶子的标志，来表示绿色主题的LOGO。这只是一种可能性。
我们很高兴秀出一批关于叶子的标志设计。下面的标志作品不一定是高质量的设计作品，但是这是一种网页趋势。点击图片，会有链接进入该网站。你会发现一些教程告诉你如何制作叶子的标识。在帖图的最后，请注意观察 这些风格的图片通常是跟网站相关的标识。
你有什么想法？在这些广泛应用的叶子标志的Web2.0时代 这些叶子会消失呢还是到处都是呢!
浅色背景中的叶子
8. panic.com
10. sage.mozdev.org
11. kiva.org
12. hicksdesign.co.uk （这个logo已不再使用）
13. tumblr.com
14. betabug.com
15. getbasil.com
16. wiredtree.com
18. plankdesign.com
19. jaman.com
20. plasq.com
深色背景中的叶子
22. refresh-dc.org
23. acopic.co.uk
24. koral.com
25. randmstudio.com
26. cssbased.com
Photoshop制作叶子教程
http://photoshoplovr.com/web-20/leaf-logo/
制作“a leaf” logo 的视频教程
http://www.youtube.com/watch?v=trxufDo32K8
视觉设计:用理性说话
想像一下这样的场景：你参与了一个新产品的设计，并提交了一系列的视觉设计方案。在评审会上，每个人的眼光都转向坐在房间另一头的某位领导，“我不喜欢橙色。”这位领导突然抬起头来说，于是整个评审会突然就乱了章法，过了一会儿，你痛苦地发现大家正在热烈讨论的，居然是“界面中的方块太死板了，能不能用圆形代替？”这类本不应该讨论的问题。
如果你就是这样的一个视觉设计师，你一定也有过类似的痛苦经历。但是为什么一群看起来头脑清楚的成年人总是无法在视觉评审会上保持同样的理性呢？答案很简单，由于缺乏对视觉方案产生的前因后果的了解，大部分与会者只能凭着自己的主观直觉而不是客观分析来评估它们。
为什么这个过程中存在这样的主观性呢？视觉传达，是一门很微妙的语言，甚至超过了文字语言。即使在最简单的应用中也存在着语气和风格的丰富变化。就像有句话说的，一幅画胜过千言万语，而这正是问题的起源。千言万语──尤其当它们都是不对的时候──就有可能造成一场灾难。
视觉设计过程基本上由一系列决定构成，这些决定最后产生了一个策略，然后再由此定义出一个视觉系统，这个视觉系统通过提升细节和清晰的程度来最大化地满足这个策略。依赖主观判断来做出这些设计决定是灾难性的，同时也会导致这个被团队集体通过的设计方案难以得到用户的认同。
用研究和人物角色来强化视觉设计过程
正确的设计流程，能使你将主观性和猜测的影响降到最小。客观代替主观的第一步是从“研究”开始的。这通常由交互设计师主导一些研究，从用户行为方面来了解商业和用户的目标，视觉设计师可能不会被邀请去参加与相关人员的谈话和研究用户的课题。可无论如何，视觉设计师都适当地参与这些研究，将有助于成功地用这些知识来武装自己。
图一：视觉设计师需要较早地介于研究过程，以便于确定一个可靠的、有效的视觉策略。
与相关人员的沟通
作为视觉设计师，你在项目会议期间的主要任务是理解公司的传播目标、品牌策略，以及在整个竞争环境中的地位。同时，理解关键决策人对于这种产品的审美期望也是很必要的。最后，你还需要知道哪些成员将要参加你的视觉评审会。
理解公司目标和品牌策略，可以从市场或品牌传达部门去了解公司的历史和现状。你同时也需要去发掘公司的未来的目标和它在行业中应该得到的位置，这将为你提供一个设计视觉系统的主体方向。
阅读品牌指南、风格指南和近期的市场营销资料，对于建立一个更综合的市场目标和公司立场的概念是非常有用的（记住要弄清楚这些指南是否是最新和最相关的，因为你拿到手的很可能是一份过期，或是与现在的情况不一致的文档）。
与相关人员多沟通，比如产品或市场经理，去理解他们的观点、了解能帮助你成功地搭建起项目框架的因素。另一件需要做的事情是去理解应该呈现给用户的界面中最为关键的视觉概念──尤其是这里被Cooper称为experience keywords（本文后面会提到）的概念。在这个期间，你的目标是从各个相关部门收集关键词，以帮助你确定设计模式。
下面是你可以提出的一些问题：
• 如果这个界面是一个人的话，他或她看上去是什么样的？
• 当用户第一次看到这个产品时，你希望他有什么样的反应？
• 这个产品和竞争对手的产品有什么不同？
• 这个产品和哪个著名人物（或汽车、电影等等）最相像？最不像？为什么？
这些问题应该在沟通时及时提出，并鼓励你的谈话对象从情感方面讲述她对这个产品的一些观点。在探讨这些问题之前记得观察对方的反应，因为大部分人可能不太感兴趣，或者缺乏恰当词汇去描述这些观点。比如，如果一个负责架构设计的人只对数据库系统和产品的技术结构感兴趣的话，你去问他这个界面应该长成什么样就纯属浪费时间。
不久前，我们设计了一个医用设备，这个设备能帮助老年病人在自己的家中监测自己的健康状况。我们从相关人员处获悉，如果它和上门服务的护士有相似的特征时，用户更容易接受这个产品。于是我们根据了解到的知识，把这个设备的语气和风格设计成一种体贴、有责任心和可信任的感觉。
与相关人员沟通的最后一件事是确定团队中的哪个成员将参加视觉评审会。询问团队负责人将安排哪些人去参加这些会议。太多的人参加会议将很难管理（我们建议6个人或更少）。最好是几个关键的成员参加，比如项目经理和产品经理，以及来自市场或品牌团队的员工。如果有一位与用户有过密切接触的代表，比如一名销售或培训师来参加评审会则会更好。你应该邀请一位来自开发团队的员工，作为技术代表来评估这些设计方案的技术可行性。记住让团队的其余成员保持信息的同步。
研究用户
用户访谈提供了一次验证团队成员假设的机会，通过用户访谈你还可以了解更多关于用户和公司以及其产品之间的情感上的联系。另外，访谈也提供了一个造访用户所处环境的机会，可以直接了解当用户在和你的产品进行交互时，有可能遇到的挑战。这是一次非常有价值的实践，照片或任何第二手资料都无法代替。眼见为实。
交互设计师和视觉设计师在用户研究阶段所寻找的是不同的模式，理解这一点是非常重要的。举例来说，交互设计师想找出的是工作流程、心智模型、任务的优先级别和频率、障碍点等等，而这时候，视觉设计师应该寻找以下模式：
• 用户特征（比如，身体缺陷，尤其是视力）；
• 环境因素（灯光、用户和界面之间的距离、显示器上的保护膜）；
• 品牌中有可能引起用户共鸣的因素；
• 用户对体验的期望。
将影响你的设计的两个最常见的用户特征，是视觉和身体上的缺陷。比如，供糖尿病人（通常也有一些视力上的问题）使用的血糖仪，常常出现文字的尺寸太小、图标不够清晰等设计，这使得病人饱受其苦。如果你曾经看到一个老年用户在努力辨认网页上12个像素的Verdana文字的话，那么他很容易就会忽略在书本上出现的7个像素的文字。而针对行动困难的人士的产品，他们的身体缺陷对设计的影响就更大了，因为这意味着他们的产品上的按钮需要更大的距离和尺寸。
当设计用户界面时，用户的应用环境也是考虑因素之一。照明环境或产品的位置，都可能对界面的设计方案有着戏剧性的影响，尤其是尺寸和对比度。在一个外科手术室中，我们发现显示器离用户有六英尺远，同时还覆盖了一层塑料布。很明显我们需要设计一个字体很大对比度很高的界面。相反地，另一些界面，比如手机，是那种既可能在户内也可能在户外使用的设备，则需要一种在完全不同的照明环境中都可用的灵活设计。
通过一些人体测量学的资料的帮助（比如The Measure of Man and Woman: Human Factors in Design by Alvin R. Tilley, Henry Dreyfuss Associates），你可体验到独特的用户和环境因素，这有助于设计出一个适用于不同身材的产品。
就之前提到的家用医学设备而言，我们造访了一些用户的家庭，并做了访谈。我们发现病人的年纪一般都比较大，同时大部分都在客厅都放了一把舒服的椅子，它紧挨着用来放置类似设备的桌子。用户的身体都不太好，同时还有视力和听力的问题。他们通常把设备放在一伸胳膊就能够着的地方。我们的设计方案把这些环境因素都纳入了考虑之中，包括足够大和高对比度文字的视觉风格，以及可选择的声音提示。
除了理解用户和环境因素之外，花一些时间去讨论品牌和个性是很重要的。你应该询问用户，关于他们与你的公司或竞争对手的过往经历（如果你能分享这些信息的话），这样你可以评估这些信息和团队中的假设是否一致。你可以询问用户类似这样的问题：
• X公司与其它同类型的公司有什么不同？
• 你为什么觉得这个产品或公司很特殊？
• 你希望X公司有什么不同？
你也应该花一些时间理解界面应该具有的个性。在The Media Equation，Byron Reeves和Clifford Nass写了一篇文章，提出一个观点：“人们实际上是像对待真正的人类一样对待计算机的，所以需要用人类的个性特征来考虑计算机的回答。”就像与同事的沟通一样，你可以问用户一些类似这样的问题：
• 如果界面是一个人的话，它会像是什么样的人？
• 你会如何向朋友描述这个产品？
• 这个产品与竞争对手的产品有什么不一样？
再次强调，这些问题本身并不能提供给你所有的答案，但是它们使你能够得到一个与用户有关的、关于视觉设计方面的综合结论。不要仅仅问：“什么样的视觉方案更好一点？”因为与你的同事相比，用户更难用有效的词汇来描述他们在外观上的想法。相反地，你可以提供一些例子作为引导，比如：“如果我的电话是一个人的话，我希望它是有礼貌、聪明和友好的。”与用户进行视觉设计和品牌的交谈可能有一定的挑战性，但是它能提高你的视觉方案的成功率，因为你更多的是基于与用户有关的故事来设计，而更少依赖于项目中某些专家的意见。
以那个家用医学监视器的例子来讲，我们询问了病人关于“一个好护士应该是怎样的？”问题，并收集到一些像这样的特征：幽默、关注、善于聆听、落落大方、亲切、能干、自信、可靠，以及乐观等等。这些词汇在稍后的视觉设计流程中将用于建立设计策略。
形成视觉策略
一旦你完成了上面这些研究工作，你就可以分析这些结果并确定模式了。在这里，你将得到关于用户的信息、他们的环境、潜在的experience keywords以及品牌需求等。
首先，将你从研究中得到的结论应用到人物角色上，以确定所有情感或行为上的模式。交互设计师会专注于特定的人物角色的目标、背景和观点，而视觉设计师则应该注重于情感化，以及用户和环境的因素等方面。
在最近的一个“富消息应用”的项目中，我们基于用户研究创建了一个人物角色，她对于不认识的人发送的邮件具有很强的警惕性，因为她听说过很多关于计算机病毒的报道。这种情绪会直接影响到界面的设计，因为为了满足这类人物角色对于“安全感”的需求，界面必须在第一眼就让人感觉专业和可信任。
Experience keywords（体验关键字）
当人物角色被创建出来以后，列出从相关设计人员和用户访谈中得到的所有描述性的词汇或概念，并将其分组。这些词汇组合正是形成一套“体验关键字”的基础，将用于确定和管理视觉策略。我们最初的词汇组合看起来类似下面这张图：
图二：这些在研究期间收集的词汇帮助我们确定了“体验关键字”的核心，我们可以用来驱动整体的视觉策略。我们通常把这些词汇列表统一成3个或5个概念组合，然后最终发展成一套“体验关键字”。
“体验关键字”描述的是这个人物角色在看到界面时，“最初五秒钟”的情感反应。考虑这种最初反应有两个好处。首先，通过提供一种积极的第一印象和持续的情感体验，它可以强化公司的品牌。其次，对于用户是否接受这个产品和忍受某些不足，它具有重大的意义。研究表明，具有美感的设计被认为比很少有美感的设计更有用（这被称为美感可用性效应）。同时，当人们喜欢使用它们的时候，界面就会变成更可用（见Donald Norman在《Attractive Things Work Better》中的报告；或更好的方式，听听关于新上市的iPhone的新闻）。
保证这些“体验关键字”同样也适用于你的团队和一些关键成员。可信任和从视觉上描述的关键字有助于推动视觉策略的讨论。选择你将用于描述某个人的“体验关键字”；这样的方式能让你的观众容易接受。你最终确定的那套“体验关键字”看上去应该像下面这个图：
在上面这个例子中，有四个体验关键字：体贴、谦虚、有责任心和善于引导。其它的关键字都是在阐述它们的含义。用图片或其它形象的支持方式也同样有效。
一旦团队达成共识，体验关键字将为视觉设计指出一个明确的方向。“体贴”直接反映在界面上可能就成为柔和的色彩和形状，而“善于引导”则描述了一个对比度更强和线条更明确的界面。
现在你拥有了客观武器：人物角色、体验关键字、品牌需求等标准，这也意味着你得到了一个用于决定视觉设计的坚实基础。你现在可以提供一个更加深思熟虑的视觉设计方案了，它能得到更切合实际的反馈。现在，当产品经理抱怨橙色的时候，你就可以提醒他这个设计是基于某个人物角色的最佳体验关键字做出的，而这些关键字早就得到了大家的首肯，从而让他远离自己的主观臆断。
另外，拥有相关成员和用户访谈中的上下文信息，将有助于你更集中、更适宜地针对那些将使用你的产品的人确定最初的设计概念。
原作者：Nick Myers，Cooper公司的首席视觉设计师。
原文地址：Using research to end visual design debates
翻译：Angela
404错误页面的创意设计
404错误是指在服务器找不到指定的页面。404错误页面是可以自定义的。Smashing Magazine为我们挑选了40个有创意的404错误页面，可能吧在这个基础上进行筛选，选出了其中最有创意的14个放在这里让大家欣赏。
使用56K猫的读者慎入。
简洁明了。
这是可能吧最喜欢的一个。
相当简洁。
很鬼马。
要查看完整的40个创意404页面请 点击这里 查看原文。
也可在此文章后留下E-mail,24小时内发到你邮箱里.