您可以用Axure RP绘制流程图(如下图)，来解释这个功能设计的逻辑判断。

接下来，开始设计页面的操作互动：
1) Widget命名：针对操作相关的栏位、按钮、动态面板，在Interactions窗格的Label一一填入名称，以利后续的设定识别。

2) 新增Case：针对”登入”这个Button Widget，在Interactions窗格中新增OnClick (点击时触发) 的Case，并在「Interaction Case Properties」视窗中点一下「Add Condition…」连结。

3) 设定Condition：在开启的「Condition Builder」视窗中，您可以使用下拉选单建立如下的逻辑判断：

当您在设定时，下方的Descritpion区块会自动产生逻辑判断的描述：
If text on widget Username Field equals “UserXper”
and text on widget Password Field equals “12345”
（如果「Username Field」输入的是“UserXper”，而且「Password Field」输入的是“12345”）。
4) 选择Action：按下「Condition Builder」视窗的【OK】钮，回到「Interaction Case Properties」，再选择当符合这个逻辑判断时，所要执行的动作。比如：导回网站首页、显示招呼语，登入的文字连结变为登出。
当您设定了Case的逻辑判断，您会发现 Interactions窗格中的Case名称后面会自动加入一个以“If” 开头的逻辑判断描述。同时，这个Case的图示会变成绿色，强调这个 Case使用了逻辑判断。
Axure RP Interactions De.ion
最后，实际完成的Prototype互动设计如下图动画：

如果您想要进一步了解这个示范内容的详细设定，请下载：Axure RP Prototype范例-旅游网站RP档1M bytes (下载后请解压缩)。
(版权声明：欢迎引用及复制Axure RP 中文教学内容，必须注明出处为悠识数位顾问有限公司及原始文章网址UserXper.com)

周鸿祎的办公室摆放着一套近300万元人民币的音响设备，拍照前，他叮嘱摄影师不要碰到它

在中国互联网的世界里，周鸿祎绝对是个人物：他和李彦宏抢过生意打过官司、和马云相互“封杀”对方、抢过丁磊的地盘、连杨致远都亲自给VC写信说不要投资给他、和管网站注册报备的CNNIC干过仗，现在则让互联网安全同行寝食难安，口口声声要学习马化腾的“先进经验”、却又时时盯着对方的脚步。

他起初是国企的项目经理，然后创业，被跨国公司收购又当了中国区CEO，入职过国际VC巨头、干过天使投资人，再创业成就国内第二大客户端互联网企业。

不甘于低调，这个小个子湖北男人有着一张记者喜欢、下属头疼的嘴，当你坐在他的面前，就像是面对一架永不停息的机关枪，留下的只是一地弹壳。

他还不是中国互联网最成功的企业家，但一定是最能折腾的。今天，他的360系被视为市场上最具潜力的待上市的中国互联网公司。

“我有过10亿美元的教训”，百度现在已经垄断了国内70%以上的搜索市场，而当年周鸿祎的3721和百度市场份额差不多，而且在市场渠道建设上还领先对手。

最后李彦宏一统江湖，成就一番伟业。

“你想想百度现在的市值，而3721已经消失了，这就是10亿美元的教训。”说这话时他已经足够平静。

3721时代的混战

先从一个寒假说起。研三寒假的大年初一(周回忆：谁知道具体初几呢？看了有的人自传，我真是佩服，怎么什么日子都能记得那么清楚呢？)周鸿祎在西安交大的宿舍里辗转反侧，干了两个公司都失败了，下一步怎么走？是去银行、国企还是到南方淘金？

一个在方正的师兄告诉他：来我们这里吧，毕竟是软件行业老大。(现在，这个师兄就在周的公司工作。)

周鸿祎想了想，有道理，我得去大公司见识，不能把自己搞得跟土鳖一样。很多年后，他说我到了中关村，来到了中国IT业的圣地，这一步改变了整个人生。

普通程序员电脑配置2M内存，部门经理能到4M，周鸿祎觉得不够用，就自己花6000块人民币攒一台电脑，扛着去上班。

“我自己花钱配电脑为工作，有什么不好，但有人就说你这就是拉风。”他忿忿不平。他确实是一个干活的好手，从程序员到项目主管、部门经理、事业部总经理，最后做到方正研发中心副主任。他自称“我是方正最好的程序员”，还不带之一。

在方正，他接触了互联网，还组织开发了中国第一款拥有自主版权的免费互联网软件——飞扬电子邮件系统。

周鸿祎觉得时机到了，做中文网址成了他的创业方向，就是在浏览器上直接输入中文就能链接到想要的网址。

他说：“当时哪有这种理念，公司给你投一个公司，你还占股。只是希望公司给我点钱，让我再招一些人。干成算公司的，公司看着给我奖励。我需要把这事做成，我需要去改变互联网，但是公司不认可，我只能离开。”

1998年10月，周鸿祎成立了国风因特软件有限公司，网站名叫3721——不管3721，你都能找到想要的。

现在回想，3721的推广真是暗合中国国情——人民战争。大规模的人力推广，居然也成就了一番互联网事业。

