IT's My Life | Madness

(比特网产品设计)

写这个的目地，主要是系统理下目前产品设计的流程,提醒自己尽量去避免一些常见的问题，也能让大家系统的了解天极网的产品设计流程。当然，不保证任何产品都能套用这套方式，主要还是跟据自己工作性质来定。也许这段文字会比较枯燥,希望阅读下去能给大家带来一些启发。

先从项目人员说起吧,项目需要沟通的部门基本是:需求部门(比如:产品经理，某频道负责人或主编) 、销售部、程序部。涉及到我这边主要有:UI(界面设计) 、UE(交互及用户体验) 、 UID(制作) 、SEO(搜索引擎优化)。

大多数产品都是由需求部门提出,当项目完成审批流程后,就会交由产品负责人直接和我们(目前天极网UE还处于起步阶段，我主要扮演UI及兼任UE的职责)进行沟通,进行可行性评估,经过N次讨论后确定结构、风格、功能、并确定开发周期及最终的上线时间。

每个产品主要经过以下几个阶段：

1. 可行性评估
2. 产品原型
3. 产品界面设计
4. 规范整理、功能实现
5. 产品上线
6. 分析报告、优化方案

一　可行性评估

主要执行人员：UI、UE、需求部门、程序部
需沟通人员：销售部

当产品经理确定基本的思路后,会先会跟我们沟通，并说明这个产品的思路、受众及一些自己的想法．接着会拿来一个结构图来和我们探讨实现方面的可行性。我们也会准备相关资料与其进行沟通，主要会从数据报告、功能性及可行性三方面下手，在探讨的同时会指出功能或结构上的一些问题，并提出改善方案，这步一定得仔细，UI、UE深入探讨并尽可能考虑到每个实现的细节,待框架打好后,出好的产品很容易.但如果在可行性评估上出现隐患,余下的其它工作也将会遇到诸多问题。

我们主要从以下三方面进行评估:

1. 数据报告
   通过99Click、Netratings、Counter三套系统来进行数据收集，并在分析报告中指出相应的问题。
2. 功能性
   站在用户角度上，对方案的结构及功能性进行评估，提出并解决操作上的问题。
3. 可行性
   每个产品初期都是感性的，但在不能保证每个功能都能按原有思路进行实现，具体还需要和相关技术     人员进行探讨、碰撞后形成最终的产品思路。

由于各人思考问题的角度不同, 这个环节常遇到大家意见不统一情况，在我接触的项目中，很多产品经理都会将个人喜好溶入到产品设计思路中，如＂颜色用红吧，这样显得比较跳跃＂，＂按钮上加下样式，太不吸引人…＂，跟据自己的经验判断，如果认为不可取，会尽最大能力去说服对方，当然前提是把自己的位置摆正，站在中立的角度上去审视产品。

顺便谈谈沟通，相信大家经常会遇到和产品经理矜持不下的情况，这时用理论及实际案例去说服对方基本是无效的。建议可以采用一对一的方式单独沟通，遇到问题先记下来，放到会后进行单独讨论，人都是要面子的嘛。只要让对方意识到你是在帮他改善问题后，接下来的沟通就会比较轻松。在之前在做Yesky产品库时自己也经遇到这类问题。总之，说服的方式有很多种.无论是威逼还是利诱,前提一定是我的这种方式是可行的,实用的。

二 产品原型

主要执行人员：UI、UE、需求部门
需沟通人员：程序部、销售部

在产品原型方面,主要指的是黑白稿或线稿，除了颜色基本采用黑白的形式，最终出的产品原型将会和实际产品没区别。这个环节会拟定出产品页面的宽度,广告的形式,导航基本样式,各内容的区域的表现形式等…

当经过可行性评估阶段后,产品经理的思路和自己也基本达成共识，接下来将进行原型设计，我将主要分为三个步骤来实现：

1) 　纸稿

一般情况下结构图都是采用word文档描绘，我选择笔和纸的方式，主要还是比较方便、易修改，有任何突发的思路只需要擦一下，就可以直接在已有的基础上进行调整，由于之前的讨论没有实物参照，在这个环节你一定会发现更多有趣的问题。

2)　线稿、黑白稿   

当纸稿确定后，则由UI或UE使用做绘图工具来描绘黑白稿(我主要使用Photoshop来进行这个步骤，跟据个人习惯不同，大家的方式也有所区别，比如淘宝UED Team及Baidu UE更多的则采用线稿的形式)。也许是做UI的原因，我习惯还是采用黑白稿，方便界面设计，在结构上也会精确到像素,比如:导航高度40px.头条采用20px黑体,图片规格:104x85px,页面的各区域的留白为5px…等等，只有这样才会发现更多细节上的问题，当然到界面设计的同时你也会尝到更多的甜头。

