这是我画的第一张网站架构图，用mindjet画的，很土～

这是我画的第一个白板

这是我做的第一个视觉稿

这是我写的第一段代码

@charset “utf-8″;
@import url(“screen.css”);
/* CSS Document */

.contentin{
border:1px solid #e0e0e0;
}

记得那时我还凑热闹参合了PRD和测试，果然是一枚刚从学校出来单纯的毕业生。那段时间几乎天天搞到12点，然后和同事吃个夜宵回家，碰杯的时候讲讲各自当初的学生生涯，挺有趣的。时间也过得很快，培训的一个月几乎是眨眼就过了。虽然我们组做的这个系统拿到了第一名，但是好来有没有在内部应用我却不知道了。

时光荏苒，留下来的这些痕迹打包好，继续前进。

类似的网志，挑你喜欢的看：

• 非以kpi为导向之罪，乃kpi本身之罪耳
• 数据研究在交互设计中的应用
• 新版支付宝捐赠平台
• 矫枉过正的交互设计
• Why I love front-end developer

我所在的环境稍好，自己并没有什么抱怨。其实“以kpi为导向”这个是公司管理的正确方向，绝对不是毒药。但是为什么这剂良药让这么多为公司考虑，为产品发展考虑的人工作得非常痛苦呢？原因即在于用药的方式错了。

kpi本身的设定有问题

现在互联网确实已经到了更加重视用户的阶段。无论是市场、行业、企业，随处可见以用户为中心的思想。但作为推进企业前进核心之一的kpi，却并没有随着时代的进步而及时地革新。大多数公司在考核一些产品的kpi仍旧是以前的那几个关键指标。而作为大家都知道的道理，提高用户体验所反映出来的指标提升十分不明显，很隐晦，这也导致在kpi中无法制定出新的可度量的指标。有的公司用客服来电量来度量，也只能对于某一特定项目来评价，很难用客服来电量的增减来评判产品的进步与否。

于是我才期待白鸦在微博上所说的产品体验度量，希望这个度量标准能解救在kpi蹂躏之下痛苦的众生吧～产品体验度量出来之后，和传统的交易量等核心搭配使用，形成新的kpi，互相制肘，达到均衡。这样以kpi为导向，就会激发出更多团队的力量。

类似的网志，挑你喜欢的看：

• 用户体验的春天，还远吧
• Why I love front-end developer
• 数据研究在交互设计中的应用
• 矫枉过正的交互设计
• 怀旧一下：画的第一张网站架构图

腾讯微博近期推出了特别收听，用处就是只在这个tab里显示你特别收听的人的广播。群众们的反应暂时不知道。就我个人而言（我的收听人数不多，尚且不需要不同的tab来过滤），没有很大影响。不过我相信这个功能完善起来对于很多收听人数在150+（这个数字来源于一个社会学的研究，人一般至多有150个亲密的朋友）以上的人是很有帮助的。

为什么要有特别收听？

这是因为微博本身的信息量巨大以及质量参差不齐导致的。我们假设一个群众A，他热衷于互联网，收听了很多大牛/小牛/身边的牛，以及一些生活或工作中的朋友。对他而言，收听这些牛主要的“积极”需求是旁观大牛们的妙语，从中获取自己渴求的信息和思想。收听人数一旦增加到一定程度，比如150，他就需要花费大量的时间在微博上把大牛们的信息从其他生活或工作中朋友们的流水帐里提取出来。于是，特别收听应运而生。

我们回到社交的根本来看，在微博上大多数人与人之间是临时连接的关系（temporary tie），你其实根本不知道那人是谁，但是对他的某一条推有兴趣；而你follow的人则大多数是弱连接的关系（weak tie），大家都是道上的朋友，相逢何必曾相识；很少会有强连接（strong tie）的关系，我的密友基本上跟互联网不沾边。由于微博信息量巨大，临时连接和弱连接之间的比值可以说是趋近于无穷大。这也就是为什么twitter会出一个list功能，让人们可以不用follow别人，也能及时跟踪他们的推，也就是说让我可以和临时连接关系的人们用另一种方式交互，同时这些list还是公开的，可以让别人follow，也就是说让更多的人去建立这种临时连接的交互关系。其实twitter也好，国内各个微博也罢，他们的话题也是基于临时连接来做的。

