对于基于Web的产品经理和交互设计师来说，因为其产品的逻辑、功能、流程、界面等，是他们亲手设计出来的，所以他们自身对于产品的各种细节会非常的熟悉，这是他们做好产品的基础。但是同时，他们也会在思考设计的过程中，不自觉的认为用户也对这些同样熟悉，这样就会不自觉的犯下一些错误，影响最终的用户体验。Henry将这种现象称之为「概念内化」。

　　下面从一个微小的细节出发，来说明概念内化的问题。

　　在百度的推广平台中，有一个帮助用户优化推广效果的功能模块。它会实时监测用户账户的数据，并给用户一些优化提示和建议。其中有一种提示是这样说的：

您有 27 个关键词因 出价过低 无法在左侧首屏展现

　　百度搜索的用户可能会注意到，在搜索某些关键词的同时，百度会在搜索结果页面上展示广告。比如下面这种：

　　对照上述的提示信息，“无法在左侧首屏展现”其中的「左侧首屏」，从字面上来理解，应该是图中的B区域（共7条结果）。但是有的朋友可能想到了，这个「左侧首屏」的范围，根本就是不确定的嘛。因为在不同的分辨率下，第一屏能够显示出的内容肯定是不同的。从这个角度来理解，这句提示，根本就是不知所云。

　　百度的PM们当然不会设计出这么晕的产品策略，事实上，此处是在设计过程中，由于概念内化所导致的一个错误。其实，在百度内部，PM们对于「左侧首屏」这个概念有着明确的定义，就是指结果页中的左侧前三条信息（为什么会这么定义，Henry也不清楚，或许是历史原因。也许在大家都用800×600分辨率+IE4.0的年代，百度的结果页第一屏只能显示3条吧…），也就是图中的A部分。但是显然，设计师或者是PM在写这段文案的时候，忘记了用户其实并不理解百度对于「左侧首屏」的定义，所以顺手就写了个「左侧首屏」。

　　这个问题的解决方法，其实很简单。只需要使用更加明确的，用户能够理解的语言来描述即可。比如将「左侧首屏」改为「左侧前三位」。

　　这样一个细小的点的变化，可能会让用户少走很多弯路，从而大幅度提升用户体验。

　　其实如果我们仔细观察就会发现，不论是在互联网上，还是在生活中，「内化」的现象其实是很多的。有时会让我们感到不方便，有时则会使我们哭笑不得。

　　再举一个生活中的例子吧，是一个真实的故事，但是您可以当笑话看：

　　Henry有一个朋友叫小k，他在北京工作了一段时间，打算在京买房。那个时候，还没有各种限购的政策，外地人在北京购买商品房只需要提供一个「暂住证」就可以。于是，他需要办一张传说中的暂住证。

　　对于租房者来说，办理暂住证理论上需要提供房东的房产证。但是这个事情很不好办，因为房东平时很忙，他不太可能专门抽出时间陪同小k去办理。如果向房东借，有觉得不靠谱，比较这是很重要的证件。于是小k想到一个办法，去找已经在北京买了房子的朋友借房产证，然后在该房产所在地的派出所办理。

　　没过几天，小k就找到了一个朋友愿意将自己的房产证借给他。这位朋友，住在传说中的亚洲最大的居住区，天通苑（小区名）。小k上网搜索关键词“天通苑 派出所”，找到了「天通苑派出所」的地址。

　　某天早晨，小k起了个大早。坐地铁环绕半个北京后，来到了朋友家，拿到了朋友的房产证，然后前往天通苑派出所。之后就是排队，填表，等待。终于轮到他了，他将资料递给负责办证的民警。民警同学看了一眼房产证上的地址，把资料退了回来，然后说了一句特别经典的话：

　　民警：“天通苑不归天通苑派出所管。”

　　小k霎那间凌乱了。

　　小k问：“啊…？那归哪儿管啊？”

　　民警答：“东小口派出所。”

　　小k因为还要去上班，没时间再去查东小口派出所的地址。只好拿回资料，挤地铁上班去了。至此，第一次办证宣告失败。

　　其实这个案例，也是一个典型的「概念内化」现象。

　　事实上，天通苑社区中，只有一小部分居民楼归「天通苑派出所」管辖，剩下的大部分居民楼都是归「东小口派出所」管辖的。这些管辖范围，在派出所内部很清楚。但是这是经过内化的概念，民众并不清楚。对于民众来说，大家很自然的就会认为，「天通苑派出所」应该是管天通苑的，就像是北京火车站，就应该在北京一样。然后很自然的去了天通苑派出所。

　　故事讲完了。留给我们的思考，或许是以下这样几点：

　　1、设计师应该明白，自己并非产品的典型用户，因为自己对产品太熟悉了，很多普通用户会遇到的问题，对于设计师来说，根本不是问题。

　　2、在具体设计中，需要从用户的角度来考虑问题。大部分用户是不会像设计师一样对产品深思熟虑了解透彻之后再使用的。千万不要认为，自己能够理解的东西，用户也能理解。

　　3、产品经理提供的是原始需求，但是至于这些需求如何表达，应该经过深思熟虑，翻译成对用户有效的方式。

