WEB产品线设计指南.docx
- 文档编号:26928269
- 上传时间:2023-06-24
- 格式:DOCX
- 页数:24
- 大小:316.83KB
WEB产品线设计指南.docx
《WEB产品线设计指南.docx》由会员分享,可在线阅读,更多相关《WEB产品线设计指南.docx(24页珍藏版)》请在冰豆网上搜索。
WEB产品线设计指南
产品线设计指南(含规范)
摘要:
以下分各模块介绍。
设计规范介绍什么是设计规范?
《产品设计部·人机交互界面设计规范》适用用于产品线的人机交互界面设计方面的指导手册。
贯穿以用户为中心的设计指导方向,根据产品自身的特点制定出的一套规范,以达到提升用户体验,控制产品设...
以下分各模块介绍。
设计规范介绍
什么是设计规范?
《产品设计部·人机交互界面设计规范》适用用于产品线的人机交互界面设计方面的指导手册。
贯穿以用户为中心的设计指导方向,根据产品自身的特点制定出的一套规范,以达到提升用户体验,控制产品设计质量,提高设计效率的目的。
谁去读设计规范?
设计规范手册适合界面设计师,用户体验设计师,前台技术工程师,发布支持人员,运营编辑人员的参照。
设计理念
精于心简于形
通过精心简约的设计,传达先进的技术给用户提供便捷简单的使用体验
设计指导原则
设计规范逻辑性
设计为内容服务,根据逻辑关系通过视觉表现引导用户使用
例如:
搜索结果页通过字体的颜色大小突出重要度
扩展性
采取模块化设计的可扩展性,减少修改和再开发的成本。
例如:
奥运项目左右模块尺寸的统一可以方便编辑随时调用修改内容的位置
统一性
用统一的视觉规范,变化不能超越统一的尺度,个性化内容要有统一风格的继承
例如:
无论每个频道如何追求个性不能脱离整体风格,要有继承和延续保持从属关系个案除外,个案量应有百分比,
本地化
考虑用户的文化背景及习惯,做到设计上本地化。
体现人文关怀例如:
,被搜索文字连接采用红色,及中国传统节日的体现。
设计上不照搬英文站应根据中文特色,体现中文之美
遵循视觉设计原理
页面外观
页面类型:
①普通页面 ②宽带页面 ③自适应页面 ④其他页面
类型说明:
① 普通页面
基本属性:
宽度 ┊ 背景白色 ┊ 位置居中 ┊ 边距上;下;左;右
适用范围:
首页频道首页频道二级频道各级正文页面等及其他非宽带产品线
②宽带页面
基本属性:
宽度 ┊ 背景白色 ┊ 位置居中 ┊ 边距上;下;左;右
适用范围:
宽带频道首页和各级页面不包括正文页,及其他宽带产品线
③自适应
基本属性:
宽度 ┊ 背景白色 ┊ 位置居中 ┊ 边距上;下;左;右
适用范围:
论坛聊天直播等页面
④其他页面
基本属性:
宽度 ┊ 背景白色 ┊ 位置居中 ┊ 边距上;下;左;右
适用范围:
提示报错页面
指导原则:
属性中宽度、位置、边距为不可变数据。
属性中背景白色为常用色值,对于特殊个性化频道可根据特殊要求变更色彩或者使用背景图。
背景色彩遵循原则选择颜色尽量少用饱和度高的颜色, 减少用户视觉疲劳。
背景图片遵循原则尽量选择可复用的图片,减少页面文件量。
如果遇到页面整体外描边效果参照图例()。
页面结构
基本结构:
①标准头 ②内容区 ③标准尾
标准头分为:
首页标准头\新闻中心标准头\频道首页标准头 \频道二级标准头\正文页面标准头\产品页面标准头
具体样式参见标准头规范
标准尾分为:
首页标准尾\普通标准尾
具体样式参见标准尾规范
导航分为:
频道导航\二级导航\专题导航专题图\三级导航\导航指向
具体样式参见导航规范
内容版面:
具体样式参见版式结构类型
通栏广告:
具体样式参见广告规范
结构应用:
①首页 ②新闻频道 ③普通频道 ④频道二级 ⑤专题页面 ⑥三级页面 ⑦正文页面 ⑧产品页面
标准头部
类型分类:
①首页标准头 ②新闻中心标准头 ③频道首页标准头 ④频道二级标准头 ⑤正文页面标准头 ⑥ 产品页面标准头
类型说明:
①首页标准头
组成部分:
网┊产品功能区┊整体网站导航
适用范围:
首页
②新闻中心标准头
基本属性:
产品功能区┊整体网站导航┊广告区域
适用范围:
新闻中心
③频道首页标准头
基本属性:
产品功能区┊ 整体网站导航┊ 广告区
适用范围:
各频道首页
④频道二级标准头
基本属性:
频道┊产品功能区
适用范围:
各频道首页
⑤正文页面标准头
基本属性:
正文导航┊ 搜索功能
适用范围:
频道二极三级和专题页面
标准尾
类型分类:
①首页标准头尾 ②通用标准尾 类型说明:
①首页标准尾
基本属性:
相关导航┊ 版权信息┊ 相关许可证号
适用范围:
首页
②通用标准尾
基本属性:
本频道信息┊ 相关导航┊ 版权信息
适用范围:
频道首页频道二极三级和专题页面正文页面
页面导航
类型分类:
①频道导航 ②二级导航 ③ 专题导航专题图 ④ 三级导航 ⑤ 导航指向
类型说明:
①频道导航
组成部分:
频道┊ 功能性导航┊ 主导航位置区┊次要导航位置区
适用范围:
新闻中心、频道首页及产品页面均可使用
②二级导航
组成部分:
二级导航
适用范围:
所有频道二级均可使用
③专题导航
组成部分:
专题图┊ 导航
适用范围:
专题页面,可根据需要添加删除专题导航
④三级导航
组成部分:
指向导航
适用范围:
三级页面
⑤正文导航
基本属性:
频道┊ 指向导航
适用范围:
正文页面
版式结构:
版块基本元素:
版块组合形式:
版块元素之间距为 同名版块元素间的距离为 (例如中距离为距离为 等分版式为)
版块 版块 版块 版块
版块 版块 版式 版式
通栏版式 等分版式 等分版式 等分版式
()分版式
模块类型
标题种类:
①焦点图 ② 头条区 ③类模块 ④类模块 ⑤类模块
种类说明:
以下图例除特殊注明外,所指距离均包括模块边框线
① 焦点图
② 头条区
③模块标题
④模块内容
⑤图片列表和图文混排
⑥段落关系
⑦段落格式
文字规范
样式类库:
①文字格式 ②连接样式 ③项目符号
注:
所有文字设计均依据下列样式组合
① 文字格式
号字格式:
字号┊字体宋体 ┊ 行距┊ 粗体细体┊
号字格式:
字号┊字体宋体 ┊ 行距┊ 粗体细体┊
号字格式:
字号┊字体 ┊ 行距无 ┊ 细体 ┊
号字格式:
字号 ┊字体 黑体 ┊ 行距无 ┊ 细体 ┊
说明:
号字格式,号字格式,号字格式中的数字英文字母为,中文为宋体
② 连接样式
动态链接样式:
鼠标初始:
颜色 ■ ┊状态下划线
鼠标经过:
颜色 ■ ┊状态下划线
鼠标点击:
颜色 ■ ┊状态下划线
鼠标结束:
颜色 ■ ┊状态下划线
静态连接样式:
鼠标初始:
颜色自定义□┊状态无
鼠标经过:
颜色自定义 □ ┊状态下划线
鼠标点击:
颜色自定义 □ ┊状态下划线
鼠标结束:
颜色自定义□┊状态无
重要链接样式:
鼠标初始:
颜色 ■ ┊状态下划线
鼠标经过:
颜色 ■ ┊状态下划线
鼠标点击:
颜色 ■ ┊状态下划线
鼠标结束:
颜色 ■ ┊状态下划线
③ 项目符号:
点状项目符号:
点 ·
数字项目符号:
数字
形状项目符号:
自定义
应用组合:
①导航类 ②标题类 ③信息类 ④段落类 ⑤功能类 ⑥注释类 ⑥表单类
①导航类
统一导航:
号文字格式字号┊字体宋体┊ 细体┊颜色 ■┊ 行距
静态连接样式鼠标初始:
颜色 ■ ┊状态无
鼠标经过:
颜色 ■ ┊状态下划线
鼠标点击:
颜色 ■ ┊状态下划线
鼠标结束:
颜色 ■ ┊状态无
文字其它说明关键词句之间用竖杠符号 间隔
本页导航:
号文字格式字号┊字体宋体┊ 细体┊颜色自定义 □┊ 行距
静态连接样式鼠标初始:
颜色自定义 □ ┊状态无
鼠标经过:
颜色自定义 □ ┊状态下划线
鼠标点击:
颜色自定义 □ ┊状态下划线
鼠标结束:
颜色自定义□ ┊状态无
文字其它说明关键词句之间用竖杠符号 间隔
标题导航:
号文字格式字号┊字体宋体┊ 细体┊颜色自定义 □┊ 行距
静态连接样式鼠标初始:
颜色 ■┊状态无
鼠标经过:
颜色 ■ ┊状态下划线
鼠标点击:
颜色 ■ ┊状态下划线
鼠标结束:
颜色 ■ ┊状态无
文字其它说明关键词句之间用横杠符号 间隔
导航指向:
号文字格式字号┊字体宋体┊ 细体┊颜色自定义 □┊ 行距
静态连接样式鼠标初始:
颜色自定义 □ ┊状态无
鼠标经过:
颜色自定义 □ ┊状态下划线
鼠标点击:
颜色自定义 □ ┊状态下划线
鼠标结束:
颜色自定义□ ┊状态无
文字其它说明关键词句之间用大于号符号 >间隔
②标题类
版块标题:
号文字格式字号┊字体黑体┊ 细体┊颜色自定义 □┊ 行距无
静态连接样式鼠标初始:
颜色自定义 □ ┊状态无
鼠标经过:
颜色自定义 □ ┊状态下划线
鼠标点击:
颜色自定义 □ ┊状态下划线
鼠标结束:
颜色自定义□ ┊状态无
文字其它说明标题文字位置前可选择性修饰符号和图片,默认为无
一类标题:
号文字格式字号┊字体宋体┊ 粗体┊颜色自定义 □┊ 行距无
静态连接样式鼠标初始:
颜色 ■ ┊状态无
鼠标经过:
颜色 ■ ┊状态下划线
鼠标点击:
颜色 ■ ┊状态下划线
鼠标结束:
颜色 ■ ┊状态无
文字其它说明标题文字位置前可选择性修饰符号和图片,默认为三角形符号
二类标题:
号文字格式字号┊字体宋体┊ 细体┊颜色自定义 □┊ 行距
静态连接样式鼠标初始:
颜色 ■ ┊状态无
鼠标经过:
颜色 ■ ┊状态下划线
鼠标点击:
颜色 ■ ┊状态下划线
鼠标结束:
颜色 ■ ┊状态无
文字其它说明无
三类标题:
号文字格式字号┊字体宋体┊ 粗体┊颜色自定义 □┊ 行距
静态连接样式鼠标初始:
颜色 ■ ┊状态无
鼠标经过:
颜色 ■ ┊状态下划线
鼠标点击:
颜色 ■ ┊状态下划线
鼠标结束:
颜色 ■ ┊状态无
文字其它说明无
四类标题:
号文字格式字号┊字体宋体┊ 细体┊颜色自定义 □┊ 行距
静态连接样式鼠标初始:
颜色 ■ ┊状态无
鼠标经过:
颜色 ■ ┊状态下划线
鼠标点击:
颜色 ■ ┊状态下划线
鼠标结束:
颜色 ■ ┊状态无
文字其它说明无
头条标题:
号文字格式字号┊字体黑体┊ 细体┊颜色自定义 □┊ 行距无
静态连接样式鼠标初始:
颜色 ■ ┊状态无
鼠标经过:
颜色 ■ ┊状态下划线
鼠标点击:
颜色 ■ ┊状态下划线
鼠标结束:
颜色 ■ ┊状态无
文字其它说明无
正文标题:
号文字格式字号┊字体黑体┊ 细体┊颜色 ■ ┊ 行距无
文字其它说明无
段落标题:
号文字格式字号┊字体宋体┊ 细体┊颜色 ■ ┊ 行距
文字其它说明无
③信息类
项目列表:
号文字格式字号┊字体宋体┊ 细体┊颜色自定义 □┊ 行距
动态连接样式鼠标初始:
颜色 ■ ┊状态无
鼠标经过:
颜色 ■ ┊状态下划线
鼠标点击:
颜色 ■ ┊状态下划线
鼠标结束:
颜色 ■ ┊状态无
文字项目符号 点状· 数字 无符号
文字其它说明 正常默认为点状符号,排行性质为数字符号,词语或者小空间区域可采用无符号
项目列表:
号文字格式字号┊字体宋体┊ 细体┊颜色自定义 □┊ 行距
动态连接样式鼠标初始:
颜色 ■ ┊状态无
鼠标经过:
颜色 ■ ┊状态下划线
鼠标点击:
颜色 ■ ┊状态下划线
鼠标结束:
颜色 ■ ┊状态无
文字项目符号 点状· 数字 无符号
文字其它说明 正常默认为点状符号,排行性质为数字符号,词语或者小空间区域可采用无符号
图片列表:
号文字格式字号┊字体宋体┊ 细体粗体┊颜色自定义 □┊ 行距无
动态连接样式鼠标初始:
颜色 ■ ┊状态无
鼠标经过:
颜色 ■ ┊状态下划线
鼠标点击:
颜色 ■ ┊状态下划线
鼠标结束:
颜色 ■ ┊状态无
文字其它说明 正常图片列表默认为细体,焦点图处采用粗体
④功能类
普通功能文字:
号文字格式字号┊字体宋体┊ 细体┊颜色 ■ ┊ 行距无
静态连接样式鼠标初始:
颜色 ■ ┊状态无
鼠标经过:
颜色 ■ ┊状态下划线
鼠标点击:
颜色 ■ ┊状态下划线
鼠标结束:
颜色 ■ ┊状态无
文字其它说明以下为各种功能文字应用形态
更多:
更多>> 更多应用于深背景连接连接色彩采用反白,连接颜色可自定义
全文:
[全文]
详细:
[详细]
评论:
[评论]
翻页功能:
[上一页]
⑤注释类
时间:
号文字格式字号┊字体宋体┊ 细体┊颜色 ■ ┊ 行距无
投票:
号文字格式字号┊字体宋体┊ 细体┊颜色 ■ ┊ 行距无
点击:
号文字格式字号┊字体宋体┊ 细体┊颜色 ■ ┊ 行距无 ⑥表单类
表单文字:
号文字格式字号┊字体宋体┊ 细体┊颜色 ■┊ 行距无
⑦正文类
正文文字:
号文字格式字号 ┊字体宋体 ┊ 细体┊颜色 ■┊ 行距无
图片规范
片类型:
①横图 ②竖图 ③方图 ④专题图 类型说明:
① 横图 比例 ┊ 尺寸种类 * ┊ 应用焦点图
* ┊ 应用通栏图片列表
* ┊ 应用图文混排图片列表
* ┊ 应用图片列表
* ┊ 应用图片列表
* ┊ 应用图片列表
比例 ┊ 尺寸种类 * ┊ 应用通栏图片列表
* ┊ 应用图片列表
比例 ┊ 尺寸种类 * ┊ 应用广告性图片 ②竖图 比例 ┊ 尺寸种类 * ┊ 应用图片列表
* ┊ 应用图文混排 ③方图 比例 ┊ 尺寸种类 * ┊应用图文混排
* ┊ 应用图文混排 ④专题图 普通专题 ┊ 尺寸种类 *┊ 应用普通专题
特殊专题 ┊ 尺寸种类 * ┊ 应用特殊专题
表单规范
图片类型:
①按纽 ②输入框 ③文本框 ④菜单 ⑤复选框 ⑥单选框 类型说明:
表单形式建议采用默认外观。
① 按纽 字号┊字体宋体┊ 细体┊颜色 ■ ┊ 行距无
按纽高度┊文字居中┊文字边距上 下 左 右 ②输入框 字号┊字体宋体┊ 细体┊颜色 ■ ┊ 行距无
按纽高度┊文字居中┊文字边距上下左右 ③文本框 字号┊字体宋体┊ 细体┊颜色 ■ ┊ 行距无
按纽高度┊文字居中┊文字边距上下左右 ④复选框 默认外观。
④单选框 默认外观。
④菜单 字号┊字体宋体┊ 细体┊颜色■ ┊ 行距无
按纽高度┊文字居中┊文字边距上下左右
色彩规范
基本结构:
白色 正面:
雪花,纯静,清白,和平,轻盈,纯洁、天真、洁净、真理、
反面:
寒冷,受伤,弱点,放弃,冷淡、贫乏,死寂
白色在中华文化中也代表着死亡的颜色。
黑色 正面:
夜晚,煤碳,能力,稳定,拘谨,可靠,能力,精致
反面:
害怕,无效,死亡,秘密,阴险,邪恶,病态
灰色 正面:
智能,成熟,财富,尊严,贡献,抑制
否定:
混乱,衰变,具体,阴影,沮丧,厌烦
红色 正面:
胜利激情爱力精力性别 热情、浪漫
否定:
血战争火危险怒撒旦火焰、暴力、侵略
红色在很多文化中代表的是停止的讯号,用于警告或禁止一些动作
黄色 正面:
明亮、光辉、黄金收获 改革
否定:
懦弱 叛逆嫉妒冒险疾病愚蠢
紫色 正面:
懦弱,叛逆,妒忌,危机,
否定:
疾病,愚蠢创造、谜、忠诚、神秘、稀有
创造、谜、忠诚、神秘、稀有
绿色 正面:
植物,自然,春天,肥沃,希望,安全 自然、稳定、成长、
反面:
衰变,无经验,羡慕,贪欲,逃避现实,坏的运气
在北美文化中,绿色代表的是「行」,与环保意识有关,也经常被连结到有关财政方面的事物。
蓝色 正面:
天空,海洋,精神性,定度,和平,个体忠诚、安全、保守、宁静、冷漠、悲伤
否定:
寒冷,沮丧,忧郁,淫秽,神秘,保守主义
白色在中华文化中也代表着死亡的颜色
,,
,
,
,
,,,
,
,
,
?
彩色爱好
的西方成人的彩色”通用”命令:
()蓝色的,()红色,格林,()紫色的,黄色的,()橘色
色彩尽量采用标准色网络安全色
选择色盘时请考虑功能性的颜色
色彩调和共性调和面积调和
色彩构成(),可以理解为色彩的作用,是在色彩科学体系的基础上,研究符合人们知觉和心理原则的配色。
配色有三类要素:
光学要素(明度、色相、纯度),存在条件(面积、形状、肌理、位置),心理因素(冷暖、进退、轻重、软硬、朴素华丽),设计的时候运用逻辑思维选择合适的色彩搭配,产生恰当的色彩构成。
最优秀的配色范本是自然界里的配色,我们观察自然界里的配色,通过理性的提炼最终获得我们所需要的东西。
小面积用强色,大面积用弱色
面积调和的原则是:
色彩面积的大小可以改变对比效果,对比色双方面积越大,调和效果越弱;反之,双方面积越小,调和效果越强。
对比双方面积均等,调和效果越弱;对比双方面积相差越大;调和效果越强。
只有恰当的面积比才能取得最好的视觉平衡,形成最好的视觉效果。
纯度对比调和。
色相对比调和多个色相对比调和两个补色对比调和两个类似色对比调和两个同一色对比调和灰色与高纯度黄色调和小面积用强色,大面积用弱色”。
功能模块
基本结构:
无。
来源:
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- WEB 产品线 设计 指南