特别收听要比list设计得好。特别收听在全部广播同一水平线上作为一个tab存在，而twitter的list则是在侧边栏，同样的新浪微博的分组也是在侧边栏。侧边栏的关注度远远没有特别收听所在的区域上高。所以除非是高级用户，对list或者分组的使用会小于特别收听。而只有给予了足够多的

为何腾讯微博里没有做list

以下是我的猜想。我们可以回过头去看QQ这个产品用户的行为是怎么样的。我手上并没有数据，但凭这么多年观察身边的人使用QQ的行为可以发现，国内用户对于强连接的需求，是大于临时连接的需求的。很多人的QQ好友都大于300多，QQ群也都塞满了。这些好友和群里估计只有10%不到是最近半年聊过天的，只有5%不到是经常聊天的。这种现象要追溯至QQ红起来的那段时间交友盛行，网上留个QQ号加你太方便，聊过一两句之后下线，下次再见我就不知道你是谁了，而且也懒得去清理（勤快的用户半年清理一次）。也就是说其实是在网上的一个临时连接，但很容易地就在用户的QQ“好友”这个弱连接里出现了。由于临时连接的人数太多，用户开始把经常聊天的人（家人/亲密的同学/真“朋友”）分组，并把那些临时连接扔到默认的“未分组好友”或者“我的好友”里。也就是说相当于在QQ里，把弱连接的人过渡为强连接。

于是我猜想，腾讯微博也是这个思路。这也是国内用户和国外用户之间的区别（国内的IM加为好友的验证机制出台较晚）。用特别收听来打造一种强连接。

继续猜想，特别收听只是个起点

人与人的关系除了三种强度不同的连接之外，还有不同地连接种类。比如我的高中同学和大学同学，大学同学和同事，同事和互联网上的朋友，他们是不同的种类。很有可能我想说给高中同学听的话，大学同学看了不知所云，同事表示认识到另外一个我。于是在信息量巨大的微博产品上面，这种需求会更严重。比如前段时间foursquare刚热起来，很多人不适应foursquare的重度用户在twitter上频繁check in，但这些重度用户的同道们则表示情绪稳定。

腾讯微博的特别收听出来之后，以后会有很多种可能的变化。首先，全部广播和特别收听只占了如此长的tab区一小段，完全有理由期待后面还有更多的tab。也就是可以让用户对不同的收听对象进行分组。学习啊，生活啊，工作啊，吃喝玩乐啊，甚至一起去天上人间的伙伴啊等等，无所不包，真正全民微博。这里可以把自主权完全交给用户，分组的名字自己区，排序自己排，等等可以想象的空间够大，关键是要抓住社交的根本。有了用户自己搞的分组，用户就可以在广播的时候，选择让哪些分组收听到这些广播，这样信息量巨大的微博对大多数人来说就少了很多的“干扰”信息。比方说我的上司收听了我的微博，我刚好想发一条“新来的女同事真好看！”广播，这个给老板听到应该不怎么好，但我又急切地想把这个消息广播给我的同事们……于是发广播给指定的分组就起作用了。听起来很像一个QQ的升级版，由一对一或一对多的信息传递方式升级为一对多或一对所有的信息传递方式。顺便多说一句，新浪微博和搜狐微博在搞的微博群组，是把信息传递方式升级为多对多，多对所有。为啥twitter没有这么搞这么多东西出来呢？你可以试试在twitter上多联系利用hash tag+搜索+list，一样可以满足你多样化的收听需求，但对于发推给某些特定的人看见，目前做不到。

在twitter上国内用户对list的使用远远小于老外们。不用怀疑腾讯对国内用户深刻地理解。这只是我的一篇猜测，网志中的一些理论来自于前段时间流传蛮广的一个google员工研究社交网络的ppt：《THE REAL LIFE SOCIAL NETWORK》，需要的同学可以留言，我会用邮箱发给你（为尊重原作者，不放在网络上下载）。至于未来腾讯微博会怎么样，拭目以待～

类似的网志，挑你喜欢的看：