在一个互联网公司的工作流程中，产品经理（主要指偏向产品设计的产品人员）和交互设计师是这个流水线上最起点的环节，也是关系最暧昧的两个环节。说其暧昧，是因为在很多互联网公司里面，这两个环节所做的事情是有重合的，这就意味着，他们或许也是整个流程中合作最紧密的两个环节。

相对比之下，产品经理更关注的是产品的内部逻辑、操作流程、策略等；而交互设计师更关注的是产品的易用性、流畅度和操作感受。总的来看，似乎可以认为，产品经理是从一个更加宏观的角度去设计产品，而交互设计师，则是从更多的细节出发，去提升用户体验。这两种不同的视角决定了只有产品经理和交互设计师密切配合，深入沟通，才能够最高效最合理的将产品策略转化为产品原型，从而为流水线的后面环节提供精确的参考资料。

下面以人人网广告平台的一些产品和交互细节为例，使用对话的形式来分享一下我个人在做交互设计过程中的一些体会和想法。入门级文章，高手请绕行。

在广告平台其中一个投放系统中，有一个产品需求，是要根据用户所在的地区做广告的定向投放。也就是说，可以控制广告只展示给固定地域的用户。这就意味着，需要设计一个「区域选择器」，供用户选择区域。产品经理的原始需求是这样的：

产品经理：“我们这次的投放系统需要设计一个区域选择器，就是让用户选择广告定向投放的区域的。可以精确到城市，可以多选。另外，区域作为一个投放广告的限制条件，如果用户没有选择任何选项，那就代表用户忽略该条件，则该广告会面向全国投放。”

交互设计师：“哦。”

产品经理：“嗯，我能够想到的这个东西的原型，可以提供两个下拉框，让用户分别选择省和城市。当用户在第一个下拉框里面选定了省以后，第二个下拉框中会显示该省下面的地级市。我做了一个简单的框图，大家看一下。”

产品经理：“大概就是这个样子。每选定一个城市，点击后面的添加按钮，可以将该城市添加到下面的列表中。同时，如果点击已经添加的城市名称后面的「删除」链接，则会将该城市从已选列表抹去。”

交互设计师：“等一下，我有一个问题。按照产品的策略，如果用户一个城市都不选，那么就会默认投放全国。但是这个概念很难表达给用户，比如说，如果在「区域选择器」旁边放提示，估计没有多少人会注意到。”

产品经理：“一个都没选，就是等于忽略条件啊。因为这些都是限制条件。”

交互设计师：“问题是用户很难意识到是这样。在中国人的观念中，大家都是觉得，选上的，是我要的。但是大家没有「不选就等于全要」这种思维习惯。”

交互设计师：“我觉得可以这样。我们在现在的「区域选择器」上面放两个单选按钮。一个叫「全国」，另一个叫做「指定」。打开页面时，默认选中「全国」项，并隐藏「区域选择器」。只有用户选择「指定」项时，区域选择器才会出现。这样表达就很明确了，你不是「全国」就是「指定」。”

产品经理：“哦~听起来不错。试试。”

于是得到了下面这个版本的原型图：

交互设计师：“嗯，我想，现在这个版本已经基本上从界面的层面解决了全国投放的选项问题，我想，用户应该不会因为不知道怎么选而卡在这里了。”

交互设计师：“我看下一步，需要对一些关键的元素做一定的视觉设计，以便于引导用户操作。比如「添加」按钮，应该更明显些。我觉得可以请UI设计师出一个简单版本的UI了。”

产品经理：“稍等一下，我看咱们还是把细节再讨论清楚一些再去找UI吧。比如，字的颜色啊什么的都没定呢。而且，我觉得选中的区域中，每个城市名称后面都跟着一个删除链接，很奇怪。”

交互设计师：“嗯。的确。我的想法是这样，字的颜色，就用黑色吧，或者是深一些的灰色也行。虽然从视觉设计的角度来看，视觉设计师觉得稍浅一些的灰色比较养眼，可能黑色太‘抢’。但是咱们的系统毕竟是给人用的，灰色的话，可能会让人误认为这些选项是不可操作的。你看如何？”

产品经理：“同意。”

交互设计师：“关于已经选中的区域列表。我看可以把删除链接换成×，事实上，用户对于×这种符号比汉字更敏感。你看，大家不论是用Windows还是Mac，关闭窗口的时候都是×，早就习惯了。另外，为了让所选定的城市名称看起来是一个整体，并且跟其他城市名称区分开。我看，可以给每一个城市加上背景色，每个城市一个色块，这样也一目了然。”

产品经理：“颜色呢？”

交互设计师：“蓝色吧，人人网都是蓝色的风格。”

产品经理：“ok”

于是，配合UI设计师，得到了下面的界面：

产品经理：“我看现在这个地方已经基本上成型了。咱们也已经讨论很很久了。该问问别人的意见。”

———-时间分割线———-

产品经理：“Hi~ 各位。我收集了一些内部测试的意见。有用户提出，搞不太清楚两个下拉菜单和「添加」按钮之间的关系。”

交互设计师：“什么意思？”

产品经理：“就是说，有人意识不到选完了省，选完了城市以后，还得点「添加」。他们觉得，选完了就完事了。”

交互设计师：“晕。”

交互设计师：“可能是已选列表框再空着的时候长得太秀气了，大家没意识到它是用了装东西的。”

