目录
无处不在的手风琴
Bootstrap:熟悉的基准测试
探索引导程序的替代方案
选择设计系统:超越手风琴
公司特定的重点
可定制性的范围
首页 web前端 css教程 谁是设计系统?

谁是设计系统?

Apr 21, 2025 am 10:25 AM

谁是设计系统?

让我们谈谈特定的设计系统。尽管基础概念几乎受益于任何网站,但现实却更加细微。

设计系统目前正在引起巨大的嗡嗡声。最近,新的设计系统的公开版本促使一系列消息敦促我检查一下。我的最初反应? “看起来不错。”但这就像瞥了一眼一辆新车的外观 - 肤浅的评估。真正的理解需要广泛的使用,并与其建立多个项目,以真正评估其优势和劣势。

这提出了至关重要的问题:该设计系统适合我的项目吗?谁是有意的观众?

无处不在的手风琴

许多(尽管不是全部)设计系统包括手风琴。这不是偶然的;它突出了一个关键点。

Bootstrap:熟悉的基准测试

Bootstrap的广泛采用和理解提供了有价值的比较。它的CSS和HTML组件很容易集成,提供了直接的开发体验。

Bootstrap严格是“设计系统”还是“模式库”是有争议的。但是,这些术语的可互换使用强调了现有的混乱。

开发人员选择Bootstrap的原因有几个:

  • 加速发展。
  • 高质量的组件,对HTML/CSS专业知识较低的开发人员有益。
  • 强大的可访问功能。
  • [在这里插入您的原因]

这些好处虽然吸引人,但它已成为任何现代设计系统的标准期望,而不是引导程序所独有的。

探索引导程序的替代方案

许多开发人员寻求替代引导程序。原因包括:

  • 项目要求(例如,React集成)。
  • 难以定制引导程序。
  • 美学偏好。
  • 简单的无聊。

选择或拒绝自举的动机很多。

选择设计系统:超越手风琴

选择设计系统需要仔细考虑。许可是关键因素。 Salesforce的闪电设计系统(通常被称为领导者)已获得开源许可(BSD第3条,具有FONTIBUTION-SNODERIVITINT 4.0用于字体和图标)。该许可证阐明了其预期用途:主要用于Salesforce及其相关开发团队。虽然公开可用,但这并不是所有Web开发人员的通用解决方案。

为什么公开? Salesforce的规模需要内部和外部团队的可及性。公共可用性有助于协作并扩大其影响。

关于开源设计系统及其特定用例的讨论仍在进行中。考虑到设计系统的上下文特定性质,“开源”是适当的术语,还是“可用来源”更准确?

IBM的碳设计系统是另一种开源选项,明确指出了其目标受众:IBM设计师和开发人员从事IBM产品。尽管其他人可用,但其主要重点仍然是内部的。

公司特定的重点

公司创建的设计系统固有地首先满足公司的需求。开源许可并不能否定这一主要重点。同样的原则适用于政府开发的系统,例如美国网站设计系统,该系统优先考虑政府网站。

美国网页设计系统(主要是公共领域)是一种宝贵的资源,但其设计优先考虑政府需求,而不是个人开发人员。它的开源性质有助于社区贡献,影响对公共生活至关重要的网站。

可定制性的范围

设计系统提供不同程度的可定制性:

  • 零可定制性:执行严格的一致性。
  • 预先选择的变化:提供有限的自定义选项(例如,颜色变化)。
  • BYO主题:为广泛的自定义提供灵活的框架。

与Bootstrap不同,Shopify的Polaris Design系统虽然开源,但优先考虑内部一致性而不是广泛的定制。

Google的材料设计最初是用于内部使用的,现在正在积极促进外部使用。虽然最初实施Google美学,但它变得越来越可定制,可以集成品牌。像Lyft,Zappos和NPR这样的公司展示了成功的定制。

围绕材料设计的消息传递突出了开源设计系统的复杂性。对于Google和其他想使用它的人来说,这是同时的,这是Google的资源和品牌知名度所启用的壮举。

设计系统不是商品;仅基于美学的选择是不足的。必须仔细考虑许可,预期的受众和可定制性。

我对公共设计系统创建者的建议:明确定义了您的目标受众并允许使用。目标受众消息传递的解释差异很大,强调了清晰的沟通需求。

以上是谁是设计系统?的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

VUE 3 VUE 3 Apr 02, 2025 pm 06:32 PM

它的出局!恭喜Vue团队完成了完成,我知道这是一项巨大的努力,而且很长时间。所有新文档也是如此。

使用Redwood.js和Fauna构建以太坊应用 使用Redwood.js和Fauna构建以太坊应用 Mar 28, 2025 am 09:18 AM

随着最近比特币价格超过20k美元的攀升,最近打破了3万美元,我认为值得深入研究创建以太坊

您可以从浏览器获得有效的CSS属性值吗? 您可以从浏览器获得有效的CSS属性值吗? Apr 02, 2025 pm 06:17 PM

我有人写了这个非常合法的问题。 Lea只是在博客上介绍了如何从浏览器中获得有效的CSS属性。那样的是这样。

带有粘性定位的堆叠卡和一点点的杂物 带有粘性定位的堆叠卡和一点点的杂物 Apr 03, 2025 am 10:30 AM

前几天,我发现了科里·金尼文(Corey Ginnivan)网站上的这一点,当您滚动时,彼此之间的卡片堆放集。

在CI/CD上有点 在CI/CD上有点 Apr 02, 2025 pm 06:21 PM

我说的“网站”比“移动应用程序”更合适,但我喜欢Max Lynch的框架:

比较浏览器的响应式设计 比较浏览器的响应式设计 Apr 02, 2025 pm 06:25 PM

这些桌面应用程序中有许多目标是同时在不同的维度上显示您的网站。因此,例如,您可以写作

在WordPress块编辑器中使用Markdown和本地化 在WordPress块编辑器中使用Markdown和本地化 Apr 02, 2025 am 04:27 AM

如果我们需要直接在WordPress编辑器中向用户显示文档,那么最佳方法是什么?

为什么Flex布局中的紫色斜线区域会被误认为是'溢出空间”? 为什么Flex布局中的紫色斜线区域会被误认为是'溢出空间”? Apr 05, 2025 pm 05:51 PM

关于Flex布局中紫色斜线区域的疑问在使用Flex布局时,你可能会遇到一些令人困惑的现象,比如在开发者工具(d...

See all articles