srcmini本文概述
即使对于经验丰富的设计师来说, 为给定的产品创建新的样式指南也很困难-存在许多可能的设计方向, 并且过程很快就会变得不堪重负。创业生活忙碌, 快速, 充满了陈词滥调, 例如”完美是做事的敌人”, “快速行动并打破事情”或”现在启动, 以后再解决”。
在这样的口号和不断变化的优先次序下提出样式指南非常具有挑战性, 但是从长远来看, 要使产品的设计成功, 这是必须的。
英国广播公司(BBC)的全球体验语言(GEL)解释了每个组件的目的以及如何使用它们。
近年来, 我们听到了很多有关设计系统, 样式指南, 模式库和原子设计的信息。尽管这些工具非常有用, 但是当你只想为MVP创建几个屏幕或演示应用程序时, 使用它们似乎有些过头。但是, 使用样式指南不仅可以改善你的总体设计过程, 还可以使你的应用程序更加稳定和一致。
让我们先谈一谈样式指南的主要优点, 然后再谈谈充满挑战的启动环境。最后, 我们将讨论样式指南如何始终作为生动的文档发展。
风格指南是个好主意的五个原因
1.风格指南使设计具体和品牌清晰
作为初创公司的独立设计师(通常是这样), 没有多少机会来审查和挑战团队中其他人做出的设计决策。尽管每个人都可能在协作中工作, 但设计不一定与其他人共享。这意味着只有一个人可以验证最终设计。
样式指南将为初创企业提供指导和文档以供参考。这将挑战设计师或团队的某些设计选择, 因为这些选择必须在应用程序的全局范围内进行验证。设计UI组件是因为它可以在一个屏幕上很好地工作, 因此无法进行裁剪。经过深思熟虑的设计应在一种情况下解决单个设计问题, 以及在应用程序其他屏幕上发现的普遍性问题。
该应用程序的UI设计重复使用”联系”磁贴, 这是样式指南中包含的主要候选对象。 (由Ivan Bjelajac在Dribbble上发布)
样式指南可为公司中的每个人提供总体设计样式, 品牌指南, 规格和规则。只需点击一下即可。他们可以访问URL来轻松访问在线样式指南或下载PDF。设计成为每个人的工作-它不再是设计团队的全部责任。这是一种谨慎的方法, 可以改善你产品的用户界面。
IBM在线托管了他们的”设计语言”指南, 使所有人, 甚至公众都可以轻松查看它。
2.样式指南使你的设计更加一致
它为你的UI设计语言提供了各种字典。当你想传达已经表达的内容时, 可以使用相同的术语。想象一下, 如果我们用略微不同的词来表达同一件事：
- “下雨了;我需要伞。”
- “正在下雨, 我需要我的雨伞”
- “正在下雨, 我需要我的雨伞”
它可能使语言富有诗意, 但难以理解。从根本上讲, 网站或应用的用户界面是相同的想法。为了易于使用, 你仅应在真正创建新东西时才发明一个新的”单词”。这样一来, 你就受到一条严格的规则的约束：”只有在整个产品中反复解决设计问题的组件才允许进入产品, 然后再进入样式指南。”
一致性使你的产品更加人性化；高度可用的产品可以转化为更多的参与度和销售量。
入门屏幕通常会使用其余应用程序中没有的动画或视觉效果。它为设计师提供了创建新布局的好机会。
(由Murat Gursoy在Dribbble上撰写)。
3.重用相同的系统组件, 使你的应用程序更易于使用
就像在语言示例中一样, 一致性是关键。一旦用户理解了每个组件, 在不同的上下文中再次使用该组件时, 人们将已经熟悉其行为。在用户交互方面, 这种一致性提高了产品的整体可用性。
Eventbrite的许多部分都使用三图标布局。当用户再次遇到这些组件时, 他们已经熟悉了它们的一般行为。
使用基于组件的设计系统可以节省成本, 并使产品更易于更新。如果某个组件在特定情况下存在可用性问题, 则可以将其修复一次, 并且该组件的所有其他潜在问题也将得到更新。
4.样式指南从长远来看使你的应用开发更快
当你的团队为屏幕开发通用组件时, 他们正在开发一种将在其他地方使用的解决方案。这样可以节省很多开发时间。当你的公司规模扩大时, 这可能意味着可以节省多达10倍的时间来构建新的屏幕。
5.风格指南可促进生产效率和创新
创建样式指南可使设计更易于访问, 并可供公司其他部门使用。开发人员和设计人员可以更快, 更轻松地构思一个想法。 Bootstrap经常因使开发人员易于创建工作原型而广受赞誉-你的样式指南具有相同的目的。它为开发人员将要构建的新UI提供了参考基础, 而设计团队不必首先创建屏幕(即使设计团队应对最终屏幕进行质量检查)。
Shopify的在线设计系统称为Polaris。
创业公司的挑战, Flux的风格指南
在启动环境中创建设计系统并不像在更成熟的公司那样习惯于线性化, 因为他们习惯于简化流程。在一家传统企业中, 设计团队进行用户体验研究, 构思和实验, 然后提出最终的品牌样式指南。此过程并不适合所有公司。初创公司在他们的愿景和产品要求总是变化的环境中工作。他们使用MVP(最低限度的可行产品), 其应用程序的不完整版本进行测试, 并向用户展示其潜力。
在创建样式指南时, 这可能会成为一个问题。
在一个不断发展的环境中, 设计人员通常会努力创建应该被”修复”的样式指南。设计人员可能没有时间仔细考虑所创建的所有组件, 即使它们最终仍可能在应用的下一个版本中。当他们成熟一点时, Facebook便以他们的汉堡菜单交换为标签导航而闻名。你是否认为谁将汉堡包菜单放在第一位的人也将其添加到Facebook风格指南中？
你甚至可能认为还没有创建样式指南的时间。你可能会意识到, 从长远来看, 你将需要一个, 但是现在, 为应用程序的可用性测试扩展屏幕更为重要。此外, 你还需要一些营销页面来推广你的应用。突然, 你的设计需要增加, 并且在创建屏幕时, 你开始看到拥有样式指南的价值, 该指南可以使你的设计与公司品牌保持一致。
问题是你不知道何时该是为维护稳定性而进行灵活性交易的合适时间。你必须决定何时启动样式指南, 以及何时仅专注于创建屏幕。一种最佳方法可能是在交付屏幕的同时制作样式指南, 这样你就可以兼顾两者。
从一些UI灵感开始
一个很好的开始方法(尤其是如果你不是设计师的话)是收集你喜欢的设计风格的示例, 或者更重要的是, 你认为用户会做出回应。收集尽可能多的示例, 并将它们放在文件夹/ InVision板/ Niice板/等中。它们可以与你的设计敏感性一起用作参考和灵感。你稍后可以在它们的基础上创建模式库。
例如, 当我为一家在娱乐行业推广艺术家的公司制作风格指南时, 我们想知道浅色或深色背景会对用户产生更大的影响。我浏览了游戏/电影/视觉作品中的数百个不同网站, 以了解它们如何使用深色和浅色背景。
“星球大战前线2″游戏网站使用较暗的颜色, 而EA网站使用较浅的配色。
我制作了一份参考表, 其中突出了最常见的模式。我发现的一种模式是, 该行业的公司在展示产品时倾向于使用深色背景, 而在营销活动, 电子商务和商店中使用白色背景。
你不必那么深入, 但我发现拥有视觉参考不仅可以帮助创建样式指南, 还可以帮助你记住可能需要设计的一些用例。一旦对收集到的参考资料感到满意, 就可以开始进行视觉设计。
使用不同参考的各种情绪板。
(来源：夏尔·蒂尔·辛普森·希区(Summer Teal Simpson Hitch), 维维克·文卡特拉曼(Vivek Venkatraman), 琥珀色在盘带上)
设计实体UI组件
在初创公司工作时, 至少在开始时, 创建组件比创建页面要难。设计页面时, 你通常会知道如何使用它。设计组件时不一定是这种情况。你正在尝试针对特定用例进行设计, 但是你希望它成为通用设计系统的一部分, 并且你需要以这种方式进行处理。例如, 你可能想用三个按钮创建一个子导航组件。你可能还需要它与四个, 五个或十个按钮一起使用, 并且需要在移动设备, 平板电脑和台式机上工作。你需要提前考虑。
操作员样式指南根据导航和视觉层次结构指定每个组件的反应方式。 (来源：Derbble上的Kerem Suer)
你希望组件具有一定程度的持久性或持久力。通用组件不应经常更改, 它们必须在整个产品中的许多地方都可重复使用。例如, 如果你只对iOS应用感兴趣, 那么你想根据选项的数量或内容的长度(不一定是屏幕尺寸)来测试组件。想法是, 如果它在应用程序中的许多地方都可以在用户界面中使用, 那么你就知道它是一个有可能成为样式指南一部分的组件。
Salesforce Lightning Design System指示组件的灵活性以及是否可以适应移动界面。
一家创业公司实际上需要从零开始, 然后迅速发展。你的老板可能希望在一天结束前设计一个屏幕。这意味着你无法真正开发出完整的样式指南, 然后再提出屏幕。更糟糕的是, 你可能正在设计一个样式指南, 其中包含的组件由于公司的愿景已发生变化而永远不会消失。就像他们说的那样, 最好现在发货。
Salesforce Analytics UI Kit是应该在每个应用程序中重用的常见组件的库。 (来源：Eli Sebastian Brumbaugh)
创建一个出色的样式指南需要花费时间, 并且由于它将成为你的设计系统的基础, 因此你希望正确地进行设计。在启动环境中, 你需要一并处理所有样式指南。
风格指南作为活文档
你应该将样式指南视为正在进行的工作。就像一家初创公司确定其策略一样, 你将在进行过程中弄清楚自己的风格指南。你将对其进行编辑并随时间进行调整, 直到它成为你的用户界面的基础为止。一种有用的方法是在启动样式指南的同时启动第一个模型。使用你喜欢的软件(在我的情况下为Sketch)打开两个文件；一个称为页面名称, 另一个称为样式指南。在进行屏幕设计时, 可以开始使用构成设计元素的样式指南。
一个打开两个文件的启动项目示例。左侧的样式指南, 右侧的移动屏幕。
当你开始做更多这些工作时, 你会很早就注意到某些组件是样式指南中的主要候选对象。例如, 如果你决定使用图标样式, 则所有图标都可以从一开始就进入样式指南。
我通常会创建一个名为”到目前为止的图标已完成”的部分。如果某个时候有人需要图标, 他们首先必须先仔细阅读此部分, 然后再创建一个新图标。
Salesforce, Yelp和Mapbox都为其应用程序提供了广泛的图标库。你的样式指南还应该包含整个使用的UI元素。
其他要考虑的明显项目是颜色, 按钮, 选择器, 标题, 标题, 正文等。如果你使用的是专门用于市场营销的样式, 则可以考虑将其放入样式指南中并适当地加上标签。如果你还没有完全解决某个特定项目, 那就可以了。你可以稍后在机会出现时在设计系统中优化UI元素, 并适当地更新指南。别忘了, 样式指南是一份生动的文档, 尤其是在启动时。
最终, 当我开始在指南中放置布局时, 我知道我已经开始达到所有组件都应接近其最终状态的地步。这部分标志着样式指南创建过程的转折点-现在你可以庆祝！庆祝这一里程碑的一个好方法是为样式指南的1.0版本创建徽标或图标(考虑为其命名)。
有些人甚至把徽标/图标印成贴纸, 这样团队就有了奖杯。在这一点上, 我通常回到传统的使用指南的方式, 首先打开样式指南, 然后为需要完成的界面创建一个新文件。
总结
作为设计师, 通过尽早创建样式指南, 可以确保你的创业公司遵循更高的质量标准。这可能具有挑战性, 但值得付出努力。扎实, 全面的样式指南不仅可以帮助你拥有更好的产品, 还可以帮助你降低开发成本。
即使在快速做出决定且有时需要快速更改设计的快节奏环境中, 也有办法实现这一目标。希望上述过程可以帮助任何初创公司的设计师应对复杂性和速度方面的挑战, 同时也可以为产品的利益创建坚固的样式指南。
• • •
在srcmini设计博客上进一步阅读：
- 电子商务UX –最佳做法概述(带有信息图)
- 以人为本的设计在产品设计中的重要性
- 最佳UX设计器产品组合–启发性的案例研究和示例
- 移动接口的启发式原理
- 预期设计：如何创建神奇的用户体验
评论前必须登录！
注册