画原型图的几大坑，你被埋了吗？！

honghu2

画原型图的几大坑，你被埋了吗？！

写这篇文章的缘由呢，是由于终究选股宝不是只有一个产物狗惹，近来招了个练习生小盆友帮手。然后捏，懒癌爆发，就想把本身不想画的电子原型稿交给小朋侪做（临时先我画手稿，他画电子稿）。不外，究竟结果是没有在现实的产物事情中画过原型图，不少习气尚未养成，正好写篇文章梳理下，同时会辅助一些例子来阐明吧。

绘图原则
掉过坑、爬起来、掸一掸，才晓得踩的是坑。先说几个经由过程掉坑得出的几大绘图原则吧：
一、手稿原型图优先于电子稿原型图
原型图是需求的外在表现，逻辑是需求的内涵表现，二者其实不对峙，反而是相辅相成瓜葛。

大致理顺逻辑才能起头画原型图，而画原型图的进程又可以查抄逻辑。是以，画原型图的进程，也是再次梳理逻辑的进程。

那末，必将就会碰到点窜，而点窜，本钱便可大可小了。

对付手稿来讲，想到了就秒秒钟画，错了就秒秒钟擦，验证符合分歧适速率飞快；

对付电子稿来讲，想到啥要画，还得各类拖动控件，搞排版，的确累人累己分分钟速率小渣渣；

是以，在快速验证或梳理需求的进程中，强烈举荐用手稿的方法。（p个s，手稿建议用铅笔橡皮，咱们要环保嘛～）

你们可以发明咯，实在绝大部门的事变根基上都是如许的：先花绝大大都的时候去筹备好写甚么（计谋上），再用很少的时候去按照筹备的工具绘图、写PPT、做陈述等（战术上），如许的效力相对于比力高。
二、电子稿要“贪靓”
这点的话，是我小我的需求知足，其别人有木有请求我就不清晰了。

甚么叫“贪靓”？就是要都雅。这个都雅，不是说让你抢了设计师的饭碗，把原型丹青的跟设计稿同样你就最利害了，而是要包管如下要点：
页面框架要清晰；页面不影响设计；页面元素要同一；页面排版要整洁；
我不喜好过手的工具可以齐整的处所不齐整，可以都雅的处所欠好看，逼迫症啦。

至于上面提到的四个点，等下我会辅助例子举行具体阐明。
三、电子稿不宜占用过量时候
固然第二点提到了要都雅，可是不克不及由于都雅而主次倒置，耗费了大量时候在电子原型图上，那就得不偿失了。原型图可以说是需求阐发的最后一层了，重点始终是前面的思虑。

而为啥不少人画原型图慢呢？

由于绘图前不斟酌清晰就上软件呀！

由于绘图习气欠好就上软件呀！

由于动不动就上软件，然后反频频复反频频复呀！
电子稿必要注重的处所
说完以上的大原则后，接下来连系实例，来讲说电子稿的一些注重点（防止你又划上去看，友谊提示：就是上文提到的第二点：原型图要都雅）：
一、页面框架要清晰
不少初手画原型图，通常为画几多页面就重修几多page，而且每一个page都是平行瓜葛。在这类环境下，想经由过程看原型图的目次来领会产物的页面瓜葛，彻底是懵掉的，和你对接的设计和开辟也可能分分钟狗带。

比力符合的方法是，画原型图以前先搞清晰页面与页面之间的瓜葛，在页脸孔录中按照页面瓜葛创建好空的页面后，再举行详细页面的设计。

举比方下图：



左侧：为平行瓜葛的页面；

右侧：为有主次的页面（页面名字乱起的哈）；
二、页面不影响设计师的视觉
这点和大师每天嘴里说的“高保真原型图”偏偏相反。

为甚么呢？

产物司理需求阐发完成后，必要拿着原型图和设计师举行直观沟通，沟通清晰以后，设计师就会起头设计。

那末，原型图对付设计师而言，是一个便于理解需求的东西亦或是健忘需求时的检察东西，从这个角度说，就不应给东西付与一些其他脚色，好比影响设计师的设计感受。

举比方下图：



左侧：用固有的占位图或按钮来暗示一些必要的内容；

右侧：用不晓得从哪寻花里找来的气概分歧的icon拼集；

人对看到的工具会发生印象，设计师看到你找来的icon们，脑中一样也会有响应的反响：

若是你找的气概比力一致也还看着阔以，那末设计师有可能会依照你找的icon气概来做；

若是你找的气概水准差别庞大，那末设计师有可能会从你找的集中icon气概中筛选一种好点的来做。

固然，以上是不卖力的测度，设计师到底若何做自己就是一种对设计师本身的请求，这点咱们暂且不谈。

不克不及帮忙设计师设计没有瓜葛，可是去滋扰设计师设计那就罪恶了。

固然，若是贵司没有设计师，那末，又是另当别论啦。（不要设计师的团队必定是对本身的产物自信念爆棚吧！）
三、页面元素要同一
画原型图的时辰，必将会用到不少软件中自带的控件。一起头没有构成本身习气的时辰，可能会有如下环境：

统一个页面内统一种控件代表很多多少种举动；

统一个页面内统一种控件暗示统一个举动，分歧页面之间统一种控件暗示很多多少种举动；

举比方下图：



左侧：代表占位符，不成点击；代表按钮，可点击；

右侧：比力紊乱，两个控件乱花，不克不及点击的处所用了按钮，能点击的处所又用了占位符；
四、页面排版要整洁
这点童贞座的产物司理应当不会有疑难吧？哈哈。排版整洁重要指：

该摆布对齐的处所对齐；

该上下居中的处所上下居中；

距离该一致就一致；

举比方下图：



左侧：上下、摆布都对齐；

