互联网产品设计软件及工具 - UCD大社区

互联网产品经理常用软件及工作平台

胡晓 — 2010-08-25 23:12:29

上期书友会分享了工具，大家发信给我说希望能够写篇博文来分享，PPT还不够他们使。好吧，我再啰嗦一次。我不想和大家具体去讨论一个工具如何如何使用，具体有那些细节功能，我相信，工具只有在亲自使用、体验、完成工作任务才知道是否合适、好用、够用。在这里，我系统的和大家分享一下，到底会用到那些软件、工具、平台，在全局上面有一个了解。工欲善其事必先利其器，好的工具软件可以大大提高工作效率，工具各有优劣，大家按需取之，我分享的主要是Windows平台。

第一、互联网产品经理的职责范围、能力要求：

其实说工具，首先还是得来了解一下互联网产品经理这个具体岗位的职责、具体从事的工作、职能、以及相关要求。这样才能够知道需要掌握那些软件及工具、平台。我稍微做了一些梳理，总的来说关键职责主要是以下五个方面：

1、市场调研
市场调研是指研究市场以了解客户需求、竞争状况及市场力量（market forces），其最终目标是发现创新或改进产品的潜在机会。形成商业机会、产品战略或商业需求文档（BRD）。

2、产品定义及设计
a)产品定义确定产品需要做哪些事情。通常采用产品需求文档（PRD）来进行描述，PRD可能包含如下信息：产品的愿景、目标市场、竞争分析、产品功能的详细描述、产品功能的优先级、产品用例（UseCase）、系统需求、性能需求、销售及支持需求等。

b) 产品设计是指确定产品的外观，包括用户界面设计（UI，User Interface）和用户交互设计（User Interaction），包含所有的用户体验部分。在大型公司里，PM通常和UI设计师或互动设计师一起完成产品设计，来主导产品功能细节及体验，不过在小公司或者创业公司里，产品经理也许需要全包这些工作。

3、项目管理
项目管理是指带领来自不同团队的人员（包括工程师、QA、UI设计师、市场、销售、客服等），在预算内按时开发并发布产品。其中可能包括如下工作内容：确保资源投入、制定项目计划、根据计划跟踪项目进展、辨别关键路径、必要时争取追加投入、推进整个项目的进展、向主管领导报告项目进展状况等。

4、产品宣介
主要包括和内部同事如老板、销售、市场、客服等沟通产品的优点、功能和目标市场，也可能包括向外界如媒体、行业分析师及用户宣介产品。

5、产品市场
主要是对外的信息传播——告诉外界有关产品的信息。通常包括制作产品数据表、手册、网站、Flash演示、媒体专题以及展会演示等。

6、产品生命周期管理
指那些随着产品经历概念化->发布->成熟->退出市场整个生命周期中的产品管理活动。主要包括的工作有：产品定位、产品定价及促销、产品线管理、竞争策略、建立或收购合作伙伴、识别并建立合作关系等、产品经理和产品市场、BD及市场沟通同事一起完成这些工作。

互联网产品经理的职能，根据公司情况以及业务的不同，不同公司的PM从事的工作也不尽相同，但基本上离不开上图的三种情况，偏产品设计、偏工程技术或者偏市场运营。其次，谈到互联网产品经理的能力，个人觉得挺多的，在目前国内多数互联网公司里对综合素质要求比较高，是个复合型人才的职务。比如说：

沟通能力（跨部门、跨团队沟通非常多）
统筹协调（市场、销售、产品、技术等等多团队协作，需要争取各方资源进行配合）
无授权领导能力（在行政上面不一定有所有部门的直属管理权力）
动手能力（亲自操刀）
学习能力（不会的要赶紧学、而且要快）
商业敏感度（对商业策略的领域、诠释，需要在产品中体现）
注重细节，追求完美（交互设计、用户体验、品牌等等）
日常产品管理能力（产品设计、开发、优化、市场推广、销售等等）
……

第二、选择软件及工具的方法

我个人选择软件和工具主要从以下几个角度考虑：

易上手，操作简单、学习成本低；
输出格式多样，文件方便传阅、协作；
模板较多，出品美观；
配套软件多或与其它软件协作方便；
版本升级较快，厂商持续改进；
与系统或其它软件相互兼任、不冲突；

