下图是微信官方的要求
 
按照小程序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. （4）rapidxml的详解及使用

        RapidXml是指 XML DOM解析工具包,是一个快速的读写xml文件的库文件(hpp).     (1)创建XML文件 #include <iostream> #includ ...

  2. docker上传私有仓库报错

    docker 1.17 版本搭建私有仓库,上传镜像报错:server gave HTTP response to HTTPS client” 系统环境:centos7docker版本:1.17(注意版 ...

  3. 有关face的好文MARK集

    Single Stage Headless Face Detector 据说已经超过了tiny face DDFD <Multi-view Face Detection Using Deep C ...

  4. VS2015服务器资源管理器连接Mysql数据库

    下载安装文件mysql-for-visualstudio-1.2.3.msi 下载成功后执行安装,选择change-->选择Custom安装成功后,发现vs中没有效果. 注意这里再次执行安装文件 ...

  5. 【HANA系列】SAP HANA SQL获取字符串长度

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA SQL获取字符 ...

  6. 【VS开发】C++线程安全

    我们是多么渴望各种C++类都是多线程安全的,然而一旦涉及到对象间的交互,这样的渴望可能就只能是奢望了.下面,我们以设计一个双向链结点为例,看看要使其多线程安全将会带来一些什么问题. class Dou ...

  7. hue改下载行数

    参考: https://blog.csdn.net/lingbo229/article/details/85991230 修改hue所在机器的默认配置后,重启hue即可 find / -name be ...

  8. windows10专业版激活

    [1]右击我的电脑->属性,查看激活情况 [2]管理员身份打开CMD [2.1]如果不知道CMD是什么东西 [2.2]如果上面那个也找不到,直接按windows键(就是ctrl和alt中间那个键 ...

  9. SpringMVC异常体系

    在服务端经常会遇到需要手动的抛出异常,比如业务系统,校验异常,比较通用的处理方案是在最顶层进行拦截异常,例如Struts的全局异常处理,而Spring的异常处理机制就相对于Struts来说好用多了   ...

  10. IE浏览器(js)new Date()带参返回NaN解决方法

    function myNewDate(str) { if(!str){ return 0; } arr=str.split(" "); d=arr[0].split("- ...