当时互联网还没大规模普及，中文网址好多人都在做，渠道是所有人最头疼的问题。强势的周不喜欢把自己命运掌握在别人手中，他选择了自建渠道加小区域独家代理的策略。

资深互联网观察家林军是这么描述当年周推广的劲头：周鸿祎亲自杀到一线去招募代理商，把重点放在中国最发达的区域：长三角、珠三角以及福建、广东潮汕等地区，这是中小企业聚集最密集的地区。经常一天跑三四个地方，比如，一早从北京出发，中午飞到福州，忙完后下午赶到石狮，晚上和代理商谈完事情后，第二天一早坐车到厦门，基本上是连轴转。

周的酒量不错，经常和代理商们喝得七零八落，这种草根创业豪情相当打动地方上的代理商。

为了拉动销售，周鸿祎干脆让代理商组织客户搞会议营销。他口才好，很有煽动性，能把一个互联网新生事物讲得风生水起，客户的银子哗哗就跟着下单了。

代理商最担心客户今年交钱订了服务，明年续费直接找到3721总部就赚不到钱。周为了稳定队伍，宣布续费也交给代理商，而且明令给业务员一成提成，直接调动推广热情。

一切都似乎越来越好，两个最厉害的竞争对手随即杀了出来，一个是CNNIC，一个是百度。

CNNIC全称是中国互联网络信息中心，带有官方色彩。CNNIC也开始推广其主导的中文域名，与已经扎根且活力十足的3721相比，已经很难赶上，于是想收编3721。

周鸿祎也有投靠之心，但对方条件开出来之后傻眼了：技术、注册系统、源代码交出，营运费由自己出，得到只是5年的特许经营权，还要分回去很大一部分，貌似成了CNNIC总代理。

这不是周所能容忍的，他开始叫板毛伟(CNNIC主任)。这倒也能看出周鸿祎的性格：绝不低头，血战到底。

周鸿祎有着不错的媒体缘，他敢说，而且有料，让记者们很喜欢他。这事情被描述成了一个官商不分的机构抢占草根互联网公司利益的故事。

官司打到了信息产业部，却不了了之。周算是赢得了这场战斗，2002年，3721的销售额达到2亿元，毛利有6000万元，风头一时无两。

另一个对手也开始发力，差不多同时和3721创立的百度。

不同的是，这一次两家争夺的是浏览器的插件。差不多一厘米高的地方，一时间多少互联网公司打得头破血流。

你一定有过这样的体验：几年前在IE浏览器一统天下的日子里，上网时总会遇到奇奇怪怪的提示要装某个搜索插件，安装后浏览器就彻底被绑架了。有时甚至莫名其妙地就被安装了，删不掉也清不了。

这种插件，后来被媒体定性为“流氓软件”，周鸿祎也因第一个做而被称为始作俑者。对于“流氓软件之父”的头衔，周鸿祎今天的态度是：“这是3721的一大污点，我认账，但我不能接受是主观上去害客户。”

最激烈的斗争发生在3721和百度之间，占据这个客户端，就意味着流量、客户和收入。

周和很多共享软件商合作，让用户在安装时就被迫装了插件，而百度也开始效仿。最后演变到两家公司产品相互卸载的程度。

最惨烈时，百度和3721对簿公堂，甚至官司打完出了法院，两家公司CEO还相互比划着要切磋切磋，差点发生武斗。

相比人民战争式的渠道，百度越来越展现出技术上的优势(网页搜索)，另一个搜索巨人Google开始敲打中国的大门。

下一步怎么办？

Yahoo伸出了手。

再战雅虎中国，黯然离去

2003年，雅虎整合业务，把搜索作为主要着力点，开始和Google全面拼争。

在中国市场，雅虎想通过并购尽快发力，可选择对象包括百度和3721。以当时的眼光看，3721很不错：拥有45万个中小企业客户，这可是在互联网商业里最有价值的资源。3721要价1.2亿美元，比百度低3000万，还不谋求单独上市。

对于周鸿祎来说，和雅虎的合作意味着傍上了大树。在和百度的缠斗中，他获得技术、品牌，万事俱备只欠东风。

2004年3月22日，周鸿祎正式出任雅虎中国总裁。从一个创业者到打工者，周回忆：“由于过度竞争，我忽略了用户。这还不是最致命的，把名弄坏了其实是有机会矫正的。我太想做网页搜索，太着急，正好碰上雅虎。雅虎诱惑说有能跟Google相匹敌的搜索技术，结果我们当了小白鼠。 2003年的雅虎还是互联网第一，当时想如果能跟雅虎拼到一起，用雅虎的资金、品牌和技术，再加上我的渠道、客户端和运作能力。我们不仅能灭了百度，把Google都能给灭了，所以就加入了豪门。”

3721卖了1.2亿美元，雅虎先给了一半，剩下的能不能拿到要看周的业绩。从一开始，周鸿祎就面临着巨大的业绩压力，而他的种种做法既让人耳目一新又毁誉参半。

雅虎开创了“门户”概念，但周鸿祎关注的是房产、汽车、娱乐等面向白领的内容，而且把重点放在了邮箱和搜索上。

他率先在中国把电子邮箱推广到G时代，一把火烧到了网易门前。此前，网易凭借邮箱技术独步中国，拥有最多的用户，如果扩容势必成本飞升。

