整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

B端设计指南-表格(上)


前我主要深耕于B端设计中,深知B端表格设计与C端有很大的不同,无论是表格的展示形式以及承载内容上都有非常大的差异。而现在网上有不少关于表格如何设计的文章,但要真正落到实处的少之又少,因此今天我们就来聊聊表格,探讨一下B端表格究竟应该如何设计。


由于表格组件类型复杂,因此分为上下两篇,上篇主要讲基础知识点,下篇主要针对交流群中的20个问题进行解答,欢迎持续关注~


在我们B端表格页中,由导航、筛选、表格几大模块构成,因为表格面积占比最大,页面呈现最为重要,会直接影响用户的使用体验。


在我们对表格的设计思考过程中,需要注意两项原则:易读与易用

前者是提升使用者在表格浏览时的体验,主要是从信息密度、色彩分隔、以及视觉节奏三个方面去理解;后者是使用表格时的操作感受,比如快捷操作、多数据编辑等方面去理解。无论是B端的任何页面,表格都是必不可少的部分。

想要把这三种形式讲透,需要将数据的形式结合起来说,我会从展示形式、数据结构、前端标签 三个方面去解释三者的区别。


1) 数据采集 - 表单

表单拥有一对一的数据结构,能够让用户明白数据间的对应关系。同时使用表单的门槛最低,拥有更合理的录入形式,比如在常见的问卷调查、登陆注册都是采取表单的形式。

在前端展示方面,表单采用的标签一般会包含:text、password、radio、checkbox、button、submit、reset、image、file等属性,我们也要针对不同的属性进行相应的设计区分。

2) 单唯独数据整理 - 列表

列表能够将数据在一列中井然有序的展示,保持数据的有序与整洁。列表拥有一对多的数据结构,能够让用户理清一条数据下的多个对应关系,并且多个对应关系是相互并列。比如在常见地待办事项、走查清单中里,就是使用单维度数据进行排列。

在前端展示上,列表中的标签分为有序与无序。


有序列表:即有顺序的列表,其各个列表项按照一定的规则排列定义,前端标签上采取<ol><li>的结构。

通常有序列表一般为数字序号(1、2、3、4...)或者字母序号(a、b、c、d)

无序列表:无序列表的各个列表项之间没有顺序级别之分,为并列关系。前端标签上采取<ul><li>的结构。

3) 多纬度数据整理、数据分析 - 表格

在多维度的数据分析中,你是永远的逃离不了表格,使用多维度数据进行统一的结构化展示,让用户清晰的看到在同一主题下的多条数据的对比,使数据能够进行多维度的展示,保证数据的完整性。


在前端的方面,表格中都是采取 <table> 标签进行展示,同时表格中的行与列分别用 <tr> 与 <td> 标签,我们通常说的表头,则为 <th> 标签。但要注意,在前端眼中表格永远没有列的概念,列都是每行拼接而成。


正式开始之前,我们先定义一下表格~

表格是一种常见的信息展现形式,它是所有B端组件中信息展示密度最高,同时涵盖了B端的所有场景,因此是B端设计中的一个重要的组件。

在我们常见的B端产品改版中,除了对页面流程调整以外,更多就是围绕表格而展开的一系列优化。因此表格的设计,做为B端设计师的基础能力之一,也是检验一个B端设计师是否合格的关键因素。


1) 表格痛点


• 形式单一

表格属于形式十分单一的组件,对于没有经验的设计师来说,会认为能够调整的地方实在太少,往往在思考层面就会有所不足。对于一个B端表格来说,它需要具备数据浏览、数据新增、数据操作、数据统计,因此功能多而全,很难思考解决问题思路。


• 组件联动多

通常设计师设计单个组件,都会有较好的全量意识。而到了多组件的联动时,就会出现问题。

比如在表格中,除了表格本身,还会有搜索、筛选、视图、分页等操作,如果不对多组件的交叉使用进行思考,也会缺少对于这些场景的设计。

• 数据形式多

在表格中,会承载多种多样的字段类型,而每一个字段类型都会有相应的差异。形式的不同落到表格上就会有不同的呈现形式,在关键数值的处理上,也会差强人意。因此看上去简单的一个表格,其实会有很多需要设计的点。

而深入到表格的内部中,你会发现能做的远远不止于此,如果刚开始没有对表格进行梳理,那么你在设计的过程中,对于反复出现的表格将束手无策,为了让大家能够对表格有更深的理解,我将表格进行系统的拆解,结合实际案例,能够让表格更浅显易懂。


2) 表格拆解

首先问大家一个问题,你觉得表格一共有几个部分组成,分别是什么?给大家五秒钟时间思考~

5

4

3

2

1

在我看来,表格一共分为五部分:

a.标题

概括整个表格的内容信息,让用户一眼就知道该表格的用途是否符合自己心中的预期。

在实际场景中,除了通过标题文字去的形式之外,你还可以为每一个表格去设计不同类型的图标,这样能够让用户看到图标就能联想到内容,这也是现在无代码开发平台常见的处理方式。

b.工具栏

但在工具栏的排列方式会有非常多的讲究,在市面上的操作区域一般可分为单行与双行的状态,可根据自身产品要求的特点进行随意的变化,会在文章后半部分具体讲到工具栏的设计思路,这里就不再过多赘述。

c.表头

概括每列的主要信息,在用户使用表格中,起到数据解释作用,让数据能与之进行匹配,使用户能够看懂数据。同时在表头处会拥有一些操作,比如冻结、筛选、排序都会放置于此,因此需要进行留意。

d.单元格

承载用户的每一条数据,也是整个表格的核心。单元格的大小行高都会直接影响用户使用表格的体验,单元格的设计上也会有很多设计思路,在后半部分也给他家提供了我自己的看法,与大家进行探讨,在这个就先按下不表。

e.分页

严格意义上讲,分页是不属于表格当中,但当数据超过用户所设定的阈值时,就需要使用分页拆解数据,所以分页和表格是经常联系在一起的。分页一共有:基础型、迷你型、完整型三种类型。

而如何进行跨页的操作,一直都是分页在B端中的难点,需要有好的思路与逻辑,在分页模块中与大家聊聊。


你知道表格类型的多少决定你了设计表格的下限。

虽然在大多数业务场景中都是使用基础表格,但在B端产品中业务的多样性使得很多特殊的表格有它独特发挥的空间。

我发现在我的B端交流群都有着类似的问题,他们不知道表格还存在这么多的类型,这时候你与别人之间的认知的差距就是你设计优势所在。


1) 基础表格

基础表格是根基,是由行与列的单元格组成。在使用层面上能满足用户多维度查看数据的需求。因为大家都很熟知,在这一章节并不是主角,我们就不做过多赘述。


2) 树形表格 - 包含关系

当表格中的数据为包含与被包含的结构时,可采取树形表格。

通过逐级大纲的形式来展现数据间的层级关系,让整个信息结构变得一目了然。这一表格形式常出现于项目管理工具中,比如 Teambition、Tapd、飞蛾都有这样的设计。

Tapd

作为腾讯最重要的项目管理工具,在产品设计之初,就考虑到类似情况,你能够在Tpad单列数据编辑点击入口,创建子数据,这样在项目管理的场景下,有着较为友好的交互体验。

Teambition

前段时间,Teambition正式成为阿里旗下的办公套件,而钉钉的云钉一体化,或许证明这样庞大的市场仍然还要等待时间的挖掘。期待资本对于B端行业的更多动作

我们回到设计上,Teambition在9月份经历的改版,变化很多,有机会可以总结一个改版分析分享给大家,作为一个项目管理软件,Teambition也拥有树形表格的这样一共功能,它的添加入口出现在每个数据详情页的最下方,同时在视图层面,也可以筛选展示为:所有任务、仅父任务、仅子任务四种场景,更能满足用户的需求~

3) 子表格 - 嵌套关系

当一条主数据下有多条数据结构不同的关联数据进行嵌套时,这时候就可以用子表格进行创建。它能够对主数据进行更加细致的解释,详细的了解主数据中数据的含义。从表象上看,就是在一个表格中还能嵌套另一个表格。

比如在对某集团对旗下子公司的销售表格中,它能够通过嵌套子表格的形式,将每一个子公司下的销售人员的销售记录进行记录,从而能够更加细的了解到每一个公司、每一个人员的具体情况。

在国外报表中,这类表格很少出现,而在中国的报表中,嵌套子表格算是一种不折不扣的中国式报表。


