国内热点新闻

usdt不用实名交易(www.caibao.it):界面设计方式 (8):卡式、列表、主细表、树形、页签

来源:申博官方网 发布时间:2021-01-18 浏览次数:

原题目:界面设计方式 (8):卡式、列表、主细表、树形、页签

编辑导语:在企业管理类型系统中,经常接纳卡式、列表、主细表、树形、页签这五种PC端界面形式。本文作者以企业人资系统中“员工薄”界面设计为例,为我们先容了卡式、列表、主细表、树形、页签这五种界面形式各有什么设计特点。

企业管理类型系统接纳的PC端界面形式常见的有5种 (卡式、列表、主细表、树形、页签),以及以这5种形式为基础的组合形式。

确定一个营业功效接纳什么样的界面形式表达的效果最佳,一样平常是综合了客户的营业需求、数据结构、数据数目、编辑权限等综合判断得出的。

界面是设计师展示自己能力最为主要的窗口,若何选择、计划、结构界面,直接关系到客户满意度的崎岖、产物客户价值的巨细,仔细的设计、部署这个窗口需要有客户营业知识、应用设计知识、UI知识以及最好还能具有一定的软件开发知识和靠山。

岂论接纳哪一种界面形式,以下的界面选择条件都可以作为参考:

  1. 数据结构:若是原始表单是简朴的一览表,就可以接纳列表、或主细表形式;若是是由多级数据组成的父子结构,就需要接纳树形界面;
  2. 数据数目:当原始表单的数据量不大时,可以接纳能将所有数据整合在一起的主细表形式;若是数据量大,就可以思量分页解决,如接纳主表和细表离开、或是接纳多页签的形式;
  3. 编辑权限:若是权限要求异常的严酷,最好将数据根据权限分成差别的界面处置(如页签形式),制止在一个界面设置过于庞大的权限,这会给未来的界面维护和调换带来贫苦。

下面以企业的人资系统中的“员工薄”的界面设计为例,划分先容上述5种界面形式的设计特点。

一、卡片式(卡式)

卡片式气概的设计对照简朴,它们大多用于表达单条、且没有分级的数据类型,所有的数据只有一行。

对这样的数据设计通常不会用表达多行的“表”形式表达,而是接纳“卡片”的形式表达,如图1(a),这就是卡片式界面形式的理由。

图1 卡片式界面

1. 信息分区

卡片式界面设计时,为了易于快速地读取信息,还可以将这些数据根据差别内容划分成若干的小区,每个区输入差别的数据,并在差别的小区配上一个分类名称,参见图1(b)。

员工薄的小我私家基本信息(不需要履历部门信息)如:姓名、岁数、性别、民族、出生地、现住址、电话号码、邮箱地址、小我私家爱好等,可以看出这些数据对一小我私家来说通常都是唯一的。

2. 输入顺序

另外,在设计时还要注重数据输入的顺序,通常输入的顺序是根据图1(c)所示的顺序设定的,按键盘的回车键时根据上述顺序自动跳转。因此在部署数据时,要注重数据所代表的营业逻辑,根据上述顺序放置数据的字段框的位置以使其相符营业逻辑。

二、列表式

这类界面的名称一样平常都称为“xx一览表”。列表式的界面形式通常用于一次展示多条数据的场景,每1行显示1条数据,如图2所示:

图2 列表式界面

例:在表达小我私家的履历时,可以用列表的形式,以第一列的“时间”为主线,根据时间顺序显示小我私家的履历:教育履历(小学、中学、大学等)、事情履历(单元1、单元2等)等。

其他典型的应用场景另有:收货一览表,出库一览表、课程计划表等。

三、主细表式

当表达的每一条数据都是由更细小的复数数据组成时,就泛起了数据的分级(父子结构),此时就需要接纳主细表的形式。

所谓的主细表就是以卡片式部门为主表(父)、在卡式区域的下面增添一个列表作为细表(子),主表显示的是这条数据的配合信息(如:小我私家基本信息),细表显示的是统一条数据的详细组成(如:小我私家履历信息)。

