Brad Frost 最近向我展示了他其中一个演讲的幻灯片。他有一些图表展示了样式指南在团队流程中可以适应的不同方法。正如你可能想象的那样,仅仅拥有一个或没有一个样式指南,就会决定它的有效性。
我想我会根据自己的经验,尝试解释我对这些方法的看法。
旁观者

或者我们可以称之为“事后”模型。其理念是,你拥有一个样式指南,但它是一个独立的事物,存在于实际流程之外。你必须单独维护和更新它。除非你花时间去做,否则网站的更改不会反映在样式指南中。除非你这样做,否则样式指南的更改不会反映在网站中。
作为参考有用,也许吧。我曾经在一个这样的样式指南上工作过。它一开始就进展缓慢,很快就被放弃了。
独裁者

在这种方法中,样式指南就是法律。任何不属于样式指南的内容都不会投入生产。如果网站上需要某些内容,则将其集成到样式指南中,然后即可在网站上使用。
当然,样式指南的采用率很高,因为它必须如此。所有内容都已记录在案。这些都可能是好事。这也可能令人沮丧——流程可能会变慢,这令人遗憾,因为速度是首先使用样式指南的重要原因之一。
还有一个危险是,你是在“设计样式指南”,而不是“设计网站”。
嬉皮士聚落

一切都是相互关联的,伙计。样式指南构建网站,但网站也构建样式指南。它只是一组资产,以不同的方式打包。一种方式看起来像样式指南,另一种方式看起来像网站。
这可能很好,因为你可以处理其中任何一个,并在两者中反映更改。这里唯一的潜在危险是,它可能好得令人难以置信。讨论可能会变得支离破碎。样式指南可能无法像你假设的那样保持更新。
排气管

