你的网站真的需要风格样式指南吗？
07 Sep 2012究竟什么是风格指南，而我们又应该在什么时候使用它呢？我们总结了风格指南的主要特点，它应该包含什么内容，已经你应该如何判断是否应该投入时间为你的网站或品牌建立风格指南。
坦白来讲，不是所有的网站都需要一个风格指南。例如你的表哥的渔具箱Tumblr（国外著名轻博客服务站点）或者邻居家的“猫草皮”电商网站，这些真的不需要一个风格指南。好吧，他卖了多少猫草皮另当别论，但是表哥的渔具工具箱肯定是用不上的。不谈这样类型的网站了，网站风格指南适用于那些需要保持专业的外观设计，品牌一致性的站点。建立风格指南是非常消耗时间的，因此在你开始投入时间建立它之前务必确定你是否真的需要它。
究竟什么是网站风格指南？
在我们决定是否需要风格指南之前，让我先来了解一下它到底是怎样的。最简单的回答就是他仅仅是一份HTML或者印刷文件，它描述并展示了你的网站的外观以及使用方法。它真的仅仅只是网站的一个指导手册，规定了网站需要增加功能或者更新是应该遵循的样式和标准。
l 应该使用什么颜色？
l H1应该多大字体？
l 内容左对齐还是居中对齐？
我们将会探讨我们在风格指南里所需要的以及我们自己所需要的内容。但是现在，那就是一个简单的答案而已。
我们为什么以及在什么时候需要它？
好问题。世界上根本没有所谓简单的问题，这需要根据情况而定，这里我们需要根据网站内容以及用户来确定，这些包括了后台用户，设计师，开发者已经内容发布者。一个最值得你花时间去思考是否应该以及在什么时候需要它的因素就是时间。很多设计师会告诉你风格指南是怎样怎样可以节省你很多很多开发的时间。但是在很多时候，你可能浪费了很多时间用在建立一个你在未来根本就不会去参考的手册，或者更糟的是，你的用户和内容发布者都不会去参考。
时间是我们在决定是否需要它的一个重要因素。如果你正在开发一个站点或者应用，你可不想花大量的时间在一个可能完全看不到希望的地方。试着把风格指南当作一个长期的投资，如果你还没有准备好立马投资，请不要轻易尝试。但是如果确实出于长远考虑，那么这个时间是花的物有所值的。它可以使你后期维护起来更加容易。
如果你不清楚你的“故事”将会是一部拥有版权的宏篇大作还是周五晚上消遣的小短篇，下面是一些你可以用作参考的问题。如果你的答案一直都是”yes”，那么你很有可能正在准备建立一份这样的文档。
l 我想节省我的脑细胞？
l 我喜欢好的可用性及标准？
l 我喜欢保持外观和内容的一致性？
l 我的网站是否代表着某个品牌？
l 其他人可能会使用我的商标或者品牌？
l 我将会定期生成和更新内容？
l 有除了我之外的其他内容贡献者？
l 我是自由职业者并且希望为我的客户提供易于管理的站点？
l 我有应用程序接口？
l 我正在建立一个公司？
l 我为一个大公司工作？
我应该如何建立一份风格指南？
如果你已经十分确定你需要风格指南而且你现在已经准备好了为自己建立一份。你的风格指南的建立依据可能会是：你的站点的类型已经你的目标用户究竟是谁。有时候你可能只是为了便于自己查看，则没有必要写的过于详细和漂亮。在其他情况下，例如将会有上千人将会参考使用你的手册，那么你可能需要使它更加详细并提供更多的细节。
我有2点需要遵循：“我需要什么”以及“我想要什么”。“我需要什么”指的是你应该为用户提供哪些信息。“我想要什么”指的是你个人想在里面加入什么。同样的，不要把这些当作模板，这些只是你在建立的时候一个需要考虑的元素，你不需要满足所有的需要。并且在大多数情况下，你需要的是提供那些你的站点真正需要的细节。
“你需要的”
商标。定义并给出你商标和颜色的示例。展示你logo使用的颜色，装扮，白色背景还是黑色背景的。为你的Logo上可能出现的颜色提供HEX和RBG的值以及色卡，并提供一些logo文件，例如.png .jpg甚至是.ai和.psd格式的文件。
字体。定义好每个标题，段落，注释，引用，标签，表单头部和其他格式化文档应该使用的字体及大小。并提供行高，字体间距等可能需要的细节。
布局。定义好HTML和其他元素在页面上的位置和结构以及相互的逻辑关系。定义好margin, padding, gutters和全局的网格模式，同样还有某些和其他内容不同的特定元素。如果有必要，提供布局示例去展示不同页面和布局模板之间的区别。
链接和按钮。定义好页面上可能出现的链接和按钮的颜色和样式。为内容颜色，侧边栏链接，提交按钮，表单按钮，信息按钮或者其他一些在按钮和链接提供示例和颜色代码。这将会使你开始考虑如何去简化一个看起来很复杂的设计。
导航。定义好主次导航的风格以及交互样式。定义好嵌套或者上下级导航使用时的行为，展示一些导航使用和建立的示例。
视觉层次。定义并展示页面头部，图片，标题，段落和其他元素之间的相互关系。提供一些你定义的必须实现的视觉层次关系的示例，必要时甚至可以提供为什么这么做对于网站的外观如此重要的详细说明。
图片和图标。定义站点图片和图标的类型，尺寸，文件尺寸和样式。你的文章会有特色图片吗？你有必须使用的特定图标组吗？内容图片是居中还是浮动？提供图片和图标的示例。为用户提供相关的占位图片和合适的图标组。
UI标准。定义好UI元素在使用时的交互和外观类型。哪些地方改使用单选框或者多选按钮？多做点额外的工作，样式化一套完整的UI，提供生成UI元素的一些图片甚至是代码。一些比较好的完整的UI工具组有Twitter Bootstrapt和jQuery UI.
表单及验证。定义好表单的样式和表单元素的布局。定义输入框和标签的对齐方式。同样，定义好表单的流程，已经在哪应该使用什么类型的表单等。定义好表单验证的类型，确定错误信息的现实方式和颜色等。
“你想要的”
二元性。
目标使命。
代码实践。
文件命名。
内容规范。
评论标准。
Do’s和Don’ts
可下载打印。
更加漂亮。
总结
风格指南是你用户和你自己的有力工具。它可以在你回答内容被编辑和添加时的样式问题是节省很多时间。但是请注意你话在上面的时间和精力，少走弯路，尽量不要浪费在一份根本就没有人会使用的风格手册上面。如果你的风格指南做的比实际站点还漂亮，那你肯定花的时间太多了。
一些风格指南示例：
原文翻译，欢迎转载。还请注明转载地址，谢谢！