动手画原型时你都在想想什么，面对需求，你是不是全部的堆积到原型上还是无从下手，亦或是现找网站截图，然后copy。Oh.no!来本盟主告诉你打开原型设计的正确姿势。

 

那些年，不，时间也不久，做产品刚满一年，恰好0岁。刚开始什么也不懂，就学习了几天Axure就出来闯江湖了（大三一直到毕业），到现在懂得了许多，也能够发表自己的高见了（泪奔啊），产品路上遇到过许多坑，一个一个爬上来吧。 以下是个人设计原型路上遇到的坑，希望能帮助正在入门的产品们。

盟主亲历篇

6月底接到一个项目，设计一个跟交易平台，至今，原型还是需要改，接近200多个页面，改的好痛苦。盟主总结错误来源在于:

错误根源一：

需求没整明白就开始设计。 需求是另外一个同事梳理的，稀里糊涂看了2天，大概明白做一件什么事，就开始设计。2周内原型设计完毕，将近200页啊。交付老大一看，大家都懵逼了。老大硬着头皮一点一点看，觉得不合理一个字“改”，流程不对，一个字“改”。于是默默的改了快2周。

S o，不要认为懂了需求，就开始设计。请事先想想3w问题：

1. what's the aim?明确产品主要是做什么。一句话概括产品是个什么样的产品，例如：人人都是产品经理网站，是一个产品爱好者学习、交流的平台。

2. W ho's the users？产品的使用者？即用户是谁？考虑这个产品的使用者是哪些用户？是否有群体特征。这是为下步做铺垫。

3. what's the function？产品的核心功能是什么。在了解用户后，考虑用户会有哪些操作，这些操作的流程是什么？明确产品的主要核心功能操作有哪些。列举所有功能点，找出核心。

错误根源二：

创造新设计。 说实在我常常喜欢创造。这给设计和开发带来很大痛苦。（请开发看到不要骂死我）一般开始设计原型时，我们都是找竞品开始研究分析。即便这样，还是有许多不同之处。在这个将近200页的原型中，自我创造许多东西，竞品太复杂，干脆不看了。UI设计时很痛苦问我，这里，那里到底要放些什么，到底要不要？这样设计不符合用户常规操作啊。

S

o，不要自找麻烦。在设计时问问自己3h问题：

H ow to divide？将产品照模块划，考虑每一个模块包含的主要内容。

H ow to design?模块划分好知乎，考虑该如何设计。

H ow to combine? 每一个模块设计是否能够组合到一起，如果能如何更好的展示呢。

错误根源三：

自我设限。 业务流程绘制后，开始设计原型了。按照流程，哦可能他需要这个操作，哦他可能不需要这个操作。于是这里多添加了一个选择按钮，那里少了一个开关按钮，更有甚者，算了交付给用户自己选择吧。

S o，不要自我设限（挖坑）。牵一发而动全身，不要觉得一个按钮不重要，一个词不重要。优先的产品定的原型是绝对不允许被改动被改来改去。

要记住用户都是懒的 ，不要把太多工作交给用户。设计时尽量做减法，减去不必要的功能。好好想一想，这个功能去掉会不会有影响，这个词这样说，会不会给用户带来疑惑。

错误根源四 ：业务逻辑没梳理清楚。

设计过程中设计师不断的跟你沟通，此处指的是什么，这个逻辑有点不对吧，于是你说想一下（其实内心是崩溃的，一万个草泥马从内心奔 过，骂自己怎么这个笨，心里承认设计师说的很对，却不愿承认自己很low）。好吧，设计师看的很头大，勉为其难的将它设计完毕（优秀的设计师会调整布局和取舍元素，而不是原型设计成什么样，设计成什么样）。到了开发阶段，开发看不懂，于是又会问你。如果你没想明白整个业务流程，接下来你又会陷入沉默...于是设计、开发都会在心里默默的骂你，整个项目都在不断的沟通中进行，预期的开发时间又要延期了...

图 1 开发的心里是这样的

S o，业务逻辑没搞明白是最让人头疼的事。到开发期间发现错误，技术要改跟多，因此将业务梳理清楚至关重要。多设想几个用户使用场景，在不同的场景下，用户会有怎么样的操作，根据这些优化整个业务逻辑。

因此我们在设计原型时，以上错误根源够吗？ N o,不够。

动手画之前请拿起你的2b铅笔

H appy work在于思考，思考到位，思考方向正确，这样会减少后面与设计、开发的不断沟通、不断的开会确认。那么动手前该思考些什么呢？

