产品设计指南含UI规范.docx

产品设计指南含UI规范.docx

《产品设计指南含UI规范.docx》由会员分享，可在线阅读，更多相关《产品设计指南含UI规范.docx（23页珍藏版）》请在冰豆网上搜索。

产品设计指南含UI规范

设计规范介绍

什么是设计规范？

《产品设计部·人机交互界面设计规范》适用用于WEB产品线的人机交互界面设计方面的指导手册。

贯穿以用户为中心的设计指导方向，根据新浪产品自身的特点制定出的一套规范，以达到提升用户体验，控制产品设计质量，提高设计效率的目的。

谁去读设计规范？

设计规范手册适合界面设计师，用户体验设计师，前台技术工程师，发布支持人员，运营编辑人员的参照。

设计理念

精于心简于形

通过精心简约的设计,传达先进的技术给用户提供便捷简单的使用体验

设计指导原则

A设计规范 逻辑性

设计为内容服务，根据逻辑关系通过视觉表现引导用户使用

例如：

googleyahoo搜索结果页通过字体的颜色大小突出重要度

扩展性

采取模块化设计的可扩展性，减少修改和再开发的成本。

例如：

奥运项目左右模块尺寸的统一可以方便编辑随时调用修改内容的位置

统一性

用统一的视觉规范，变化不能超越统一的尺度，个性化内容要有统一风格的继承

例如：

无论每个频道如何追求个性不能脱离新浪整体风格，要有继承和延续保持从属关系个案除外，个案量应有百分比，

本地化

考虑用户的文化背景及习惯，做到设计上本地化。

体现人文关怀

例如：

google，被搜索文字连接采用红色，及中国传统节日的logo体现。

设计上不照搬英文站应根据中文特色，体现中文之美

遵循视觉设计原理

页面外观

页面类型：

 ①普通页面    ②宽带页面    ③自适应页面    ④其他页面

类型说明：

① 普通页面

基本属性：

宽度 750px┊ 背景白色#FFFFFF ┊ 位置居中 ┊ 边距上5px；下20px；左0px；右0px

适用范围：

新浪首页频道首页频道二级频道各级正文页面等及其他非宽带产品线

②宽带页面

基本属性：

宽度 900px┊ 背景白色#FFFFFF ┊ 位置居中 ┊ 边距上5px；下20px；左0px；右0px

适用范围：

宽带频道首页和各级页面不包括正文页，及其他宽带产品线

③自适应

基本属性：

宽度 100%┊ 背景白色#FFFFFF ┊ 位置居中 ┊ 边距上5px；下20px；左0px；右0px

适用范围：

论坛聊天直播等页面

④其他页面

基本属性：

宽度 500px┊ 背景白色#FFFFFF ┊ 位置居中 ┊ 边距上5px；下20px；左0px；右0px

适用范围：

提示报错页面

指导原则：

属性中宽度、位置、边距为不可变数据。

属性中背景白色为常用色值，对于特殊个性化频道可根据特殊要求变更色彩或者使用背景图。

背景色彩遵循原则选择颜色尽量少用饱和度高的颜色， 减少用户视觉疲劳。

背景图片遵循原则尽量选择可复用的图片，减少页面文件量。

如果遇到页面整体外描边效果参照图例（01）。

页面结构

基本结构：

 ①标准头 ②内容区 ③标准尾

标准头分为：

新浪首页标准头\新闻中心标准头\频道首页标准头 \频道二级标准头\正文页面标准头\产品页面标准头

具体样式参见标准头规范

标准尾分为：

新浪首页标准尾\普通标准尾

具体样式参见标准尾规范

导航分为：

 频道导航\二级导航\专题导航&专题图\三级导航\导航指向 

具体样式参见导航规范

内容版面：

具体样式参见版式结构类型

通栏广告：

具体样式参见广告规范

结构应用：

 ①新浪首页 ②新闻频道 ③普通频道 ④频道二级 ⑤专题页面 ⑥三级页面 ⑦正文页面 ⑧产品页面

标准头部

类型分类：

①新浪首页标准头  ②新闻中心标准头  ③频道首页标准头  ④频道二级标准头   ⑤正文页面标准头 ⑥　产品页面标准头 

类型说明：

①新浪首页标准头

组成部分：

新浪网LOGO┊产品功能区┊整体网站导航

适用范围：

新浪首页

②新闻中心标准头

基本属性：