• QQ2010beta3内置的腾讯微博体验感受
• 腾讯微博初体验
• 社交广告？新的广告形式！
• 设计中的边际效应
• 易用且轻量级的交互设计

如图，心里非常高兴，第一次在杂志上发表文章。这篇网志网页设计和用户界面设计是借着《程序员》互联网十年专题的东风才出现在杂志上的。感谢前辈千鸟，感谢编辑常政。感谢支付宝工友们日常工作里开怀地畅谈，给了我很多写网志的灵感。

上周五前端工友李白离职了，祝愿他假期愉快&创业成功！下面这张照片是离职那天前端的集体照，相机是popomore同学的尼康D3000，我是拍照的。感觉D3000还不错，很便宜，我也打算买一个入门（摄影技术太烂了）。

类似的网志，挑你喜欢的看：

• 网页设计师也该关注页面性能
• 求是设计会Design Camp第一期：”开始”
• 反思现在工业设计的教育
• QQ2010beta3内置的腾讯微博体验感受
• 设记系列：Draware手机界面设计

何为设计中的边际效应

边际效应大家在《微观经济学》中都学过。设计中的边际效应其实很明显。一个设计做到80分相对容易，几次推敲修改即可达到。从80分上升到85分，遇到的阻力会从各个角落冒出来，非得熬上几个晚上不可。从85分做到90分甚至95分，就相当难了，所耗费的精力成倍增加，所花的时间也自然陡然上升。这就是设计中的边际效应。前辈们常说，产生一个灵感固然令人欢欣鼓舞，但真正要做成一个产品，后面的磨难多得去了。在你打磨产品的时候，投入同等精力产生的效用是越来越少的。

一个产品要做到多少分合适？做到什么程度就可以先上线了？这些都是产品的owner考虑的问题。在产品开发过程中，体验类的细节问题肯定是多如牛毛而且不是同时出现的，如果埋头一个个地去解决，显然是不合时宜的；把所有问题收集起来，然后再做分类、评判，这样似乎缺少了敏捷开发的轻快节奏。在设计师作为owner的时候，需要自己心里有一杆标尺，有个标准，来度量每个问题带来的麻烦、解决每个问题所带来的效用，从而来决定哪些问题优先解决。并且在产品达到一定质量（比如说82分）的时候，让产品上线，并立即准备下一阶段的继续完善产品。

这和产品的核心需求息息相关

大多数情况下，解决产品核心需求问题所带来的效用肯定是比较大的。核心需求必须是用户最关注的、最根本的需求，因此一旦把核心需求做好，用户其实已经喂成7、8成饱了。但这也并不意味着有一把度量各个细节的边际效用的标尺没多大用了。实际情况中，核心需求一难挖掘，二难满足，很多产品均是上线许久才慢慢找准用户的核心需求，现在好评如潮的dropbox当初就是如此。走了弯路不要紧，有那么一把尺子，会让你不会弯得太远、弯得太用力。

这把尺子的度量标准，宏观来看，是可用性因素>易用性因素>其他。这个常理对于不断进步中的设计师来说并不是银弹，关键还在于实践中保持清醒的头脑，提高自己宏观的把控能力。能深挖细节，也能从细节中走出，才是一名成熟的设计师。

类似的网志，挑你喜欢的看：

• 易用且轻量级的交互设计
• 新版支付宝捐赠平台
• 求是设计会Design Camp第一期：”开始”
• 从腾讯微博的特别收听猜想开去
• 腾讯微博初体验

于是我就想做一个服务，在google map上标注乘客和的士的信息，乘客想打车了就用手机上网发个消息，可以包含自己的目的地。这个消息会显示在地图上，的士司机也会在自己的手机或者车载上网设备上看到，附近的的士便可以去做生意。乘客上车后这个消息就消失。

这个服务的好处在于，1. 方便乘客打的；2. 方便司机看到哪里乘客多，竞争对手少；3. 大量乘客乘车及下车的目的地沉淀下来形成海量数据，这个信息对城市规划，交通规划，商业中心的形成等等十分有帮助。

工业设计出身的我，很久没有脑力激荡过了，今天突然想到这个点子，感觉很不错。回家后兴奋地跟女朋友说，女朋友觉得服务是挺好的，但仍不置可否。我有点不甘心，便在老同学的群里和大家讨论。群里同学们质疑了我一下几个问题，一一作答：

