Embed Size (px)
Citation preview
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 1
目录
网站色调. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3
网站字体. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4
图形设计模型. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
网页模版 . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . .9
模块内容 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17
网页设计模型. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 2
上海交通大学英文网站是一个具有国际化大学风范，展现交大风貌，优点，以国外师生用户服
务为重点的美观大气，功能全面，易于浏览和融合上海交大特色的网站。全站以红、蓝为主色调，
布局清晰，图文并貌，显示交大是国际化的百年老校，稳重又具有活力。
本Style Guide文档提供简单易懂的色调, 字体, 图形设计，网页模版, 模块内容和详细说明，
及相应的例子说明。帮助用户理解网站的页面架构、元素定义，以便在今后使用网站时，更容易的
进行网站维护、修改页面布局和元素风格。 网站色调： 主色调
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 3
RGB: 9/65/13 8 RGB: 51/51/51
HEX: 09418a HEX: 333333
第二主色调
RGB: 179 /39 /62 HEX: B3273E
网站字体：
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 4
图形字体
Arial Bold ——
Arial Bold ——
module headlines 1.3em 0.9em #b50729 #09418a CTA : style3 text 0.8em
sample:
International Education
International Education
html字体
Arial Regular ——
Arial Regular ——
body text 0.8em #333333 #09418a CTA : style 1 and 2 text 0.8em #09418a
Anna Baltzer’s presentation “Life in Occupied
Palestine: Eye Witness Stories and Photos”
rovides p Read more More Events
Arial Bold —— title and headline text 0.9em 0.8em #b50729
Seminar Rooms Seminar Rooms
图形设计模型:
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 5
首页 banner 图形设计
例子：首页 banner图形设计
• banner是一个面向对外的具象视觉窗口，可以展示交通大学最新的新闻
图片和事件，交通大学的历史和人文，风景等等，配上简介概括的文字 ，
让浏览者对交通大学有一个形象上的认识。
• 图片要求：因首页的设计兼顾交通大学形象和内容，都起着比较重要的作
用，banner部分占用比较大的比重，所以在首页图片 摄影角度 要求上比
较高。例如如哈佛，BU等大学的主页图片风格。
top navigation 图形设计
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 6
一级 top navigation
二级 top navigation——展开状态
•top navigation采用下拉菜
单方式显示二级菜单。
call to action (CTA) navigation
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 7
Read more
CTA: style 1. CTA: style 2. CTA: style 3.
•CTA:style 1 是文字形式的 CTA， 主要用于为了告知浏览者文字信息还有未显示
全的部分，点击该按钮后，将浏览到更多内容。
•CTA:style 2 是文字形式的 CTA， 主要用于文章下方，便于浏览者实现特殊的功
能。
•CTA:style 3 是列表按钮形式的 CTA，主要用于列表链接，当选中状态时，背景图
片会更换成另一张。
CTA: style 1. sample
CTA: style 2. sample
CTA: style 3. sample
standard footer
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 8
首页底部，包括版权、地址等信息。
二级、三级页面底部，包括二级导航菜单和版权、地址等信息。 网页模版：
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 9
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 10
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 11
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 12
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 13
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 14
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 15
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 16
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 17
模块内容：
1. top banner module
945x287
模
• 87px 块规格：
945x2•Jquery 建
• 可以放 10张左右的图片进行轮转显示
议：
• 可放标题 2行，正文 3至 4行 例
• 首页：作为首页 banner 放在顶部 子：
基
• 图片集在整个页面顶部呈现，
左侧为文字介绍。
本布局： 功
• 图片以渐隐方式消失和出现。 能详情：
• 底部三个按钮从左到右分别为“暂停”/“播放”、“上
一张”、“下一张”。
•“暂停”/“播放”，若当前是“暂停”状态，则点击后
将自动循环播放图片；若当前是“播放”状态，则点击
后停留在当前图片。
•“上一张”，点击此按钮则显示上一张图片。
•“下一张”，点击此按钮则显示下一张图片。
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 18
2. spotlight module 410x179
718x190
CTA: style 1.264x171
模
• 0px 块规格：
718x19• Jquery 建
• 最多 3行标题，正文 3至 4行 议：
例
• 新闻首页：作为新闻首页 spotlight 子：
基
• 功能区域：左边为轮转图片，
右边为跟随图片的文字片段。
本布局：
• 中文字片段包含： 其
1、 正标题 2、 副标题 3、 正文片段 4、 Read More CTA 按钮
• 下方是切换按钮。
功
• 图片以渐隐方式消失和出现。 能详情：
• 底部为信息内容数量。
• 当点击下面的数字，将跳转到对应的信息内容上。
• 默认显示第一条信息内容。
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 19
2. events[small]: vertical module
模
• 224xarbitrary 块规格：
建
• 显示最少 3 条信息内容。其中第一条可显示信息
缩略图，部分正文。后两条只显示标题和位置。
议：
例
• 首页的 Events模块 子：
基 • 模块标题
本布局：
• 左边统一显示日期、时间’ • 右边第一条若有信息图片则显示，若无则直接显
示标题和部分正文内容及 CTA: style 1.。之后再显
示 2 条信息。 功能详情：
76x72
CTA: style 1.
CTA: style 1.
224px
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 20
3. news[small]: vertical module
模
• 234xarbitrary 块规格：
建
• 显示最少 3 条信息内容。其中第一条显示信息缩
略图，部分正文。后两条只显示标题。
议：
例
• 首页的 News模块 子：
基 • 模块标题
本布局：
• 第一条若有信息图片则显示，若无则直接显示标
题和部分正文内容及 CTA: style 1.。之后再显示 2条信息。
功能详情：
191x85
CTA: style 1.
CTA: style 1.
234px
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 21
3. large picture module
模
• 7px 块规格：
508x56
• Jquery 建
• 显示最少 5张图片。 议：
例子： • template_10.html 基 • 模块标题
本布局：
• 模块副标题 • 上方显示大图 • 中间为导航栏，标识当前图片编号/总图片数和是否自
动播放按钮。 • 底部为总图片的缩略图 功
• 点击底 图，上方会载入其大图和标题、文字简介。 能详情：
部小
• 点击“start”按钮，将从当前图片开始自动循环播放。
• 点击“stop”按钮，将从当前图片停止自动循环播放
图片。
500x400
75x60
508x567
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 22
4. small picture module
模
• 6px 块规格：
182x25
• Jquery 建
• 显示最少 3张图片。 议：
例子： • template_10.html 基 • 模块标题
本布局：
• 上方显示大图 • 中间为导航栏，标识当前图片编号/总图片数和是否自
动播放按钮。 • 底部为总图片的缩略图 功
• 点击底 图，上方会载入其大图和标题、文字简介。 能详情：
部小
• 点击“start”按钮，将从当前图片开始自动循环播放。
• 点击“stop”按钮，将从当前图片停止自动循环播放
图片。
182x50
68x54
182x256
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 23
5. video module
模
• rbitrary 块规格：
508xa
• Flash 建
• 视频下可以显示 3至 5行的介绍文字。 议：
例子： • template_6.html 基 • 模块标题
本布局：
• 模块副标题 • 视频播放器大小：500x400px 功
• 点击视频播放器，则开始播放视频。 能详情：
• 视频播放器底部为功能按钮：
进度条
声音控制按钮
全屏播放按钮
500x400
CTA: style 1.
508px
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 24
6. lists[large]:vertical module
模
• 508xarbitrary 块规格：
例子： • template_14.html 基 • 模块标题
本布局：
• 带链接的文字 功能详情： • 链接列表用于侧栏或中间模块
508px
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 25
7. lists[small]:vertical module
模
• 182xarbitrary 块规格：
例子： • template_14.html 基 • 模块标题
本布局：
• 带链接的文字 功能详情： • 链接列表用于侧栏或中间模块
182px
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 26
8. text w/image [small]: module
模
• 46%，根据外围框架大小，自动收缩。 块规格：
例子： • template_3.html 基 • 模块标题
本布局：
• 带链接的文字 功能详情：
210x66
46%
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 27
9. 4 column text w/image module
模
• 00%，根据外围框架大小，自动收缩。
块规格： 1
• 每列宽度为 46%。 例子： • template_4.html 基
• 4列为竖 2列模块 本布局：
型
• 模块标题 • 带链接的文字或列表 功能详情：
100%
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 28
10. tabbed list [large] module
模
• 100%，根据外围框架大小，自动收缩。 块规格：
例子： • template_7.html 基 • 模块标题
本布局：
• 内容部分可以为图文列表、文字列表、文章等形式。 功
• 点击切换上方标签，下方显示对应内容。 能详情：
100%
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 29
11. tabbed list [small] module
模
• 100%，根据外围框架大小，自动收缩。 块规格：
例子： • template_7.html 基 • 模块标题
本布局：
• 内容部分可以为图文列表、文字列表、文章等形式。 功
• 点击切换上方标签，下方显示对应内容。 能详情：
100%
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 30
12. text w/image [large]: horizontal module
模
• 100%，根据外围框架大小，自动收缩。 块规格：
• 图片占 30%。 建
• 正标题 2行，副标题 2行。正文 3至 4行。 议：
例子： • template_9.html 基
• 方为一条信息内容，包含： 本布局： 上
1、 正、副标题 2、 3 至 4 行正文 3、 Read More CTA 按钮
• 下方为 5条其他信息内容列表 功能详情：
30%
CTA: style 1.
100%
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 31
13. text w/image [small]: horizontal module
模
• 100%，根据外围框架大小，自动收缩。 块规格：
• 图片占 30%。 建
• 左边为图片 议：
• 右边正标题 2行，副标题 2行。正文 3至 4行。 例子： • template_5.html
基
•正、副标题 本布局：
• 3 至 4 行正文 • Read More CTA 按钮 功能详情：
30%
CTA: style 1.
100%
style guide ·sjtu.edu.cn/english/
上海金仕达多媒体有限公司 32
14. teacher list module
模
•100%，根据外围框架大小，自动收缩。
块规格：
• 图片宽度 20%。
例子： • template_5_1.html
基
• 左边为图片 本布局：
• 右边为文字信息 功能详情：
100%