当然这里我们依旧可以深入理解,比如在两个表格之间,用户是通过什么样的方式建立一个父子的关系?表格中当父数据删除时,子数据如何处理?设计上对父子之间的关联有着何种限制,这都是我们需要思考的,因为这里牵涉到业务实在太多,我也无法抽象出一个规律供大家学习,因此只有具体问题具体分析。


4) 交叉表格/表头分组 - 两条数据在形式上有交叉

当一个表格里面有多条数据在同一个小范围的维度进行展示时,它就是交叉表格。从表象上看,就是表头有很多分组进行区分,因此它也叫做表头分组。

它能够通过硬拆分将数据进行切割,但是这样数据的易读性就是有很大的差距,比如在2010-2020公司年度收支表格中,需要同时展示每一年份的收入、支出与利润,使用交叉报表能够让用户一眼就是看清数据,而基础表格却不行。交叉表格也算是中国式表格中的一种,能够满足具体业务上的需求。


5) 图表表格 表格数据的另一种展现形式

当一个表格里面有多种图表数据进行展示时,他就是图表表格。

在对一些项目做定制化开发时,这是十分常见的场景。用户点击某一数据后,直接跳出数据的统计图,方便用户进行对比。同时这一功能也可以通过仪表盘这样的功能去解决,也就说到国内最爱做的数据可视化。



1) 表格尺寸

这是很多人都会忽略的一个点,主要是大家对于表格的理解各不相同,也没有具体的文章对于表格尺寸有个非常明确的限制,在这里分享一个我常用的数据点,用于判断表格设计的优劣:表占比。

表占比:表占比是指在1920x1080的屏幕大小下,表格占整个页面的比例 即:表格面积 / 页面面积 = 表占比

这里需要指出,这里的表格面积是指,表头+单元格+分页(不包含工具栏)

在我对十几款主流B端软件的总结分析中,惊奇的发现大多数产品「表占比」都是在65-70%之间,而一些不注重交互设计上的产品则会有所偏差。


那为何65-70%是一个更为合理的数据?

因为只要在页面中出现表格,就代表这个页面一定是以表格作为核心。而表占比低于65%,代表页面中的表格不处于内容的核心,你需要重新审视这个页面所需要传达的功能。

如果表占比高于80 %,则代表表格出现面积过大,要考虑用户是否能够接受如此大的占比。

因此,设计的合理性来说,占比在65-70%之间能够保证数据展示的合理性,同时这主要是针对CRM产品,大家可以使用这个占比去衡量自己设计的B端产品~

当然这样的情况并不是一尘不变的,B端最大的魅力便是业务逻辑,我们来看一个看起来像是反面的例子:在销帮帮中,表占比为:61.2% ,看似是一个并不合格的成绩,而且数据十分异常,让我想要深挖,为何会如此的低。

通过进一步的分析,发现销帮帮是一款与钉钉生态深度绑定的产品,其产品只能通过钉钉软件进行使用,而钉钉本身默认并不是1080px的宽度,用户打开并且全屏的尺寸偏小。默认尺寸大小的不同,最终让销帮帮选择去满足业务而牺牲表占比去换取更多的功能。


2) 工具栏设计

因为在B端的工具栏的设计中,市面上缺少思路与方法的指导,会出现非常多的问题,因此我展开讲讲工具栏的设计,就不出单独系列进行讲解~

首先,对于工具栏,不同的产品,会对它有着不同的定义。比如在Apple MacOS 系统当中经常提到的Toolbars和Toolbar Items;又或者是Microsoft 产品中采取的Ribbon设计模式。在设计底层思路上截然不同,平台级产品思路与定制化产品思路存在很多截然不同的做法,我们今天简单聊聊大家遇到过多的表格工具栏设计,不做深挖~

在表格工具栏的设计中,信息分区与页面透气是非常重要的两个设计核心。

信息分区:

因为工具栏是由标题、筛选、搜索、视图、新建等操作组成,而功能间的区分是工具栏设计的一个关键。

当一个工具栏中,需要将如此多的元素进行组合排列时,必然会有其排序的规则,这时我们就可以通过亲密性原则,对工具栏中的信息进行相应区分


在设计的亲密性原则中,我们可以将功能相近的工具放在一起,比如:搜索与筛选都是数据过滤的操作,应该放在同一分区;

同样,工具栏也会存在一些功能点不太相近操作,我们就应该通过分区将其间隔开,比如在下图中,每个功能都将其用线条区分。

当然,在信息的去区分上,也有强弱两种不同的方式,一种是通过线条直接分割;另一种是将工具栏进行空间上的区分。因此可以通过信息区分去检查你的工具栏设计是否合理。

内容呼吸:

在一个定制化项目中,设计师一定要让自己的页面具有呼吸感。在B端业务中,信息量本身就已经足够庞大,而页面的中的疏密关系就显得尤为重要。

通常列表都承载着繁杂、冗余的数据,是一个信息集中的密;工具栏作为与表格关联的上部分,呼吸感便成为表格的重要因素。通常在表头处要将空间尽量分散开,这样才能满足整体的疏密关系。

3) 表格设计

经常看到一些十分冗杂的表头,甚至它丧失了表头的真正含义。在实际情况下,尽可能明确、简单的讲出表头的内容,以免造成表格的宣兵夺主。当然也会存在一些专业术语,这时候,给一个Tooltips再合适不过。

4) 单元格设计


在表格中,单元格的行高是一直都是一个难以控制的变量,因为行高会直接控制表格中的信息密度,而信息密度永远是一个无法量化的元素。而在我们设计过程中,需要采取盒子模型的方式,让你的设计更加落地。


知识点补充:盒子模型

从前端开发而言,单元格是一个最为基础的盒子模型。而HTML中的所有元素都可以看作是一个盒子。而我们所设计的页面也正是由这个样的原理去还原出来。


Margin(外边距):清除边框外的区域,外边距是透明的。


Border(边框):围绕在内边距和内容外的边框。

Padding(内边距):清除内容周围的区域,内边距是透明的。

Content(内容):盒子的内容,显示文本和图像。


a.单元格内容

内容一般为文字、图标、头像等等,而对于数据中你想要格外突出的内容,这里称为关键数据标识别。从盒子模型的角度来看,它就是当中的Connect,但单元格内容中,一般会有一些处理技巧:

关键数据标识:

用户在使用表格时,会经常去留意一些关键的数据。比如数据的状态、变化的多少…

如果在系统中,你能够很明确知道用户想要了解的数据时,便可在关键数据上进行标识。这样能够帮助用户快速定位到自己想要的信息,减少数据寻找所化的时间。但如果你对关键数据标识出现误判,这条数据便是一条十分干扰的数据,因此在这里的设计,需要慎重考虑。

比如在飞书的成员与部门中,对于账号状态就是一个关键数据的标识,一方面用户可以快速了解到已经激活的成员,另一方面对于未激活状态的进行突出展示,同时给予用户未激活后的再次发送提醒的操作,是对用户使用的优化提升。但,如果将不重要的数据进行标识,例如手机号,那么这将会是一个令人痛苦的设计。


人员角色展示

人员角色展示在表格中十分常见,通常会是以用户名称+头像的形式展示。

但在真实场景的表格中,头像需要给予默认的形式,比如钉钉、飞书就是以用户“姓”作为头像的默认值,而在多个人员角色展示时,就需要考虑特殊情况,无论是极值省略展示与获取全量数据中,都需要我们进行设计上的处理。


进度条


进度条是属于关键数据的一种,它所涉及到的功能与图表表格类似,能够更直观展示数据的占比,方便用户对于多条数据间的值进行判断。进度条常见于“容量、使用量”的数据中。

表格空白处理

表格中经常出现空数据的情况,而表格的留白对于用户而言会造成一些困扰,特别存在与页面中的大面积留白,感觉像是数据没有加载出。因此在表格空白数据处理上,可以使用“-”来进行默认展示。


b.单元格行高


单元格行高一般由:文字大小、文字行高、左右上下边距共同组成。

从盒子模型的角度来看,它就是其中的Padding。因此行高的确定,是由上方四个条件共同组成。

文字大小:一般出现在表格中的文字大小都在12-16px之间,通常13、14px最为常见,建议大家设计也在此范畴内。


文字行高: 行高是一行文本垂直方向的高度,这个高度和字高无关,文字内容水平居中。可设置为字号的1.2-1.8倍,文字与分割线间距离可以设定为字号的1-1.5倍。

边距(Padding):表格中的边距分为左上右下四个方向,而左上右下恰好就是对应前端去编写Padding代码的顺序,在对页面验收时,便可采取这样的形式。