除了扩容，周还向联众、当当等多家知名网站提供以各家品牌为地址的1G邮箱服务。没有要品牌，而是拿到众多客户，更给网易频频施压。

周鸿祎迅速拿下了中国邮箱市场第二的位置，更将除网易之外的邮箱迅速边缘化。

他还推出“一搜”这个独立搜索品牌，主打MP3搜索，号称 “中国最大的娱乐音乐搜索”。一搜加上雅虎的搜索量，跟百度相差不大，胜过当时的Google。

再加上已经做得很成功的网络实名业务，第一年，周鸿祎达到了合同要求，但亮丽的业绩掩盖不住矛盾的滋生。

周鸿祎评价自己更适合带创业期的公司，气质使然。公司合并历来最难的就是文化融合， 3721是一个创业期公司，而雅虎中国在他看来已经沾染上浓厚的跨国公司官僚气。

他把原来200多人的3721队伍全部带到了新东家，而雅虎中国当时才不过50人左右，还整体搬到了3721所在的和乔大厦。

这在外界看来，反倒像是3721收购了雅虎中国。

他推广“奋进，向前，快速行动”的创业文化，把手下拉到三亚搞团队活动，用最中国的方法——喝酒，而且是当年陪代理商喝酒的那种，以至醉酒掉进游泳池摔掉两颗门牙。

他在做一搜时，没有得到总部的同意，结果直接从3721拿钱，也被默许了。

新举措在雅虎总部看来是离经叛道，而业绩让杨致远们采取了睁一只眼闭一只眼的态度。

矛盾在年底谈判中终于激化，周认为要想大回报就必须大投入，而不能只是靠雅虎中国自身的资金。

周提出了两个方案：收购金额不变，长线的邮箱和搜索业务总部再拨钱；或者协议提前结束，雅虎拿出一笔比当初协议低的金额，双方友好分手。

雅虎的回复是：周和他的团队留下，以收购金额原价为标准支付周鸿祎股权所得。周不认同，因为这相当于买团队，而牺牲投资者的利益。他的做法得到了VC圈的一片好评。

他和IDG VC投资合伙人王功权是好朋友。王功权是 “万通六君子”之一，曾代表IDG VC投资了3721。直到今天，桀骜不驯的周鸿祎仍然认为王功权是影响自己最深的人。

最后，周和雅虎彻底谈崩，于2005年8月31日离职。

现在的周鸿祎仍不肯掩饰对雅虎的不满，他的评价是：“规范的管理和创新是不矛盾的，要追求管理的必要性，不要追求管理的充分性。你看今天有的中国互联网公司大了，上市之后，我不说名字，就显得比较臃肿。有的企业像网易、QQ，公司很大，还是能在很多领域保持积极地进取。

今天我认为上帝已经惩罚了(雅虎)这家公司，他的股东损失很大，公司很多人都去了微软、谷歌。企业都是被自己打败的，自己做了错误决定。”

360：这次我要做伟大的公司

负气离职之后，周鸿祎在IDG VC干过一段风险投资。他投资了迅雷、酷狗、discuz等一大批成功的企业，也在羊奶这样的项目上失手过。他倒是从来不拒绝谈论失败的案例。

换个角度看问题，让他平静了很多。不过做天使投资人，间接体会成功快感或者失败痛楚，显得太不痛快了。

他重新杀回了一线。2006年7月，周鸿祎的奇虎公司推出了“360安全卫士”免费软件，主打卸载流氓软件。百度、CNNIC、雅虎一大批根深蒂固的插件哗啦啦被清理个干净。

周的口号是“替天行道”，与此同时360安全卫士还带上了半年免费的卡巴斯基。清理插件加杀毒，声势很浩大。

老周就这么手刃了亲生儿子——雅虎上网助手(前身是3721客户端)，发布的头两月每天卸载的恶评软件就达100多万，其中雅虎助手就达60万次以上。

他试图以此拿掉“流氓软件之父”的帽子，但也把很多人的饭碗给干掉了。

时任雅虎中国执行总裁田健开始炮轰老同事、前老板周鸿祎，也算开创了网络业的一大先河——门户网站上挂着对另一个公司老总(也是自己公司前老总)的炮轰文章。双方频频抛出声明指责对方，从职业道德上升到了个人品质。

没有无缘无故的口水，据互联网调查公司iResearch的统计显示，2004年3721网络实名收入约为1.5亿元到2亿元左右，2005年增长到近4亿元，2006年开始出现整体下滑，但依然是“瘦死的骆驼”。据田健介绍，阿里巴巴雅虎收入前三名的业务是“3721、短信增值、搜索竞价”。

360安全卫士从根本上清除上网助手，让田健一点流量都拿不到，彻底失去收入，属于釜底抽薪之举。

周田二人大战之际，阿里巴巴(此时杨致远把雅虎中国卖给了马云)的介入更加剧了 “互联网第一口水仗”。马云也来凑热闹，双方像小孩子斗气一样，相互赌咒说永远不投资对方企业，永远不和对方发生业务往来。

几番口水战之后，不了了之。

