互联网产品经理入门级分享

写在前面（或者说看前请先阅读„„）

希望下文对刚刚、正在，和准备进入互联产品经理领域，或对ui、ue设计等方面感兴趣的朋友有一定帮助，或者可以快速引导你入门。这些内容基本都是从各站众多相关文章中摘抄出来的。有的进行了简单的翻译，有的重新绘制了说明图，一些可以看懂，或可以借助翻译网站（我用的是translate.google.cn）看懂的英文没有翻译。

本文档涉及UI、UE、产品设计、视觉设计等方面的文章抄录和笔记。我在每段前面分别说明了大致下面要讲什么，和在之前工作中遇到的小的案例。所以严格的说，这篇小的文章是典型的‘抄袭’类添油加醋。为了不让文档中涉及的原作者痛骂，我先主动承认：‘此文档为个人学习，摘抄，笔记所用，分享出来绝无借助抄袭和剽窃原作者劳动成功发家致富之企图„„’

所以你能看到我的这个文章是免费分享的。但请保留我本人原作扩展笔记和说明的权利。

开始前再啰嗦几句：对于互联网的产品经理，有很多硬件和软件的需求。如果不掌握这些最最基本的常识，很可能在你自己感觉良好的时候，大家都已经知道你是一个笨蛋了^ ^ 知识都是可以学习的，在一个行业中，分享和开放的心态更为重要（除了商业机密）千万不能因为你看过别人没有看过的书或文章，就对这些内容守口如瓶。反正我会推荐比较好的文章给同行和同事。

在一个团队里，如果你身处产品经理的位置，请时刻牢记一句俗语：“群众的眼睛都是雪亮的”如果你没有某一方面过人的能力，没有直接为公司赚到钱，并且不去提高自身，只知道迎合领导（当然，有些时候是必须的，这是沟通的技巧，以后可能会提到…）那我还真是强烈的建议你：“请千万别跳槽，终老在这里，不要去祸害别的团队„„” 哈。

志同道合的朋友可以加我的QQ469793，共同探讨和提高。

UX

笔记：

UX 这段介绍了一个基本的设计概念The elements of user experience （用户体验的要素）自上而下分别是：视觉设计、界面设计、互动设计、内容、用户需求。在网站中也许可以这样简单对应起来：视觉设计（美工）、界面设计（ui）、互动设计（ue）、内容（编辑）、用户需求（网站定位）。

带着上面的理解再去看下面的文章，可能会有助于你在工作过程中更好的理解。

Lets try to define UX：

A look at many UX models 1/UX elements 2/UX honeycomb 3/UX forces 4/UX umbrella

UX： Useful Usable Desirable Accessible Findable Credible

if it’s not useful , who cares if it’s usable?

don’t make me think! ( Steve Krug, who wrote the book)

positive experiences build brand loyalty 可取的，积极建立品牌忠诚的经验 available to all, regardless of disability 无障碍 you can’t use what you can’t find

quality design builds trust 优质的设计建立信任

笔记：个人认为上文中有两句话说的非常精辟： Useful：if it’s not useful , who cares if it’s usable?

（如果是没用的功能，谁关心他能不能用？） Usable：don’t make me think!

（如果是可用的功能，别让我费劲去想该怎么用！）

但是这两句话的背后，隐藏着两个条件：1、你的经验足以支持你的判断2、你有足够的数据说明你的判断，否则这两句精辟的话请放在你‘禁言’的词典里。

笔记：这张图是一个网站的完整设计思路。如果你早就深谙其道，请轻轻的嘲笑我一下这只井底的小青蛙。如果你不能深入的理解，我建议你暂时把自己职位里的‘策划’、‘产品’、‘UI’、的字样忘掉。好好研究一下张图的思路。这是一个完整的用户UE流程，涉及到用户的预期和你最终网站运营能力之间的关系。

往这儿看，希望你没有快速的翻页，下面是我简单理解的上图，请配合你自己的理解：

笔记：关于上图的理解不多说了，转化为自己的才好。千万不要受我干扰（你也可以理解为我懒得打更多的字来说明此图^^ ）

