【B端设计师必看：聊聊B端两大设计系统典型页面】_傻大方

按关键词阅读：

编辑导语：有效地利用B端设计系统，产品设计师将可以更高效地做出更好的交互设计。那么前段时间发布的Arco Design设计系统，和已有的阿里Ant design系统，二者有什么区别呢？本文作者对两大设计系统典型页面发表了他的看法，一起来看一下。
B端设计师必看：聊聊B端两大设计系统典型页面
文章插图
一、简介前两周字节发布了自己的中后台设计系统 Arco Design，在仔细阅读官网文档了过后，想和大家聊聊我自己对于 Arco Design设计系统的与阿里的Ant design的一些对比和差异分析。
B端设计师必看：聊聊B端两大设计系统典型页面
文章插图

文章插图
ArcoDesign 是一套设计系统的简称，是基于字节跳动所有的中后台产品。ArcoDesign 主要服务于字节跳动旗下中后台产品的体验设计和技术实现，主要由UED设计和开发同学共同构建及维护。
Ant Design是阿里打磨出的一个服务于企业级产品的设计体系，通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。
B端设计师必看：聊聊B端两大设计系统典型页面
文章插图
二、总览Ant和Arco两者的前端框架都是基于React和Vue，设计价值观和设计原则也有所不同。Arco Design 基于「清晰」、「一致」、「韵律」和「开放」的设计价值观，试图建立务实而浪漫的工作方式。在「设计价值观」的坚持上，Ant Design 有四点与众不同：「自然」、「确定性」、「意义感」、「生长性」。
我的个人理解Arco Design是站在设计规范的基础出发点考虑，希望给用户传递出来的价值出发，让用户深刻感受到系统是「清晰」、「一致」、「韵律」和「开放」的，而Ant Design所传递出来的价值观似乎更加玄学或者说格局更高，上升到更高的思维境界，即大自然思想和社会责任。
当然这部分的内容相对比较虚，每个人侧重点想法都不同，大家可以自己去理解一下这部分内容。
B端设计师必看：聊聊B端两大设计系统典型页面
文章插图

文章插图
三、B端典型页面分析接下来会从工作台、表格、表单几个典型高频的B端界面进行分析，看看两者的差别。
1. 工作台1）布局
Arco的卡片列布局灵活，基于24栅格进行布局，将整个栅格区域2:2:1的比例进行分割，信息卡片的宽度根据栅格宽度进行自适应，这样的工作台页面既灵活也能够满足业务需求。
Ant的卡片列布局采用3:2比例进行布局，同样是基于24栅格。目前主流的B端页面都是以24栅格为基础进行设计。3:2还是2:2:1这两种卡片布局方式没有绝对的优劣，主要是根据我们页面的信息量以及行业属性去确定。如果工作台所展示的单个信息量较多可采用少列大宽度进行布局，满足信息展示的最优布局。
作为B端的工作台页面，核心诉求是能够清晰找到用户想要的信息，想要做的内容，所以我们设计师要优先保证用户能够快速定位到核心的信息，快速到达要到达的功能。
2）信息展示
Arco针对同系列的模块设计了两种尺寸的间距，例如欢迎问候信息与下方的数据信息之间是大间距，数据信息与下方的团队动态最近项目之间是小间距。
格式塔心理学的接近原则指出：接近的事物会被认为是同一个整体，拥有相似的功能或特征。所以在这里设计师通过两种间距的留白对我们视觉进行暗示，强调信息之间的关联程度，便于区分信息层级。
Ant在卡片方面没有为卡片间距设置两种尺寸，从上下到左右都是一种尺寸，这样做的好处可以让视觉更加对齐，显得页面更加规整，不好的一点就是内容区域外间距与卡片之间的间距一样宽视觉上并没有聚焦，显得内容区域很散。标题方面没有进行加粗重色强调，将内容进行突出，使用户更加聚焦于内容。
B端设计师必看：聊聊B端两大设计系统典型页面
文章插图
3）导航方式
两个系统默认都采用侧边栏导航方式，侧边导航在国内的 B 端产品当中最为常见的。将菜单栏放置在左侧，页面布局上基本为左右结构，将导航菜单放置左侧固定。侧边栏导航扩展性强、展示灵活、能够快速定位，缺点是不易阅读、阅读沉浸感低。
B端设计师必看：聊聊B端两大设计系统典型页面
文章插图
Arco导航区域与内容区域都使用同类浅色，采用线的方式进行分割，整体视觉比较清爽。Ant导航区域使用了传统的重色与内容区进行区分。