在设计工具中，根据规范我们定义了大中小三种按钮的尺寸
大：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. FormGroup验证不起作用

    读文件来动态地生成FormGroup 类似下面的代码 private formAttrs: FormGroup; for (var i = 0; i < this.array.length; i ...

  2. 数据库高级数据库学习--上机练习7（Transact-SQL 函数定义和调用）

    上机练习7 在Transact SQL中,有一类特殊的自定义函数,其返回值为一张表,该类自定义函数被称作内嵌(联)表值函数,其基本语句格式如下: CREATE FUNCTION函数名称[( {@参数名 ...

  3. 如何把本地文件上传至github?

    (都说git好用,但我觉得git把我弄得像个git……在反反复复用git bash的命令行上传失败了N次之后,终于可以用命令行把文件上传到GitHub了 这中间,还要感谢网络上的各种git教程!!!) ...

  4. Python核心编程练习题

    1.输入一个数值,判断是否为正数,负数,小数,以及字符串 import re def is_number(num): pattern = re.compile(r'^[-+]?[-0-9]\d*\.\ ...

  5. django实现利用mailgun进行收发邮件

    django窗口类运用和邮件收发 运用django窗口类来完成表单html 1 具体你看网址: https://www.cnblogs.com/guguobao/p/9322027.html 利用窗口 ...

  6. 3-2 LInux文件管理

    LInux文件管理 文件系统目录结构 Linux中目录结构是有一定的约定的FHS /bin:存放二进制程序 /boot:启动相关 /dev:设备文件 /etc:配置文件 /home:用户家目录 /li ...

  7. 蓝鲸 修改主机名重装后初始化不了cmdb安装不了job + 数据采集流程

    1.表象:在部署蓝鲸JOB过程中需要进行RabbitMQ的安装,数据初始化,激活步骤,此问题多发生在此过程 [ root@rbtnodel install)# ./bkcec initdata rab ...

  8. 【Java 基础】Java 基础索引

    Java 基础 注解 [注解]深入理解Java注解类型(@Annotation) [注解]Java注解(1)-基础 [注解]Java注解(2)-运行时框架 [注解]Java注解(3)-源码级框架

  9. [转帖]规模化敏捷-简要对比SAFe、LeSS和DAD模式

    规模化敏捷-简要对比SAFe.LeSS和DAD模式 http://blog.sina.com.cn//s/blog_15e1409550102x5yx.html   分类: 敏捷开发 目前有三种将Sc ...

  10. TCP/IP 物理层卷二 -- 交换技术

    一.概念 交换技术是指各台主机之间.各通信设备之间或者主机和通信设备之间(简单理解:你的PC和我的PC之间.你的PC和我的路由器.路由器之间)为交换信息所采用的的数据格式和交换装置的方式. 二.交换技 ...