KNOWLEDGE

笔记：名如其问，知识。这里说的知识是最好你都有所了解的，或者至少其中的某一项非常的专精。（我非常感谢家人支持和理解我学完成了心理咨询师的课程，然我在看到第一行的时候不至于遭受当头一棒，也感谢国家„„），而其他的基本都停留在只看过若干文章的阶段，真正体会到了‘书到用时方恨少’„„ 大家请自行解决^^

Including ：

cognitive,psychology,perceptual psychology,linguistics,cognitive science, architecture,environmental design,haptics,product design,information design, information architecture,ethnography,brand management,interaction design, service design,storytelling,heuristics,desigh thinking

（认知，心理学，知觉心理学，语言学，认知科学， 建筑，环境设计，触觉，产品设计，信息设计， 信息架构，民族志，品牌管理，互动设计， 服务的设计，讲故事，启发，思想浅探）

relationships(customer vs user)

customer and user might be different or they might be same

if you design for a service across all its touch points its customer focused design… if you consider only a product its user focused design... design must consider both…

(关系（客户比用户）

客户和用户可能会有所不同，他们可能是相同或 如果你的服务设计其所有的客户接触点集中设计.. 如果你只考虑产品的用户集中设计... 设计必须同时考虑)

A real world example ...

\"in a design project that we did in Indian markets, tough most of the users of TV are women, i was asked to design keeping in mind the men too ..\"

-the man had the buying,decision making power. the customers were men and users were primarily women.

-we did an extensive user research to check if wome (the user) had enough buying power to be customers too

-if we just catered t women and their preferences that was not enough. the first touch point with the TV was at the shop.

-the men came and bought,here the customer decided what to buy... he might or might not have kept the user's preferences (women) in mind.

笔记：这个例子比较简单，大致是说在印度市场男性和女看电视收到的影响，经过调查之后发现市场的重点。是一个比较典型和简单的通过用户习惯进行市场决策的过程。在网站设计中，这一点同样适用，不过在实际工作中，通过网站发放调查问卷的效果并不好。所以我们可以投机取巧的多看同行业网站的情况，当然不是鼓励你和别人一样，所谓‘学我者生，像我这死’就是这个意思。

再来一个简单的例子：为什么现在的大部分注册系统都通过邮件来注册？因为EDM（邮件广告）、和病毒营销等运营手段都需要知道用户的有效邮箱才可以实现。一旦用户注册之后，你想让他再填更多真实信息付出的代价要远远大于在他开始有兴趣注册时候付出的代价。虽然早一批用户的习惯是先给自己起个名字（注册昵称），但是由于社交网络的兴起，用邮箱注册已经渐渐成了用户注册时候认可的方式。

所以现在在你设计注册系统的时候，可以放心要求用户来使用邮件注册。并且尽可能的让用户体验到：‘邮件注册的步骤是简单的，和别的网站没什么区别，这不是我们网站另外给你设置的障碍’

WEB DESIGN

笔记：这部分叫web design 但实际上更像一个网站的开发流程，但这个流程也有问题，我就切身感受过把软件工程师的工作和功能定义分割开的困扰。所以一个比较好的建议是，在功能定义初期，就要让工程师了解在做什么。这个图里也没有设计销售部门，虽然通常他们是在‘需求’这个环境。但是完整的了解项目的全貌，对于各方来说是有益的。也就是之前提到的‘是否愿意分享’。

因为这个过程很可能会分散‘产品经理’的功劳，也会有很多人挑战你的设计和想法。但是如果你不能处理这些问题，不愿面对这些问题，那你的‘产品经理’名衔，就会永远挂着这个引号。虽然这类带引号的‘产品经理’在业内很常见，而且很受宠^^

1：

2：

GAME DESIGN

笔记：游戏设计和网站设计截然不同。在这方面我只做过几个互动聊天、社区游戏、竞猜什么的小项目，还在写一些并不足够完善设计和策划，后者到目前为止还尚未完成其中的任何一款demo，所以没什么发言权。

