关于我们
uesdTo.灵感博客是为包装界服务的设计创意平台。倡导包装业通过创新制造能力和设计推动兼具美学的可持续商业包装解决方案的发展。
加入我们
暗黑

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

作者:伯努瓦·夏伯特

原文地址:https://www.toptal.com/designers/ux/por-que-los-startups-necesitan-una-guia-de-estilo

即使对于有经验的设计师来说,为产品创建新的风格指南也很困难——有很多可能的设计方向,而且这个过程很快就会变得势不可挡。创业公司的生活非常忙碌,快速,充满了陈词滥调,例如“完美就是完成某件事的敌人”,“快速行动并打破事情”或“现在就启动,让我们稍后修复”。

在这种不断变化的口号和优先级下创建风格指南具有挑战性,但如果我们希望产品设计从长远来看是成功的,这是必要的。

在BBC全球语言经验(GEL)解释了每个组件的用途,它们应该如何使用。

近年来,我们听到了很多关于设计系统、样式指南、模式库和原子设计的信息。虽然这些工具非常有用,但当您只想为 MVP 或应用程序演示创建几个屏幕时,使用它们可能会让人觉得有些矫枉过正。但是,拥有样式指南不仅会改进您的整体设计过程,还会使您的应用程序更加健壮和一致。

让我们先谈谈风格指南的主要好处,然后让我们关注启动环境中的挑战。最后,我们将讨论样式指南如何始终作为活文档发展。

风格指南是个好主意的 5 大理由

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

作为初创公司中的一名单一设计师——这种情况经常发生——没有多少机会审查和挑战团队中其他人多次做出的设计决策。尽管许多人可能会协同工作,但不一定要与他人共享设计。这意味着只有一个人验证最终设计。

风格指南将为初创公司提供指导和文档以供参考。它将挑战设计师或团队做出的一些设计决策,因为他们必须在应用程序的全局上下文中验证它们。设计一个 UI 组件,因为它在屏幕上运行良好是不行的;一个经过深思熟虑的布局应该解决在某种情况下的单一布局问题,以及在应用程序的其他屏幕上发现的一般问题。

在BBC全球语言经验(GEL)解释了每个组件的用途,它们应该如何使用。

此应用程序的 UI 设计反复使用标题“联系人”,这是将其作为组件包含在样式指南中的理想选择。(作者Ivan Bjelajac在 Dribbble 上)

风格指南使您公司的每个人都可以使用所有通用设计风格、品牌指南、规范和规则,只需单击一下即可。他们可以转到某个 URL 以轻松访问它或以 PDF 格式下载它。设计成为每个人的工作——不仅仅是设计团队的责任。这是一种更谨慎的方法,可以改善您产品的 UI。

IBM 在线存储其“设计语言”指南,这使每个人甚至公众都能更轻松地看到它们。

2. 风格指南会让你的设计更加一致

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

  1. “下雨了,我要带伞。”
  2. “下雨了,我要带伞”
  3. “下雨了,我要带伞”

它会使语言富有诗意,但难以理解。从根本上说,它与站点或应用程序的 UI 是相同的想法。为了易于使用,您应该在实际创建新事物时组成一个新“词”。这样,您将受到一条严格的规则的约束:“只有在产品中以及随后在样式指南中才允许使用通过产品解决重复设计问题的组件。”

一致性使您的产品更加人性化;高度可用的产品转化为销售和更多的营销参与。

入职屏幕通常使用应用程序其余部分不存在的动画或视觉效果。它为设计师提供了创建新布局的好机会。(由Murat Gursoy在 Dribbble 上撰写)。

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

在语言示例中,一致性是关键。每次用户理解每个组件,当再次使用它并在不同的上下文中使用时,人们都会已经熟悉以前的行为。当涉及到用户交互时,这种一致性通常会提高产品的可用性。

Eventbrite在其许多部分中使用三图标布局。当用户再次遇到这些组件时,他们已经熟悉了它们的一般行为。

使用基于组件的设计系统可以节省时间,并使产品易于升级。如果某个组件在某种情况下存在可用性问题,则可以在更新该组件的所有其他可能问题后修复该问题。

4. 风格指南使您的应用程序易于长期开发

当您的团队为显示器开发通用组件时,他们正在开发一个他们也将在其他地方使用的解决方案。这节省了开发时间——事实上,节省了很多。随着您公司的发展,这可能会节省 10 倍于创建新屏幕所需的工时。

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

创建风格指南使设计更容易被公司的其他人访问和使用。开发人员和设计师可以更快、更轻松地对想法进行原型设计。Bootstrap 因使开发人员可以轻松创建工作原型而受到普遍赞誉——您的风格指南服务于相同的目的。它为开发人员可以创建的新 UI 提供了基础参考,而无需设计团队先创建屏幕(尽管设计团队应该对最终屏幕进行 QA 或质量测试)。

Shopify 的设计系统被称为 Dubbed Polaris

初创公司的挑战,不断变化的风格指南

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

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

