赞助商
立即赞助

聊聊市面上的「真伪」设计系统

UI设计3年前 (2021)更新 流光
2.3K 0 0

原子设计系统(均称为设计系统)这个词应该已经流行很久了,像蚂蚁金最的 Ant Design 3.0 说是基于「设计系统」进行构建的。如果你没有了解过原子设计系统,那么我建议先对原子设计系统做一个初步的了解。因为这篇章并是原子设计系统的科普。

虽然设系统这概念出了很久,但从设师的角度看,业界仍然存的「伪」设系统。什么这么?

设计系统是从 Style Guide 上发展出来个设计法论。所以设计系统其实并不是解决了「设计风格」这个问题,而是在尝试解决 Style Guide 在实践存在诸多问题。

先来传统运用 Style Guide 中存在的问题。

当明确一个设计需求,我们根据 Style Guide 进行规范化的设计,输出对应的一系列组件。果 Style Guide 中没有明确定义的时,能就自己创建一样式,最付开,能等到产品完上,才根据之前的设计结果修订 Style Guide 或者组件库。

整个实践模式如图示:

聊聊市面上的「真伪」设计系统

这种流程存在诸多问题,如组件库和 Style Guide 的更往往因为项目迭代速快而滞后;创建的组件与之前的 Style Guide 存在冲突;更组件库和 Style Guide 又要时间……

当然我这的基本都中小型公司, BAT 这样的公司不能包含内——一旦人多了之后,任何设的问题就都只变理的问题了。

而正是为这实践模存在诸多问题,效率上有待提升, Brad Frost 才会提出设计系统这个概念。值提是,Brad Frost 在 2013 年提出设计系统这个概念时候, 他团队有 4 个。我想也正是为团队小,才更加需要效率提升吧。

计系统提出的一个实践模式是先计系统,而后根据计系统来完成业组件库。如下图所示:

聊聊市面上的「真伪」设计系统

这个好不言,组件库业线可以同步更新,一次修改,便可以多端响应。完美解决 Style Guide 模式中存在的种种问题。

但是问题又来,怎么样才以现种践模式呢?用程序的说,设计系统应该抽取哪内容,分别让业务与 Style Guide 继承呢?

答案就是:模,组件,原子 。这是为么设计系统被称为原子设计的原因。

聊聊市面上的「真伪」设计系统

基于前面到的,设计系统中必须做到的一点是:当你改任何一个原子,你有自信他有依赖于这个原子的件全自更。只有满足了这一点,设计系统设想中的效率、解放生产才会真正实现。

我人猜测,Brad Frost 应该受到过 React 的启发,因 React 作端模块化发的鼻祖,其源时间 20135月,与文章中提到的 2013 吻合,同时 Brad Frost 端发者,必很了解React。

聊聊市面上的「真伪」设计系统

设计系统的落地关键

论的分讲了,接来是落地的键。只有到了这个地方,才够鉴别各种谓的「设计系统」到是是真的设计系统。

还记得我们之怎么的吗?修改设系统中的任何一原子,整系统都应该能够被响应到。

那么在 Sketch 有什么可以到这样效?,分享样与嵌套符号。

只有理利用了这个功能,才能真正达计系统的效果。如果在 Sketch 中没有实现式共享,仍然只是 Style Guide,算不上一个真正的计系统。没法全局响应就味着没法执行「先计系统,后业组件库」的流程。

让我们来看下现在风头正盛的 Ant Design 组件库。

聊聊市面上的「真伪」设计系统

聊聊市面上的「真伪」设计系统

可以,随便选取的一个颜色并没有任何共享式,这就味着如果去修改这些颜色,组件的式并不会跟着改变。

在查看完组件中的颜、字均没有对应的共享样式,基以断定 Ant Design 的 Sketch 文件并没有构成正意义上的设计系统。

聊聊市面上的「真伪」设计系统

聊聊市面上的「真伪」设计系统

凭的主观判断,这做的因可能有个:

  • Ant Design 团队内部有套设计系统更新工具,可以快速 Sketch 已存在原子进更新,是并不会以共享样保存。而为原,这个工具没有发布。
  • Sketch 文件发布之初就没有想过层面的颜色、字体等还会被替换,因此没有去置共享式。个人认为这种可能性会更大一些。

是不管我如何去揣测,个法全局更新 Sketch 文件,哪怕具有再多组件,于设计师来说,接使用价值也是常有限。 为设计师没法把这么多组件接、快速地复用到自己业务场景,那么这些所谓「设计系统」往往变成了单纯「参考图」,缺少工程使用价值。

实际上, Ant Design 对于开发者来说价值巨大,个人在做开发的候用起来也非常爽。但是对于计来说,真正的工程价值可能就只有「置行间距的候总是多个 16px 就好」之类的经验了。