• 1. 在的士上什么样的设备能看到地图上的客源？
  答：能上网，有屏幕就行。现在不考虑推行这种服务时的成本问题。如果这种服务的确对乘客和司机有用，并且有一部分司机用了这个服务且生意比其他司机好起来，那么其他司机就会来用的。
• 2. 关键的问题，盈利模式是什么？
  其实我之前没考虑盈利模式的问题，我只想到做广告。但是在我同学提问的那一刹那，我想通了。这个服务的价值在于它提供乘客和司机服务之后沉淀下来的信息。哪里的乘客多，乘客爱往哪里去，怎么样在一条线路上接到更多的乘客，这些知识现在只是存留在一些有经验的老司机的大脑里。而这个服务可以把这些信息分享出来，这便是盈利方法一。一个城市的乘客需求量，载客量，的士承受量是城市及交通规划的重要组成部分，也涉及到餐馆，商场，电影院等等该造在哪里，甚至是房产，这些信息可以提供给城市规划也可以卖给商家，指导投资。

互联网时代就靠信息赚钱。但我自己并不看好个人创业做这个服务。原因是个人和政府及交通等很难有关系背景，在前期没有足够的风险投资情况下，一旦服务上线，会有至少几百个模仿者跟随，因为这个技术门槛低，主要靠向市场推广。最好是由移动来做这个服务，未来3G将有无限应用可能，拭目以待吧。

更新～

聪明的同学又提了几个问题：

1. 我觉得司机能看到哪里需求大是很好。再就是比如长途或者特殊要求的很需要，但是我觉得真正的供求关系还是由车和人数目决定，比如有些特定时间难打车，是因为比如车交班，加气高峰碰上人下班高峰，或者天气突变打车人数猛增，这时候可能这个并不解决任何问题。生意该好好，该差差，乘客打车难也并没有改善。而这种时候正是凸显供求关系失衡造成双方不便的时候，正常时候打车并不难，出租车司机也并不会长时间生意不好，所以说到根本，并没有解决什么具体问题啊 。

答：恩 我考虑的弊端也是这个问题。我理解的打车难问题，是有部分原因出在乘客和的士信息不对称。就是说此时此刻，的士不知道我想在这个地方打车。的士是按照经验中的线路来跑的，很多的士都争抢同几条线路，冷落了其他线路，久而久之就越发恶化，导致在某些时段，某些地点想打个车，要走半个小时。

2. 呵呵不应该说“我”… 其实我觉得你这个东西出来了，司机能看到了，但是主要繁忙路段人数必然还是超过冷清路段很多。从概率上来说司机还是会觉得跑那几条路拉到生意可能性大。仍然会跑这个路的，除非你不但能看到乘客数目和地点，还能随时统计该路段空车数，算个比例才有意义 。

答：是统计空车数啊，我的意思是地图上显示所有乘客和司机，信息透明，如果很多车都往一个方向跑，别的司机就可以往另外也有乘客的方向跑。

还有个问题，就是可能我们很会用电脑啊网络啊很有这个意识，但是像四十多岁以上的人连手机都只会打电话发短信都不太会的人又有几个会形成这个意识几个会不怕麻烦几个会操作，如果人数不够多这个信息也是相当不准确和不真实的 。

答：恩 这的确是个问题，要把这个服务做成发短信也能用，比如发送10086 哈哈。打电话也能用。写个自动脚本吧，打过来一个直接按1选择我要乘车，然后就记录。 其实社会迟早是步入完全互联网时代的……

再次更新～

感谢twitter上Gao Jing同学分享了一个国外很有意思的现象：

Gao Jing @shimuuu 有一个这样的iphone应用，不仅出租车，私家车也可以让别人搭车，车主可以赚点汽油钱，系统还会自动匹配路径，还有提醒功能等。不过安全可能会是个问题，特别是国内。。

视频是Youtube上的，想看的同学要翻墙，视频在这里

一些基本的知识

把wordpress3.0升级完之后，在Appearance菜单底下就有Menus的选项，见下图:

