申请网站
忘记密码
密 码：
登录名：
建站咨询热线：
0532-88781131
、
15166683288
返回贴子列表
发表新贴
主题：
表格的UI交互模式指南
共有
1364
人浏览过本贴
主贴管理
置 顶
加 精
结 贴
转 贴
昵称：奈薇建站网
论坛积分：108060
发贴等级：
21
发贴数：1159
回贴数：1282
被砸鸡蛋：
1
获赠鲜花：
182
发表时间：2019/7/22 16:53:00
楼 主
表格的UI交互模式指南
许多人都认同这样一个现象：表格虽然是用户界面设计中的一个重要部分，但是它们却经常会被忽视。表格应该显示让用户更易读，更易扫视，更易比较的结构化数据，但在很多情况下，表格数据却显得模糊不清。这就是很多人不喜欢表格的原因。
用户的日常工作经常使用表格，但是谁会需要让他们崩溃的东西呢。要改变这样的现状，下面给出一些使表格易用的指南。
行交替样式Alternatingrowsstyling
这是很明显的，但是事实如此吗？看看今天的WEB应用，你就会发现很多并不适用。因此，行交替样式并不明显，这就是把他列为第一个来阐述的原因。
在数据较多的多行多列表格里用不同样式交替显示不同的行，这会提高用户区分数据的能力。可以采用背景色或者背景图片，如果采用背景色，背景颜色应该比页面颜色浅或者深一点。图像背景应该选择和符合整体配色方案的图片。也可以把背景色和背景图组合应用于表格边框。表格的header和footer部分应该易于识别，可以采用比表格行深或者浅的颜色。
BlinkCampaign的表格行采用了浅一点的亮绿色，header采用了稍微暗一点的绿色。
整行选择Fullrowselection
如果需要对某一行的局部做操作，让整行都可被单击选中。这种做法增大了点击区域减少了界面的混乱。一个应用的实例是，每一行只有“查看详情”可操作，鼠标悬停到这一行的时候整行样式都应该不同。有好几种方法可以实现这个效果，推荐jQuery插件的RowSelect。
CrazyEgg应用了整行选择的方法展开当前选中行的详情（稍后我们会谈及该模式），鼠标悬停的行会高亮显示。我很喜欢他们对这块区域以及其他的应用的设计。
表格组节Tablesections
当你想把相关的行组合在一起的时候可以考虑使用表格组节，组节把相关数据组合在一起，是表格的一部分。所有组节应用同样的列设置。举个例子，在一个显示国家列表的表格里，地区就是行组合的自然方式。所有的表格组节样式要有差别，并且能够收缩和展开。如果有需要，在每个组节里可以显示数据概要。
PulseApp用表格组节显示一级和二级的收支详情，每一级都可以再展开。
排序Sorting
如果不知道关键字，用户需要从大数据量的表格里查询某行时会很困难。用户在比较相近信息的时候通常会对表格列进行升降序排列。
对表格排序常用的是让表格标题可点击。排序的列应该有标记，通常是在列标题文字边放置一个三角箭头，指明当前列的顺序（升序或降序）。每次单击顺序会相反。
排序的列和不排序的列应该有明显区分。对某个重要列进行默认的排序。
TableSorter是个简单易用的插件。该插件可以对多种类型数据进行分类，你也可以自定义。该插件还支持多列排序，不过我对此不是很感冒。
OneHub应用清晰地标明了排序的列和顺序。我喜欢这个设计的原因是，即使是在如此小的区域，细节部分也做得很具体。
过滤Filtering
当有大量数据要处理的时候过滤就很有用。使用下拉列表，单选按钮或者复选框进行过滤选择。在下面的例子里，builditwith.me使用下拉列表来对用户的职业兴趣和当前状态进行过滤。
然而这种过滤只能事先定义好过滤值。例如，你可以对工作类型按全职/兼职，设计/开发分类，你就不能按照姓/名来分类，因为这个值有无限多。在这种情况下可以应用关键字对数据进行过滤。输入任意关键字会得到按照关键字进行过滤的结果。
Builditwith.me提供了好几种过滤方式，每一种过滤方式有对应的列表显示。
奈薇建站网致力于，让每个中国人、每个中国企业都拥有自己的“官方网站”！
回复此贴
单贴管理
修 改
删 除
清理签名
TOP
共
0
个回贴 分
0
页
上一页 / 下一页 当前第
页
奈薇建站网青岛网站建设公司/青岛网站制作公司，专业提供"气质"型网站建设及精美网站制作服务，同时欢迎各地网站建设公司、网站制作公司代理我们的奈薇建站系统共同发展
热点地区：
青岛网站建设价格
青岛即墨网站制作公司
开发区信息港
山东在线门户
1
182
