表单的对齐方式-经验/观点-UICN用户体验设计平台

恭喜你成为UI中国推荐设计师（详情）

查看全部热门榜单

全部

常用搜索：作品集 AE ui设计 aigc icon logo app

您的意见是我们 UI 中国进步的动力！

点击立即反馈按钮，发表您的意见！

立即反馈

QQ群反馈

您也可以加入UI中国官方反馈群进行反馈！

群号：302892100

备注：反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作，请填写需求表单，我们会在第一时间与您联系！

0/20

0/200

设计大赛

设计大赛
发布广告
发布招聘
其它需求

取消发送需求

提交完成
感谢您对UI中国的支持和信赖！

我知道了

表单的对齐方式

0.0°

2020-02-27 原创文章 经验/观点 举报 1049 4 1 0

Sophia的玲珑阁关注

从大神那里学来的知识点，对齐方式有理有据

| 什么是表单？

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

| 表单的内容

从设计的范围上来看，包含了两个方面：

1.表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

2.表单按钮：包括提交按钮、复位按钮和一般按钮；

| 表单的对齐方式

今天来说说表单的对齐方式，一般情况下表单有如下几种对齐方式：

A类型

优点：

1.Label和Content关系紧密，容易识别和理解；

2.适合需要多语言切换的情况，能够兼容不同长度的文字（因为同一个词语不同语言翻译起来长短不一样，以日语和西班牙语最长），使得界面布局稳定；

缺点：

1.占用纵向空间比较多；

2.当采用多栏排版时，去过其中某一项内容比较长存在换行时会在一定程度上影响布局稳定性。

B类型

优点：

1.Label和Content关系紧密，容易识别和理解；

2.适合单栏排版；

缺点：

1.占用横向空间比较多，特别是当存在比较长的Label时；

2.在需要多语言切换时，有可能破坏布局视觉效果；

C类型

优点：

1.Label的扫描和阅读比较快；

2.适合单栏排版；

缺点：

1.占用横向空间比较多；

2.在某些语言下，一部分的Label和Content之间的距离会比较远；

D类型

优点：

1.节省空间；

缺点：

1.Label和Content不易区分，影响阅读；

| 选哪种比较合适？

个人整体感觉来看，D类的基本使用不到，国内如果不考虑多语言的话，B类对齐方式使用的频率最高，如果考虑海外场景的话，A最有普适性。

往期精彩文章

《关于交互设计的思维抽象》

《在家办公是要写日报的》

《B端设计之导航》

《Lottie - 让动画的实现变得如此简单》

作者简介：Sophia的玲珑阁，一枚爱折腾，爱健身的妹纸。

职场设计技能，更多教程抢先就看，请关注作者的微信公众号：Sophia的玲珑阁

更新：2020-02-27

4人已收藏

Sophia的玲珑阁

从创业公司到大厂，分享实用的互联网设计技巧和职场经验。

142

作品
389

粉丝
7

关注

猜你喜欢

2020-02-27 原创文章 经验/观点 举报 1049 4 1 0

表单的对齐方式

0.0°

添加收藏！

您还可以进行分类收藏

您确认要推荐？

该作品发布时间：2020年02月27日

评分

完整度

启发性

勤奋性

排版布局

提交需求

猜你喜欢

举报理由:

您确认要推荐？

评分

推荐心得