包含文件上传的表单_表单的对齐方式

| 什么是表单? 百度百科的解释是表单在网页中主要负责数据采集功能。用通俗易懂的话来说,就是我们看到的页面需要填写较多相关信息的页面,都叫做表单,如下图。

c08203e2bc9c243e7e25b3653c444017.png

| 表单的内容 从设计的范围上来看,包含了两个方面: 1. 表单域 :包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 2. 表单按钮 :包括提交按钮、复位按钮和一般按钮; | 表单的对齐方式 今天来说说表单的对齐方式,一般情况下表单有如下几种对齐方式:

3e66c142050962236b4a5ac12b3f8770.png

A类型

3749d4d2fe94b6130bf89475c57153fe.png

优点: 1.Label和Content关系紧密,容易识别和理解; 2.适合需要多语言切换的情况,能够兼容不同长度的文字(因为同一个词语不同语言翻译起来长短不一样,以日语和西班牙语最长),使得界面布局稳定; 缺点: 1.占用纵向空间比较多; 2.当采用多栏排版时,去过其中某一项内容比较长存在换行时会在一定程度上影响布局稳定性。 B类型

9e9d1bb7164d1cc5dd625af8bb7f39de.png

优点: 1.Label和Content关系紧密,容易识别和理解; 2.适合单栏排版; 缺点: 1.占用横向空间比较多,特别是当存在比较长的Label时; 2.在需要多语言切换时,有可能破坏布局视觉效果; C类型

b48f435eaedcfc65b9f12e10200b45cb.png

优点: 1.Label的扫描和阅读比较快; 2.适合单栏排版; 缺点: 1.占用横向空间比较多; 2.在某些语言下,一部分的Label和Content之间的距离会比较远; D类型

2e439d94264f16830c35c9995efe726a.png

优点: 1.节省空间; 缺点: 1.Label和Content不易区分,影响阅读; | 选哪种比较合适? 个人整体感觉来看,D类的基本使用不到,国内如果不考虑多语言的话,B类对齐方式使用的频率最高,如果考虑海外场景的话,A最有普适性。 往期精彩文章《关于交互设计的思维抽象》《在家办公是要写日报的》 《B端设计之导航》 《Lottie - 让动画的实现变得如此简单》

626911365b6bf237470aa03268e7d671.png

如果此文对您有用,希望可以随手转发或点下 在看 ,拜谢。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值