小程序UI设计（1）-布局
工欲善其事必先利其器。下面为大家介绍一款工具软件，如何做到轻松布局。 工具简介：小程序layout设计工具，可视化方式进行小程序UI设计。通过鼠标拖拽组件方式进行UI布局。工具提供符合微信视觉统一的模板，并且按照FlexBox方式可视化布局。自动生成wxml和wxss，复制到微信 ...
原文：小程序UI设计（9）-文字排版
小程序中一般很少大段落的文字，基本是 个字的主题 一行标题 一行摘要 两行描述。显示时超出部分用省略号代替。下面结合工具使用介绍一下文字排版的方法。先看效果图。工具中属性设置如下图：两行文字属性，限制行数 ，表示最多两行，超出部分用省略号代替。不限制行数属性中限制行数 ，表示在小程序中根据文字内容自动拉伸。一行文字属性中限制行数 ，表示文字只显示一行，超出部分省略号代替。以上文字是显示在view中 ...
2016-12-13 13:44 0 9259 推荐指数：
相关推荐
小程序view排版
<view class="bc"> <view> <text bc_text>demo</text> ...
小程序UI设计之-介绍篇
工具截图 此工具通过可视化操作进行布局，依据iphone6尺寸设置画布，可以自动生成rpx和百分比的wxss。后续还会增加js代码自动生成。工具中组件按照微信小程序开发规范进行了缺省设置，margin、padding、fontsize、fontfamily、color等属性按照微信视觉一致规范定制 ...
Web前端设计排版小技巧
web设计排版多种多样，如何更好的排版、设计出更符合美学的设计了？设计该如何更好的做好网页设计的布局排版了，今天给大家分享这几个小技巧，希望大家能有所用。 一、强调字体 字体的设计与强调在网页当中相当重要，合适的排版和适当的字体强调，不仅可以让用户快速的抓住网站中的重点，同样可以增强网站 ...
小程序页面排版样式例子
在网上下载一个小程序源码，排版样式挺好看的，参照着写了几个例子。 1、例子1效果图 代码实现 （1）全局样式app.wxss View Code （2）页面文件.wxml View Code （3）页面文件 ...
小程序UI设计（5）-符合视觉规范-按钮视觉规范
在设计工具中，根据规范我们定义了大中小三种按钮的尺寸大：720rpx *94rpx 圆角10px 字体18中：360rpx*70rpx 圆角8px 字体16 文字距离两边最小60小：120rpx*60rpx 圆角6px 字体13 文字距离两边最小30这些按钮都放在工具的模板中，如下图： 微信中 ...
小程序UI设计（7）-布局分解-左-上下结构
FlexBox布局中的变幻方式很多，我们继续了解一个左-上下结构的布局分解 左边结构树中WViewRow下面有两个WViewColumn。WViewRow是横向排列，WViewColumn是纵向排列。 ...
小程序UI设计（10）-巧用模板，事半功倍
工具中为小程序员们准备了符合微信开发规范的模板。之前帖子中介绍的规范都在模板中已经设计好了，可以直接复制粘贴使用。下图中的样式是从模板直接复制过来的。实际使用时只要更换为自己的图片和文字即可。自动生成的wxml和wxss也可以直接使用。从而大大提高了开发效率。 下面是部分模板的展示： ...