一周前看到一文，想想还是留个记录吧，学习学习，原文地址http://firecacada.blog.163.com/blog/static/7074376200991592337999/

最近看了一些讲腾讯产品管理体系的文章，虚实都有，恰好有个同事以前在腾讯工作，能提供第一手的资料。于是今天下午开了1小时会议，专门讨论腾讯的管理之道，发现有这么几点处理得很好。

1、 设置一个质量监控小组，由经验非常丰富的高Level的产品人员构成，赋予他们很大的权力，去监控和规范所有的产品项目。并且用KPI来制约产品项目服从 这些规范。为了不搞教条主义，很多规范都是在立项之初，由项目经理和这个小组共同确认的，未必是硬性指派，一经确认就受到严格监控。确保好的规范不流于空 喊口号。

2、每个产品都设置公开的反馈论坛，突出外部入口，积极征询用户意见，并以内部轮班方式回复“每一条”有价值的反馈，要求以“人 对人，面对面”的沟通态度来进行解答，禁止机械问答。公司高层（包括小马哥）不定期巡查每一个产品论坛，一旦发现有不认真回复用户的情况，立即予以训诫。 确保产品人员与用户长期保持近距离接触。

3、每个产品都设置内部的交流平台，分为两部分，一块类似留言板，由产品主管发布项目的进度、动 态；另一块是论坛，向公司内部所有人开放，接纳反馈。在腾讯内部已经形成了非常活跃的氛围，甚至以该平台人气高涨为荣（至少你主管会喜欢这个），利用这个 平台跨项目提意见，或是项目组内部交流思维碎片都很常见，达到了群策群力，内部监督的效果。

4、设置产品架构师这样一个职位，由少数几个技术精英，负责所有项目的系统架构搭建，只搭架构，确保每个项目的底层合理性。

5、 执行项目总结制度，在每个版本上线后，由相应的策划-开发-测试人员开一个会，每个人都总结在这个版本过程里，有什么心得，有什么失误，可以怎么改善，尤 其注意改进三方人员的配合过程。用制度的方式来强制反省，强制跨职能沟通。几个版本下来，项目效率就会有明显的提高。

6、执行灰度发布政策非常之彻底，一个版本会经过若干级的内部测试，再向外部用户逐步放量升级，不断修正问题之后，最后进行大规模发布。确保提前发现问题，受影响的用户面尽可能小。与此同时，腾讯异常活跃的内部交流氛围，也能让产品在内部测试时得到较多专业反馈。

7、拥有背靠客户端，强大的数据挖掘功能，具体描述起来比较复杂，总之非常强大，数据细致到令人吃惊的地步。数据挖掘部门的地位也是相当高的。我以前说过“统计数据太单薄无法推导出可靠结果”这样的话，但在腾讯的数据挖掘机能面前，这句话恐怕要改口。

8、设置对新人和新项目的风险管理机制，比如3个老程序员带1个新程序员，将技术管理和具体开发的工作彻底分离，每周进行代码走读，对新产品采取格外严格的测试安排等等，使得缺乏经验带来的技术损害被降至最低。

其他还有一些大路货的东西，一些理想化的不可靠的东西，就不讲了。令我感慨并且佩服的，就是以上八点。不是佩服腾讯能做这八件事情——要说想法，我都能够想 到，我也有自己的一套项目管理团队建设的技巧。但腾讯从公司层面，从最高领导人的层面，身体力行地把产品管理的专业准则给贯彻下去，用多种监控手段来避免 其放空炮，令产品管理制度化，体系化，好的经验在内部流通开来，成为一种积极向上的约束力，带来整个大产品团队的合力，而不是任由项目经理各自摸爬滚打。 马化腾带着一大批产品高管自上而下，持之以恒地推动产品本位的管理体制规范化，并不断地创新和优化这套体制，使得整个公司上上下下融入了“产品的基因”， 最终成就了“产品的腾讯”。

11-03更新：

腾讯：鲜为人知的“水”凶猛

腾讯凶猛?

