去年我读的几本关于设计系统的好书推荐

这篇博客对UI/UX设计师、产品经理、产品设计师和前端开发者可能很有用，如果你有从事这些角色的朋友或同事，请与他们分享这篇博客。当然，也可以作为一份新年礼物。随便说说 🥹!

要创造出有价值的东西，你就需要一个明确的目标。目标是在解决问题时形成的。要想解决利益相关者的问题，你得比他们自己更了解问题所在。所以你需要新的视角。读这本书能让你找到新的视角和方法来发现用户的问题，这样你就可以在心里构建一个解决问题的方法了。

1. 持续探索的习惯 - Teresa Torres

图片如下，点击此处查看图片。

推荐给产品设计师、产品经理、UX 设计师，当然也适合前端开发者或界面设计师。

这本书的几条笔记：

• 从终点开始想

• 机会解决树

• 定义、精简并优先考虑机会领域

• 优先抓住机会，而不是寻找解决方案

• 双向门选择

• 量的积累带来质的飞跃

• 测试假设而不是创意

• 影响效果的衡量

2. 打下基础 - 安德鲁·科尔德韦尔

设计系统101

这本书真正地谈论了设计系统创建。没有行业术语，不回避现实中的困难，也不为任何公司站台。只提供真实有用的建议、经验和实用技巧。

注:

怎么在公司里推广一个设计系统？

• 设计系统的使命、价值观以及原则

• 书里学到不少

我认为这本书极力推荐给UI设计师和产品经理，书中更注重实用技巧，并设定合理的期望值。我认为这本书非常适合这些设计师阅读。

3. 系统思维入门指南 - 作者：唐娜·梅多斯

系统思考：理解并应对复杂系统的入门指南
唐纳拉·梅多斯 撰写

以下是对本书主要概念的简要总结。

• 系统是什么？

  股市和资金流

• 反馈循环（反馈回路）、延迟效应、决策杠杆点

• 系统陷阱和机遇

• 思维模型：

推荐给产品负责人、团队负责人或开发者，以及任何喜欢系统的人。

4. 说明设计决定：

优秀的设计师也是出色的故事讲述者

• 读起来很容易,

• 本书主要讲的是沟通、会面、达成一致、理解客户需求或如何处理这些问题。

• 有些建议可能相当普遍，但能提供很好的情境。

推荐给设计师、产品设计师及自由职业者。

你在为谁和什么设计呢？你了解这个领域吗？你知道设计的基本知识吗？

1. 设计系统 - 阿莉亚·霍尔马托娃著作

注：
请看：

这本书很有视觉吸引力，结构也很清晰，例子很多，真是不错呢。

• 书提供了所有，包括模式、原则以及结构，使你能够开始创建设计体系

• 这本书挺短的，每章后面都有一些参考。

这本书非常适合设计师、开发者和产品经理，绝对推荐。我也很喜欢这本书，当然，我可能有点偏心。

2. 设计学院 - 类型设计

这本书是一本实用且视觉吸引人的指南，深入介绍了排版的基础知识及其在设计中的应用。

下面是对本书关键要点的简洁总结：

• 基础字体知识

• 类型层级

• 好吧，我喜欢这本书的设计

• 布局和网格中的字体排版

• 排版原则：

• 你快读这本书，真的很好

强烈推荐给各位设计师和产品设计师！

3. 设计学院 - 布局设计

嗯嗯，我先读了这本，然后我又读了第一本。我喜欢这些书的风格。

点击这里查看图片。

注

• 布局基础知识

• 网格和网格系统，

  布局设计

• 术语词汇

• 每章末尾还有一个测验知识的部分。真好。

我在布局理解和网格使用方面真的很差。这本书帮了我大忙，现在，我爱上了网格。这是一个很好的CSS网格教程。

创建一个连贯且有效的设计系统可不容易——这需要深刻理解设计原则、组织结构和协作。

1. 设计系统前端架构

适合开发人员、设计工程师、团队负责人和产品经理

（请参见此处的图片描述）

备注：

• 这本书现在有点老了，出版于2016，也就是Tailwind风潮之前。

  这些提到的 CSS 技巧都挺不错

• 一本充满真实生活例子的好书

• 在红帽公司（Red Hat）的工作中，我学到最好的一点是将设计拆解成设计系统的方法。因此，这种拆解方式是我学到的最佳方法。

• 正如俗话所说，基础始终不变，不过这本书会是个不错的复习材料，不过代码示例有点老了。

2. 为开发者设计的系统 —— 来自 Michael Mangialardi 的设计体系文章

适合开发者和设计工程师，就像一个创建设计系统的动手教程。

备注：如下

• 学会设计可扩展的系统

• 开发者的最佳实战指南：设计系统手册

• 深入研究如何命名、创建和开发设计标记（Design Tokens）

  • 学习风格词典的知识

• Tailwind 例子

3. 构建设计系统：作者为萨拉·韦塞洛夫和陶丽·戴维斯

推荐给设计师、开发者、产品经理和产品设计师。特别喜欢萨拉（Sarrah）和陶瑞（Taurie）的观点。

点击下方图片查看详细信息

注：

• 创建排版系统

• 一个易于访问的颜色系统。

  GitLab 的案例研究真的很棒

• 帮助你了解如何开放你的设计系统

• 喜欢共享的设计语言这个概念

4. 实用的网页包容性和无障碍性 - Ashley Firth

推荐给设计师、开发人员、QA、PM和产品设计师。

注：

本章将讨论残疾以及如何处理。

• 学学阿丽亚？

• 键盘易用性

• 屏幕阅读器软件介绍，包括浏览器内置版本的软件

• 在每章的末尾都有一系列参考材料，以便您可以更深入地了解相关内容。

• 在音频和视频标签中的样式提示信息，之前没注意过。

https://rtlstyling.com/posts/rtl-styling，这是在 CSS 中为 RTL 进行样式设计的详尽指南

5. 包容性设计模式指南 - 由 Heydon Pickering 撰写

推荐给开发人员、QA、PM和产品设计师

请点击查看图片

这里有一些注:

• 包含了许多关于无障碍功能的代码示例

• HTML的结构讲得很明白

• 检查文本是否易于阅读

• 其中一些提示非常实用，很有帮助。

• 解释不良习惯及其解决方法，使语言更加流畅自然。

• 每一章都有要避免的内容

• 测试访问性

读完全文或滑动屏幕的好处。如果您需要任何书的PDF文件，请发邮件给我 pratik@coolhead.in，我会和你分享。

支持我一下，来杯咖啡：https://buymeacoffee.com/biomathcode

想更多地聊聊设计系统吗？https://cal.com/biomathcode