在设计工具中，根据规范我们定义了大中小三种按钮的尺寸
大：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. Hibernate5+Spring4整合

    (1) pom.xml <!--Spring Object/Relational Mapping --> <dependency> <groupId>org.spr ...

  2. WebApiTestClient

    1.WebApiTestClient组件作用主要有以下几个: (1).将WebApi的接口放到了浏览器里面,以可视化的方式展现出来,比如我们通过http://localhost:8080/Help这个 ...

  3. Django模板系统-母板和继承

    母板和继承 母版 html页面,提取多个页面的公共部分 定义多个block块,需要让子页面进行填充 <head> {% block page-css %} {% endblock %} & ...

  4. 《Java开发手册》

    一. 编程规约 (一) 命名风格 [强制]抽象类命名使用Abstract或Base开头:异常类命名使用Exception 结尾:测试类 命名以它要测试的类的名称开始,以Test结尾. [强制]POJO ...

  5. 对scrapy进行单元测试 -- 使用betamax

    使用betamax进行单元测试 爬虫代码 测试代码 对于scrapy的单元测试,官方文档并没有提到,只是说有一个Contract功能.但是相信我,这个东西真的不好用,甚至scrapy的作者在一个iss ...

  6. Linux C/C++基础——Windows远程登录Linux

    首先介绍两个ubuntu系统管理命令,用来测试连通性,及获取IP地址. 1.ping ping命令用来测试远程主机的连通性 使用方法:ping [参数] 远程主机IP地址 参数 功能 -a 每次相应时 ...

  7. hadoop3.1.2启动和停止

    1/  启动 启动zookeeper: 三个节点上都zkServer.sh start 启动hdfs和yarn: 101上start-dfs.sh  102上start-yarn.sh 启动hive: ...

  8. [c++] 用宏定义一个函数

    要点:变量都用括号括起来,防止出错,结尾不需要;.在实际编程中,不推荐把复杂的函数使用宏,不容易调试.多行用\ 要写好C语言,漂亮的宏定义是非常重要的.宏定义可以帮助我们防止出错,提高代码的可移植性和 ...

  9. （转）SQLServer查询数据库各种历史记录

    一. 数据库启动记录 1. 最近一次启动SQL Server的时间 select sqlserver_start_time from sys.dm_os_sys_info; --也可参考系统进程创建的 ...

  10. Java设计模式之外观模式和最少知识原则

    外观模式: 外观模式:提供一个统一的接口,来访问子系统中一群功能相关接口(类似一键启动,一键关闭等等) 外观模式定义了一个高层接口,让子系统更容易使用 降低对外接口耦合度 外观模式和命令模式各自侧重点 ...