来自产品设计负责人的一些认识与看法。
Nedbank集团是非洲最大的金融服务行业之一，主要提供银行业务、保险、资产管理和理财服务。Nedbank集团目前已有131年的历史，资产总额达1万亿ZAR（南非货币），该集团拥有31000多名员工。
不过在企业环境中研发一个交互设计系统有很多挑战，最具挑战性的是集团高层与产品相关利益的股东们的心态，他们中没有与ui/ux设计相关的专业背景，也没有掌握对研发工作方面有着细微的了解。所以你需要有战略性的实现你的目标，不仅仅是需要开发一个设计系统，还要不断向高层管理和利益相关者保证这个项目是可持续的方案，从长远来看它将会带来更多的利润和更快的投资回报。
一个设计系统不单是由几个前端组件和一个适应的图库组成。还需要精益文档和强大的用户体验来支持决策制定，力助项目成功。另外找到合适的合作伙伴一起工作也是项目成功的基础，在有着一定规模的设计和开发为关键的组织中，如果您的小伙伴没有具备这样的专业的系统知识，有可能会导致这样一个产品失败。
一个团队精神是否能强大，需要看团队的独立精神，有效采取主动性，并为这个团队项目承担一定的风险。并非所有的决策都像签字那样轻松，有时候会被告知在处理项目的过程中不必采取某些措施，就像“请求原谅比请求许可一样容易”，这句话确实开始在你作为问题解决者的角色中发挥作用。
如何开展合作
当处理一个现有的模式 / 特征时，最好的办法是与已经在这个具体问题上做了大部分工作的团队进行磋商和讨论，他们的参考会给你最深的见解和试验，作为你研究的基础。您可能会认为，在某个特定组件上的所有最佳实践都足以让您不去查看您的公司已经完成了哪些工作，但是有些组件已经远远超过了它们的基本用法，还需要从团队中吸取一点知识。
另外，像有深度工作的问题最好单独解决，或者只要有一名专家解决，如果向团队敞开心扉，会轻易左右您的时间线和价值观，从而无法按照项目进度完成。就我个人而言，如果对方拥有成熟的技能和知识，针对性的解决复杂问题是开展合作的最佳方式。毕竟您在解决某些复杂问题还不够成熟，但您对这些问题陷入困境的时候，总需要一个专业的人来拉你一把。
获得公司层面的认可和支持
在任何企业系统中，你都很难找到正确的方向，但最重要的是展现价值，信守承诺，言出必行。在我入职银行的一年前,设计系统的思想就被推广出去了，当时只是一个尝试，并没有真正被用到需要的地方。大多数基础的重要细节都被遗漏了，没有标准化的网格系统，没有完整的排版堆栈，并且所有为印刷而写的品牌指南，没有经过修改就应用到了数码产品上。
你需要用一些小的成效去赢得他们的信任，不管问题有多严重，都不能从开始就把所有的问题都告诉银行，然后便跳到最紧迫的问题上。你必须从解决财务影响很小但却能带来最大利益的问题开始。作为一个团队，记录下你所有的解决方案，然后再逐步转向较大的问题。诚实地说，这并不一定会变得更容易，事实上，在变得更容易之前，它会变得更加困难，但这会让你获得利益相关者的信任，并且逐渐获得更多的权利。有些问题不值得争论，记住你不可能总是按照你或你的团队认为最好的方式去做。重要的是要区分哪些决定是至关重要的，哪些决定你现在可以放弃，哪些以后可能会改变。通过给利益相关者提供他们现在想要的东西，未来，你将有机会在重要的问题上去说服他们。相信我，你需要你能得到的每一点影响力。
“固执己见，但灵活处理细节。——亚马逊CEO杰夫·贝佐斯
优化
其中一个主要关注点是识别重复的内部任务，从手动更新组件图像、文档、图标等方面着手。为了更好利用团队中的3个前端开发，我们必须腾出一些时间来关注新的架构。
组件图片被实际的开发组件所替代，从而取消了每周更新过时组件视图的需要。现在，文档遵循Dropbox Paper工作流程，其中，模板包含对组件所有需求的清晰大纲。团队不再需要召开数周的会议，讨论为什么组件文档必须包含在web上就能找到的所有内容，为什么将带注释的图像保持为低保真度，这样，只有在功能改变时才需要更新它们。
工作中遇到的问题和解决方案
1-栅格系统
一个现象是，很多UI设计人员没有使用栅格系统，而使用栅格的设计人员又没有遵守对齐规则。由于一些项目在栅格上做了大量的工作，使得遵循栅格更加困难。我咨询了公司所有的设计负责人，把他们使用的属性和值放在一张表中对比、计算它们的平均值。这让我了解栅格系统应该做成什么样。其中有一些团队在某些值的设定上基本一致，而其他值则稍有差异。X团队的栏间距（水槽）为30px，这接近我们的理想状态，于是我询问其他团队是否愿意对栏间距做出调整，我将优先帮助有需要的团队解决问题。
给出建议，接受反馈。确保你在于团队沟通时，贯穿始终地保证他们的最大利益，你的工作是让他们的工作更容易。
2-排版系统
其中，一个团队排版文字的规范从h1到h6没有明显区别，信息层级也没有从全局考虑。由于他们非常坚持原有的字体粗细比，我们妥协了，于是我们记录了他们对当前的排版的印象，开始尝试从调整颜色着手，通过使用浅灰与深灰来修改层次结构。解决排版布局不仅保留了团队的诉求，同时又修复了信息层级。
有一次，我的任务是完成一份响应式排版规范，它可以根据每个浏览器窗口的大小进行缩放。这包括了大量的计算以及目测，以匹配最佳的效果。我强烈认为，解决方案应该控制在四个以内，这既减少了设计和开发所需的工作量，又减少了未来可能发生的错误。
将设计与开发间的复杂问题简化能减少很多未来可能发生的错误。
3-间距系统：
为了让使用者更清楚每个组件都有多个组合场景，设计规范应该为每个组件提供间距规则，比如组件与文字或段落一起使用时的规则，以及其中哪些间距是可以灵活修改的。然而，这是一个几乎无法实现的任务，即使我们试图列出所有目前的规则，也会有加不尽的新规则，而且间距文档总是不能保证及时更新到最新。
不过解决方案其实很简单，间距系统可以归结为两个方面：关系和信息层级。也就是说，放的越近的两个组件，关系和信息层级就越接近（格式塔）。
4-色彩系统
我们沿用了许多在Nedbank使用多年的颜色，品牌指导方针的问题是大部分颜色是为打印选择的，在设备上看显得有些不足。我们采用了两种基本的品牌颜色：Nedbank Heritage Green和Nedbank Grass Green，并进行了一些无障碍性测试。我们的草绿色在小而薄的文本上阅读性较差，幸运的是我们可以用品牌原设定灰色来替换。不过，灰色也需要调整，说服品牌方后，我们在设计系统上进行了大约3次颜色调整迭代。最终的结果是一个wcag 2.0等级的表格，表明颜色可以用于印刷和背景。
5-组件文档：
不要只查看几个组件就构建一套组件系统。您需要对所有组件如何组合在一起有一个总体的概念，这一点至关重要。记录您常使用设计规则，以便在其他类似的场景中应用统一规则。
设计系统的价值很大程度上在于它的组件文档。首先要做的是建立一个模板，为重复出现的信息创建一致性，并花时间创建一个清晰的信息层级。保持组件文档的易读性，我看过有的文档查阅起来非常耗时，它们是以其内容的数量而不是其内容的质量来衡量的。但请记住，您的文档应该易于扫视，用户需要尽快找到相关信息，而不是看一篇大学论文。
对长篇文档做简化是非常迅速的。如果你做了一周的研究，而实际上只有5%的研究是有用的，那就不要太珍视那些无用信息了，请将它删掉。
为了减少团队合作中的错误，请仔细检查文档，并确保设计协作者对你想要达到的目标有一个深刻的理解。
6-模板：
设置模板很重要，这样设计师们就不必每个界面都从零开始设计。我们会基于一个基本模板开始设计，模板包括栅格组合、全局导航和底部标签栏。随着项目进行，会添加404页面、OTP、条款与规定和其他模板。
7-低保真原型：
设计一个低保真原型用来诠释高层级的功能是非常有必要的，因为以前每次一旦有细微的设计变动发生，标注图都必须随之更新。这不仅仅是对设计师的时间的一种浪费，对开发者来说他们同样需要重新编程页面。我们打造了一个基础的低保真UI成套工具（轻量级、模块化的前端框架）用来创建抽象组件，这不仅仅提升了进程，也使功能设计更清晰，而不是像很多同行一样还把注意力放在陈旧的设计组件上。
8-线框模板：
和低保真设计相似的是，设计系统需要一种设计语言建立线框。我们需要解释很多复杂的流程，我相信作为设计师你可以使它们更易用，更有趣。很幸运的是，设计团队有一个很有天赋、很厉害的用户体验设计领导（Jacques Louw）（非常幸运的是，设计团队拥有一个非常有才华和强大的UX领袖人物，） 他的学识和搜索能力至关重要，使商家和设计师们信服我们的决定。如果我们没有以精心设计的样式呈现用户流程和示意图来供设计师欣赏，那么大多数信息就会被忽略。
9-图库
银行类产品使用了很多个不同的图标库，其中包括一些收费的图标库。大多数图标库不会为你提供银行所需的财务类的图标，因此我们跟设计师沟通并让他们对项目的图标进行设计，然后实时截图反馈进行沟通，在没有相关设计工具可以打开文件的情况下，截图是最简单的能够达成我们想要结果的沟通方式。然后，我们在16x16大小的图标网格上用1px的笔画进行图标绘制，这样当图标和超链接一起使用的时候也很方便阅读。
最后我们得到了一个由100多个图标组成的完全原创的图标库。除了图标设计，我还构建了一个简单的命名规范，和一个用于Web、iOS和Android的自动导出选项的开发流程。我们将很容易地通过网络更新现有的图标。我们接着把图标制作成字体库，这意味着我们可以快速更新任何现有的图标，设计师和开发在更新图标的时候就可以摆脱逐个逐个更新的低效方式。
10-绘制过程
开始图标绘制的时候，必须要把图标的笔画对齐到像素网格上，以便于我们可以便捷地将各部分形状合并出新的视觉效果和颜色背景。另外，还必须向设计师学习如何优化和清理SVG图标，以及了解如何构建和思考动态图标的效果。
11-动效：
如今对动画的需求越来越明显。我以前用Airbnb的lottie库处理过很多动画，同时可以实现在Web,iOS和Android，这是个非常棒的解决方案。我为银行项目的一个动效设计师做了一个基本的HTML容器，并让他用bodymovin插件为我们的一个插图制作动画，然后导出JSON文件放进去。结果超出了我们创意总监的预期，我们最终找到了从图形到动画，以及平台发行端到端的解决方案。
12-测试模版库和代码库：
不要等待其他团队对问题给出反馈，作为一个团队，每个人都有责任使用并检验他们的产品。你认为厨师在食物送到客人之前自己没有亲自试过吗?我们在自己的工作中发现了大量的问题和错误，只有通过积极地测试和检查自身的工作，我们才能向银行提供高质量的组件和代码。
13-资源中心：
我们收到了多个对公司从入职培训到业务流程信息的请求，这些信息都要放在设计系统中。但是对于为什么要构建这个产品缺乏了解，此时重要的是要保持设计师或开发人员的任务相关的信息，而不是仅仅将这个平台用作所有其他文档的垃圾场。（作为一个设计师或开发人员，保持与任务相关的信息是很重要的，而不是仅仅把这个平台当作所有其他文档的转储平台。）解决方案是一个名为资源中心的专用页面，其中包含指向多个Dropbox文件夹的出站链接，允许不同部门存储相关策略和文档。这个解决方案不仅避免了从设计系统开发人员那里拿走所需资源，而且其他部门可以自由地更新和向其专用空间添加这些内容。
结语
对于那些正忙于构建设计系统或考虑开始的人来说，这里有一些重要的经验可供参考:
· 在实现目标的过程中要讲究策略。
· 找到合适的人加入设计系统中。
· 有时候，获得原谅比获得允许更容易。
· 当某人已经做了很多基础工作的时候可以进行协作。
· 如果支持方拥有成熟的技能和知识，那么结对可以很好地解决复杂的问题，否则您最好独自解决。
· 先让利益方获得他们目前最需要的，这样以后才有机会展示更多更重要的东西。
· 不仅优化你自己的工作流程，还要优化整个团队的流程。
· 当多个团队已经设计了某个东西时，将所有有价值的方案放入一个表中，并找平衡的方案。
· 记住要简化解决方案，复杂的解决方案会导致复杂的问题。
· 您不能一次一个组件地去设计系统，您需要对所有构建块如何组合在一起有一个系统级别的视图。
（您不能一次只针对一个组件构建一个设计系统，你需要有一个完整的视图，看看所有的组件是如何组合在一起）
· 必须有文档模板。
· 当设计组件还没有那么成熟时，低保真的视觉效果是最划算的。
· 整合和创建你们自己的图标，只需要花很少的时间就能获得很大的收益。
· 指导插画师如何优化和清理SVG。
· 使用Airbnb的Lottie库实现跨平台的复杂动画。
