#全部文章 68 个 #B端设计指南 29 个 一周前，Ant Design 更新了它们的 5.0 版本，看了发布会过后，本想等着发布会所涉及到的具体功能面市过后，体验一下再写文章。但是等着等着，很多内容都打上了 Coming Soon 的标签，那就不等了，今天就从发布会的视频入手，讲讲 Ant Design 5.0 的更新内容，以及我的看法。首先这次发布会分为四个板块，分别是缘起：简单回顾 Ant 的发展、设计目标 以及 资产状态系统元规范：对组件设计进行拆解，讲解这次改版关于组件部分的具体思路（推荐）设计工程化：讲解这个的工程化思路，这方面我并不擅长，所以就暂时就不讲解更美、更灵活：讲解 Ant Design 的视觉优化，主要是 颜色、字体、图标、圆角 ... 的调整。后续单独聊了聊非常神秘的 Pro Components（推荐大家查看视频） 当然还会有工程师来分享他们的研发思路，我们这群臭设计就先不聊研发的事儿~上面提到的内容在 B 站 up：支付宝体验科技 都有视频的回顾内容，如果觉得太长，我们也会拆开为大家一起聊聊。这里还是再次感谢 支付宝体验设计部 给大家带来的分享~~ 里面有很多非常棒的内容。Ant Design 5.0 的改版内容首先简单用 26 个字来概括这次更新的内容，颜色更蓝、字体更深、圆角更大、线条更少、按钮更易用、风格更多样。颜色更蓝：之前的颜色过于陈旧，于是乎由 # 1890FF 变为现在的 # 1677FF字体更深：最主要的字体颜色加深，由 # 000000 85%  变为 # 000000 88%，并且在特殊场景当中，会将 65% 也使用 88% 的颜色作为字体颜色圆角更大：圆角加大，由最初的 2px 一跃成为 6px （有点不能接受 ...）线条减少：减少线条的使用，使用区块来对内容进行调整，比如：输入框部分更多使用 底色去进行区分按钮更好点：增加图标按钮的点击区域，有点按钮的点击动画风格更多样：预设多种样式风格，优化单个页面的整体样式整体来看设计风格变化较大，一会儿我们会结合视频当中讲解的内容，帮助大家理解这次发布的新内容，并且注意到很多没有提起的细节。我们按照视频顺序，来给大家去做讲解：系统元规范丨讲解组件的设计与验证在元规范之前，还有一个缘起的视频，主要就是简单回顾，以及目前的项目背景，这里就不单独拎出来讲了。系统元规范的定义关于系统元规范，其实 梓义 讲述了一个非常好的思路：组件的边界究竟在哪？举了一个我经常在课程当中说的例子：两个完全相同的组件，Tab与锚点导航它们之间的差别是什么？正在阅读的小伙伴也可以思考思考~ 会在文章后面公布答案~分析了它们的差异过后，也讲到了基础组件与业务组件如何定义？（主要关于 日历）其实有点与我之前写的文章不谋而合，简单来说就是业务组件是可以随着不断发展变为基础组件，并最终做到页面当中的。关于业务组件，究竟应该如何理解~元规范就是就是能够帮助我们去确定：组件的有多少、需要做到什么程度、组件本身如何评估质量、以及业务表现的合理性。能够通过元规范了解到组件的后续发展思路。紧接着举例：如何使用纸箱设计一把椅子？我们可能首先想到的是各种奇形怪状的椅子，但是我们在设计时，考虑的更多是如何使用纸箱来满足用户坐着的需求。目的是分析：我们设计组件，其实是需要研究用户的行为，也就是用户通过组件你需要去做什么？比如日期选择：为什么要增加 快捷选择、浏览日期附属信息 的组件，其实是因为我们可以分析使用使用日期选择的 目的、行为快捷选择：其实就是因为在很多筛选的场景当中，我们会使用快捷选择来选择对应日期。比如 神策数据、简道云 产品里就会有对应组件设计。浏览日期附属信息：其实就是帮助用户在日期选择当中，查看更多相关的信息，用户信息展示。因此我们在去做组件时，可以将设计系统当中的组件行为部分进行剥离，要分析的不是组件样式，而是用户的行为目的。（由于日期选择目前的 Ant Design 5.0 没有更新，只能够去看视频的讲解）组件如何度量梓义 先讲解了传统的度量思路，比如：人机模型、数据埋点、问卷调研、用户观察，但是这些方法都是针对特定业务所展开的，不适合对于 设计系统 去做验证。这里引入了一个传统的验证方式：GOMS 模型这里简单补充 GOMS模型 的内容，1983 年 Card , Moran &Newall 在《人机交互心理学》提出用于评估人机交互界面好坏的方法。- Goals目标：指任务最终要达到的结果- Operations操作：在任务实现过程中所产生的行为- Methods方法：即实现目标的一系列操作过程- Selection rules选择：是用户要遵守的判定规则，以确定在特定环境下所使用的方法简单来说，就是将你完成任务的整个流程进行量化，然后进行分析，与之相似的是 KML击键模型，它是一种时间评估的方法，可以将用户的交互行为分解为几个动作- P：将鼠标指向屏幕的对象上- B（按钮按下和释放鼠标）- K（按下按键和释放键盘）- M（心理准备）- W（等待系统用户作出响应）操作的典型值了解了过后，再来看 Ant Design 给出的 GOMS-X 模型，其实就是基于以上两个模型理论而来，主要目的就是判断用户的操作时长。也就是说，他们在做设计验证的时候，首先考虑的是用户在这些组件当中，所花费了多少时间，通过减少来去验证这个结果。并且将这个时间进行分析，得到「元动作」的评估模型，针对不同的动作去做合理的优化。关于验证的思路如何落地，这里作者讲述了一个 多选按钮 组件的验证思路。也就是图一图二到底哪一个方案会更好？（大家也可以想一想）案例最后以一个案例作为结尾，关于 两个组件的设计方案对比这里会选择方案二，是因为方案一方案二的差别主要在按钮形态上，一个按钮选中过后需要挪动，一个不需要挪动。整体来看，系统元规范就是教会我们如何理解组件，并且分享了 Ant Design 设计师在设计优化组件时他们的一些思考，从最开始的产品，到最后的落地，都可以通过这里视频。分享的结尾很有意思，梓义 留下一个小作业，关于 3.0 与 4.0 日期时间段选择器，做出了什么改变？其实按照刚才的思路，就能得到结果。具体结果就在公众号文章的评论区里公布吧~更美更灵活由于 「设计工程化」 我确实不太了解，所以不敢妄加分析。我们就还是着眼于理解起来较为简单的「更美更灵活」。这部分内容围绕着视觉部分展开，主要是讲 Ant Design 视觉的“调整”，从 ：更聚焦、去干扰、轻松感 去调整设计页面。颜色更蓝颜色的改变，能够让页面更为聚焦。其实从设计来看就是将 Ant Design 的蓝色变得更深，由之前的 # 1890FF 变为现在的 # 1677FF 。单纯从视觉上来说，其实就是将页面的整体设计变得更深、更蓝；之前的蓝色确实给人感觉 旧旧的，比如与白色的字体搭配，按钮的凸显程度不够。更蓝过后，整个页面更为清晰，这个改动我认为还不错。字体更深加深字体颜色的对比度，由之前的 83% 变为 88% ，其实目的都相同，能够让重要的信息更为清晰，在页面上更肯定，所以在字体选择上，我们整体的页面设计也要做到这样的优化。只是在案例当中，出乎我的意料，Ant Design 也将部分 65% 的黑色字体去做了调整，也改为 88%，主要出现在 列表、警告提示、对话框 等等，都进行了调整。图标更易用图标上，在系统层面增加了图标的 hover 态的内容显示。由以前的只展示 hover 的颜色，变为现在增加背景色，并且图标还会随之进行放大，这是能说是一个小优化。之前就一直在吐槽 图标的 hover 态就应该使用背景去做呈现，就如同文字按钮一般，否则整体的设计不够准确。线条更少将页面当中的多数分割线个去除，取而代之的是通过间距来去做区分，这种方法非常的明智，因为 Ant Design 之前的组件当中，确实存在很多分割线，也就导致了线条割裂页面，目前的设计风格已经不太适合这中页面形式，因此需要调整。这个设计也非常不错~圆角更大2px 改为 6px ，圆角确实有些太大。说实话我最开始喜欢 Ant 就是因为它的 2px 圆角对于我来说刚刚合适。其实我刚开始是完全不能接受圆角的调整，因为对于我而言，我认为太大的圆角不适合 B 端产品，因此这个改动对我影响很大。随后 Ant Design 关于圆角说了它的优化，可以根据算法来去对所有的组件进行优化，也就是说可以通过算法优化回 2px 如果真是我想想这样的话，那我就觉得还不错~ 希望是这样~~视觉风格调整视觉风格就和我之前的预判一样，大家统一的方式都是减少页面当中的视觉层级，更多去凸显设计的内容。这次 Ant Design 在整体分享当中，多次出现了他们认为比较合理的页面设计，其中包含页面减少层级，减少过多的信息对于用户的干扰。并且关于视觉风格部分，会极少去使用颜色的分割，因为这样可以降低程序员基于组件搭建页面的难度（少给他们使用内容，别搞太多渐变）而这个趋势，目前也正在很多产品进行落地，关于视觉风格，可以去查看这篇文章，有所讲解。主题编辑主题编辑我认为是一个非常常见的需求，因为大多数企业都需要去做定制，那针对于一个领域设计系统来说，也必须做到如此才行。所以对于主题编辑我是举双手赞成。但是随着主题编辑开放，我遇到了两个问题：1.编辑主题过后过于卡顿。最近在进入 Ant Design 时，会发现进入页面时非常卡顿缓慢，这样也就导致了我开始怀疑这个功能的性能问题。2.编辑完主题过后不知道如何恢复。因为添加主题过后因为卡顿，想着恢复默认应该会好很多，但是找不到恢复的入口（有可能是我没有找到，大家可以在评论区说说入口在哪 - - ）结尾其实这次 Ant Design 5.0 的更新为我们提供了一个非常好的思路，看到了一个设计系统是如何一步一步去做更新，去做相应的设计优化。当然 Ant Design 5.0 的改版远远不止于此（篇幅有限，很多没法在文章上写），如果感兴趣的话，大家可以去到 B 站再去看看视频，了解作为一个 B 端设计师，我们究竟应该如何表达自己的想法。于此同时后续也会让我们的程序员先试用一下目前的 5.0 版本，看看到底会有什么问题，有问题后续再写篇文章来进行反馈~行，这就是这次 5.0 的全部内容，如果喜欢这种复盘文章，也别忘了 点赞评论关注~ 我是 CE 青年一个 2 B 行业的 2B 设计师如果对于系统的 B 端知识比较感兴趣，不妨了解一下我们的B端交互体验设计训练营 第六期，两个半月的集中学习，赶上金三银四的黄金招聘旺季，让你的 B 端设计不迷茫。课程已经开课，现在为报名的最后阶段，想要报名的同学一定要抓紧，感兴趣可以扫码了解课程详情或者查看课程完整介绍