,

欧博官网

欢迎进入欧博官网(Allbet Game):www.aLLbetgame.us,欧博官网是欧博集团的官方网站。欧博官网开放Allbet注册、Allbe代理、Allbet电脑客户端、Allbet手机版下载等业务。

,

举例:显示某名员工的完整履历信息,将卡式部门和列表部门的数据整合在一起。主细表式的结构就是用“卡片式” “列表式”形成的,参见图3(a),其中的①、②和③划分表达了如下的信息:

图3 主细表式界面

其他典型的主细表应用场景有:发票、收条、出库单、领料单等。

四、树表式

前面的三种形式都是在界面上加载数据后就不更改的情形,当要在一个界面上通过切换显示差别条的数据,且这些数据之间具有结构化的关系时可以接纳树表的方式,即将主、细表区域的左侧加入一个菜单栏用于在差别条数据之间举行显示切换。

举例,显示一个企业的各部门、各部门员工以及员工信息,如图4(a)所示:

图4 树表式界面

  • ①菜单栏的部门显示企业各部门、各部门的员工名称;
  • ②③的主细表部门,通过对菜单栏内部门、员工的切换可以显示差别部门的每个员工的主要信息和详细的履历信息。

固然树形式界面的右侧不一定总是主细表形式,右侧的上下也可以都是单纯的列表,如图4(b)所示,点击菜单①,切换表1中的数据,点击表1中的第一条数据“A1”,切换表2的数据。

五、页签式

树表式界面表达形式也有不足,好比:行使图4的树形界面看完A员工的信息后,在菜单中切换到B员工后,界面在显示B员工信息的同时将原有A员工的信息消除了。

若是再想看A员工的信息时还要将B员工的信息去掉重新加载A员工的信息,当要做A、B员工的对比剖析时这个操作就很费时间。

页签的表达方式就可以很容易地解决这个问题,严酷地说,页签式不是一个自力的界面表达形式,它是同时显示若干条信息的界面形式,它允许在一个窗口内可以同时显示和保留多条信息(=多员工的信息),这里举两个例子说明页签界面形式的用法。

1. 用法1

在员工薄界面上顺次打开员工张兴初、李一凡和林晓青三人的信息,见图5,此时界面上同时保留了三个页签:

  • 在界面上同时保留了员工张兴初、李一凡和林晓青三人的信息,分属于差别的页签;
  • 此时界面上虽然只显示了李一凡的信息,没有显示其他二人的信息,但其他二人的信息都保留在他们各自的页签中,随时都可以在三小我私家的信息之间举行切换,切换时不需要重新加载,大幅度地提升了输入/查看的效率。

图5 页签式界面(用法1)

2. 用法2

用法1是将三人份的信息同时保留和展示在界面上,与用法1相反,用法2是行使页签的形式将原本为一人份的信息根据差别内容拆成n个部门,然后由差别的页签划分来显示,参见图6,这种拆分显示的利益在于:

图6 页签式界面(用法2,局部)

原来需要一次下载完所有的数据才气显示,改成分为n次下载,缩短了下载时间;

  • 点击到谁人页签时,下载谁人页签部门的数据,提升了显示速率;
  • 显示用的面积增大了n倍,可以从容地对界面举行结构,提升了用户的体验价值;
  • 在权限设置上对照容易,差别查看权限的人可以点击差别的页签。

此时界面显示李一凡的信息被分为了三个页签,将原本在一个细表的信息分成三个细表划分在差别的页签内显示:基本信息、学校履历以及事情履历。

每个页签的内部接纳什么样的气概设计都可以,好比:卡片式、列表式、主细表式等,这种方式极大地提升了设计的天真度。

可以看出这几个界面形式展示的数据条数是差别的,根据展示数据量巨细的排序如下:页签式 > 树形式 > 主细表式 > 列表式 > 卡片式。

本文由 @李鸿君 原创公布于人人都是产物司理,未经许可,克制转载

发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片