单元格行高可配置:单元格行高直接影响着信息排列的密度,而在实际业务中,真正落地也有着不同的做法。

在对定制化项目的开发中,通常会设计一套设计师认为更加合理的单元格高度,一般为32px-56px区间内,而在很多通用化产品中,存在多个设备屏幕分辨率的差异,为了让每一个分辨率下的产品都能够有较好的展示效果,于是乎将选择权交给用户,在表格左下角会设置舒适、标准、紧凑三种高度来满足需求,使得表格更加落地合理。


总结:整个单元格的行高,就是由这三部分组成,它们的嵌套与组合,所形成了单元格的行高


c.表格分割

在表格设计当中,每一条线都有着它存在的意义。

当表格中展示横线;隐藏纵线。

用户的横向阅读体验更佳,强调一条数据的完整性,能够让用户进行快速的对应。

当表格中展示纵线;隐藏横线。

用户的纵向阅读体验更佳,强调数据上下间的对比,能够让用户找到同一纬度数据下的对比。


比如在一个组织架构的成员列表中,我相信大家都设计过类似页面,同样的设计方式,我一个采取展示横线、一个展示纵线,结果明显,我成员需要阅读完整条数据,因此横线会更加合理。

当然,在我们日常的设计中,展示横线的场景显然会更多,但我们日常使用时,数据对应的场景还会更多这是需要有更强的设计形式:

d.行、列冻结


当表格的行与列的数量过多时,会导致一屏展示不下,而表格中的关键信息与操作是需要在任何时候都展示,这是采取行、列冻结,能让用户快速触达。

表头冻结:通常出现在垂直滚动时,通过固定表头的信息,能够让用户阅读时对应不同的数据,使用户更好理解数据。

首尾冻结:通常出现在水平滚动,通过固定首列的主属性字段以及尾列的数据操作,来满足用户对于一列数据的认知,从而使用户进行快速操作。


5) 分页设计

在对分页设计的分析中,我们需要对分页中的元素进行拆解,才能明白分页的类型所带来的不同。

表格信息:会展示表格信息当中的数据总量、更新时间、默认排序方式等...


数据总量主要展示用户需要浏览的内容的总量;常见于管理后台搜索、筛选符合条件的数据记录时,搜索结果页通常会展示这个信息,这让销售人员在操作时有心理预期。

更新时间主要是展示用户当前表格所操作时的日期时间;常见于金融类产品中,他们对于表格中数据的时效性尤为关注,这样可以方便用户对表格数据中的有效性进行判断

默认排序方式主要是展示表格中是按照哪一个字段进行的排序;通常这种做法多出现于表头直接展示icon,但对于可配置化的产品而言,随着列数的增多,你越来越找不到你想要的默认排序方式,因此在表格的固定位置展示,就再好不过(记住,只针对特定场景)


页面展示数量:结构为「X条/页」

它能控制每个页面展示多少条数据;当在系统中有很多数据时,你可以直接通过「页面展示数据 * 分页总数」 直接算出整个表格的数据总和。


上一页和下一页翻页:分页中基本组成元素通过用户点击上一页、下一页的按钮,实现表格的翻页功能。翻页通常会根据场景不同,去省略翻页中的不同元素,比如在下面马上那个讲到的三种翻页类型,但是上一页和下一页是绝对不可省略的。翻页也如同你翻书一样,可以进行对数据的逐页阅读,遵从用户之前的使用习惯。


当前页码:当前页码说明了页面中数据当前所处的位置,方便用户进行翻页的操作。


相邻页码展示:相邻页码通常展示前后两页,比如你在第6页时,页面需要展示:4、5、6、7、8;但页码在第1页时,就需要展示:1、2、3、4、5;页尾同理。


更多分页:当表格数据过多时,就需要使用分页,同样,当分页过多时,我们需要进行处理,就是省略,采用更多分页,去展示多余的分页情况,当用户需要查看更多的分页,点击更多图标即可。


总页数:代表大概会有多少页此类数据,通过使用总页数才能让用户知道

总页数说明了内容一共有多少页,就像一本纸质书有总页数,一本有声书有总时长;通过这个元素,用户才能了解内容的多少,对整理内容有个把握。


页码跳转:页码跳转帮助用户从当前页面跳转到其他某个页面;比如用户在搜索了某件商品,按销量排序,这时浏览到了第15页,满意度越来越低;于是打算从前5页选一个,这时就能通过页码跳转快速跳转到第1-5页了。


简洁型:


当分页数量较少时,通常在7页以内,就只有最基础的展示:上一页、分页数量、下一页。

迷你型:

当页面空间不足或者降低分页的视觉影响时,可以采用迷你型,主要为当前页/总页数,可以直接跳转到某页面。

完整型:

当表格数据较多,为了满足更多的用户需求,可以根据需求选择分页类型。比较完整的分页还包括如下功能:显示总数、调整每页显示条数、直接跳转到某页。完整型的虽然满足各种功能需求,但是所占空间较大,所以我们要根据自己的需求合理拆分使用。

分页固定:

在表格中使用分页,除了选择合理的分页类型外,我们还需要注意当数据过多的时候,是否要固定分页。这个需要根据需求来决定,如果用户翻页很频繁,表格数据又特别长,就可以考虑分页固定在底部,免得每次用户翻页都要跑到表格的最底部才能分页,还可以在表头也放迷你型分页。但通常在设计表格的时候就没有固定,也很少使用表头分页,所以根据需求来定。同样按钮的设计也会存在类似的情况。

另外就是当数量过少时,只有一页或者无数据的时候,我们是不需要分页的,这个时候最好去掉分页,展示在这里没有什么意义了。但很多时候我们设计没有做区分,开发也就不管了。



老读者都知道,我会反复去强调“场景”这一概念(比如在导航菜单、筛选、弹窗、图标中经常提到这一词),因为你只有明白用户真正的业务场景,才能够真正的明白用户的痛点。我们回到表格中,在表格的场景主要分为五类不同场景:数据浏览、数据新增、数据操作、数据统计与通用场景。我会通过不同场景的梳理分析我们在不同场景中存在那些优化点,可以进行深入探讨。

1) 数据浏览


在数据浏览的场景中,本质上是对大量数据进行寻找与确认。用户需要在此场景下进行高效准确的数据查找。而伴随着用户的寻找,就需要使用表格当中的工具进行辅助查找,比如筛选、搜索,这些工具的出现,都能够帮助用户进行数据的清洗,使得用户想要的数据能够快速的被找到。


比如:我们公司的销售人员在每天早上,都需要去 check in 今天自己所要跟进、回访的客户,销售人员就会通过表格中的各种工具,去帮助销售人员找到自己想要的那部分数据。

常见行为及设计点:

数据筛选浏览:通过自己对数据的一定了解,结合各种筛选条件,配合得到用户想要的筛选结果。

数据多选:用户可以通过多选,为他寻找的数据进行标记,方便之后的操作。


2) 数据新增

数据新增本质上是将复杂的数据结构,通过系统字段类型的相应规则,录入保存到系统中。这也就我们常说的增删改查的“增”


比如:销售人员在对新增的客户进行登记时,需要登记公司名称,联系人,联系方式,跟进记录等等。且需要不断更新跟进记录,因此销售人员在表格上的新增是一个非常高频操作~


3) 数据操作

数据操作分为对单个数据的操作、单行数据的操作、多行数据的操作三种情况

单个数据的操作,就是我们常见的快捷编辑,可以点击快捷编辑按钮,对单个数据进行录入,

为何需要快捷编辑,在销售使用场景中,使用表格去编辑一条信息是一个循序渐进的过程,比如在对客户进行沟通时,数据的不断更改,跟进内容也在不停修改,导致用户需要每次进入用户详情点击编辑之后才能进行操作,而在表格内进行快捷编辑直接满足实时编辑的需求,在交互层面上这是一个非常OK的需求

但落到开发层面上,就意味着要在用户进入表格中去判断权限,才能让用户知道是否能够点,点击过后需要判断字段属性,明确该字段是与哪些字段进行联动


单条数据主要通常会采取两种路径进行操作:进入用户详情页界面,对一整列数据进行编辑,这种情况通常都需要多个数据进行处理,因此进入编辑页面更容易寻找,同时也是最为正常的一种做法


多行数据操作主要采取多选过后的操作方式:当用户想要对多条数据进行操作时,就需要对多个数据进行checkbox 的勾选,从而满足多行操作的需求


4) 数据统计