在此模型中,你通常会在网站本身进行工作。样式指南是从生产资产构建的。它本质上成为测试的一部分。“在这些更改之后,样式指南是否仍然看起来正确且连贯?”这种方法的潜在危险是,由于样式指南位于流程的末尾,人们会停止关注它。
CodePen 样式指南有点像这样,但我希望使其更像嬉皮士风格。
答案
恐怕永远不会只有一个。
有关更多信息,请查看 StyleGuides.io 和 Brad Frost 和 Anna Debenham 的 播客。
这不是嬉皮士,而是整体!你唯一遇到的麻烦是,当一个不熟悉网络领域的 дизайнер试图行使管理控制权时,给所有相关人员带来痛苦,并最终产生难以适应和编码的含糊不清的垃圾。
很容易发现这些生物,他们倾向于穿不穿袜子的布洛克鞋。像瘟疫一样避开!:-)
话虽如此,跨媒体(即印刷和网络)设计品牌仍然是一项罕见且令人印象深刻的技能。即使在学士学位水平,也很少教授或讨论。我从尝试与设计毕业实习生的工作经验中了解到这一点,他们实际上毫无头绪,当被要求制作页面模板视觉效果时,会吓得一身冷汗。
除此之外(更贴近你的文章主题),在设计师和编码人员之间建立双向对话对于项目的成功至关重要。
作为艺术总监,我确实优先考虑并偏向于样式(包括 UX/UI),因为这应该由创意和营销团队在编码和功能生产方面之前预先确定。
最后一点:功能决定设计!Jony Ive,我在跟你说,还有你的狗晚饭叫优胜美地!
独裁者报道。我承认自己是一个控制狂,我遵循样式指南中设定的样式而生而死。我喜欢绝对值。我喜欢大量的预先思考和计划,即使是在看似简单的工作上。在一个将移交给几乎没有设计知识但希望自我管理的客户的 CMS 网站上,它为他们提供了成功的基础,因为他们已经对如何最好地使用从标题 1 到 6、按钮和其他他们将与之交互的元素有了很好的了解。更好的是,大多数这些内容可以通过 CMS 的所见即所得轻松设置,只需选择一些文本并从下拉菜单中选择“块引用”等,因此它确实被锁定住了。我们几乎从未见过任何客户管理的网站,它是一堵由全部大写粗体漫画字体组成的墙。因此,对于这些场景,它甚至可以成为一种教学工具。
独裁者。
如果它与已接受的样式指南不匹配——最好有充分的理由附加。否则,更改以匹配样式指南。
这是在不同媒体、同一网站的不同页面以及你的品牌信息中保持一致性的最佳方法。
网站的推出速度会变慢,但之后的维护会容易得多。每个程序员和编码员似乎都忘记了,维护最终将超过生产。
从长远来看,维护会占用更多的时间——即使最初的生产由于严格遵循样式指南而速度较慢。
拿出一支铅笔,画一个正方形。
相对边平行且长度相同吗?所有角都是直角吗?
根据你管理媒介(铅笔)的能力,它真的是一个好的正方形吗?
你会知道的,因为正方形的样式指南是你的一部分,你永远不需要质疑它,它只是你正在绘制的图纸的已知基底的一部分。
一位真正有才华的视觉设计师会给你这个基底,你迫不及待地想在 html/css/js 中实现它,而且,如果你真的很棒,你会在某种程度上知道你的渲染是否忠实。
你会得到一个完整的样式指南吗?不会。你会带着一个与其他面板范式不符的新面板回到视觉设计师那里。并且,如果设计师真的很好,他们会给你一个新的、更具特色的正方形版本。它会非常“正确”,以至于你会带着更大的热情跑回你的键盘,心想,“浮动!不!内联!不!内联块!是的!!!”
所以样式指南有一个位置,但它包围、支持和启发。而且你根本不必担心维护,视觉设计师会自动完成这些工作,因为他们会响应你的持续需求。
在现实世界中确实是这样运作的——但前提是你必须有一个很棒的视觉设计师,并且只有在你能够做出回应的情况下……
我发现将“独裁者”和“旁观者”混合使用效果很好:你可以分阶段更新风格指南,基于上一轮的设计迭代。这是“旁观者”阶段。但它会成为下一阶段的“独裁者”。一开始不要太独裁,随着内容的完善,再逐渐加强。否则它就无法完善。在早期,它只是起到指导作用,但有一半时间会被忽略。
可以称之为……“后座司机”?
我认为这是一个存在很多争议的话题。老实说,我认为风格指南对于大型项目很有用,但对于快速开发的项目来说,它们往往不会被使用。
然后就会出现丑陋的垃圾……我认为项目的进展速度在一定程度上取决于参与人员的技能/经验。我见过的大部分失败的项目,只需要在项目开始时花一两个小时,并在结束时花一两个小时来正确完成工作即可(这通常是因为一开始的额外一两个小时的准备工作可以解决沟通不畅和误解)。
从根本上说,由于这是一个关于CSS的网站,我们谈论的是设计师和前端开发人员之间的联系(如果他们是不同的人)。我只会与真正理解设计的开发人员合作。我总是对那些会使用CSS,却不懂设计的人感到惊讶。他们往往会做出糟糕的CSS。
基本上处于暂停状态,我非常喜欢这个网站,主题不错。
我是一名老师,我不维护或实施生产站点,所以无法真正评论团队方面的情况。对我来说,风格指南是设计阶段必不可少的沟通工具。SGs 为设计师和客户提供了便捷的协作方式。一个好的风格指南是这个过程的产物。我提到这一点是因为我最近了解到风格瓷砖(styletil.es),哇!这个概念太棒了——我忍不住要分享一下。
嘿,Chris –
感谢你提出了一个很棒的话题,因为我参与了几乎所有提到的变体。除了你概述的模型之外,还有另一种方法似乎可能有效,我目前正在研究它。我今年参加了SXSW互动大会,并参加了一个名为“风格框架”的小组讨论,由Tonic3的@martigold主持。除了她必须即兴发挥幻灯片(没有投影仪)之外,她还为这场对话带来了大量见解,我觉得确实触及了我们所有人对风格指南的斗争。也就是说,没有人想要规范的标准,因为它们不会被使用。
她的演讲围绕“风格框架”展开,你不会预先定义乐高积木(例如,创建包含实际尺寸的规范文档),你只需创建组件或积木本身。
与其说是独裁统治,不如说是共和国,每个人都有自己的股份,并对他们热衷的部分负责。(例如,你喜欢手风琴?太好了。你在框架中拥有手风琴,等等)。所有权就像一个数据中心,每个人都在根据需要贡献/填写内容。每个人都拥有一个标准,而不是标准本身。来自UX、开发、营销和PM的参与都非常重要,这样就不会出现孤岛现象。
她创建了一个可以免费下载/共享的网站:http://www.styleframework.com
我也喜欢该网站的组织方式,因为它可以作为构建自己的风格框架的模型。除此之外,她还使用了诸如“此[组件]试图解决什么问题”、“资产位置”、“所有权和治理”、“评论和问题”等标题。我强烈建议大家参考一下,获得灵感。她的幻灯片在slideshare上也可以在线获取。
再次感谢你发表了富有洞察力的文章。
Anthony Rezendes
@arezendes
感谢你,Chris,感谢你的文章。在我之前的一个项目中,它一直是我的“独裁者”,之后又变成了“旁观者”和“排气管”的混合体。实际上,这也是我将指南纳入文档流程的原因之一。现在,我们确保它更偏向于“独裁者”。
我确实认为“嬉皮士殖民地”模型最有用。我通常会编写一个页面,然后添加CSS,然后根据几个网页的总输出创建样式手册。在这个阶段,我处于“旁观者”模型中。随着网站的增长,我开始将CSS规则缩小到更像“排气管”的模型,直到它成为成熟的“嬉皮士殖民地”。“旁观者”模型往往是从几个网站使用的规则中发展而来的。由于这些主题不同,因此需要一段时间才能将一个主题网站的规则缩小到单个网站的风格指南。我有很多清理工作要做才能开发出我的成熟“嬉皮士殖民地”,但这正是我对未来网站的目标。
对于我作为小企业所做的网站,我发现你的模型表达了我一路走来学到的经验教训。对我来说,风格指南是我所有网站的有用起点。此外,我是我网站的唯一编码员,因此我可以根据自己的喜好使用和滥用我的风格指南。即便如此,我仍然发现需要一套基本的风格指南,我可以轻松地修改它们以适应新网站的主题。
感谢你对这些模型的概念化。它有助于阐明我过去的行为,并可以使未来的行为更有效——一旦我真正清理了我的样式表!!
在WGU,我们使用“排气管”方法,尽管存在局限性。当您为转化测试和多个部门目的创建数十种实验性设计元素和样式变体时,您网站样式的很大一部分是短暂的。我们网站样式表的一部分被标记为实验性,这些内容最终可能会或可能不会进入官方风格指南。
作为一名设计开发人员,当一个通用的风格指南已经完成并且可以快速应用于网页时,我获得了最好的结果。这应该在项目生命周期的第一季度完成。然后,随着开发过程中的需要,应分配预算设计师来生成概念以适应总是出现的特殊情况。
设计过程往往会占用过多的时间,导致开发人员在设计师离开加入另一个项目后进行清理。让设计师与客户迭代几个概念比让开发人员迭代要便宜得多,因此他们必须一直可用到最后。
因此,我的首选方法可以描述为“嬉皮士监狱殖民地”:一个哑铃,左侧是通用风格指南设计阶段,右侧包含“嬉皮士殖民地”。该项目可以从彻底的设计探索、较长的开发周期以及锁定在项目中的设计师来支持开发人员中获益。