周鸿祎觉得做安全卫士是一切从用户出发，不小心进入了安全领域。这个不小心引发的后果是，360系已经成为中国互联网第二大客户端企业(第一名是不可动摇的腾讯)：

软件宝库：已经成为下载渠道门户之一，周鸿祎被认为直接动了下载站的奶酪。

保险箱：保护用户网银、网游账号的安全。继十大网游公司之后，又有十大视频网站开始与之合作。

安全浏览器：以安全为主打，已成为国内浏览器市场上用户量第二大的产品。

360免费杀毒：云安全产品，服务器与客户端双结合，很适合互联网时代，3个月用户量超越9年稳居第一的瑞星，由此推动了行业重新洗牌。

在互联网江湖摸爬滚打多年的周鸿祎的“一不小心”，在外界看来却似乎有着缜密的过程：

先从处理流氓软件开始，“悄悄的进村，打枪的不要”，麻痹了老牌杀毒软件厂商，一举占据了网民电脑的客户端，并博得好评；然后再根据互联网时代对安全的最大需要，顺势推出木马查杀，同时和急切进入中国市场的卡巴斯基合作，推出半年免费杀毒服务；到最后，推出正式的360免费杀毒软件，彻底占据了客户电脑。

来自艾瑞咨询的数据显示，截至2009年年底，360杀毒软件在杀毒行业占据30.8%的市场份额，用户量超过1.2亿。此前推出的免费360安全卫士已覆盖国内73%的网民，用户数量接近2.8亿。

这一切对于用户的代价是零，因为360所有的产品都是免费的。

他甚至在互联网的聚会上直呼：“目前杀毒软件的利润都是暴利，是流氓……”

周鸿祎先动了互联网安全行业的奶酪，长久以来，杀毒软件维持着共同逻辑：用户要拿出真金白银购买杀毒升级服务。

曾有安全软件公司的CEO打电话：“鸿祎啊，你这不是砸我们的饭碗，而是到我们家来砸了我们的锅啊！”

就好像微软的windows操作系统开始受到Google的android冲击一样，360系带来了全新模式：免费。

在周鸿祎的逻辑里，互联网的游戏规则和软件业不一样：“只要是人人都需要用的互联网服务，就应该是免费的。只有少数人需要的，就可以作为收费。有一定数量的用户群之后，就可以推出增值服务了。我们不会在软件里搭载广告，广告不是我们的方向。”

他公开宣称学习的对象是腾讯：基础服务免费，用客户端积聚海量用户，然后推出特定的增值服务，通过长尾来实现盈利。

所有人都在问他，你靠什么盈利？他总是哈哈一笑，说不着急，然后解释会推出例如“数据安全存储”等增值服务。

其实周已经有了布局：继续与杀毒厂商合作，拿销售收入分成；在360浏览器上与搜索引擎合作，通过流量指向分成；软件宝库已经成为下载门户和推广平台，其中利益可想而知；当然也还有一些广告；再借助360系平台联合其他公司搞很赚钱的网页游戏……

360的副总裁刘峻当着记者抱怨说，老板为了用户体验，停了太多业务线，比如广告销售，周只肯在安全卫士界面上挂3条文字广告。推出免费杀毒软件，首先影响了在销售其他杀毒软件上的分成。

周鸿祎的回复是：我不想挣小钱。他的理由是如果今天没了Google、腾讯、Facebook，将不可想象，因为他们是伟大的公司，而坐电梯时没了广告显示屏，好像也没什么。

对于周来说，现在所做的依然是在圈地。他给上海银行、浙商银行做免费的网银安全服务，为的就是圈住这一块市场。就像当年他在雅虎免费给别的公司做邮箱，不要品牌，就为了给对手施加压力。

他敢这么做的最大理由还是能搞得定投资商，做过VC的周鸿祎说现在投资者还是肯听他的。

浏览器、手机安全成为他接下来关注的焦点。用了4年时间，一个完整的“360系”渐渐成形。

齐向东，360的总裁，曾经是新华社最年轻的局级干部，从3721就开始追随周。他对周鸿祎的评价是：一个值得信赖的人，讲义气，够朋友。如此心直口快的人居然还能做成事，而且不轻易做事，做就做大事。

不过周的世界永远不缺少戏剧性：在360安全卫士的平台上挂着对瑞星公司的起诉书；他抨击某网络公关公司就是“网络黑社会”；他指责手机安全和互联网安全行业一样都是在欺负网民的无知……

对手指责他窃取用户隐私，他干脆把源代码托管出去让人监管，一副“我敢你敢不敢”的姿态。

有评论者说他是互联网的“战争之王”，其实他声称要推出的“防弹窗”功能一直没做，这会触动太多最有实力企业的奶酪。

争议一直没有消停，而他思考的路径也确实不太一样：

我前几天还在看国共内战的书，讲孟良崮的。我看粟裕的传，也看张灵甫的传。我很想了解共产党是如何迅速结束国民党的，看看能否借鉴在360的事业上。

我看《建国大业》：国民党什么地方都想占，我就想不要太执迷产品线过长，就好比国民党占好多城市，每一个都要留人。共产党在乎的是留住用户，做出好的产品。我是穿凿附会，但共产党的商业合作和公关确实做得好。