交互设计师：“好吧，我有两个方案。1、把「添加」按钮上面加一个向下的箭头。指向已选列表框。2、在已选列表空着的时候，添加一条提示语，来提示用户他并没有完成区域选择操作。”

产品经理：“提示语那个，你的意思是说，当用户添加了城市以后，会自动消失是吧？”

交互设计师：“是的。”

产品经理：“我觉得加提示吧。感觉放箭头有点儿傻。”

交互设计师：“嗯，而且，可能放了箭头以后，用户依然不知所云。”

产品经理：“那提示语怎么说呢？您尚未添加任何区域，请选定城市后，点击上面的「添加」按钮，该城市会被添加到…”

交互设计师：“停！太长了，大部分人不会认真看完的。”

产品经理：“的确…”

交互设计师：“我看就一句话就可以。写‘您尚未添加任何区域。’”

交互设计师：“你看。下拉列表后面的按钮叫「添加」。提示中又明确的传达出了尚未「添加」的状态。这样既说明了这个框框是用来放东西的，又可以告诉用户，这个东西是可以选多个的。因为「添加」的概念就是一个一个往里面放。如果只能放一个，那应该叫「选择」。”

产品经理：“顶。”

交互设计师：“而且，我觉得这个控件最初的原型你设计的不错。嗯，用户只要成功的进行一次操作，以后就可以非常高效的进行操作了。这个东西的学习成本和认知成本都比较低。”

产品经理：“oh,yeah~”

那么，现在的UI是这样的：

产品经理：“哎，对了。话说，我最开始的策略是，用户如果不选，相当于全选，要全国投放的。你说如果用户选了「指定」，但是并没有添加具体的城市，直接提交表单，怎么办？系统是应该直接把用户的广告设置成全国投放，还是报错，阻止用户继续？”

交互设计师：“我看啊，报错吧。因为现在「全国」和「指定」这两项，已经明确的把整体和局部给分开了。我觉得你那个策略没必要再应用了，因为现在这种已经达到了你最初的目的，而且还好理解。再有就是，咱们的平台是涉及到钱的，是要让用户花钱的，如果让用户不明不白花了冤枉钱，本来想投北京的投了全国，那我们会被用户骂死的。虽然感觉上报错会让用户有挫败感，但是在这种细节上，还是用户利益应该放在第一位，用户体验，可以稍微往后放一放了。”

产品经理：“好吧。”

交互设计师：“呵呵，你看，这个故事告诉我们，不能每件事情都听产品的。产品提的只是需求，但是如何实现需求，还是得从多个角度来讨论。”

产品经理：“好吧。那么，技术兄弟们，下面的工作就拜托你们了。”

个人观点：

1、产品经理和交互设计师需要时刻密切配合，深入沟通。

2、有时候，产品策略和用户体验会发生冲突，这时应该从多种角度去考虑和探讨最终决定方案，不应该有谁一定比谁重要的说法。

3、优秀的产品经理，相当于半个交互。同样，优秀的交互设计师，相当于半个产品。二者虽然职位不同，但是应该在一定程度上考虑对方的工作内容。

4、产品提出的只是策略和需求，并不是一定要按照产品人员所描述的细节去设计具体的产品细节。交互设计师以及团队中其他所有成员，有义务有权利对产品需求提出自己的见解和更好的设计方案。有不同意见可以讨论，但是最终决定权，应该依然属于产品经理。

THE END

本文被转载至：

UCDChina

互联网的那点事

人人网FED(Henry本人同步发布)

chinaz.com

纪念大学中的人和事~

1、鄙视舍委会是每一个师大学生的基本义务。

——这个很通俗易懂，不用解释了。舍委会是某师大专门负责查寝室的“学生组织”，擅长装逼以及装逼。这个句式中的“舍委会”可以换成任何被鄙视的学生组织。常用的有“学生会”和“社团联合会”。

2、十年啊… 就算当服务员估计也早就升为大堂经理了吧？

——这是我得知某系某导员的恶行（比如强迫学生买窗帘、办信用卡什么的）后，对其进行讽刺的一段话。这是个神奇的导员，他自从来到某师大，就一直在当导员，一直升不了官。据说已经当了10多年的导员了。名词解释：导员，全称政治辅导员，是大学里面除清洁工和食堂服务人员外最低级别的职位。但由于其对于学生有直接管理权，所以经常会站在学生权益的对立面。

3、这就像是你走在路上遇到了一坨大便，你会选择踩它一下？还是绕着走？

——这句话是用来劝说那些受了学校欺负的同学的，劝他们先忍耐一下。在某师大，经常欺负人的组织和个人主要包括：导员、舍委会、系学生会、公寓阿姨等。

4、你相信明天大陆将被光复吗？不信？你应该相信的，因为连师大的奖学金都已经开始发现金了，这世界上还有什么是不可能的？

——某师大的奖学金是我所知道的学校中最少的。一等奖学金一年评一次，金额是450元。并且，一般情况下要拖1年才发，而且，从来不发现金，而是给一张发票，然后告诉你说，明年学费少交点儿吧。但是大三那年，奖学金居然发了现金，所以有上述感叹。

5、你知道Photoshop吧，它是一款图像处理软件，而不是一款图形制作软件。也就是说，Photoshop是用来修图的。但是她… 就是那种连Photoshop都修不出来的类型，必须要用Illustrator重做。

