UI设计带你细说APP表格的设计方法

发布时间:2015-07-21 编辑发布:迪麦互动

前文中,主要是简单的介绍了app表单的一些设计规范,今天来粗略的概括下关于app表格的一些设计方法及其常见的模式。


其实,app表格也有各种模式可言,就像app导航模式一样。表格在app中是很常见的,我们可以根据实际需要来进行不同模式的表格设计。那么,app表格都有哪些设计的方法呢?广州网站建设 广州UI设计外包 网页优化 通过参阅一些前人之笔以及相关的书籍,简单的总结一些app的表格设计,以便能够帮助到大家。


app表格设计模式概览


这里就简单的列举一些常见的模式吧!


1. 基本表格模式

1

基本表格模式也就是标准的表格模式了,内容排版为网格式,这种网格式的布局适宜于确定了(固定的表头及内容)各种信息的展示型页面使用。通常情况下,为了方便阅读,我们会在行之间使用合适的分割线。需要注意的是,移动端的表格设计,左一列和右一列分别最好采用左对齐和右对齐的方式进行展示,否则会使得表格排布变得参差不齐。另外还要注意一定不要在一屏上展示过多的信息,一句话,要保证良好的视觉效果。


2. 无表头表格

2

它的特点就是,没有表头,因此通常会以比较宽的行来进行对象的展现,以较大的字号来显示行标记,较小的字号来显示细节的预览,技巧方面和基本的表格模式差不多,也需要注意一屏的显示内容量以及对齐方法。除此之外,我们也要尽量的避免单位行空间内显示三行以上的信息,也就是说一条内容行中,可以排列的小行最多为三行,否则会在视觉的表现上非常的差强人意。


3. 固定列表格

6573fdbd7a58a860

固定列表格表现模式指的是表格中某一列或多列是固定的,而其他列是可以进行上下滑动查看的。这种表现模式在文件管理app中用的比较多。通常情况下,我们在做这种表格模式的设计时,都需要把固定列的样式与活动列的表格样式区分开来,告诉用户,哪些列可以滑动查看更多,哪些列不可动。另外,需要注意的是,我们要尽量尽量的避免两列或多列固定,因为这样的话,可滑动列空间必然变小,影响用户操作,进而带来了负面影响。


4. 包含统计信息的表格

3933056_2

这种模式在一些垃圾清理软件以及和统计相关的app中比较常见。以一个统计图或纯文本来进行表格内相关信息的概括和统计,鲜明直接的向用户展现最重要的信息概览。


5. 分组表格


分组表格是指将表格中的行进行分组(比如上图右边的界面将布卡漫画和微信表格分为了两类)。将相关性比较强的分为一组,能够更加直观的展现给用户,用户也可以快速的查看到想看的信息。当然,我们不要忘记把类名称与行内容进行样式上的区分设计哦。


6. 带有标示的表格


有些时候,我们不仅仅只是向用户展示表格内的一行行信息,还需要更为明显的向用户表现出行内信息的重要特征,以降低用户的思考成本。比如,用户在查询某个事物的各种参数变化的时候,我们就需要在每个行的右边,利用icon来标示出此行信息相对上次查询是增长了还是降低了,这样,用户一眼飘过,就大致能够看出增长以及降低的比例,也使用户很方便的查看自己想看的信息。


综述


除了上面所列出的模式之外,也有其他的不常见的模式,比如说可编辑的表格模式,例子就是Office软件的excel界面。通常,我们在进行表格式设计的时候,要考虑到具体的需要来选择最为合适的表现方式。



原文转载zhuhanzhong.com

分享至: