网站设计规范
品牌元素
给出官方logo 和标准配色方案的定义及范例,介绍logo 在全彩、黑白或不同背景色等状况下的使用方式,提供标准配色的HEX 及RGB 值,另外也可以提供logo 文件的下载,包括.png 、.jpg 甚至是.ai 或.psd 文件。
文字
对页头、段落、引用、标签、表单标题等任何有可能出现格式化文字的地方进行规范定义,包括字体、字号、行高、字间距等方面。
布局
定义不同的区块和元素在界面当中的位置,还有它们彼此之间的关系。对于那些在全局范围内普遍适用的外间距(margin)、内边距(padding)、网格模式等规则也要作以说明;另外,有些元素会根据界面环境的不同产生相应的变化,这些也需要在规范中也要进行说明,最好可以搭配图片进行展示。
链接和按钮
定义链接和按钮的视觉风格,为不同模块中的链接以及不同类型表单中的按钮提供色值及图例。这个过程也有可能帮助你对一些过于复杂的界面进行简化。
导航
定义各级导航的视觉风格及交互方式,特别是对于那些具有层级关系的导航项来说,要完整的展示出嵌套关系及展开方式。
视觉继承
定义页头、标题、段落、图片等元素是怎样在视觉上保持关联性的,提供必要的图例,并通过文字描述出视觉继承关系对于整个产品的外观气质的影响作用。
图片与图标
对内容和界面元素当中的图片及图标进行定义,包括文件类型、尺寸、文件大小、比例、风格等方面。内容中是否会有特色图片?正文中的图片是左右浮动还是居中?是否有一套特定的图标素材?
UI 标准
定义不同的UI 元素所对应的交互模式,以及它们的视觉表现形式,例如在哪些情况下使用复选框(check box)或单选按钮(radio button)。可以试着将网站涉及到的所有类型的UI 元素都陈列出来,提供图例及前端代码。
表单和验证
1 / 3
定义表单的整体风格及元素布局,对表单涉及到的功能流程进行描述;定义表单的验证规则以及各种有可能出现的错误提示等。
还需要些什么? 多元化
有时你也许需要面向不同的使用者创建不同版本的规范。例如,对于某些类型的网站来说,有着不同级别和权限的内容创建者与管理人员,最有效的做法是针对不同的角色提供特定的规范指导;当然你也可以将完整版本的规范面向不同职能的人员进行订制性的简化。 目标任务
为了使相关配合部门在大方向上达成默契,你也许需要在设计规范中结合具体内容对整个的产品目标及阶段性的工作任务加以描述,这也可以让大家充分理解规范的必要性,理解一致化的表现风格及用户体验对产品策略的推动作用。
代码
根据设计规范所面向的人员范围的实际情况,可以考虑将前端代码标准及最佳实践模式配合图例进行展示,包括HTML 、CSS 、JavaScript 等。
文件规范
你也许需要面向所有的内容创建者制订文件使用方面的规范,包括文件类型限定、命名规则、版本号更新方式等。从长远的角度来看,这样可以避免很多琐碎的潜在问题。
内容标准
面向内容的创建者及管理者,你也有必要在规范中对人工生成的内容进行格式化的定义,例如正文内容的长度、标题的字符数等等。另外对于内容的基调,提交与编辑操作的流程、版权处理方式等等也要作以具有实际指导意义的说明。
评论和论坛
如果你的产品为用户提供了评论功能,或是开设了相关的论坛,那么你同样需要对这些方面的管理进行规范。例如,评论内容的审核标准是什么,怎样回复用户的评论,怎样处理负面内容,在哪些情况下需要关闭评论功能等等。
可下载,可打印
如果你通过在线的方式创建的设计规范,那么要尽量确保相关人员可以将它下载或打印出来,方便离线使用。不过这里也存在一个问题,就是在更新规范的时候无法对他人手中的离线版本进行同步处理。这种情况下可以尝试通过邮件通知的方式加以弥补。
做的漂亮些
2 / 3
既然是设计规范,那么其自身的外观形象也是很重要的。在时间允许的情况下尽量多的使用图片范例,即保证内容形式上的丰富,也能对设计开发人员更有直观的参考价值。从某种程度上讲,设计规范也是产品整体质量和形象的一个组成部分。当然,如果涉及规范只是供内部设计开发使用,不涉及第三方合作的话,那么在资源和成本上进行充分的控制也是合理的,譬如一个内部wiki 系统就可以满足最基本的需求。
3 / 3