——用来说明某些女生长相丑陋，或者有特色。你以后跟女性朋友开玩笑的时候，可以在她们的照片后面评论说：我给你推荐一款软件，叫Illustrator。

6、我建议你把主色调改为红色。

——有一些学弟学妹们为学校某组织制作了网站，他们来找我征求意见的时候，我经常会这么说。这是对各种学校部门的讽刺，因为他们一般喜欢“红的”，以及“大气、简约、国际化”的风格。

7、用植物可以挡煞，这是一种通用的方法。但是因为它是跨平台的，就像是java一样，所以它在每一种平台上表现都不怎么样。所以每一种煞气，还是要有它专门的处理方法。

——这个没什么说的，研究风水时候想到了“跨平台”的java语言。

8、关于渐变，我有个好创意，从咱们学校的标志开始，先变成一只蜗牛，然后变成冰淇淋，最后，变成一坨便便。

—— 《平面构成》这门课里面，有一次作业，画的是“渐变”。所谓渐变，是说，先画出一个图形A，在A的基础上做一些变化，然后画出B，再做变化，画出C，再做变化，画出D。整体来看，这四个图形表现的是从A变化到D的过程。所以，我就有了上面的创意，并且老师表示，很好，但是不准画。关于学校的标志，请参考 http://www.hrbnu.edu.cn/2010/sdxh.html

9、呵呵，那个圈圈和周围的英文是我擅自加上的，目的就是让人一眼看上去注意到圈，而忽略里面那个东西（大部分人可能没看清里面是什么）。这样会让校徽显得好看些。但是没想到…… 现在不但我在用，学校很多部门也改用带圈的校徽了……

—— 大二那会儿，做第一个版本的某师大网站的时候，觉得学校的logo实在是太难看了。但是还没办法必须用，所以就擅自把logo的外面加了一个圈，以及环绕的英文名和建校时间。后来不小心发现，我的这种“擅自”的行为引领了一种“潮流”。到现在，某师大的大部分logo，都是带圈的了… 请参考 http://www.hrbnu.edu.cn/2010/sdxh.html

10、我们叫他犊哥。

——灯丝摄影协会（某师大历史上最牛逼的，带有“黑社会”性质的学生社团）管理层对某“学生组织”头目的蔑称。东北方言中“装犊子”就是“装B”的意思。

11、在火车站集合？那下一届是不是要在天安门广场集合啊？这样不行，会被定性为邪教的。

—— 某师大某专业2005级毕业生的实习活动具体安排是北京、大连6日游。但由于学校资金有限，系里没有打算包车把大家送到火车站，于是临时通知，提前2个小时到哈尔滨火车站门口集合。这意味着将有100多人，在哈尔滨火车站门口的广场上聚成一堆。我国相关法规规定，3个人以上，就算集会。

12、我们这是利民开发屯，不是开发区。

——某师大2001年建成的新校区，位于哈尔滨市荒凉的“利民开发区”，此地与外界沟通的唯一途径只有黑出租车和一条公交线路。周围全是农村，早晨起床走出寝室能闻到烧柴火的气味。当年某师大主楼成是当地的最高层建筑。

13、您这是环线吗？

——票贩子在哈尔滨火车站门口兜售他们的长途汽车服务，他们是这样喊的：“大庆、齐齐哈尔、佳木斯、牡丹江，有座”。但这几个城市连起来，加上哈尔滨，正好是一个圈。

14、丢东西了？赶快去食堂找shulan阿姨！

——某师大食堂的shulan阿姨是一个神奇的人，据不完全统计，2年内有至少5名学生写过感谢信，贴在食堂门口，他们均讲述了这位神奇的阿姨拾到自己的钱包，然后归还的故事。并且其中至少3封“感谢信”的措辞是几乎一摸一样的。

15、为了能够回得去家，老师必须逃课。这是咱们学校的特色。

——某师大新校区位于远在呼兰县的利民开发区，而老师们的家大部分在市区，所以学校就必须每天发班车接送老师上下课。但是每天下午从新校区返回市区的最后一班班车的发车时间，比下午最后一节课的下课时间早30分钟。所以老师为了能够顺利回家，最后一节课必须逃课。而这，只是这个荒唐的学校的冰山一角而已。

16、明年是不是要开核物理专业？

——某师大于2009年成立了软件学院，但某师大的计算机相关专业水平如何呢？我摘录几句老师讲课时候的笑话，你就明白了。老师A：“现在，据说已经有265M的内存了！”（2005年，当时3000块钱的电脑一般装1G内存。）。老师B：“我告诉你们，你们电脑上那些图像，放大了以后出锯齿，都是因为显卡不行！”。知道了吧，就是这样的水平。所以，既然能开软件学院，搞不好过几年什么核物理、天体物理学、神学什么的，都能在某师大学到。

各位好运~

在跨越之前，我想有必要了解一下文中涉及到的相关概念：

1、Google app engine 是什么？

这个，就是 Google 的一个服务。（废话~）简单的说，使用它我们可以编写一些在线的应用，可以使用 Python 写的程序，由 Google app engine 提供网络空间和带宽。

2、GAppProxy 是什么？

GAppProxy 是基于 Google app engine 的免费国际代理。据说本意是提供给教育网用户的，但是由于使用了 Google 的服务器，公网用户也可以使用。

