Alice

最近,Arco Design 更新了他们的 Pro 页面,从之前的 1.0 更新到了 2.0 版本,其中更新了图标、字体、字重、页面布局、交互风格 等多方面内容。我们可以通过 Arco 的这次更新,使用前后对比图去窥探一下设计团队内部,他们究竟是如何进行B端页面的升级。

官方文档链接:https://bytedance.feishu.cn/docx/doxcneH4MAnUxcBvnLMuoywOp2f#doxcnaE2iEwuGmKcYVTvugYHveS

 

首先在 Arco 的飞书文档当中,写到这一次设计迭代的关键词为:清晰、轻量、真实、普适。

其实这一特点也是大多数B端产品所需要去做到的,我们来看看他在真实的页面设计当中有没有做到这四点:

 

清晰 – 优化视觉层级提升信息获取效率

这是 Arco Pro 1.0 与 2.0 工作台前后版本的对比图:

图片

能够看到这次前后版本的迭代,确实有明显的差异。虽然基础的页面布局变动不太,但是还是能够看得出来 Arco 的迭代的一些小思路。

首先是图标,在左侧导航菜单当中,增加了一级菜单的图标,看似是一个小更新,但是能够从中品出一丝细节,因为 Arco Pro 的核心是能够通过产品提供的页面模板,让程序员能够快速搭建,并且拥有不错的设计风格。因此需要在设计上尽可能去掉自己的独立风格,转而往通用上更进一步。增加图标,也更符合用户在去使用这些页面模板的初衷。

图片

同时在工作台 数据展示 图标的设计风格上,由最初的面型基础图标,更新到了带有高斯模糊的类3D风格的图标,在设计质感上确实会加分不少,也去翻阅了 IconBox ,并没有找到开源内容。不知道后续会不会放出完整的这套 3D 风格的图标设计(其实还蛮期待)。

图片

字体上,也做了一次不大不小的调整,细心的读者应该能够发现,在数字展示的字体当中,Arco 摒弃了之前的 Nunito Sans ,转向 PingFang 字体(这一点是通过两个设计稿对比得来,尚未证实,如果知道的小伙伴可以在评论区补充),并不是说 Nunito Sans 字体不好,我个人猜测是因为 Nunito Sans 安装的人数较少,需要有一种更为普适的方式。

图片

其次在页面布局上,现在这样的布局方式,明显会更加通用,原因在于 顶部的欢迎语加上右侧的 金额 等一些关键字段展示,很明显不是常见系统所拥有的,因此在设计的优化上,将其与 内容区块 进行融合,会是一个更加合理的选择。

图片

从工作台页面的整体设计而言,确实通过减少人物头像颜色对页面的视觉干扰;突出重要的数据模块;弱化右侧的快捷操作模块,将整个设计的视觉层级的信息获取效率得到提升。

 

轻量 – 更年轻的设计风格

图片

轻量主要体现在 Arco 的多维数据分析页面当中。

在设计风格上,主要引用了毛玻璃、半透明两个风格,并且增加暗黑模式。

首先是毛玻璃、半透明,虽然我一直强调B端产品尽可能少带有过多的设计风格,但是如果这样小范围使用,其实作为用户还是可以接受。只是在最后的代码还原的时候,能够看出还是遇到些许问题,很明显 代码层面与设计层面还是存在些许差距,那个非常明显投影,感觉像是不得已的妥协。

颜色上,其实感知不太强烈,只是觉得新的版本用色上会更加的肯定,因此这里的颜色部分就不做讨论。

至于暗黑模式,如果我没有记错的话,应该是推翻了之前 1.0 错误的暗黑模式逻辑(内容浅、背景深),采用与 Ant Design 类似的(内容深、背景浅)的逻辑,确实会比之前的暗黑模式更为合理。

图片

图片

关于真实与普适,其实就是对于图表交互 以及 基础组件的解释,可以展开的不多,更多都是一些从实际的项目当中提取出来的内容。

 

最后说说我自己的看法

其实这类 通用页面模板确实很难,首先需要基于业务,这样才能够知道用户究竟会如何使用,然后是需要兼容各种场景,才能够达到用户上手即用的效果,而它的迭代才是更难,需要从视觉的角度出发去分析页面存在的问题。很多读者抱怨B端没有任何的视觉发挥空间,其实可以不妨回过头去想想,现在自己负责的产品当中,是否能够进行调整呢?

 

原文链接:CE青年(公众号)

作者:CE青年

图片

转载请注明:学UI网 » Arco Pro 2.0 更新了啥?

登录收藏
 
你可能喜欢的:
做了近百个网页,总结的高质量设计方法做了近百个网页,总结的高质量设计方法
B端设计师必须要了解的3个工作方法B端设计师必须要了解的3个工作方法
这些设计小妙招,助力B端产品体验提升这些设计小妙招,助力B端产品体验提升
工作经验| B 端产品组件设计细节及经验分享(八)工作经验| B 端产品组件设计细节及经验分享(八)
瞬间之美-B端界面设计如何让用户心动瞬间之美-B端界面设计如何让用户心动
详解|响应式栅格系统,如何落地应用?详解|响应式栅格系统,如何落地应用?
后台审批流系统设计指南后台审批流系统设计指南
B端设计指南 - 快捷键B端设计指南 – 快捷键
数据可视化图表设计指南:圆环图数据可视化图表设计指南:圆环图
B 端设计法则B 端设计法则