在不断变化的环境中,设计师通常很难创造一种应该“固定”的指导风格。设计师没有时间真正考虑正在创建的所有组件,尽管它们可能会出现在应用程序的最新版本中。Facebook 在标签成熟时改变了他的“汉堡包”菜单导航。你认为把汉堡包菜单放在那里的人也会把它添加到 Facebook 风格指南中吗?

您可能还认为现在还不是创建风格指南的时候。您可能会发现,从长远来看,您将需要一个,但现在批量生产显示器更为重要。更重要的是,您将需要一些营销页面来推广您的应用程序。突然间,您的设计需要加倍赌注,而在您创建展示时,您开始看到拥有风格指南的价值,它可以使您的公司品牌和设计保持一致。

问题是,你不知道什么时候是用灵活性换取稳定性的正确时机。您必须决定何时应该开始关注样式指南以及何时应该关注创建显示。最佳方法可能是在您交付展示的同时制作风格指南 – 这样您就可以两全其美。

从一些 UI 灵感开始

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

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

星球大战前线 2游戏网站使用深色,而EA 的网站使用较浅的调色板。

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

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

不同的情绪板使用不同的参考。(来源:Summer Teal Simpson HitchVivek VenkatramanAmber on Dribbble)

设计实体 UI 组件

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

Operator风格指南指定了每个组件将如何根据视觉层次结构和导航做出反应。(来源:Dribbble 上的Kerem Suer)

您希望组件具有一定程度的持久性固定功率。通用组件的更改不应太大,它们在整个产品的许多地方都应可重用。例如,如果您只对 iOS 应用程序感兴趣,那么您将希望根据选项数量或内容长度来测试您的组件,而不一定是屏幕大小。这个想法是,如果它在你的应用程序的许多地方的 UI 中都是可行的,那么你就会知道它是一个有可能成为你风格指南一部分的组件。

Salesforce的防雷设计系统表示柔性组件如何以及它是否能能够适应移动接口。

初创公司需要从几乎一无所有开始,并迅速行动。你的老板可能想要一个为一天结束而设计的展示,这意味着你将无法真正开发风格指南,然后设计展示。更糟糕的是,你可能正在设计一个风格指南,其中包含永远不会出现的组件,因为公司的愿景已经改变。正如他们所说,最好现在启动。

Salesforce Analytics UI 套件是一个通用组件库,理论上可以在每个应用程序中重复使用。(来源:Eli Sebastian Brumbaugh

创建一个好的风格指南需要时间,因为它会成为你设计系统的基础,所以你想要把它做好。在启动环境中,您需要考虑到所有内容来制定您的风格指南。## 作为动态文档的样式指南

您应该将您的风格指南视为正在进行的工作。作为一家试图找出其战略的初创公司,您将不得不在此过程中找出您的风格指南。随着时间的推移,您将对其进行编辑和调整,直到它成为您 UI 的基础。一种有用的方法是在开始编写样式指南的同时从第一个模型开始。用你最喜欢的软件打开两个文件(在我的例子中,Sketch);一个叫nombre de página一个guía de estilo。当您设计灯罩时,您可以开始为您的风格指南植入构成您的设计的元素。

具有两个打开文件的启动项目示例。
左侧的样式指南和右侧的移动屏幕。

您对这些指南的工作越多,您几乎立即就会意识到样式指南中包含一些重要的组件。例如,如果您决定了图标样式,那么您的所有图标都可以从一开始就放在指南中。

我通常创建一个名为“到目前为止的图标”的部分。如果在任何时候有人需要一个图标,他们首先必须在创建新图标之前查看此部分。

SalesforceYelpMapbox都为他们的应用程序提供了广泛的图标库。您的样式指南还应包含在整个应用程序中使用的 UI 元素。

其他需要考虑的明显项目是颜色、选择器、标题、标题、正文等。如果您使用特殊风格进行营销,您可以考虑将其放入您的风格指南并适当标记。如果您对某个特定项目不完全确定也没关系,您可以稍后在有机会时优化设计系统中的 UI 元素,并正确更新指南。别忘了,样式指南是一份生动的文档,尤其是在创业公司中。

最终,当我开始在指南中放置布局时,我知道我开始达到所有组件都应该接近其最终状态的地步。这部分标志着样式指南创建过程中的关键时刻 – 现在您可以庆祝了!庆祝这一成就的一个好方法是为指南的 1.0 版创建徽标或图标(考虑命名)。

有些人甚至将徽标/图标打印为贴纸,以便团队拥有类似于奖杯的东西。这也是我通常采用更传统的指南工作方式的地方,即首先打开指南,然后为任何必要的界面创建一个新文件。

结论

作为设计师,通过尽早创建风格指南,您可以确保您的初创公司遵守相当高的质量标准。这可能具有挑战性,但值得为此付出所有努力。一份扎实、制作精良的指南不仅会帮助您拥有一个好的产品,还会降低开发成本。

在快节奏的环境中,有一种方法可以使这一点成为可能,在这种环境中,快速做出决策并且设计有时必须快速更改。希望上面概述的过程将帮助任何初创公司的设计师应对复杂性和速度方面的挑战,同时为产品的利益创建强大的风格指南。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

上一篇

设计过程:是客观的还是主观的?

下一篇

增加用户参与度的情感设计

相关文章