下图是微信小程序官方要求字体规范
 
根据此要求小程序设计工具定制了符合规范的组件。如下图
 
工具使用时，将左侧组件拖拽到设计区域即可。字体大小和颜色都是按照规范设置的。在使用时根据微信要求在不同位置摆放即可。
以下截图是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. linux 基础 ls cd 目录含义

  2. FormGroup验证不起作用

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

  3. //C#中的访问数据符

    [在命名空间里面直接定义类型只能用internal  或 public ] [要被同个解决方案内 其他项目访问 ,加引用 导命名空间]. [类的默认修饰符是internal] 1.Private    ...

  4. MSSQL字符串分割

    CREATE FUNCTION dbo.f_splitstr( @str varchar(8000) )RETURNS @r TABLE(id int IDENTITY(1, 1), value va ...

  5. 大觅网01Day

    1.首先在上手之前准备几样开发辅助工具: ①vmware ②ubuntu ③xshell ④xftp 2.创建ubuntu系统 打开vmware创建一个新的虚拟机 在创建虚拟机时有几处需要留意 首先是 ...

  6. python高级 之(二) --- 类装饰器

    装饰器-初级 在不改变原有函数逻辑功能的基础上,为函数添加新的逻辑功能.使代码可读性更高.结构更加清晰.冗余度更低 简介 """ 闭包: 函数嵌套的格式就是闭包.写装饰器 ...

  7. PJzhang:我发现一个有两个答案的数独题

    猫宁!!! 最近做数独题,发现了一个答案不唯一的数独,之前对此类数独有所耳闻,但是没有亲手发现,碰巧发现一个,很是欣喜.   下面展示了两个答案   第一个 ​​   第二个 ​​   绿色标签是答案 ...

  8. 【神经网络与深度学习】YOLO windows 配置《Darknet配置》

    作者配置时的环境 visual studio 2013  显卡 GTX 960M  CUDA 7.5 OpenCV 2.4.9  pthreadpthread 下载地址 YOLO官网 [http:// ...

  9. linux下Eclipse进行C编程时动态链接库的生成和使用

    引用 http://linux.chinaitlab.com/soft/864157.html 欢迎进入Linux社区论坛,与200万技术人员互动交流 >>进入 一.创建动态链接库1.创建 ...

  10. 【神经网络与深度学习】Caffe Model Zoo许多训练好的caffemodel

    Caffe Model Zoo 许多的研究者和工程师已经创建了Caffe模型,用于不同的任务,使用各种种类的框架和数据.这些模型被学习和应用到许多问题上,从简单的回归到大规模的视觉分类,到Siames ...