为什么初创公司需要风格指南

即使对于一个经验丰富的设计师来说，为给定的产品创建一个新的风格指南也很困难——有很多可能的设计方向，而且这个过程很快就会变得不堪重负。 创业生活是忙碌的、快速的，并且充满了诸如“完美是完成的敌人”、“快速行动并打破常规”或“现在启动，稍后修复”等陈词滥调。

在这样的口号和波动的优先级下提出风格指南具有挑战性，但如果产品的设计要长期取得成功，则必须这样做。

近年来，我们听到了很多关于设计系统、样式指南、模式库和原子设计的信息。 虽然这些工具非常有用，但当您只想为 MVP 创建几个屏幕或演示应用程序时，使用它们似乎有点过头了。 但是，拥有样式指南不仅会总体上改善您的设计过程，还会使您的应用程序更加稳固和一致。

让我们先谈谈风格指南的主要好处，然后再谈一谈充满挑战的创业环境。 最后，我们将讨论样式指南如何始终作为活文档不断发展。

样式指南是个好主意的五个理由

1. 风格指南使设计具体和品牌清晰

作为初创公司的孤独设计师（通常情况如此），没有太多机会来审查和挑战团队中其他人所做的设计决策。 尽管每个人都可能在协作工作，但设计不一定与他人共享。 这意味着只有一个人验证最终设计。

样式指南将为初创公司提供指导和文档以供参考。 它将挑战设计师或团队做出的一些设计选择，因为它们必须在应用程序的全局环境中进行验证。 设计一个 UI 组件，因为它在一个屏幕上运行良好不会削减它。 一个经过深思熟虑的设计应该解决一种情况下的单一设计问题，以及在您的应用程序的其他屏幕上发现的普遍问题。

样式指南使您公司的每个人都可以使用整体设计样式、品牌指南、规范和规则。 只需单击一下即可。 他们可以通过 URL 轻松访问在线样式指南或下载 PDF。 设计成为每个人的工作——它不再是设计团队的唯一责任。 这是一种谨慎的方法，可以改善您产品的用户界面。

2. 样式指南使您的设计更加一致

它为您的 UI 设计语言提供了各种字典。 当你想传达你已经表达过的东西时，你可以使用相同的术语。 想象一下，如果我们用稍微不同的词来表达同样的事情：

1. “下雨了; 我需要我的雨伞。”
2. “下雨了，我需要我的雨伞”
3. “下雨了，我需要我的雨伞”

它可能使语言富有诗意，但难以理解。 从根本上说，这与网站或应用程序的 UI 相同。 为了便于使用，你应该只在你真正创造新东西时才发明一个新的“词”。 这样，您就会受到一条严格的规则的约束，即“只有在整个产品中反复解决设计问题的组件才允许进入产品，随后进入样式指南。”

一致性使您的产品更加用户友好； 一个高度可用的产品可以转化为更多的参与和销售。

3.重用相同的系统组件使您的应用程序更易于使用

与语言示例一样，一致性是关键。 一旦用户理解了每个组件，当在不同的上下文中再次使用时，人们将已经熟悉它的行为。 在用户交互方面，这种一致性提高了产品的整体可用性。

使用基于组件的设计系统可以节省资金，还可以使产品更容易更新。 如果某个组件在特定情况下存在可用性问题，则可以修复一次，并且该组件的所有其他潜在问题也将得到更新。

4. 从长远来看，样式指南使您的应用程序开发速度更快

当您的团队正在为屏幕开发一个通用组件时，他们正在开发一个他们也将在其他地方使用的解决方案。 这节省了很多开发时间。 当您的公司扩大规模时，这可能意味着节省多达 10 倍的构建新屏幕所需的工时。

5. 风格指南促进生产效率和创新

创建样式指南使公司的其他人员更容易访问和使用设计。 开发人员和设计人员可以更快、更轻松地制作创意原型。 Bootstrap 经常因使开发人员可以轻松创建工作原型而受到赞誉——您的样式指南具有相同的目的。 它为将由开发人员构建的新 UI 提供了参考基础，而无需设计团队首先创建屏幕（即使设计团队应对最终屏幕进行 QA）。

初创公司的挑战，Flux 中的风格指南

在启动环境中创建设计系统并不像在更成熟的公司中那样线性，他们习惯于更简化的流程。 在一家更传统的公司，设计团队进行用户体验研究、构思和实验，然后提出最终的品牌风格指南。 这个过程并不适合所有公司。 初创公司在他们的愿景和对产品的要求总是在不断变化的环境中工作。 他们使用 MVP（最小可行产品），他们的应用程序的不完整版本，用于测试他们的想法并向用户展示其潜力。

在创建样式指南时，这可能会成为一个问题。

在一个不断发展的环境中，设计师通常会努力创建一个应该有点“固定”的风格指南。 设计师可能没有时间彻底考虑所有正在创建的组件，即使它们最终可能仍会出现在应用程序的下一个版本中。 当他们成熟一点时，Facebook 以将他们的汉堡菜单换成标签导航而闻名。 你认为首先将汉堡菜单放在那里的人也将其添加到 Facebook 样式指南中吗？

您甚至可能认为现在还不是创建样式指南的时候。 您可能会意识到，从长远来看，您将需要一个，但现在更重要的是为应用程序的可用性测试制作屏幕。 此外，您还需要一些营销页面来推广您的应用程序。 突然间，您的设计需要升级，当您创建屏幕时，您开始看到拥有可以使您的设计和公司品牌保持一致的风格指南的价值。