另外在工作平台方面，主要内容存储、检阅、输入输出是跨平台、终端应用，比如笔记本、ipad、iphone、黑莓、诺基亚、Android等等。

第三、PM常用软件、工具及工作平台

选择了一些常用，好用，够用，而且功能强大的工具，和大家一起来分享。互联网产品经理有个特性，那就是很多资料、文档、邮件、日志是需要移动、并在不同终端进行读取、输入输出的，所以我将这些软件及工具分为软件+平台两块来探讨，先来看看软件：

我进行了一个分类，主要是以下这些：

1、文档数据、思维脑图

Microsoft Office（Word、Excel、PowerPoint） ★★★★★
Mindjet MindManager ★★★★★
Adobe Reader ★★★
editplus ★
Microsoft Office OneNote 笔记 ★★★

产品经理需要撰写大量产品文档，需求说明书、规划、PRD、产品方案、技术建议书、等等。采用目前主流和通用软件协作会比较好，因此首推微软的Office系列软件，主要是Word、Excel、PowerPoint，包括最常用的模板使用和排版，插入图片、多媒体、表格等等。汇报总结和演示较多会采用PowerPoint。

产品经理要有敏锐的市场洞察力，其中很重要信息是来源于市场调查和数据分析。所以使用Excel进行最基本的数据分析和图表分析是必备技能，如果需要对数据进行多个维度的分析和分类汇总，则数据透视图是必须要使用的功能。

对于会议记录、idea记录、思维脑图、小型项目管理，Mindjet MindManager则是一大利器，条理、结构都很清晰，上手快速、输出格式多。

Adobe Reader用来阅读PDF格式的阅读器，是一种国际通用的标准文档格式，如果需要将文档传送多人阅读，但不希望及做修改、并加密，可以在Word等软件中直接另存为PDF格式，目前很多软件都支持另存PDF。

2、产品原型设计

Balsamiq Mockups ★★★
Axure PR ★★★★★

设计产品原型有不同的需求：
1、概念图，主要表达产品设计概念、理念、基本布局，元素。只有这个需求的时候我推荐 Balsamiq Mockups，它的出品效果是手绘风格，但不能做交互动作。上手快，小图1分钟内容即可搞定，因为它有强大的控件，浏览器、图片、文本框等等都有了，直接拖进去即可，点击查看视频演示。

2、产品原型、交互演示、原型细节设计等。这个时候推荐使用Axure PR快速原型制作软件，由美国Axure Software Solutions, Inc.公司开发。Axure (ak shûr)、RP是Rapid Prototyping (快速原型缩写) 。Axure RP 能让操作它的人快速准确的创建基于Web的网站流程图、原型页面、交互体验设计、标注详细开发说明，并导出Html原型或规格的Word开发文档。点击查看视频演示，交互实例演示。

还有不少原型制作软件，详细请看我以前写的博文《常用原型图设计工具》。

3、网页设计制作、开发

Photoshop ★★★★★
CorelDRAW ★★★★★
Illustrator ★★★★
Fireworks ★★
Dreamweaver ★★★★★
Visual Studio.net IDE

不知道现在的童鞋还有没有听说过网页设计三剑客（Flash、Dreamweaver、Fireworks），一直是最初网页设计的黄金搭档，并且有非常多的教程。后来被Adobe公司收购，现在我们原型主要采用Axure PR、效果图用Photoshop来设计，制作、搭配Dreamweaver来进行页面效果调试、套用程序。基本上放弃了Fireworks，Flash动画更少了。

CorelDRAW一直是矢量排版里头的老大，在印刷品排版，图形设计里面用得非常多。每年的活动组织，物料制作基本上少了不它来帮手。同时，它和Adobe一样，也搭配了很多配套软件，基本上是一整套数码多媒体处理平台。

4、演示、动画

Microsoft Office PowerPoint ★★★★★
Flash ★★★
demo-builder ★★★★

微软的PowerPoint是一项非常古老的工具，也非常实用，而且在不断更新。做PPT很简单，但要做好PPT并不简单，有很多的学问，且不单是软件的操作。

Flash在做特殊效果的时候使用，目前除了广告动画，网站特效的话，比较少使用flash了。

