后台数据信息列表之功能区用户体验

最近在做后台数据列表的时候得到几点心得,这里与大家共享下

在设计信息列表的时候应该注意:检索模块、便捷搜索模块、操作功能模块、信息列表的布局及设计

检索模块包括:普通查询条件,比如自定义的字段查询,下拉菜单选择,点击搜索按钮触发
便捷搜索模块包括:常用的搜索条件,比如时间段、历史查询条件,最好是用户可以自定义搜索条件
操作功能模块包括:常用的操作,比如:增、删
信息列表模块包括:数据信息

其实检索模块、便捷搜索、操作模块可以统称为功能区,数据列表则为信息区
因为信息区的内容比较多,今天只说下功能区

检索、便捷搜索属于搜索行为层,这一层的权重比较重,一般放置到信息区上部,这样容易让用户便捷的查找自己想要的数据,你也可以在信息区下部做个简洁的搜索区,这样就像写作文一样,承上启下,也是提高了用户体验。
然而这俩者如何摆放呢?来看下淘宝是怎么设计的:

不难看出,淘宝蓝色模块上都是一些类的搜索,这属于便捷搜索,橙色块为检索功能,当然它这个是针对B2B商城设计,跟我们的后台数据还是有所差异的,但也有很多借鉴的地方,大家也可以找下其他行业的网站的布局,它们大体都是一致的


解决搜索行为层,再看下在操作功能选择上应该注意的有哪些?

项目中用到哪些功能?

其中便于用户操作的批量处理是必不可少的。比如:全选、反选、删除、导出、导入等。还有一些功能是单项操作,比如:添加(一条数据)、分页。总的来说根据你自身项目而定是将批量操作跟单项操作放到一块还是左右分布区别开呢,这个问题我一直困扰我,看了很多国外的开发项目,它们大多数都是比较简单的功能,统一放置一块,当时个人感觉应该左右分开会好点,但是经过主管的点拨,又仔细看了下其他项目,最终还是选择放置了一块。原因只有一点:用户无论点击那个按钮都是在操作,避免用户对操作区产生迷茫感。

最终方案:

金牌狙击手

52html5是一个web前端|html5资源平台,为广大html5开发者及爱好者提供html5相关的教程、资讯、html5游戏、html5教程等,并涉及css3、javascript前端知识。