数据统计主要针对用户需要审查分析。目的是在通过大量的数据分析去得出自己的某一些结论,由于关注的数据会有主次之分,数据与数据之间也会有内在联系,用户会更加跳跃地扫视页面,而且会更加反复地审查数据。例如,销售人员需要查阅本月的销售情况,进入到商品销售明细表中,分析本月的经营状况,若其中某些商品


了解了表格的使用场景过后,针对不同的场景,在设计上它的思路就会有所不同

使用上就会有不同的设计思路。由于篇幅原因,我们主要了解了表格的基本形态,如果对于表格的场景还不太清楚,我会在下篇中与大家通过20个问题,了解B端表格中究竟应该如何设计~


我是CE青年

一个2 B行业的2B设计师

我们下篇文章再见

、html概述

1、html标签是用来给文本添加语义的,而不是用来修饰文本的;

2、<meta charset="GBK">指定字符集(GB2312、UTF-8),html保存和指定字符一样,才不会乱码;

3、<!DOCTYPE html> DTD文档申明告诉浏览器我用的什么协议来写的,不是html标签;

4、webstorm快捷键大全:https://www.cnblogs.com/yeminglong/p/5995421.html

二、基础标签

1、h、p 和 hr 标签

  • 三个标签都是占一行

2、注释:<!-- -->

3、图片:<img src=" ">

  • 不会独占一行;
  • 保证不变形,指定宽或者高即可;
  • title 和 alt 属性;
  • src 可以是相对路径(../ 上一级)和绝对路径,路径中尽量不含中文,相对路径不可跨盘符,路径分隔统一写 / ,绝对路径的可移植性不好;

4、换行:<br> 用于内容未完的换行

5、跳转:<a href=" "></a>

  • 支持文字和图片的跳转;
  • 地址必须加 http 或者 https;
  • href 可以指定本地的地址;
  • target(_self 和 _blank) 属性控制跳转是否打开新的选项卡;
  • title 提示作用;

6、base 标签:<base target="_self ">

  • 统一指定 a 标签怎么打开,写在 head 中

7、假链接:点击不会跳转

  • a 标签的 href 属性值为 # 或者 javascript
  • # 会跳转到页面的顶部,而 js 不会

8、锚点:<a href="#id值"><\a>

  • 可以跳转到页面的指定位置
  • 可以跳转到其他页面的指定位置,只需在 # 前面加上页面的路径即可
  • 跳转无过度动画

三、列表标签

1、无序列表(!)

  • <ul><li><\li><\ul>;
  • 整体不可分割;
  • ul 除了 li 不建议再加其他的标签,li 标签中可以放其他标签来丰富内容;
  • li 中还可嵌套列表;
  • ws快捷生成 ul>li*3>h2+p;

2、有序列表(*)

  • <ol><li><\li><\ol>;

3、定义列表

  • dt 是标题,dd 是具体的描述;
  • 推荐一个 dt 一个 dd ,也可以一个 dt 对多个 dd 或者没有 dd;
  • dl 中不建议加其他标签,二 dt 和 dd 可以加;
  • 应用:网站尾部,图文混排(仿京东做个网站的尾部);

四、表格标签

1、格式

  • 表格的边框默认不显示(border)

2、属性

(1)宽高

  • table 和 td 可用;
  • 默认高宽根据内容调整;
  • td 设置高宽只会改变当前单元格的状态,而不会改变 table 的高宽;

(2)水平和垂直对齐(align 和 valign)

  • 水平对齐三个都可以用,而垂直对齐针对 tr 和 td;
  • table 设置 align 控制表格在水平方向的对齐,给 tr 和 td 设置都是控制单元格里的内容的对齐方式,不过 tr 影响一行,td 影响一个,tr 和 td 都设置 td 会覆盖 tr 的效果;
  • tr 和 td 设置 valign 都是控制单元格内容的垂直方向的对齐,不过 tr 影响一行,td 影响一个,tr 和 td 都设置 td 会覆盖 tr 的效果;

(3)内边距和外边距(cellpadding 和 cellspacing)

  • 两个属性都是 table 的;
  • 外边距是指格子与格子之间的空隙,而内边距是指格子与文字之间的间隙;

(4)细线表格

  • 先给 table 设置 bgcolor;
  • 再给 tr 设置 bgcolor;
  • 最后 table 设置 cellspacing;

3、表格的其他标签

(1)caption:表格的标题标签,必须写在 table 内而且需紧跟 table

(2)th:th 和 td 同级,th 有加粗的效果

4、表格的结构

(1)组成:caption 标题、thead 表头、tbody 主体、tfoot 尾部

(2)说明:

  • 浏览器自动添加 tbody;
  • table 设置高度后,tfoot 和 thead 的高度是不会变化的;

5、单元格的合并

(1)水平方向:td 属性 colspan = "2";

(2)垂直方向:td 属性 rowspan = "2";

五、表单标签

1、格式

2、input 标签

(1)type = text:

(2)password:

(3)radio:互斥要设置 name 相同;默认选中 checked

(4)checkbox:选中 checked

(5)button:

(6)image:

(7)reset:value 修改标题

(8)submit:

  • form 的 action 确定提交的地址
  • 提交数据加 name 属性

(9)hidden:

-----------------------------------------------------------------------------------------------------------------------

*相关标签:

  • label 标签:让文字与 input 标签绑定;两种绑定的方式:

  • datalist 标签:给输入框绑定输入的提示:<datalist><option>haha</option></datalist>
  • h5 中新增的 input 标签:email 、url 、number 、color、date(浏览器的支持不好)

3、非 input 标签

(1)select

(2)textarea

  • cols 和 rows 指定输入的行列,但是还是可以无限输入
  • 默认可拉伸,也可通过 css 固定大小

4、练习

(1)表单标签除了 button 外都可以用 value 来指定提交的值

(2)表单添加边框可以在 form 中添加 fieldset 来实现

六、多媒体标签

1、video 标签

(1)格式:<video src=" " autoplay="autoplay"></video>;

(2)属性:controls(控制条)poster(海报)loop(循环)preload(预加载,与autoplay冲突)muted(静音)width/height;

3)另一种 video 格式:解决浏览器的兼容

(4)让所有的浏览器支持 video 标签:通过 js 框架来实现

2、audio 标签

(1)使用基本和 video 一样,属性只有宽高和 poster 不能用,也是两种格式

3、details 和 summary 标签

(1)格式:

4、marquee标签(跑马灯效果)

(1)w3c 不推荐,但是浏览器的支持好

(2)属性:direction(方向)scrollamount(滚动的速度)loop(滚动次数,默认-1)behavior(滚动类型 slide)

(3)废弃的标签:<br><hr><font><b>加粗<u>下划线<i>斜体<s>删除线(无语义)

替代的标签:<strong><ins><em><del>(加入了语义)

5、字符实体

(1)&nbsp;空格 &lt;&gt; &copy;版权符号

(2)理解:html 占用了的不显示的特殊字符用另外的代替符号表示,使他们正常在 html 页面上显示

文介绍了制定产品设计规范标准的重要性,也包括行业对于高级产品经理的要求,并以几点详细介绍,包括了制定标准的共同目标、基础要素、设计原则、规范制定的流程以及如何推动规范的执行等。适合产品岗位的你阅读。

每一款产品,都会有它的产品设计规范。例如支付宝小程序,微信小程序,有它的设计风格和交互的审核要求。

而适用于移动应用以及Web设计,可以参考Material Design(Google),强调直观性、一致性和有意义的动效设计。

如果你是ios产品,那首先就得去了解Human Interface Guidelines(Apple),再基于这个设计规范制定符合平台的标准,最通用,最基础的,就当属Microsoft Design Guidelines,适用于Windows平台的设计规范,强调平面化、简洁和直观的设计风格。

为什么要制定产品的规范标准?

制定产品的规范标准可以提高产品的一致性、可用性和用户体验,帮助建立品牌形象、提升用户满意度,并为团队提供明确的指导,提高工作效率和协作效果。

行业对于高级产品经理的要求:

  1. 根据产品的战略制定产品周期性的规划。
  2. 根据产品定位制定产品的设计规范标准。
  3. 项目管理能力。
  4. 团队管理能力。

在讲这篇内容之前,先容许我把之前的几篇文章给大家同步一下,感兴趣的小伙伴或者遇到瓶颈的小伙伴一定要看,我相信会对你们的提升带来很大的帮助,内容很长,建议先收藏。

我们先来简单的对规范标准有个概念,有很多小伙伴都总是会在这两个词进行拉扯,但其实这两个词加起来就代表了准则。而规范则是基于标准之下,如支付宝小程序,它的设计规范,对于我们来讲,就是平台的设计标准,我们基于这个标准下再去制定属于自己产品的设计规范。

