使用样式指南加速您的Web工作流程

IT资讯 2018-08-06 68 次浏览 0 条评论

样式指南可能是您工作流程中缺失的部分。

风格指南:快速链接
什么是风格指南?
他们在哪里适合项目?
你包括什么?
你如何创建一个风格指南?
你如何使用风格指南?

现在,样式指南已成为现代网页设计工作流程的关键部分。由于社区意识的提高,他们在网络项目中的使用已经稳步上升了一段时间,各行业专业人士展示了他们的使用和效果。

风格指南的兴起部分与响应式网页设计的发展有关,但它们现在正在帮助设计师和开发人员处理更有能力的网络和越来越雄心勃勃的网络项目的需求。它们将帮助您更快地设计和构建,并获得更准确和一致的结果。

在本文中,我们将介绍您需要了解的有关样式指南的内容,如何将其组合在一起以及如何使用样式指南。使用右侧的快速链接跳转到所需的部分。

什么是风格指南?

与在Sketch,Photoshop CC或类似产品中生成的传统静态网站布局组合相比,样式指南是一组元素和组件,当它们一起使用时可以形成完整的布局或该布局的一部分。正确生产后,它们具有可扩展性和灵活性,使其成为构建响应式设计的完美工具。请参阅styleguide.io,了解大量风格指南的示例,以及更多学习资源。

在本文中,我将交替使用术语“样式指南”和“设计系统”,因为我相信样式指南在构成管理现有设计的系统并允许轻松生成新设计时最有效。

那你为什么要从传统的工作流程中切换?首先,介绍样式指南意味着您可以更快地进入浏览器并在桌面Web设计工具上花费更少的时间。

在最有用的样式指南中,您可以在浏览器中处理所有设计概念,将Photoshop和Sketch之类的内容降级为资产创建工具,而不是用于设想布局。

样式指南在哪里适合项目?

虽然样式指南主要是Web设计人员和/或开发人员的工具,但它们也可以成为客户的可交付成果。样式指南使客户能够深入了解正在建立的设计系统以及将形成其产品的调色板。 Samantha Warren用她的Style Tiles详细探讨了这个想法。一种以字体,颜色和界面元素的形式向客户展示视觉语言的方法。

美国联邦政府网站有一个清晰,彻底的风格指南

 

要求客户签署静态布局的传统方法的问题在于,这些本质上是网站外观的照片。当然,我们会尽最大努力使最终产品看起来像我们在这张照片中所做的承诺,但我们正在创造一个理想主义的渲染,而不必与网络的所有生活部分抗衡。

许多小的细微差别 - 例如类型渲染和间距 - 可能会改变。这可能相当于客户感觉他们被Photoshop渲染误导了。

使用样式指南作为设计可交付成果可以消除与客户的这些困难讨论。它们使设计更改更容易完成而不会有太多麻烦,从项目工作流程的早期阶段就可以使您处于模块化思维模式中。

你在一个好的风格指南中包含了什么?

理想情况下,您的风格指南应该为您提供设计和构建页面所需的一切,而无需打开Photoshop或Sketch。关于格式,样式指南应该是实时HTML,以易于维护的方式分类,以及可能与之接触的任何其他设计者。

从基础知识开始,让我们看一下制作好风格指南的成分。我发现我在这里介绍的标题有助于作为开始使用的基础,但可以随意添加小标题并获得更具体的内容。看看Brad Frost的原子设计作为组织设计系统这一部分的潜在方法。

类型

MailChimp的排版规则(点击查看完整指南)

 

这包括整个排版层次结构,包括标题,列表,块引号和段落文本。它还应涵盖这些类别中的任何变体,例如字幕,首字下沉和任何其他特殊印刷处理,以及按钮,导航和表单字段等UI上下文。
网格和间距

这应该包括水平和垂直布局网格系统。网格指南使您能够快速构建原型并构建布局,而无需对间距和边距进行耗时的调整。

颜色

在此处包括主要和次要调色板(单击以查看完整指南)

 

您的主要调色板,包括主要链接颜色,操作和元素颜色(例如,按钮,标签和图标)。在本节中,您还需要包括此调色板之外的任何颜色,这些颜色适用于理想设计状态之外的情况,例如错误和系统消息以及验证。

模块

