在设计工具中，根据规范我们定义了大中小三种按钮的尺寸
大：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. 一个好看的测试报告模板BeautifulReport

    def nrun(): report = ('report_' + ('%s') % time.strftime("%Y-%m-%d-%H-%M-%S", time.localti ...

  2. java：zookeeper集群配置，dubbo

    1.zookeeper集群配置: 2.dubbo:(配置见视频)

  3. ASP.NET(C#) 使用 SqlBulkCopy 实现批量插入SQL（快捷简单）

    业务需要,系统在处理数据时,每暂存一列数据将他插入到右侧的表格中,再执行批量保存,如图所示: //以前的做法可能是生成一堆 insert into xx values xxx 的sql语句,在程序中去 ...

  4. &&、()、||决定linux命令的执行顺序

    在执行某个命令时,有时需要依赖前面的命令是否执行成功.假如你想通过ssh命令复制很多数据文件到另外的机器后,删除所有源有文件,所以在删除源有文件之前首先要确定复制是不是执行成功.只要执行复制成功才可以 ...

  5. 亚马逊s3存储： aws cli上传工具速度和各文件大小关系探究

    1,背景介绍 公司最近最近统一了存储环境,由ftp文件存储全量转换为ceph存储.有业务组表示以前往ftp文件批量上传30万个文件1.3GB只需要16分钟左右.切换为ceph存储需要1个多小时,也就是 ...

  6. C++学习笔记-引用

    引用是C语言中没有,而在C++中又很重要的一个概念,通过应用,可以得到变量本身,相对于得到变量的值而言,有更大的操作空间. 普通引用 变量的本质 变量名实质上是一段连续存储空间的别名,是一个标号 程序 ...

  7. 海量数据和高并发下的 Redis 业务优化实践

    本文内容是我在 6 月 23 日参加的深圳 GIAC 技术大会上演讲的文字稿. 观众朋友们,我是来自掌阅的工程师钱文品,掘金小册<Redis 深度历险>的作者.今天我带来的是分享主题是:R ...

  8. 设计模式:策略模式(Stratege)

    首先我们需要知道策略模式与状态模式是如此的相似,就犹如一对双胞胎一样.只不过状态模式是通过改变对象内部的状态来帮助对象控制自己的行为,而策略模式则是围绕可以互换的算法来创建成功业务的.两者都可用于解决 ...

  9. 厉害了，ES 如何做到几十亿数据检索 3 秒返回！

    一.前言 数据平台已迭代三个版本,从头开始遇到很多常见的难题,终于有片段时间整理一些已完善的文档,在此分享以供所需朋友的 实现参考,少走些弯路,在此篇幅中偏重于ES的优化,关于HBase,Hadoop ...

  10. (一)Java秒杀项目之项目环境搭建

    一.Spring Boot环境搭建 1.把项目分成多个模块,每个模块对应一部分(不一定是一个章节)的内容,代码将在文章的具体位置给出,每个模块都是在之前模块的基础上构建,每个模块都为Spring Bo ...