文字规范

样式类库：  ① 文字格式     ② 连接样式     ③ 项目符号
注：所有文字设计均依据下列样式组合
  ① 文字格式
12号字格式： 字号 12 px ┊字体 宋体&Arial  ┊ 行距 21 px ┊ 粗体&细体 ┊
14号字格式： 字号 14 px ┊字体 宋体&Arial  ┊ 行距 24 px ┊ 粗体&细体 ┊
10号字格式： 字号 10 px ┊字体 Arial       ┊ 行距 无    ┊ 细体      ┊
20号字格式： 字号 20 px ┊字体 黑体&Arial  ┊ 行距 无    ┊ 细体      ┊

说明：10号字格式，12号字格式，14号字格式中的数字英文字母为Arial，中文为宋体
           ② 连接样式
              动态链接样式： 鼠标初始： 颜色 #000099 ■ ┊状态 下划线 __
                             鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __
                             鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __
                             鼠标结束： 颜色 #660066 ■ ┊状态 下划线 __

              静态连接样式： 鼠标初始： 颜色 #自定义 □ ┊状态 无
                             鼠标经过： 颜色 #自定义 □ ┊状态 下划线 __
                             鼠标点击： 颜色 #自定义 □ ┊状态 下划线 __
                             鼠标结束： 颜色 #自定义 □ ┊状态 无

              重要链接样式： 鼠标初始： 颜色 #CC0000 ■ ┊状态 下划线 __
                             鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __
                             鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __
                             鼠标结束： 颜色 #CC0000 ■ ┊状态 下划线 __

           ③ 项目符号：
              点状项目符号： 点     ·
              数字项目符号： 数字   01 02 03 04 05 06 07 08 09 10
              形状项目符号： 自定义

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

         　 ① 导航类

a 统一导航： 12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #333333 ■┊ 行距 21 px
静态连接样式 = 鼠标初始： 颜色 #333333 ■ ┊状态 无
鼠标经过： 颜色 #333333 ■ ┊状态 下划线 __
鼠标点击： 颜色 #333333 ■ ┊状态 下划线 __
鼠标结束： 颜色 #333333 ■ ┊状态 无
文字其它说明 = 关键词句之间用竖杠符号 | 间隔

b 本页导航： 12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #自定义 □ ┊ 行距 21 px
静态连接样式 = 鼠标初始： 颜色 #自定义 □ ┊状态 无
鼠标经过： 颜色 #自定义 □ ┊状态 下划线 __
鼠标点击： 颜色 #自定义 □ ┊状态 下划线 __
鼠标结束： 颜色 #自定义 □ ┊状态 无
文字其它说明 = 关键词句之间用竖杠符号 | 间隔

c 标题导航： 12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #自定义 □ ┊ 行距 21 px
静态连接样式 = 鼠标初始： 颜色 #000099 ■┊状态 无
鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标结束： 颜色 #000099 ■ ┊状态 无
文字其它说明 = 关键词句之间用横杠符号 - 间隔

d 导航指向： 12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #自定义 □ ┊ 行距 21 px
静态连接样式 = 鼠标初始： 颜色 #自定义 □ ┊状态 无
鼠标经过： 颜色 #自定义 □ ┊状态 下划线 __
鼠标点击： 颜色 #自定义 □ ┊状态 下划线 __
鼠标结束： 颜色 #自定义 □ ┊状态 无
文字其它说明 = 关键词句之间用大于号符号 > 间隔

         　 ② 标题类

a 版块标题： 20号文字格式 = 字号 20 px ┊ 字体 黑体 ┊ 细体 ┊ 颜色 #自定义 □ ┊ 行距 无
静态连接样式 = 鼠标初始： 颜色 #自定义 □ ┊状态 无
鼠标经过： 颜色 #自定义 □ ┊状态 下划线 __
鼠标点击： 颜色 #自定义 □ ┊状态 下划线 __
鼠标结束： 颜色 #自定义 □ ┊状态 无
文字其它说明 = 标题文字位置前可选择性修饰符号和图片,默认为无

a 一类标题： 14号文字格式 = 字号 14 px ┊ 字体 宋体&Arial ┊ 粗体 ┊ 颜色 #自定义 □ ┊ 行距 无
静态连接样式 = 鼠标初始： 颜色 #000099 ■ ┊状态 无
鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标结束： 颜色 #000099 ■ ┊状态 无
文字其它说明 = 标题文字位置前可选择性修饰符号和图片,默认为三角形符号