3、GAppProxy 能做什么？

能做什么？看本文标题啊~~

好~~ 概念了解完了，让我们开始伟大的跨越之旅吧。

第一步 注册 Google App Engine 帐号并创建应用程序

访问 http://appengine.google.com/ 使用Google帐号登录（没有 Google 帐号？去注册啊~~）然后点击 Create an Application 创建一个应用程序。

Country and Carrier 选择 Other (Not Listed) ，下面的 Mobile Number 填写你的手机号码。别忘了加上中国的区号。比如，你的手机号码是13000000000，此处你要填写+8613000000000。过一会会收到短信验证码，但是我估计短信是从国外发来的，我的是等了1个多小时才收到的… 所有各位耐心等待。

填写过短信验证码后，就会进入 Create an Application 页面，创建一个应用程序。

在 Application Identifier 处填写你希望的应用程序网址，并记住你填写的内容。Application Title 是应用程序标题，随意填写即可。比如叫Proxy。然后在 I accept these terms 前面打勾(我用的的不是第一次创建时的截图，所以图上没有这一项。但是经过上面的过程第一次创建应用时，是会有这一项的)，点击 save.

成功后，会得到一个 Application Registered Successfully 的页面。
第二步 下载和安装相关程序
1、下载并安装 Python2.6

http://www.python.org/ftp/python/2.6.1/python-2.6.1.msi

（据说目前Python3.0不好使，所以请使用2.6）

2、下载并安装 Google App Engine SKD

http://code.google.com/intl/zh-CN/appengine/downloads.html

3、下载并安装 GappProxy

可以到这个页面上看看有没有最新版本（GFWed地址，需翻墙） http://code.google.com/p/gappproxy/downloads/list

也可直接下载

Windows版

http://gappproxy.googlecode.com/files/GAppProxy-1.0.0beta.exe

或源码包

http://gappproxy.googlecode.com/files/gappproxy-1.0.0beta.tar.gz

4、下载 fetchServer

同样可以访问 http://code.google.com/p/gappproxy/downloads/list （GFWed地址，需翻墙）

或直接下载 http://gappproxy.googlecode.com/files/fetchServer.r69.tar.gz

第三步 设置
将下载到的fetchServer解压缩，得到一个叫 fetchserver 的目录，将它复制到 Google App Engine SKD 的安装目录（是复制这个目录，不是复制里面的文件）。

用文本编辑器打开这个目录中的app.yaml，将第一行处 application: 后面的内容替换为刚才申请的应用程序网址中.appspot.com前面的部分。比如，你的应用地址是 xxx.appspot.com，那么这里就写xxx。保存并关闭这个文件。

打开命令提示符（Win+r 输入cmd回车），进入Google App Engine SKD所在目录。如:

cd d:\program files\google\google_appengine

运行下面命令上传fetchserver：

appcfg.py update fetchserver

这个过程中会提示你输入google帐号和密码。

成功后，可以验证一下，打开 http://xxx.appspot.com/fetch.py （前面部分是你刚才申请的应用地址），如果看到了下面的信息，就证明安装成功了：

第四步 使用
将刚才下载的 GappProxy 解压缩，运行里面的 gui.exe （以 Windows为例）。

在 Use FetchServer 前面打勾，后面的文本框中输入 http://xxx.appspot.com/fetch.py (将网址前面部分替换成你刚才申请的那个)，然后点击save。

打开浏览器，将代理服务器地址设置为127.0.0.1:8000，即可使用。建议配合Firefox和FoxyProxy一类的插件，用起来会更爽一些~~

注：

1、GappProxy是有流量限制的，以月为单位。看网页查资料足够了，下载的话估计用不了多久。

2、如果使用过程中发生问题，请下载最新版本的GappProxy软件。我遇到过奇怪的问题，换了版本就好了。

我们一般所说的交互设计，都是指用户通过软件等手段与机器之间的交互，这从交互设计的前身“Soft Face”这个名字中，或许就可以窥知一二。但是事实上，交互设计在生活中是无处不在的。对于人机交互来说，用户需要通过设计师所设计的用户界面(UI) 来与机器交互，UI的好坏直接影响着用户体验。同样，作为一个求职者，他们所面对的“用户”，实际上就是公司的HR，而求职简历这薄薄的两张纸，就是求职 者的UI，而这个“UI”的好还则直接决定了其是否能够得到面试机会。本文试图从交互设计的角度来探讨一下如何书写求职简历（因为校园招聘中的简历问题比较明显，本文以校园招聘为例）。

首先，在进行交互设计之前，设计师必须对于该产品所面向的用户有足够的了解，最好对于他们的行为也能够比较深刻的理解。对于“HR”这种用户来说， 他们每天要从几百几千份简历中筛选出比较靠谱的那一部分，然后通知面试官（一般是欲招人部门的相关负责人，工程师等）安排面试。上面这句话中有两个关键 点，一个是“几百几千份”，另一个是“靠谱”。由此我们可以得到此类用户的两个比较明显的行为：

1、提取信息的方式应该是scan，而非reading。

简历数量的众多决定了筛选简历的人只能够采用scan即浏览的方式来提取信息，而无法使用reading即阅读的方式。事实上大部分简历只能够在筛选者眼前展示10-20秒，部分交互做得特别差劲的简历，可能只有4秒。