3)　原型

完成以上的二个步骤后,产品的基本功能,结构,规范都已经大致成型.这时你可以叫上程序部、销售部及需求部门产品经理，在白板上对着黑白稿做最终的讨论。经过二次、三次调整，最终定下完整的产品原型。

另外，值得提的一点是，在产品原型未确定前,千万别急着去做界面设计,因为之前的讨论主要会通过白板、Word或纸稿。在原型未确定前，有很多潜在的问题表现不是很直白，比如："窄了、窄了，完了，新闻列表只能放八个字"、"广告放不下了"、"数据提不出来，目前没这个接口…"。如果提前进入界面设计的环节,一但有问题，就意味着重新又需要找产品经理、技术部、销售进行再次沟通，这个步骤是很烦琐的,也会让人很郁闷的。

三 产品界面设计
主要执行人员：UI、UE、需求部门
需沟通人员：UID、SEO

目前产品的雏形已基至的本成型，虽然还没华丽的外衣，但凹凸有至身型已隐约可见。下一步将进入界面设计阶段.设计师们也将再次体会到黑白稿给他带来的各种便利.

1)　UI
我的习惯是,主要针对首页进行风格设计，并出3-4套界面,最终挑选出2套左右提交给需求部门,同时也会指出自己最满意一套，和需求部门进行二,三次碰撞后,最终拿出定稿。

2)　UE
UE则开始针对原型进行操作上的优化调整,召集用户并组织头脑风暴,收集到相关意见后，由UE整理出交互及用户体验方面改善意见,并反馈给UI及需求部门。比如:"这个文字需要加下划线"、"按钮上不要加样式,反而没有点击的欲望了…"。

3)　UID
UID即开始着手准备制作方面相关文档.并提出实现方面的意见.等待效果图最终确定后,则开始相关代码的编制(CSS+DIV、AJAX、Java)。

4)　SEO
SEO则根据原型提出搜索引擎优化的意见,为制作阶段代码优化做准备.

这个阶段一定要保证与需求部门沟通到位,当产品界面最终定稿后,建议再组织一次讨论,这次用户面对着是实实在在的产品,所感受会和之前有所不同.对产品效果上来说,这次的讨论也会有不少收获。

四 界面设计规范及功能实现

主要执行人员：UI、UE、程序、SEO
需沟通人员：UE、销售

1)　设计规范
考虑到在动态实现方面,光凭效果图很难直接的给予表现，这时需要配合使用说明文档及设计规范规范来做辅助。比如按钮及文字链在触发前后的样式,文字间距…。如下图：

2)　代码及程序开发
由UID进行页面的代码开发（CSS+DIV），并需严格参考SEO理出的相关规范，针对一些AJAX的动态效果还需要程序部人员协助完成，当静态HTML完成后即由技术人员进行程序嵌套，并实现预期的功能。
这个阶段由UI、UE全程跟踪，保证HTML和设计稿最大限度相似前提下，对已实现的功能进行测试，并出交互设计改善文档，提交给技术人员。

五 产品上线

主要执行人员：需求部门
需沟通人员：UI、UE、程序、销售

这个阶段主要是内容的添加，主要由相关频道编辑完成，对于软性广告位这块还需要和销售进行协调。完成内容添加后，由需求部门、UI、UE进行核查，在保证和内容、功能完整后，进行整体上线。

六 分析报告及优化方案

主要执行人员：UE
需沟通人员：UE、UID、程序、需求部门、 销售

产品上线后，由UE进行数据及意见的收集，在二周后出相关改善文档，协调各部门进行优化的工作。

王小丹：主要网络产品设计工作流程是这样的

网络产品设计：产品制作人写产品计划书，确定新产品或新功能的市场意义和经济效益，提交部门审批，同意后，确认需要设计的部分，和用户体验研究员(user researcher)，信息建构师(information architect)，视觉设计师(visual designer)、user interface designer，互动设计师(interaction designer)，web developer，工程师(engineer)一起讨论需要的支持，然后订出时间计划分工合作。一般是先由用户体验研究员作调查、分析后由信息建构师设计产品架构，然后由互动设计师作出互动流程，之后交给视觉设计师(visual designer)和user interface designer作出视觉设计。然后web developer把设计通过编写程序(html, dhtml, JavaScript)等等再现出来，最后交给工程师。做完后用户体验研究员需要做用户测试，QA(Quality assurance) 需要测验这一产品的每一步骤，确认产品的使用质量，如果有问题需要让工程师或相关人员解决。

小型项目的工作流程局往往限于有限的人力和时间，经常是短、平、快：拿到brief，进行设计，综合意见，投放到网站，总结效果。比如广告设计，一般是我组织市场部开会，集体出创意，然后大家达成一致意见。决定设计主题后发到德国和法国取得相关的翻译。按照雅虎的广告标准，我设计制作出最终的广告，交到广告发行部定期发行。广告运行两周后，拿到数据信息，根据浏览量(page impressions)，点击率(CTR: Click Through Rate)，和conversion rate来分析广告效果，总结经验。

