交互设计原型规范.pdf

交互设计原型规范 目录 1 前言4 1.1 文档说明4 1.2 编写思路4 1.3 版本号及更新5 2 留白与间距6 2.1 网页留白6 2.2 栏目间距9 2.3 栏目标题框与标题文字间距10 2.4 栏目框与栏目中文字间距13 2.5 文字间距15 2.5.1. 行距15 2.5.2. 段距17 2.5.3. 文本块间距18 3 大小19 3.1 文字大小19 3.1.1. 正文文字大小19 3.1.2. 标题文字大小19 3.1.3. 组件大小（除文字）19 3.2 栏目大小21 3.3 栏目标题栏大小21 3.4 页面大小22 4 颜色23 5 其它24 5.1 文字24 6 对齐26 7 母版29 8 控件31 9 原型设计的评估标准33 9.1 整体统一性33 9.2 架构是否清晰33 9.3 流程是否清晰33 9.4 控件使用是否准确33 9.5 信息传达是否到位33 10 参考资料35 1 前言 1.1 文档说明 本文档面向的主要读者是交互设计师，以及其他对交互设计原型设计感兴趣的人士。适 用于用Axure RP 6.5 设计基于网站的原型。 主要目的是： 1、保持交互设计原型的一致性； 2 、提高交互设计原型设计工作的效率和质量。 1.2 编写思路 交互设计原型主要用于下几个场合： 1、UI 设计师用于设计网页UI ； 2 、前端开发人员用于评估开发工作； 3 、后台开发人员用于评估开发工作； 4 、测试人员用于参与测试； 5 、市场人员用于和客户沟通。 这些场合对原型的共同要求是： 1、美观； 2 、清晰的传达信息； 3 、保持一致性。 本规范的编写目的是通过规定原型各部分的留白、大小、颜色等来实现原型的美观、 清晰、一致性。 本规范首先对原型各部分的留白、大小、颜色等方面作出了规定。其次，对利用 Axure 工具进行对齐和复用模板提出了建议。最后，提出了原型设计的评估标准。 1.3 版本号及更新 版本/ 状态 作者 更新日期 更新记录 1.0 唐浩 2013 年1 月6 日 创建文档 1.1 唐浩 2013 年4 月28 日 增加了控件栏目 2 留白与间距 2.1 网页留白 网页留白：网页与浏览器之间的空白。网的留白分为上留白、下留白、左留白、右 留白(图2-1) 。网页留白使网页和浏览器之间的空间清晰可辨，便于识别网页。（图2-1 ） 图2-1 网页留白 网页留白的设置方式： 网页的上、下留白设置为20 像素，左、右留白的大小相等。如图2-2, 网页的左、右留 白都设置为a 像素。 图2-2 设置网页留白 如何利用Axure 设置网页的左、右留白？ 1、选择菜单栏的线框图页面样式编辑器； （图2-3） 2、在