产品功能区┊整体网站导航┊广告区域

适用范围：

新闻中心

③频道首页标准头

基本属性：

产品功能区┊ 整体网站导航┊ 广告区

适用范围：

各频道首页

④频道二级标准头

基本属性：

频道LOGO┊产品功能区

适用范围：

各频道首页

⑤正文页面标准头

基本属性：

正文导航┊ 搜索功能

适用范围：

频道二极三级和专题页面

标准尾

类型分类：

 ①首页标准头尾  ②通用标准尾 类型说明：

 ①首页标准尾

基本属性：

相关导航┊ 版权信息┊ 相关许可证号

适用范围：

新浪首页

②通用标准尾

基本属性：

本频道信息┊ 相关导航┊ 版权信息

适用范围：

频道首页频道二极三级和专题页面正文页面

页面导航

类型分类：

 ①频道导航 ②二级导航 ③ 专题导航&专题图 ④ 三级导航 ⑤ 导航指向    

类型说明：

 ①频道导航

组成部分：

频道LOGO┊ 功能性导航┊ 主导航位置区┊次要导航位置区

适用范围：

新闻中心、频道首页及产品页面均可使用

②二级导航

组成部分：

二级导航

适用范围：

所有频道二级均可使用

③专题导航

组成部分：

专题图┊ 导航

适用范围：

专题页面，可根据需要添加删除专题导航

④三级导航

组成部分：

指向导航

适用范围：

三级页面

⑤正文导航

基本属性：

频道LOGO┊ 指向导航

适用范围：

正文页面

版式结构：

版块基本元素：

版块组合形式：

 版块元素之间距为8PX      同名版块元素间的距离为6PX  （例如EEC中EE距离为6EC距离为8PX H2等分版式为6PX）

ABC版块                          AF版块                              DC版块                            EEC版块

CFC版块                               FA版块                            CD版式                       CEE版式

H1通栏版式                        H2等分版式                         H3等分版式                       H4等分版式

H（N）分版式

模块类型

标题种类：

①焦点图 ② 头条区 ③A类模块 ④B类模块 ⑤C类模块

种类说明：

以下图例除特殊注明外，所指距离均包括模块边框线

① 焦点图 

② 头条区

③模块标题

④模块内容

⑤图片列表和图文混排

⑥段落关系

⑦段落格式

文字规范

样式类库：

 ①文字格式    ②连接样式    ③项目符号

注：

所有文字设计均依据下列样式组合

① 文字格式

12号字格式：

字号12px┊字体宋体&Arial ┊ 行距21px┊ 粗体&细体┊

14号字格式：

字号14px┊字体宋体&Arial ┊ 行距24px┊ 粗体&细体┊

10号字格式：

字号10px┊字体Arial      ┊ 行距无  ┊ 细体     ┊

20号字格式：

字号20 px┊字体 黑体&Arial ┊ 行距无  ┊ 细体     ┊

说明：

10号字格式，12号字格式，14号字格式中的数字英文字母为Arial，中文为宋体

② 连接样式

动态链接样式：

 鼠标初始：

颜色#000099 ■ ┊状态下划线 __

鼠标经过：

颜色#CC0000 ■ ┊状态下划线 __

鼠标点击：

颜色#CC0000 ■ ┊状态下划线 __

鼠标结束：

颜色#660066 ■ ┊状态下划线 __

静态连接样式：

鼠标初始：

颜色#自定义□┊状态无

鼠标经过：

颜色#自定义 □ ┊状态下划线 __

鼠标点击：

颜色#自定义 □ ┊状态下划线 __

鼠标结束：

颜色#自定义□┊状态无

重要链接样式：

鼠标初始：

颜色#CC0000 ■ ┊状态下划线 __

鼠标经过：

颜色#CC0000 ■ ┊状态下划线 __

鼠标点击：

颜色#CC0000 ■ ┊状态下划线 __

鼠标结束：

颜色#CC0000 ■ ┊状态下划线 __

③ 项目符号：

点状项目符号：

点    ·

数字项目符号：

数字  01020304050607080910

形状项目符号：

自定义

应用组合：

①导航类   ②标题类  ③信息类  ④段落类  ⑤功能类  ⑥注释类 ⑥表单类

①导航类

a 统一导航：

12号文字格式=字号12px┊字体宋体&Arial┊ 细体┊颜色#333333 ■┊ 行距21px

