认识达内从这里开始

表单设计在许多软件编程开发项目中都得到了广泛的应用，而本文我们就通过案例分析来简单了解一下，表单设计都有哪些样式与应用方法分享。

1.基本样式

1.1颜色

使用色彩系统设定中的10个色值即可满足样式使用要求，包括主色/状态色/中性灰色。其中中性灰色统一色相为H:220。偏蓝的灰色视觉上更清爽与讨好眼球。

色值

主色调的选择，一般根据用户群体、用户使用场景以及产品的定位来进行思考和选取。当然对于后台系统来说系统可做皮肤功能的扩展，给定用户一个基础的色调，然后做几套配色好的皮肤，让用户可以自由选择。对于公司来说一个项目可能会兼顾多个客户，客户都想要根据自己品牌色来做自己的系统，拥有多套可选择的方案也给后续维护和销售提供了便利。

色调的选择

1.2常规样式

默认文本标签以右对齐方式位于输入框左侧，并将用户使用过程中的各种状态样式考虑进来。各元素间距尽可能遵循以8px为增量单位的规则。

常规样式

1.3输入框高度

设定三种高度输入框以适应不同的设计空间与场景，高度分别为28/32/40(高度值同样适用于按钮与下拉框)，字号随之为12/14/16。其中large一般适用于展示型页面，如页/功能介绍页等。

输入框高度

1.4文本标签位置

a.左对齐文本标签居于输入框左侧

(考虑海外产品文本相对过长的情况，同时避免视觉上的参差不齐，不推荐使用a)

b.左对齐文本标签居于输入框上方

c.右对齐文本标签居于输入框左侧

文本标签位置

1.5强调文本

a.一般情况输入框外文本标签使用默认文本色。框内占位符文本使用浅文本色。

b.单独使用输入框时，或需强调输入框内文本标签时，框内文本使用默认文本色，外部文本使用浅文本色。

c.默认选中某个选项，或操作选中后，框内文本使用强调文本色。

强调文本

1.6标准字

后台系统在字体选择上都比较单一，中文：微软雅黑、英文：Arial即可。只是注意在给前端开发培训规范的时候重点提醒他们需要做字体样式的重置，不然当你后期走查界面的时候一个页面同时有宋体、有微软雅黑强迫症严重受不了啊，会非常影响看界面的心情。体会过走查这一步的设计师都懂。

标准字

1.7图标

图标现在几乎不用切图的方式去做了，都在是制作完成后上传到阿里巴巴的字体图标库中。前端调用方便调整大小和颜色也方便，关键是怎么处理都不会失真。

图标

1.8按钮

按钮是交互设计中必备的元素，它在用户和系统的交互中承担着非常重要的作用。后台中常见的按钮类型分为线性按钮、面状按钮、文字按钮、图标按钮、文字+图标按钮。规范中要写出按钮的样式包括宽高、圆角以及文字按钮的字数一般限制6个以内(这个是给产品同事看，有时候会拿到原型一个按钮字数特别长。想想看一个正常的按钮字数太多了用户都需要花很长时间去读取这个按钮的功能然后再操作，非常影响用户体验)。

按钮的宽度给一个常规的宽度和高度，然后操作正常宽度文字离边框的间间距是多少都需要写清楚。

以及按钮的各种状态：默认状态、鼠标悬停、焦点获取、按住/激活、禁用

按钮

2.基础表单

基础表单一般表现为10个以内的录入项，录入形式较为简单，且模块区域宽度相对较窄，一般宽度小于664px(以modalsmall宽度664px为区分值)满足以上条件定义为基础表单。一般用于登录注册模块或小型模态弹窗等。

2.1登录注册

无外部文本标签，单独使用输入框时，可增加icon辅助内容感知

登录注册

2.2模态弹窗

固定padding，不同宽度下输入框宽度自适应。

模态弹窗

3.高级表单

高级表单设计区域一般大或等于664px。并且为包含多于10个录入项或多种形式操作组件，需要分步操作或分组和分模块设计。仅以单列的形式排布，保证一致的纵线视觉浏览。

3.1.视觉居中

·一般默认单列视觉居中。为了在大宽度窗口下不至于模块留白过多，内容布局采用百分比规则横向自适应。

·整个模块自适应小宽度为1000。

·内容区域比例为：标签区30%-录入区50%-留白区20%。(录入区自适应大宽度为700px)

视觉居中

3.2.视觉居左

·根据上下模块整体美观度，或右侧需要展示其他信息内容的情况使用。

·内容区域比例为：标签区18%-录入区50%-留白区32%。(录入区自适应大宽度为700px)

·同样的，整个模块自适应小宽度为1000。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加抖音太原达内IT培训学习了解。