Theme location面板是选择在你主题中已经注册了的导航菜单。如果要使用导航菜单，必须在主题里先注册，代码如下：（我注册了两个导航菜单）

	// This theme uses wp_nav_menu() in one location.
	register_nav_menus( array(
		'primary_left' => __( 'Primary Navigation Left', 'moonbay' ),
	) );
	register_nav_menus( array(
		'primary_right' => __( 'Primary Navigation Right', 'moonbay' ),
	) );

这里有几个参数，其中 primary_left和primary_right是两个导航菜单的注册标识, Primary Navigation Left和Primary Navigation Right是菜单的名称，会显示在Theme location面板里的下拉框中。moonbay则是我为主题的命名。

注册完导航菜单后，就可以来编辑了。Custom links, Pages, Categories三个面板，可以添加自定义链接，页面，或者分类到导航菜单里去，这样就可以很方便地做出CMS的导航了（见文章开头的那张图）

用导航菜单的第一个trick

我一开始只注册了一个导航菜单，后来发现不能满足需求。如本文开头那张图所示，我想让导航菜单的左边三个靠左，右边三个靠右。在我的html的DEMO里是这样的：

       <div id="nav">
		<ul>
			<div class="left">
				<li class="active"> <a href="#" title="首页"> Home</a> </li>
				<li> <a href="#" title="首页"> News</a> </li>
				<li> <a href="#" title="首页"> Membership</a> </li>
			</div>
			<div class="right">
				<li> <a href="#" title="首页"> Activities</a> </li>
				<li> <a href="#" title="首页"> About</a> </li>
				<l> <a href="#" title="首页"> Contact</a> </li>
			</div>
			<div class="clear"> </div>
		</ul>
	</div>

left和right两个class设为float:left和float:right，这样就实现了左边靠左，右边靠右。

而现在如果只注册一个导航菜单的话，不能在li标签外在包一个div，如果通过js来判断前三个li外包一个div的话，又挺别扭的（那样我还不如完全hard coding）。后来想到，我可以注册两个导航菜单，都是我的主导航，只不过一个在左，一个在右：

				< ?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary_left' ) ); ?>
			</div><!-- #left_nav -->
			<div class="right">
				< ?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary_right' ) ); ?>
			</div><!-- #right_nav -->

这样我就实现了DEMO中的效果。导航菜单的好处就是在开发完主题之后方便客户使用，毕竟你不能要求他们去改模板，你也不希望客户仅仅是想改一下导航菜单条目的顺序或者文字，就来电话你。hard coding适合给自己用，但wordpress3.0支持了导航菜单，则可以说开启了一个建站的小时代。因为wordpress的开发者社区可是相当红火的，会有各种各样的tricks冒出来。本文所举的只是小小的一粒。

类似的网志，挑你喜欢的看：

• wordpress教程：如何将文章分成两栏显示
• wordpress教程：如何在不同的页面显示不同的分类文章
• 怎么在wordpress中显示文章总数和分类总数
• How Blackboard theme has been done – the original
• .htaccess文件中添加301重定向

1. 如果你会翻墙术，可以无忧。
2. 不能翻墙的朋友，请打开您的host文件（位于C:\WINDOWS\system32\drivers\etc下），将如下两行代码复制粘帖+保存，就可以看到本博放在flickr的图片了。
   76.13.18.78 farm3.static.flickr.com
   76.13.18.79 farm5.static.flickr.com
3. 已经订阅了本博的如果在阅读器中（如google reader）访问失败，请订阅国内feedsky烧录的feed。
   可以翻墙的朋友也可以订阅feedburner烧录的feed（推荐）。
   同时您也可以选择订阅wordpress自己生成的原生feed，没有任何美化和分享操作。

让我们一起期待墙倒的那一天吧。

在具体项目中潜意识或有意识地去设计，是我区分这三个阶段的主要标杆，也是我自己的经验积累。由于我做这行满打满算也就一年半，所以这些总结少不了纰漏，不足之处请大家多多指正。

第一阶段：潜意识设计

我想大多数人学习视觉设计的过程和经历都类似，这是互联网开放及分享精神的结果。作为一个新手，自然而然会去看一些视觉设计的理论书籍，经典案例，更多地是在网上浏览大量成熟设计师的作品。而在练习的时候，也会从临摹开始，并且会无意识地喜欢上某种风格，甚至具体到某种细节（比如圆角）。图像所带来的印象自然会比书中的理论要深刻，因而在第一阶段，视觉设计师在做设计的时候经常会因循着脑海里许多的图像片段来进行创作。

