撰写样式指南的人

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

您最近是否在考虑样式指南?在我看来,它似乎是当今最热门的话题之一。作为一位在普遍观点认为“想法不错,但这些从未奏效”时就尝试以这种方式思考和构建的人,我很高兴看到这种情况的发生。我怀疑样式指南和设计系统之所以流行起来,原因有三方面

  1. 基于组件的前端架构变得非常流行
  2. 范围样式的样式哲学变得非常流行
  3. 社区态度发生了转变,认为样式指南有效

最后一个对我来说类似于加密货币。如果每个人都相信其价值,它就会有效。如果人们停止相信其价值,它就会消亡。

无论如何,在我典型的咖啡和 RSS 早晨,我最近偶然发现了大量关于样式指南的文章,因此我认为我应该将它们汇总起来,供您欣赏。


如何与小型团队构建设计系统 by Naema Baskanderi

作为一个致力于 B2B 企业软件的小型团队,我们在时间、预算和资源有限的情况下深入研究了设计系统的创建……当您没有足够的资源、时间或预算时,您从哪里开始呢?

她的五条建议对我来说感觉很正确

  1. 不要从头开始
  2. 了解您正在使用什么(审核)
  3. 边走边建
  4. 了解您的局限性
  5. 保持井然有序

样式指南驱动的设计系统 by Brad Frost

我经常让团队在他们的设计系统计划的第一天建立样式指南网站。样式指南充当展示所有设计系统要素的店面,并充当整个工作的有形中心。


This Also 发布了他们的样式指南(如果您喜欢查看其他人的看法,这里还有数百个其他样式指南)。

对我来说,值得注意的是,它最接近我理解的“样式指南”的含义(与更多关于网站构建部分的设计说明的“模式库”或“设计系统”相反)。他们只包含对品牌最重要的三件事:排版、写作和身份。明智之举。

您撰写的任何内容都应该易于理解。写作的清晰度通常遵循思维的清晰度。花时间思考您要说什么,然后尽可能简单地表达出来。在代表工作室写作时,请牢记这些规则。


为系统设计奠定基础 by Andrew Couldwell

我使用“基础”一词作为设计系统和思维层次结构的一部分。将基础视为数字品牌指南。它们激发并与我们的设计系统相吻合,指导我们所有数字产品。

  • 在品牌层面,它们涵盖诸如价值观、身份、语气、摄影、插图、颜色和排版等方面。
  • 在数字层面,它们涵盖诸如格式、本地化、号召性用语、响应式设计和可访问性等方面。
  • 在设计系统中,它们是以下内容的基础,并涵盖以下内容的应用:文本样式、表单输入、按钮和响应式网格。

再次后退一步,更广泛地看待。是的,这是一个设计系统,但它与品牌价值观并存。


如何创建动态样式指南 by Adriana De La Cuadra

与标准样式指南类似,动态样式指南为应用程序的样式使用和创建提供了一套标准。对于标准样式指南,其目的是维护品牌一致性并防止图形和设计元素的滥用。LSG 以相同的方式用于维护应用程序的一致性并指导其实现。但使 LSG 不同且更强大的地方在于,其大部分信息直接来自源代码

一个简单的首要反应可能是:当然,我们的样式指南是“动态的”,我们并没有打算构建一个静态的样式指南。但我认为这是一个有趣的区别。几年前我写过,样式指南可以在您的开发过程中占据不同的位置

很容易创建一个置于场外或作为流程“尾气”的样式指南。将您的样式指南直接置于开发工作流程的中心,并且不允许任何旁路,这完全不同。


最后,Punit Web 汇总了一些最近发布的样式指南,如果您特别感兴趣于之前可能从未见过的最新样式指南,可以参考。