右侧：额，赤色标识表记标帜的都没有对齐嘛；

可能看到这里的幼童鞋们会感觉，艾玛，好贫苦呀，感受要遵照这么多法则，画个图还不得累成狗呀？
绘图技能
究竟上其实不会好咩？下面瑶子哥哥教点大师都晓得的小技能：
一、善用辅助线
辅助线可以或许帮忙你分分钟对齐，而且无时不刻阔以用到它：画总体页面、画局部部件等等都阔以。用过office大件套的孩纸们都晓得。



下图中赤色框内的四根辅助线我是一定会有的；蓝色框内的线是拖动了控件时体系会呈现的（说这个感受本身好智障）

怎样用辅助线，就看小我习气咯。
二、善用母版
会多处用到的一整块的工具尽可能用母版，为啥？
若是你采纳处处复制粘贴的法子的话，那末若是有点窜，你就得一次一次的点窜很多多少处所，挥霍时候；若是你采纳每次都本身从新画的话，那比上面还惨，应当没这类童鞋吧？
同时，母版趁便解决了排不齐的问题，究竟结果，大部件拖起来轻易排整洁的多。



Convert to Master起来~
三、善用组合
不少童鞋一起头的时辰都不喜好用组合，归正画完都同样嘛对不合错误 ？不合错误！

万一你下个版本要把整坨工具换到另外一个位置上去呢？万一你全部页面要呈现雷同的工具很多多少遍呢？

固然第二点刚说过要善用母版，可是母版也不是越多越好。

在不是全局呈现的环境下，阔以把相干控件组合起来，不论是单页面上的复制粘贴仍是移动，城市很是便利，同时又无形当中解决整洁问题。

比拟于鼠标拖个范畴选中一大坨工具来讲，组合其实是显得太清洁了，蛤蛤。

Ctrl+G起来~
四、不要过分用case里的花梢功效
曾几什么时候，我也是每天玩面板、中继器玩的飞起的孩纸，如今至多用的就是页面跳转，其实不可了也用用面板之间的设置功效。

固然，中继器啥的在某些处所仍是很好用的，不外，挪动端产物根基没有效到的机遇，归正画了这么久了，就没用到过。

不外，做后台的产物童鞋可能必要，但是我仍是感觉中继器操作起来仍是有点贫苦。


五、不要过分用前提果断
这个大都可能会呈现在高保真原型图上面吧，会请求每一个控件都可以微密圈或许依照自己的逻辑前提呈现响应的举动。

听起来仿佛很简略？不就是页面跳来跳去嘛~不就是面板出不呈现嘛~

图样惹，你去果断个登录注册流程再说简略！

我记得刚做产物的时辰，随着一个产物司理妹纸分工画原型图，我发明她每次都把所有控件的前提都列出来，那时感觉好牛逼啊，为了避免怂and总体原型图连结一致，然后就花腔作死了。

下图是那时做的登录注册流程，应当均匀一个控件上最少都有五、6个果断前提吧。



如今想一想，真是醉了。可以用文字弥补清清晰楚阐明白的事变，非要折腾原型图，何须呢？

此外，弥补一下第4和第5点，过分用花梢功效和前提果断，会引发此外一个世纪大问题，那就是控件的定名！

做大量前提果断或繁杂的case是会必要指向某个控件的，那末对付控件的定名就必要一套法则，而这点，一起头的时辰你是没有意想到的。

然后意想到的时辰，你会起头如许往返：

“恩，这个是输入框，那就叫它输入框吧”

“哎呀，阿谁也是输入框哎，，重名了，那把第一个改为输入框1，第二个叫“输入框2”吧”

“哎呀，又不可了，这么多页面这么多输入框，得加之页面才行，叫他“xx页面-用户名输入框”吧”

直接给跪了。

而这点就要向开辟们进修一下啦，他们写代码都有一套定名法则哇。健忘哪一个开辟奉告我，好的定名象征着此人对本身有请求！

好啦，以上就是临时想到的有关于原型图的事儿，如有漏掉，求留言指出哟~

PS一下：
昨天公家号里发了这篇文章以后，有些产物童鞋就发动静或留言了，感觉逻辑、营业、沟通能力才是最首要的，原型图底子无所谓好嘛，款式啥时变这么低了。

这个概念诚实说，我感觉比力幼稚吧。

没有错，对行业的理解、对用户的感知、强逻辑、强沟通确切很首要，可是，工欲善其事，必先利其器的事理大师也应当都要懂：
原型图能直观的表现需求内容，能促成沟通的效力；数据阐发能别离从大用户群和小用户中发明用户习气，从而优化产物；各类用户钻研法子可以帮忙咱们去更好的领会用户、分解用户；
我小我是很是倡导公道的用好东西来帮忙咱们更好、更快、更有效力的去干事，是以，本文罗列了一些我小我认为可以防止挥霍时候的点，但我其实不宣传画原型图有多强。

从这些留言中，我忽然发明有一颗包涵心，多是当下产物司理们最缺少的。客观的对待所有事物，扬长避短，而不是一味的跟着本身的认知去鄙夷、去厌弃。

同时，我也认为产物司理们必定不要好高务远，可以志存高远，但必定要踏踏实实吧。你感觉“懂行业、懂用户”比力首聊天呗要，可是诚实说，这六个字是必要不竭试探不竭堆集的才渐渐会有的，其实不是你会说这六个字，你就比划原型图的童鞋们高档了。

ps的有点多，像喷子了。下周筹算写一篇相干主题的文章吧。
#专栏作家#
killifer，微信公家号：killifer，金融资讯&东西类产物司理。脑洞大、笑点低、间歇性“有错误”的理工科气力逗比奼女。

本文原创公布于人人都是产物司理，未经允许，不得转载。