大唐电信官方网站建设及运营方案

•
日常内容 更新
为了避免用户在网络情况不好的状态下打开页面速度 过慢导致的用户流失，我们使用loading来降低用户
属分公司站点添加
等待的焦躁
• • • 添加返回顶部按钮 在新窗口打开页面 添加页面加载中的效果
项目信息录入、审批流权限等
审批权限更新
关键词信息 设置
后台直接设定网站产品关 键词、长尾关键词、问题 关键词等
满足海外访问官方网站 PC端+手机端+Pad端=多屏展示 建立安全管理系统
全球化：随着互联网的广泛应用，使得官方网站需要快速服务全球各地的用户；
多样化：网络的发展，带动人们越来越多的使用碎片化时间，展示平台不再局限于PC端； 安全化：互联网的快速发展，使用户对于所浏览的网站安全越发重视；
板面划分是否清晰
交互性与易用性 文字内容主次搭配
内容更新及时性
可读性强
权限管理
程序安全等
9
• 现在官网分析 – 整体
官网页面设计宽度为1000px，我们需要将页面 宽度最少设为1200px
字号过小 页面字体字号我们需要根据字体版权和设计趋势 以及赏心悦目的查使得用户在各种尺寸的集团VI 规范做出相应的调整
日常运维效 率低
网站优化元 素没有
- 网站没有关键词设定，没有SEO, 全球加速,
网站安全性 不够
- 网站代码结构老化，安全系数相对太低
官网改版思考 •大唐集团 1
评估项
页面设计 栏目架构 网站功能 信息展示
优点借鉴
主色红LOGO 自己 日立 北汽
借鉴原因
页面布局清晰、呈现内容直观；充分服务于用户阅读和品牌信息呈现 栏目划分清晰、栏目静态化处理、可以通过URL识别栏目名称 功能丰富、使用便捷； 信息分类丰富，更新及时，分享信息及相关信息
•
后台根据实际需求，我们设置多个角色，不同的角色拥有不同的权限，比如本部通讯员，可以上传文章，但是文章需要本 部部门负责人审核通过之后才可以上线（即在前台显示）
•
•
后台我们增加统计功能，统计网站主要浏览量和不同搜索引擎进入网站的百分比
16
• 官网栏目规划
栏目结构规划
17
现状：网站功能不 完善
内容管理功 能不足
− − − − −
前台设置的缩略图，没有点击的效果 无法自行更换banner 新闻多分类,一条新闻属于多个分类 后台排序,推荐前页面等红节功能不好使 多种样式形式需少
多终端PC\WAP\IPAD、多语言版本
多终端、多 语言
大唐集团主要差异点
设计风格陈旧、不利于品牌价值体现、不利于用户阅读 栏目划分不清晰 功能模块单一、交互性差 内容分类单一；可读性内容少；涉及内容范围窄
视觉表现
• 通过科技、时尚的视觉设计展示 大唐集团国际化品牌 •
功能升级
通过订阅、分享功能使用户方便快 捷了解大唐集团后台系统高效完成 官网信息发布，PC+手机多终端展 示
10
• 现在官网分析 – PAD
左侧为平板电脑的显示样式，并没有对尺寸做出 相应适配
由于苹果对平板电脑（PAD）的宣传，使得平板的使用人群也 越来越多，平板电脑由于尺寸跟PC差的不多，我们可以直接 使用自适应的手法，适应平板的屏幕查看，可以减少一定的开 发成本
根据数据显示，现在人均手机使用时间已经超过电脑，所以我们需要对 手机的页面进行专门优化，重新做一套适合手机浏览和用户使用习惯的 页面视觉设计和交互设计
Web1.0
Байду номын сангаасWeb2.0
Web3.0
模板式 展示型
Asp、.NET、Table 传统官网
互动式 营销型
Html5+CSS
与未来衔接的营销型官网
未来
Semantic Web
智能化网络 理解词语和概念+之间的逻辑关 系，提高沟通效率和价值 5
• 顺应发展趋势，我们提出5S官网建站模型
遵从以用户体验为中心的Web设计核心思想，从战略布局，全方位满足用户需求！ 具体 视觉设计 界面/导航/信息设计 交互设计/信息架构 功能规格/内容需求 用户需求/网站目标 抽象
网站看起来让我感到愉悦 Comfort
• • •
在网速/流量有限的情况下，感到访问顺畅 在愉悦的访问过程中获得对品牌更高认可 获得视觉享受
• •
扁平化设计（Minimalism ） 符合设计趋势的超宽标头
清晰的界面结构，不易感到迷惑 Simple
•
以最快速度找到我需要的信息/服务
以便于“我” So that..
4
• 技术发展带动官网使命变革
一个电梯企业官网的使命，经历从单一“企业形象与产品展示”到互动“体验营销”的跨越变革，依靠的是：
用户层面，从访问（Visit）到访问者（Visitor）的革新； 交互层面，从点击行为（Click）到交互度（Engagement）的革新；
数据层面，从数据库的线性管理（ Data Management ）到数据仓库与大数据挖掘（Data Mining）的革新；
6
表现层 surface：包含了视觉设计和内容优化。
框架层 skeleton：进行界面设计、导航设计、信息设计。
结构层 structure：完成信息架构与交互设计。 范围层 scope：进行需求采集和需求分析工作，确定功 能范围和需求优先级。 战略层 strategy：明确商业目标和用户目标，解决两者 之间的冲突，找到平衡点，确定网站原则和定位。
例而导致图片变形，都需要重新改版优
化
15
• 现在官网分析 – 整体排版等样式
页面分析： • 页面多出样式不一致， • • • 列表侧边一部分使用正等边三角形，一部分 使用直角三角形，且颜色大小都不一致 分页控件样式不一致，一部分可以输入页码 进行跳转，一部分不能 虽然是中文站，但是网站内部多出中英文混杂
• •
不管是在巴黎、法兰克福还是东京，都能浏览访问 在全球各地、各端均加载流畅
•
进行全球CDN加速
8
• 官方网站综合分析模型
评分目的
根据“官网综合分析模型”的各项，对大唐电信官网分析 明确大唐电信网站的定位区别，参考竞品官网，给出网站定位。
分析模型
通过识别站内各个关键因素，并根据各因素的权重进行综合分析，给出该网站在企业形象、品牌传播、
展示与体验
•
•
重点展示企业大事件、企业文化、 科研实力、工程\股价信息 图文资讯、视频等多种形式进行资 讯展示
19
二、项目规划篇：
展示企业实力的官方网站
20
• 官网建设策略 2
通过对大唐集团官网以及竞品官网的调研、对大唐官网有了更为清晰的进行网站定位； 从全局角度出发，结合在数字整合营销领域的经验，提出官网建设策略；
网站架构-网站管理平台后台架构
网站功能 以用户体验为核心的整体设计
25
2
网站架构-网站管理平台后台架构
后台栏目的划分清晰明了，数据的访问统计方便管理员查看统计数据
注：pc和wap及多语言版本采用同一后台管理； 26
网站架构-网站管理平台后台架构
灵活的权限控制，可根据不同的人员级别设置管理栏目的权限
内容管理
网站信息、产品实时发布，设置SEO关键词， 方便用户搜索，有利于网站推广
响应式页面 布局
识别设备屏幕尺寸，
自动匹配不同版式页面
站点管理
pc、手机网站。后台统一管理，权限划分，管 理不同的信息板块
30
• 网站后台结构规划 - 网站pc/wap后台规划
2
网站内容功能
公司自有新闻日常更新 下属品牌内容更新及下
11
• 现在官网分析 – 首页
页面设计比较陈旧，包括导航 的设计、各个专题的设计等等， 我们都需要根据集团VI规范和 现在流行的设计趋势以及我们 主要适用人群做出相应的设计
修改
现在是读图时代，我们可以使用 大图来吸引用户眼球，将重点突 出的内容现在是图片上，并且将 图片也加上链接，让用户点击图 片就可以进入相应内页 这种弹窗动画非常影响用户查 看网页时的用户体验，让用户 无法专心查看页面内容，我们 可以将它放在侧边或者作为一 个通知公告来显示，这样可以 提高用户体验度。
• 平衡商业目标与用户目标之间的诉求冲突
大唐官网的诉求是相对明晰的，我们需要了解的是，对于大唐官方网站的访问者，他们需求什么？他们的诉 求一直都很简单……
大唐电梯官网诉求
与大唐的品牌形象相匹配 提升大唐的品牌传播效果 • • • • 整合各个层面的企业信息 面向世界展示实力 设计风格符合主流设计理念 信息反馈收集功能加强
12
• 现在官网分析 – 搜索
网站现在的搜索是整站搜索，搜索关键字除了标题，
文章内容也可以作为关键词进行搜索，这个做的很 搜索结果，我们可以根据栏目来进行区分， 方便用户更加快捷地找到想要的搜索结果 同样，网站搜索的整体样式比较陈旧，我们 也可以进行改版优化 好我们可以保留
由于搜索范围过大，我们需要有一个搜索 加载中的状态（类似下图），避免用户因 为搜索时间过长或者不知道正在搜索中， 而直接关闭网页，影响网站排名
树立全球化、国际化企业品牌形象
视觉 升级
内容 升级
功能 升级
体验 升级
根据聚焦理论，提供全面的、深入的报道企业财经资讯 构筑大唐品牌在国际市场的官方实力展示平台 21
规划实施
以用户体验为核心的整体设计
22
2
规划与实施
结合网站建设策略，在网站设计、网站架构、网站功能、技术支撑进行以下规划
网站架构
承载公司的组织架构+内 容+功能的发布。 增加多终端浏览 便于用户全面了解企业整 体形象，以及所需要的具 体信息。
大唐环境产业集团股份有限公司 官网建设及运营方案
2018/07/19
1
目录
Contents
1.背景分析 2.项目规划 3.运营维护 4.团队介绍
2
一、背景分析篇 企业官网现状及趋势分析
3
• 企业官网的发展趋势
用户遍布全球各地 利用碎片化时间、随时浏览 用户对于安全的重视
人们的信息获取诉求
官网三大发展趋势
访问者诉求（User Needs）
用户想快速从大唐官网得到所需信息 整体框架结构浏览清晰 用户操作使用便捷
更好的满足访问者的诉求，是网站核心竞争力
7
• 用户想要什么？
通过媒体信息、用户调查，我们发现……
要求：用户想从大唐官网得到什么信息/体 验？ 需求：用户想要达成的目的，将满足他们其他何种 目标？ 大唐应考虑的建设方向…
注：可以做成下接框形式,可定制显示效果,这个是目前形式 27
网站架构-网站管理平台后台架构
全站响应式制作（多尺寸、多分辨率），多终端（PC、手机）、多浏览器适配
28
网站架构-网站管理平台后台架构
自动备份技术
•关键数据每天多次备份，保留30天，普通数据每天备份保留7天
•分离交叉式、移动介质备份等多种手段，保证数据安全
13
• 现在官网分析 – 网站底部
当网站为中文时，尽量所有文字都使用中文， 设计样式需要更换更新颖样式
网站页面底部：页面底部（上图）有部分文字没有显示 全，底部内容显示不饱满，我们可以参考集团网站（下 图）的底部进行适当优化，使页面底部信息更加饱满， 更加协调
14
• 现在官网分析 – 内页
页面分析： • 网站现在很多页面排版没有对齐，字体、 图片过小，甚至图片上传尺寸没有等比
29
2
网站功能规划实施
静态化页面 全站页面实现静态化处理，便于CDN加速 页面路径栏目化，实现用户访问行为数据收集
自动切换 语言
自动识别用户所在地域IP， 匹配中、日、英文版本，并呈现不同的 内容 在线客服
自动应答在线客服。
解决大部分用户的常见咨询问题
接口对接
对接HR系统以及需求表单地区分配系
统，实现信息的最终分布，方便管理
信息展示效果方面的评估结果。
网站综合评估分析模型
页面设计
全球化设计风格
栏目架构
是否完整体现企业信息 栏目架构设计逻辑清晰 栏目之间连接是否直观 URL是否体现网站栏目
网站功能
栏目自主管理 内容自主管理 多语言版本管理 栏目及内容起停管理
信息展示
亮点信息展示 多媒体形式展示
技术支撑 网站打开速度 浏览器兼容性 是否提供多终端网站 网站日均流量
网站功能
前端功能贴合用户浏览和 使用需求；后端功能支撑 网站高效、便捷运行。
视觉设计
充分体现大唐集团的企业 定位和品牌形象，树立良 好的第一视觉形象；兼顾 用户访问体验。
技术与安全
建立完善的软防火机制 实再全球CDN加速服务 实现双机热备机制 7X24小时网络安全预警及 防御
23
2
网站架构-大唐集团官方网站pc/wap架构图
有我需要的产品/企业 信息 Helpful • • 对品牌/产品增加认知深度 将它分享出去
• • • •
聚合式导航 聚合信息流 友好导航（courtesy navigation）优化 内联导航 ( inline navigation）优化
• •
集合自媒体优质内容 用户根据需要进行分享
在世界各地都能轻松访问 Global