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

小程序UI设计（2）-符合视觉规范-字体规范的更多相关文章

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

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

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

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

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

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

  4. 小程序UI设计（5）-符合视觉规范-按钮视觉规范

    在设计工具中,根据规范我们定义了大中小三种按钮的尺寸大:720rpx *94rpx 圆角10px 字体18中:360rpx*70rpx 圆角8px 字体16 文字距离两边最小60小:120rpx*60 ...

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

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

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

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

  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. C++数据结构之哈希表

    哈希表的定义:哈希表是一种根据关键码去寻找值的数据映射结构,该结构通过把关键码映射的位置去寻找存放值的地方.键可以对应多个值(即哈希冲突),值根据相应的hash公式存入对应的键中. 哈希函数的构造要求 ...

  2. 解决 JDK1.7 不支持 VCenter 6.7 的问题（涉及到Https TLS1.2协议）

    解决 JDK1.7 不支持 VCenter 6.7 的问题 问题描述 原项目工程是使用JDK 1.7,可以连接 5.X版本和 6.0版本的 VCenter资源池. 但是,现在VCenter已经升到 6 ...

  3. Win10资源管理器始终使用详细视图模式

    Win10系统中使用资源管理器时,如果文件夹里有音乐文件就自动切换视图模式为音乐模式,这样有时确实很头疼,看不到文件的大小等信息. 解决的办法如下: 新创建FolderType = NotSpecif ...

  4. DataTable.Select筛选过滤数据返回DataRow[]转为DataTable添加到DataSet

    问题还原,如图所示,我们要筛选所有SHDP 为北京翠微KR的数据. 1. 筛选DataTable微软为我们提供了一个方法DataTable.Select(),其用法如下: 1)  Select()—— ...

  5. 【HANA系列】【第六篇】SAP HANA XS使用JavaScript(JS)调用存储过程(Procedures)

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列][第六篇]SAP HANA XS ...

  6. 【POJ - 3087】Shuffle'm Up(模拟)

    Shuffle'm Up 直接写中文了 Descriptions: 给定两个长度为len的字符串s1和s2, 接着给出一个长度为len*2的字符串s12. 将字符串s1和s2通过一定的变换变成s12, ...

  7. 【AMAD】dogpile.cache -- 一个Python缓存API，提供一套通用的接口来适配不同的缓存后端

    简介 动机 作用 用法 个人评分 简介 Dogpile1由两套子系统组成,其中一个是基于另一个来构建的. dogpile提供了dogpile lock的概念,这个控制结构让一个线程可以被选为一些资源的 ...

  8. CAD常用命令、快捷键和命令说明大全

    CAD常用命令.快捷键和命令说明大全 一:常用功能键 F1: 获取帮助 F2: 实现作图窗和文本窗口的切换 F3: 控制是否实现对象自动捕捉 F4: 数字化仪控制 F5: 等轴测平面切换 F6: 控制 ...

  9. Mysql事务代码

    /// <summary> /// 删除相册 /// </summary> /// <param name="id"></param> ...

  10. CDH安装前系统优化准备

    参考: https://www.cnblogs.com/yinzhengjie/p/10367447.html https://www.sysit.cn/blog/post/sysit/CDH6.2. ...