产品演示，是日常中必备的一项技能，一般情况下，新产品的发布与演示，以及帮助操作需要做手把手演示。demo-builder本身这个软件没有什么技术含量，在做演示产品的过程中，你可以选择截图自己去场景拼接，或者直接录制屏幕，在事后回放的过程中进行编辑，剪辑。那需要注意的是，一定要保证生成出来的文件比较小，这样用户下载的时候可以很方便的去查，文件大的，可以做loading。

5、项目管理

Microsoft Office Project ★★★★★

Project能够了解和控制项目的日程与利用图表和图示，借助项目向导这一交互式逐步辅助工具还能快速掌握项目管理流程，设置项目、管理任务和资源、跟踪状态以及报告项目信息。使用Excel和Visio生成基于 Project 数据的数据透视表视图、图表、图形和图示。可以很轻松地自定义报表模板，并与其他 Project 用户共享。通过“日历”界面的新增强功能以及增加的三维甘特条形图，创建视觉效果更强。总的来说，利用Office Project能够快速提高工作效率，可以更好地组织工作和人员，从而保证项目在预算内按时交付。

6、流程类工具

Microsoft Office Visio ★★★★★
ConceptDraw Office ★★

完成各类业务流程的流程图、网络图、工作流图、数据库模型图和软件图，模板非常丰富。这些模板可用于可视化和简化业务流程、跟踪项目和资源、绘制组织结构图、映射网络、绘制建筑地图以及优化系统。采用微软的Visio再搭配相关插件，效果会很好

7、测试工具

Firebug ★★★★★
TestDirector ★★★★★

FirebugHTML查看和编辑、Javascript控制台、网络状况监视于一体，可以说是开发人员必备扩展之一。Firebug从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。可以直接在网页上面修改，直接看到预览效果。

TestDirector是Mercury Interactive公司推出的基于WEB的测试管理工具。它能够指导进行测试需求定义、测试计划、测试执行和缺陷跟踪，即整个测试过程的各个阶段。通过整合所有任务到软件测试中，来使整个测试管理工作更有效，并确保客户收到更高质量的产品。

8、同步

SVN ★★★★★
Dropbox ★★★★
Windows Live Sync ★★★★★

svn(subversion)是近年来崛起的版本管理工具，是cvs的接班人。目前，绝大多数开源软件都使用svn作为代码版本管理软件。同时，svn也可以作为文件共享、同步软件，适合团队使用。

DropBox 是一款非常好用的免费网络文件同步工具(当然它也算是一个服务)。当你在电脑A使用DropBox时，指定文件夹里所有文件的改动均会自动地“同步”到 DropBox的服务器，当下次你在电脑B需要使用这些文件时，你只需登录你的账户，所有被同步的文件均会自动下载到B电脑中，同样，你在电脑B对某文件的修改，也会体现在电脑A上，而所有这一切均是全自动的，这样你的文件可以说是随时随地都能保持着最新了。

Windows Live Sync 是微软推出的一款文件同步软件，我们在 Internet 中可以简单方便的同步或共享文件。Live Sync 使用 P2P 方式同步！我们可以轻松的处理最多 4GB 大小的文件。除此之外 Live Sync 也是跨平台的，不论是 PC 还是 Mac 上均可使用。

9、翻墙：

这个请百度一下自行解决，多谢。

10、其它：

Acdsee 3.2 ★★★★★（快速、绿色）
Picasa ★★★★（智能、速度慢）
射手影音播放器 ★★★★★ （自动下载字幕）
KMP ★★★★ （很经典）

其次，根据互联网的行业性质，很多程度上决定了日常使用的工作平台基本上就是浏览器、邮件、IM、内部沟通平台等等。

1、浏览器

Firefox ★★★★（Google有援助的浏览器，插件非常多，自定义功能强大、个性）
Chrome ★★★★★ （出自Google之手，插件已经非常多了，有赶上Firefox的趋势）
TheWorld（世界之窗）

2、邮件

web

Gmail ★★★★★ （Gmail结合了日历、文档、聊天、通讯录、任务基本上所向无敌了，这么强大的在线产品，不用对不住自己啊，缺点就是很多页面经常性的打不开，无法访问，速度慢的像蜗牛）
163 ★★★★（速度非常快、国内老牌产品了，目前有自己的客户端，同时也整合了聊天、微博等工具）
QQ ★★★★ （邮箱中的后起之秀，速度很快，绑定了QQ客户端）

