丁宇 | blog

第一届人本设计沙龙于09年11月下旬成功举办后，很多朋友一直在问我们什么时候办第二届。现在春暖花开了，我们的筹办工作也就此拉开序幕。

简介

这次活动的主题和上次一样，仍然围绕着Web产品的设计和运营。地点在上海，我们在寻找合适的酒店，所以具体位置没有定。hax负责这个事情，有场地推荐的话可以和他联系。至于时间，考虑到我们确定各项事宜、演讲者准备和大会宣传等因素，暂定在4月中旬。

征集主题演讲

我们在征集主题演讲！无论是实际的项目经验，还是一些设想，只要符合我们“Web产品设计及运营”这个主题，都可以拿来说。有意者报名要从速了，呵呵。我的邮件和GTalk是： felixding[at]gmail.com。

活动的形式

和其它类似会议不同的是，我们从一开始就想把这个活动办成一个可以畅所欲言的、轻松惬意的沙龙，我们希望演讲者可以和观众、观众和观众之间都可以有效交流，而不是演讲结束了底下都不好意思举手发言。因此上次活动时，我们想了一些办法，比如设置了一个“5分钟闪电发言”的环节，以便鼓励更多的人讲话；并在会场两侧布置了一些落地灯，好让环境看起来温馨一些等等。

但这里边有个矛盾的地方。就是活动办好了，参加的人自然就多了，而人一多讨论就很难进行，此时活动就很难称得上“沙龙”，也违背了我们的初衷。所以为了解决这个问题着实让我们费了一番脑筋。目前晓刚、hax和我的打算是，活动开始有个开场的主题演讲，介绍一下活动本身；然后把活动拆分为并行的2-3个小会场，每个小会场依次安排2-3个主题发言，每场人尽可能少，让在场的朋友都能充分活动讨论起来，同时，允许会场间的自由流动。这有点类似于2007年在北京召开的那场User Friendly大会，那是唯一一次允许参会者在分会场内自由流动的UF大会，我和hax参与了几次UF大会，还是最喜欢07年的这种形式。

当然分会场也有缺点，显而易见的是，虽然我们允许自由流动，但你不可能同时听不同的分会场，因此选择一个必然意味着放弃另外一个。从另外一个角度说，你去听的，肯定是你最喜欢的，呵呵。

这是我们目前的想法，实际操作中还有一些问题有待讨论解决。我想听听诸位的意见，尤其是参加过第一次活动的朋友。

 

过几天会有活动的官方站点推出来，届时请以网站上的信息为准。在此欢迎各位将活动的消息奔走相告 :p

我是无意中发现这个软件的，试用了以后让我彻底改观了对铃声制作软件的看法－原来此类软件可以做得这么好用的！

软件启动后会直接读取iTunes的曲库，这样用户就不用再傻乎乎的去一首首打开mp3了。很棒的设计。

选取一首歌曲后，界面下方会直接显示歌曲的信息和波形图。

要截取声音片段，根本不用像我原来用过的此类软件那样、在播放的过程中设定片段开始和结束，而只要用鼠标拖动那个蓝色的区块、并调整区块的大小就行了，非常方便！

更赞的是它的预览设计之妙完全出乎我的意料！按下右下角的Preview按钮后，软件进入预览模式，此时它会自动重复播放声音片段，无论是你移动了声音片段的位置、还是调整了声音片段的长短，预览都会在操作完毕后自动开始。

做铃声时最麻烦的一点无外乎调整铃声的开头和结尾，常常要反复的修改和预览。很贴心的是，当你修改完结尾后，软件会自动地从后面几秒开始播放，这样马上就能听到调整完的效果，非常方便！

制作完毕后点一下Send to iTunes，铃声就被传进iTunes的曲库了。不瞒你们说，因为担心麻烦，我买了iPhone几个月来从没改过铃声，这还是第一次，呵呵。

传统上写产品需求文档（PRD）的做法，就是把用例、流程图和网页原型图一股脑的放到一个Word文档里。一般一个产品都包含乃几十个乃至上百用例，每个用例都有自己的流程图，每个流程图又包含了少则几个多则几十的网页原型图，结果就是产品需求文档变得庞大无比，写的人费事儿，读的人更惨。

自从我受到了这样文档的折磨，我就一直都在琢磨怎么才能把文档写得更简单一点，让阅读的人－通常是设计师和程序员－能够在最短的时间内领会产品的设计。

原来做UI设计师的时候，我创造了一种用流程图来表示产品交互的办法，这个方法受到了很多人的欢迎，这篇文章也引起了一定的反响。其实当时在实际使用的时候，我不仅产出这样一份流程图，还利用网页热区，把流程图中的界面元素（蓝色的元素）和原型网页（HTML文件）给结合起来了，这样设计师和程序员在看流程图的时候，只要用鼠标点一下界面元素，就可以连接到原型网页，非常方便！这个办法我一直都在用，只是当时没有写在文章里罢了。