蒋介石就是一个不称职的产品经理，蒋很聪明，也很兢兢业业，但天天就是身边的小圈子，他不知道真正的用户是几亿农民。天天搞政治阴谋，撑死搞个暗杀民主党派，完全不了解真正的用户在想什么。

老毛的用户是农民。农民不在乎什么议会斗争，搞土改分田地能打动所有的用户，国民党士兵能就地解放，所以作为产品经理要关注真正的用户。

还有共产党团结一切可以团结的力量，敌人的敌人就是朋友。

我看的层次不高，看了就想和我的干部们讲一讲，对市场竞争是很有帮助。

在他的办公室有价值300万的音响，但没有电脑，很多邮件都让助理打印来看。年轻时干得太猛，他已经有了干眼症，盯屏幕时间不能太久。

不过，隔壁的墙上，挂着一张张的靶纸，这是他在香港打靶的成绩，军用手枪级别。

在北京郊区怀柔，他自己弄了一百多亩山地，搞成了一个真人CS训练基地，还专门请了退伍的特种兵当教官。

他似乎永远都在给自己找对手，然后一个一个干掉。

根据我个人对互联网产品经理（以下简称PM）的理解，画了上面这个草图，想表达几方面的内容：

1、蓝色箭头指向代表PM在工作过程中要接触到的对象。
2、蓝色箭头以PM为中心，指向周围的各部门，说明其在沟通和协调过程中扮演着主动的角色。
3、绿色箭头代表，互联网企业中，PM最经常由哪些工种转变而来。
4、整个图形是人的形状，头部、左膀右臂、双脚、心脏。

我做的这个图只能说具有代表性，不具普遍性，因为企业不同、部门组织不同、管理模式不同都决定PM在工作过程中有差异。今天我只是希望用这个图来和大家讨论一下PM在职业生涯中的起点、支点、增长点。

一、产品经理的起点

图中有三条绿色的虚线，分别指向PM，说明这三个部门或者说这三类工种最可能发展为PM，他们分别是负责产品营销的部门、负责产品运营的部门、负责产品实现的部门。

负责产品营销的部门和市场接触最多，对市场的需求也会逐渐的更了解，而一个产品的起点就在于市场的需求。所以只要能把市场需求表达出来，并让产品实现的部门加以实施，这就已经是PM的起点了。从市场转过来的PM个性很鲜明，沟通能力强、表达能力强、应变能力强，但毕竟还处在过渡阶段，需要学习的方向是产品的管理和经营，例如设计产品功能并且做出产品初步原型，描述产品逻辑等等。

负责产品运营的部门可以说掌握着丰富的行业资源，他们拥有BD、PR、客服等等工种。他们了解行业，对同类产品的历史和现状甚至小小的改动都知晓。用网络游戏行业来举例，盛大是一个典型的游戏运营商，也许他们根本不需要自己开发游戏，只需要把别人做好的游戏产品拿来运作就行，可是一旦他们决定要自己开发一款网络游戏的时候就可以很快的实施，因为他们在运营产品的同时积累了大量的产品经验和市场经验。所以这个部门下的工种也是很容易转为PM的。

负责产品实现的部门，这是现在PM的黄埔军校，可以说80%的PM是从这个部门走出来的。这个部门最了解产品的功能、使用逻辑、数据结构、信息结构等等。他们掌握着产品的“形”。再加上现在好多公司将负责开发的项目经理、负责产品demo的产品设计都称为PM。

还有一种特殊的现象，就是好多企业的老板或者CEO，都在兼任着PM这个职务的事情。

各位看官，您在企业担任的工种是否属于以上几个部门之中呢？如果是，那么可以试试往PM方向发展哦。

二、产品经理的支点

如果想往PM方向发展，或者现在就已经渐渐的进入PM这个角色，那么需要具备哪些支点来支撑PM这个职位的发展呢？

1）脸皮要厚

文章开始那副图表现的是，蓝色箭头以PM为中心，指向不同的部门。说明其在沟通和协调过程中扮演着主动的角色。

各位男士都追过女生吧？主动的前提不就是脸皮厚么？如果在约会之前考虑要是被拒绝了该多丢脸啊，考虑约对方会不会让对方生气，考虑对方是不是根本就不会理睬自己，最后自己被自己吓着了，决定放弃。

PM在工作过程中也是一样，会有很多计划外的事情，例如调整页面、需求变更、迎合市场需要临时做个专题等等。不可能任何事情都在各部门的计划之内，那么在别人档期之外的事情，PM如何实施呢？都找领导来协调？如果事事都这样还需要PM做什么？那就脸皮厚点，豁达一些，都是有感情的动物，没有什么事情是协调不了的。丢点面子是小，耽误了事情那就麻烦大了。

另外，PM在产品管理经营过程中，会遇到很多临时性的沟通，不敢保证每次沟通PM都能够理解，都能够记住，需要PM多问多了解，如果PM自身姿态过高，那么很可能因为不重视而出现问题。

至于其他支点或者说PM应该具备的技能，有篇文章说得很全面，包括沟通能力、无授权领导能力、学习能力、商业敏感度、热爱产品、注重细节、日常产品管理能力等等，推荐大家看看《产品经理应具备的能力》