为什么说这个阶段是在潜意识地设计呢？真正决定一个设计好坏的那些标准，比如布局的不活跃的对齐（inactive symmetry）和活跃的不对称（active unsymmetry），巧妙的负空间（nagetive space），互补色/间色/邻近色的运用，字体堆栈（font stacker）的使用，等等这些在新手做设计的时候是无意识地去实现的。这些知识在新手阅读视觉设计理论书籍的时候都有浏览到，但此时并不足以形成深刻的印象并成为指导设计的标准（因为没有经历过足够的实践积累）。前面提到，新手会因循脑海里的图像片段来做设计，这些图像片段便是平时学习过程中积累下来的好的设计片段，它们就包括了一些视觉设计中的标准。新手设计师在“模仿”的时候，便会间接地运用到这些标准，但此时，他是潜意识的。

第二阶段：有意识设计

看起来第二个阶段是顺其自然就达到的。事实也是如此，随着经验的积累，阅历的增加，甚至包括重新读了视觉设计理论书籍，设计师会逐渐开始有意识地运用这些理论来创作。但是达到这一阶段并非易事，其实它就是我们通常所说的“开窍”。有的设计师可能穷其一生，也并不能用这些设计理论来指导自己做设计，一直在“跟着感觉走”。并且，脑海中的那些图像片段是很难在短时间剔除的，就我自身的经验而言，在设计过程中尽管一直提醒着自己有意识地去实践理论知识，但做着做着就会开始模仿脑海中付出的图像。

这一阶段是痛苦而又漫长的，但却绝对是有意义和价值的。因为一个成熟的视觉设计师必须要学会用自己的思想来指导自己做设计，而非“印象”。在你自身的能力提高到一定阶段之后，图像的印象很难再帮到你，反而会制约你做设计。因为此时你已经会详细的分析每一个项目，找准每一个需求背后的前因后果，联想观者在看到你每一处设计之后的反应；而图像的印象虽然包含了很多有用的理论信息，但是同时杂糅了其他干扰你判断的信息，毕竟每个项目都是不同的。因而此时你不得不强迫自己开始思考。

而思考，正是一个设计师走向成熟的标志。这不仅适用于视觉设计师。

第三阶段：看山又是山，看水又是水

相信大家看了前面两个阶段之后，肯定会说这跟“看山是山”十分相似。没错，有的道理就是放诸四海皆准的。设计师的第三阶段也是如此，此时的他们在做设计的时候又回归到潜意识了。我自己还是半生不熟的设计师，不过我从身边的成熟设计师上学到很多，也通过这些学习想清楚了他们在设计时的状态。我更愿意叫这时候的视觉设计为：艺术指导（art direction）。设计理论只会在他们评价别人的设计时才会从他们嘴里说出。可以说，前文所提到的绝大多数好设计的标准，他们已都烂熟于心，甚至可以做到颠覆其中某些从而达到惊人的设计。

他们在具体做设计的时候，往往会作一个细节片来定下整个项目的艺术风格，比如26000 vodka的设计，整体浑然天成，而灵感则来源于vodka的冰块和酒瓶的质感。看似整个网站（不管是flash还是basic html）并没有用十分炫目的处理，但随着你浏览网站，便会细细品味它的独到之处。

鉴赏

视觉设计师在不同的阶段时，鉴赏设计的视角也是也是不同的。处在第一阶段的设计师会关注局部设计的细节处理；第二阶段的设计师则会学习好的设计师怎么形成的，为什么要这么做；第三阶段的设计师则通常看一两眼，鉴赏这个设计背后所蕴含的气质，整体的感受。

最后作为一个半生不熟的视觉设计师，我力荐大家看一本书，《The elements of Graphic design》，迄今为止我看到最好的设计理论知识书籍。如果能看原版是最好了（据gundam说中译版有点不靠谱）。同时我的网站关于我栏目有我推荐的其他基本书，也是读后能功力大进的秘籍。类似的网志，挑你喜欢的看：

