[转]小河直街论表格
我们开着小车，哼着小曲，告别工作的喧嚣，告别城市的浮躁，来到了古色古香的小河直街。
自宋代以来，这一区域一直是运河沿线的重要区域，经过民国年间的繁荣后留下的历史遗迹类型众多，历史文化内涵较为丰富多样。小河直街也曾经是晚清时期的320国道。小河直街历史文化街区是集中反映清末民国初期城市平民居住文化生活、生产劳动文化和运河航运文化的重要历史文化街区之一，是一条以保持传统居住商住功能为主，延续杭州地方传统特色文化和展示运河航运文化，集商住、居住、休闲功能为一体的历史文化街区。
在云水谣吃完颇有风味的丽江菜之后，我们小憩了一会，开始论表格。相信所有的交互，视觉，前端对于grid都有很深刻的接触和各自的理解。下面我把大家讨论出来的结果沉淀了下来，和大家分享一下
命题由来：良无限系统中表格目前正在进行优化中，很多互联网产品都带有表格，同时各有不同。淘宝后台，QQ邮箱，招行专业版……而且前台后台都有区别。我们这次来专门对每款产品的表格差异进行分析。他们的用户有什么特点？为什么他们的表格呈现形势不同？对于良无限系统，有没有可取之处。
我们良无限后台系统现在遇到的问题是，表格里面字段太多，都要通过左拉才能看全，同时操作都在最后，用户使用很不方便，表格展示空间也非常的狭小。继续寻找一种解决方法。
▲要改造的对象，随着业务的不断发展，现有的表格已经无法满足当下的需求，内容列字段不断的增加，操作不断的增加，功能需求不断的增加。
表格的功能有哪些？
1.多纬度展示
2.信息归类
3.比较
4.搜索
5.排序
6.统一操作
那么有哪些交互方法能够帮助用户使用？这就是这篇博文的重点：
1.线条的有无
2.字段的关系
3.颜色运用
4.icon和文字的使用
5.合理的隐藏内容
下面来通过大众用户使用的软件中发现这些交互手段的体现。
1.线条的有无——表格中看实际场景考虑到底是行重要还是列重要，还是都需要线，但有不影响浏览。
到底用横线还是纵线还是都要，还是都不要关键在于，你所要呈现的信息是否关系足够紧密，是否必要让用户方便浏览关键信息。如果字段差异明显，可以去掉线条，如果字段差异不大，可以通过线条进行区分方便识别。
▲邮件中，都是一单封邮件为单位的，横线对用户还有指导作用。同时点击表头的列名，会有正列的变暗，方便对比。
▲由于所有的内容都是数量，不用列线很难区分于是表格加上了很淡的行线和列线
▲当然表格可以做的更加的灵活，可以有些列有列线，有些没有列线，方便用户的区分
2.字段的关系——关系紧密的字段一定要靠在一起，方便浏览
▲我的淘宝是对于关系紧密的字段，除了把他们放在同一个框内，还使用了一个订单上下结构，使得浏览更加的方便。
3.颜色运用——用户要看到的是表格中的内容，而不是表格本身，所以线条，背景色都要表现的弱一点，同时为了方便用户找得到自己选择，最好有稍强的hover效果
▲百度音乐，设计的时候除了歌名饱和度高些，其他都很弱，甚至连文字都不存在了，用户很方便找到自己的内容
▲用户在买了足彩想第一时间看到自己的是否中奖，所以在表格设计时，中奖的都用饱和度很高红色来表示，让用户一眼就看到。这个不是hover效果哦
▲我的收获地址，默认地址颜色饱和度是最高的，鼠标划过其他行，颜色饱和度都没有他高，不停的提醒用户默认地址的存在性，减少用户的犯错。
4.icon和文字的使用——一般说来，用ICON的内容一定不是表格的重点内容，重点内容一定是文字，icon的作用是减少表格的空间，让表格主次分明，当然ICON的辨识度是很重要的。
▲在这里你看到的文字只有歌名，而其他所有的操作都是用icon来表示的。试听，分项，收藏，下载，视频，更多这些很大众化的icon让用户一看就能明白。相反用了很多留空和收听数量的数据可视化，让表格更加的有层次。
▲竞彩页面的数据量非常的大，在中间的奖（各盘口的奖金数据），讯（比赛资讯），同（相同赔率的比赛），带有文字的icon减少了很多的空间。给了很大空间来操作，层次很清晰。虽然用户可能对这些icon不知道，但是点了一次就懂了。
▲我的淘宝里面每笔订单都有超过20种信息，这里就通过合理的排版和icon的配合来解决这些问题。天猫商品，旺旺，正品，7天无条件退货，查看评论等都是用icon来实现的。对于评论，采用了hover效果，更加方便了使用。使表单结构非常的清晰
5.合理的隐藏——也是一种常见的表格操作手段，用来对与主信息关系最远的信息的展示。表现形式有滑过，点击。
▲对于订单而言，你对商家的留言，与这个订单的价格等相比是相当次要的，如果单独拿出一列来展示，会很让非空间，同时字数也不好掌握很难排版，所以用了hover效果
▲支付宝交易记录，他的操作栏，由于内容多，全部展开会影响表格的主次关系，所以用了影藏的，划过显示次要操作。
▲这个icon离价格很近，icon像感叹号，吸引点击，点击之后出现对于价格更加紧密的内容。
大家收集了这么多优秀的表格范例之后，下一步就是如何更好的运用到我门自己的系统里面，方法就这5点，如何运用他们就靠各位自己的发挥了。相信每个人都对5种方法有自己的一套理解吧！
