新知一下
海量新知
6 6 1 0 5 6 8

B端大厂规范对页头看法不一,怎么选?

体验进阶 | 前华为腾设计师带你看懂产品体验 2022/09/29 10:05
最近我们星球在做 Ant Design 和 Arco Design 的学习打卡,在这过程中发现了不少之前没有想到的细节问题。

其中页头问题,是引发最多困惑的。

新知达人, B端大厂规范对页头看法不一,怎么选?

因为 Ant Design 几乎每页都有这个面包屑+页面标题的组合:

新知达人, B端大厂规范对页头看法不一,怎么选?

然而 Arco Design,大多模板都是这样子的:

新知达人, B端大厂规范对页头看法不一,怎么选?

乍一眼看,还以为只是视觉样式不同而已,Arco Design 把页面标题和面包屑分开了。

再仔细看看,才发现其实 Arco Design 是直接把页面标题给省了啊!

面包屑下面的大字,不是页面标题,而是那张卡片的标题。而真正的页面标题,在面包屑的粗字上。

新知达人, B端大厂规范对页头看法不一,怎么选?

其实 Arco Design 的组件里,也有 Ant Design 那种页头。

新知达人, B端大厂规范对页头看法不一,怎么选?

不过这种页头很少出现在 Pro 模版里,可见他们并不推荐那种页头。

Arco Design 为什么 要省略页面标题?

其实我以前也这么干过,因为 Ant Design 那种比较“传统”的页头,确实有些问题。

首先,页面标题会重复出现,重复出现 2 次就算了,如果是从左导航点开的页面,就会重复三遍。

阿里云就是这种情况:

新知达人, B端大厂规范对页头看法不一,怎么选?

其次,如果页面有很多模块,那么页面标题和模块标题同时出现在页面上,就会显得过于复杂。

例如我给 Arco Design 的多模块页加上页签后,显得更复杂了:

新知达人, B端大厂规范对页头看法不一,怎么选?

就算只有一个模块,这个模块标题还能兼任页面标题,也没问题:

新知达人, B端大厂规范对页头看法不一,怎么选?

而且因为有面包屑的存在,还是能看到当前页面的名称。

国外喜欢省略面包屑最后一项

Arco Deisgn 省略页面标题的方法,也不是什么情况都适用。

如果页面比较难理解,那么把页面标题写大一些还是很有好处的,这样还能加上一些说明介绍。

新知达人, B端大厂规范对页头看法不一,怎么选?

Ant Design

我发现 IBM、Salesforce 和 Atlassian 的设计系统,都会省略面包屑最后一项。

新知达人, B端大厂规范对页头看法不一,怎么选?

Carbon (IBM)

新知达人, B端大厂规范对页头看法不一,怎么选?

Lightning (Salesforce)

新知达人, B端大厂规范对页头看法不一,怎么选?

Atlassian

看上去与下图的 Ant Design 那种类似,但差别在于 ,面包屑最后一项不是当前页的标题,而是上级页的标题。

新知达人, B端大厂规范对页头看法不一,怎么选?

Ant

这种省略面包屑最后一项的做法,就要求必须有页面标题,不然用户就不知道自己在哪了。

没有 Arco Design 直接省略页面标题那么激进,但是至少不会出现面包屑最后一项和页面标题重复的情况,看起来比 Ant Design 要简洁一点。

P.S. 仔细看看 Arco 这个图例中,面包屑最后一项似乎和当前页标题不同,但是这个加粗字的样式,还是让人感觉最后一项就是当前页。

新知达人, B端大厂规范对页头看法不一,怎么选?

Arco

如何选择?

这些方式各有各的道理,没有说哪种就一定好,哪种就一定不好。

例如 Ant 的方式,虽然会把页面标题重复三次,但这是最好理解的方式,适合偏传统的 B 端产品。

Arco 省略标题的方式,适合每页模块较多,又追求轻量简洁的产品。

国外那种省略面包屑最后一项的方式,适合追求轻量,但又追求稳妥的产品。

更多“设计”相关内容

更多“设计”相关内容

新知精选

更多新知精选