后来随着工作性质的变化，我需要越来越多地考虑产品的整体和功能、而不是像原来一样只在特定需求内围绕界面做文章，我就开始寻找把用例整合进前述方法的可能。在经过了一段时间的摸索和实践后，我逐渐形成了自己特有的一套产品需求文档的写法，为了表示区别，我称之为“产品设计文档”，简称PDD。

本文就是对PDD的介绍。

PDD的组成部分

PDD有三个组成部分，它们分别是用例、流程图和原型图。

用例

用例从整体脉络上定义了产品所具有的功能。比如对于一个邮件系统来说，“写邮件”、“发邮件”和“删除邮件”等功能都是用例。

用例比较流行的写法，是在每一个用例中标明它的前后置条件和异常情况等属性。不过在PDD中，我完全放弃了上述属性，只保留用例的名称和简要描述。因为“用例”的出发点就是“用户”，如果你站在一个用户的角度来思考产品的功能，你会发现那些属性你根本就不会考虑。并且，各种前后置条件和异常情况，完全可以放在流程图中，这样更清楚。

流程图

流程图是对用例的细化，它可以清晰地表现一个用例所有相关的前置、后置和分支条件。流程图的画法我在“画Web流程图的一点心得”一文中已经说得非常清楚了，在此不再赘述。唯一值得注意的是，我以前并没有意识到流程图本身也是有ISO标准的，因此“画”中使用的流程图元素并不符合ISO标准，也和一些已经成型的系统（比如这篇“描述信息结构和交互设计的图示词汇表”）有出入，因此元素在使用上还存在一些问题。在日常工作当中我已经对元素使用做了修改，以后有时间我会更新“画”一文的内容，也有可能直接把模板放出来。

原型图

原型图是对流程图中“界面元素”的展现。这个东西没什么可说的。

PDD的表现方式

用例、流程图和原型图一般都是产片需求文档（PRD）中已有的东西，PDD在这点上和PRD没什么区别。而下面要说的表现方式，则是PDD的精髓。我比较孤陋寡闻，还没看到过有人像我这样组织这三块内容，所以姑且认为这是我的首创吧。

用例和流程图

首先把用例和流程图整合起来。方法很简单，利用网页的frame标签，新建几个帧：

1. index.html－另外两个帧的容器，不用解释吧
2. navigation.html－导航帧，用于存放用例列表
3. main.html－默认情况下的主帧，用于存放文档简介、作者、版本和更新日志一类的东西

然后新建一大堆网页，把所有的流程图都放在这些网页里，每个流程图（即每个用例）放在一个网页里，最后修改navigation.html，把用例名称和其对应的网页链接起来。完工以后，页面应该是下面这个样子：

PDD文档首页

左侧为用例，右侧为流程图

好了，左侧为用例，右侧为流程图，这样就把用例和流程图整合了起来，并且结构清晰，查看方便。

流程图和原型图

整合流程图和原型图的重点在于，提供一种方便的方式，以让读者能够在看流程图时方便的看到其中包含的原型图。为了达到这个目的，我的做法是：

1. 在用OmniGraffle画流程图时，选择界面元素（蓝色的那个），然后在“检查器”－“属性：动作”中选择“打开文件”，然后按“选择文件”，找到你的原型图文件并按“确定”，这样你这个元素就和原型图链接起来了。如下图所示：

   

2. 在OmniGraffle中输出这个流程图文档时，不是选择图片，而是选择“HTML图像映射”，这样在生成出来的网页上，蓝色的界面元素都是可以点击的，点了以后就链接到原型图。很方便对吧？但这还不够；

   

3. 用Lightbox，把所有图片链接都改成弹出图层，这次再点刚才那些链接看看，效果是不是更棒？

   

好了，通过这样的方法，产品设计文档（PDD）就将用例、流程图和原型图这三块内容有效的整合了起来。

第一次活动圆满结束！

一周以前放出了活动的消息，截止到活动前一天，报名人数超过150名，而当天实际到场的则超过120名！现场真的是非常火爆，大厅内的椅子一加再加，很多后来的朋友只能坐在门外了！

辛勤的工作人员

感谢活动所有的工作人员（估计大家昨天都累坏了）：曹晓刚（活动发起人)、hax（活动发起人）、老郭（俺滴老板，赞助了本次活动）、何昕悦（默默地做了很多后勤工作，包括在现场点心不够的情况下又空运大量KFC蛋挞）、王莉莎（负责签到等后勤的美女）、老范和杨延哲及安静（摄影师团队）、唐一丁（帮我们出谋划策组织会场）、kinki（给我们制作漂亮海报的美女）……