问题是你不知道何时是用灵活性换取稳定性的正确时机。 你必须决定什么时候应该开始样式指南，什么时候应该只专注于创建屏幕。 最佳方法可能是在您交付屏幕的同时生成样式指南——这样您就可以两全其美。

从一些 UI 灵感开始

一个好的开始方法是收集你喜欢的设计风格的例子，或者更重要的是，收集你认为用户会回应的例子，特别是如果你不是设计师的话。 收集尽可能多的示例，并将它们放在文件夹/InVision board/Niice board/etc 中。 它们可以作为参考和灵感以及您的设计敏感性。 您可以稍后在它们的基础上创建模式库。

例如，当我为一家在娱乐行业推广艺术家的公司编写风格指南时，我们想知道浅色或深色背景是否会对我们的用户产生更大的影响。 我查看了数百个游戏/电影/视觉制作中的不同网站，看看他们如何使用深色和浅色背景。

我制作了一张参考表，其中突出显示了最常见的模式。 我发现的一种模式是，该行业的公司在展示其产品时倾向于使用较暗的背景，但在营销工作、电子商务和商店中使用白色背景。

您不必走得那么深，但我发现视觉参考不仅有助于创建样式指南，而且有助于记住您可能需要设计的一些用例。 一旦您对收集的参考资料感觉良好，您就可以开始进行视觉设计。

设计实体 UI 组件

在初创公司工作时，创建组件比创建页面更难——至少在开始时是这样。 当您设计一个页面时，您通常会知道如何使用它。 设计组件时不一定是这种情况。 您正在尝试针对特定用例进行设计，但您希望它成为通用设计系统的一部分，并且您需要以这种方式处理它。 例如，您可能想要创建一个包含三个按钮的子导航组件。 您可能还需要它来处理四个、五个或十个按钮，并且它需要在移动设备、平板电脑和台式机上工作。 你需要提前考虑。

您希望组件具有一定程度的持久性或持久力。 通用组件不应该经常更改，并且它们必须在整个产品的许多地方都可以重复使用。 例如，如果你只对 iOS 应用感兴趣，那么你想根据选项的数量或内容的长度来测试你的组件，而不一定是屏幕大小。 这个想法是，如果它在你的应用程序的许多地方的 UI 中都是可行的，那么你就知道它是一个有可能成为你的样式指南的一部分的组件。

一家初创公司需要从几乎一无所有开始，然后迅速行动。 您的老板可能想要在一天结束时设计一个屏幕。 这意味着您不能真正开发完整的样式指南，然后提出屏幕。 更糟糕的是，您可能正在设计一个样式指南，其中的组件永远不会出现，因为公司的愿景已经改变。 就像他们说的，最好现在发货。

创建出色的样式指南需要时间，而且因为它将成为您设计系统的基础，所以您希望将其做好。 在启动环境中，您需要协同处理您的样式指南。

风格指南作为活文档

您应该将您的样式指南视为一项正在进行的工作。 就像一家初创公司弄清楚它的战略一样，你会在你前进的过程中找出你的风格指南。 您将随着时间的推移对其进行编辑和调整，直到它成为您 UI 的基础。 一种有用的方法是在启动样式指南的同时启动第一个模型。 用你最喜欢的软件（在我的例子中是 Sketch）打开两个文件； 一个称为page name ，另一个称为styleguide 。 在您进行屏幕设计时，您可以开始使用构成您设计的元素来为您的样式指南播种。

当你开始做更多这些时，你会很早就注意到一些组件是包含在样式指南中的主要候选者。 例如，如果您已经确定了图标样式，那么您的所有图标都可以从一开始就进入样式指南。

我通常会创建一个名为“目前已完成的图标”的部分。 如果有人需要一个图标，他们首先必须在创建新图标之前检查此部分。

其他需要考虑的明显项目是颜色、按钮、选择器、标题、标题、正文等。如果您正在使用一种专门用于营销的样式，您可以考虑将其放入您的样式指南并适当地标记它。 如果您没有完全确定某个特定项目，那也没关系。 您可以稍后在机会出现时细化设计系统中的 UI 元素，并适当地更新指南。 别忘了，风格指南是一个活生生的文档，尤其是在初创公司。

最终，当我开始在指南中放置布局时，我知道我开始达到所有组件都应该接近其最终状态的地步。 这部分标志着风格指南创建过程的转折点——现在您可以庆祝了！ 庆祝这样一个里程碑的一个好方法是为 1.0 版本的样式指南创建一个徽标或图标（考虑命名）。

有些人甚至将徽标/图标打印为贴纸，这样团队就有了某种奖杯。 这也是我通常会回到更传统的使用指南的方式，首先打开该样式指南，然后为需要完成的任何界面创建一个新文件。

结论

作为设计师，通过尽早创建样式指南，您可以确保您的初创公司遵守更高的质量标准。 这可能具有挑战性，但值得付出努力。 一个坚实、全面的风格指南不仅可以帮助您获得更好的产品，还可以帮助您降低开发成本。

即使在快速做出决策并且有时设计需要快速更改的快节奏环境中，也有一种方法可以实现这一目标。 希望上述过程能够帮助任何初创公司的设计师应对复杂性和速度方面的挑战，同时为产品的利益创建一个坚固的风格指南。

• • •

进一步阅读 Toptal 设计博客：

• 电子商务用户体验——最佳实践概述（附信息图）
• 以人为本的设计在产品设计中的重要性
• 最佳 UX 设计师作品集——鼓舞人心的案例研究和示例
• 移动界面的启发式原则
• 预期设计：如何创造神奇的用户体验