• 反思现在工业设计的教育
• 腾讯微博初体验
• 新版支付宝捐赠平台
• 设计中的边际效应
• 设记系列：Draware手机界面设计

页面性能不仅仅是前端同学的问题

页面性能的重要性不再赘述，就我个人而言，能忍受一个网站加载出DOM和css的时间是5秒，否则就会毫不犹豫的关闭网页。上面罗嗦了半天，实际上只想说明一个问题，设计师需要考虑页面性能。实际上设计师就是一种“通才”的角色。在传统设计领域，多数设计大师都是通晓好几个行业，比如科拉尼。在设计过程中充分考虑到各种因素，这是设计的难点，也是成就一个好设计的关键所在。以往那种网页设计师做好psd图稿，扔给前端工程师去做DEMO的时代已经过去了，因为互联网进步了，用户进步了。

原生控件的应用——关于页面性能，设计师应首先考虑的

浏览器的原生控件虽然有其不足之处：ie的外观很难控制；不能支持更加丰富复杂的交互等等，但它对浏览器的兼容支持得特别好，在用户需要费力填写表单的地方，原生控件相比非原生控件会提高性能，让用户操作起来很流畅。这也是为什么在一些银行的网站或者客户端上，会用原生的select来代替很多支持复杂的交互控件，比如选择银行。在满足设计需求的前提下，优先考虑原生控件会让你的页面更快，兼容性更好，你的前端同学也会少许多抱怨。设计师应当了解，在写具体应用中控件时，不止是展现出用户可操作的部分就完事了，还有很多事情要做：验证，安全，兼容，框架等等。这里可看财付通的付款页面的js请求数，会吓你一跳的。

我在使用招行专业版客户端的时候，遇到过一个很好的控件交互设计。需求是填写银行卡的开户支行，给用户一个input让他自己去填显然是不靠谱的。招行的做法是先给一个搜索框，让用户输入关键字，比如我住在西湖区，我就输入西湖二字，页面刷新之后返回一个结果列表，从中用户来选择支行，这样搜索过滤之后的结果，只有10条左右，容易辨认。而我只用了两次就学会了这种操作，额外的好处是操作过程中页面反应相当快。而我在其他网站上选择开户行支行的时候，遇到过省市，再选支行联动控件，输入+下拉列表混合控件，选择的时候都能方便且正确的选中，但是我点击控件的时候相应速度却有延迟，心里略有不爽，这就是差别。有关原生控件和复杂控件的应用对比，可见我的一篇旧文：易用且轻量级的交互设计。

而随着html5的标准日益完善，新的原生控件会满足更多的需求，比如外联数据源xml，浏览器内置的不同数据类型的验证，这些会大大减少js的体积。当然这依赖着国内ie6市场份额的进一步下降（目前为60%）。相信未来一些轻量级的非原生控件，也会慢慢纳入到html的标准之中，比如困扰过很多人的日期控件。

页面的框架——设计师也能帮助到前端

我并不完全赞同设计师必须要懂代码，这应是因人而异的。但一个好的网页设计师，必须要为页面框架考虑，小到一个页面上的一个控件，大到一个项目。这是经验的积累，并不依靠对代码的理解，和设计原则中的一致性是密切相关的。不仅仅是少两张图片，少两行代码，充分考虑css框架的设计，组件的重用，图片的分割和整合，这些能让页面性能提高不止一个档次，同时保证设计感。

我感于日常工作及学习中，大家讨论设计时设计页面性能的次数十分少，而它又是项目中设计师和前端最主要的分歧点，为了消弭这种分歧，最好的做法就是大家互相增进了解。我在公司里有给设计师分享前端知识，给前端分享photoshop知识，也是为了大家一起进步做出更好的产品和应用。其实在自己的博客上实践提高页面性能的各种方法，是相当轻便且有效的，实践过的常识经过转化再提炼，成为知识，这点我十分认同白鸦和千鸟的看法。

类似的网志，挑你喜欢的看：

• 易用且轻量级的交互设计
• 《程序员》7月刊上刊登了我的网志+工友李白离职
• 设记系列：Draware手机界面设计
• Draware概念手机界面的flash演示
• 和翔子聊交互