在设计工具中，根据规范我们定义了大中小三种按钮的尺寸
大：720rpx *94rpx 圆角10px 字体18
中：360rpx*70rpx 圆角8px 字体16 文字距离两边最小60
小：120rpx*60rpx 圆角6px 字体13 文字距离两边最小30
这些按钮都放在工具的模板中，如下图：
 
微信中固定按钮type有三种，primary=绿色，default=灰色，warn=红色。
size分为default和mini。镂空效果是plain参数。
使用时鼠标点击一下，然后再鼠标点击画布，然后ctrl+v粘贴即可。
下图是从模板中粘贴过来的按钮。
 
直接粘贴过来时候是和view一起粘贴的，实际使用时，将按钮组件再摆放到需要位置即可。
下图是通过输入模板和选择模板结合拼凑的页面效果

 

模板中的内容可以满足日常开发布局要求，各位可以任意组合组件，搭建自己的form

小程序UI设计（5）-符合视觉规范-按钮视觉规范的更多相关文章

  1. 小程序UI设计（4）-符合视觉规范-表单输入视觉规范

    下图是微信官方的要求 按照小程序UI设计(3)-符合视觉规范-列表视觉规范同样的方式,我们可以设计一样符合规范的输入项目.规范中没有说明padding-left的大小,我们暂定是15px.这样最外层v ...

  2. 小程序UI设计（3）-符合视觉规范-列表视觉规范

    上一篇我们介绍了字体规范,此贴介绍一下在列表中如何组合使用.下图是微信官方的要求   在工具中通过拖拽组件可以制作出一样的效果拖拽一个WViewRow.这个组件是小程序的view,flex-direc ...

  3. 小程序UI设计（1）-布局

    工欲善其事必先利其器.下面为大家介绍一款工具软件,如何做到轻松布局. 工具简介:小程序layout设计工具,可视化方式进行小程序UI设计.通过鼠标拖拽组件方式进行UI布局.工具提供符合微信视觉统一的模 ...

  4. 小程序UI设计（10）-巧用模板，事半功倍

    工具中为小程序员们准备了符合微信开发规范的模板.之前帖子中介绍的规范都在模板中已经设计好了,可以直接复制粘贴使用.下图中的样式是从模板直接复制过来的.实际使用时只要更换为自己的图片和文字即可.自动生成 ...

  5. 小程序UI设计（2）-符合视觉规范-字体规范

    下图是微信小程序官方要求字体规范 根据此要求小程序设计工具定制了符合规范的组件.如下图 工具使用时,将左侧组件拖拽到设计区域即可.字体大小和颜色都是按照规范设置的.在使用时根据微信要求在不同位置摆放即 ...

  6. 小程序UI设计（9）-文字排版

    小程序中一般很少大段落的文字,基本是4.5个字的主题.一行标题.一行摘要.两行描述.显示时超出部分用省略号代替.下面结合工具使用介绍一下文字排版的方法.先看效果图.  工具中属性设置如下图:两行文字属 ...

  7. 小程序UI设计之-介绍篇

    工具截图 此工具通过可视化操作进行布局,依据iphone6尺寸设置画布,可以自动生成rpx和百分比的wxss.后续还会增加js代码自动生成.工具中组件按照微信小程序开发规范进行了缺省设置,margin ...

  8. 小程序UI设计（7）-布局分解-左-上下结构

    FlexBox布局中的变幻方式很多,我们继续了解一个左-上下结构的布局分解  左边结构树中WViewRow下面有两个WViewColumn.WViewRow是横向排列,WViewColumn是纵向排列 ...

  9. 小程序UI设计（8）-布局分解-FlexBox的align-content应用

    FlexBox的align-content到底是什么鬼,我也搞了好半天才开发出来,目前工具中WViewRow组件使用了此属性,WViewColumn中此属性不起作用.下图是justify-conten ...

随机推荐

  1. IDEA离线更新

    因为在hosts文件添加以下dns添加 0.0.0.0 account.jetbrains.com 0.0.0.0 www.jetbrains.com 导致IDEA自动更新失败.手工下载回更新文件IU ...

  2. java：Echarts，POI

    1.Echarts: demo.js: function demo(selector){ var myEcharts=echarts.init(selector); var option = { ti ...

  3. 2019CVPR:Classification-Reconstruction Learning for Open-Set Recogition(Abstract)

    Abstract Open-set classification is a problem of handling 'unknown' classes that are not contained i ...

  4. 【DSP开发】mailbox的使用

    在DSP项目开发中,我用mailbox实现了进程间的通信,通过接收网络控制进程发来的mailbox,实现了云台的控制,其中需要学习的地方有两点:一是mailbox通信机制的学习,二是DSP时间管理机制 ...

  5. 【linux杂谈】查看centOS系统的版本号和内核号

    因为种种原因,我们通常需要查看centOS系统的版本号和内核号. 这里以centOS 6为切入点,展示了几种查看版本号和内核号的方法,同时也验证了其在centOS 7上的可行性. 一.centOS 6 ...

  6. Emgu 学习(7)threshold ，图像过滤

    Threshold 代码如下 static void Main(String[] args) { Mat img = CvInvoke.Imread(@"C:\Users\dell\Pict ...

  7. [转帖]Java 8新特性探究（九）跟OOM：Permgen说再见吧

    Java 8新特性探究(九)跟OOM:Permgen说再见吧 https://my.oschina.net/benhaile/blog/214159 need study 很多开发者都在其系统中见过“ ...

  8. Java代码执行顺序及多态体现

    /** * Description: * 基类的引用变量可以只想基类的实例对象也可指向其子类的事来对象 * 接口的引用变量也可以指向实现类的实例对象 * 程序调用的方法在运行期才动态绑定 * 绑定指将 ...

  9. hello2源代码分析

    String username = request.getParameter("username");/* *以 String 形式返回请求参数"username&quo ...

  10. java-selenium三种等待方式

    方式1: 线程等待:Thread.sleep(xxxx) 只要在case中加入sleep就会强制等待设置的时间后才会执行之后的命令,这种等待一般适用于调试脚本的时候. java代码 //等待3秒 Th ...