a 二类标题： 14号文字格式 = 字号 14 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #自定义 □ ┊ 行距 24 px
静态连接样式 = 鼠标初始： 颜色 #000099 ■ ┊状态 无
鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标结束： 颜色 #000099 ■ ┊状态 无
文字其它说明 = 无

a 三类标题： 12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 粗体 ┊ 颜色 #自定义 □ ┊ 行距 21 px
静态连接样式 = 鼠标初始： 颜色 #000099 ■ ┊状态 无
鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标结束： 颜色 #000099 ■ ┊状态 无
文字其它说明 = 无

a 四类标题： 12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #自定义 □ ┊ 行距 21 px
静态连接样式 = 鼠标初始： 颜色 #000099 ■ ┊状态 无
鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标结束： 颜色 #000099 ■ ┊状态 无
文字其它说明 = 无

c 头条标题： 20号文字格式 = 字号 20 px ┊ 字体 黑体&Arial ┊ 细体 ┊ 颜色 #自定义 □ ┊ 行距 无
静态连接样式 = 鼠标初始： 颜色 #CC0000 ■ ┊状态 无
鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标结束： 颜色 #CC0000 ■ ┊状态 无
文字其它说明 = 无

c 正文标题： 20号文字格式 = 字号 20 px ┊ 字体 黑体&Arial ┊ 细体 ┊ 颜色 #333333 ■ ┊ 行距 无
文字其它说明 = 无

e 段落标题： 14号文字格式 = 字号 14 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #333333 ■ ┊ 行距 24 px
文字其它说明 = 无

③ 信息类

a 14项目列表： 14号文字格式 = 字号 14 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #自定义 □ ┊ 行距 24 px
动态连接样式 = 鼠标初始： 颜色 #000099 ■ ┊状态 无
鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标结束： 颜色 #660066 ■ ┊状态 无
文字项目符号 = 点状· &  数字01 &  无符号
文字其它说明 = 正常默认为点状符号，排行性质为数字符号，词语或者小空间区域可采用无符号

b 12项目列表： 12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #自定义 □ ┊ 行距 21 px
动态连接样式 = 鼠标初始： 颜色 #000099 ■ ┊状态 无
鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标结束： 颜色 #660066 ■ ┊状态 无
文字项目符号 = 点状· &  数字01 &  无符号
文字其它说明 = 正常默认为点状符号，排行性质为数字符号，词语或者小空间区域可采用无符号

b 图片列表：   12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体&粗体 ┊ 颜色 #自定义 □ ┊ 行距 无
动态连接样式 = 鼠标初始： 颜色 #000099 ■ ┊状态 无
鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标结束： 颜色 #660066 ■ ┊状态 无
文字其它说明 = 正常图片列表默认为细体，焦点图处采用粗体

④ 功能类

a 普通功能文字： 12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #000099 ■ ┊ 行距 无
静态连接样式 = 鼠标初始： 颜色 #000099 ■ ┊状态 无
鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标结束： 颜色 #000099 ■ ┊状态 无
文字其它说明 = 以下为各种功能文字应用形态
更多：更多>>    更多应用于深背景连接连接色彩采用反白,连接颜色可自定义

全文：[全文]
详细：[详细]
评论：[评论]
翻页功能：[上一页]

⑤ 注释类

a 时间： 12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #333333 ■ ┊ 行距 无
b 投票： 12号文字格式 = 字号 14 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #333333 ■ ┊ 行距 无
c 点击： 12号文字格式 = 字号 14 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #333333 ■ ┊ 行距 无             ⑥ 表单类
a 表单文字：12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #333333 ■┊ 行距 无

⑦ 正文类
正文文字：14号文字格式 = 字号 14 px  ┊ 字体 宋体&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默认外观。

① 按纽    字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #333333 ■ ┊ 行距 无
按纽高度 20px┊文字居中┊ 文字边距 上4px  下5px  左20px  右20px             ② 输入框  字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #333333 ■ ┊ 行距 无
按纽高度 20px┊文字居中┊ 文字边距 上3px 下5px 左3px 右3px  　               ③ 文本框  字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #333333 ■ ┊ 行距 无
按纽高度 20px┊文字居中┊ 文字边距 上5px 下5px 左5px 右5px  　             ④ 复选框  WIN2000默认外观。             ④ 单选框  WIN2000默认外观。             ④ 菜单    字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #333333■ ┊ 行距 无
按纽高度 20px┊文字居中┊ 文字边距 上3px 下5px 左3px 右3px

出处：
责任编辑：bluehearts

上一页 新浪网产品设计指南(含UI规范) [6] 下一页 新浪网产品设计指南(含UI规范) [8]