近期要更换公司网站首页，将各项服务以选项卡的样式在首页呈现。第三版设计如下图所示：

图中搜索框下部就是要切换的各个选项卡，要求“光标悬停在标题上0.1秒后切换选项卡”，并且“选项卡中存在动态调用内容”。我感觉这种设计并不是很好，通过点击来切换选项卡更合适一些。

这种设计违反了web设计中用户可控性的原则，我认为这是不尊重用户的选择。举个例子，我现在正在看第一个选项卡里的内容，而我的鼠标就恰巧放在“门户”这个选项卡上，那么，0.1秒之后，选项卡切换了，可是我没想看第二个选项卡里的内容啊！

采用鼠标悬停切换选项卡的设计，时间延迟是必须的，但是这个延迟时间是不好把握，不同的用户对时间的敏感度和操作快慢不同。延迟时间长，可能有的用户，在感觉鼠标移上没有反应之后，就接着做了点击操作；延迟时间短，有可能用户只是把鼠标滑过该选项卡，从而发送不必要的请求，造成不必要的加载。

悬停切换这一动作使得用户的关注点集中在选项卡内部，而我们的目的呢？让用户注意搜索框？选项卡？选项卡内部？因此首页这里使用选项卡，悬停还是需要权衡一下的。

通过onmouseover触发事件通常需要配合onmouseout来使用，这就比使用onclick要多出一个事件处理函数。而且各个浏览器对onclick事件的支持要更良性一些。

当然，鼠标悬停切换选项卡也不是完全不可以用，我们来看一下雅虎的应用：

雅虎首页上有“雅虎关系”和“雅虎邮箱”两个选项卡，通过鼠标悬停的方式进行切换。为什么说这个可以用悬停来切换呢？来看看雅虎的选项卡有什么不同。首先，这里的选项卡数量只有两个，而且这两个选项卡都很大，这样鼠标指针就不容易放在错误的选项卡上。其次，这两个选项卡都是有额外的onclick事件的，当点击鼠标左键之后，会另外打开相应的另外一个页面。

我认为，onmouseover事件还是用来显示提示信息或者某种视觉效果，配合onclick来完成某种功能更为合适一些。

最后，我收集了几个比较优秀的选项卡设计，参考一下。

所谓”勾引”用户的按钮，其实对于Web设计师来说，就是如何设计出一个能让大多来访的用户都有点击欲望的按钮。通常这些按钮被链接到下载、注册和购买等功能。

国外设计师 Seth Godin 将按钮比喻成香蕉，而你的用户则会被比喻成可爱的小猴子。我们的目标是能够让小猴子在3秒之内快速找到它们想要的香蕉(也就是在用户放弃并离开你的网站之前)。强迫你自己在设计每个网页的时候都要遵循一个且仅有一个的目标，那就是”香蕉”！让它更大、更醒目、更美观！

这篇文章将和大家一起讨论如何设计完美”勾引”用户点击的按钮并会为大家展示30个不错的网页按钮设计实例。

如何设计完美”勾引”用户点击的按钮

好的按钮设计一定会是醒目且能”勾引”用户眼球的。以下是好的按钮设计必不可少的5个特征:

1.颜色

颜色一定要能与平静的页面相比更加与众不同，因此它要更亮而且有高对比度的颜色。

2.位置

它们应当”座落于”用户期望更容易找到它们的地方。产品旁边、页头、导航的顶部右侧…这些都是醒目且不难找到的地方。

3.文字表达

在按钮上使用什么文字表达给用户是非常重要的。它应当简短并切中要点(不罗嗦)，并以动词开始，如:注册、下载、创建、尝试等…

如果想切实的达到”勾引”用户点击的按钮，添加“免费″二字的确可以起到诱惑的效果，当然那要真的是免费，不要误导或欺骗用户。

4.尺寸问题

如果它是你最重要的按钮并且你希望更多的用户点击它，那么让它更醒目些是没有坏处的。把这个按钮设计的比其他按钮更大些并让用户在更多的地方找到并点击它。

5.可”呼吸”的空间

