网页设计变得日益复杂，单靠一人之力已很难胜任。而要保证设计的成果能达到客户要求的标准，并带给用户愉悦的使用体验，网页就必须拥有统一而优质的风格。当一个团队分工设计网页的不同部分时，为了确保各部分在总体风格上保持一致，创建设计备忘录或网页设计风格指南是一种可行的方式。一份设计风格备忘录对于保证多页面网站在风格上协调一致也非常有帮助。不仅如此，这样的设计风格指南还能为未来及第三方项目的开发提供指引，使整个项目或品牌在风格上能一脉相承。
什么是风格设计指南？风格设计指南是指在设计某个项目时，预先选定的素材，图形及设计规则的集合，所有从事这个项目的设计师必须遵循这些预设条件，以保证项目各部分之间及在用户体验上都协调一致。
风格设计指南为何重要？当多名设计师共同从事一个大型网站或网络应用程序的开发时，防止单个设计师私自改动某一部分或仅仅依据个人偏好而设计就显得极端重要。对设计的各要素做出明确的规范也有利于开发者在架构网站时更得心应手地使用这些要素。更重要的是，这能让他们更清楚地知道哪些东西需要编程，哪些不用，还能让他们从开始就明白究竟该如何呈现这些东西。为了让开发者的工作开展得更顺利，设计者需要把诸如标题，链接，悬停，点击，访问或其他功能按钮等设计要素都纳入设计风格指南之中。
如何创建网页设计风格指南？1.了解品牌设计者首先要做的一件事就是深入了解一下客户的品牌，以真正理解它的意义所在。去熟悉一下这个品牌背后的故事及客户公司的规模，愿景和企业文化。这么做非常重要，因为只有这样设计者才能保证其作品最大限度地在形式和情感上都体现出该品牌的精髓。如果你不懂编程，打开Photoshop，把你手里的文件做个标题，并简短说明它们的性质和用途。
如果你会编程最好用预编码集去创建一个网页文件这样以后再使用这些文件时就很便利。
2.确定字体
根据OliverReichenstein的说法,网页设计95%的部分都是字体。
设计师必须准确地把握字体，因为这是网站与访客之间交流最重要的手段之一。
可以把字体划分为不同的等级。首先确定标题级别的字体：如h1.h2,h3,h4,h5,和h6。然后是正文字体，加粗字体和斜体字。另外还要确定在次级链接，导入语等地方使用的文字字体。对将要在设计中应用的文字的字型，字号，颜色等要有明确的界定。
3.选择色彩
某种色彩居然能让人们联想到特定的商业品牌，这件事总是让我觉得惊奇不已。想想“可口可乐”，我敢保证你此时你眼前已经浮现出一片红色。
在制定设计风格指南时，涉及到色彩部分，应选用一级色作为网站的主色调，且网站主色不应超过三种。在某些案例中，你可能需要在界面中增添二级色甚至三级色，如何使用它们也需要在设计风格指南中明确地体现出来。在设计方案中还应包括白，灰，黑等中性色，以达到突出对比，强调主色的目的。
4.找准腔调这里的腔调指的是网站内容的语气。如果你在拟定设计风格指南之前已经研究过客户的品牌风格，并发现它是活力而时尚的,那么网站正文的腔调也应与之相配。如果正文没有明确的腔调和语气，那么就确立一个。例如在下面要举的这个例子中的用语就给人一种职业，风趣而友善的感觉。相对于平淡无奇的“您遇到了错误”，你或许可以说“噢，天哪.......你冲破了互联网。错误。”当然，如果网站的内容比较正式的话，就不能这么说了。这些细微之处最能闪现光芒。5.善用标识符号已经存在了数千年，它的历史比字词更久远。设计中应充分发挥图标的优势，因为它可以使网站用户瞬间就能理解当下和即将发生的事件。如果使用得当，一个图标可以比色彩，文字和图画赋予网站内容更多的意义。当使用图标时，一定要认真考虑受众，宗教因素和历史因素，以免引起用户不必要的误解。另外还要了解客户品牌的定位和价值取向，否则你也许会把一张涂鸦作品放上跨国银行的主页！
6.图像说话俗话说:一图胜千言。使用与网站的风格相匹配的图片会为整个设计增色不少。在此我还是要提醒设计师一句，一定要考虑客户品牌的含义与价值观。例如，如果是与水资源有关的慈善网站，使用的图片应能唤起人们的感情，或能提醒人们拥有水，电，教育等生存要件是多么幸运的一件事。
7.尊重表单只有用户输入信息时，网站才能有效地引导和操控用户，因此表单是维持网站互动性与活跃度的重要手段。
表单一定要层次清晰且包含一切可能的反馈项目---如激活提示，悬停提示，添加错误，警告等等。除此之外还应该包含积极的指示信息，如“邮件已发送”等。
8.定义按钮
按钮是颜色，表格和行文风格的综合体。设计按钮时，可以利用早前创建的文件。按钮应该在外观上保持一致，在功能上满足不同类型的设计需要。
9.营造空间
在设计风格指南中如何处理空间问题？空间对网页设计而言极为重要。空间处理可以利用栅格式布局，也可以通过标题，按钮，图象和其他元素之间的大小，距离等体现出来。
空间是网页元素存在的前提，布局合理的空间会使网站看起来更有秩序，更专业。10.划分禁区最后但并非不重要的一点：像列FAQ一样列出“可以做”和“禁止做”的事项，这样做的好处是对可能犯的错误一览无余，同时也能更清晰地展示事情如何开展才算顺利。
优秀示例以下列出的是一些非常优秀的风格设计指南，你可以借鉴着这些优秀范例来制定自己的设计指南。请注意，案例中的这些风格设计指南都是依据不同的客户品牌而制定的，由于它们本身与你的设计没有必然联系，因此其中某些理念在你看来也许会显得有些不合逻辑，建议你仅仅把这些案例作为参考，而不要去一味模仿。Spotify–合作品牌设计指南(PDF)
Dropbox品牌与logo设计
Kickstarter风格指南
LonelyPlanet设计指南
FindGuidelines–搜索品牌设定方案的捷径
结语
设计师必须深入了解他为之工作的品牌，确保设计所所涵盖的各个方面都没有差错。他制定的风格设计指南应该有高度的一致性，这样才能将设计中的各项元素真实地呈现给用户。
视觉中国专稿，转载请注明出处。谢谢！
——————————————————————————————————————————————————————————————
预览时标签不可点收录于话题#个上一篇下一篇