摘要：
今天我们来个庖丁解牛。对于一个完整的组合组件，看看通过工具是如何轻松完成的。首先看看九宫格完整的样子。 结构树是这样的。在结构树中，我们可以看到WViewColumn下面有九个WViewRow。WViewColumn之上的我们可以不用管，这些是画布上的内容，为了辅助设计用的。9个WViewRow是九 阅读全文
posted @ 2016-12-13 13:37
山顶洞外人
阅读(10304)
评论(0)
推荐(0)
摘要：
在设计工具中，根据规范我们定义了大中小三种按钮的尺寸大：720rpx *94rpx 圆角10px 字体18中：360rpx*70rpx 圆角8px 字体16 文字距离两边最小60小：120rpx*60rpx 圆角6px 字体13 文字距离两边最小30这些按钮都放在工具的模板中，如下图： 微信中固定按 阅读全文
posted @ 2016-12-13 13:36
山顶洞外人
阅读(4999)
评论(0)
推荐(0)
摘要：
下图是微信官方的要求 按照小程序UI设计（3）-符合视觉规范-列表视觉规范同样的方式，我们可以设计一样符合规范的输入项目。规范中没有说明padding-left的大小，我们暂定是15px。这样最外层view的padding-left和padding-right都是15px。以 为例制作符合规范的布局 阅读全文
posted @ 2016-12-13 13:35
山顶洞外人
阅读(3128)
评论(0)
推荐(0)
摘要：
上一篇我们介绍了字体规范，此贴介绍一下在列表中如何组合使用。下图是微信官方的要求 在工具中通过拖拽组件可以制作出一样的效果拖拽一个WViewRow。这个组件是小程序的view，flex-direction=row。缺省的属性如下。 放在工具的画布上是这样的 下面我们以 为例实际制作一个。此单项列表中 阅读全文
posted @ 2016-12-13 13:33
山顶洞外人
阅读(1283)
评论(0)
推荐(0)
摘要：
下图是微信小程序官方要求字体规范 根据此要求小程序设计工具定制了符合规范的组件。如下图 工具使用时，将左侧组件拖拽到设计区域即可。字体大小和颜色都是按照规范设置的。在使用时根据微信要求在不同位置摆放即可。以下截图是text组件使用范例 阅读全文
posted @ 2016-12-13 13:28
山顶洞外人
阅读(8731)
评论(0)
推荐(0)
摘要：
工欲善其事必先利其器。下面为大家介绍一款工具软件，如何做到轻松布局。 工具简介：小程序layout设计工具，可视化方式进行小程序UI设计。通过鼠标拖拽组件方式进行UI布局。工具提供符合微信视觉统一的模板，并且按照FlexBox方式可视化布局。自动生成wxml和wxss，复制到微信开发者工具中即可同步 阅读全文
posted @ 2016-12-13 13:26
山顶洞外人
阅读(1884)
评论(0)
推荐(0)
摘要：
工具截图 此工具通过可视化操作进行布局，依据iphone6尺寸设置画布，可以自动生成rpx和百分比的wxss。后续还会增加js代码自动生成。工具中组件按照微信小程序开发规范进行了缺省设置，margin、padding、fontsize、fontfamily、color等属性按照微信视觉一致规范定制而 阅读全文
posted @ 2016-12-13 13:21
山顶洞外人
阅读(9553)
评论(4)
推荐(0)
浙公网安备 33010602011771号