作为一名成功的PM，除了具备这些能力之外，还有一个必须的支点，那就是心态，工作1-5年是锻炼一个人的能力，5-10年更多的就是在锻炼心态，关于这个问题以后会专门和大家讨论。

三、产品经理的增长点

担任PM的这三年多的时间里，我深深的被这个职位所着迷，对我来说，PM已经不仅仅是一份工作，更多的是一种生活方式。当然，我也担心时间长了会出现“审美疲劳”的问题，于是我也常想，PM能做多久、能向哪里发展、能如何一直着迷下去。

首先：PM在一个企业中因为接触的领域最广，所以需要学习的东西也要最多，不需要成为专才，但是起码也得是个通才。所以PM是个不断积累的职业，即使有一天你失去了这个职位，那么积累的东西别人是拿不走的。

其次：都说PM其实是这个产品的CEO，那么PM之后出来自己创业至少可以比较快的进入状态，能少走一些弯路。

第三：PM既然是和产品捆绑在一起的，那么产品的市场应该也是和PM有关系的，产品业绩的好坏也需要作为PM考核的一部分，产品卖得好，PM拿的薪水多，没有达到市场预期就扣PM的薪水，那么PM其实可以是个薪酬丰厚的职位。

第四：无论互联网行业还是传统行业，PM都是相通的，跨行业并不难。

等等等等•••

一篇下来，似乎已经脱离的文章开头的那张图，有点跑偏了。对于PM这个工种真是有很多感受，有很多东西可以说，今天就先到这吧。感谢大家百忙中的阅读！

就是用规则的格阵来指导和规范网页中的版面布局以及信息分布。

二、Grid系统设计页面具有以下优势

1. 能大大提高网页的规范性。在Grid系统下，页面中所有组件的尺寸都是有规律的。这对于大型网站的开发和维护来说，能节约不少成本。
2. 基于Grid 进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验。
3. 对于设计师们来说，灵活地运用Grid系统，能做出很多优秀和独特的设计，应用“黄金分割”原理确定版块宽高比例。

之前做网页，总再想“这一栏要多宽才好看呢？加一两个像素看看~ 哎呀~ 还是减一两个看看吧……”很耽误时间，没有个定数完全凭感觉。现在好了，有了Grid指导，就可以为所有栏目的宽度做一个约束，这下定宽有数了（优势1），这样页面整体看起来端庄一些（优势2）。

在网页设计发展到一定阶段的时候就必然会和其他学科或领域只是产生交汇和共鸣，网页栅格设计，通过很有逻辑性的公式换算加上一定的数学分析，得到对网页设计有建设性的概念指导，从一定程度上说算是一种创新。

也许有的设计师会认为使用这些所谓的规范性东西会是一种限制而不是创造，在我看来这些新的概念对网页设计来说是一种尝试和提升，会给你接下来的创意构思提供一个坚实的基础，让人从一个新的视角来看待好的网页设计。

在《超越CSS：Web设计艺术精髓》（卓越、当当）这本书中，就提到了网页设计中的黄金比例这个概念。对于很多做设计的人来说，黄金比例并不陌生，它是最符合自然界美感的一个很神奇的东西，在古希腊的艺术雕塑中频频体现出来。对于我们网页设计师来说，只要记住一个数字就可以了：“1.62”。（优势3）

通过Grid 就可以快速省事、有效率、规模化的建成大量页面。一些资深网页设计师，在网页栏目版块布局方面的经验值，实际上就是Grid 的应用。

三、网站栅格的应用实例

Grid 12 x 80

Grid 24 x 40

四、Grid 的生成公式

将Flowline的总宽度标记为W, Column的宽度标记为c, Gutter宽度标记为g, Margin的宽度标记为m, Column的个数标记为N, 我们可以得到以下公式：

一般来说，Gutter的宽度是Margin的两倍，上面的公式可以简化为：

将c+g标记为C, 公式变得非常简单：

下图是Grid 的另一个公式形式，实际同上面相同，只是公式字母变了而已，互相参考着理解Grid 。

五、Grid 960常用尺寸和Demo

12 x 80

16 x 60

24 x 40

Grids Layout

960 Grid System

六、工具

在线工具：CSS整形与最佳化工具

网格方案生成器-1 [ 作者：lifesinger ]

网格方案生成器-2 [ 作者：twinsen ]

1KB CSS Grid 网站上提供了一个生成器用来定制 CSS 网格，并且可以直接下载定制好的 CSS 网格。

七、本文综合以下文章

网页的栅格系统设计

网页栅格系统研究（1）：960的秘密

网页栅格系统研究（2）：蛋糕的切法

网页栅格系统研究（3）：粒度问题

网页栅格系统研究（4）：技术实现

网格(UED所谓栅格化)方案生成器

回复腾讯兄弟，再谈谈960

探索网页设计中的黄金比例

研究网页栅格系统前，来看一组数据：

上面列举的都是Alexa全球排名前100的站点，它们的首页宽度为950px/960px. 除了微软的Live Search, 这些站点有个共同特点：页面结构较复杂，都可以认为是门户型网站。