你的按钮不能和网页中的其他元素挤在一起。它需要充足的margin(外边距)才能更加突出，也需要更多的padding(内边距)才能让文字更容易阅读。

30个网页按钮设计实例

1.Things

2.WordPress e-Commerce

3.Skype

4. PB Wiki

5.Exceptional

6.PicsEngine

7.InCase

8.GoodBarry

9.Plan HQ

10.TypePad

11.Mozilla Firefox

12.37 Signals

13.Hambo Design

14.Cake PHP

15.Traffik

16.Boag World

17.Donor Tools

18.Luke Larsen

19.Square Space

20.Wu Foo

21.Barack Obama

22.Freshbooks

23.Crazy Egg

24.Web Notes

25.Campaign Monitor

26.Light CMS

27.Litmus

28.Stumble Upon

29.Remember The Milk

30.Ekklesia 360

From：http://blog.bingo929.com/web-design-trends-call-to-action-signup-download-buttons.html

英文原文:Web Design Trends: Call To Action Buttons

我总结的手机web页面设计及编写规则，适用于xhtml basic 和 xhtml mp。仅代表个人观点。

1. 设计相关

1.1 硬件限制

推荐结构

手机屏幕由于尺寸、分辨率和色彩的限制，不能正常显示我们用于普通显示器的设计。在设计mobile web时要注意尽量避免产生滚动条，必需有滚动条时要保障只在一个方向上产生，如右图所示，不使用传统的上左右下结构，而使用上下结构。应该把主要的导航链接放在页面顶部，而且应当尽量精简，1或2行较为适宜。如果需要其它次要的导航就放在页面底部，这样用户打开页面后无需滚动就能看到页面的主要内容。不要使用过于复杂的色彩，手机屏幕不一定能正常显示，只要使网站总体风格一致即可。

手机网络往往要比有线链接要慢，例如，中移动GPRS升级EDGE后峰值只有384kbps，而且由于机制所限，手机连接互联网会产生较高的延迟，这些都将导致页面加载时间的延长；使用移动网络需要用户支付的费用通常会比较高，中移动降价后的GPRS流量费仍高达0.01元/KB。（不知升级3G后会是何种情况，呵呵）

在进行页面设计时应注意图片，flash等元素的使用，不要尺寸和字节数过大的图片，这样加快网页加载，不产生不必要的滚动条，降低用户的使用成本。

版本低一点的手机浏览器往往不支持脚本或插件，而且在许多情况下，用户没有选择的浏览器或者升级旧浏览器的余地。像重新载入网页，构建表，处理不必要而且复杂的样式表，处理无效的标记等等这些操作，由于手机的处理能力通常都相当有限，这意味着网页渲染可能需要很长时间才能完成，这将引起明显的延迟，并且浪费更多的电池电量。

1.2 用户输入

手机输入一般都不像使用普通键盘那么方便，而且一般手机都没有像鼠标这样的指点设备，应尽可能让用户少输入内容。例如一个较长的URI，用户没有耐心去输入它，而且也不能保证输入的正确性。

例如：不推荐使用这样的URI
“http://www.example.org/index.html”，
推荐使用这样的
“http://example.org”。

1.3 用户目标

用户通过手机上网浏览所需的网页时，通常都比桌面用户有更具体的目标，他们的意图往往是为了找出直接相关的资料。例如，用户可能需要收发某封重要的电子邮件，找一个距离最近的中国石油的加油站，看看CCTV5今天是否直播火箭队的比赛等等，恰巧手边又没有一台能上网的电脑。

同样，手机用户通常不太关心冗长的文件或内容。手机屏幕是不适合阅读长篇内容，用户往往还是因为没有更方便的接入方法，只得使用手机作为最后的手段。

很多时候，中文的Web设计仍然扮演着追赶者的角色，主流是以英语为代表的西方语言下的设计。语言是文化的重要方面，其差异——尤其是方块文字与西 方字母文字的差异——强烈地影响了Web设计的效果，这其中或又以排版（typography）为甚。我们的Web设计师们醉心于那些优秀的西方设计，惊 喜之余照搬或临摹，用作中文网站的设计，效果却可能差之甚远。一些跨国公司设计自己的中文网站时，几乎是将英文网站的样式表原封不动地套用到中文内容，不 但整体效果失了原味，细节不当之处更不胜枚举。

