•
日常内容 更新
为了避免用户在网络情况不好的状态下打开页面速度 过慢导致的用户流失，我们使用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
规划与实施
结合网站建设策略，在网站设计、网站架构、网站功能、技术支撑进行以下规划
网站架构
承载公司的组织架构+内 容+功能的发布。 增加多终端浏览 便于用户全面了解企业整 体形象，以及所需要的具 体信息。