/B端大厂规范对页头看法不一，怎么选？
最新文章2023-08-26

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

最近我们星球在做 Ant Design 和 Arco Design 的学习打卡，在这过程中发现了不少之前没有想到的细节问题。

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

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


然而 Arco Design，大多模板都是这样子的：


乍一眼看，还以为只是视觉样式不同而已，Arco Design 把页面标题和面包屑分开了。
再仔细看看，才发现其实 Arco Design 是直接把页面标题给省了啊！
面包屑下面的大字，不是页面标题，而是那张卡片的标题。而真正的页面标题，在面包屑的粗字上。

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

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


Arco Design 为什么要省略页面标题？
其实我以前也这么干过，因为 Ant Design 那种比较“传统”的页头，确实有些问题。
首先，页面标题会重复出现，重复出现 2 次就算了，如果是从左导航点开的页面，就会重复三遍。

阿里云就是这种情况：

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


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


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


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



国外喜欢省略面包屑最后一项
Arco Deisgn 省略页面标题的方法，也不是什么情况都适用。
如果页面比较难理解，那么把页面标题写大一些还是很有好处的，这样还能加上一些说明介绍。



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

Carbon (IBM)

Lightning (Salesforce)


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

Ant
这种省略面包屑最后一项的做法，就要求必须有页面标题，不然用户就不知道自己在哪了。
没有 Arco Design 直接省略页面标题那么激进，但是至少不会出现面包屑最后一项和页面标题重复的情况，看起来比 Ant Design 要简洁一点。
P.S. 仔细看看 Arco 这个图例中，面包屑最后一项似乎和当前页标题不同，但是这个加粗字的样式，还是让人感觉最后一项就是当前页。

Arco


如何选择？
这些方式各有各的道理，没有说哪种就一定好，哪种就一定不好。
例如 Ant 的方式，虽然会把页面标题重复三次，但这是最好理解的方式，适合偏传统的 B 端产品。
Arco 省略标题的方式，适合每页模块较多，又追求轻量简洁的产品。

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


完成这个B端规范打卡后，我们即将开始 HMI 车载设计学习打卡课程，想参加的欢迎加入我们：




如果你只是想要多认识一些同行，也可以加入我们无广告的纯粹体验研讨微信群：







本文来自微信公众号“体验进阶”（ID：Advanced_UX）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。

TAGS:

相关文章