香樟树的个人博客-xzscom.com，关于WEB前端开发技术，网页设计及制作,关于互联网产品设计，用户体验，交互设计

web页面入门

开发页面在很多人眼里很简单，大部分的人都会说不就是把效果图变成网页嘛，哪里需要那么多的时间，一点技术含量都没有。确实html页面没有js那么多复杂的交互，也不需要和后台数据打交道，但并不能代表就没有技术含量，也不是人人都能做好的。页面结构好坏直接会影响到css代码的质量，也会影响js和后台的开发，还会影响到以后功能的扩展和代码的优化。

前端页面的工作很琐碎，需要的不仅是基础知识的扎实，知识面的广泛，很重要的一点还要细心。下面我们就讲讲页面开发，开发中需要事项和常遇到的问题吧。

首先分析效果图，细节上是否和站内风格统一；设计的元素是否便于实现；元素是否能复用。有问题及时和产品人员进行沟通，避免开发过程中的频繁修改，影响工期和代码的质量。这些都是为更好的布局和精简css代码做的必要工作。

合理布局很重要，如同大厦的地基，大厦的高度再于地基是否牢固，合理的布局能有更好的扩展性。结构要尽量简洁，尽量减少结构中的嵌套，不要为了实现某种样式添加多余的空标签。

标签尽量语义化，能够让代码更加清晰。现在html5添加了更多的语义化标签，像header，section等，大胆的使用吧。虽然html5对于标签的相互嵌套体现了很好的包容性，即使标签没有闭合，或是inline元素中包含一堆block元素也不会有问题，但是为了养成良好的习惯还是尽量做到严格遵循xhtml的规范。

尽量少在页面写inline css,会使页面代码臃肿，不便于维护，有悖于样式和结构相分离的初衷。

页面中推荐的两种注释：

<%!–jsp注释,不会输出,推荐使用–%>

另一个总和前端页面开发打交道的就是图片。图片分为两种，一种是cssimage引用，另一种纯Image的页面引用。

背景图是通过样式在页面上输出，会在页面中产生请求，延长页面的渲染时间，为了解决这个问题，可以把类似的图片进行合并，减少请求数。在进行合图的时候，尽量把颜色相近的图标放到一起，可以减少图片的大小。

页面中直接引用的图片尽可能少的缩放，非常影响页面的渲染速度；尽可能少的使用前端技术控制图像显示大小，对用户不可见的部分就是浪费带宽，浪费钱，页面的渲染速度也肯定会受到影响，影响用户体验；在知道图片宽高的情况下尽量在img中加上宽高，减少页面reflow造成的速度损耗。

静态图片一定要小，建议存成png8格式，在不影响图片的显示质量下，可以选择128色或是更低的颜色输出图片。当然有的色彩比较丰富的图片，存成jpg格式的更小，难道你会非选png的吗？存储完后图片还能用一些压缩工具进行无损压缩（如：PNGGauntlet）。

对于图片来说小就是原则，为什么呢，给你算个帐，节约10K看不出什么，100个用户是1000K，10000个是100000K,那一亿个用户呢？全是白花花的银子啊！

图片有几点需要注意：
1、我们在使用背景图做图标的时候通常会在页面加一个钩子——img标签，img标签中的src中一定要写上存在的图片链接，人人网通常使用的是一像素的图片代替（http://a.xnimg.cn/a.gif）。如果你忽略了这个地址，页面上会有一个404的请求，在ie6下直接显示一个叉。
2、如果你的工程已经上线，我们站内对静态文件会有一个缓存机制。在开发过程中，经常会遇到修改图片的情况，如果你修改后的图片不更改文件名或是在样式中更改引用该图片的版本号，对于用户而言，他们仍然看不到修改后的图片。所以，一定要记得修改文件名。
3、避免过小的背景图平铺。
4、尽量将图片上的文字提取出来用代码实现，便于图片的复用和日后文案的修改；

