在设计工具中，根据规范我们定义了大中小三种按钮的尺寸
大：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. 最短路径:Dijkstra算法 C#

    class Program { ; static void Main(string[] args) { Console.WriteLine("各点距离矩阵如下:"); Consol ...

  2. python中接受上一条命令执行的结果----subprocess.check_output()

    subprocess.call 是不能作为赋值的,需要用到 subprocess.check_output 函数,而且如果要引用赋值就必须使用subprocess.call(['echo',line] ...

  3. Winform非UI线程更新UI界面的各种方法小结

    我们知道只有UI线程才能更新UI界面,其他线程访问UI控件被认为是非法的.但是我们在进行异步操作时,经常需要将异步执行的进度报告给用户,让用户知道任务的进度,不至于让用户误认为程序“死掉了”,特别是对 ...

  4. php 通过mysqli 操作数据库mysql

    目录 php mysqli 操作数据库 连接数据库 通过mysqli 创建数据库 通过mysqi 创建数据表 通过mysqli向数据表中插入信息 通过mysqli 读取数据 where语句的应用 通过 ...

  5. 为什么样本标准差要除以n-1？

    根据中心极限定理,我们可以用样本估计总体的平均值.那么,如果通过n个样本估计总体的标准差则需要除以n-1,这是为什么呢? 标准差是描述数据与平均值的偏离程度. 而因为样本的数据量比总体的数据量少,因此 ...

  6. Cisco路由器的dhcp服务的配置的命令

    Router(config)#IP DHCP POOL Jason Router(dhcp-config)#net 172.16.10.0 255.255.255.0 Router(dhcp-conf ...

  7. 【机器学习】梯度、Hessian矩阵、平面方程的法线以及函数导数的含义

    想必单独论及" 梯度.Hessian矩阵.平面方程的法线以及函数导数"等四个基本概念的时候,绝大部分人都能够很容易地谈个一二三,基本没有问题. 其实在应用的时候,这几个概念经常被混 ...

  8. C学习笔记-指针

    指针的概念 指针也是一个变量,指针变量的值是另一个变量的地址 换句话说就是,指针存放的是一个内存地址,该地址指向另一块内存空间 指针变量的定义 指向一个变量的变量 int *p = NULL; p = ...

  9. Duilib的多级菜单实现（网易云信版本）

    完整代码见:https://github.com/netease-im/NIM_Duilib_Framework/tree/master/ui_components/menu 核心代码: ui_men ...

  10. vue---EleElement UI 表格导出功能

    步骤一:安装依赖 安装依赖:npm install --save xlsx file-saver 步骤二:在放置需要导出功能的组件中引入相关组件 import FileSaver from 'file ...