您现在的位置:   首页 >> 新闻中心 >> 原型设计

Web后台产品的搜索页原型规范

发布人:www.yunke.ai 发布时间:2021-01-01 141 次浏览

编辑导语:产品经理经常会遇到Web后台产品的搜索页设计,那么在画它的时候遵循哪些常见规范呢?本篇文章作者详细介绍了Web后台产品的搜索页原型规范,我们一起来看一下吧。

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

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

一、搜索项格式

搜索项的格式建议是字段名+相应元件(内含提示文字),不建议只有相应元件(内含提示文字)。后者有存在如下问题,建议规避:

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

注意:前端根据页面宽度自动对搜索项进行换行展示,需要注意的是字段名和对应元件是一个整体。

关于不同搜索项的详细规则可以阅读作者旧文《善用Axure写PRD,APP文本框通用的输入规则进行深入了解。》

二、搜索项大小

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

三、搜索项对齐

搜索项内部,搜索项之间需要保持合理的对齐,这样的原型显示效果会比较协调舒服。