再来看看Google, YouTube, Facebook, Flickr!, eBay等知名站点，它们的首页宽度没什么固定规律，共同的特点是：功能专一，页面结构相对简单。

根据上面的简单分析可以认为：当搭建页面结构复杂的门户型网站时，开发工程师们不约而同地都选择将页面宽度定为950px/960px.

这是一件很有趣的事情，为什么要选择这个宽度呢？这个宽度值究竟有什么魔力？

神奇的960

设计师们对苹果情有独衷。在 1024 x 768 的分辨率下，打开Firefox：

自然状态下，Firefox窗体的大小约为 974 x 650. 减掉左右两边7px的边框，网页的实际大小为上图中的红色部分，高宽为 960 x 650.

有趣的960就这样出现了。是的，可以认为一切就这么简单。栅格系统最早出现在平面设计领域，设计师们爱用苹果，苹果下浏览器的默认宽度为960px, 于是960就这么“自然”地出现了。

数字背后的奥妙

上面的“自然”出现，细究自然是不让人信服的。苹果系统的设计者们在没有喝醉酒的情况下选择了960，而不是其它什么1000之类的整数，自然另有奥妙。

科学界有很多问题都可以归结到数学问题上，我们也从数学着手：

960可以分解为2的6次方乘以3和5, 这使得960可以分割成以下宽度的整数倍：

2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40,
48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480

共26种（26 = 7 * 2 * 2 – 2, 减去2是去掉1和960自身），我们标记为：

N(960) = N(2^6 * 3 * 5) = 26

根据上面的算法，可以得到：

N(360) = N(2^3 * 3^2 * 5) = 22
N(480) = N(2^5 * 3 * 5) = 22
N(720) = N(2^4 * 3^2 * 5) = 28
N(750) = N(2 * 3 * 5^3) = 14
N(800) = N(2^5 * 5^2) = 16
N(960) = N(2^6 * 3 * 5) = 26
N(1000) = N(2^3 * 5^3) = 14
N(1024) = N(2^10) = 9
N(1440) = N(2^6 * 3^2 * 5) = 34
N(1920) = N(2^7 * 3 * 5) = 30

根据直觉（严格证明也不难，不过还是留给数学系的学生去证明吧），我们得到一个有趣的结论：

要使得N(width)最大，width的取值有两个系列：
A系列： …, 320, 720, 1440, …
B系列： …, 480, 960, 1920, …

N越大，可组合的宽度值就越多。对栅格系统来说，这意味着越灵活！

目前绝大多数显示器都支持 1024 x 768 及其以上分辨率。为了有效的利用屏幕宽度同时保证栅格的灵活度，可以看出960是非常合适的。这样，在目前主流显示器下，960就成为网页栅格系统中的最佳宽度了。（也许不久的将来，将会流行1440）

细心的你也许会记得，本文开头列举的宽度值中，950也出现了好几次。950是怎么来的？和960是啥关系？

首先澄清一个应用场景问题。在最开始指出，对于结构复杂的网站，不少设计师们喜欢采用960固定宽度布局。但要注意的是，960并不是万能钥匙，大部分网站没有也不需要栅格系统。Amazon采用的是宽度自适应布局，最大限度的呈现信息。Google更是简简单单，主题部分就一个列表。eBay的页面非常简洁，商品页面宽度自适应，信息自然流畅，噪音少，购物很踏实。类似的站点还有很多，对于这些站点来说，宽度自适应布局更受青睐。

有个很有意思的网站是Yahoo!, 看起来是固定宽度布局，实际上在CSS中只要去掉一行，就能摇身一变自适应宽度了：

#page {
    width: 70em;
}

为什么Yahoo!最后选择了定宽布局呢？这很可能是因为定宽布局比宽度自适应布局更容易控制。对于结构复杂的网站来说，可维护性和可扩展性非常重要。Yahoo!是以信息展示为主的门户型网站，960的宽度对于信息的阅读比较友善（Joe Clark写了一篇屏幕阅读时有关行长的有趣文章）。种种因素使得Yahoo!最后采用了定宽布局（Tommy Olsson总结了每种布局设计的优缺点）。

这里将只关注定宽布局，适用的场景是搭建复杂的门户型网站。对于宽度自适应布局和相应的栅格系统，暂不讨论（根据实现的技术手段不同，宽度自适应布局又分为流体布局和弹性布局。我个人蛮喜欢弹性布局，以后有时间再研究）。

好了，已经将范围缩小到定宽布局的网页栅格系统，那我们开始吧。

并不遥远的750

还记得800×600的显示器不？虽然才时隔几年，感觉却好像是上个世纪的事了。Mark Boulton做了最早的探索：

将750分割成均等的6份，这就形成了栅格系统，稍加组合划分就形成了两栏布局和三栏布局。Mark Boulton还研究了Gutter（垂直栏之间的间隙）对栅格的影响，有兴趣的可以阅读原文，或者跟着我往下看吧，下面将详细阐述。

几个术语和一个公式

一个标准的栅格系统，包括以下部分：

将Flowline的总宽度标记为W, Column的宽度标记为c, Gutter宽度标记为g, Margin的宽度标记为m, Column的个数标记为N, 我们可以得到以下公式：