客户端

Foxmail ★★★★ （国内优秀邮件客户端，已经被腾讯收购）
outlook ★★★★★ （微软大作）

目前收发邮件有2种方式，一种是采用客户端、一种是web端。习惯不一样，速度不一样，整合的产品不一样，看大家的各自需求。

3、日历、任务

Google Calendar ★★★★★ （推荐使用）
Remember The Milk ★★★★★

4、通讯录

Google Contacts ★★★★★ （推荐用这个，可以在手机端同步通讯录）
163 Contacts ★★★
Hotmail Contacts ★★
Yahoo Contacts ★★

5、其它

IM （QQ+Msn+Gtalk） ★★★★★ （不同公司有不同需要，比如腾讯就用QQ，网易就用POPO，阿里就用旺旺、移动用飞信）

最后，思考一下。软件、工具、工作平台有非常之多，形形色色、功能多种多样、有简单的有复杂的。怎么样去选择，上面已经说了很多方法和具体工作应用。但最根本的还是选择合适自己公司、个人的。就如中国古代十八种兵器，样样厉害，各有所长。没有最好，只有最合适，按照具体情况和需求，决定采用什么工具。

这期的PPT：《互联网产品经理常用软件及工作平台》胡晓

相关话题：互联网产品设计软件及工具源地址：http://hx.okvi.com/?p=1418

网页设计三剑客

千鸟 — 2010-08-23 13:09:23

“网页设计三剑客”可能很多新同学都没听说过，因为缔造神话的公司已经快销声匿迹。“网页设计三剑客”是Macromedia公司旗下Dreamweaver, Flash, Fireworks三款软件合集的简称，而Macromedia在2005年底已被Adobe收购。在我学习web design那会儿，它们已经是明星——Dreamweaver用来做页面，Fireworks用来做图形，Flash用来做动画。如此反映的客观事实，那个年代的web design由三大要素构成——页面、图形、动画。

九年后的某个下午，例行UCD书友会的北京分会场，奇遇咖啡馆内一群人在讨论“互联网产品设计软件及工具”。我自己说了很多心得体会，也认真听了大家的分享，发现曾经“网页设计三剑客”里的Fireworks, Flash没有任何人提及。其实正符合目前web design的发展趋势，图形用的越来越少，动画用的越来越少。原因比较复杂，第一互联网产品设计方法体系正在规范，第二各成熟技术体系在逐渐分离，第三现在好用工具的选择太多。

曾经“做网页”的概念，已经一步步上升到了“做网站”和“做产品”，相应我们工作的软件也应该革新换代。使用工具主要看个人的技术背景，还有工作习惯，没有所谓绝对的高效和优秀。再烂的方法，当熟能生巧之后也可以有较高效率，只不过理论上学习选择优秀工具会比较划算。目前我主要使用的软件有如下三个，还是“三剑客”，区别在于它们分别来自三家公司：

Mindjet MindManager，做抽象化的架构图。
Microsoft Office Visio，做具象化的线框图、流程图。
Adobe Dreamweaver，做高保真、低保真HTML页面。

我对MindManager有偏爱，既可以用来快速整理思路，也可以做长远规划式的结构，这几年一直在尝试个人知识管理的体系积累。Visio是最早接触信息架构学习JJG那套Vocabulary遗留下来的习惯，功能足够强大，操作上的不足我用经验来弥补。Dreamweaver的使用经历与我学习web design同步，目前主要用来写HTML的线框图，包括表现层CSS的结合。目前还在尝试用来做设计规范和文档须知，Dreamweaver的强大可以深入到互联网产品的边边角角。针对软件版本，我认为不是新的就一定好，我现在使用还是Macromedia时代的MX 2004版本，好用又不复杂，记得当时出的8.0就很糟糕。

曾经Fireworks主要用来做图形界面，也就是web design里的修饰性Graphic，但是它的图形处理能力又不及Photoshop，定位比较尴尬。到今天，能够替代Fireworks做各程度高低保真界面原型的软件很多，比如Visio, OmniGraffle, Axure等等都可以。