总结起来就是：

1. 产品制作人，写产品计划书。
2. 用户体验研究员，作调查分析。
3. 信息建构师，设计产品架构。
4. 互动设计师，作出互动流程。
5. 视觉设计师和用户界面设计师，作出页面视觉设计。
6. 前台工程师，前台开发。
7. 后台工程师，后台开发。
8. 用户体验研究员，做用户测试确保质量。

应该算是一个比较完善成熟的流程了，“信息建构(IA)”和“互动设计(ID)”明显处于很重要的位置。

谈谈个人感受，国内项目普遍流程就如bluedodo所说：策划＋设计＋制作＋开发，普遍忽略的是第2, 3, 4，或者说是其他某个流程附带完成，第6前台开发也是只存在于大型正规公司，或者说有普遍进一步完善的趋势。

至于UE, IA, ID 如何进行，我觉得没有绝对固定的模式，根据项目实际情况，关键在于团队的默契。不是说国内从业者不知道如何进行，而是根本没有这个习惯，把项目环节细分一下，就很清楚各自职能了。这些流程的核心目的就是逐步保证产品质量，减少“前台开发”和“后台开发”的重复劳动。这方面国内人才确实极少，整体水平基本处于幼稚阶段。

就Yahoo这个流程来看，应该是针对大型的应用型产品项目。看看人家在“确认设计需求”时，就需要几乎所有项目环节参与者进行综合讨论，让人狂汗不已；定开发计划都是大家讨论进行，而不是单方面强制决定，多么人性化啊。

评论：

killuakun ：
小公司的制作分工：
1. 产品制作人，写产品计划书。（某A）
2. 用户体验研究员，作调查分析。（某A某B混合）
3. 信息建构师，设计产品架构。（某B，通常无）
4. 互动设计师，作出互动流程。（某B，通常无）
5. 视觉设计师和用户界面设计师，作出页面视觉设计。（某C）
6. 前台工程师，前台开发。（某B）
7. 后台工程师，后台开发。（某B）
8. 用户体验研究员，做用户测试确保质量。（某B，通常无）

xiaoxiao：比较认同王小丹的“网页设计的重要目的是创造经济效益”，我们最终的目地还是创造更多的经济效益，当然我们在设计的同时也会同时建立一个行之有效的、可操作性的统计系统以分析检测我们的产品或设计能够给用户以吸引力。对比测试会用到，同类产品、竟争对手也会留意到，产品在于不段的调整和优化。千鸟对于这种理想化的东西，我们正在变为现实。

小丹提到大公司往往是一个人全包，这种现象在我们这里也有，不过必竟是少数，整个团队的分工及快速有效的执行力往往是一个人所达不到的。不过我感觉Yahoo这方面的强人不少，而且近期来Yahoo的运作和广告的投放（在广州看到不少），都是有目共睹，相当不错，向你们学习！

王小丹：我想还有很重要的一点我在文章中没有提到。那就是设计对网站或公司的经济效益的影响。设计师提供的是实用美术，服务于一个目标，这个目标或者是提高品牌影响，或者是增加产品效益。所以设计投放到市场之后很重要的是分析设计的表现，研究设计的之间或间接经济效益，总结优点同时发现问题，然后提高下一次的设计。我在设计中觉得很有效的一个方法就是A,B测试。举例：比如同一个广告，照片色彩设计等完全一样，但是广告语不同，在同方式给两个相似的设计相同的浏览量，测试1-2周，根据不同的设计目的来分析那个设计表现得更好：点击率（适用于提高品牌或产品的注意率），conversion rate（适用于需要直接付费的产品或服务）。然后把得到的经验用于下一次的设计。

归根结底，网页设计的重要目的是创造经济效益。优秀的互动设计，信息建构和视觉实际带给用户良好的体验，保持用户的忠诚度，从而带动经济效益。

很高兴我提供的一些信息引发了大家的讨论。其实在大公司也经常是一个人全包，不过可能区别在于，这一个人有综合的技能，把信息建构，产品架构，互动设计，甚至前台开发等流程都包括在设计范围之内。所以虽然人手也不够，但是并不代表忽略细节或关键步骤。而这些往往都是视觉设计师做的工作，在英国现在信息设计师的工资很高也是因为现在大家认识到这一职位的重要性而真正专业的人太少了。很高兴和大家一起探讨。我的电邮：xiaodan.wang@yahoo.co.uk