模块包括诸如按钮,表单字段,选项卡和导航之类的元素,以及诸如字幕图像和博客帖子元数据之类的元素集合。它们还包括一起工作的元素组合 - 例如文章标题,日期和引言段落,带有小标题和文本的工具提示等等。

你如何创建一个风格指南?

你究竟如何整理风格指南?在这里,我将引导您完成我使用的过程。

从线框开始

线框可以帮助您建立您需要的元素

 

在编写设计系统的单行之前,您需要大致了解您将需要哪些部分。在项目早期,当客户提供了您将要使用的初始内容和资产时,您应该通过一组线框草图建立设计系统的基础。

线框是风格指南的秘密武器。花些时间用笔和纸或使用线框工具勾画出产品中的所有屏幕。包括您在最终产品中可能需要的任何特定UI设计组件。

寻找模式

在这一点上,我建议找一个大的物理工作区,在那里你可以展开你的线框草图,这样它们一下子就可以看到了,你可以大致了解你即将建立的系统。查看您的草图并注意出现的模式。也许元素的组合经常出现在一起,并且可能成为一个可重用的模块?

使用样式指南加速您的Web工作流程 - 标记

不同颜色的标记可以帮助您区分类型,模块和网格
还要寻找试图出现的模式。例如,博客文章列表可能采用与搜索结果列表类似的格式,但是假设元素按不同的顺序排列。也许改变两者中的一个以匹配另一个将帮助用户阅读他们在您产品的其他地方潜意识学习的模式。

目录一切

我喜欢使用一组Post-It Note页面标记来标记我的线框页面中的所有元素以供参考。例如,在整个草图中出现的像面包屑这样的模块可以标记为“M01”。 'M'表示它是一个模块。该数字表示它恰好位于我的系统中 - 下一个模块是M02,M03等。

元素本身可以在其他地方重复,因此这个面包屑模式可能出现在产品页面和博客文章上,两者都标记为M01,因此我不会在原型设计时最终设计和构建同一元素的多个版本线框。

进入HTML

在完成线框的编目和标记之后,只需要获取元素和模块的目录并将其构建为实时HTML样式指南。

可以把它想象成一个Airfix模型。您有一张说明书(您的线框草图)和一组与说明书对应的标记部件(您的样式指南)。一旦你有了想要创建的概念,就会知道你需要哪些部件,那时你已经准备好开始构建你的设计系统了。

以这种方式接近设计系统的最佳部分是它使您能够快速生成新的屏幕和组件 - 每个场景只是一个线框草图。在绘制下一个草图时,样式指南会提醒您现有的组件和图案。草图完成后,您可以使用样式指南中的现成元素快速构建线框作为说明页。

你如何使用风格指南?

从技术上讲,风格指南永远不会完整;这是一个随着项目而不断发展的不断发展的文档。除了您目前的计划之外,不可能事先知道需要存在的元素,模式和模块的每个组合。但那没关系。正如我们网络不断变化的本质一样,风格指南只能与产品的当前状态一样完整。
在(大部分)完整状态中,样式指南是您正在构建的产品的主要视觉语言的参考。这意味着您可以直观地了解新功能的形成方式以及它们采用的外观。它也是一个由测试元素和组件组成的活文库,可用于快速构建新屏幕或产品的某些部分,使其成为快速构建任何规模项目的最有效方式。

使用样式指南加快Web工作流程 - 标记样式指南

标记您的生活方式指南,以便您可以交叉引用线框和组件工具包
风格指南必须超越其最初的概念。它必须保持最新状态,而不是产品设计系统在特定时间的样子。它应该是您项目的可视化词典 - 在草绘后做出设计决策时您咨询的实体。所有新组件和模块均由其DNA制成,因此从用户体验的角度来看,任何新作品都将在整个品牌形象中保持一致。

如果您之前从未在Web项目中使用过样式指南,请在下一个项目中尝试它,看看它在帮助您更快地设计,构建和原型方面的差异。通过练习,它们将变得更容易创建,您甚至可以在样式指南中找到可以重复使用的模式,以加快创建下一个样式指南的过程。

有用的样式指南超出了可视化参考的功能。它成为您产品的DNA,每一件当前和未来的设计都源于此,以产生其余产品的一致风格和特征。

0
小包子

【 飞龙网.com:小包子】为你推荐!我的文章如同我的名字,香甜可口,咸淡适宜,油而不腻,阅后令你回味无穷尽哦~

发表评论