1. 主页 > 行业资讯 > 设计文章 >

网络背景产品搜索页面原型规范

编者按:产品经理经常会遇到Web后台产品的搜索页面设计,那么他们在绘制时遵循哪些常见的规范呢?本文详细介绍了Web后端产品搜索页面的原型规范。我们一起来看看。

Web后台产品的搜索页面通常和列表页面是一样的,那么在绘制的时候遵循哪些常见的规范呢?

首先,让我们来看看常见的搜索页面效果,然后我们还可以体验相应的交互原型:https://yhiexq.axshare.com

首先,搜索词的格式

搜索词的格式建议为字段名+对应组件(包括提示文本),但不建议只有对应组件(包括提示文本)。后者存在以下问题,建议避免:

无法方便的查看这是什么搜索项用户会不习惯这种少见的展现形式

注意:前端会根据页面宽度自动显示搜索词。需要注意的是,字段名和对应的组件是一个整体。

关于不同搜索词的详细规则,可以通过阅读作者的老文《善用Axure写PRD,APP文本框一般输入规则》来深入理解。》

二、搜索词的大小

建议字段名使用“文本标签”组件,设置中间对齐,高度修改为30px;对应的组件需要修改到30px的高度(文本框、日期选择框、下拉列表框、单选框、复选框)。

第三,搜索词对齐

在搜索项内,需要保持搜索项之间的合理对齐,这样原型显示效果会更加和谐舒适。

1.搜索词的内部对齐

搜索词中的字段名和相应的组件需要水平对齐。

操作方法:拖动相应的组件慢慢靠近字段名,水平方向会显示红色虚线,表示它们的水平对齐。然后在字段名和对应的分量之间会显示一个红色的数字,代表相邻距离px,慢慢逼近直到实际px为0。

2.搜索词的水平对齐

两个水平相邻的搜索词需要水平对齐。

操作步骤:选择下面的搜索项(需要同时选择字段名和对应的组件),然后慢慢逼近前面的搜索项。水平方向将显示红色虚线,以表示它们的水平对齐。

然后在两个搜索词之间会显示一个红色数字,代表相邻距离px,慢慢逼近直到实际px为20。

3.搜索词的外部对齐(垂直)

有必要在两个垂直相邻的搜索词之间保持垂直对齐。

操作步骤:选择以下搜索项(需要同时选择字段名和对应的组件),然后慢慢逼近上述搜索项的垂直位置,垂直方向会显示红色虚线,表示它们的垂直对齐。

然后在两个搜索词之间会显示一个红色数字,代表相邻距离px,慢慢逼近直到实际px为10。

第四,提交搜索词

1.提交按钮

点击搜索按钮,向后端提交搜索条件,返回相应的搜索结果,其中包含列表数据。

注意:不要使用“点击搜索”的交互逻辑,比如下拉列表框选择后自动搜索,比如文本框输入后自动搜索。

2.复原按钮

当搜索项目较多时,建议在搜索按钮后面放一个重置按钮。要重置按钮,建议将填充颜色设置为灰色,以削弱视觉效果。毕竟用它的概率不高。

单击重置按钮,将所有搜索条件恢复到初始状态,并将列表数据重置到初始状态。当然刷新页面可以达到类似的效果,但是在某些场景下,进入一个页面的时候,会自带指定的搜索条件。

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:https://www.ffjianzhan.cn/a/sjwz/545.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息