但是下面这些简单的‘一句话介绍’，确实给了我一些启发，作为一个专题特此发来分享。

Who Does UI Design ？

unhappy texture artists junior programmers

pressed-into-service Associate Producers - sometimes with art degress,even outsourced contractors interns

... a star studded cast

rocker scientist geniuses who work in other fields What is UI Design ？

some good common goals -Consistency

.with yourself,with games,with software,with the world -Transparency .get to the game -Accessibility -Fun!

UI Design for Games

-Flash

.either by itself,or compiled onto a console -Windows(GDI/DirectX/Directlnput) -J2ME/Brew

-Unreal or other Engine(Torque)

-DrawSprite(int x ,int y,Sprite *mySprite)

Talking Points

Why don’t we use the Windows UI in games? -Different input devices ( joysticks vs. mice) -Tech reasons (can't run on Mac or conoles)

-Traditions and consistency （形成传统的windows操作模式）(\"pause\" menu) -Artistic immersion/suspension of disbelief -Goals （目标）are often different .simplicity versus power

.fun versus productivity （产量、生产率） -Sometimes,you do!(Aero interface)

Why is not the WoW inventory resizable? -Nothing else is

-The art wasn't built for it

-Resizable（可调整的大小） implies movable -MMO tradition (传统)

-Fixed unmber of items per bag

-Allows Blizzard to position things for you

-But most importantly : Because it doesn't have to be

Why is the Star Wars Galaxies inventory window resizable? -Because everything else is -Because the art was built for it -Because they are also movable

-Because the size of the inventory is very large

-Because, ultimately（最终）, we found our players enjoyed the complexity

Why don't we have a \"Master Toolkit（用户工具控制面板）\" for UI Design for games? -\"Not invented （造假）here\" syndrome

-Variety of different platforms （放置不同种类的平台） -Different genres have different conventions -\"Innovation\" （创新）

Tips & Tricks

Color is very important

-Red for foregrounds（凸显）,Blue for backgrounds -Vibrant（充满活力）,even if you think you shouldn't .Contrast is（对比度） very important

.Primary colors （windows原色）pop off the screen

-Always view color on the target （目标）device（意图）

-Some players are color-blind(or just blind!)

\"Read\"

-v.,intransitive（及物动词）,of text,etc.:\"to be interpreted or read in a particular way\" （：“进行解释或读取的一种特殊方式”）

-Things that \"don't read well\"are confusin as the eye scans over them （不容易读读懂等于给他们看天书）

-Things that do read well are easy to,well,read-information jumps off the screen commensurate to its importance

（太简单的信息，可能让他们关掉了对话框，在看到重要信息之前）

-Animation（动画） is bad, esp. for background elements（元素）

-Things that are the same should be the same and different should be different .imaging a \"Sharpen\"（锐化） filter on the entire （整个）game

-Use changes of color or intensity（强度） to indicate （显示）information .Disabled,selected,important

-Use bright （明亮的） foreground/background colors -Choose a good font(Sans Serif)

Always Use Target Device

-Screen Space (physically) （物理显示器空间） -Color depth （色深）and color precision （精度） -Color reproduction （再现）

-Pixel precision – fuzzy（模糊） CRT versus sharp LCD -Touch screens -Flicker?

-Lighting conditions?（照明条件-游戏者的环境）

游戏中单一界面操作流程，步骤越少，越简单为越佳。

公式定律

笔记：这部分读起来枯燥（我在读的时候睡着了一次„„ 杯具）但是一旦理解了，应用起来会觉得底气十足。尤其是GOMS模型，不了解这些知识，很难把我们点一个按钮和MPMK 这个公式联系起来。怎么样？是不是很有兴趣看一看？好，请在自己最清醒的时间看，不要像我一样^^。

（其实后来我严重怀疑大学的计算机课都讲过，不过因为我不是计算机专业而不知道，尴尬了„„）

费茨定律：

费茨从试验中发现人的手的运动时间与运动距离，要求的准确程度有关，可以用下式表示：MT=K*log（2*D/W）MT=K*log(2*D/W)

其中MT是手运动的世界，单位是秒，D是运动距离，W是目标的宽度，K是一个常量，约为0.1。

倘若用户行为位于一个控件内部时，这一计算公式可以演化为另一个定律：

锡克定律：

随着选项数量的增加，做决定所需的时间也越长。 锡克定律所给出的公式是：

RT=T0+K*log（N）

其中RT表示做决定所需的时间开销，T0表示一个基本事件，K为一个经验常数，N为选项集的规模。

恰好精确的符合了有序搜索算法中的折半搜索的开销计算： ST=T0+K*log（N）

其中ST表示折半搜索算法的时间开销，T0表示一个基本时间（代码读取等固定开销），K为单次比较计算的开销，N为待搜索集的规模。

在费茨的公式中，D/W即可以表示为在用户的运动范围内，容纳的相同个数的目标数量。

GOMS模型：

GOMS（Goals Objects Methods Selection rules）模型表述了用户使用计算机人机交互界面的基本流程，并给出了一种量化评估人机交互界面的方法。GOMS模型由以下四部分构成：

Goals： 用户目标 Objects： 对象 Methods： 方法 Selection rules： 选择规则

GOMS模型将典型的用户交互过程分解为以下五个子过程，并测试了每个子过程的花费时间的典型值：

名称和助记 K 击键（Keying） P 指向（Pointing） H 归位（Homeing） 典型值 0.2秒 含义 敲击键盘或鼠标上一个键所需的时间 1.1秒 用户（用鼠标）指向显示屏上某一位置所需的时间 0.4秒 用户将手从键盘移动到图形输入设备（鼠标），或者从图形输入设备移动到键盘需要的时间 用户进入下一步所需的心理准备时间 用户等待计算机响应输入的时间 M 心理准备（Mentally preparing） 1.35秒 R 响应（Responding） 不确定

规则0：候选M的初始插入

在所有的K之前插入M。在所有用于选择命令的P之前插入M。但对于用于选择命令参数的P，不要插入M。

规则1：预期的M的删除

如果M前面的操作符能完全预期M后面的一个操作符，则将M删除。比如你要指向一个按钮并点击，那么MPMK可简略成MPK。

规则2：认知单元内M的删除

如果一串MK属于同一个认知单元，则删除第一个以外的所有M。例如你要输入bingo，

那么操作是MKKKKK。

规则3：连续终结符之前M的删除

如果K是一个认知单元后面的多余分隔符，例如命令的分隔符后面紧跟着参数的分隔符，则将之前的M删除。

规则4：作为命令终结的M的删除

如果K是一个分隔符，且后面紧跟一个常量字符串，例如，命令名或者任何每次使用都一样的实体，则将之前的M删除（加上分隔符会成为一种习惯，因此，分隔符会成为字符串的一部分，不需要单独的M）。但如果K是一个命令参数的分隔符，或者可能变化的字符串，则保留之前的M。

规则5：重叠M的删除

不要计入任何与R（等待计算机响应的时间）重叠的M。

之后，可以对通过六条规则修正后构成的序列集来计算其所花费的总时间以比较其优劣。

对于五个子过程中的P过程（指向），一个改进方式是可以利用费茨定律或者锡克定律来计算其耗费时间，这样可以得到更准确的结果，但由于事实上费茨定律或锡克定律对于GOMS整理结果的影响是比较小的，它更多的适合应用于局部的对比而非整体计算场合。

产品Ui设计图

笔记：最后这段是一个国外的产品设计图。说了和看了上面的很多东西，借助这个回到现实吧！在产品ui设计里，没有任何的注释，这些都需要自己加上，说算一个练习也可以，巩固知识也可。

写到这里，发现自己还有很多不足，在写的过程中就会有很多问号在脑海闪过，我想我还会陆续更新一些东东的，希望能引起自己的和你的共鸣，共同学习和探索互联网产品、项目方面的技巧和心得。如果此文能有幸被你看到，请不惜赐教。

并祝大家工作顺利。（下面是产品案例）

无效数据 和 分组

密码验证

特殊/非法 用户名验证

提示项

最大字符数

Thanks

2010-5-17