行业关键字
Table表格ui交互模式指南
Table表格ui交互模式指南
关键词：交互
许多人都认同这样一个现象：表格虽然是用户界面设计中的一个重要部分，但是它们却经常会被忽视。表格应该显示让用户更易读，更易扫视，更易比较的结构化数据，但在很多情况下，表格数据却显得模糊不清。这就是很多人不喜欢表格的原因。
用户的日常工作经常使用表格，但是谁会需要让他们崩溃的东西呢。要改变这样的现状，下面给出一些使表格易用的指南。
行交替样式Alternating rows styling
这是很明显的，但是事实如此吗？看看今天的WEB应用，你就会发现很多并不适用。因此，行交替样式并不明显，这就是把他列为第一个来阐述的原因。
在数据较多的多行多列表格里用不同样式交替显示不同的行，这会提高用户区分数据的能力。可以采用背景色或者背景图片，如果采用背景色，背景颜色应该比页面颜色浅或者深一点。图像背景应该选择和符合整体配色方案的图片。也可以把背景色和背景图组合应用于表格边框。表格的header和footer部分应该易于识别，可以采用比表格行深或者浅的颜色。
BlinkCampaign的表格行采用了浅一点的亮绿色，header采用了稍微暗一点的绿色。
整行选择Full row selection
如果需要对某一行的局部做操作，让整行都可被单击选中。这种做法增大了点击区域减少了界面的混乱。一个应用的实例是，每一行只有“查看详情”可操作，鼠标悬停到这一行的时候整行样式都应该不同。有好几种方法可以实现这个效果，推荐jQuery插件的RowSelect 。
CrazyEgg应用了整行选择的方法展开当前选中行的详情（稍后我们会谈及该模式），鼠标悬停的行会高亮显示。我很喜欢他们对这块区域以及其他的应用的设计。
表格组节Table sections
当你想把相关的行组合在一起的时候可以考虑使用表格组节，组节把相关数据组合在一起，是表格的一部分。所有组节应用同样的列设置。举个例子，在一个显示国家列表的表格里，地区就是行组合的自然方式。所有的表格组节样式要有差别，并且能够收缩和展开。如果有需要，在每个组节里可以显示数据概要。
PulseApp用表格组节显示一级和二级的收支详情，每一级都可以再展开。
排序Sorting
如果不知道关键字，用户需要从大数据量的表格里查询某行时会很困难。用户在比较相近信息的时候通常会对表格列进行升降序排列。
对表格排序常用的是让表格标题可点击。排序的列应该有标记，通常是在列标题文字边放置一个三角箭头，指明当前列的顺序（升序或降序）。每次单击顺序会相反。
排序的列和不排序的列应该有明显区分。对某个重要列进行默认的排序。
TableSorter是个简单易用的插件。该插件可以对多种类型数据进行分类，你也可以自定义。该插件还支持多列排序，不过我对此不是很感冒。
OneHub应用清晰地标明了排序的列和顺序。我喜欢这个设计的原因是，即使是在如此小的区域，细节部分也做得很具体。
过滤 Filtering
当有大量数据要处理的时候过滤就很有用。使用下拉列表，单选按钮或者复选框进行过滤选择。 在下面的例子里， builditwith.me使用下拉列表来对用户的职业兴趣和当前状态进行过滤。
然而这种过滤只能事先定义好过滤值。例如，你可以对工作类型按全职/兼职，设计/开发分类，你就不能按照姓/名来分类，因为这个值有无限多。在这种情况下可以应用关键字对数据进行过滤。输入任意关键字会得到按照关键字进行过滤的结果。
Builditwith.me提供了好几种过滤方式，每一种过滤方式有对应的列表显示。
分页显示Pagination
表格有大量数据的时候应该采用分页显示。分页很常见，但有时候效果并不好。分页适用于搜索引擎，但是并不意味着在任何情况下都适用。
Product Planner 采用了标准的分页显示，有页码数字，有上一页下一页。但是，你能告诉我第2页是什么？ 第3页？当然你不能。不用担心，标准分页可以得到改善。如下所示，通讯录很庞大，他们使用了数字和字母来分页。在这个例子里显示所有的页和隐藏页一样好。你可以以此类推应用到其他条件相似的表格。如果表格以日期来分类，你可以以日期范围来替代传统的分页数字（如第1页可以写成2.10-2.12，等等）
如果这样的分页链接太宽，那就采用标准分页（如上一个例子），同时在鼠标悬停的时候显示提示信息。
连续滚动Continiuos scrolling
与分页相反，连续滚动是一种新型的数据显示方式。这种方式不需要选择特定的数据类型，新的数据被加到列表里。在加载的时候显示进度，如下例所示，在里，进度条显示有多少项已经被加载。
这种方式的易用性和可用性需要进行测试，以证明对你的用户是否合适。你可以在 UI Patterns里查看更多关于连续滚动的信息。
这种方式有一种变异版（或者说另外一种方式）。与不间断的滚动显示数据不同，在列表的最后，用户可以选择点击更多按钮浏览数据。Twitter就是这样的一个好范例。
固定表头 Fixed table header
这是一个不错的简单技巧，你可以用它来保持表头始终可见。 数据列表相当庞大而复杂的时候，使用它可以帮助用户区分多列。 FixedHeaderTable插件是一个很好的例子。
不需要表头Headerless table
如果表格数据可以自我解释，表头就可以不需要。email表格是一个好例子，email的主题，发送者，发送日期都是不言自明不会混淆的。当然有的情况表头是不能去掉的，例如有两个不明确的日期，这时候你就需要定义一个表头。
Rivalmap公告栏是一个没有表头的好案例，表格里的数据一目了然而且格式固定，这种情况就不需要表头了。
展开行Expandable rows
关于这种模式我写过一篇文章，也建了一个可以轻松实现的jQuery小插件。 这种模式的关键点就是可以给表格增加更多相关信息功能。以BuySellAds为例，展开行显示了出版商的广告详细信息，同时始终显示主行里的重要信息。
行的操作Row actions
对于海量数据来说，表格远比一个普通的占位符所能展现的多。表格内可以进行一些特定的交互操作。可以对某一行（或多行）进行操作。操作在行内显示，以鼠标悬停或者菜单的形式表现出来。
行内操作把操作放在每一行数据的开头或结尾，是个简单方法。如下所示，Mixx把操作放在了每一行的末尾，这样很容易进行投票的操作。
鼠标悬停操作如果有多重操作，可以采取鼠标悬停操作方式，该方式是由行内操作引申而来。鼠标悬停和鼠标离开分别显示和隐藏操作，通过这种方式可以节省界面空间。Project Estimator by Astuteo 对每一行都有编辑和删除操作，鼠标悬停到某一行的时候则显示操作按钮图标，离开则不显示。
菜单操作如果每一行里都有多种操作，可以通过鼠标悬停或者单击行的时候显示这些操作。DropBox通过一个二级菜单展示了每个文件的多种操作，有效地使用了这种方式。
多行操作Actions on multiple rows这种方式可以很好地让用户批量完成多行的操作。选中每一行前面的复选框，点击批量操作链接或按钮，用户可以选中多行进行操作。还是以DropBox为例，用户可以选中多条文件，点击菜单进行批量操作。
选项提供全选和全不选功能。
本文基本包括了常见的表格形式，并且辅以实例。建议阅读另外两篇关于表格的文章：Big Table issue试图为庞大的表格找到能适应视图的方法；15 Tips for Designing Terrific Tables揭示了表格可以应用的不同分层。
感谢Theresa Neil，Designing Web Interfaces的作者之一，你可以从她的书里看到表格的三种模式：行内编辑，超宽表格和按列过滤。
（责任编辑：）
北京科技大学工业设计系教授、计算机与通信工程学院博导、上海美术学院博士生导师、台湾华梵大学客座教授… []
欢迎关注视觉同盟微信公众号：
微信公众平台：搜索“vudn2004”或扫描下面二维码：
版权所有 &
视觉同盟（）
Copyright & 2004- Incorporated. All rights reserved
视觉同盟旗下子站： |天涯明月刀国际UI模式设置一览
8月2日的时候天涯明月刀的欢乐英雄服进行了更新，内容中有一条就是关于国际UI模式的，以后小伙伴们就可以在系统设置中来进行国际UI模式的使用了，那么这个模式好用吗？下面小编就给大家带来了国际UI模式的一波预览，一起来看看吧！国际UI如何调整
esc按出系统设置，系统设置页面最下方，有个UI缩放，在UI缩放下面即可选择使用国服UI还是国际UI。那么国际UI模式下的天刀是什么样子的呢？国际UI模式预览【多图预警
选角 捏脸 界面登录界面血条技能界面心法界面其他界面总结：
虽然说使用了国际UI，但是并没有对实际操作造成非常大的影响。如果非要说区别的话，应该就是目前的国际UI模式中，界面比较的干净整洁，画面的对比对相对比较高一点，清晰一点，也更加电子化一点，看上去比较冷硬。对于国服的UI来说，之前调色还是比较柔和的，对比没有国际UI的那么明朗，看上去也比较适合国人的审美。另外相对来说国服UI的解读也会更全面一点，而国际UI中就相对简洁。在选角界面的时候多了视频演示，看上去也更加高端了些，也有少量的玩家认为新的UI比之前的流畅了许多，这个小编还是持保留态度，建议留待后续观察哦！
最新资讯离线随时看
聊天吐槽赢奖品
相关软件：
大小：62.51 MB
授权：免费
大小：56.2M
授权：免费帖子很冷清，卤煮很失落！求安慰
手机签到经验翻倍！快来扫一扫！
酷比魔方TALK7X官方V1.07开启TabletUI平板模式优化美化卡刷包
3226浏览 / 16回复
上次提到触摸有问题，于是就订了一个白色的触摸屏，前几天自己动手刚换上，终于触摸恢复正常了，于是又瞎折腾了点东西。这次以官方最新1.07为底包，加入上次优化美化版的功能外，增加了TabletUI平板模式补丁。主要添加功能，看上次的帖子好了，这里就不多废话了。一、普通模式底包必须先刷一遍这个底包，才能刷下面的补丁，如果你对平板模式没兴趣的话，这个包就足够了。刷机方式参考我之前的帖子，或者网上其他教程。说明下，这次我加入了中文4路重启，但是只能正常重启和快速重启，其余两个依然为正常重启，暂时无法修正，抱歉了。还有如果你是吉他的recovery的话，请勿恢复出厂操作，因为吉他的rec移植自联想，部分功能和7x不匹配，要恢复的话得wipe。完整ROM下载地址：/s/1hqkimuo刷机有风险，请谨慎刷机。本rom未加入任何盈利手段，转载者请自重。二、平板模式补丁看个人喜好，按需刷入吧。另外，此次我修正了1.07版导航栏不跟随屏幕调整位置的现象，也就是导航栏始终在屏幕下方。平板模式补丁下载地址：/s/1o6mDN2y三、平板模式增设音量双键和网速显示补丁平板模式竖屏的话底部状态栏会比较挤，再加入按键的话我只能减小按键的大小了。补丁下载地址：/s/1c09sPva四、恢复补丁如果你不喜欢平板模式，想要原来的样式的话，那么刷入这个补丁即可恢复补丁下载地址：/s/1eQ88NLo五、ODEX分离补丁其实真的不用在意ODEX和DEODEX两者细微的差别，所以并不推荐大家刷入这个补丁，只针对部分机油研究之用，慎刷！分离补丁下载地址：/s/1c0tdNVy我的其他帖子：酷比魔方TALK7X官方V1.03DEODOX合并适度精简卡刷包 酷比魔方TALK7X官方精简优化美化稳定卡刷包，适合长期使用 酷比魔方TALK7x官方最新V1.07完整ROOT卡刷包
我现在用你的103长期使用版本，有必要升级吗
大虾，为什么两个补丁中不是透明的，并且个人觉得平板模式下状态栏高度有点高！
大虾，为什么两个补丁中不是透明的，并且个人觉得平板模式下状态栏高度有点高！
对楼主说：我爱你，大婶！！！！>33<必须顶！！！！
data分区可以改大些吗？ 如今一个qq都快百M了
好/棰严重支持楼主…
对楼主说：好好好好好好好好好好
我是7X四核的用户，我直接卡刷了楼主的这个包，竟然成功了，没问题！超喜欢平板模式。感谢楼主！四核的用户不妨也体验一下平板模式吧！
很完整的东东，珍藏下！
大神，跪求分享rom,网盘已经过期，真的很需要，跪求分享~~~
可能感兴趣的板块：
用户名/注册邮箱/注册手机号
其他第三方号登录如需转载请注明出处：
　　　　在这部分内容中，我们要介绍的是：如何从交互和用户体验出发，深入分析一款应用中的优势、劣势，以及如何改进
　　过程之中，我们会根据实际的应用进行分析。但是就算是Greg Nudelman 这样的交互大师，有时候难免也会出错，更况
　　且这里面的交互模式的依据是Android_4.0的官方指南，并没有考虑更新的Android特性。所以，你完全可以有自己的观
　　点，但是在推向市场之前你应该有足够的依据来支持自己的做法。
　　　　还是从Greg Nudelman举得这的经典的应用 AutoTrader 的改进说起吧！
　　　　AutoTrader最初是一款IOS应用，之后出现了Android版本的AutoTrader，但是明显的是，Android版本明显是从
　　IOS版本&硬性&的转化过来的，几乎没有考虑到Android平台上特有的一些交互和UI模式，一些IOS的痕迹非常的明显，
　　我们的任务就是通过分析它，以便初步的了解Android平台上的应用的特有的模式。
　　启动图标
&　　　　先来看看启动图标。从IOS直接移植过来的大多数应用都忽略了一项必不可少的工作，那就是重新设计启动图标。IOS
　　将启动图标放在一个圆角正方形中，但是Android启动图标则不受这种限制。Android鼓励设计人员为启动图标赋予独特的
　　外形，请看Yelp和Twitter的启动图标。
　　　　　　　　　　　　　　　　　　
　　　　根据这样的原则，重新设计后的AutoTrader的启动图标可以是下面这样的形式
　　　　　　　　　　　　　　　　　　
　　Action Bar与信息架构
&　　　　一般而言，Action Bar和其中的操作图标是应用的神经中枢，在整个设计中的地位是不言而喻的，但是，AutoTrader
　　的做法却不能令人满意。
　　　　[Before]
　　　　请看默认主屏幕Car Search，在action bar 的位置上，最显眼的是一个Settings功能按钮，它位于右上角，非常的显
　　眼，在移动UI中，右上角的位置是的第二重要而显眼的位置（最显眼的位置是左上角的位置，被一个巨大的应用图标占据）。
　　 & & & & & &　　
　　　　但是，非常令人失望的是，点击Setting这个看似非常重要的按钮之后，提供的却是一些法律和隐私条款，这显然是一个
　　反模式。这个重要的位置上的Setting按钮，实际上并没有提供重要的内容，也就是所，在信息架构上来说，这样的安排是不
　　合理的。
　　　　与过度突出的Setting按钮形成鲜明对比的是，像Find Car、Find Dealer、Scan & Find、My AutoTrader 这些重要
　　的功能，却隐藏在老式的Android_2.3导航栏溢出菜单中，这无疑是一个反模式
　　　　　　　　
　　　　[After]
　　　　首先，需要调整按钮的样式，将圆角和斜边删除。在action bar中，用文本表示的功能也必须删除。在Android_4.0中，Action
　　 bar中的功能按钮用图标表示。根据这种方案，第一个修改建议如下：
　　　　　　　　　　　　
　　　　在这个版本中，Setting按钮用一个锤子和扳手组成的图标代替，底部的导航溢出菜单中的重要的功能操作，放到了action bar&
　　中的右上角的溢出菜单中了。同时庞大的应用图标换成了与气动图标一致的图标，并加上了屏幕标题。请注意，根据Android设计指
　　南，屏幕标题的长度不能够超过屏幕宽度的50%，这一点必须牢记。
　　　　但是，仅仅做这些修改还是不能够解决信息架构上的问题，显眼的锤子和扳手的Setting按钮并不能够提供真正重要的信息，同
　　时溢出菜单中重要的功能还是处于隐藏状态。还有一点需要注意：当用户点击锤子扳手按钮之后，发现并不能够提供有用的信息，那
　　么用户很可能就会因此放弃对右上角的溢出菜单的查看，因为用户会认为，溢出菜单中的功能更加不重要。
　　　　一种改进的方案可能是：将Find Car 和 My AutoTrader移动到Action bar 上面，将Setting移动到右上角的溢出菜单中
　　　　　　　　　　　　
　　　　但是，问题是这两个图标按钮非常有可能被用户误读，因为没有了文本提示，同时非常明显的是这两个功能真的非常重要，最好的
　　方法应该是将它们放到顶级导航菜单中，所以，最终我们的改进方法是引入&侧滑菜单&最为顶级菜单，将Find Car、Find Dealer、My
　　AutoTrader放到这个侧滑菜单中
　　　　　　　　　　　　
　　　　如果应用中包含有大量的彼此没有直接关系的视图，Android UI规范提倡将抽屉式菜单用于顶级导航。Scan & Find 是一项汽车搜
　　索功能，有理由认为这项功能是一项重要的功能，因此将它放到了action bar上面，用一个条形码图标表示，用户仅需要单击一次，就能
　　够使用这个功能。而毫无用处的Setting功能，放到了右上角的溢出菜单中了。
　　　　为了能够让用户知道，通过滑动屏幕能够开启侧滑菜单这个顶级导航，Android指南提倡设计师在屏幕的左边沿放置一条不同颜色的
　　细线，也可以在action bar中的标题的位置放置一个 & &&&
　　选择控件
&　　[Before]
　　　　AutoTrader使用的是IOS风格的组合滚轮选择器，以供用户选择年份和价格范围，使用触控选择的方式输入，而不是使用键盘输入，
　　是一种非常好的方式，避免了输入错误的情况的出现，但是在Android中并不提倡使用&方框&，提倡的是一种无限制的内容显示方式
　　　　　　　　　　
　　　　在Android中的触控选择控件有很多，以后我们会介绍，这里我们使用的是两个单独的选择器，并配上一个下面带有一条横线的标题，
　　　　　 & &
　　我们将IOS风格的按钮，改成了Android风格的按钮，为了突出Search这个主要操作，让它占据了更大的空间，并且在其中放置了一个图标
　　　　　　
　　搜索结果屏幕
　　[Before]
　　　　在重新设计之前，action bar 上还是使用的IOS风格的三个按钮：Sort、Map、分享
　　　　　　　　
　　[After]
　　　　重新设计后，所有的按钮都变成了扁平化的图标，符合Android风格
　　　　　　　　　　　　
　　　　需要注意的是，由于分享方式有多种，我们使用了带有下来功能的菜单按钮，当点击之后，所有的分享选项会在一个上下文列表中出现
　　有的时候，如果分享项目非常的多，还可以使用新浪微博处理方式
　　　　　　　　　　　　
　　　　当点击右上角的溢出菜单之后，就会在屏幕的下部出现一个灯箱区域，显示所有的分享方式，这个处理方式非常的好
　　搜索结果详情页
&　　[Before]&&&[After]
　　　　在这个页面中，非常明显的干扰是：在action bar 位置上有一个分享按钮，在内容中又有一个分享按钮，这显然是一个反模式，容易让
　　用户感到困惑。还有一个非常值得重视的反模式是：用户如果想要查看下一个结果详情，必须点击返回按钮，到达搜索结果页面，才能够重
　　新选择下一个内容卡，这是一种上蹿下跳的模式，应该避免，可以加入清扫手势，使得用户通过清扫屏幕就能够切换到下一个选项卡，为了
　　提示用户可以使用手势清扫切换，在屏幕的底部，我们加一行提示文字。最后记得将action bar上面的三个按钮组成的选项卡，转换成And
　　roid模式
　　　& & &&
　　最终结果
&　　让我们来看看重新设计前后的最终结果
阅读(...) 评论()&&&精彩绝伦的Android&UI设计：响应式用户界面与设计模式（Andriod&...
自营订单满39元（含）免运费
不足金额订单收取运费5元起
邀请好友参加吧
版 次：1页 数：字 数：印刷时间：日开 本：12k纸 张：胶版纸包 装：平装是否套装：否国际标准书号ISBN：1丛书名：华章程序员书库所属分类：&&
下载免费当当读书APP
品味海量优质电子书，尊享优雅的阅读体验，只差手机下载一个当当读书APP
本商品暂无详情。
当当价：为商品的销售价，具体的成交价可能因会员使用优惠券、积分等发生变化，最终以订单结算页价格为准。
划线价：划线价格可能是图书封底定价、商品吊牌价、品牌专柜价或由品牌供应商提供的正品零售价（如厂商指导价、建议零售价等）或该商品曾经展示过的销售价等，由于地区、时间的差异化和市场行情波动，商品吊牌价、品牌专柜价等可能会与您购物时展示的不一致，该价格仅供您参考。
折扣：折扣指在划线价（图书定价、商品吊牌价、品牌专柜价、厂商指导价等）某一价格基础上计算出的优惠比例或优惠金额。如有疑问，您可在购买前联系客服咨询。
异常问题：如您发现活动商品销售价或促销信息有异常，请立即联系我们补正，以便您能顺利购物。
当当购物客户端手机端1元秒
当当读书客户端万本电子书免费读