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

 为例制作符合规范的布局。
首先在工具的画布上拖拽WViewRow。
 
然后设置width=375，padding-left和padding-right为15。再鼠标拖拽过来两个wviewrow，一个宽度是85，一个宽度是375-15-85-15=260。然后修改这两个view的align-items为center，使内部组件纵向居中排列。然后85的view里面拖入wtext17pt组件，260的view拖入winput17pt组件。

 
然后修改文字内容。

 。输入框的placeholder在“输入提示”中输入。
刚才忘了设置260宽度view的margin-left。规范中规定是5px。

 
由于增加了margi-left，根据flexbox布局要求会在第二行，这时修改宽度为260-5=255就可以了。

 

这样一个符合规范的输入项就基本完成了。
如果想自己调整留白、字体大小可以通过属性面板进行调整。

小程序UI设计（4）-符合视觉规范-表单输入视觉规范的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. 小程序UI设计之-介绍篇

    工具截图 此工具通过可视化操作进行布局,依据iphone6尺寸设置画布,可以自动生成rpx和百分比的wxss.后续还会增加js代码自动生成.工具中组件按照微信小程序开发规范进行了缺省设置,margin ...

  7. 小程序 <web-view></web-view> 中使用 form 表单提交

    在最近的小程序项目中,使用到了 <web-view></web-view> 内嵌 H5 页面,在 H5 中需要使用 form 表单提交数据. H5 使用的技术框架是 vue+v ...

  8. 微信小程序：input输入框和form表单几种传值和取值方式

    1.传值:index下标传值.页面navigator传值 1.index下标 实现方式是:data-index="{{index}}"挖坑及e.currentTarget.data ...

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

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

随机推荐

  1. CKeditor从Word粘贴格式问题

    在config.js中添加配置 config.pasteFromWordRemoveFontStyles = false;    config.pasteFromWordRemoveStyles = ...

  2. spring boot系列（三）spring boot 配置spring data jpa

    数据库使用MySQL,ORM使用spring data jpa 1 因此需要再pom.xml文件中添加相应jar包.如下: <!-- 引入jap --> <dependency> ...

  3. mysql的基本操作命令

    1,数据库操作: create database 数据库名 例:create database test; 亦或 create database test charset=utf8; 相关操作: 显示 ...

  4. Centos 在线安装 nginx

    centos 在线安装 nginx 安装nginx ​ 参考文档: http://nginx.org/en/linux_packages.html 中的RHEL/CentOS章节,按照步骤安装repo ...

  5. k8s1.11.0安装、一个master、一个node、查看node名称是主机名、node是扩容进来的、带cadvisor监控服务

    一个master.一个node.查看node节点是主机名 # 安装顺序:先在test1 上安装完必要组件后,就开始在 test2 上单独安装node组件,实现node功能,再返回来配置test1加入集 ...

  6. IntelliJ IDEA 2018 for Mac使用技巧

    IntelliJ IDEA 2018 for Mac是一个综合性的Java编程环境,被许多开发人员和行业专家誉为市场上最好的IDE,它提供了一系列最实用的的工具组合:智能编码辅助和自动控制,支持J2E ...

  7. 简单场景的类继承、复杂场景的类继承（钻石继承）、super、类的方法

    1.python子类调用父类成员有2种方法,分别是普通方法和super方法 class Base(object): #基类的表示方法可以多种,Base(),Base,Base(object),即新式类 ...

  8. Mac下搭建Apache+PHP+MySql运行环境

    https://www.cnblogs.com/xiaovw/p/8854896.html 前言 我们在Mac上搭建Apache+PHP+MySql环境是非常方便的,因为Mac预装的有Apache和P ...

  9. [转帖]从Intel和ARM争霸，谈芯片前世今生

    从Intel和ARM争霸,谈芯片前世今生 http://www.itpub.net/2019/07/24/2476/ 长文预警, 写的非常好.. 我尽量写得轻松一些,因为其实这个话题很有趣,仔细探究起 ...

  10. 使用正则实现php的trim函数，支持全角空格

    之前使用trim来移除一段文字开头的空格,移除不掉,发现是全角空格的锅. 便专门添加对全角空格的移除: trim($str," "); 但是效果并不好,因为trim函数对多字节字符 ...