2、看简历的人会努力搜索简历中符合该职位要求的关键点，然后简略查看其内容，并做判断。

HR的任务是帮助公司寻找适合于某职位的人才，他们只关心简历上能够引起他们兴趣的内容。并且，他们需要把这些内容提取出来。

到此为止，我们已经对用户有了简单的大体上的了解。

针对以上的两种主要用户行为，我们不难分析得出相应的策略：

1、我们应该把简历设计成适合快速扫描的形式。

2、对于在简历上展示的内容，我们应该做到符合招聘条件的内容详细写，与招聘条件相关的内容有选择的、简略的写，而与招聘条件无关的内容坚决不写。对方要什么，我们给什么。

3、用人单位不仅仅关心一个人做过什么，更重要的是，关心这个人在做过的项目中起到了哪些作用，为项目的成功做了哪些事情（这样才能确定此人是否适合该公司，是否“靠谱”）。所以，应该将自己在重点项目中所起到的作用明确的表达出来。

4、我们应该引导HR尽量高效、轻松的完成筛选工作。提升 “用户体验”。

那么，我们目前的产品(简历)又是什么样的情况呢？下面展示一份我看过的，真实的求职简历，并作为反面教材(里面涉及到个人信息的部分是我编的)：

这是某高校统一发放给毕业生的简历模板，打印在A4纸上共两页。这份简历中存在着诸多明显的问题，我们来一一列举：

首先，一般情况下简历第一页的前2/3部分被认为是简历的黄金区域。因为这一部分将是首先进入HR视野的部分，如果这一部分没有办法跟HR产生良好 的交互，那么可能对方根本不会去翻看第二页。而这份简历第一页的大部分空间被无用的个人信息和无聊的“主修课程”所占据。可以说，在这些部分，简历筛选者 无法获得任何有用的信息。下方是该同学的一些工作经验和实习经验，但是基本上没有做任何分类。显然，这样并不能够提高用户scan的效率。

其次，在简历的最上方印有该高校的logo，而这个学校只是北方的一所三流大学，在省内的名气并不怎么高，而且很多外省的用人单位甚至根本没听说过。但它却占据了简历中最宝贵的空间。

第三，求职意向中的三个职位的工作内容是差不多的。归纳起来，该同学想要寻求的是一份偏向于视觉的WUI设计工作。

然后，在简历的第二页基本上就看不到有用的信息。

在“计算机水平”一栏中该同学填写了“通过国二VF语言考试”，对计算机比较了解的朋友们应该知道VF是一种早已没有人在用的数据库软件，并且它与 WUI设计无关，甚至与Web无关。并且该同学想要应聘的公司主要应该是网络公司或者软件公司，这类公司在技术上一般是很强的，而“国二”这种考试，在这 样的公司里，显然是没有任何说服力的——即使是作为一个非技术人员。

然后，获奖情况中该同学列举了他在大学里获得过的全部奖项。光是奖学金就写了近一行。而这些奖项中，有多少是跟“偏向于视觉的WUI设计工作”相关的呢？

在然后，下面的“自我评价”中的内容空洞，基本上没有传达出任何有效的，吸引人的信息。而再下方的“院系评价”和“学校毕业生就业主管部门意见”中的内容，则更少，更有官腔。甚至只有“同意推荐”这么4个字。而这两部分却占据了第二页一半的面积。

而这位同学的情况，在他所投简历的公司来看，基本上应该在应届生中处于中等偏下的水平，即非名校毕业，专业相关度较高，有一些社会实践经验和项目经验，但无“名企实习经验”。大学期间学习优良，在一些评选及比赛中取得过名次，也有一两项看起来稍微不错的奖励和项目。

“产品”分析完了，我们开始对其进行设计。

我在该同学想要应聘的公司网站上，找到了该公司对于WUI设计师职位的要求如下：

以上这些要求已经比较准确的传达出了公司对于人才的需求。那么针对这些信息，我们对简历进行以下修改：

1、结构上，从该职位的要求以及该同学的实际情况出发，设置“个人信息”、“任职情况及社会实践”、“项目经验”、“相关技能”、“获奖及认证”和“教育背景”6个项目，并按先后顺序排列。

2、删除学校logo和“个人简历”四个字（不会有人不知道你的这两张纸上面印的是个人简历），以便于为“黄金地段”腾出更多的空间。

3、个人信息只写姓名和联系方式，求职意向保留，学校和专业部分移动到“教育背景”中，并放到简历最后，由于学校没什么知名度，所以此项只写一句 话，用以传达“学历达到要求”这个信息，至于民族、爱好什么的全部删除，相信一个正常的面试官不会因为某人爱好唱歌（只是爱好而已，唱得还不一定好）而将 其录取为WUI设计师。

4、主修课程全部删除。用人单位关心的是应聘者会什么、能做什么，而非“学过什么”。况且现在的“主修课程”中堆砌着诸多的与应聘职位无关的课程。要想表达“综合素质”的概念，可以在“任职情况及社会实践”中通过事实来说明，不必告诉对方自己曾经学过哲学。

5、“实践与实习”项改为“任职情况及社会实践”，挑选有代表性的，重要的经历来写。重点写自己跟WUI设计有关的经历。

