背景

        最近经常根据墨刀设计的原型开发微信小程序页面，使用的多了总感觉原型只能参考，原型跟代码实现总差一小步。原型中提供的CSS并不能直接复制到代码中，导致编码人员复刻原型设计时总有差距。本文先列举出一些原型和实现的差距，然后提出原型工具一些改进设想。

        注：个人对墨刀的了解有限，可能观点有误，欢迎大家留言指正。

原型与实现的差距

原型与实现的对比

原型效果图，如下图：

 上图蓝框部分，外层div原型提供的CSS，如下：

left: 10px;
top: 261px;
width: 355px;
height: 215px;
line-height: 20px;
border-radius: 5px;
background-color: rgba(255, 255, 255, 1);
text-align: center;

  代码实现的CSS，如下图：

		.help-box {background-color: #fff;margin: 24rpx;margin-top: -48rpx;padding: 48rpx;border-radius: 10rpx;position: relative;		}

 可以看到实现与原型有很多差异。

像素单位

        我是用uniapp来开发小程序，为了自适应屏幕宽度采用rpx做基准单位。原型工具提供CSS我在使用时，复制过来还需要x2再改成rpx，比较繁琐。

绝对定位

        原型工具的div是以left\top来定位的，但编码时一般采用margin外边距来相对定位的。

缺少内边距

        原型工具的矩形内放其他组件时，由于其他组件也是绝对定位的，也仅提供了left\top。但编码时为了方便对齐，会采用内边距padding。

矩形的宽高

        原型工具的矩形提供了宽高，但一般是用不到的，尤其外层矩形（div）。它一般是由内部元素来填充来决定宽高的，本身不需要指定宽高。外层矩形反而需要内边距，但原型工具不能提供，需要编码人员再手工获取一次。

上下边框

        当一个组件需要上边框（border-top）或下边框（border-bottom）时，原型工具往往就是画一条线了事，对编码人员来说没法直接使用，需要自己吸色再设置边框。

组件差异

        编码实现时往往要采用现有的UI组件库（如 Element、uView、Vant等）。调整这些组件库的样式有一定难度和限制，但原型人员在设计时一般不会受这些程序组件库影响，比较灵活，导致编码人员实现起来非常痛苦。

原型工具的改进设想

        原型工具提供的html、css代码，如要要做到真正实用，进而达到实现对原型的一比一复刻。以我个人想法需要做如下改进：

像素单位支持自定义和翻倍

        1px可以改成2rpx。

矩形组件的样式

        可以不设置宽高，允许嵌套由内层组件决定外层矩形的宽高。

        不要使用绝对定位，而要采用内外边距的相对定位。

        支持flex布局。

        支持上下边框等单边框的设置。

支持自定义组件

        目前原型工具已可以自定义组件，但这里主要是组件的CSS自定义。

        如果做到这些，仅靠原型人员恐难胜任，这也可能是目前原型工具没做这些功能的考量。这时需要前端开发人员有限地参与到原型设计中去，尤其是完成自定义组件的CSS部分。因为一个项目中页面风格要求统一的，所以这种组件是有限的且可以复用的。原型上组件复用了，实现上组件才可以复用，进而提高项目开发效率。