微软公司的中文主页刚刚做了改版。与英文主页几乎完全一致的样式并没有给用户带来多大好处，反而增加了麻 烦。约为11px大小的英文在Mac OS/Safari、Windows Vista、IE 7以及开启了ClearType的数量不少的Windows XP用户看来无可挑剔，但同样大小的中文显示在屏幕上就不那么完美了。过小的字号让中文用户很难阅读。总不能强求用户每次打开页面都手动增大文字大小吧？ 即便使用鼠标滚轮改变字号大小并不费劲，却并没有太多用户意识到这一点。

屏幕字体显示技术小史

电脑屏幕显示的最小单位是像素，这多少是个限制。让屏幕显示水平线和竖直线都十分清晰，但让它显示斜线则有可能产生“锯齿”。消除“锯齿”的方法是 使用过渡性质的中间颜色（白和黑的过渡色是灰）。英文字母和汉字都少不了斜线和曲线，使用过渡颜色消除“锯齿”的原理可以很大程度上提高清晰度。

1998年12月，微软公司发布ClearType 字体显示技术，宣称使用该项技术，字体的分辨率能比当时的既有水平提高200%。该技术同样用于消除“锯齿”，但并非使用过渡颜色的方法。在液晶显示器 上，应用了ClearType的字体显示效果明显优于简单使用过渡颜色的效果。实际上，这正是一种利用了液晶显示器特性的技术。研究一下微软的技术文档，就不难猜到200%这一数字的由来了。使用ClearType技术确实能够有效提高液晶显示器屏幕文字显示的效果，即便是普通显示器，应用ClearType技术也能起到消除“锯齿”的作用。

不消除“锯齿”。右边为左边文字截图放大至8倍的效果。

使用过渡颜色消除“锯齿”。右边为左边文字截图放大至8倍的效果。

使用ClearType。右边为左边文字截图放大至8倍的效果。

Windows XP/2003系统已经包含了ClearType技术，然而遗憾的是，用户需要手动开启该项功能才能生效，否则，屏幕上默认显示的文字是不消除锯齿的。我 无法考察到底有多少人开启了ClearType，但这对Web设计师来说一定不是好消息，我们不能总是陶醉在自己的世界里吧？看一看你的设计在关闭 ClearType时的效果，或许会带给你一些不一样的启发。

对于中文Web设计者来说，一个更不幸的消息是，在多数情况下，中文并不是ClearType技术的受益者。对于比较小的汉字（包括Web设计中段 落文本用得最多的12px和14px），开启ClearType并不产生任何变化。下文提到“小字号”时，均是指这种大小的字号。

为什么会这样？其实，这样处理不无原因。

在Windows XP/2003以及之前的操作系统中，小字号的中文字体使用了点阵字库而非矢量字库。这些操作系统的默认中文字体是宋体，但其横细竖粗的特点往往并不会表 现出来。在字号较小时，横竖笔画都是1像素宽。也就是说，这些汉字的显示并不是像矢量字体一样根据需要的大小按比例渲染出来的，而是像点阵图一样为每一种 字号下每一个汉字使用特定的表示效果。之所以这样处理，是因为汉字的笔画比较繁杂，而字体较小时可用的像素太少（12px大小的字只有144个像素供汉字 使用）。这种处理方式反而比简单地消除“锯齿”更清晰易读。再仔细看看12px下的“算”字，中间的“目”字被显示为“日”字，这正是针对像素过少采取的 应对策略——在不引起误解的情况下，尽可能多地提高文字点阵显示效果的清晰度。

这一缺陷也对中文Web设计带来了一定程度的负面影响。一个典型的例子便是导航栏的设计。一些产品负责人要求网页导航栏上的中文使用图像替换，以达 到清晰无“锯齿”的效果。因为导航栏太重要了，而且设计师们对导航栏的视觉设计也会花足了功夫，如果配上“锯齿感”强烈的文字，不无痛惜。相形之下，英文 网站的设计师们就不必为此多虑了。