那我们现在来看看,标准和规范在文学上的区别为:意思不同、出处不同。

① 意思不同

② 出处不同

规范要求和标准的区别:

  • 标准:是为了在一定的范围内获得最佳秩序,经协商一致制定并由公认机构批准,共同使用的和重复使用的一种规范性文件。
  • 规范要求:对于某一工程作业或者行为进行定性的信息规定。主要是因为无法精准定量而形成的标准,所以,被称为规范。

③ 成因不同

  • 标准:是科学、技术和实践经验的总结。为在一定的范围内获得最佳秩序,对实际的或潜在的问题制定共同的和重复使用的规则的活动。
  • 规范要求:可以由组织正式规定,也可以是非正式形成。

接下来,我们开始今天的主要内容。小编会通过三个篇章,七个章节,给大家提供落地的方法。

倘若你目前刚好处在对于制定产品的规范标准无从下手的阶段,以下内容绝对能够让你按部就班的完成;假如你已经为多个平台制定过标准,也可以参考本篇内容,思考下有没有进步的空间;假如你从来没接触也没有机会制定,那么,这篇文章就是你的敲门砖。

一、基础篇

1. 为什么要制定产品的规范标准

小编总结了十点,先给大家介绍一下,我们为什么要去做这个事情,这个事情给我们带来什么价值。

作为产品,我们必须要清楚一个原则在于:我们做的任何事情,都得有它的价值,要清楚它的目的再去做,拒绝为了做而做的行为,切勿让自己变成了传声筒。

  1. 用户体验(User Experience, UX):产品设计应关注用户体验,确保产品易于使用、直观、高效,并满足用户需求。包括界面设计、导航流程、信息架构等方面。
  2. 可用性(Usability):产品设计应注重可用性,确保用户可以轻松理解和操作产品。包括可读性、可理解性、易学性、易记性等方面。
  3. 一致性(Consistency):产品设计应保持一致性,确保界面、交互和设计元素在不同功能模块和平台上的一致性。这有助于用户熟悉和使用产品,并建立品牌形象。
  4. 可访问性(Accessibility):产品设计应考虑到不同用户的需求,包括身体残障、视觉障碍和听觉障碍等。确保产品对所有用户都具有可访问性和可用性。
  5. 反馈和提示(Feedback and Guidance):产品设计应提供明确的反馈和指导,让用户知道他们的操作是否成功,并提供帮助和提示信息。
  6. 视觉设计(Visual Design):产品设计应注重视觉设计,包括色彩搭配、字体选择、图标设计等,以确保产品界面美观、吸引人,并符合品牌形象。
  7. 简洁性(Simplicity):产品设计应追求简洁性,避免复杂和冗余的设计。简洁的设计有助于用户理解和操作产品,提高用户满意度。
  8. 可扩展性(Scalability):产品设计应考虑到未来的扩展和升级,确保产品具有可扩展性和灵活性,以满足不断变化的需求。
  9. 安全性(Security):产品设计应注重安全性,确保用户数据和隐私的保护。包括用户身份验证、数据加密和安全的交互设计等方面。
  10. 性能(Performance):产品设计应考虑性能因素,包括响应时间、加载速度和系统稳定性等。确保产品能够快速、稳定地运行,并提供良好的用户体验。

综上所述,制定产品的设计规范标准可以带来许多益处,包括提升用户体验、降低开发成本、增强品牌形象和改善团队协作。

规范的制定和执行有助于打造出一致、优质的产品,提高用户满意度和市场竞争力。

2. 产品设计必须注意的常识问题

产品设计的常识(Common Sense),很多时候都会被忽略,特别一些小型项目。研发人员会在初期嫌麻烦不对一些常识的问题进行处理,最终导致的影响,往往是影响到产品的本身。

产品一定要把控好这个关卡,谁都可以不懂,产品一定要最清楚最基本的就是系统异常处理设计规范能够有效解决且避免以下七点:

  1. 列表筛选项与表头不对应:这是很多产品设计会犯的错,列表的筛选项与表头不一致的缺点在于用户筛选操作之后没法得到筛选结果是否符合筛选条件的反馈。举个例子,订单列表筛选项有个状态筛选,包括待支付、待发货、已发货、已收货、已完成等状态。然而,如果列表没有状态这一列,那么用户进行完状态筛选后无法通过列表确定订单的状态是不是和筛选的状态一致。结果,用户只能点击订单详情去核实,增加了不必要的操作。
  2. 没有考虑列表为空的处理:对于列表为空,要给出明确的无数据指示。同时,对于需要用户主动添加才有的数据,应当给出明确的引导。此外,对于网络错误、无权限、找不到对应资源、系统错误等情况也应该提供用户体验友好的缺省页面。
  3. 表单没有相应占位文字:对于那些比较难理解的字段,建议是给出示例,而对于有特殊规则的字段也要给出说明,避免用户填写错误,如输入框里面的text 。
  4. 表单不明确校验规则:文本类没有明确字段长度范围,导致输入的文字过长,界面错乱或是由于数据库长度限制导致报错。
  5. 数值没有设置常规校验和按规范纠正:数值类没有明确正负数,数值范围或者小数位数,结果导致程序出现各种数据统计问题。文件没有明确大小限制,结果用户上传很大的文件占据服务器存储资源。图片没有约定比例或尺寸,导致用户界面看起来图片变形,影响美观。手机号、证件号码、邮箱没有校验对应规则,导致录入的数据错误。唯一性数据没有明确限制,导致系统查询时出现多条数据的bug。
  6. 表单不考虑亲密性原则:进行信息分组,将相关性强、同属性、同本质的内容放在一起。在设计中,联动的元素、字段,相关性高的信息,按就近原则布局,可有效避免用户视线的跳跃,避免用户错过或忽略关键信息。
  7. 错误文案由开发自由发挥:曾经在不少产品中见过出现类似“An error occurred”的英文报错信息,实际上这是程序运行异常的报错信息。这种信息直接抛给用户体验是非常糟糕的,用户根本无法知道哪里出现了错误。由于产品经理没有明确错误提示文案,开发人员则根据自己的理解自行设定错误提示,会出现很多对用户不友好的错误提示。
  8. 违反一致性原则要求在相同或熟悉的功能和场景中,在一个(或一个品类)产品中使用一致的性能、操作和感觉。一致性的目的是降低用户的学习成本、用户的认知成本和误用的概率。

产品设计是否保持一致很容易反映出一个产品经理做事情的严谨性。有不少产品经理设计产品很随意,抱着“能用就行”的态度做设计,结果就会出现整个产品的一致性非常差。

比如,列表的添加按钮一会在页面的右上角,一会在页面的左上角,搞得用户使用不同的页面像是在玩“躲猫猫”游戏一般,学习成本非常高。

再比如移动端,有些页面使用长按删除,有的使用向左滑动删除,还有的需要点击“…”在弹层中点击删除……同一个产品,多种交互形式也会让用户困惑。

至此,产品的规范标准入门篇已经跟大家介绍完了。大家在做任何一个项目的时候,都应该注意入门篇的两个章节,究竟有没有做到位,有没有制定规范标准同步到设计,研发。

入门篇基本满足大部门从0-1的项目,或者是初中级的产品经理所需要掌握的技能,建议大家收藏起来。如果遇到这类任务的时候,就可以以这篇文章,作为你们的任务List,一项一项对应的去检查是否有做到位。那么我相信你们吹来的作品,一定是具备一定的专业度,一致性以及可延展性的。

二、入门篇

在入门篇开始之前,先给大家交个底。我们在制定产品入门篇的规范标准时,有一个部门必须拉他们参与进来,那就UI部。UI部门在入门篇的环节,起到了决定性的作用,由他们为主导,我们为辅助的方式,达成一致性的决定。

这一个环节,最重要的目的是让产品与UI保持同频,大家都在统一规范标准下进行设计,为产品添砖加瓦。而且通常我们都会把这个环节以一个功能模块级别的需求去做,也有这个需求的版本,持续优化迭代。

当然,需要优化迭代的时候,那就应该是由产品为主导,在原有的标准下,再去优化规范,最终形成新一版的规范标准。

这个环节也是能够让产品在与UI沟通上的成本减少,在同频基础下工作也有利于减少两个部门之间的摩擦。

1. 产品交互设计规范

相信大家应该也听说过交互设计师这个岗位,大多数在中小型企业很难有资源去匹配这个岗位,一般都是在成熟的互联网公司会有这个岗位的需求。

