表格的设计思考
拖了半个月，再不写完，估计就写不完了。。。
在神策数据1.6.5版本中，行为事件分析的表格进行了改版。我主要负责了表格的交互设计和UI设计。从项目启动到正式上线，经历了大概一个半月的时间。
具体样式对比如下：
现在看来也无非是对表格的样式、单元格的宽度做了一些改变，去掉了百分比，但当初确实纠结了很久。
拖了这么久主要有两方面原因：
- 一开始从表格的样式入手。一开始拿到表格，首先觉得目前的表格样式很不好看，先对它进行美化吧，但做了一段时间，样子好像还没以前好看，这个时候就不知道如何进行下一步了，是继续美化表格样式呢，还是做基于以前的表格先把功能做了？做样式上的优化很难进行评估，所以自己也不知道到底有没有提升产品的体验。
- 没有设定元素的规则。例如单元格内部数据是左对齐还是右对齐。左对齐和右对齐都有它们各自的好处和坏处，如何进行抉择。这时候如果没有抽象出一个较为通用的规则，很容易陷入美观性和可用性的矛盾中。
- 表格的列数不确定。行为事件的中表格的列数与页面上方设置的条件相关，而且表格中的内容可能很不规整，不能确定列目中是长字符串还是短字符串。在优化过程中要满足所有情况都相对美观，所以要枚举列数＝1、2、3、4...时候的样式是否美观，这就需要大量的工作量。
在优化的过程中，也总结了一些方法：
- 先对明显能提升产品体验的点进行优化，将不能确定修改后是否能够提升产品体验的点放在后面。这样你每做一个点，产品就更优了一些。所以，样式应该放在产品优化的最后面，不要过分纠结于样式的调整，当产品的页面结构、交互操作已经确定，页面元素的重要层级也确定了，这个时候再对重要层级高的进行强化，产品訊息优先级立马就很明显。
- 界面上的所有元素都有它存在的依据。为什么它是这样而不是其他形式？元素的长、宽、Padding为什么要设置成这样？长是需要一个固定值还是需要一个最小值？元素左对齐还是右对齐？交互和UI设计是需要一步一步推演的，不能你觉得这个样子好它就好，你要给这个设计一个理由，这样你的设计也就是一个有根基的设计，别人来喷的时候你也能说出它为什么这么做，为什么不是其他形态。
- 在设计过程中逐渐得出一些规则，然后用这些规则来限制你的设计，最终得出其他的设计答案。例如在设计过程中，文字列的宽度如何定义，一开始根据文字的字符的个数来确定，购买商品（事件名）＋触发用户数（指标名）＋人（单位）＝13个字符，13个字符的宽度加上两边的Padding，得出width＝170px，但事件名为什么是4个字符？指标名称为什么是5个字符？这就是一个不太充分的规则。后来的计算规则是，文字列的宽度＝电脑屏幕宽度的最小值（13'mac:1280px）－（7＋1）日期列的最小值－侧边栏的宽度，这种计算规则是在屏幕最小的情况下满足最近七天的数据展示（最近七天的数据可能是最常看的数据类型）。这种计算规则就相对的有理有据些。详细计算规则会在下文进行详细叙述。
本次表格优化的主要目的：
- 日期属性从列转换为行、对表格结构进行重构。
- 对表格进行UI重绘。
之前在多分组的情况下，表格标题栏中的字符串过长，而且做了截断处理，有些訊息需要通过Tooltip才能看全。
分组属性过多的时候，只能通过横向滚动表格进行查看。
表格的样式优化并没有硬性的要求，主要是我觉得目前的表格样式有些ugly，所以想对这里进行一些美化，优化原则是：通过优化表格的样式，达到增强数值的可读性。
设计过程
以前没有做过表格设计，甚至都没有做过相应表格的美化工作，所以一开始不知道如何进行下手。
一开始觉得表格不是很美观，就去对表格进行样式上的处理。绘制表格使用的软件是：Sketch。使用Sketch绘制表格需要注意的是，一定要用样式（Style），使用样式可以批量的修改。
还有就是使用自适应功能（Resizing），当你设定了固定的Padding，对单元格的宽度进行修改的时候，内部的元素Padding不会变化。
下面的链接是绘制图表的一些技巧。
一、表格结构调整
日期横排的意义
1、屏幕的宽度是有限的，所以每个列宽度尽量小才能展示更多的列。当属性横排的时候，如果属性中有些属性值字符串过长，那么列宽就会变大，相应的展示列数减少。但是如果日期横排，日期的字符串宽度较为固定，而且宽度较窄，列宽统一且数值较小，能够放更多的列。
2、屏幕的高度可以『无限』。如果属性中属性的个数过多，属性横排就需要横向滚动，而横向滚动在网页中交互很不友好。但如果属性竖排，纵向滚动就友好的多。
行与列的转置功能（惊喜）
在完成日期横排的功能后，考虑到老用户可能不习惯新的表格，就想将原有的表格样式也保留下来，所以就有了这个新旧版切换的功能。但在继续开发的时候发现，如果属性值较多就将属性作为列，日期横排；如果日期数目较多，就将日期作为列，属性横排。这种切换能够避免页面的横向滚动。
后来将这个功能定义改为行列转置，上线后也确实收到了使用者的表扬～
行列转置前日期数目过多，需要页面横向滚动才能看到更多数据。转置后，日期可以完全展示。
二、数值的可读性
1、数字对齐方式
在数字对齐方式的选择上纠结了很久，因为左对齐和右对齐都有不完美的情况。
数值右对齐，数值中每一个位置数字都上下对应，较容易看出数值的变化。相比较左对齐，假如数值位数不同，相同位置（十位）的数字很难进行上下对应。
主要纠结的地方是，右对齐不完美情况：列数＝2的时候，属性列与数值列间距过大，两者关联性较弱，而左对齐能很容易的产生联系。
当列数＝3的时候，距离会缩短，关联性稍微增强。
这一块纠结了很久，但考虑到数值的对比是原则性需求，所以确定数值的对齐规则是右对齐。
随后对列数＝2的情况作了一些尝试，希望增强属性列与数值列的相关性。
数值列向左移动，按照不同列宽度的百分比进行定位。数值列左侧预留一定宽度，来放置长字符。
但是在列数＝3的时候，对齐方式就显得很奇怪，看起来像左对齐又像居中对齐，用户可能不是很理解它的对齐原则。
如果列数＝2当作一种特殊情况，列数>=3的时候都是靠右对齐，理论上也说得通。但最终为了保持对齐方式的一致性，列数＝2也靠右对齐。
为了增强属性列与数值列的相关性，当鼠标hover在行的时候，产生高亮。这种方式可能不是很优雅，但目前只能想到这种方法，如果读者有更好的想法欢迎留言。
2、数字字体选择
苹方在数字字符上，不同数字宽度不一致，导致千位分隔符不在一条线上。而Helvetica Neue数字等宽，千位分隔符有序的排列在一条线上。所以，选择Helvetica Neue作为英文字体的首选字体。数值上下对比的时候，相同位置的数字在同一条竖线上，更加容易对比。
Font-Family:'Helvetica Neue',Helvetica,Arial,sans-serif.
3、百分比存在的意义
之前版本表格中充斥了红绿相间的百分比，对数据的阅读产生了很大的影响。
- 百分比的优点：
- 看出前后日期数值的变化。
- 通过颜色快速识别出哪些日期的数值是下降或上升的。
- 百分比的缺点：
- 纵向的数值上下之间夹杂了百分比，数值很难进行对比。
- 百分比的颜色让整体表格显得较为杂乱，百分比让数值的可读性变差。
在1.6.5中，将百分比作为一个开关，让使用者自行开启。
三、列宽的设定
一开始在确定列宽定义规则的时候，不知道如何下手，在行为事件分析的表格中，列的数目是不确定的，所以很难从样式上去进行思考，一种列数的时候好看，其他列数的时候又不美观了。所以需要设定一个合理的值，满足所有情况的表格展示都较为美观。
这个值在设计过程中一开始是使用尝试的方法，列数等于2、3、4...的时候都进行尝试，这种方式很费时间，又很难得到一个能站得住的依据。后来，通过一步一步的设计推演，最终得出列宽的设定。推演步骤如下：
1、属性列与数值列的区分
之前的版本，属性列的宽度的定义原则是：
- 属性列有最小值，最小值为属性值中字符最长的一个。
- 数值列为宽度自适应，根据列中字符的长短自动变化宽度。
- 如果所有列宽相加没有超过屏幕显示区域，则以当前宽度的百分比进行放大。
这样的定义原则造成：
- 属性列的列宽不统一。
- 属性列根据其中字符的长度进行定义的时候，可能会造成过长或过短，在字符串过短的时候，很难与数值列明显区分。
所以就考虑，设定属性列为固定宽度，这样可以明显的区分属性列和数值列。但这种方式在属性字符串较短的情况下，会损失部分的屏幕空间。
从可用性方面进行考虑，用户可以明显的将属性列与数值列进行区分。从样式上，属性列列宽一致，表格显得较为整齐。综合这两方面确定了这个规则：属性列列宽一致，数值列列宽一致。
2、数值列宽的定义
数值列根据标题的宽度来定义最小值，当数值字符超过最小值，单元格宽度适应字符宽度。
3、属性列宽的定义
属性列的宽度，我取了一个分组属性列＋最近七天日期列为最完美显示列，这种情况也是比较常用的组合方式。屏幕宽度定义为mac的屏幕宽度1280px。
属性列宽＝1280-100*（7＋1）－左侧导航栏宽度（240）＝240px
四、表格的美化
这个部分在项目刚开始的时候就开始做了，但越做越没头绪，反而觉得没以前好看。后来才理解出：表格的样式是依附在表格的结构上的，结构定了，样式也可以根据结构逐步推演出来。
这个表格样式是一开始做的，标题的背景色、字体的颜色都没有可以立足的依据，自己凭着感觉来。虽然看着像个表格，但不知道为什么这么做。
后来总结出设计的规则，表格的样式要满足三个条件：
- 表格内容易读性高
- 文字与表格融为一体
- 表格整体要与外部界面和谐
背景行颜色
Header:rgba(0,0,0,0.04) ； Line:rgba(0,0,0,0.02)
Header:rgb(245,245,245) ； Line:rgb(252,252,252)
我觉得这个灰度可以体现产品的层级，但表格在目前的页面中显得有些突兀，所以给颜色添加了一些蓝和绿，让表格更融于整个页面。
Header:rgb(245,246,247) ； Line:rgb(250,251,252)
字重
标题需要与底下的单元格中元素进行区分，字体需要加粗。属性列要与数值列区分更明显，字体加粗。
字体的颜色
字体颜色rgba(0,0,0,0.87)，当文字黑度较高的时候，数值与背景的对比度过大，斑马行的作用变弱，数值更突出为单个元素。
字体颜色rgba(0,0,0,0.6)，文字黑度适中，数值融于斑马行，斑马行可以起到导视作用。
字体颜色rgba(0,0,0,0.5)，文字黑度偏小，数值与背景区分度不大，数值易读性较差。
最后
写了这么多，好像也很无章法，都是设计中的一些琐碎的细节。
如果大家想体验新版的表格设计可以尝试点击神策数据Demo，如果您对表格设计有很好的建议请给我留言～
感谢王叔叔在前端上的支持和设计上的建议（一个只有你想不到没有他做不出来的叔叔），感谢@曹犟发起并推动整个项目。