从0到1产品设计第一步：CEO定好产品的方向和模式。

方向决定产品的战略。方 向定位不准，会造成又一层的理解，那么做出来的产品容易跑偏。模式决定产品的生命力。对于模式，在一个昝新的领域，行业首创，要考虑用户会不会买单，接受度有多高，对于有市场的该如何吸引用户。对于已经有行业的，该如何建立自己的模式而不同于其他产品，获取用户的关注。

产品设计第二步：框架和业务逻辑。

产品负责人整理出需求的整个框架和业务逻辑。

框架帮助梳理产品包含哪些模块，每个模块里会有哪些功能。

业务逻辑：上面也讲述到要从多方面考虑业务逻辑。如果一个产品有多个用户群体，要考虑每个用户群体的特征和功能操作。

 

产品第三步：请拿起你的2b铅笔。

不管你是产品助理，亦或是产品经理，如果你想变得优秀，一定要学会独立思考。以上思考点也是每个产品经理必做的，因此，在设计前先思考以上，做下设计方案。 （ 更多请阅读原文 ， 动手之前请先拿起你的2b铅笔。 ）

你的2b铅笔，画下你的思考框架和 页面 、业务流程图。整体的框架可以帮你和团队建立起对产品的认识。 页面 可以帮助你取舍网页元素布局、说明。业务流程图帮你和开发梳理产品的核心流程。Ok。在你最好方案后，大家无 异议 的情况下，就可以着手设计原型了。不要以为方案就是 万全 的，接下来设计时你也需要去思考：

 

页面设计流程3步骤：

第一步：分析每个页面包含的内容，将其整理成模块。

模块划分这个没有一个标准，至今也在不断的思考中。个人是认为按照展示信息来划分，然后根据展示信息的优先级来进行排版，凸出核心，隐藏有关但不紧要的内容。

分析信息结构 ：核心信息、信息模块、信息类型。 如何分析： 分析页面包含哪些模块，每个模块内的信息元素有哪些？例如:人人都是产品经 理的首页。模块分为：导航、推荐文章、搜索、注册登录、专栏作家、推广模块、推荐书栏、底部的合作伙伴、底部导航等。

对于推荐文章：元素包括图片、文章标题、文章内容推荐。站在用户的角度去考虑，重要点在于：文章标题，文章推荐语。因此这个模块的设计应该凸出文章标题、简介字体要比标题小，提取文章的图片、吸引用户。

对每一个模块，我们要分析其包含的信息类型。例如：推荐文章模块包含信息类型：图片、标题、文章推荐语。数据类型是动态的，时时更新，后台管理员审核推荐，写推荐语。级别非常重要，让用户看到优秀的文章。

用户操作。 分析完模块的信息内容后，就该思考用户会有哪些操作。哪些功能是明显操作的，哪些应该被隐藏起来。这些功能的前置条件是什么？后置条件是什么？这些功能目前很重要吗？

接着上面推荐文章分析。这个模块用户操作是点击，查看文章详情。那么如何告诉用户这个可以点击呢？鼠标移入、移出文章、图片有效果显示。跳转到文章详情，在文章详情页面可进行的操作是：用户可以评论、收藏、查看作者名片、查看、回复其他人的评论。首先要思考，是否所有人都可以进行这些操作，如果可以，以什么样的方式合适。因此设置条件，评论、收藏、查看、回复其他人的评论的前置条件是：登录之后方可评价、收藏、回复。

布局样式

重要模块及元素都具备了最后就要考虑一下布局样式。这样做的原型也会很美观，不至于被喷太low。思考点：考虑核心信息的位置、核心信息与操作的位置。 布局样式要考虑包含哪些信息元素。

例如：文章详情页面。包括：标签、文章标题、发布时间、阅读量、评论量、收藏量、详情、作者名片、评论、文章标签、点赞、分享。

那么我们从用户角度开始考虑，这篇文章主要是哪一类呢？文章质量怎么样呢？看到很爽时，作者是谁，来出来给我看一下。实在是爽爆了，快，大爷给你赞一个。若太不符合胃口，评论过来，一个差评。

因此主要信息布局是这样子的，文章标签，文章标题、评论量、收藏量、详情、作者名片、评论、文章标签、点赞。讲到这里了自己去设想几种布局吧。

总结 ：在一年的学习中，做过4个产品，现在回头看看简直是大写的丑，无比的丑。丑且不说，整个过程的沟通成本很大，且80%会出现返工。 不断的总结，不断的思考，才能走的更稳。

 

本文作者路漫漫（原创）。有点拖延症的逗比范产品 。