6、添加“项目经验”栏目，在原“实践与实习”的多个“设计并制作XXX网站”中挑选一些有说服力的项目来进行重点叙述，不但要说明自己做过的项目名称，还要说明自己在项目中起到的作用。

7、“通过英语四级”移动到“获奖及认证”中，“外语水平”一项删除。“计算机水平”改为“相关技能”，着重叙述与WUI设计有关的技能，以及能够让自己被“优先考虑”的跟前端开发有关的技能。

8、“获奖及认证”项目简写，坚决删除类似“寝室设计大赛优秀奖”这类跟所申请职位毫无关系的项目。最好能够让HR只扫一眼就能够看清楚。

9、“自我评价”及后面的内容全部删除。这是典型的垃圾信息。

10、为了提升对HR的用户体验，将简历中的关键词，诸如“WUI”、“div+css”等加粗，不断向HR暗示自己对于该职位的适合程度。同时所有信息应以列表形式传达，并分项叙述，有利于检索。

按照以上原则修改后，我们得到了用户体验明显提升的新版本简历：

从以上过程中我们不难发现，其实交互设计和用户体验这两个概念是渗透到我们生活中的方方面面的。只要认真观察和思考，生活中处处都是设计。而对于基于Web的交互设计师来说，或许很多的灵感都是源于生活的。

最后告诉大家一个消息，这份简历的主人，在去年的校园招聘中成功获得了包括腾讯、百度、搜狐、新浪、阿里巴巴和千橡互动在内的诸多公司的笔试和面试通知。并最终获得了其中两家公司的offer。

最近的项目涉及到很多表单的制作，特别是复选框(checkbox)和单选框(radio)。但是在前端开发过程中发现，单(复)选框和它们后面的提示文字在不进行任何设置的情况下，是无法对齐的，而且在Firefox和IE中相差甚大。即使设置了vertical-align:middle，也依然不能完美对齐。如下图所示：

于是上网查看了一些网站，发现这个问题是普遍存在的，如下图（FF3.5）：

在很多网站涉及到表单的页面中，都存在这种表单元素与提示文字无法对齐的问题。于是打算研究一下这个问题。首先，搜索到了wheatlee前辈的文章《大家都对vertical-align的各说各话》。wheatlee在他的文章中关于垂直居中提到了这样几个关键点：

1、vertical-align:middle的时候，是该元素的中心对齐周围元素的中心。

2、这里“中心”的定义是：图片当然就是height的一半的位置，而文字应该是基于baseline往上移动0.5ex，亦即小写字母“x”的正中心。但是很多浏览器往往把ex这个单位定义为0.5em，以至于其实不一定是x的正中心

（baseline等名词如果不懂，请先阅读wheatlee的文章）

按照这个思路，对照我遇到的问题，首先想到的是先验证一下浏览器对于“复选框”和图片是不是使用同样的规则来渲染（是不是把复选框当成一个正方形图片来对待）。于是写出下面的代码：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>测试vertical-align</title>
<style>
body{font-size:12px;}
</style>
</head>
<body>

<input style=”vertical-align:middle;” name=”test” type=”checkbox”>
<img style=”vertical-align:middle;” src=”testpic.gif” />
测试文字
</html>

代码中的testpic.gif是一个尺寸与复选框完全一样的黑色图片。FF3.5下显示如下：

事实证明，FF3.5对于复选框和图片的垂直对齐方式是采用同样的规则进行渲染的，即将复选框当作一个正方形的图片(IE不是)。按照wheatlee“middle的时候，是该元素的中心对齐周围元素的中心”的观点，如果我在复选框后面输入英文字符，那么复选框的中心将与英文中小写字母x的中心对齐。经测试，FF3.5下面基本上是这样的(在一些字号的时候会有一定的误差，比如，如果字体高度是偶数，那么这个中心点有时在一般偏上1px，有时在一半偏下1px)。如图：

但是这对于中文来说，并不是一个好的结果。因为中文是方块字，并且相同字号的情况下，高度会比小写的x高出很多。所以，按照浏览器内置的方式，只用vertical-align:middle是无论如何也无法对齐中文的（无论是只写中文，中文在前，英文在前，FF3.5都是按照小写x中心那种方法来对齐的。）。但是回头再看看wheatlee的文章，他说这个小写x中心对齐的渲染方式，是对于“文字”来说的。那么，如果不是文字呢…？如果复选框后面跟的是一个行内元素，如label，而文字是写在它内部的，会是什么样呢？浏览器会不会将这个内联元素整体看作一个“块”，然后依照类似图片的规则进行渲染呢？如果那样，我们就达到目的了。

但是经过测试，很遗憾，事实并不是这样，加上label后跟没加没有任何区别。FF3.5/IE6/IE7均是如此。在FF3.5中用firebug看一下，证明浏览器并没有按照label的高度值来去对齐中心点。如图：

如果按照之前的设想，红蓝两线应该是重合的。但现在的情况是，它们相差了1px。并且这1px是没有规律的，随着字号的放大，并不恒定，貌似轻易也无法提炼出对应关系来。于是想到，再试一下将label也加上vertical-align:middle。结果如图：

在FF3.5和IE7下面已经很接近于我们希望的状态了，只差1px。IE6下… 无语了。

