网站规划通识：原型图绘制的一些注意事项

本文来自网易云社区

作者：林玮园

雷火游戏部网站组

基本概念：

一、什么叫原型图？

用线条、图形描绘出产品/专题的框架，即为原型，也可称线框图。

原型图的输出可根据质量，大致分为低保真、中保真、高保真原型图。

编辑日常会根据专题的重要性、难易程度等，输出不同等级的原型。如常规玩法专题/节日专题，可输出低保真原型；推广期重点FAB考虑输出中保真原型。

二、什么叫原型规划？

一句话描述，原型规划就是“将抽象信息转化为具象信息的过程”。

无论是大型项目或小型专题，原型规划在其中起到了承上启下的作用。编辑通过前期采集营销需求、梳理产品/专题功能，综合考虑用户体验等因素，对产品/专题的各版块、信息层级、界面和功能进行合理的排序。

原型规划的目标为，将粗略规划进行细化，规划成为一份可落地执行的解决方案。

三、原型规划的作用是什么？

原型规划可辅助编辑、营销、设计、前端与后台，清晰明确产品/专题，共同沟通产品思路。

低/中保真原型在项目前期使用，相较设计稿性价比更高，节约沟通时间，提高需求修改工作效率。

正文：

首先根据工作经验的总结，说一下原型规划的几个基本原则吧。

1、画图工具

雷火网站组普遍采用Axure RP8.0做原型图。

Axure RP可以绘制出比较正式的产品原型，如果增加了色彩和交互动作（高保真），基本最终产品形态无异。同时最新的RP8版本包含了强大的各类功能icon库，甚至可以满足基本的APP中保真原型输出。

（新手上路：Axure教程 axure新手入门基础（1-11）http://www.woshipm.com/rp/39203.html）

2、画图原则

a) 原型框架层级分明

新手画原型一般会有两种做法，要么想到哪就画到哪，整个专题所包含的原型图都在一个页面上，最多加一些箭头作为示意；或者一张页面图就建一个Page。这两种都会加重做规划的人的思维混乱，读原型图的设计和开发同事也不容易理解。

做规划，最重要的是想清楚。画原型图前，编辑先搞清楚页面与页面之间的关系，在页面目录中根据层级关系建好空的页面，就像写文章前列提纲，然后再填充进行每一个页面的具体设计。这里放了一张梦岛的规划文件目录作为示意：

b) 原型规划不影响设计的自由发挥

编辑做原型规划有时候会进入“心流”，完全沉浸其中，美化美化再美化，原本计划做低保真中保真的原型图，改着改着挡不住往高保真的方向奔去了。这也是新人工作中很容易误入的“歧途”。为什么呢？

完成原型规划后，编辑需要用原型图和设计师进行直观沟通，随后设计师就会开始设计。原型图对设计师而言，是一个便于理解需求的查看工具。从这个角度说，编辑就不该在原型图上过多的进行“美观”规划，甚至固定布局，影响了设计师的视觉发挥空间。

比如编辑使用了一个并不太能准确表达功能意图的icon（受限于Axure RP8.0的元件库），设计师看到你给到的icon，就极可能会按照你找的风格来做。

c) 排版整齐，页面元素统一

画原型图时，会用到很多软件中自带的元件。一开始没有形成自己习惯的时候，可能会有以下情况：

同一个页面内同一种元件代表好多种行为；

同一个页面内同一种元件表示同一个行为，不同页面之间同一种元件表示好多种行为；

规划的混乱会影响设计过程中设计师对于样式的把控，甚至出现出错-返工设计的情况，这些都是在前期原型规划期间可梳理并避免的。

此外，排版整齐主要指：1）左右对齐；2）上下居中；3）间隔一致。

做到以上几点，基本上输出的原型都能保持简明清晰了。

3、画图雷区

a) 原型图不宜占用过多时间

原型图固然要清晰清晰美观，但不能为了好看而主次颠倒，花费大量时间在原型图上是得不偿失的。最具性价比的是根据产品/专题规模和复杂程度，判定所绘原型图的保真度，想清楚流程后进行规划。原型图可以说是需求分析的最后一层了，重点始终是前面的思考。

为什么会有不少人画原型图慢呢？总结下来不外乎这几点：A）做得慢，对软件太不熟悉，快捷操作几乎不知道；B）想不清楚，做了原型图反复修改，琐碎返工。这两点都是可以在前期培养好习惯，避免掉的。