通过这么个规律我们也可以发现:需要注重交互设计,往往到了产品已经扎根土地,茁壮成长的阶段。

相对比较稳定的时候就会开始考虑这个问题,但并不代表说,交互设计不重要。交互设计对于产品来言,在做需求时,靠的是经验,靠的是竞品分析,靠的是借鉴。

看到这里的小伙伴们,自动自觉对号入座,往往一味的靠经验,靠竞品,靠借鉴,只会让产品的交互五花八门,没有一个体系。单个功能抽出来可能是合理的,方便的;但全部凑在一起的时候,倘若需要用户去适应,那么就适得其反。

因此,我们产品就需要UI同学帮忙一起制定出产品交互设计规范,而产品本身,也应该有一套自己的标准,把控好产品的交互,这样才有利于产品的发展。

接下来,我会通过收集一些常见的交互问题,给大家用实例去介绍产品交互设计规范如何制定。

1)做一个页面交互设计的时候要注意什么?

  1. 我们现在看到移动端,一般都是通过头部,腰部,底部去进行拆解,头部一般都是搜索框,banner,中部是突出你产品的核心转化内容,底部是菜单栏,把你的产品模块标准化体现出来。
  2. 我们要注意要有距离感,距离核心转化切忌太远。例如:比如一个卡券的功能突出店铺是没意义的,店铺本身带不来转化,要突出的主题是卡券。同样,进入某一个商品,默认界面也应该是卡券。
  3. 要注意内容的一致性以及归属。例如:我的卡券就应该在我的,不应该出现店铺里面,地址,名称,号码就应该统一在二级页面。除了对用户的隐私保护之外,也应该在我的个人信息作为统一入口,首页展示核心内容时,要注意分类,只展示一级分类,二级分类跳转,三级分类表单,四级分类弹窗,这么个交互原则去设计
  4. 注意丰富产品的隐喻设计。隐喻设计是很考验一个产品的功力,通过产品语言去引导用户,移动端界面,屏幕空间较小,能用图标的地方,少用文字。并不是一定都要用图标,而是要把握好隐喻的尺度。

2)如何理解模态框?

何时应该使用模态框?模态框和阻断框有什么区别?

模态对话框(Modal DialogueBox) ,阻断(Blocking),可以用两个比喻给大家解释:

  1. 模态=管制刀具;阻断=杀人凶器。管制刀具不一定是杀人凶器(可以用来切菜);模态不一定是阻断的(可以是非阻断的强制提醒);
  2. 杀人凶器可以是管制刀具;阻断可以由模态来完成;杀人凶器不一定是管制刀具(毒药、板砖也可以);阻断不一定是模态(非模态、强制跳转也可以)。

3)在具体设计一个产品的过程中,把握住哪些关键点才能让整个产品有着一致的交互体验,或者交互模式?比如iOS端和android端,比如web端和移动端?

一致性,在交互设计中非常重要!保持交互一致性,有两个武器:原则和规范。

规范又有两个层面:指南Guidelines和规格

原则

一些指导性的东西,在设计当中要遵从。在整个产品(无论多少端,多少子产品)都要遵守的。

举例:一个界面完成一个任务;表单超过10项必须分步骤;用户必须随时能回到主界面……这些原则可以由不同的形式来实现,但必须遵从这些原则。

规范

文章开头也有提及到,忘记了请翻上去复习一下。

指南:圈定具体的交互模式、色彩搭配和设计禁忌。

在这个层面,一个[构]可以有多个[形],但某个形只能有一个[构],达到相同位置、相同外观、相同操作。通过指南能够让各个端(IOS和安卓)看起来似曾相识,便于用户学习和养成习惯。

举例:在没有左侧导航的详情界面,必须包含面包屑;面包屑只能出现在PC浏览器端,不允许出现在响应式web界面中。

IOS和安卓的官方Guidelines就是这样的东西,但也可视情况制定私有的指南,也就是各个公司自己的设计指南。

规格:规格非常具体的描述了每一个模式的每一个形态的具体尺寸、色彩、响应,精确到数值。

举例:一级标题,字号为宋体 18pt;行高30pt;行上下外距为5pt;色值为#CC9300。

3)表单布局有什么规范要注意的?

这个问题是初级产品经理最容易犯的问题,设计太随意,看到别人的就想复制粘贴过来。这个问题正是可以解决很多初级产品常见错误的问题,以及给大家提供一个思路。

这里分享四个常见的表达布局对齐:

  1. Text靠左对齐,输入框在右。
  2. Text靠右对齐,输入框在右。
  3. Text靠左对齐,输入框在下。
  4. Text在输入框里。

首先,我们要清楚,人的视觉是上下,左右的。所以我们会把要填写的标题,放在左边,输入的内容放在右边。这个原因也在于大部分都是右撇子,所以放在右面方便输入,而在左边提到的四点,各有千秋。

关键在于考虑的出发点是用户的视觉,还是表单的体验,抑或者是信息是否足够直观。再者就是是否够简洁,都是可供选择,关键在于选定一个就保持一致。

综上所述我们可以知道,交互设计可以通过交互的显性和交互的隐性去考虑

交互显性

交互显性指的是用户在页面所有的点击,滑动,跳转的操作,比如刷新方式有下拉上滑按压点击等方式。

这就是所谓的交互显性的操作。要保持产品显性操作的统一性,同类别的交互不可有不同的操作感受。同时交互显性要符合大众的认知习惯,可创新但不可违背潜意识,比如说PC端的交互显性是以点击事件作为核心操作的,移动端的交互显性是以滑动作为核心操作的。

交互隐性

交互隐性指的是用户信息发生改变时的显示。比如说订单状态的显示,确认收货后,绿色的标签显示订单已完成,申请售后则有售后的标签,一些平台还会以订单的颜色区分去给用户隐喻。

再举个例子,消息有个小红点,用户就会知道去点,上文也有提到隐喻,很多时候,我们就是通过交互隐性的方式,来引导用户,提示用户,这样的方式有利于让用户自发性去体验,感受平台的功能,带来舒适感。

归根结底,产品的交互离不开创新,一致,符合规范。

2. 产品布局设计规范

本章节我们以Web端为例,我们在设计过程中,需要考虑我们基于什么样的尺寸进行基础设计。划分哪些区域需要固定尺寸、哪些需要做适配等。

据统计,使用中系统的用户的主流分辨率主要为 1920、1440 和 1366。

设计思考,有如下几点:

  • 保证画布尺寸的一致性原则。
  • 统一的网格单位。
  • 统一的栅格系统。
  • 视觉元素的统一和对齐等。

web页面是按照Html的设计规范标准进行布局设计的,由以下三部分构成:

  1. 头部区域header。
  2. 主体区域main。
  3. 底部区域footer。

1)Margin(边距)

为避免页面元素紧贴边沿的情况发生,WEB 页面和其中的表格,应设定边距,最小边距值为 “3px”。

一般粗细直角以1px,圆角为2px。

2)Button(按钮)

按钮一般有三种样式:小、中、大。

按钮是交互设计中必备的元素,它在用户和系统的交互中承担着非常重要的作用。

后台中常见的按钮类型分为线性按钮、文字按钮、图标按钮等。

按钮并列间距为:小间距8px,中间距16px,大间距24px

其中小中大的宽度分别为:58px,74px,96px

3)Table(表单)

常见表单是由多个列表项构成的。而每一个列表项都是由最基本的标签和输入框组成,常规的表单包括单选、多选、下拉选、输入框、时间选择、开关选择等控件。

顶部标签是标签在控件的上方,标签可以和控件左对齐,对于横向空间不足的情况是一种很好的方案。

竖列标签的使用场景思考:

  • 当⻚面的一级功能较多,且存在扩展的需求时,可考虑使⽤竖列样式。
  • 当⻚面的层级较多,为了避免纵向的tab过多,可考虑使⽤竖列样式作为第一级tab;每个标签都有其优缺点,根据自己的产品选择一种最适合自己产品的方式,规范中确定标签的对齐方式,每个控件的宽度、高度。

表格的设计思考:

  • 表格文字和数据,以左对齐为准。 表格内的内容在左对齐时,尽量与左边表格边距保持至少 10px 的间距。
  • 表格在后台系统设计中大约占40%左右的比重。

