论文总字数：16189字

摘 要

随着“高科技，高质量，高水平服务”的竞争格局的逐渐形成，提高服务质量成为企业扩大市场占有率的重要因素。中兴客户服务管理系统，它能显示终端用户对业务与网络的体验和感受，并反映当前业务和网络的质量与用户期望间的差距，通过终端用户体验度的变化指导网络或者设备运行维护维。

而在这个系统中，直接和用户打交道的是系统的界面。优雅的界面风格以及流行的设计元素，无疑会给用户带来愉悦的用户体验。本系统界面以HTML5 CSS3 JQuery。布局方面选择了当前流行的基于“移动先行”的Bootstrap框架技术，并采用了扁平化风格设计，构建了一个简洁而又灵活的系统界面。部分数据的获取交互采用了Ajax技术，提高了用户体验。

关键词：移动先行 扁平化 用户体验

ZTE Customer Information Management System

Abstract

With the formation of the competition landscape of “High Tech,High Quality,High Service Level”,it’s essential for broadening market to improve service levels.ZTE Customer Information Management System will show users’ experiences and feelings to business and network, reflect the gaps between the current quality of services and users’ expectations,and direct the operation maintenance of network and devices through the variation of terminal users.

However,in this system,users contact the system interface directly.Elegant styles of interface and popular elements of design will give users pleasant experiences.Our system interface is based on HTML5,CSS3 and JQuery.We choose the current popular Bootstrap framework which based on “mobile first”,and adopt the flat style design to construct a concise and flexible system interface.Parts of the interaction of the data adopt the Ajax technology and it raise the users’ experience.

Key Words: mobile first; flat style design; users’ experience

摘 要 I

Abstract II

第一章 绪论 1

1.1 系统开发基础和设计手段 2

1.1.1 系统开发基础 2

1.1.2 系统设计手段 2

1.2 界面设计版本变更 2

1.3 章节概述 2

第二章 界面风格设计理念 3

2.1 扁平化风格设计理念 3

2.2 互联网时代移动先行理念 4

2.3 用户体验设计(UED)的重要意义 5

第三章 界面设计技术简介 5

3.1 Web网页设计三剑客 5

3.1.1 HTML5 5

3.1.2 CSS3 6

3.1.3 JQuery 7

3.2 Bootstrap框架技术 8

3.2.1 Bootstrap简介 8

3.2.2 Bootstrap使用 8

第四章 界面布局代码实现 10

4.1 地址栏 10

4.2 导航条 10

4.3 主体关键模块 11

4.3.1 主页 11

4.3.2 个人空间 14

4.3.3 公告信息 16

4.4 底部信息块 18

结束语 19

参考文献 20

致谢 21

第一章 绪论

在电信行业竞争日益激烈的今天，所有的运营商都在努力提升自己的服务质量，特别是对于网络服务质量的关注都达到了前所未有的高度。但我们是否考虑过这样一些问题：当我们看着网络质量逐步攀升的时候，客户是否能够同样感觉到运营商提供的服务质量在提高？客户如何感受到运营商服务质量的提高？

在这里，我们不谈论线下公司给予客户的服务，而从系统使用操作上提升用户的体验质量，这就要求我们不得不考虑客户对于系统的直观感受。好的用户体验甚至可以从另一方面提升用户对于网络服务质量的满意度，因此，系统的界面风格、界面元素以及交互技术也是客户心目中对于服务质量的一个重要指标。

1.1 系统开发基础和设计手段

1.1.1 系统开发基础

开发环境：Windows

开发工具：Eclipse/Mysql/Editplus/Navicat

开发语言：Jsp/JQuery/CSS/html5

1.1.2 系统设计手段

1. 使用HTML5描述网页内容。
2. 整体页面采用Bootstrap的栅格系统布局，局部采用选择器进行控制。
3. 使用JQuery对页面效果及性能进行优化，提高界面友好度。
4. 部分采用AJAX技术进行数据交互。
5. 为了实现团队协作开发和版本管理，我们将代码托管于Github上，对每 个人负责的部分进行了详细的划分。

1.2 界面设计版本变更

界面的设计前后经历了4个主要的版本变化，变化主要体现在应用技术和设计风格的改进与提高。

V1:模仿中兴官方网站，使用基本HTML CSS JavaScript设计。

V2:自主设计，使用JQuery处理响应，CSS盒状模型布局。

V3:自主设计，使用Bootstrap 2.3.2。

V4:自主设计，使用Bootstrap 3.3.2。

1.3 章节概述

1. 从扁平化风格设计理念、移动先行理念和用户体验设计的意义三个方面介绍了本系统的界面风格极其优势。
2. 介绍了网页设计中常用的HTML5、CSS3和JQuery的历史、功能及优势等信息，又通过Bootstrap框架的简介和使用让用户快速了解系统的设计。
3. 是对系统代码实现的详述，通过关键模块代码的剖析，向用户展示系统界面主体的实现信息。

第二章 界面风格设计理念

2.1 扁平化风格设计理念

当年人们对微软Windows8操作系统全面采用Metro界面风格的作法褒贬不一，但在一切还没有定论之前，IOS系统和Android系统却立即跟进，一时间扁平化设计风格风靡全球。于是一夜之间，好像所有的东西都被拍扁了，网页、软件、海报等各种界面都掀起了一阵扁平化的浪潮。

扁平化设计，英文名为“flat design”，这个概念2008年由Google提出。实际上，扁平化风格并不是什么新事物。早在上个世纪，设计界就有极简风格的流行。另外像传统的平面媒体，比如交通、公共场所指示系统等，也一贯采用的是扁平化的设计风格。

请支付后下载全文，论文总字数：16189字