看我表格 72 变~



关于表格,在我们的B端产品中是非常重要的板块。它的主要功能是承载相应的数据,但是你会发现表格似乎没有太多能够设计的内容。今天,我们就来讲一讲关于表格中的变化,以及我们如何制作具有实际价值的表格。

首先我们去浏览各大设系统当中的表格,他们的整体的样式几乎都是如此。
同样的表头、同样的操作设计、同样的内容设计,但表格作为我们数据呈现的形式,它其实还会有其他的设计样式。

画廊

画廊顾名思义就是将美丽的图片挂在墙上,通过着重展示表格当中的图片字段,来达到设计上的形式优化。同时在设计上,我们展示一些附带的文字信息和标签等等。如下图
看我表格 72 变~
画廊相对来说会更加的直观简洁,其实在很多产品当中都会用到类似的形式。
比如站酷、Behance、B站,你会发现这些产品都非常重视图片信息。因此可以使用画廊去呈现数据,能够让用户更直观地了解一条数据所包含的信息内容。
看我表格 72 变~

以站酷为例,当我们浏览作品时,并不关注作品本身的标题,因为标题只会告诉我们作品的名称。我们也不会关注作品的类型,因为作品的类型只会传达出具体的分类。对于我们而言,作品的封面更为重要,因为我们能够通过封面快速了解作品的质量和内容。
看我表格 72 变~
同样地,作为一篇文章的作者,我也有相同的感受。在写好文章后,我们需要把文章中的封面设计得尽可能吸引人,这样才能获得更多的关注。


看板

看板其实就是用来调整对应数据状态的关系。你的项目目前处于哪种阶段?那么我们可以通过看板的方式来进行呈现。
看板的使用场景相对来说比较狭窄,最常用的产品主要在一些项目协同的软件中,比如 Timebition、Tower。在这些软件中,它们最主要的形态便是使用看板来进行项目管理。
看我表格 72 变~
在看板中,本质上就是利用表格中的状态流程来做相应的呈现。在我之前设计的一款CRM产品中,我们会对商机的流程进行相应的定义。其中不同的状态我们便可以通过看板的方式来进行呈现。这样用户便能够快速知道当前状态下还会存在哪些数据。
看我表格 72 变~
这种方式在管理自己的项目时非常有必要。比如我在管理自己的文章时也会使用看板来优化我们的项目管理。
看我表格 72 变~


甘特图

甘特图主要的使用场景都在项目管理系统当中,这就导致了甘特图的使用场景和看板类似都会比较狭窄。
我们在去设计页面的时候,会遇到一些场景,这些数据需要通过时间的维度进行划分。那么如何让用户快速了解时间段之间的区别呢?使用甘特图便能让时间的区间周期更为清晰和准确。
看我表格 72 变~
甘特图也在很多产品里面都会有,比如 ONES,Notion 都会有相应的板块来去呈现对应的内容。
看我表格 72 变~
在甘特图的使用当中,除了方便我们查看之外,我们也能够通过甘特图去进行编辑,能够快速调整日程时间。


卡片

卡片视图和刚才讲到的看板有些相似,但卡片视图更加关注卡片的内容。
因为使用卡片的视图,我们能够将用户的信息进行归纳和总结,进而通过卡片的方式进行聚合。在卡片事务中,我们最主要的目的是通过一个一个聚合的信息,了解到视图设计本身的信息内容是否合理。通过卡片的方式,能够快速获取与之相关的所有内容。
比如说以传统的医疗行业为例,我们就能够通过卡片视图了解一个病人的所有信息,其中包括病人的分类和目前状态,我们都可以通过一个小卡片获得。
看我表格 72 变~
由于时间关系,视图部分就先说到这里,后续重新更新 B 端设计指南 – 表格 部分时,再给大家进行分享补充。如果想要快速看到,就一定要点赞~ 好看~


我们第八期的 B 端交互设计训练营的课程现在已经开始报名了,如果目前求职受阻、如果想要系统的提升 B 端设计能力,可以咨询了解课程内容。

看我表格 72 变~


本篇文章来源于微信公众号: CE青年Youthce

UI/UX

分享一个冷门的设计系统

2023-6-18 23:50:38

UI/UX

B端设计指南 - 导航(一)

2023-6-25 8:17:52

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索