表格的设计规范的设计思考点如下:

  • 操作列按钮:每个按钮字数不超过6个字。
  • 列数太多:默认展示范围:3-8列,若出现更多,可固定重要列,剩余列滚动条展示交互设计。
  • 列表的宽度:宽度自适应,但根据字段的重要性显示,重要字段优先完整显示。
  • 列标题:表头列标题最多输入 8 个字符。
  • 滚动条:表格内容超过一屏需要显示竖向滚动条时,需要固定表头。只需滚动表格内容就好。
  • 空数据:表格某部分无数据时用 “-” 来填充显示,对于数据为零的单元格,填上 0 即可。
  • 标题栏:标题栏栏高为56PX。
  • 内容栏:准栏高为56PX,大栏高为80px,内容区和栏水平居中对齐。
  • 垂直对齐方式:右对齐:金额、最右侧操作列。左对齐:除金额、最右侧操作列外其他的表格数据。
  • 水平对齐方式:当表格所的有栏高小于80px时,内容水平居中对齐;当表格栏高大于 80px(大栏)时,所有内容都为顶对齐。
  • 自适应规则:表格中栏内容组件是利用占比的方式实现,可以根据栏目字段的长短给予栏目所占的百分比。完成表格占比后,对于实现效果不理想的,可以根据具体字段做微调处理。

表头的文案,可遵循信息降噪的原则思考:

4)Progress bar(进度条)

进度条的设计思考:

加载中进度条,存在加载中、成功、失败三种状态通过颜色去区分,进度条长度支持自定义。

5)Dialog(弹窗)

弹框主要分为两个大类模态弹框和非模态弹框,他们最大的区别就是是否强制用户交互。

常规状态通常出现在页面的上方,有普通信息、成功信息、失败信息、警示信息四种icon。

6)Default(缺省状态):

缺省页面是当页面没有数据、用户没有建立资料或网络连接不通畅的情况下所展现的页面。

为了缓解用户面对这类情况产生焦虑情绪,设计师可以用一些插画和文字的结合来引导用户进行下一步的操作。

3. 产品风格设计规范

产品风格设计的形成一般通过以下几点:颜色,字体,图标,尺寸决定的。

1)Color(颜色)

色彩内容主要包含基础色(如品牌色、黑色、白色)和功能色(如链接色、提醒色等),图表配色为单独的配色体系。

在前期制定颜色规范的时候,精益求精的设定颜色,切忌颜色过多。

颜色的状态色尽量用原色进行转换,设置一个合理的变色公式,让所有颜色的状态色都根据这个公式进行转换。

例:

  • Hover:H不变 S加10 B减5 。
  • Click:H不变 S加20 B减10 。
  • Disable:HSB均不变,不透明度 30% 。

在设计规范中,尽量把颜色的色值和 rgba 值都写出来(这里是强迫症患者要标的,因为有时候色值完全一样,但 rgba 数值略有不同,虽然效果一样,但是对于强迫症的你来说,舒服吗?)。

状态色有 4 状态色:Normal、Hover、Click、Disable

在设定图表颜色的时候,要考虑不同的使用样式(柱状图、环形图、饼图等…),同时也要考虑他的延展性。比如你设定 12 个 chart 色值,在使用的时候按着顺序来使用,当超过 12 个后可以为同一个颜色。

2)Font(文字)

设定统一的字体规范,使用非衬线字体在各个操作系统下都有最佳展示效果。

首先,要设置一个字体家族,保证产品界面的最优展示。

例如(仅作为展示,不是建议):font-family: “Chinese Quote”, -apple-system, BlinkMacSystemFont, “Segoe UI”, “PingFang SC”, “Hiragino Sans GB”, “Microsoft YaHei”, “Helvetica Neue”, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”;

字号

现在主流的产品中,主体字为 12px / 14px的居多,可根据自身的产品定位以及用户的习惯进行设定。

字号不要出现奇数,否则在一些显示器上会有对不齐像素的状况发生。

字体颜色

字体颜色数量建议在 3~4 个,不宜过多,但是每个层级之间区分要大一些。

文本应该保持至少 4.5:1 (基于亮度值计算)的对比度以保持文本清晰;最佳对比度为 7:1。

测试对比度的网站:https://contrast-ratio.com

WCAG 2.0 中将颜色对比等级分为 3 种,A级,AA级,AAA级,等级越高意味着颜色的对比度越高,呈现出来的视觉压力越大。

  • A级:对比度 3:1,是普通观察者可接受的最低对比。
  • AA级:对比度 4.5:1,是普通视力损失的人可接受的最低对比度。
  • AAA级:对比度 7:1,是严重视力损失的人可接受的最低对比度。

3)icon(图标)

设定统一的图标使用规范,让视觉效果更和谐。

icon大小

icon 的常用尺寸有很多,需要注意的是 icon 的大小中,相邻的两个尺寸至少相差 4px,否则你会在后期用的时候会有选择困难症。同时功能 icon 尽量贴边或尽量贴边绘制,保证展现的视觉统一性(操作 icon 除外)。

单独 icon 使用的时候,尽量不要太小,最小值建议为 12px。

icon 热区

icon 的热区经常被设计师和开发所忽略,本身 icon 的尺寸一般就很小,再加上如果没有设置热区的话,操作体验极差。

所以一定一定要设置 icon 的热区,设置的值我建议为 icon 大小的 2倍。例:icon 大小为 14 * 14px,则热区大小为 28 * 28px。

4)size(尺寸)

页面内布局间、模块间、模块内的各部件距离。

尺寸大部分规范中都用的是 8 的倍数,不用纠结,直接用就行。我这里有个公式:Sn = 8px * n,n为正整数。特殊:最小支持4px。

三、进阶篇

进入进阶篇阶段,我们不只是按照行业标准制定规范,也不是按照一些平台标准以及常识问题,去为自己的产品制定规范标准。而是需要投入更多的精力,站在更高的角度去思考要为产品带来什么价值。而价值的体现就在于转化,管理,引导,复用,创新,切忌盲目动手。

在进阶篇没有唯一的标准,都需要各位结合自身产品的业务,产品定位,用户画像去制定。

接下来的内容,也只是小编分享一下比较通用的方法,希望能够帮助有缘人在迷茫的时候有个新思路。

在开始之前,再给大家补充三点,作为进阶篇学习之前,所需要结合着来学习的3个方面:

  1. 深入了解产品管理和产品战略。学习产品管理的最佳实践、产品开发流程和产品策略,了解市场需求、用户行为和竞争环境对产品的影响。
  2. 增强技术背景和产品理解。深入了解产品所涉及的技术和行业知识,与工程团队合作,理解技术可行性和产品的技术架构。
  3. 探索产品创新和市场机会。主动寻找产品创新和市场机会,发现用户需求和行业痛点,并提出创新的产品解决方案。

1. 产品引导设计规范

引导分为 5 种:Newbie guide(新手引导)、Steps guide(步骤引导)、Help / Operation guide(帮助/操作引导)、New function guide(新功能引导)、Blank guide(空白页引导)

1)Newbie guide(新手引导)

新手引导是针对新用户的,首次进入产品的时候,我们要着重的把自己产品的亮点以及操作快速的介绍给新用户,让他用最短的时间上手我们的产品。

新手引导要言简意赅,并且如果非必要的话,尽量给用户一个可以直接关闭的按钮,让用户有选择权。我就非常讨厌有一些产品的新手引导,必须走完全部流程后才能关闭,恶心的不行。

2)Steps guide(步骤引导)

步骤引导一般用在有固定操作步骤的场景下,指引用户一步一步的完成想要的结果。常规的步骤引导建议在 3~5 步之间为合理。

3)Help/Operation guide(帮助/操作引导)

帮助/操作引导的展现方式是比较丰富多彩的,可以是提示语、辅助性文本、tooltips 等等,他的作用就是辅助用户去了解并且知道如何操作这个功能。

这个也是在产品中使用频率最高的,运用好他,可以让你的产品事半功倍。

4)New function guide(新功能引导)

他就是常用在新功能上线后,用户第一次登陆相关页面后做的一些引导,目的是为了告诉用户我们做了新东西,你快来试试吧。

5)Blank guide(空白页引导)

空白页引导一般用在在缺省页,对用户进行一些操作指引,让无信息的页面变得更有价值。比如百度在一些缺省页上就放了一些关于失踪儿童的信息,就因为做了这个引导,帮助了千万个家庭找到了失散的孩子。

2. 产品角色设计规范

这一章节在很多平台里面,都会给忽略掉它的一个重要性,一个产品的延展性,通用性,易用性和亲密性都离不开一个好的角色设计规范,角色设计的底层逻辑就是产品权限的制定。

目前的主流产品对于权限的制定都有一套规范标准,小编负责的产品也是通过借鉴主流产品权限的制定方式来设计,本章节主要是给大家分享下小编的方法。

