B端设计实战秘籍:优化表格设计的必备技巧与经验分享

2024-10-30    蓝蓝小助手 B端ui设计文章及欣赏

哈喽 大家好呀 今天带来了工作中对于表格的小的沉淀 梳理一些表格的常见问题 欢迎大家一起交流

在B端界面中,通常大量使用表格来展示结构化的数据,合理的设计表格,能给用户带来高效的信息获取率,我们一起来瞧瞧普通但不平凡的表格有哪些设计要点。

 

 

 

 

 

 

 

 

 

表格常用于信息收集(展示)、数据分析、归纳整理、等活动中,在互联网产品应用中,非常适合于:

 

1. 需要组织和展示大量数据信息

表格结构简单,分隔归纳明确,特别适合组织和展示大量的信息内容,且易于用户浏览和获取信息。

 

2. 当数据信息需要进行多种复杂操作时

需要对信息进行排序、搜索、筛选、分页、自定义选项等操作。

 

3. 信息上下间的对比

表格的归纳与分类,使信息之间易于对比,便于用户快速查询其中的差异与变化、关联和区别。比如:金额 百分比 数据升降展示

 

 

 

 

 

 

 

 

 

首先我们了解下表格的构成:顶栏、表格主体、底栏

 

 

 

 

 

 

·顶栏标题

 

顶栏标题不仅是起到内容的总览作用,也是区分不同模块内容的标识,通过对标题层级的凸显,让用户感知到模块内容已切换。

 

在设计的时候会有两种情况:

(1)包含在卡片内,作为最高层级凸显。在功能模块较多时采用居多,强调不同的模块内容

(2)标题在卡片外,作为内容的描述。在功能单一时靠呼吸感区分,主要是凸显内容侧

 

 

 

 

·主体

 

表头一般指列标签,这里也指首列行标签,是对所属行或列信息的描述。

表体—表格的主体,承载着内容信息数据,由单元格组成。

 

 

 

 

 

 

·分页

 

「迷你型」展示:当数据当分页数量较少时,在7页以内时,可采用。


「精简型」展示:当「页面空间不足」或降低分页的「视觉影响」时,可采用该类型。

「完整型」展示:当表格数据较多,为满足各种功能需求,可采用该类型。

 

 

 

 

·表格中的字体/行高

 

常用的文字大小:表头14PX,列文字:13PX

 

在具体设定表格行高时,表格中以文字信息为主,可以参考文字排版的常用做法,将整个表格的行高分成文字行高、文字与分割线间距离,即上下间距两部分来考虑。文字行高可以设定为字号的1.2~1.8倍,文字与分割线间距离可以设定为字号的1~1.5倍。分为这样的两部分也比较符合开发同学写代码时的习惯(多行行高同理去设定)。

 

 

 

 

 

 

 

 

·对齐方式

 

表格中的对齐一直是让人比较纠结的事情,不同的类别对应不用的对齐方式,常见的对齐样式有如下几种

 

数字信息右对齐, 包含金额、长宽高等需要关联比较的字段,这是因为我们在对比数字时,首先看个位,然后十位、百位等。

 

文字信息左对齐,符合正常的心智模型,一般人们的阅读方式是从左往右,从上往下。

 

固定字段居中对齐 ,比如日期(2020-11-11),状态文字(未审核、已收款等)或者存在布尔关系的文本(是/否、男/女等),这能更好的信息呈现及表格空间的节省。

 

表头与数据信息对齐, 这能保持表格竖直方向整洁,营造一致性和上下文环境。

 

 

 

 

 

 

·数据多层级

 

除了常规的表格样式之外还会出现特殊的表格样式,在复杂的表格中,由于数据量较多,并且数据有层级关系,所以会对数据表格进行分层处理,优先展示第一层级的数据内容,将二三层级的数据隐藏起来,用户点击后再展示。

 

 

 

 

 

 

·数据修改

 

表格的编辑通常有两种,一种是在弹窗或者新页面进行内容编辑。常用在数据较多、内容较复杂的情况。

另外一种是当前表格编辑,表格编辑又分:带单元格编辑功能的表格、带行编辑功能的表格。常用在表格数据较少,没有更多详情,表格已经展示全部内容。当前表格编辑,比较方便用户操作,让用户能直观的查看编辑单元格。

 

 

 

 

 

·数据操作

 

数据操作主要是针对表格数据的增、删、改,从控制范围可分为:单行操作、批量操作、全局操作;

单行操作也称行内操作,常见的显性与隐性两种方式。显性操作,操作项显示在行内,直观明了;隐性操作,鼠标悬停时才显示操作项,界面简洁,留更多的空间给需要查看的数据内容,减轻空间压力,减少干扰;

显性操作,文字按钮操作项一般不多于三个,图标按钮不多于四个时,操作项跟在行条目后面;当超过时,建议将相对低频操作选项折叠收起,点击"更多"或“...”下拉显示。操作按钮致灰时,鼠标选中可显示原因。

 

 

 

 

 

在日常的工作环境中会遇到很多情况,这时候就需要用到一些方法来处理数据

 

·关于分割线

 

表格行列的分割方式有:

 

网格式:类似excel,这样的方式很好的所有行和列进行分割,但是网格很容易给人造成视觉疲劳。

水平线:仅对行进行分割,通过间距与对齐的方式对列进行视觉上的分割,这样的方式可以很好的对数据进行划分,便于阅读。

斑马条纹:通过低饱和度的颜色交替的对 行 进行分割,同样很好的对数据进行划分,便于阅读。

留白,不分割:直接留白,通过间距来划分,不建议使用这样的方式,因为数据较多的时候,用户十分容易将行对应错,容易造成混乱。

 

关于空数据

 

表格中经常会出现空数据或无数据的情况,留白处理会给用户造成一定的困惑和误解,是系统没有加载出来吗或误以为出现了bug?明智的做法,是无数据时用「-」来填充显示,数据为零时与上下数据单位、小数点相同的0来显示。

 

 

 

 

 

表格无内容且没有创建诉求的,数据是系统产生的,不是由用户创建的,直接告之暂无数据

 

 

用户有创建诉求,数据是由用户或系统产生的则直接示意用户创建数据

 

表格篇的总结到此结束啦~ 设计师在具体的项目中根据用户和产品的需求进行调整,合理使用表格,表格能承载更多的内容信息,图片,文本,文件等格式都能在表格中被包容,此次分享暂时只分享到了文字类的表格内容,谢谢观看

作者:舒萱呀
链接:https://www.zcool.com.cn/article/ZMTQ5ODEwNA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

image.png

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

image.png

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

 

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档