静态连接样式=鼠标初始：

颜色#333333 ■ ┊状态无

鼠标经过：

颜色#333333 ■ ┊状态下划线 __

鼠标点击：

颜色#333333 ■ ┊状态下划线 __

鼠标结束：

颜色#333333 ■ ┊状态无

文字其它说明=关键词句之间用竖杠符号 |间隔

b 本页导航：

12号文字格式=字号12px┊字体宋体&Arial┊ 细体┊颜色#自定义 □┊ 行距21px

静态连接样式=鼠标初始：

颜色#自定义 □ ┊状态无

鼠标经过：

颜色#自定义 □ ┊状态下划线 __

鼠标点击：

颜色#自定义 □ ┊状态下划线 __

鼠标结束：

颜色#自定义□ ┊状态无

文字其它说明=关键词句之间用竖杠符号 |间隔

c 标题导航：

 12号文字格式=字号12px┊字体宋体&Arial┊ 细体┊颜色#自定义 □┊ 行距21px

静态连接样式=鼠标初始：

颜色#000099 ■┊状态无

鼠标经过：

颜色#CC0000 ■ ┊状态下划线 __

鼠标点击：

颜色#CC0000 ■ ┊状态下划线 __

鼠标结束：

颜色#000099 ■ ┊状态无

文字其它说明=关键词句之间用横杠符号 -间隔

d导航指向：

12号文字格式=字号12px┊字体宋体&Arial┊ 细体┊颜色#自定义 □┊ 行距21px

静态连接样式=鼠标初始：

颜色#自定义 □ ┊状态无

鼠标经过：

颜色#自定义 □ ┊状态下划线 __

鼠标点击：

颜色#自定义 □ ┊状态下划线 __

鼠标结束：

颜色#自定义□ ┊状态无

文字其它说明=关键词句之间用大于号符号 >间隔

②标题类

a版块标题：

20号文字格式=字号20px┊字体黑体┊ 细体┊颜色#自定义 □┊ 行距无

静态连接样式=鼠标初始：

颜色#自定义 □ ┊状态无

鼠标经过：

颜色#自定义 □ ┊状态下划线 __

鼠标点击：

颜色#自定义 □ ┊状态下划线 __

鼠标结束：

颜色#自定义□ ┊状态无

文字其它说明=标题文字位置前可选择性修饰符号和图片,默认为无

a一类标题：

14号文字格式=字号14px┊字体宋体&Arial┊ 粗体┊颜色#自定义 □┊ 行距无

静态连接样式=鼠标初始：

颜色#000099 ■ ┊状态无

鼠标经过：

颜色#CC0000 ■ ┊状态下划线 __

鼠标点击：

颜色#CC0000 ■ ┊状态下划线 __

鼠标结束：

颜色#000099 ■ ┊状态无

文字其它说明=标题文字位置前可选择性修饰符号和图片,默认为三角形符号

a二类标题：

14号文字格式=字号14px┊字体宋体&Arial┊ 细体┊颜色#自定义 □┊ 行距24px

静态连接样式=鼠标初始：

颜色#000099 ■ ┊状态无

鼠标经过：

颜色#CC0000 ■ ┊状态下划线 __

鼠标点击：

颜色#CC0000 ■ ┊状态下划线 __

鼠标结束：

颜色#000099 ■ ┊状态无

文字其它说明=无

a三类标题：

12号文字格式=字号12px┊字体宋体&Arial┊ 粗体┊颜色#自定义 □┊ 行距21px

静态连接样式=鼠标初始：

颜色#000099 ■ ┊状态无

鼠标经过：

颜色#CC0000 ■ ┊状态下划线 __

鼠标点击：

颜色#CC0000 ■ ┊状态下划线 __

鼠标结束：

颜色#000099 ■ ┊状态无

文字其它说明=无

a四类标题：

12号文字格式=字号12px┊字体宋体&Arial┊ 细体┊颜色#自定义 □┊ 行距21px

静态连接样式=鼠标初始：

颜色#000099 ■ ┊状态无

鼠标经过：

颜色#CC0000 ■ ┊状态下划线 __

鼠标点击：

颜色#CC0000 ■ ┊状态下划线 __

鼠标结束：

颜色#000099 ■ ┊状态无

文字其它说明=无

c头条标题：

 20号文字格式=字号20px┊字体黑体&Arial┊ 细体┊颜色#自定义 □┊ 行距无

