产品优化实战——"搜索区域"优化
发布网友
发布时间：2022-11-19 16:35
共1个回答
热心网友
时间：2024-11-19 12:36
进入公司后，主要是在百卓优采采购管理软件企业版（下文简称“企业版”）做交互设计。接触产品初期，产品导向主要是以“需求功能”的添加、相关功能点的优化为主。优化的功能点以用户反馈的居多，企业版中一些界面设计不合理、用户体验不佳的地方，提出要优化，大多会被产品经理以“糖衣炮弹”击破。
对于企业版“搜索区域”的优化，前期优化方案提出来后，开发评估工作量很大，且开发人员任务繁重，故暂被搁置。后来企业版进入2.0版本，借此将“搜索区域”优化排上日程。
搜索区域在默认（不展开）情况下，占了页面近¼的空间，在单据列表中，用户的主视觉区域应该更多的展示单据列表内容，而不是让辅助查看列表的“搜索区域”占用较大空间。
当看到这个搜索时，内心是极不舒服的，简单的搜索，竟被玩出了这么多种“花样”来。
示例：
场景：用户（采购员）每天需要处理大量的单据业务，工作很繁忙，当查看单据列表时，参差、杂乱的搜索界面与用户的烦躁因子产生共鸣，产生烦躁情绪，对产品的操作体验大打折扣。在用户的工作过程中，与数字有较多的接触，烦躁的情绪对其工作也会带来一定的负面影响。
想要更改某个搜索项值（输入框类型），需要一个字一个字的去删除，操作起来费时、麻烦，操作体验不好。
设计草图：
借用《写给大家看的设计书》中关于对齐的几个观点：
仔细观察后发现，相邻两个搜索项之间的距离都是相等的，但是因为搜索项控件类型的不同（输入框、下拉框、日期控件等），导致其长度不等。即使相邻搜索项的间距相同，但是整体看上去还是杂乱无章的。
较好的解决方法是：将“搜索项”按照长度进行分类，分为“长"、“短”两类。短的一类长度统一定义为“1”、长的一类长度统一定义为“2”，通过划分，搜索项就能够排列整齐了。
设计草图：
场景：在“关键字搜索”中，输入某个供应商名称后，需要对其进行修改。
途径：①：鼠标选中输入的内容，通过键盘进行清除；
②： 将光标定位在所输入内容的末端，通过键盘一个一个清除；
分析：两种方法都是通过“鼠标”+“键盘”的组合来完成“清除"操作。对于“途径①”还是较快捷的完成清除操作，但是“途径②”的操作是比较繁琐的，操作体验并不好。
设计草图：
经过前期的痛点分析，与产品、开发人员进行多次的交流与讨论，且综合考虑各方面情况，敲定了最终的设计方案。
定义：将日期控件的长度定义为1个“基本长度单元”（长262像素）。
①：所有“搜索项”的长度都为1个“基本长度单元”。
②：“搜索区域”一行至多显示3个“基本长度单元”，且默认只显示一行。
③：“搜索按钮”和“搜索结果”放置在“搜索区域”的最右侧，与第一行“搜索项”水平对其。
④：“搜索项”之间的距离为68像素，此距离保证了分辨率为1366×768的用户界面可以完整显示（注：在产品用户中，分辨率为1366×768及以上的占比为74.66%）。
⑤：更多“搜索项”通过击“尖三角”进行查看。
在输入框（尾部）增加“清除”按钮，默认情况下（或值为空时）不显示“X”号，值不为空时，显示“X”号。
（注：“日期控件”和“下拉框”这两类没有“清除”功能。）
①：当搜索项只有1个或2个时，显示样式如下：
②：搜索项中“自定义字段”的显示
a. 搜索项中，字段名称最大支持5个“汉字”长度；
b. 字段名称过长时，由“4个汉字”+“…”组成，鼠标移上去时，显示完整的字段名称。
③：“关键字”搜索项的暗注释内容精简显示
最终设计方案：