从去年开始，一种称为“微软雅黑”的字体随着Windows Vista的推出而大为众人追捧。这款字体取代宋体成为Windows新版操作系统的默认中文字体。在Vista下使用这款字体，任意大小的汉字可以像英 文一样清晰显示。Mac OS使用了类似的黑体作为系统默认字体，通常称为“苹果丽黑”。Windows XP下的Safari也会尝试将网页里的中文以黑体显示出来，但效果不佳。在Linux下使用开源的文泉驿正黑，也可以看到相同的清晰效果。

如果绝大多数用户都开始使用这些新的系统及字体，我们或许可以思考一种新的Web排版设计格局。但就像Web设计师们至今也无法摆脱IE 6一样，主流中文字体显示技术依然没有改变。

选择字体

Web设计中，为了突出显示标题文字，可以使用与正文不同的字号和颜色，甚至，呃，不同的字体？对英文来说，确实如此。Web上通常直接可用的英文字体虽然有限，但毕竟有选择的余地。中文字体该如何选择呢？宋体和黑体都可用吗？问题并不简单。

通常情况下，中文字体和英文字体的重要区别，在于英文字体不包含对中文字体的定义，而中文字体却往往包含了对英文字体的定义（仅需要为英文大小写字 母、数字及常用符号进行设计）。也就是说，对一段包含中文的文字应用英文字体，中文会表现为默认中文字体（如Windows XP等系统下为宋体），而对英文应用中文字体，这些英文的字体将由中文字体决定。下表列出了最为常见的中英文字体。

名称	样例	说明
Times New Roman		Times系列字体的代表，也是衬线（serif）字体的代表，广泛用于印刷，但通常被认为在显示Web小字体文本时相对无衬线字体来说较不利用阅读。与中文混排效果较好。
Georgia		衬线更为突出，数字的处理尤为特别，高低错落，显得典雅而不失正式。多适用于英文标题，正文亦可使用，但与汉字排在一起则效果不佳，故中文排版中应慎用。
Arial		无衬线（sans serif）字体的代表，为使用最广的Web字体，大型实用网站（如Google）均选用Arial作为文本字体。与中文混排效果好。
Verdana		又一款广泛使用的无衬线字体，与Arial相比字符更宽一些。Verdana的一大优势是即便很小的字号（如9px或10px大小的文字使用 Verdana依然清晰，每个字母间都保持1像素的间隔，但同样大小的Arial文字可读性就差了许多，部分字母挤在一起）。与中文混排时，由于宽度比例 的关系，Verdana的效果较Arial稍差。
宋体		最常使用的中文衬线字体，Windows XP中文版的默认字体。小字号中文显示效果较好（以点阵方式显示），但其加粗显示效果多为人所诟病。对英文字符采用等宽处理（宽度等于半个汉字的宽度）， 为大量中文网站（如新浪网）使用，虽然中英文混排显得极为整齐，实则磨灭了英文字体应有宽度不同的特点，故不可取。
黑体		常用的中文无衬线字体，与宋体相比更为厚重，用于标题可起强调作用。由于汉字笔画多的缘故，小字号中文显示不如点阵宋体清晰。对英文字符亦采用等宽处理，同样不足取。

注：上表中的宋体和黑体均指Windows XP等平台下的相应字体，不代表微软雅黑等字体。截图亦来自Windows XP平台（已开启ClearType）。此外，Mac OS中的默认字体Helvetica没有列出，它与Arial接近，CSS中常与Arial一起声明。

表中解释了这些中文字体对英文字符的处理方式。实际上，除了Windows XP等系统自带的宋体、黑体、楷体等字体以外，其它很多中文字体都对英文字符采取了符合英文习惯的处理方式，这其中也包括微软雅黑。使用这样的中文字体， 英文字符表现出与中文一致的风格，如微软雅黑的英文也是无衬线的。然而，由于无法保证多数电脑安装了这类字体，它们也不应选为网页字体。