W = c * N + g * (N - 1) + 2 * m

一般来说，Gutter的宽度是Margin的两倍，上面的公式可以简化为：

W = c * N + g * (N - 1) + g = (c + g) * N

将c+g标记为C, 公式变得非常简单：

W = C * N

上面的公式就是栅格系统的基础，很简单吧。

950的来历

具体应用时，Margin其实是一个空白边，从视觉上看并不属于总宽度。不少栅格设计里习惯性地设定Gutter为10px, 这样Margin就是5px. 当W为960，分割成6列时，栅格如下图：

上图的处理是左右Margin各为5px. 也可以将Margin集中放在一边，比如右边：

无论Margin放在何处（这只影响技术实现，不影响设计），我们真正要关注的是去除Margin之后的部分：

这就是我们要真正关注的950！将W的含义变为去除Margin的总宽度，公式变化为：

W = N * C - g

将上面的公式实例化一下：

950 = 12 * 80 - 10
950 = 16 * 60 - 10
950 = 24 * 40 - 10

这就形成了960蛋糕的三种常见切法。

12 x 80

16 x 60

24 x 40

上面三种切法，N越大，灵活度越高。可以根据网页的实际复杂度来选用对应的切法。在960 Grid System首页中，展示了12 x 80的应用：

我们来看下 研究（1）中开头列举的网站的栅格应用情况。

Yahoo!是很标准的 24 x 40 栅格：

淘宝网目前只有商城上部分使用了栅格系统（大的两栏布局遵守了 24 x 40 的栅格化，主体部分使用的另一套740的栅格划分）：

网易很不错，采用的是 16 x 60 的栅格系统：

研究（1）中的其它站点都没有真正严格地采用栅格系统。

栅格系统的优势

上面的“发现”是让人有点沮丧的。目前严格采用栅格系统的站点非常少，为什么我们还要努力的让网页栅格化呢？

栅格系统具有以下优势：

1. 能大大提高网页的规范性。在栅格系统下，页面中所有组件的尺寸都是有规律的。这对于大型网站的开发和维护来说，能节约不少成本。
2. 基于栅格进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验。
3. 对于设计师们来说，灵活地运用栅格系统，能做出很多优秀和独特的设计。（详见《超越CSS》一书）

对于大型网站来说，我相信栅格化将是一种潮流和趋势。

下面讨论栅格系统中的黄金分割。

黄金分割

黄金分割可以归结为数学问题：对于长度为1的线段，将其分成两部分 x 和 1 – x, 使得：

x / 1 = (1 - x) / x

化为简单的二次方程：

x^2 + x - 1 = 0

正数解为：

x = (sqrt(5) - 1) / 2 ~= 0.618

这就是黄金分割。这个比例不仅仅出现在诸如绘画、雕塑、音乐、建筑等艺术领域，在管理、工程设计等方面也有着不可忽视的作用。 （这是个自然界的魔数，类似的还有真空光速、普朗克常数、精细结构等等，感兴趣的Google吧）

在平面设计领域，黄金分割点被广泛采用。比如下面这种图：

数一数上面有多少黄金分割？

960栅格，实际宽度是950. 对于 24 x 40 的情景，最接近黄金分割的两栏布局是 350 : 590, 栏数比例为 9 : 15:

但实际使用时，因为窄栏经常用来做导航或放辅助信息，并不需要350px这么宽。因此实际情况下经常被采用的布局是：

上面讲的都是宽度方向上的栅格化，下面我们看看高度方向上如何应用。

高度方向上的栅格

还记得研究（1）中那张红红的很刺眼的图吗？注意高度值560也是很神奇的。

N(560) = N(2^4 * 5 * 7) = 18
560 / 960 ~= 0.583

N(560)比较大，同时可以让高宽比接近黄金分割。针对560, 我们采用 14 x 40 栅格：

这样，我们就在宽度和高度两个方向上都实现了栅格化。

下面推荐一个网页布局工具Grid Design Tool，也是射雕开发的，网址：http://lifesinger.org/lab/2008/grid_design_tool.html

这个工具借鉴了老外的 Grid Designer 2. 功能如下：

1. 1.可以测试各种蛋糕的切法^o^
2. 2.公式中，带灰色小箭头的表示是计算值，可以在三种计算值之间切换
3. 3.注意那个Add Box按钮，添加的Box，可以拖动，鼠标放到边框附近，还可以调整大小
4. 4.还有一些方便截图的小功能，折腾折腾应该就会用

　　09年末，书籍装帧课上老师给我们布置的大作业，让我们做一本精装个人作品集，然后打印装订起来。开始很想好好设计一下，可让人浮躁不安的大四生活，以至于做的时候感觉心有余力而不足，最后只有草草完工，里面的作品博客相册里都要，设计了封面逢低、扉页、版权页，目录以后，再设计一个模板，然后把作品排版进去，我的个人作品集就这样早产了…

　　书籍装帧课上的概念书设计作业，用魔方的形式突出娱乐和智慧的元素，体现书籍可以给人们带来智慧和娱乐的作品，同时魔方正对我们的三个面包含了F、I、G三个字母，也是FIG的LOGO设计模型。