启嘟渡科技商贸有限公司
SEARCH

与我们合作

我们专注提供互联网一站式服务,助力企业品牌宣传多平台多途径导流量。
主营业务:网站建设、移动端微信小程序开发、营销推广、基础网络、品牌形象策划等

您也可通过下列途径与我们取得联系:

微 信: wxyunyingzhe

手 机: 15624122141

邮 箱:

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

更新时间:2025-01-24 03:52:26

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

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

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

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

示例:

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

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

设计草图:

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

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

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

设计草图:

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

途径: ①:鼠标选中输入的内容,通过键盘进行清除;

   ②: 将光标定位在所输入内容的末端,通过键盘一个一个清除;

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

设计草图:

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

定义: 将日期控件的长度 定义 为1个“基本长度单元”(长262像素)。

①:所有“搜索项”的长度都为1个“基本长度单元”。

②:“搜索区域”一行至多显示3个“基本长度单元”,且默认只显示一行。

③:“搜索按钮”和“搜索结果”放置在“搜索区域”的最右侧,与第一行“搜索项”水平对其。

④:“搜索项”之间的距离为68像素,此距离保证了分辨率为 1366×768 的用户界面可以完整显示(注:在产品用户中,分辨率为1366×768及以上的占比为74.66%)。

⑤:更多“搜索项”通过击“尖三角”进行查看。

在输入框(尾部)增加“清除”按钮,默认情况下(或值为空时)不显示“X”号,值不为空时,显示“X”号。

(注:“日期控件”和“下拉框”这两类没有“清除”功能。)

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

②:搜索项中“自定义字段”的显示

a. 搜索项中,字段名称最大支持5个“汉字”长度;

b. 字段名称过长时,由“4个汉字”+“…”组成,鼠标移上去时,显示完整的字段名称。

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

最终设计方案:

多重随机标签

猜你喜欢文章

QQ客服 电话咨询