移动UI设计模式之表格设计

为什么要设计表格？表格通过设计有哪些优化？在很多应用中都需要表格来展示数据。我们可以把表格认为是几十个横纵向滚动的数据列，表格通过设计评估出哪些信息最为重要，并将其展现给用户。

几种常见的表格模式：基本表格，无表头表格，行分组表格，固定列表格，带有内容总览和数据的表格，级联式表格，带有视觉指示器的表格，可编辑表格。

基本表格

这是表格的标准模式，其中的列数据有固定的表头，表格呈网格式布局。为表内的行设定不同的颜色或者在各行之间用细线分割，都能提升表格的可读性。

不要使用暗色的网格线和垂直分割方式，文字左对齐，数字右对齐，一屏幕内显示的表格内容不易过多，个人认为，为表内的行设定不同的颜色，不如在各行之间用细线，因为太多的颜色会使用户眼花缭乱，而颜色所代表的意义不同，深色浅色暖色冷色会给用户造成错觉。

无表头表格

无表头表格的特征是没有列标签，用较宽的行显示某一对象的多项信息。通常的做法是用较大的字号显示行标记，用较小的字号显示细节内容。这种表格模式非常适合用来显示项目集合(如存货清单、食谱、相册等)和这些项的搜索结果。与列表相似这种形式能方便用户快速浏览和选择。

每一个宽行内最多显示三行信息，不太重要的细节内容使用较小浅色的字体，不要自己猜测什么信息最重要，而要询问客户的意见，然后做出行之有效的设计。

固定列表格的表格

对于较大型内容较多的表格固定某一列或者某几列是个可行的做法，用一边的列固定其他列滚动显示。为固定的列设计比较醒目的样式，以提示用户滑动操作能浏览更多的数据。

带有内容总览和数据的表格

这种表格模式是指在表格各数据行上方显示表格内容的总览，如支付宝账单页面可在上方显示总花销，下面是详细账单这种模式。

行分组表格

对表格的行进行分组能让用户更容易的了解表格内的数据，行分组的作用类似于各个部分标题，需要对表格中为内容总结行设定与其他行不同的视觉效果。

级联式表格

当表格的信息层次结构较多时可以使用级联式表格，类似列表类的tree模式。使用较为宽泛的信息结构可以避免在应用内产生较深的层次(多于三层)。

但是如果用级联式表格来导航用户自定义的信息结构，则可能无法避免产生很多界面层次，所以必要时采用其他方法来设计。

带有视觉指示器的表格

股票类、运动类等可以使用这种表格，在使用指示器时使用用户能迅速识别的视觉化指示器去掉那些不必要的图标。