静态连接样式=鼠标初始：

颜色#CC0000 ■ ┊状态无

鼠标经过：

颜色#CC0000 ■ ┊状态下划线 __

鼠标点击：

颜色#CC0000 ■ ┊状态下划线 __

鼠标结束：

颜色#CC0000 ■ ┊状态无

文字其它说明=无

c正文标题：

 20号文字格式=字号20px┊字体黑体&Arial┊ 细体┊颜色#333333 ■ ┊ 行距无

文字其它说明=无

e段落标题：

14号文字格式=字号14px┊字体宋体&Arial┊ 细体┊颜色#333333 ■ ┊ 行距24px

文字其它说明=无

③信息类

a 14项目列表：

 14号文字格式=字号14px┊字体宋体&Arial┊ 细体┊颜色#自定义 □┊ 行距24px

动态连接样式=鼠标初始：

颜色#000099 ■ ┊状态无

鼠标经过：

颜色#CC0000 ■ ┊状态下划线 __

鼠标点击：

颜色#CC0000 ■ ┊状态下划线 __

鼠标结束：

颜色#660066 ■ ┊状态无

文字项目符号 =点状·& 数字01& 无符号

文字其它说明 = 正常默认为点状符号，排行性质为数字符号，词语或者小空间区域可采用无符号

b 12项目列表：

 12号文字格式=字号12px┊字体宋体&Arial┊ 细体┊颜色#自定义 □┊ 行距21px

动态连接样式=鼠标初始：

颜色#000099 ■ ┊状态无

鼠标经过：

颜色#CC0000 ■ ┊状态下划线 __

鼠标点击：

颜色#CC0000 ■ ┊状态下划线 __

鼠标结束：

颜色#660066 ■ ┊状态无

文字项目符号 =点状·& 数字01& 无符号

文字其它说明 = 正常默认为点状符号，排行性质为数字符号，词语或者小空间区域可采用无符号

b 图片列表：

   12号文字格式=字号12px┊字体宋体&Arial┊ 细体&粗体┊颜色#自定义 □┊ 行距无

动态连接样式=鼠标初始：

颜色#000099 ■ ┊状态无

鼠标经过：

颜色#CC0000 ■ ┊状态下划线 __

鼠标点击：

颜色#CC0000 ■ ┊状态下划线 __

鼠标结束：

颜色#660066 ■ ┊状态无

文字其它说明 = 正常图片列表默认为细体，焦点图处采用粗体

④功能类

a普通功能文字：

12号文字格式=字号12px┊字体宋体&Arial┊ 细体┊颜色#000099 ■ ┊ 行距无

静态连接样式=鼠标初始：

颜色#000099 ■ ┊状态无

鼠标经过：

颜色#CC0000 ■ ┊状态下划线 __

鼠标点击：

颜色#CC0000 ■ ┊状态下划线 __

鼠标结束：

颜色#000099 ■ ┊状态无

文字其它说明=以下为各种功能文字应用形态

更多：

更多>>   更多应用于深背景连接连接色彩采用反白,连接颜色可自定义

全文：

[全文]

详细：

[详细]

评论：

[评论]

翻页功能：

[上一页]

⑤注释类

a时间：

12号文字格式=字号12px┊字体宋体&Arial┊ 细体┊颜色#333333 ■ ┊ 行距无

b投票：

12号文字格式=字号14px┊字体宋体&Arial┊ 细体┊颜色#333333 ■ ┊ 行距无

c点击：

12号文字格式=字号14px┊字体宋体&Arial┊ 细体┊颜色#333333 ■ ┊ 行距无             ⑥表单类

a表单文字：

12号文字格式=字号12px┊字体宋体&Arial┊ 细体┊颜色#333333 ■┊ 行距无

⑦正文类

正文文字：

14号文字格式=字号14px ┊字体宋体&Arial ┊ 细体┊颜色#333333 ■┊ 行距无

图片规范

片类型：

 ①横图 ②竖图 ③方图  ④专题图 类型说明：

 ① 横图　  比例4:

3 ┊ 尺寸种类  280*210 ┊ 应用焦点图

130*98  ┊ 应用通栏图片列表

120*90  ┊ 应用图文混排图片列表

100*75  ┊ 应用图片列表

77*58  ┊ 应用图片列表

56*41  ┊ 应用图片列表

比例3:

2 ┊ 尺寸种类  130*87  ┊ 应用通栏图片列表

