样式指南和样式图块是Web设计师的重要资源，尽管听起来确实相似，但它们完成了两项不同的任务 。
这可能会造成混淆，因为在这两个方面都要做很多事情。
Web项目通常将品牌与界面设计结合在一起 。
这需要艰苦的努力，但它也是最有价值的创造性任务之一。
创建品牌标识绝非易事。
但是每个设计师至少应该了解它们是什么以及它们如何工作。
并非每个人都需要（或喜欢）创建样式指南或样式图块。
在本文中，我想对两者进行深入探讨，并介绍这些创意资产所能带来的好处。
Web样式指南
有人说这些是数字模型，而另一些人说基于代码的样式指南最有用。
我已经阅读了有关样式指南的各种意见。
您可以获得非常具体的信息并规定某些元素的完美像素测量，也可以保持宽松并提供带有视觉示例的准则。
它定义了设计过程中使用的一致模式，UI模块和创意偏好 。
无论哪种方式，样式指南的目标在网络上都与其他任何项目相同。
唯一错误的方式是创建别人根本无法理解的资源。
没有唯一正确的方式来制作样式指南。
加入团队的任何人都应该可以轻松访问该指南。
如果创建了新资源，则应将其打开以进行编辑 。
目的是创建一种经得起时间考验的资产。
它通常包括可重复使用的资产 ，例如版式，按钮，色样，纹理和通用页面元素。
样式指南应根据项目需要而详细 。
您可以在Smashing Magazine的这篇文章中阅读有关此主题的更多信息 。
这些生活指南更适合前端开发人员，但对设计师也同样有用。
最近，我们介绍了生活方式指南工具 ，这些工具可以帮助您从头开始构建生活方式指南。
它涵盖了网络样式指南的基础 ，包括实时示例和案例研究 。
我绝对喜欢的资源是StyleGuides.io 。
这是一个在线实时样式指南， 用于定义MailChimp的网格，版式和页面元素 。
MailChimp的模式库是您可以在StyleGuides.io上找到的最佳示例之一。
它们都具有传达与Web项目主题相匹配的特定颜色，图案和视觉效果的相同目的。
您访问样式指南的方式实际上并不重要。
在为网络公司设计样式指南时，通常将所有内容都放在网上，但是您也可以创建内部指南 ，并将其保存在本地Intranet上，或将其私下托管在用户登录页面后面。
要了解有关该主题的更多信息，请查看样式指南中的其他文章：
- 前端样式指南 （24ways.org）
- 创建网站样式指南 （creativebloq.com）
- 如何制作完美的Web设计风格指南 （dtelepathy.com）
分成样式瓷砖
这些瓷砖是早期设计阶段在尝试确定特定美学效果时使用的创意资产 。
风格瓷砖完全是另一种野兽。
但是萨曼莎（Samantha）的示例使用标题和段落类型，链接，图案以及可能的颜色选择以及品牌徽标 。
没有用于设计样式图块的特定模板 。
Style Tiles网站是由Samantha Warren创建的，它拥有您可能需要了解的所有内容。
这些磁贴比情绪板更详细 ，但比完整的样板要细得多 。
使用样式图块时，您的最终目标是向客户或创意总监展示2-3种不同的样式图块 。
萨曼莎（Samantha）鼓励使用形容词来详细描述每个图块。
磁贴应足够详细，以使人感觉网站的身份和氛围 。
这样可以节省您的设计时间 ，因为客户已经看到了他们喜欢的资产，因此进行大量修改的机会就更少了。
客户可以浏览不同的图块 ，然后选择自己喜欢的作品 。
这是来自Style Tiles网站的引人注目的报价：
您不希望仅让客户意识到他们讨厌大多数颜色和字体，而是将其投入像素完美的模型中。
比较样式瓷砖与室内设计师的工具包是一个很恰当的类比。
这可以包括品牌/身份 ，也可以包括UI功能 ，例如下拉菜单或CTA按钮。
而是使用样式图块查找要在整个网站上使用的通用主题或视觉语言 。
尽管如此，在开始时，样式图块就可以通过节省设计师的时间并为客户提供许多选择的机会 ，对于创作过程至关重要。
完成完整的模型后，实际上不再需要引用样式图块。
您应该在流程的早期将它们用作可交付资产 。
如果您想深入研究样式图块，请查看这些相关文章。
样式指南与样式图块
它们通常用于探索想法 ，一旦项目完成，它们就没有太大的用途。
样式图块可用作情绪板，以可视化方式为您自己或客户绘制创意 。
样式指南要详细得多，应作为创作团队的连续参考指南 。
样式指南和样式图块之间的区别是模糊的，但却是明确的。
样式指南应在整个设计过程中使用 ， 甚至在以后使用，以供将来可能在现场工作的其他设计师参考 。
样式图块的边缘通常要粗糙得多，并且仅在早期的创作过程中使用 。
样式指南非常详尽 ，其行为类似于可视化文档 ，但它们也需要大量工作 。
样式图块快速有趣 ，但本质上是短暂的。
两者都有其优点和缺点。
最终取决于项目 。
那么您应该使用哪一个呢？
对于大多数客户来说，这可能是不值得的。
为小型企业网站构建完整的样式指南将需要太多的工作和可计费的时间。
小型项目（例如小型企业网站）与样式图块一起使用效果更好。
但是，像重新设计《纽约时报》这样的大型项目将从样式图块和样式指南中受益。
这就是使样式图块几乎适用于所有场景的原因 。
为新项目寻找语言和心情总是一个有价值的过程。
而且有些客户甚至不想要样式指南，因为它不会被使用。
一些设计师从线框转向详细的模型 。
您也可以不创建任何一项资产就轻松解决。
在每个项目的基础上工作，并确定每个项目的最佳选择。
现场例子
我在浏览Dribbble时发现了这些设计，我认为它们可以在您自己的样式指南或样式图块中体现您想要的质量。
让我们总结一下样式指南和样式图块的示例 。
风格指南
它非常简单，但是清楚地说明了设计中的主要图案，颜色和页面元素 。
这个令人难以置信的Airbnb风格指南是由Derek Bradley创建的。
这个示例的组织结构更多 ， 包括颜色，版式，表单，界面元素和其他UI功能 。
这是由设计师Naoshad Alam创建的更大的数字样式指南 。
更详细的样式指南会将所有这些设计元素放到Web上，并包括每个的代码段 。
精心制作版式，按钮，颜色选择和通用页面元素，并将它们组织成部分 。
设计师Cupi Wong 为AfterShip制作了本指南 。
这也可以移植到Web上，并作为在线参考文档大得多。
全屏预览跨度高达21,000像素！
这东西真是巨大。
UI设计师Greg Dlubacz分享了自己的Web项目UI样式指南 。
也可以将其移植到在线文档页面上，以供团队成员参考。
绝对是我见过的最好的数字风格指南之一。
风格瓷砖
平面设计元素，一些次要的UI功能以及调色板是非常基础的。
UI / UX设计师Abdus Salam为有机食品商店网站创建了此样式图块 。
它有颜色和版式，但也包括矢量插图 。
设计师Adrian Cantelmi确实以他的撤资风格进行了详细说明。
这些向量有助于定义网站的品牌，氛围和整体配色方案 。
简单是游戏的名称。
一些图标，一些颜色选择，以及几个按钮设计。
重新设计的世界杯顾问具有非常基本功能的自己的样式块 。
如果您一眼就能看出该网站的外观，那么您就做对了。
设计师Brennan Gleason仅提供了一小块瓷砖样本，但是您仍然可以感受到网站的氛围 。
这是一个用于旅行项目的样式瓷砖被拒绝的有趣示例。
最后的话
但是，我希望本文可以作为两者的入门读物，并使您能熟练地理解和创建这些设计资产。
如果您在网上搜索，会发现更多示例，技巧和资源，用于构建样式指南和样式图块 。
翻译自: https://www.hongkiat.com/blog/style-guides-style-tiles/