pic
1.高级搜索（大体结构）
高级搜索要比普通搜索更复杂一些。通常普通搜索就是一个输入框和一个搜索框组成的，而高级搜索是由很多个输入部分和其他的控件来组成的。我画的高级搜索大致长这样，是一些基础框架，而实际项目中要结合“其他控件”来做，下面会举个例子来解析它。由于高级搜索是由以前讲过的搜索部分组成的，在这里就不过多强调它的绘制方法了，这部分的框架可以在文章下方中的附件中找到，大家去下载就可以了。
2.高级搜索 - 原结构 [解析]
这里我就拿“百度搜索引擎-高级搜索”来做案例的解析。解析百度搜索引擎的高级搜索完全是我根据个人经验来做的，就会比较主观，也只是提供一种参考吧，还希望大家根据自己的理解去思考吧，实际效果如下。觉得图片不清晰的朋友们可以在文章下方下载附件，里面有原图。
原结构中我认为还是存在一些问题的，一个一个来讲。在原结构中层级分为三级，但由于亲密性影响关联性，把层级1和层级2做到一块而孤立了层级3。这么做的目的是想要强化层级1的功能与重要性，就要破坏层级2与层级3的关系，但也失去了整体性。文本与文本域就应该是一个整体，这样强行拆开就不像一个表单了，也要增强文本与文本域之间的整体性。
原结构中存在的第二个问题就是“理解力”，这里的理解力是用户理解力，虽然是微体验，但影响也是挺大的。我们来分析一下原结构中用户的理解路径。一个正常的用户首先看到下面这个表单，理解路径应该是<红1 - 橙2- 蓝3>这样一个理解过程，但问题是这里忽视了用户的记忆能力，当填写相应的搜索内容时，用户是需要确认填写信息的，如果用户记不住和需要更多时间来理解这些功能描述，就要从头再理解再确认一遍，就增加了用户的学习成本和时间成本，造成不好的用户体验。那这里可不可以在文本域中加“提示信息”呢，这里加了提示信息，表单全都是功能描述，加重了功能视噪，也会造成不好的体验。
原结构中存在的第三个问题就是“功能视噪”，意思是功能描述造成了太多的视觉噪点。应该简化用户的理解力，并减少用户的思考，如果给出太多的功能描述信息就会加重用户的思考，也会浪费用户的时间。这个功能描述跟字符长度和理解力有关，例如“姓名”和“限定要搜索指定的网站是”，理解程度均是不相同的。如下图所示，要理解的功能太多了，而又不做简化，势必会增加用户的理解难度。如果项目需求中就要求有这么多难理解的功能怎么办，这个问题在下面的修改结构中会讲到。
原结构中存在的第四个问题就是“界面美观度”。我觉得整个百度搜索引擎的界面美观度也不太理想，高级搜索这块做的就更粗糙了，没有美感。当然了他们的设计师可能站在“向下兼容”的角度去考虑问题了，希望兼容所有现象不好的显示器，也是有可能的。界面美化都是一些基础操作，这里就不过多赘述了。
3.高级搜索 - 修改结构 [解析]
修改结构就要修改原结构中的缺陷，要解决上面所提到的所以问题，那第一个要解决的问题是“层级”。上面提到说把文本和文本域拆开来做会失去关联性，也更不像一个表单了。所以我增强了文本域文本域之间的关联性，看上去像一个完整的表单了。
增强文本与文本域的关联性的方法是把文本由左对齐修改为右对齐，但这样做有会产生一个新的问题，那就是文本产生的负形太大了与层级1的功能说明之间的关联性变弱了，如下图所示。
同时又造成了另一个问题，用户的视线被拉长了。用户每次确认信息准确性时视线还得返回到起点，然后再按照理解路径去填写相应的信息，这样造成的体验也是不好的。
解决这个问题的方法就引入了要解决的第二个问题 -“功能视噪”。上面也讲了功能描述太多了会造成视觉噪点，所以这里要减少视觉噪点的同时，还要解决“文本造成的负形”和“用户视线变长”的问题。我的解决办法是，去掉这些功能描述，直接按照两个大类来做功能划分，就是去掉了一些字，就完美了解决了“功能视噪”、“文字负形”和“用户视线变长”这三个问题。
细讲一下怎么解决“功能视噪”的问题的。功能描述过多就会越难理解，要想降低用户的理解就要做简化，不按照功能描述做广度的平铺，而是做深度引导，直接用一个大类来代表这些功能就行了，如下图所示。
接下来讲一下如何解决文字负形与用户视线变长的问题，由于结构的变化当按照大类来做区分，文本负形的影响就会变得非常小了。而用户的视线也不用做迂回了，前面已经没有信息可确认了，相应的也减少了用户的视线使它变短了。
最后再解决一下“用户理解力”的问题。按照新改的结构，也依然会出现上面提到的问题，理解路径应该是<红1 - 橙2- 蓝3>这样一个理解过程，用户在填写表单的时候还是会去确认信息的准确性，也不容易记住。
解决这个问题的办法就是加“提示信息”，在文本域中加提示信息。而之前我在功能视噪那块去掉了很多功能描述，那在这里做提示信息，就应该提示之前删掉的功能描述。这样就保证了用户不用回去确认信息，即使用户记忆能力弱也能顺利填写相应的信息。这里加的提示信息应该精炼易懂，也要有效的降低用户的学习成本。
这里就是最后的修改结构部分了。我的整个修改过程大致就是这么想的。当然了我在下面提到的这写想法也不一定对，还是需要大家根据自己的理解去思考。原图在文章下方的附件中也是可以下载的。
4.基础校验表单（样式）
下图所示是基础校验表单的样式，具体绘制方法也比较常规就不讲了，下方的附件中有原图，大家可以下载附件来做参考。
5.控件表单（样式）
跟基础控件表单一样，绘制方法也比较常规就不讲了，下面附件中有原图大家下载就可以了。
6.弹窗（样式）
还有弹窗啊，我个人感觉弹窗没什么好讲的，也都是一些比较基础的操作，里面可以做一些复合功能什么的。也是附件里面有原图，大家自己下载就行了。
谢谢阅读
原文链接：
感谢支持
作者：罗耀UI设计
链接：https://www.zcool.com.cn/article/ZOTQ5MTI0.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。