一叶千鸟：其实大家没必要考虑的这么理想化，而且不同项目对各环节要求也是有强有弱，说到最后还是归结为专业人才对流程的把握上。我们目的不是去设计流程，而是用最优的流程来设计产品。
“对比测试”方法相当有趣，分析是一门科学，设计是一门艺术，把他们完美结合起来是我们工作的目标。

<转载-视觉同盟-一叶千鸟>

当我在读大学的时候，院长曾尝试聚起一个学生咨询团队。他邀请的人没有一个愿意参与——这不值得大家为此花费时间。于是他给这个团队起了个名字，叫“百人团队”，结果没过几天就报满了。赢得局内人的最简单的方式，就是制造局外人。

信用卡公司通过卖别人得不到的卡片赚取了成百亿的钱。
政治家们站起来谈论他们（具有排他性的）宗教，或者让一个特殊利益群体去对抗另外的。
最好的夜总会有着最大的天鹅绒拦绳和最挑剔的门生。

对你提供的服务进行限制，或者限制产品的品质，或者对销售对象（或拒绝销售的对象）采取严苛的态度，这些是历经时间考验的建立杀手级品牌的良方。人们喜欢成为局内人，并且会努力去创造他们自己虚构出来的界限，用以显示他们是局内人的事实。

民粹主义看似一直是推行不起来。

要是蒂凡尼降低价格和质量并且向大众市场推广，那他们就等着破产吧。

网络似乎正在把一些高端的东西降下来。Twitter，雅虎邮件和eBay都是完全的平民主义者。Hotornot，flickr和其他一些网站也同样采纳这样的思想。

我们花点时间考虑一下维基百科，这很有趣。它从最平民主义的、最具包含性的概念起步，随着时间推演，一个具有层次的内部圈形成了。这种排外性是建立在贡献和技能上的，不是竞争或收入，但它仍然是具有排外性的。处在最好状态时，这种排外性推动了网站的运行。当排外性失败的时候，它会限制讨论，限制人们表达零星的思考并激怒局外人。

在启动一个产品或一种服务前，我会首先问自己，“我们要把什么人排除在外？”如果答案是我们无所不包，那就需要为未来的坎坷做好准备了。市场营销的未来（至少是巨大的成功）需要由那些有拥抱大众市场之勇气的人来推进。而利润，至少在短期运作中，也许最适合由那些采纳排外性的人来发掘。

最后一件事：当人们对自己被接纳感到高兴（且看上去对把别人排除在外感到很愉悦）的时候，他们所感受到的好处会被局外人的不满和失望矮化。这是人们会记住一辈子的东西

原文：

When I was in college, the Dean tried to put together an advisory group of students. Nobody he invited joined--it wasn't worth the time.Then he named it, "The Group of 100" and in just a few days, it was filled. The easiest way to have insiders is to have outsiders.

Credit card companies have made billions by selling a card that others can't get.

Politicians stand up and talk about their (exclusive) religion, or pit one special interest group against another.

And of course, the best nightclubs have the biggest velvet ropes and the pickiest doormen.

Limiting the supply of your service, or the quantity of yourproduct, or being aggressive in who you sell to (and who you don't) areall time-tested ways to build a killer brand. Humans like beinginsiders, and will work hard to create their own imaginary demarcations to demonstrate that they've made it inside.

Populism is almost always a hard sell, it seems.

When Tiffany's lowered prices and quality and tried to reach out to the masses, they almost went bankrupt.

The Net seems to be turning some of this upside down. Twitter andYahoo mail and eBay are completely populist. Hotornot, flickr and otherwebsites have embraced this idea as well. (Worth noting that gmailstarted as a totally insider service, with a limited number of invites,shared person to person).

It's interesting to take a second to look at wikipedia. It startedwith the most populist, inclusionary point of view of all, but overtime, people being people, a hierarchy and inner circle has been created. The exclusion is based on effort and skill, not race or income, but it's still exclusionary. And at its best, it makes the sitework. When it fails, it limits discussion, reinforces small thinkingand enrages the outsiders.

The first thing I'd ask myself before launching a product, aservice, or a candidate is, "who are we leaving out?" If the answer is no one,be prepared for uncharted waters. The future of marketing (at least the big successes) is going to be fueled by those with the guts to embrace the masses. The profits, at least in the short run, may well be found by those that embrace exclusion.

One last thing: while people are delighted to be included (and seem to enjoy excluding others), the benefits they feel are dwarfed by the anger and disappointment of those excluded. It's something that people remember for their entire lives.

<转载 译言>

其实这篇是《用户体验的要素》的读后感，其实读了已经快2个月了，刚读完写读后感会比较全面，而事隔一段时间再写就能看出哪些是真正沉淀下来的要点了， 也算是给自己找个偷懒的理由吧。

大产品设计决定用户体验，而小产品设计又分为五层，帖一张业内著名了好几年的图。