b) 原型图不要只图“美”，再次强调！

最重要的始终是“想清楚”，然后“讲清楚”。一份没有需求说明的原型图是不合格的，除非专题非常简单一目了然。

强调第三次，原型输出需要保证的是以下要点：

页面框架要清楚；

页面不影响设计；

页面元素要统一；

页面排版要整齐；

4、画图技巧

a) 善用辅助线

辅助线就像是PS里面的参考线，能分分钟帮你对齐。

做原型必用的3根辅助线：左右线标识出页面的主体宽度、横的一根标识专题的版头高度（PC版应用较多）。

b) 善用组合

比如在一个页面较多的专题，或APP规划中，在多处会用到的一整块的东西可以做成组合。这个习惯会在复杂产品规划的时候给编辑省了很多时间（别问我为什么知道~~）建议新人在新上手学习的时候就养成这习惯。

如果采用复制粘贴的老方法，一旦有修改就需要修改每一处地方，不仅容易遗漏还降低工作效率；母版顺便解决了对不齐的问题，毕竟大部件拖起来轻松的多。

相比于鼠标拖个范围选中一大坨东西来说，组合实在是显得太干净了！

网易云大礼包：https://www.163yun.com/gift

本文来自网易云社区，经作者林玮园授权发布

相关文章：
【推荐】网易美学-系统架构系列1-分布式与服务化
【推荐】【大数据之数据仓库】GreenPlum优化器对比测试
【推荐】基于Kafka的服务端用户行为日志采集

网站规划通识：原型图绘制的一些注意事项相关推荐

【编程通识】PlantUML绘制时序图样例
时序图(Sequence Diagram),又名序列图.循序图.顺序图,是一种UML交互图.它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作.它可以表示用例的行为顺序,当执行一个用例 ...
Balsamiq Mockups 产品原型图绘制工具的破解和使用教程
说实话作为一个前端,会不会这个软件都是没事的,毕竟这个是经理才可以用到的软件,科普一下,Balsamiq Mockups是一款美国加利福尼亚一个工作室在2008年开发出来的一款很好用的产品原型绘制软件 ...
aaynctask控制多个下载进度_史上最强的进度图绘制十大注意事项！
在任何情况下,管理者都必须确保项目在计划的控制下运行.好比我们知道一个目标点,到达这个目标点有N条路径,我们要根据各种限制条件找出其中较为合理的路径,并根据各种各样的变化随时调整这个路径. 1. 如何 ...
2020/2/23如何高效使用Axure绘制原型图
这几天绘制原型图绘制的头大便给出了如何高效绘制的方法,接下来我们以. 为例,绘制原型图第一步首先要绘制好头部和尾部的母版,巧的是,我刚好已经绘制好了头部: 尾部: 再将母版放入到页面中去第二 ...
作为产品经理的你，画原型图时崩溃过吗？
身为一名高质量PM的你,经历过这种绝望吗? 为了让原型图美观一些,你纠结各种细节,但与此同时,效率低.工作周期延长这必定是你的锅:为了让原型图逼真一些,你思考各种组件布局,结果leader一句话让你回 ...
怎么画好软件产品原型图？
一.工具选择工欲善其事,必先利其器.作为产品经理,好的原型设计是提高产品开发效率不可或缺的一部分,那么,一款好的原型设计工具就是你的武器.下面给大家推荐几款好用的原型设计软件,有需要的朋友可以根据自 ...
Axure RP9原型图公共部分创建及使用
步骤: 首先,创建一个页面,然后在其中将所需要的公共部分原型图绘制完成,如下: 然后选中该原型图所有,右键单击, 选择"转换为母版", 出现如下提示框之后,然后输入母版名称,完成之 ...
Pencil：免费的手绘风格开源原型图设计工具（转载）
转自:http://www.iteye.com/news/21516/ Pencil 是一款开源的手绘风格原型图绘制工具,可以用来绘制各种架构图和流程图.目前最新版本是1.2,同时还提供 Firefo ...
好的产品经理都是这样绘制原型图的（下）...
前几天分享了上篇:好的产品经理都是这样绘制原型图的... 今天来分享下篇,本篇(原型篇-下)主要内容: 原型图标注,画开发看得懂的图同一个页面展示所有的交互状态页面跳转关系图(不要做孤立的设计) ...

网站规划通识：原型图绘制的一些注意事项

网站规划通识：原型图绘制的一些注意事项相关推荐

最新文章

热门文章