好久没更新过自己的简书了，入行产品岗算下来也有一年的时间了，接下来是总结一年中实际技巧。
第一次绘制原型图的时候觉得主要功能表达清晰即可，尺寸大小、元件间距全凭感觉，因此一开始也挨了不少骂。后来慢慢摸索出规律，大概总结如下：
端口类型：
目前长需设计的端口分为：web段（即网页）、移动端（APP、小程序等移动设备）、IPAD（IPAD是一种移动设备，但也有自己特定的尺寸），智能设备（例如智能电视、智能手表等等）
由于我更多接触的是网页端已经小程序端口，后面会以这两个为主。
网页端：
目前市面上显示器屏幕尺寸为19-21寸，屏幕分辨率大概在1280px*800px—1440px*900px之间，前端工程师在写页面的时候，宽度一般设为1180px—1220px（当然，这个宽度也不是绝对固定的）。
因此在做产品设计的时候，设计web端产品，宽度会设为1400px作为容器，位于容器上方再画一个1200px的矩形，内容区域的容器。（PS：内容区域的矩形需与底部容器左右间隔10px，作为留白）
web网页原型
可能有人会问，为什么要底部容器上面划出一块内容区域？
首先，我们要知道，容器决定产品的边界：
默认状态下的可展示区域，就是PM经理需要遵循的原型尺寸。
如果容器支持缩放大小，意味着需要考虑原型在不同大小展示区域下的布局效果。
最大的展示区域，往往接近屏幕分辨率。最小的展示区域，往往是默认的原型尺寸。
部分产品可以缩放得更小，此时展示左上区域或者页面模块按一定规则缩小。
我的理解是：
按照市面上显示器的分辨率，前端页面可展示的内容区域，平均宽度在1200px，预留出来的空白部分，是为显示器较大的人群考虑的：屏幕越大，可展示的区域也越大，超过产品本身内容可展示区域的话，会自动留白。
另一方面，为保证开发团队的成员可查看完整的原型图，我们需考虑下他们电脑屏幕的分辨率可能为1280*800px。
稍稍总结下，就是跟随大多数人的屏幕尺寸大小，以及方便开发团队查看。
我屏幕分辨率为1920*1080
给大家看我电脑上查看大的原型图大小，是不是很清晰的看到内容呢？当然，这也是我个人的看法，如果有别的看法的，可以互相交流交流（我算是个野路子的产品）。
至于高度的问题，这个是没有要求的，一般都是根据需要展示的内容来决定的，也就是高度自适应。
讲完容器的宽度，接下来讲讲字体。正常情况下，字体大小都是14px，最小字体12px（字体太小可能就不方便查看）。
源自B站up主
字体上，我所在的企业并没有太多要求，只要求能看懂主要功能就行，所以上面的字体是来自一位B站的up总结的。
移动端：
说明之前，给大家感受下刚入门时候，画的线框图，话不多说，先上图。
第一版初稿与最终版原型
（OS：简直惨不忍睹，当然这并不是给开发的图纸，而是草稿。由于各种问题，我需要兼顾产品跟UI设计，所以都是输入高保真原型图的）
虽然最终效果跟第一版草稿的差距特别大，但这样让我知道原型尺寸的重要性。但凡在自己随手画的容器上觉得觉得间距大小差不多了，可以了。有这样的想法，那你离被开发揍一顿就不远了。
以自己一开始的惨痛经历说了这么多，接下来聊一聊移动端的设计规范。
移动端设计规范
常见的移动端多是手机，基本上整个手机都是屏幕既是容器也是内容可视区。常用字体14px，最小字体一般是12px（你懂的，手机屏幕小，字体太小用户也很难看清的）
个人常用的移动端规范
上图是我个人画线框图的习惯，并不是标准，只是提供个参考给大家。各个区域的底色，也只是为了便于自己区分，实际上底色并没有什么特别多的要求。至于字体，一般都是使用14px的字体。
产品在原型设计上还是有很多规范的，只不过我就职的企业并没有太多要求，但基本也算通用了，具体情况还是看看自己企业内部有没有什么特别的要求。
上述的设计规范仅限于个人习惯，也是非常基础的部分。如果有别的见解也可以一起分享。像容器内，各类原件的一些规范，后续也会慢慢整理出来。
网友评论