经过以上折腾，我得出了跟wheatlee相同的结论，就是，各种浏览器之间对这个问题的处理貌似没有任何规律。并且，似乎每一种浏览器对于vertical-align:middle的渲染都不是完全遵从W3C所说的“Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.”

但是经过仔细总结和分析，发现好像最终对齐的结果跟label的高度和当前字体中小写x的中心点都有关系，两者同时影响着渲染结果。那么，既然现在的情况以及非常接近于希望的状态了，是否可以通过设置字体的方式来改变小写x的中心点的位置，接入对垂直对齐结果进行“微调”呢？

最终，在不断的测试中发现，如果将font-family中的第一个字体设置为Tahoma，则可以完美的实现对齐(Verdana等字体也可以)。而且在FF3.5/IE6/IE7/IE8和Chrome中均显示正常。最终代码如下：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>测试vertical-align</title>
<style>
label{vertical-align:middle}
.inputcheckbox{vertical-align:middle;}
body{font-family:tahoma;font-size:12px;}
</style>
</head>
<body>
<input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
<label>测试文字x</label>
</html>

最终效果：

至此，多选框(checkbox)和提示文字对齐的问题已经解决，那么其他表单元素呢？试验了一下单选框(radio)，发现，还是有问题。文字提示依然是偏上。用firebug看了一下，发现radio元素默认有5px的左边距和3px的上、右边距，却没有下边距。如图：

于是，尝试去掉radio的外边距，刷新后显示正常。（其实多选框也是有外边距的，只是它的外边距四个方向都有，并且相等，所以对于垂直对齐没有影响。）下图是一些常用表单元素的最终显示效果以及最终代码，大家可以用不同浏览器看一下实际的效果（注：由于演示使用的12px的中文实际只有11px高，而IE下文本框等元素的高度是22px，一个是奇数，一个是偶数，所以这些部分在IE中是无论如何也对不齐的，差1px。如果手动控制文本框高度为奇数，或者将文字设置成为偶数的高度，则显示正常）：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>测试vertical-align</title>
<style>
*{margin:0;}
label{vertical-align:middle}
.inputcheckbox{vertical-align:middle;}
body{font-family:tahoma;font-size:12px;}
</style>
</head>
<body>
<input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
<label>测试文字x</label>
<br/><br/>
<input class=”inputcheckbox ” name=”test2″ value=”2″ type=”radio”>
<label>测试文字x</label>
<br/><br/>
<input class=”inputcheckbox ” name=”Text1″ type=”text” />
<label>文字</label>
<input class=”inputcheckbox ” name=”Text1″ type=”text” />
<label>文字</label>
<br/><br/>
<label>测试文字</label>
<input class=”inputcheckbox ” name=”Button1″ type=”button” value=”按钮” />
<br/><br/>
<select class=”inputcheckbox ” name=”Select1″>
<option>测试文字</option>
</select>
<label>测试文字</label>
</html>
而且我发现，不但解决了中文的问题，如果提示信息换成其他语言，基本上也能够对齐，至少不会像开始那样偏移太多。下面是截图、代码和一些例子：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>测试vertical-align</title>
<style>
label{vertical-align:middle}
.inputcheckbox{vertical-align:middle;}
body{font-family:tahoma;font-size:12px;}
</style>
</head>
<body>
<input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
<label>测试文字x</label>
<br/>
<input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
<label>這是繁體中文</label>
<br/>
<input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
<label>次回から自動的にログイン</label>
<br/>
<input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
<label>English</label>
<br/>
<input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
<label>Чужой компьютер</label>
<br/>
<input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
<label>????? ?? ????????? </label>
<br/>
<input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
<label>????</label>
<br/>
<input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
<label>?????</label>
<br/>
</html>

至此，我的研究过程高于段落。

但是，还是想不通各浏览器为什么最后会显示出这样的效果。牛人们有空可以解释一下吗？

本文被转载至：

人人网FED(Henry本人同步发布)

蓝色理想

chinaz.com

最傻也是最简单的方法可能是把Google Analytics的代码加到模板页面里，工作量不大，在head.php里面加上就行。但是总是觉得应该有更“正统”的方法，于是询问朋友后得知，有专门的插件可以使用。

搜索关键词 Google Analytics wordpress 发现了一个叫做 Google Analytics for WordPress 的插件。于是下载。

安装的过程跟所有wp插件一样，将得到的包解压缩，然后将文件夹上传到plugins目录中即可。登录wp后台，激活该插件。发现设置过程很简单，只需要填写Analytics Account ID（就是UA-xxx那个字符串）即可。如图：

然后点击下面的Update Sittings就完成了。

到blog任意页面刷新一下，然后看看源代码…

咦？奇怪，源代码中并没有包含Google Analytics的代码块，只有这样一句注释：

<!-- Google Analytics tracking code not shown because admin tracking is disabled -->

上网查了一下相关信息，在这个插件的下载页面上找到了这样一段话：

I don’t see the tag on my pages after installing the plugin?

Check whether you’re logged in as an admin, if you are, by default, the
plugin won’t track you, and thus not add any tracking code.

原来 Google Analytics for WordPress 这个插件不追踪admin登录状态。
按照它所提供的信息，登出wordpress管理帐户再刷新，果然，看到了完整的Google Analytics代码。