下图是微信官方的要求
 
按照小程序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. Redis 几个类型常用命令

    Redis 字符串(String) 下表列出了常用的 redis 字符串命令: 序号 命令及描述1 SET key value 设置指定 key 的值2 GET key 获取指定 key 的值.3 G ...

  2. linux常用命令(9)nl命令

    nl命令在linux系统中用来计算文件中行号.nl 可以将输出的文件内容自动的加上行号!其默认的结果与 cat -n 有点不太一样, nl 可以将行号做比较多的显示设计,包括位数与是否自动补齐 0 等 ...

  3. 跨平台python异步回调机制实现和使用方法

    跨平台python异步回调机制实现和使用方法 这篇文章主要介绍了python异步回调机制的实现方法,提供了使用方法代码 1 将下面代码拷贝到一个文件,命名为asyncore.py 代码如下: impo ...

  4. C语言：二维数组，（杨辉三角）

    二维数组:一维数组中的元素又是一个数组.声明的语法:数据类型 数组名[一维长度][二维长度]; int num[3][2]; 注意:int[][2];正确 int[2][];错误 二维数组中: 一维可 ...

  5. jQuery事件操作

    bind绑定事件 bind(type,data,fn) [参数描述] type (String) : 事件类型 data (Object) : (可选) 作为event.data属性值传递给事件对象的 ...

  6. C++笔记（1）——Anniversary

    世界太喧闹,不如敲代码. 直接上题目: Zhejiang University is about to celebrate her 122th anniversary in 2019. To prep ...

  7. python高级 之(三) --- 高阶函数

    高阶函数 map函数 简介 """ map(func,*iterables) 参数:一个是函数.一个是序列 作用:将序列中的元素依此作用于函数,将函数运行结果返回 存放于 ...

  8. 使用URLOS 五分钟安装rTorrent (轻量级优秀BT/PT客户端)

    rTorrent是一个非常简洁.优秀.非常轻量的BT客户端,它使用ncurses库以C++编写,将 rTorrent 用在安装有 GNU Screen 和 Secure Shell 的低端系统上作为远 ...

  9. sql for xml path 和group_concat

    /*sqlserver*/ select Id,AId,(SELECT IMEI+',' FROM Device as s WHERE s.Id=c.Id For XML Path('')) AS I ...

  10. Centos 7 下Gitlab 自启动设置

    禁止 Gitlab 开机自启动: systemctl disable gitlab-runsvdir.service 启用 Gitlab 开机自启动: systemctl enable gitlab- ...