css主要说一下注意事项。
1、class命名建议以功能而不是外观命名，不建议使用大小，避免起容易冲突的名字，防止样式被覆盖。
2、CSS后代选择器性能：.a{} > .b .a{}，查找匹配耗费cpu,代码复杂，优先级高，修改不方便；
3、编码时尽可能使用缩写，如padding：top right bottom left;border-width:1px 0;border-color:#CEE1EE;color:#F05;
4、使用CSS display:none隐藏的元素不会被搜索网站检索，会影响到网站的SEO，可以使用text-indent:-9999em;来达到同样效果。
5、减少overflow清除浮动的使用，避免使用无意义的空标签清除浮动，通常站内使用clearfix来清除浮动。
6、border:none;替换border:0;的写法；
7、使用css3的属性来代替阴影或是圆角的图片；

浏览器的兼容问题是页面开发的永衡话题。结构的合理和简洁在很大程度上可以减少兼容性的bug,但是ie的特立独行又不可避免有一些兼容性问题。
IE6、IE7、Firefox之间的兼容写法：
写法一：
IE都能识别*;标准浏览器(如FF)不能识别*；
同一类class下的CSS hack可写为：
.classname{
background-color:#333;/*三者皆可*/
*background-color:#666; /*IE*/
_background-color:#999; /*仅IE6及IE6以下*/
}
一般三者的书写顺序为：FF、IE7、IE6.
写法二：
*+html 与 *html 是IE特有的标签, Firefox 暂不支持。
.classname{background-color:#333;}
*html .classname{background-color:#666;}/*仅IE6*/
*+html .classname{background-color:#555;}/*仅IE7*/
常见的css bug这里就不说了，稍后会在wiki里总结一个列表供大家查阅和参考。

对于样式和图片的引用a.xnimg.cn,s.xnimg.cn,xnimg.cn。这三种的区别是a.是在其他地方的域，s.是在北京本地的域，xnimg.cn是曾经的域，通常现在使用a.xnimg.cn,除非非常重要的静态文件才使用s.xnimg.cn。

在开发过程中，我们应该对bug出现有预见性，特别是常见的bug（QA经常提的bug比如连续字符串没有换行，鼠标在没有变成手型…）要提前做出处理。要考虑各种极端数据和不同大小图片在页面中的显示情况。对于代码进行合理的规划，减少冗余，可以简单写下注释，便于以后修改。

再来说一下快速查bug和解决bug的一些个人见解吧。
首先要分辨bug的类型，有的bug不一定是页面的问题。是否是页面套错了某个标签没有闭合，是否需要js修改或是后台技术处理。
查bug，工具是必不可少的，firebug,ie的IEDevToolBar,chrome自带调试工具都能进行调试和修改；使用工具能很快定位bug的位置和类型，作出修改。
经验的积累也是很重要的。有时候你使用了所有的方法解决但问题仍然存在，需要看看DOCTYPE是否在HTML顶部，是否完整，推荐；是否有多余的空格或是编码格式是否正确，
比如ie解析的空格间距不太一样，有时候会导致意想不到的bug。
还有一种方式是逐步删代码方式，看究竟是那个部分是有问题的。

解决bug常用的几个方法：
有人说zoom:1;是解决ie6的兼容问题的万精油。可以用，但是不易多用，这个属性可能会存在一些潜在的问题，至于是什么问题，大家可以google一下。
position:relative;往往和overflow:hidden;搭配使用能解决ie下滚动图片侧漏问题哦。

最后要说的是优化，一定要时时刻刻想着优化自己的代码，给用户带来最好的体验。永远记住这句话【HTML结构的简化>css代码结构的简化】

源文：http://fed.renren.com/archives/373

互联网用户常见心理特征

从网站到移动客户端应用 – 随”机”应变的用户体验设计

平日的工作忙碌了些许，疲劳因素让每晚散碎的时间显得更加吃紧；赶上这样稍微有点篇幅的文章，做起来就有些迟缓了，哼哼唧唧的翻译了将近一周。

话说，又是以移动应用为主线的文章，这是闹哪样呢。但也不至于和本小博客的主旨相悖；网站产品移动化，设计思路移动化…在移动互联网汹涌的大潮面前，这是合情合理的趋势，也是我们在用户体验设计相关的日常工作中越来越多需要面对和学习的。

如果你一直以来从事着相对传统的交互、视觉等方面的Web设计工作，而如今开始打算扩展视野、提升技能、随“机”应变，做一名移动互联网的弄潮儿…那么本文很适合你阅读。相关领域中的几位牛人会在接下来的时间里带给我们一些很实在的经验之谈。全文大致分为三个主题：

• Web设计师需要学习哪些知识和技能，才能进入移动应用的设计和开发领域？
• 从设计的角度讲，移动客户端应用与传统网站页面之间的主要区别在哪里？
• 怎样提升移动客户端应用的用户体验？设计师需要特别注意哪些？

开始进入正题。现如今，到处都有人在谈论移动应用方面的话题，从视觉外观到交互体验，这个那个的不亦乐乎。实际的统计数字也是蛮惊人的。最近，一份来自Flurry的研究报告显示，用户(美国地区)每天使用移动应用的时间，平均下来是81分钟，已经超过了平均74分钟的上网时间。

在这个世道里，身为用户体验设计相关从业人员的你，无论一直以来的主攻方向是交互、视觉还是前端，也许现在都已经开始琢磨着探索移动应用的相关领域了。

本文中，我们将从三个主要问题入手，与几位业内专家进行探讨，看看他们在“转型”方面有哪些看法和建议。

Web设计师需要学习哪些知识和技能，才能进入移动应用的设计和开发领域？

Josh Clark (设计师、开发人员，著有《触动人心 – 设计优秀的iPhone应用》一书，译者老包)

说到正经八本的设计技术能力，在入门阶段其实没太多新东西需要学。我们完全可以使用已经轻车熟路的HTML、CSS和 JavaScript创建出用户界面非常优秀的客户端应用。别误会，我不是在谈论Web App形式(什么是Web App？请参考我们之前关于网站移动化方法的文章)，我是指所谓的“混合型应用(hybrid apps)”，这是一种将基于HTML等前端技术实现的用户界面搭载在原生客户端上的方式，相当于为Web App穿上了原生客户端的外衣，并放到App Store当中。对于希望转型的传统Web设计和开发人员，这种方式是个不错的起点。

关于“混合型应用”，Jonathan Stark写了两本很棒的书，分别是《构建iPhone企业级应用—基于HTML, CSS 和JavaScript》以及《使用HTML、CSS和JavaScript开发Android程序》，书中展示了怎样使用开源框架PhoneGap创建这种混合形式的客户端应用。

作为入门是不错，但混合型应用在太多方面无法与原生客户端应用相提并论。如果你想打造在视觉及动画效果等方面都更加原汁原味的、特别是需要发挥设备硬件本身各种功能的应用的话，原生客户端应用仍然是不二之选。这就意味着你需要学习使用面向对象C语言(Objective-C)去写iOS应用，或是使用JAVA来打造Android版本。这些都是实实在在的编程语言，对于我们这样的Web设计相关人员来说，学习的难度会骤增；通常，我们可以与经验丰富的开发人员搭档，由他们将设计思路和方案通过代码实现出来。

即使这样，我们也无需扔掉HTML、CSS、JavaScript或是相关的Web App前端开发框架——这些工具可以帮助我们在开发原生应用的过程中创建快速原型——无论视觉还是交互方面都相当高保真的快速原型。

热爱生命

我不去想是否能够成功

既然选择了远方

便只顾风雨兼程

我不去想能否赢得爱情

既然钟情于玫瑰

就勇敢地吐露真诚

我不去想身后会不会袭来寒风冷雨

既然目标是地平线

留给世界的只能是背影

我不去想未来是平坦还是泥泞

只要热爱生命

一切，都在意料之中

《热爱生命》——汪国真

CSS z-index 属性的使用方法和层级树的概念

CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index 层级树的概念.

这个星期我们团队做了一次内部的技术分享, 南瓜小米粥为我们分享了他对 CSS z-index 的理解和引入层级树这个概念. 这个分享的现场效果很好, 所以我也将 z-index 和层级树话题搬到博客来谈一谈.

本文谈及多个影响节点显示层级的规则, 其中用到的所有例子全部罗列在《position 属性和 z-index 属性对页面节点层级影响的例子》中.

目录

• 顺序规则
• 定位规则
• 参与规则
• 默认值规则
• 从父规则
• 层级树规则
• 参与规则 2
• 总结

顺序规则

如果不对节点设定 position 属性, 位于文档流后面的节点会遮盖前面的节点.

<div id="a">A</div>
<div id="b">B</div>

定位规则

如果将 position 设为 static, 位于文档流后面的节点依然会遮盖前面的节点浮动, 所以 position:static 不会影响节点的遮盖关系.

<div id="a" style="position:static;">A</div>
<div id="b">B</div>

如果将 position 设为 relative (相对定位), absolute (绝对定位) 或者 fixed (固定定位), 这样的节点会覆盖没有设置 position 属性或者属性值为 static 的节点, 说明前者比后者的默认层级高.

<div id="a" style="position:relative;">A</div>
<div id="b">B</div>

在没有 z-index 属性干扰的情况下, 根据这顺序规则和定位规则, 我们可以做出更加复杂的结构. 这里我们对 A 和 B 都不设定 position, 但对 A 的子节点 A-1 设定 position:relative. 根据顺序规则, B 会覆盖 A, 又根据定位规则 A’ 会覆盖 B.

提高 web 应用性能之 CSS 性能调优

简介： 随着 Web 2.0 应用越来越流行，Web 的 CSS 样式在 Web 2.0 应用也变得越来越重要，好的 CSS 样式不仅能美化 Web 2.0 应用，也能优化用户的体验。但是，大多数 Web 开发工程师很少关注 CSS 样式，这也导致项目中经常出现杂乱，不规范的 CSS 代码，使得维护起来越来越麻烦。而更为重要的一点是，这些不规范的 CSS 会导致很多性能的问题。这些问题在开发大型的，重量级的 Web 2.0 应用中表现的尤为明显。所以，在开发 Web 2.0 应用中写一套规范的高性能的 CSS 代码是十分重要的。可以通过如 CSS 的缩写（short hand properties），CSS 选择器（selectors）以及 CSS 的继承机制等等方面来调整 Web 应用的性能，这篇文章将着力于研究 CSS 性能调优的相关技术。

简介

Web 开发中经常会遇到性能的问题，尤其是 Web 2.0 的应用。CSS 代码是控制页面显示样式与效果的最直接“工具”，但是在性能调优时他们通常被 Web 开发工程师所忽略，而事实上不规范的 CSS 会对页面渲染的效率有严重影响，尤其是对于结构复杂的 Web 2.0 页面，这种影响更是不可磨灭。所以，写出规范的、高性能的 CSS 代码会极大的提高应用程序的效率。本文主要来探讨一下如何优化，以及从哪些方面优化应用程序的 CSS 代码，从而最大限度的提高 Web 应用的性能。

CSS 性能调优

CSS 代码的分析与渲染都是由浏览器来完成的，所以，了解浏览器的 CSS 工作机制对我们的优化有至关重要的作用。这篇文章我们主要从如下几个方面入手来介绍一下 CSS 的性能优化：

1. Style 标签的相关调优
2. 特殊的 CSS 样式使用方式
3. CSS 缩写
4. CSS 的声明
5. CSS 选择器

把 Stylesheets 放在 HTML 页面头部：

浏览器在所有的 stylesheets 加载完成之后，才会开始渲染整个页面，在此之前，浏览器不会渲染页面里的任何内容，页面会一直呈现空白。这也是为什么要把 stylesheet 放在头部的原因。如果放在 HTML 页面底部，页面渲染就不仅仅是在等待 stylesheet 的加载，还要等待 html 内容加载完成，这样一来，用户看到页面的时间会更晚。

对于 @import 和 <link> 两种加载外部 CSS 文件的方式：@import 就相当于是把 <link> 标签放在页面的底部，所以从优化性能的角度看，应该尽量避免使用 @import 命令

避免使用 CSS Expressions：

参考下述代码：
清单 1. CSS Expression 案例

 Background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" )

Expression 只有 IE 支持，而且他的执行比大多数人想象的要频繁的多。不仅页面渲染和改变大小 (resize) 时会执行，页面滚动 (scroll) 时也会执行，甚至连鼠标在页面上滑动时都会执行。在 expression 里面加上一个计数器就会知道，expression 的执行上相当频繁的。鼠标的滚动很容易就会使 expression 的执行次数超过 10000。

避免使用 Filter：

IE 特有的 AlphaImageLoader filter 是为了解决 IE6 及以前版本不支持半透明的 PNG 图片而存在的。但是浏览器在下载 filter 里面的图片时会“冻结”浏览器，停止渲染页面。同时 filter 也会增大内存消耗。最不能忍受的是 filter 样式在每个页面元素（使用到该 filter 样式）渲染时都会被浏览器分析一次，而不是像一般的背景图片渲染模式：使用过该背景图片的所有元素都是被浏览器一次性渲染的。

针对这种情况，最好的解决办法就是使用 PNG8。

CSS 缩写：

CSS 缩写可以让你用极少的代码定义一系列样式属性，这种做法可以极大程度的缩减代码量以达到提高性能的目的。
清单 2. Colour 缩写

 #000000     ------>>     #000
 #336699     ------>>     #369

关于颜色，重复的属性值可以省略。
清单 3. 各种缩写方式

 Margin-top: 2px;
 Margin-right: 5px;
 Margin-bottom: 2em;
 Margin-left: 15px;     ----->>     Margin: 2px 5px 2em 15px; 

 Border-width: 1px;
 Border-style: solid;
 Border-color: #000     ----->>     border: 1px solid #000 

 Font-style: italic;
 Font-variant: small-caps;
 Font-weight: bold;
 Font-size: 1em;
 Line-height: 140%;
 Font-family: sans-serif;  ----->>  font: italic small-caps bold 1em 140% sans-serief 

 Background-color: #f00;
 Background-image: url(background.gif);
 Background-repeat: no-repeat;
 Background-attachment: fixed;
 Background-position: 0 0;
  ----->>background: #f00 url(background.gif) no-repeat fixed 0 0 

 list-style-type: square;
 list-style-position: inside;
 List-style-image: url(image.gif)  ----->> list-style: square inside url(image.gif)

Multiple Declarations

关于 CSS 的 class 声明和定义，也有简写的方式

腾讯产品经理的要求

【存在就是被需要。腾讯产品经理的要求有哪些呢？】
以下各项指标均为5分制，括号里的分值是腾讯产品专家P4的基础要求。
【图文版】-点击图片查看大图

【文字版】
一、素质
1、基本素质
学习/提炼能力（5分）
办公技能（5分）
执行力/IQ（5分）
关联专业知识（3分）
沟通能力/Trade off（5分）

二、关键素质
行业融入感/Ownership（5分）
技术理解（4分）
AQ/EQ（心态/胸怀）（4分）

三、能力
1、市场能力
对外商务沟通（BD\P3以上）（2分）

2、产品能力
市场/用户的调研与分析（4分）
行业认知（4分）
专业设计能力（4分）
用户需求理解/80/20/细节（4分）
产品规划（版本计划/节奏）（4分）

3、运营能力
运营数据分析（3分）
营销与推广策略（3分）
危机预测与控制/预见性（2分）
渠道管理（2分）

4、领导能力
项目管理（4分）
带人的能力/知识传递（3分）

扩展性阅读《腾讯产品经理视角》
一、产品
1、从产品的外延来说，
任何东西都可以被看作是产品，它的好坏取决于它被需要的程度，以及它满足外界需要的程度。
众人眼中成功的人必是很好的满足大众需要的人，这和“好坏”无关。
不被需要的东西，渐渐淡出历史而消亡，或者转化为新的被需要的方式。

关于边框和底色的那一些小事（一）

本文是基础性的设计探讨文章，请大侠和高手绕道，菜鸟停留片刻。我们看过很多设计师的教程文章，大家都用分解的方法来说明设计的效果。

比如：一个球形的效果，我们可以把分解成；高光，主体，阴影，颜色，等等……

那么门户型网站的视觉设计我们也可以这么分析吗？我这里想说：YES!

其实呢一个门户型网站的界面也是有许多设计的小元素组成。今天“新君”在这里，只和大家讨论其中的两个元素，希望能提高大家的工作效率；与苦逼的设计师们“与尔共销万古愁”。那么现在这两个元素就隆重登场了，一个是边框；一个是底色。

两个再朴实不过的元素了，几乎所有大的门户型页面都有他们出现。那么如何做合格的边框和底色呢，当然后有一些小窍门，这些小知识对于刚刚入行的网页设计师们很有用哦~~

下面我来看图：

最后总结：

1)  当你不知道边框要用什么颜色的时候，就用和背景相似的色系。

2)  当遇到深色背景的时候，使用亮色边框。

3）当图片颜色很丰富的时候，用颜色最多的那个颜色做为边框的选用色系。

哈哈，掌握了嘛？不是很复杂吧，其实一切就是这么的“煎蛋”~~！希望有更多的“射鸡师”们和“新君”互动哦，再见~^-^.

原文：http://www.365ucd.com/archives/610.html

为什么说设计是网站的肢体语言？

Designmodo网站上曾发表了一篇文章《Why is Design the Body Language of the Web?》，文中称，演讲者通过肢体语言可以使自己的表达更加充分，从而使听众更容易理解自己。设计者设计的网站就是互联网的肢体语言，好的网站可以使用户尽得他们所需。那设计者又该如何设计互联网的这一肢体语言呢？我们对该文进行了编译，读完本文，或许你就可以找到答案。

好的网页不仅仅是有一个好的外表，它还要将信息传达给用户，这可能要比起好看的外表重要得多。设计视觉信息包括文本内容，它们可使你想要传达信息更容易理解。考虑到这些，对于来访问你网站的人，你需要掌握链接的方法，除了知道他们想要什么，和他们正在找什么，你还要知道如何让他们更方便地找到这些需要的信息。不管我们的服务对象是网络达人还是网络文盲你都要找到一种方法去符合这两类人的搜索。

网页设计被比喻为网络的肢体语言，我对此观点非常赞同。一旦你掌握了不用言语，在进行交流的同时，也可以通过网络设计来传递信息，因此一个设计者不仅仅是一个拥有技术和创造力的人，他更是一个好的交流者。它能够传递出他的信息，让我们明白，但是网络确实是沟通的障碍。

肢体语言和网络设计——他们真的有共同之处吗？

我们之中的一些人非常擅长肢体语言，适当地表达和动作可以使你成一个好的交流者。即使一个字都没有说出来别人都可以明白你的意思，所以你需要去掌握你的声音，眼神交流和手势，来让别人理解。但是，如果我们把这种方法应用于电脑，让它来传递信息又会怎样呢？让我们来想象一下，我们生活状态逐渐变为上网状态，我们可以找到我们能够想到的任何信息。基于此，我们要找到合适的资源。

当我们畅游网络的时候，我们不能使用我们的肢体语言来交流，这就是我们为什么要找到其他的方法来交流的原因，这确实很巧妙。即使科学技术在我们的生活中扮演着重要的角色，但这并不意味着我们可以忽视人类最基本的本能。因此交流和肢体语言是其中一种，但我们如何把它们应用到网络上？

不幸的是，只有少数的一些网站能与“肢体语言”相结合，能够让我们理解。而其他那些充斥着各种各样的广告的网站则显得十分混乱，而且在困扰着我们。虽然， 他们中的一些看起来有完美的科技和技巧，但是他们却没有通过视觉和交流来清晰地表达。

页面停留时间和网站停留时间详解

一、页面停留时间与网站停留时间是如何计算出来的？

假设用户访问了网站的主页（Home）。分析工具将这个访问者标记为一个Visit，接着这个访问者又浏览了另外两个页面（Page2和Page3），然后他离开了你的网站。如下图所示：

我们想要知道的是：

Tp = 花费在一个页面上的时间
Ts = 花费在这网站上的总时间
假如这个用户从10:00开始访问网站：

对于Page2而言，访问时间是10:05-10:01，即4分钟。