因此，一般情况下，最好使用常用的英文字体去定义网页中的普遍文本，而让操作系统和浏览器去决定中文字体的选用。这样做会让用户对网页的阅读产生最高的效率，制作功能性较强的网站尤其应该注意这一点。

选择字号

字号的选择似乎并不简单——排版中对字号的讨论远多于对字体的讨论。

英文字体通常可以很小或很大，而中文则没有这个便利。正如文章开头所演示的，小于12px的中文在屏幕上很难阅读，任何一种系统面对笔画繁多的汉字 和有限的表现空间都捉襟见肘。正因为英文对字号的适应范围大，英文Web设计常使用相对字体大小，把一定的选择权交给用户。而中文设计则限制较多，字号太 小则笔画太过拥挤（这种情况下，矢量字体的表现比点阵字体稍好）。

大多数情况下，中文字体使用固定大小，如12px、14px、16px。按照W3C的规范，px 与em同属相对单位（relative unit），em（以及%）相对于其它字号，px则相对于显示设备对像素的显示情况。如果屏幕分辨率变高而屏幕实际大小不变的话，1像素的实际显示大小就 会变小，使用px定义字号的文字的实际显示大小也会变小。如今，屏幕分辨率越来越高，导致屏幕文字越来越小这一现象已相当突出，不少设计师已采取行动以适 应这一趋势。由于1024×768的分辨率使用人数仍然最多，网页宽度多控制在1000以内，相应地，普通文字使用12px和14px是最合适的大小。为 了方便阅读，新华网、中国雅虎等网站将新闻内容文字的字体设成了16px，虽在小分辨率屏幕上略显肿大，却也为多数人所接受。

值得注意的是，Windows XP等系统下的宋体（大多数网页的中文默认显示字体）的合适大小是12px以上。在显示一些相对不重要的信息或是用户界面中使用较少的文字时，为了与普通 文字显出区别，也为了多点变化，英文往往把字号设得很小。但同样的情况下，把中文设到12px以下则会严重损坏可读性。这时，在中文Web设计中，要弱化 一段文字，如果字号降低至12px效果仍不足够，则可以考虑将颜色变浅（准确地说，是变得更接近背景颜色）或是选择网页配色中的次要颜色（并非用得最少的 颜色）。

差异无处不在

从一开始，本文就没有停止过对中英文排版思路与方法的比较。优秀的英文Web设计远远多于中文设计，对Web设计的研究与讨论主要集中在英语世界， 连CSS属性也是以英文等字母语言为设计对象的，这些都是实情。差异无处不在，除了字体和字号，中文Web排版还包括很多不容忽视的原则与技巧。下面试举 几例：

• 对正文中的汉字，不要使用斜体。一方面，Windows XP等平台下，斜体小字号汉字极难认清（而且也太斜了）；另一方面，斜体文本的最后一个字会与紧接着它的下一个字挤在一起（英文排版中，单词之间都有空 格，故不存在这一问题）。不过，在非正式情况下，对大字号的标题使用斜体也并非不可。
• 依照中文的习惯，文章的标题应当居中，每段开头应当空两格。不过，在Web世界里，这些仅仅起到参考的作用，而非必须。如今，中文用户似乎也很习惯标题居左，段间留距。况且，这种情况下用户的阅读速度可能更高。
• 与英文相比，中文段落需要的行距（对应CSS中的line-height属性）更大。这样处理的一个简单原因是，相同字号的汉字比英文字母、数字和符号的高度更高，每行之间的距离相对就小了。

诸如此类的问题还有很多，但我不愿也不能列举所有。撰写本文的目的是引起大家对面向中文Web的排版设计的关注，要求仅仅是把其中的基本问题阐释清 楚，并将读者的视线带往更广的空间。本文对读者的一个重要期待是有更多的人研究——哪怕只是零散地思考——这个问题。或许，重要的不是世界的改变本身，而 是存在改变世界的人。

From: http://weakow.com/articles/chinese-typography-in-web-design/