会议文字直播

人间网上的直播

Twitter上的直播

问答

会场中和会后很多朋友问了各种问题，这里一一作答：

问：这个活动以后会继续吗？下次什么时候举办？

答：当然会办下去！办一次这样的活动牵扯到很多的人和事，非常消耗精力，更不要说大家主要是利用业余时间来做。因此目前尚不能决定下次的活动时间，保守估计会在明年春天。届时会有各种通知，比如你可以订阅我的RSS、follow @hdsalon、留意JavaEye、人间网、Web20Share、Blueidea和UCDChina等网站。

问：下次活动有没有什么变化？

答：目前能够透露的是，为了进一步提升话题和讨论质量，我们会把投票机制引入话题的选择过程。此外，“5分钟闪电发言”会考虑改成5-15分钟的弹性发言。

问：演讲人的PPT能不能放出来？

答：曹晓刚的可以：http://www.slideshare.net/FelixDing/ss-2564257

一些相关的blog文章

• hax：11月是个开会和聚会的季节
• Ben：人本设计沙龙后感
• 携程UED：产品设计之扮演用户
• Slloser：11.22日，张江人本沙龙记
• 牙医：参加盛大的人本设计沙龙
• Jerry：人本设计沙龙会后随笔
• 豌豆小囡：人本设计沙龙
• rabbit：从用户到产品设计师

活动的照片和视频

活动视频下载：http://dingyu.me/hds/video-200911.m4v。

部分活动照片如下，更多的照片详见Flickr上的相册。

如果你也拍了照片，欢迎发给我：felixding[at]gmail.com。照片或是你blog的链接也可以。

11月17日更新：沙龙的官方twitter上线，请follow @hdsalon，统一使用tag #hdsalon。

11月16日更新：沙龙的专题网站发布，内容不断更新中。请随时关注这里的消息：http://dingyu.me/hds/

朋友们，由我发起的“人本设计沙龙”，将于下周日下午在张江高科博雅酒店粉墨登场！这是一个面向网站产品经理、产品策划、需求分析、设计师和所有网站产品设计从业者的交流活动。以下是活动介绍：

活动主题

我们只谈Web！所有和Web产品设计相关的话题都可以，比如：

• 发布你的新站点、你创造的新功能和新概念

  Twitter通过SXSW而大放异彩，我希望“人本设计沙龙”会成为下一个重量级产品的舞台！

  你也可以介绍一个你创造的自认为相当棒的新功能，甚至是你提出的一种新的产品概念。

• 讲解一个技术方案的应用

  如果你想谈技术，请重在应用，而非技术方案本身。

• 分享自己的产品设计经验和心得

  “需求文档怎么写”、“产品原型应如何设计”，这些都是产品设计师常见的问题。如果你在产品设计的某个环节上有经验或心得，不妨拿出来分享。

• 征询某个问题的答案

  工作中遇到了问题？别担心！"沙龙"提供了“5分钟闪电发言”这样的机制，来让你抛砖引玉。

• 寻找志同道合的朋友

  说不定你还能找到另一半呢！要知道设计师中MM的比例还是相当高的 ：）

活动形式

沙龙主要以主题演讲＋百家争鸣的方式进行：

• 主题演讲

  每次活动共有三场主题演讲，每一场主题演讲为时40分钟，可以让讲师和听众充分交流互动。

• 百家争鸣

  由数场“5分钟闪电发言”组成，可以提问等解答，也可以迅速介绍自己的产品或设计。

谁能参加

我们欢迎所有对Web产品设计有兴趣的朋友，比如：

• 设计师
• 产品经理
• 程序员
• Web传经布道者
• ……

一些必须遵守的规则

• 不能泄露所在公司的商业机密，不能违反自己的职业道德

活动时间、地点及费用

• 2009年11月22日（星期日），下午1:30分开始签到，2点活动正式开始，5:30结束
• 上海浦东新区张江高科碧波路699号博雅酒店一楼会议厅，张江地铁站出站后步行5分钟即可
• 本活动由盛大创新院赞助，参加者无需支付费用，同时提供免费的咖啡、红茶、甜点、水果……

报名及话题投递

虽然不报名也可以参加，但你报名可以让我们更好的准备，比如定多大的会场和多少零食等等。

目前这次活动尚有一个主题演讲、以及4-6个“5分钟闪电发言”的机会留给各位，请踊跃投递你的话题！

立即报名/投递话题！

活动组委会

• 丁宇 felixding[at]gmail.com
• 曹晓刚 xiaogang[at]gmail.com（活动赞助与媒体支持请与他联系）
• hax

同时感谢所有为这次活动帮过忙的同事和朋友们，让我们共同期待它的到来！