重点探讨下Axure这个软件，既可以使用设计模式很容易的“搭建”原型，也可以便捷的生成HTML页面和交互路径，用以在屏幕上真实演示。如此可以更真实的传达“交互”逻辑，这是折中解决制作Web原型成本太高，但普通文档原型又无法真实互动的低成本方案。定位很精准，因为目前从业人员直接有能力写Web页面的是少数，并且在某些项目中的确需要如此方式的快速迭代。但是，显然它生成的HTML代码是不能复用的，如果控制不好节奏会增加很多成本。我目前因为工作关系尝试不多，一直以来还是争取走敏捷设计的路子，尽可能的减少工作环节。

除最终在互联网上呈现给用户的“客户端代码”，所有做产品的过程文档，我认为都不用过分在乎形式和方法。只要把事情说清楚，怎么都可以，但我们必须去选择最适合自己的工具。论语里有“工欲善其事，必先利其器。”当面临很多选择时，建议选择背景最资深、功能最强大的工具学习上手。不宜贪多，每种类型的交付物选择一种工具软件深入研究即可。当然，在团队协作的时候，需要同事共同维护“源文件”协作迭代，此时应该先达成共识。

最后展望一下未来，个人认为随着HTML5和CSS3的普及（也许需要十年），语义层“结构+表现”能够实现的视觉效果，能够满足互联网产品绝大部分高保真视觉设计需求。将来应该可以做到在代码编辑器里做“视觉设计”，很可能不再依赖于第三方软件。这样因为使用工具软件和交付物类型的减少，还可以进一步提高敏捷设计效率。

没有最好，只有更合适（广州UCD书友会第22期总结）

胡晓 — 2010-08-16 09:00:41

工欲善其事必先利其器，好的工具软件可以大大提高工作效率，工具各有优劣，大家按需取之。没有最好，只有更合适。

第22期广州UCD书友会在网易如期召开，慕名而来参加本期书友会的有20人，加上报名的、中途离开的、以及嘉宾合计有51人。已经站到门外了。每次参与人数超过50，我就有比较大的压力。个人觉得还是人少比较好，讨论会更激烈。人多就变成嘉宾分享了，交流机会概率会减少。不过这次的美女来了很多，偶很开心的，嘿嘿。回到正题：

本期书友会做了四大块的分享，还有一个为谢晓璐小团队开发的png图片预览绿色软件：

《互联网产品经理常用软件及工具》胡晓网易
《苹果下的互联网产品设计工具》肖建乐 139移动互联
《互联网产品研发协作软件及工具探讨》米兜南方周末
《Photoshop 下的产品设计》谢晓路新浪微博
PNG格式预览工具，下载：pngview.com 请大家支持谢晓璐团队继续更新

废话少说，大家直接看PPT吧，都是经验之谈，积累出来的，肺腑之语。内容就不做阐述了，大家自己以实践检验真知吧，欢迎提出疑问、异议、建议等。

1：《互联网产品经理常用软件及工作平台》胡晓PopoutView more presentations from top idea.

今天有很多产品设计师，以前我写了《常用原型图设计工具》，相信大家用得着。

2：《苹果下的互联网产品设计工具》肖建乐PopoutView more presentations from top idea.

3：《互联网产品研发协作软件及工具探讨》米兜PopoutView more presentations from top idea.

4：《Photoshop使用经验谈》谢晓路PopoutView more presentations from top idea.

5、PNGView 下载：pngview.com

Popout

PNGView是一款小巧的图片查看器，和一般图片查看工具不同的地方是使用PNGView在预览图片时是使用无边框+纯透明底预览，真正仿真模式查看预览效果，有助于设计师在最真实的环境还原设计效果。除此之外更支持自定义图片列表功能，在做产品演示、UI测试时是一个绝佳的小工具。
其它特性：

完美支持透明PNG文件格式，任何阴影、透明都表现无疑，完全还原设计效果；
支持桌面窗口任意位置的拖拽，只要是图片中可见的地方都可随意拖拽位置，还可以选择置顶，真正还原100%设计效果；
纯绿色软件，直接运行即可，无需安装更用不着卸载；
采用队列方式浏览图片，通过键盘控制图片浏览顺序；
可一次性开启多个应用程序；
支持多种传统图片类型：png、 jpg、gif、 bmp、 ico等；

相关话题：互联网产品设计软件及工具源地址：http://hx.okvi.com/?p=1357