原型图不只是工作，更是设计对产品的理解。对整体的把控和思考的过程。所以后期的一些设计上的小错误都是因为没有严格的思考。一个产品的经验分享给大家...

一、我为什么要做原型图的分享？

最近公司有很多面试者，加上有一些设计的分享群（打个广告，“花火分享”，希望大神们能帮忙分享文章）。好多人都会把自己做的某个产品页面分享出来，问大家“哪里不合适？这个按钮怎么设计好看？文字放在哪里比较好？”。其它的先不作评论。我个人觉得，别人未必了解你的产品思路，你的需求，你的设计想法和实际情况。所以，这类回答基本是不负责和没有帮助的。为了解决这些初级且琐碎的问题，我在思考到底是哪个环节出了问题。

ps：这里要感谢我的两位领导，是他们教会我一个道理，做设计不能是抠细节，而是先构思框架。整个大框架都掌握了，接下来就相对容易些。

出于这些目的，我决定总结自己的经验，试着分享一下解决一些问题。改善一下现状，说句不要脸的理想，为设计行业水平的整体出一分力；

新手设计师对设计岗的基本认知就是：产品（原型图）-设计（设计稿）- xxxx

但往往设计是一个很重要的承上启下的角色。你需要充分了解公司的商业目标，商业价值，用户的核心需求，产品现有或者未来的结构大概的走向，开发成本和难易度等等，多少都需要了解。这样你的稿子才有理有据。不需要讲究多绚丽，起码是符合用户期望是合理的合适的设计。说的更夸张一些，和别人撕x时，你是让别人服气的。我个人是这么认为的。

这样在将来的产品迭代中，在整体新增新需求时，你才能知道在哪些地方加是恰到好处的。高级一些的设计师甚至会事先都留好空间来防范这新增的需求。

更重要的是：产品经理不给原型图；

这样就会引起设计师“随意发挥”，如果没有规范，那真的是“抽象艺术”。

所以，我接下来分享的不光是一种技巧，更是一种方法，一种整体梳理产品的思路。帮助更多设计师更理解产品和更规范的一套思考方法；（大神就别来捣乱了，我直接跪拜）

二、原型图

最近面试问到的一般初级设计师都了解axure和mock plus等。这两款都各有特色。但是我已经玩够了。所以今天分享一个更快捷的就是：experience design；简称XD；(｡ì _ í｡)

说正事专用分割线“----------------------”

无论是设计还是其它的什么，总结规范（工作总结）最重要，因为可以快速的帮到你；不废话了，直接上货；

三、我想做 比汉斯和追波上的高大上原型稿；如下图（图片来自网络）：

如何做到这么有完整，美观且工作效率要很高？

四、思考和经验结合；

我经常习惯用experience design（简称“xd”）；这款软件是做设计用的，但我一直以来用它做原型稿。如下图：

五、如何做？

首先，假设我拿到一个“评价”的需求；需求的其中一个页面就是对订单评价；那么接下来你的脑子里肯定有个大致的构思；

1、导航栏

2、订单基本信息。谁，干了什么事，金额多少，完成时间等等；

3、一个大标题。比如：请好评之类的引导话语；

4、评价星星。或者其它图形。

5、不同的评价分数，对应不同的可选择标签。

6、匿名选项或者默认匿名。告诉用户不用有思想负担。

7、button。一个大的提交按钮。

基本以上这些功能可以先做个架构；如下图：

整体梳理一遍后，思路是清晰的；

六、架构也要有规范；（重点）

1、不要随随便便扯个图形方框就摆在这；有根据吗？有考虑吗？有整体性吗？我都在问自己

2、不要任凭心情来

3、不断调整试错

4、不懂的去借鉴大神的尺寸，因为那比较舒服

5、根据设计规范来推导原型的规范，都是相同的道理；

接下来是我的规范：注意看我的尺寸（@1x）；

不举例子了，太累了；

1、我的标准都是以10px为单位的；

2、文字是以14为标准，画一个长100px，高14px的灰色框代替文本，行间距自己掌握；

3、图片和icon挺考验功力的，初级新手建议去看看weui。微信的规范，可以学习借鉴；

4、最后拖到ps里看一下效果，或者直接在xd里直接发布到链接上，然后用手机演示操作，体验一下；

5、一些app，比如微博、淘宝等都会用这种类似的图作预加载页面，我觉得用户体验是很好的；

6、这种原型好修改，可直接与开发和其它人员沟通，有了规范后，效率高，灵活性强；

做个展示，工作中的一个模块：

以上是分享内容，具体的可以看视频教程。

第一次分享，有不足的地方请见谅。希望大神多多拍砖；感谢；