产品优化实战——"搜索区域"优化

进入公司后，主要是在百卓优采采购管理软件企业版（下文简称“企业版”）做交互设计。接触产品初期，产品导向主要是以“需求功能”的添加、相关功能点的优化为主。优化的功能点以用户反馈的居多，企业版中一些界面设计不合理、用户体验不佳的地方，提出要优化，大多会被产品经理以“糖衣炮弹”击破。

对于企业版“搜索区域”的优化，前期优化方案提出来后，开发评估工作量很大，且开发人员任务繁重，故暂被搁置。后来企业版进入2.0版本，借此将“搜索区域”优化排上日程。

一、优化前

优化前.png

二、发现痛点

1、默认情况下，“搜索区域”占用空间过大；

搜索区域在默认（不展开）情况下，占了页面近¼的空间，在单据列表中，用户的主视觉区域应该更多的展示单据列表内容，而不是让辅助查看列表的“搜索区域”占用较大空间。

搜索区域.png

2、搜索项之间并没有进行很好的对齐，显得很杂乱；

当看到这个搜索时，内心是极不舒服的，简单的搜索，竟被玩出了这么多种“花样”来。

示例：

示例-1.png

示例-2.png

示例-3.png

无序的事物让人烦躁，没有安全感。

场景：用户（采购员）每天需要处理大量的单据业务，工作很繁忙，当查看单据列表时，参差、杂乱的搜索界面与用户的烦躁因子产生共鸣，产生烦躁情绪，对产品的操作体验大打折扣。在用户的工作过程中，与数字有较多的接触，烦躁的情绪对其工作也会带来一定的负面影响。

3、不能快速清除输入框中的内容

想要更改某个搜索项值（输入框类型），需要一个字一个字的去删除，操作起来费时、麻烦，操作体验不好。

清除输入框内容.gif

三、刺破痛点

刺破1：默认情况下，“搜索区域”占用空间过大；

• 页面顶部的标题主要作用是“导航标识”。产品左侧的菜单按钮，一方面有“点击跳转”的功能，另一方面菜单上的文字也具有“导航标识”功能。两者在功能上具有一定的重复性，且“内容区域”本身也具有较强的识别性，所以考虑去掉页面顶部标题。——删除
• “搜索”按钮和“更多搜索条件”/“精简搜索条件”，本身内容不多，却占据了一整行，降低了页面空间的利用率，可将其移至“搜索区域”的右侧。但是这样做也会存在风险：会增大“搜索区域”的宽度，致使整个页面宽度增加，对于“小屏”用户，在载入页面时，看不到“更多搜索条件”，甚至“搜索”按钮也可能被遮挡住。（在设计时，需要对每个搜索项宽度进行控制，以及一些文案内容的精简）

设计草图：

设计草图.png

刺破2：搜索项之间并没有进行很好的对齐，显得很杂乱；

借用《写给大家看的设计书》中关于对齐的几个观点：

• 我们的眼睛喜欢看到有序的事物：这会给人一种平静、安全的感觉。此外也有助于表达信息。

• 任何元素都不能在页面上随意摆放。每个元素都应该与页面上的另外一个元素存在某种视觉联系。
• 对齐的根本目的是要使页面统一且有条理。其效果类似于把客厅里四处零落的洋娃娃捡起来，并把它们放在一个玩具箱中。

仔细观察后发现，相邻两个搜索项之间的距离都是相等的，但是因为搜索项控件类型的不同（输入框、下拉框、日期控件等），导致其长度不等。即使相邻搜索项的间距相同，但是整体看上去还是杂乱无章的。

搜索项间距示意图.png

较好的解决方法是：将“搜索项”按照长度进行分类，分为“长"、“短”两类。短的一类长度统一定义为“1”、长的一类长度统一定义为“2”，通过划分，搜索项就能够排列整齐了。

设计草图：

设计草图.png

刺破3：不能快速清除输入框中的内容

场景：在“关键字搜索”中，输入某个供应商名称后，需要对其进行修改。

途径：①：鼠标选中输入的内容，通过键盘进行清除；
　　　②： 将光标定位在所输入内容的末端，通过键盘一个一个清除；

分析：两种方法都是通过“鼠标”+“键盘”的组合来完成“清除"操作。对于“途径①”还是较快捷的完成清除操作，但是“途径②”的操作是比较繁琐的，操作体验并不好。

尝试：

• 在输入框的末端放置一个“x”号，鼠标点击即可快速清除输入框里的内容。
• 该方法只需通过鼠标点击即可完成“清除”操作，一方面降低了该功能对设备的依赖度，另一方面，“x”号也能够引导用户通过点击来快速完成清除操作。

设计草图：

设计草图.png

四、方案输出

经过前期的痛点分析，与产品、开发人员进行多次的交流与讨论，且综合考虑各方面情况，敲定了最终的设计方案。

方案详情规则：

1、长度

定义：将日期控件的长度定义为1个“基本长度单元”（长262像素）。
①：所有“搜索项”的长度都为1个“基本长度单元”。
②：“搜索区域”一行至多显示3个“基本长度单元”，且默认只显示一行。
③：“搜索按钮”和“搜索结果”放置在“搜索区域”的最右侧，与第一行“搜索项”水平对其。
④：“搜索项”之间的距离为68像素，此距离保证了分辨率为1366×768的用户界面可以完整显示（注：在产品用户中，分辨率为1366×768及以上的占比为74.66%）。
⑤：更多“搜索项”通过击“尖三角”进行查看。

基本长度单元-示意.png

2、“清除”功能

在输入框（尾部）增加“清除”按钮，默认情况下（或值为空时）不显示“X”号，值不为空时，显示“X”号。
（注：“日期控件”和“下拉框”这两类没有“清除”功能。）

清除功能-示意.png

３、显示

①：当搜索项只有1个或2个时，显示样式如下：

显示-示意.png

②：搜索项中“自定义字段”的显示
a. 搜索项中，字段名称最大支持5个“汉字”长度；
b. 字段名称过长时，由“4个汉字”+“…”组成，鼠标移上去时，显示完整的字段名称。

自定义字段的显示-示意.png

③：“关键字”搜索项的暗注释内容精简显示

• 物品编号/物品名称　　　　——精简——>　　物品
• 供应商编号/供应商名称　　——精简——>　　供应商

最终设计方案：

最终设计方案.gif