背景

        最近经常根据墨刀设计的原型开发微信小程序页面，使用的多了总感觉原型只能参考，原型跟代码实现总差一小步。原型中提供的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是以lefttop来定位的，但编码时一般采用margin外边距来相对定位的。

缺少内边距

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

矩形的宽高

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

上下边框

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

组件差异

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

原型工具的改进设想

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

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

        1px可以改成2rpx。

矩形组件的样式

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

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

        支持flex布局。

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

支持自定义组件

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

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

最后

以上就是难过铃铛为你收集整理的原型工具与代码实现的差距及改进设想背景原型与实现的差距原型工具的改进设想的全部内容，希望文章能够帮你解决原型工具与代码实现的差距及改进设想背景原型与实现的差距原型工具的改进设想所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。