而且乎上对 Ant Design 予以评的绝大部分是开者,而不是设计师。所以见一斑。

「伪」设计系统

除 Ant Design 之外,还有哪「伪」设计系统呢?我从网找到大概10来份设计系统的 Sketch 文档,一一做检查与测试。

1. IBM 的 Carbon Design

聊聊市面上的「真伪」设计系统

聊聊市面上的「真伪」设计系统

2. Shopify 的 Polaris

聊聊市面上的「真伪」设计系统

聊聊市面上的「真伪」设计系统

3. Salesforce 的 Lightning Design System

聊聊市面上的「真伪」设计系统

聊聊市面上的「真伪」设计系统

它只义了一主色,其他颜色字体都共享样式。

4. Atlassian Design Language

聊聊市面上的「真伪」设计系统

他们没有 Design System 自称,但是这里我放上来了。

聊聊市面上的「真伪」设计系统

Sketch 件中一样没有定义颜色的共享样式。过难得的是它做了字体和阴影样式的定义。

以都公司的 Sketch 文档。可以看到,基本出的设系统都「伪」设系统,对原子过良好义的很少。我究其原因还因不会考虑到供其他设师「复用」这些资源供自己的项目使用吧。我愿意把它们当披「设系统的皮」的 Style Guide。

更多设计系统可以从StyleGuide.io 这个网站上找,我不过是挑选了其知名些来测试。

「真」设计系统

我相信接下来内容大家可能会更加关心,真正称上设计系统有哪些呢? 为有这些设计系统才能帮助提升我们日常工作效率,让生活变更加愉悦。

1. UXPT

聊聊市面上的「真伪」设计系统

UXPT 全称 UXPower Tools,应该市面真的设系统中完整的一家了,同时 Web 、移动端的设系统,均可响应原子操作。

我在前文提到原子级颜色、体、阴影样等等这些都可以自定义,而改,所有组件能够步改。

拿修改颜色举个例:

聊聊市面上的「真伪」设计系统

可以当修改式并进行同步后,所有组件的式都进行了修改。

UXPT 用 Style Stacks™ 的方式现一次修改颜,端修改的需求。简单来说就是下图所示的样子。

聊聊市面上的「真伪」设计系统

另外还有几个很不错的特,比内容自适应、自定义符号等等。

聊聊市面上的「真伪」设计系统

△ 内容根据尺寸自适应

聊聊市面上的「真伪」设计系统

△ 基「分子」自定义页面内容

聊聊市面上的「真伪」设计系统

△ 阴影的样式也以做定义设置

还有开箱即的 Style Guide ,既有白天模式,还有黑夜模式。

聊聊市面上的「真伪」设计系统

这个设计系统好是好,过移端 + PC 的合集要 80 刀,还是稍微有点贵,在 Gumroad 上售卖。

2. Frames

聊聊市面上的「真伪」设计系统

Frames 是一个门针对 Web 的设计系统,同样以现原子系统中的一次修改,端复用。

我个人认为它最大的优势就是供了百个模的模页,可非迅速地展示页面。

聊聊市面上的「真伪」设计系统

聊聊市面上的「真伪」设计系统

△ 个视频展示的就是用模板页在短短几分钟内完成一个主页的设计。

Frames 中还供了一些可视的图表,但是这分的设计和复性都是特别众。

聊聊市面上的「真伪」设计系统

△ 图表

这设系统卖 48 刀,也 Gumroad 售卖。

3. Rojcyk 的 iOS Blueprint

聊聊市面上的「真伪」设计系统

iOS Blueprint 是一个专注于 iOS 的设计系统。在界知名蛮的,连 Sketch 官方都有报道它。

聊聊市面上的「真伪」设计系统

同时它的使指南做的非呆萌。

聊聊市面上的「真伪」设计系统

除了基本的 Library 之外,供了一些预先通的模,如登陆注册、忘记密码等等。改个颜色、改个名字基本上可开箱即了。

聊聊市面上的「真伪」设计系统

这个设计系统宜一些,Gumroad 上卖 20 刀。

4. Cabana

聊聊市面上的「真伪」设计系统

Cabana 是针对 Web 端的一个设计系统,我个人感它最大的特是用 8 点网系统。官网上个特也是一个展示。样一来在进行排版局的时能够很的节省时间与精力。

此外它还供了一些图像处的滤镜,可对图片进行快速处。

聊聊市面上的「真伪」设计系统

聊聊市面上的「真伪」设计系统

△ Cabana 的设计风略偏黑暗

我个人虽然大 Cabana 的格,过修改与自定义对于设计系统来说却是小菜一碟。设计系统之为设计系统,就是够通过原子层面的调整,页面呈现全一样的效果。

Cabana  Gumroad 卖 48 刀。

5. janlosert 的 Nested Symbols & Auto-Updating Styleguides

聊聊市面上的「真伪」设计系统

