设计语言 - 表单（其他表单）

版权申明：本文出自“罗耀_UI”原创，感谢“罗耀_UI”的原创文章分享！

我一看都快一个月没有写文章了，时间过得这么快嘛~ 那话说回来，之前没有更新也是有一定的原因的，毕竟上一篇文章存在一些争议，就会加重我的思考，就导致我不知道该如何去写了。所以这段时间转头去研究自然结构、科学、神学与哲学，自然就没有更新啦。 嗯~！这个理由找的还是蛮棒的。

那这次开篇要强调一下，"尺寸不是绝对的，还是要根据设计师的经验与审美来决定的"与"固定数值是引导新人去理解规则，之后要根据自身的理解去找到属于自己的规则"。这两点须知还需要大家去理解一下的。

之前有些类似的知识已经讲过了，这里会出现一个问题这样的问题："知道如何绘制这些组件但不清楚它们的样式与结构"。那针对这个问题我打算在文章下方放出我做的设计语言中表单部分的原图，这样大家就可以根据自身的理解参考着来做啦。（文章底部-右侧-下载附件）

目录

1. 高级搜索（大体结构）

2. 高级搜索（实际案例）- 原结构[解析]

3. 高级搜索（实际案例）- 修改结构[解析]

4. 基础校验表单（样式）

5. 控件表单（样式）

6.弹窗（样式）

1.高级搜索（大体结构）

高级搜索要比普通搜索更复杂一些。通常普通搜索就是一个输入框和一个搜索框组成的，而高级搜索是由很多个输入部分和其他的控件来组成的。我画的高级搜索大致长这样，是一些基础框架，而实际项目中要结合"其他控件"来做，下面会举个例子来解析它。由于高级搜索是由以前讲过的搜索部分组成的，在这里就不过多强调它的绘制方法了，这部分的框架可以在文章下方中的附件中找到，大家去下载就可以了。

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/

2.高级搜索 - 原结构 [解析]

这里我就拿"百度搜索引擎-高级搜索"来做案例的解析。解析百度搜索引擎的高级搜索完全是我根据个人经验来做的，就会比较主观，也只是提供一种参考吧，还希望大家根据自己的理解去思考吧，实际效果如下。觉得图片不清晰的朋友们可以在文章下方下载附件，里面有原图。

原结构中我认为还是存在一些问题的，一个一个来讲。在原结构中层级分为三级，但由于亲密性影响关联性，把层级1和层级2做到一块而孤立了层级3。这么做的目的是想要强化层级1的功能与重要性，就要破坏层级2与层级3的关系，但也失去了整体性。文本与文本域就应该是一个整体，这样强行拆开就不像一个表单了，也要增强文本与文本域之间的整体性。

原结构中存在的第二个问题就是"理解力"，这里的理解力是用户理解力，虽然是微体验，但影响也是挺大的。我们来分析一下原结构中用户的理解路径。一个正常的用户首先看到下面这个表单，理解路径应该是<红1 - 橙2- 蓝3>这样一个理解过程，但问题是这里忽视了用户的记忆能力，当填写相应的搜索内容时，用户是需要确认填写信息的，如果用户记不住和需要更多时间来理解这些功能描述，就要从头再理解再确认一遍，就增加了用户的学习成本和时间成本，造成不好的用户体验。那这里可不可以在文本域中加"提示信息"呢，这里加了提示信息，表单全都是功能描述，加重了功能视噪，也会造成不好的体验。

原结构中存在的第三个问题就是"功能视噪"，意思是功能描述造成了太多的视觉噪点。应该简化用户的理解力，并减少用户的思考，如果给出太多的功能描述信息就会加重用户的思考，也会浪费用户的时间。这个功能描述跟字符长度和理解力有关，例如"姓名"和"限定要搜索指定的网站是"，理解程度均是不相同的。如下图所示，要理解的功能太多了，而又不做简化，势必会增加用户的理解难度。如果项目需求中就要求有这么多难理解的功能怎么办，这个问题在下面的修改结构中会讲到。

原结构中存在的第四个问题就是"界面美观度"。我觉得整个百度搜索引擎的界面美观度也不太理想，高级搜索这块做的就更粗糙了，没有美感。当然了他们的设计师可能站在"向下兼容"的角度去考虑问题了，希望兼容所有现象不好的显示器，也是有可能的。界面美化都是一些基础操作，这里就不过多赘述了。