我在做权限制定的对象是角色,而不是用户,所以也点一下题,我们在做的是对产品角色设计的规范,并不是对用户权限去做控制,接下来我们先来梳理下在做权限制定的时候常见的问题。

1)权限制定的过程中常遇到的问题有。

  • 配置不规范,系统基础不稳,拓展性差。
  • 配置不灵活,用户需求难满足,体验差。
  • 配置太灵活,逻辑会复杂,实施成本高。

我们可管理的权限(系统资源)分为功能权限、数据权限:

  • 功能权限,管理API和页面元素的可控与否、可见与否。
  • 数据权限,管理数据表Key-Value的可控与否、可见与否。

这些问题主要都是基于用户作为权限主体的时候会出现的问题。传统的方式就是A -> B -> C 这类型的用户权限去对用户进行管理,对于业务的调整以及对功能模块的拓展是不友好的。

因此,我对于权限管理的理解为权限是主体对客体遵循特定机制做出的行为,而本章节主要是给各位分享RBAC模型。

2)对RBAC模型中的关系描述 – 基于角色的访问控制

RBAC(Role-Based Access Control)是一种访问控制模型,用于管理系统中的用户访问权限。RBAC模型基于角色来定义和分配权限,通过将权限与角色关联,然后将角色分配给用户,实现对系统资源的访问控制。

1. 角色与权限之间的关系:

  • 角色包含权限:每个角色可以包含一个或多个权限,表示该角色具有执行这些权限所需的操作或访问特定资源的能力。
  • 权限属于角色:每个权限都属于一个或多个角色,表示这些角色被授予了执行该权限的能力。

2. 角色与用户之间的关系:

  • 角色分配给用户:每个用户可以被分配一个或多个角色,表示该用户具有这些角色所代表的权限和职责。
  • 用户属于角色:每个角色可以有一个或多个用户属于该角色,表示这些用户被赋予了该角色所具有的权限和职责。

这些关系形成了RBAC模型的基本结构,通过这些关系的建立和管理,可以实现对用户访问权限的控制和管理。

3)对RBAC模型的分析

  1. 角色:RBAC模型中的核心是角色,角色代表了一组具有相似职责和权限需求的用户。角色可以根据用户的职位、部门、职能等因素进行定义。通过角色的定义,可以实现权限的集中管理和统一分配。
  2. 权限:RBAC模型将权限与角色关联起来。权限指的是用户在系统中可以执行的操作或访问的资源。权限可以细分为功能权限和数据权限。功能权限控制用户可以执行的操作,如创建、编辑、删除等;数据权限控制用户可以访问和操作的具体数据范围。
  3. 用户:RBAC模型通过将角色分配给用户来实现访问控制。用户可以根据其职位和职责被分配一个或多个角色。通过角色的分配,用户可以继承角色所具有的权限。
  4. 授权:RBAC模型通过授权机制来管理用户的访问权限。授权是指将角色与权限进行关联,以确定哪些角色具有哪些权限。通过授权,系统管理员可以控制和管理用户的访问权限,以确保用户只能访问其所需的资源和功能。
  5. 审计:RBAC模型提供了对系统访问的审计功能。审计可以跟踪和记录用户的操作行为和访问权限的使用情况。审计日志可以用于安全审计、故障排查和合规性检查等目的。

RBAC模型的优点包括:

  • 简化权限管理。RBAC模型通过角色的抽象,简化了权限的管理。通过分配角色,可以批量分配和修改权限,降低了管理成本和复杂性。
  • 提高安全性。RBAC模型将权限与角色关联,使得权限分配更加一致和规范化。这有助于减少权限滥用和错误配置的风险,提高系统的安全性。
  • 增加灵活性。RBAC模型的角色可以根据业务需求进行定义和调整。当用户的角色或权限需求发生变化时,可以通过调整角色的分配来灵活适应变化。
  • 提升工作效率。RBAC模型可以根据用户的角色和权限限制用户访问的范围,减少了不必要的操作和冗余的权限申请,提高了工作效率。

然而,RBAC模型也存在一些挑战,如角色爆炸问题(角色数量过多)、权限维护复杂、权限继承问题等。在实施RBAC模型时,需要仔细设计角色和权限的结构,平衡权限的粒度和灵活性,以及确保合理的权限继承和分配策略。

4)分享一个使用RBAC模型的实例

假设有一个在线学习平台,涉及学生、教师和管理员三个角色,以及对应的权限:

1. 角色与权限之间的关系:

  • 学生角色:可以查看课程、提交作业和参与讨论。
  • 教师角色:可以创建和管理课程、发布作业和评估学生作业。
  • 管理员角色:可以管理用户账号、审核课程和处理投诉。

2. 角色与用户之间的关系:

  • 学生用户A:被分配学生角色,拥有查看课程、提交作业和参与讨论的权限。
  • 教师用户B:被分配教师角色,拥有创建和管理课程、发布作业和评估学生作业的权限。
  • 管理员用户C:被分配管理员角色,拥有管理用户账号、审核课程和处理投诉的权限。

3. 在该实例中,RBAC模型的使用如下:

  • 当学生用户A登录到平台时,他只能查看课程、提交作业和参与讨论,无法进行其他教师或管理员特有的操作。
  • 当教师用户B登录到平台时,他可以创建和管理课程、发布作业和评估学生作业,但无法进行管理员特有的操作。
  • 当管理员用户C登录到平台时,他可以管理用户账号、审核课程和处理投诉,但无法进行教师或学生特有的操作。

通过RBAC模型,该在线学习平台实现了对不同角色的权限控制,确保每个用户只能执行其角色所允许的操作,从而提供了安全和可控的访问控制机制。

5)最后,对本章节进行一个总结

在权限模型里面有两个核心概念,第一个是静态指责分离,第二个是动态指责分离

静态职责分离

互斥角色限制:有些特殊的岗位,同一个用户在两个互斥的角色中只能选择一个。

比如财务和审计,不能既是运动员又做裁判。

基数限制:考虑容量、并发等的问题,一个用户拥有的角色是有限的,一个角色拥有的权限也是有限的,一个角色下的用户也是有限的。

比如微信公众平台做的限制:一个微信号可绑定并管理5个公众号。

先决条件限制:用户想要获得高级别的角色,必须先获得低级别的角色。

比如一个PMer需要先从专员做起,再升为产品经理,再到产品总监。

这种条件限制在人员规模比较大的团队就很常见了,人越多越需要严格且清晰的制度,避免个别的take a shortcut影响大局的稳定。

动态职责分离

动态的限制用户及其拥有的角色。

一个用户可以拥有多个角色,但是运行时只能激活一个角色。

常见就像招聘网站这种,用户既可以招人也可以找工作,角色不同看到的信息完全不一样,所以就只能激活其中一个角色。

四、结语

最后给大家总结一下今天分享出来的内容,产品设计的规范标准,具体的规范还会根据产品的特点、行业要求和用户需求而有所不同。

在制定产品设计规范时,需要综合考虑用户体验、技术可行性、业务目标和品牌形象等因素,以确保产品能够提供优质的用户体验并达到预期的目标。

归纳为以下8点:

  1. 一致的用户界面:确保产品在整个界面上保持一致的设计风格、布局和交互模式,使用户在不同的页面和功能之间能够轻松理解和导航。
  2. 响应式设计:确保产品能够适应不同设备和屏幕尺寸,提供一致的用户体验,无论用户使用手机、平板或电脑访问产品。
  3. 易用性和可访问性:设计产品以满足广大用户的使用需求,包括易用性、可访问性和无障碍性,确保产品能够被所有用户轻松使用和理解。
  4. 信息架构和导航:设计清晰的信息架构和导航体系,使用户能够快速找到所需的信息和功能,减少用户的学习成本和迷失感。
  5. 可视化设计和品牌一致性:使用合适的色彩、图标、排版和视觉元素,确保产品的可视化设计与品牌形象一致,提升产品的识别度和用户体验。
  6. 内容布局和呈现:设计清晰、简洁的内容布局,使重要的信息和功能得到突出展示,避免信息过载和混乱的界面。
  7. 用户反馈和引导:提供及时、明确的用户反馈和引导,使用户能够了解他们的操作结果、状态和下一步的行动。
  8. 安全和隐私保护:考虑用户数据的安全性和隐私保护,遵循相关的安全标准和法规,采取必要的措施保护用户的个人信息和账号安全。

本文由@乐少有话说 原创发布于人人都是产品经理。未经许可,禁止转载。

题图来自 Unsplash,基于 CC0 协议

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。