这个设计系统是上已有的设计系统中唯一免的存在。我个人猜测作者可是从 UXPT或者 Cabana 修改过来的。因为中一些标注么的都一样……

聊聊市面上的「真伪」设计系统

△ 右侧的 Overrides ,和 UXPT、Cabana 的标注形式一模一样

这设系统其他相比,功能其实什么特别的。可能的特点就「免费」吧。

这个作者配套提供了份 React 组件代码,在 Gumroad 上卖 9 刀。

6. Predix

聊聊市面上的「真伪」设计系统

Predix 算公司出品的设系统,但仍然这些设系统里面不友好的一。因它提供自义的「接口」,如果去自义就自己找相应的 Symbol 。

聊聊市面上的「真伪」设计系统

7. UIT

聊聊市面上的「真伪」设计系统

我厚着脸皮把自己基 UXPT 修改的设计系统贴上来。UIT 主要的贡献是做地化处理以及提供 Button 样式设计的自定义。

聊聊市面上的「真伪」设计系统

△ 一基的样式接口,直接修改几个主就以产出不同的设计系统

聊聊市面上的「真伪」设计系统

当时还做一下使用指,来因为比忙就没继续做下去。不使用方法其和 UXPT 一样。

UIT 基于 UXPT 修改,没法商,一开始做来就是为了习一设计系统的设计流程。

我以这些设系统对于小公司、独立设师以及新人的帮会非常。

设计系统已经完成了大部分组件定制,在实现业务不需要多考虑按钮圆要多大,距要留多少,可以更加聚焦于业务逻辑本身,节省时精力。

另一方面,计系统有的式定义能力,可以针对不同需求高效地产出对应的计系统,然后快速复用组件。

刚行的新人也以通套设计系统去学习与研究设计的逻辑与其遵守的规范,一背的设计理念。

最后再说些别的感想。

其实我人对 Ant Design 的望还蛮高的,科学的设方法与对细节的把控我都非常赞赏。不过可能也因望越,失望也越。AntD 对于发者非常友好,箱即用,但从拿到的 Sketch 文件看,团队似乎并考虑过如何帮非 AntD 的设师提升作效率,解产力。不知道还发布的 Kitchen 会哪些惊艳的表呢。

另,如 AntD 要成为设计界 Bootstrap ,可能未来需要做是能够完成原子与分子绑定,让设计师也能够享受到「开箱即用」体验。

相比起来,Airbnb 在「解放计生产力」这条路上的会更远一些。有兴趣的同学可以去翻一翻计队一篇《Sketch Interface》的文章,甚至在探索机器学习计系统的结,最终达绘制型图就能直生成业界面的目的。

聊聊市面上的「真伪」设计系统

之前在研究计系统的候, Airbnb 的 Alex Schleifer 说的这句话,触深刻:

Here’s the simple truth: you can’t innovate on products without first innovating the way you build them.

翻译过来大致就是:这是一个简的真理——如果不在方法层面有所创新,你就不可能在产品上有所创新。

我想我们研究设计系统也是此,改变我们原有的设计思想、设计方式,我们才能够以更加高效,更加优雅地姿态去创造新的产品吧。

在前端开发中有个词叫做「技术」,如果大公司的设计系统供原子层面的自定义,说定等到未来设计界会来一个「设计」这样的词。

欢迎关注作者的微信公众:arvindesign

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

Prototypr.io 这周带来了 23 款全新的设计工具!在疫情肆掠的这个阶段,希望这些优质的工具能够帮助大家更好、更冷静地工作和...
干货合集
这次的主题是用户引导和提示,它们都会打扰到用户,也有很多的共通点,就暂且归到一起集中聊一下。 先看一下整体内容: △...
Toast
编者按:我们看过太多游戏化设计的文章,其中太多内容都只是关于技巧,而很少从内核上把握游戏化设计。Eugen Eşanu 的这个新...
Eugen Eşanu
这篇译文来自 Matt Bond ,正是知名的 Atlassian Deisgn System 的创建人,真正的元老本老。《设计体系》一书当中也有多处以 ...
产品设计
Darren大人 :总结了一套引导页的设计思路,希望自己在新的一年能多学习总结,在这里和大家分享交流,大家也可以提出问题和建...
2.5D
设计师对于世界的影响是否是巨大的?这一点是毋庸置疑的。但是即便是优秀的设计,也通过大量的日常积累,一个又一个小步骤上...
Eugen Eşanu
怎么样的原型图才算是专业的原型图呢?文章总结了一些经验,希望对你有所帮助。文章分为上下两篇,阅读上篇内容→《超全面总结...
交互设计
每个人都在关注趋势。Dribbble 是设计师的集散地,也是设计趋势最容易体现的地方。如果你经常关注 Dribbble 上的那些设计作品...
2018设计趋势