网站Web产品系统交互设计视觉规范

网站Web产品系统交互设计视觉规范

 

•本文档对网站系统页面视觉设计进行规范,本文档旨在通过统一规范，简历页面框架和元素设计、布局与交互的通用规则，在保证页面美观、易用、一致的前提下，提高页面批量生产和统一布局效率。

1.0阅读对象
•本规范以系统开发及后期维护人员为阅读对象

2.0UI色系
•本系统UI主色系依据Web设计专业要求由白色与暗红色构成。

•色彩的色域构成简洁、大方、国际化


3.0UI色系构成
主色       辅色
需设计图标          色彩 与 色彩编号

3.1色系构成与色值
传统的VI手册，色值通常是以平面印刷为优先定义的（比如CMYK色或专色），网页上的某些色彩，也可以考虑采用纯度更高的近似色。
LOGO
Login regis
导航
辅助导航
Tab
Links
Text
Chart
Button
Table
Dialog
Slider
Lcons
Highlight/Error
DatePicker
FLinks
C&P
3.2讲解框架与元素的概念
这张布局图，包含和传递了很多信息：整体效果、功能划分、色彩与造型、布局参数⋯⋯
登录典型页面：
4.0页面总规则
•页面最佳适应1024 x 768 及其上分辨率
•区块与区块之间的间隔为10像素
•元素与元素的最小间隔为10像素
•有明确的区域或元素宽度，高度最好为10的倍数，至少为5的倍数（如导航高度为30，按钮高度为20，树的当前菜单背景色高度为20）
5.0页面框架类型
5.1首页型视图
5.2列表页视图
5.3表单页视图
5.4最终页视图
5.5数据页视图

6.0工作视图详解
A页面导航区 目录区   主题信息区   状态版权区
6.1简洁视图详解
6.2分析视图详解
由区域到元素，由整体到细节。接下来开始对各个功能区内部的元素进行规范。
对各个功能区的元素布局进行拆分详解
涉及：颜色，字体类型与大小
6.3目录树区元素规范详解
涉及：颜色，字体类型与大小及选中状态

6.4版权状态区元素规范详解
颜色，字体类型与大小


7.0其它规范：
7.1按钮和链接各种典型状态
按钮：背景色与字体色 字体大小 与框体间隔
7.2属性页：字体颜色与大小 前景色与背景色
7.3小部件：
日历、进度条、ICON、对话框等其他元素规范
涉及：颜色，ICO图标不同状态，对话框的符号及框体布局等
8.0结束语
• 本视觉规范为页面视觉设计的一般性规则，因前台技术限制与浏览器兼容性差异、平面效果与最终代码实现效果可能存在微小差异。
• 超出本规则规范的特殊页面建议单独绘制特征页
9.0视觉规范的局限和扩展方式
视觉规范要真正可用，还需要前端工程师切图、编写HTML/CSS/JS代码来实现网页的拼装、交互和与后台程序的衔接。