120*80 ┊ 应用图片列表

比例2:

1 ┊ 尺寸种类  120*60 ┊ 应用广告性图片            ②竖图 　  比例3:

4 ┊ 尺寸种类  75*100 ┊ 应用图片列表

55*73  ┊ 应用图文混排            ③方图    比例1:

1 ┊ 尺寸种类  55*55   ┊应用图文混排

38*38  ┊ 应用图文混排            ④专题图  普通专题 ┊ 尺寸种类  750*100┊ 应用普通专题

特殊专题 ┊ 尺寸种类  750*200 ┊ 应用特殊专题

表单规范

图片类型：

 ①按纽 ②输入框 ③文本框  ④菜单  ⑤复选框  ⑥单选框 类型说明：

 表单形式建议采用WIN2000默认外观。

① 按纽    字号12px┊字体宋体&Arial┊ 细体┊颜色#333333 ■ ┊ 行距无

按纽高度20px┊文字居中┊文字边距上4px 下5px 左20px 右20px             ②输入框  字号12px┊字体宋体&Arial┊ 细体┊颜色#333333 ■ ┊ 行距无

按纽高度20px┊文字居中┊文字边距上3px下5px左3px右3px 　               ③文本框  字号12px┊字体宋体&Arial┊ 细体┊颜色#333333 ■ ┊ 行距无

按纽高度20px┊文字居中┊文字边距上5px下5px左5px右5px 　             ④复选框  WIN2000默认外观。

             ④单选框  WIN2000默认外观。

             ④菜单    字号12px┊字体宋体&Arial┊ 细体┊颜色#333333■ ┊ 行距无

按纽高度20px┊文字居中┊文字边距上3px下5px左3px右3px

色彩规范

基本结构：

白色   正面：

雪花，纯静，清白，和平，轻盈,纯洁、天真、洁净、真理、

反面：

寒冷，受伤，弱点，放弃,冷淡、贫乏，死寂

白色在中华文化中也代表着死亡的颜色。

黑色    正面：

夜晚，煤碳，能力，稳定，拘谨，可靠，能力，精致

反面：

害怕，无效，死亡，秘密，阴险，邪恶，病态

灰色  正面：

智能，成熟，财富，尊严，贡献,抑制

否定：

混乱，衰变，具体，阴影，沮丧,厌烦

红色  正面：

胜利激情爱力精力性别 热情、浪漫

否定：

血战争火危险怒撒旦火焰、暴力、侵略

红色在很多文化中代表的是停止的讯号，用于警告或禁止一些动作

黄色    正面：

明亮、光辉、黄金收获 改革

否定：

懦弱 叛逆嫉妒冒险疾病愚蠢

紫色    正面：

懦弱，叛逆，妒忌，危机，

否定：

疾病,愚蠢创造、谜、忠诚、神秘、稀有

创造、谜、忠诚、神秘、稀有

绿色    正面：

植物，自然，春天，肥沃，希望,安全  自然、稳定、成长、

反面：

衰变，无经验，羡慕，贪欲，逃避现实,坏的运气

在北美文化中，绿色代表的是「行」，与环保意识有关，也经常被连结到有关财政方面的事物。

蓝色    正面：

天空，海洋，精神性，定度，和平,个体忠诚、安全、保守、宁静、冷漠、悲伤

否定：

寒冷，沮丧，忧郁，淫秽，神秘,保守主义

白色在中华文化中也代表着死亡的颜色

CULTURE

RED

BLUE

GREEN

YELLOW

WHITE

USA,Europe

Danger

Manliness,sweet,calm,Authority

Safety,safe,sour

Caution,Cowardice

Purity

France

Nobility

Freedom,Peace

Criminality

preliminary

Neutrality

Egypt,ArabNations

Death

Virtue,Faith,Truth

Fertility,Strength

Happiness,WelfareorWealth

Joy

India

Life,Creativity

WelfareorWealth,Fertility

Success

Death,Purity

Japan

Anger,Danger

Shame,Despicableness

Future,Youth,Energy

Grace,Dignity,Nobility,childish,joyful

Death

China

Happiness,Joy,Festivity

Sky,Clouds

Mingdynasty,royal,Honor

Birth,Wealth,StrengthorPower

?

彩色爱好

的西方成人的彩色”通用”命令:

（1）蓝色的,

（2）红色，格林,（4）紫色的，黄