Transcript 国家图书馆新版网站建设思路

国家图书馆新版网站建设思路
国家图书馆
2014.11
一、建设目标
+ 以用户需求为导向
+ 实现资源服务整合揭示
+ 实现网站页面多屏适配
+ 实现用户数据统计分析
国家图书馆新版网站建设
二、前期工作
1. 调研用户需求（2014年5-7月）
到馆用户
馆内部处
业界馆
较多关注：查阅数字资源、检索馆藏目录、观看在线展览讲座；
较少关注：国图以及图书馆界的新闻动态、图书馆特色服务与应用，
专题网站；
访问方式：电脑（76.6%），手机（14.2%），pad（7.8%）
用户建议：重视资源服务整合，强化信息资源导航，采用新技术优
化用户交互体验等
国家图书馆新版网站建设
二、前期工作
1. 调研用户需求（2014年5-7月）
到馆用户
馆内部处
业界馆
部处建议：
76.2%的部门认为相关
业务内容已在现版网站
中充分体现，满足业务
需求。
各部处意见主要为增强
网站互动性、资源检索
下载便捷性、网页设计
简约美观、增加访问统
计、资源使用指南等
国家图书馆新版网站建设
二、前期工作
1. 调研用户需求（2014年5-7月）
到馆用户
馆内部处
业界馆
较多关注：新闻公告、
查阅数字资源、专题
网站；
改进建议：界面简洁、
导航清晰、增强资源
整合揭示，加强交互
性
国家图书馆新版网站建设
二、前期工作
2. 调研国内外图书馆网站（2014年4-6月）
国外：澳大利亚、新加坡、
新西兰、加拿大、法国、荷
兰、英国、美国、日本
国内：北大图书馆、上海图
书馆、湖北省图书馆、香港
公共图书馆
国家图书馆新版网站建设
二、前期工作
2. 调研国内外图书馆网站（2014年4-6月）
① 设计简洁 条理清晰
页面简洁，背景简化，少装饰元素
框架结构清晰
颜色一般不超过四种
整站字体样式规则，差别起到视觉引导
交互过程简化，用户记忆负担轻
国家图书馆新版网站建设
二、前期工作
2. 调研国内外图书馆网站（2014年4-6月）
① 设计简洁 条理清晰
② 利用大图 突出内容
图文混排，用户在文字和图片信息间跳
转，生动活泼;
语言表述浅显易懂，图片选择亦与内容
紧密相关
国家图书馆新版网站建设
二、前期工作
2. 调研国内外图书馆网站（2014年4-6月）
① 设计简洁 条理清晰
② 利用大图 突出内容
③ 布局规整 多屏适应
一般采用左右、左中右、上下结构；
或综合使用左右和上下布局进行混排，
进行响应设计，适应多屏；
国家图书馆新版网站建设
二、前期工作
2. 调研国内外图书馆网站（2014年4-6月）
① 设计简洁 条理清晰
② 利用大图 突出内容
③ 布局规整 多屏适应
④ 注重导航 全面集中
多通过下拉菜单将所有栏目内容分类、
分级地列出来，使用户在首页，通过一
次跳转就可以访问到多级页面内容，在
空间上起到了对网站内容集中揭示的作
用。
国家图书馆新版网站建设
二、前期工作
2. 调研国内外图书馆网站（2014年4-6月）
① 设计简洁 条理清晰
② 利用大图 突出内容
③ 布局规整 多屏适应
④ 注重导航 全面集中
⑤ 信息可视 易于理解
美国、英国、日本等国家图书馆都对网
站内容增加了文字、图片诠释，使抽象
的信息可视化
国家图书馆新版网站建设
二、前期工作
3. 梳理新版网站内容（2014年4-6月）
首页栏目设置
首页不要揭示全部栏目内容，重点呈现读者最关注栏目
首页栏目数控制在7个以内
区域
1、检索区域
2、热点图片区域
3、资源导引区域
4、服务揭示区域
5、动态消息区域
6、互动区域
馆藏目录
典籍博物馆
数字馆藏
8类科研服务
盲人图书馆
掌上国图
国图新闻
呼叫中心
文津搜索
经典诵读
10类数据库
在线讲座
残疾人图书馆
国图空间
公告
意见建议
栏目内容
特色资源
每周一库
在线展览
少儿图书馆
业界动态
微博微信
地方馆资源
其他热点图
站内搜索
文津图书奖
各类预告
在线咨询
国家图书馆新版网站建设
二、前期工作
3. 梳理新版网站内容（2014年4-6月）
整站结构设置
无更新栏目
建议取消
国家图书馆新版网站建设
二、前期工作
4. 技术路线（2014年7-9月）
1、考虑基于HTML5标准进行全站架构建设。
2、广泛采用CSS+DIV布局。
3、实现多屏兼容。
3、改进动画方式，利用javascript实现交互。
4、实现网站访问统计。
国家图书馆新版网站建设
二、前期工作
4. 技术路线（2014年7-9月）
多屏合一
方式
跳转
响应式
云适配
特点
判断用户访问
设备，如为移
动设备则跳转
到wap站
设计时考虑所有
可能的屏幕分辨
率，以代码判断
并适应
完成pc站建设
后通过云适配
工具进行移动
端自定义开发
优点
工作量最小
全面兼容各种型
号设备
工作量小，可
自定义同/异步
缺陷
运维分属不同
部门
工作量巨大
兼容设备较响
应式少
案例
新浪、腾讯
澳大利亚图书馆
中国政府网
国家图书馆新版网站建设
二、前期工作
4. 技术路线（2014年7-9月）
跳转
响应设计
云适配
Info.3g.qq.com
国家图书馆新版网站建设
二、前期工作
4. 技术路线（2014年7-9月）
跳转
响应设计
云适配
国家图书馆新版网站建设
工
二、前期工作
4. 技术路线（2014年7-9月）
跳转
响应设计
云适配
国家图书馆新版网站建设
二、前期工作
4. 技术路线（2014年7-9月）
数据统计
方式
内嵌代码
技术部
特点
在各页面嵌入百度等
开源统计黛米
我部已将对新版网站
访问统计需求提交信
息技术部，由其统一
升级全馆网站统计
优点
可用cms平台批量嵌
入，工作量小
技术部可全面掌握全
馆网站统计数据
缺陷
部分功能需定制并产
生费用
--
案例
光明网、中国新闻网
-国家图书馆新版网站建设
三、设计方案
设计新版首页方案（2014年5-10月）
独立设计：3版
与公司合作设计：10版
数字资源部设计方案一，分为两屏，第
一屏重点突出数字馆藏、文津搜索、文
津经典诵读与每周一库等特色服务，第
二屏分类揭示馆藏资源与服务内容。
国家图书馆新版网站建设
三、设计方案
设计新版首页方案（2014年5-10月）
数字资源部设计方案二，以扁平化设计
为主，在首页重点呈现检索、馆藏与服
务。对其他读者关注度较低的栏目内容
以导航方式集中呈现。
国家图书馆新版网站建设
三、设计方案
设计新版首页方案（2014年5-10月）
合作设计方案一，重点突出文津搜索与
数字馆藏。将经典诵读、每周一库等热
点图片作为文津搜索背景，起到美化作
用同时缩短整个页面长度。
国家图书馆新版网站建设
三、设计方案
设计新版首页方案（2014年5-10月）
合作设计方案二，采用时下流行的多屏
设计方式，每屏为一个主题区域，读者
滚动或点击鼠标切换到下一屏。第一屏
为导航、检索与热点图片，第二屏为数
字馆藏，第三屏为读者指南，第四屏资
源服务信息。
国家图书馆新版网站建设
工 作 汇 报
三、设计方案
设计新版首页方案（2014年5-10月）
合作设计方案三，以简洁配色突出重点
呈现内容
国家图书馆新版网站建设
工 作 汇 报
三、设计方案
设计新版首页方案（2014年5-10月）
合作设计方案四，采用多屏设计方式，
第一屏为导航、读者互动和热点图片，
第二屏突出文津检索与数字馆藏，第三
屏为各类数据库资源，第四屏为读者服
务讯息。此方案首页导航采用悬浮置顶
方式，配色及区域划分同时考虑PC端与
移动端兼容。
国家图书馆新版网站建设
2014.10