移动端用户体验（UE）优化历程
前言
项目是用sap的BI智能决策分析系统，java运用spring+springMVC+hibernate，数据库运用了sap企业的HANA内存数据库。前端技术采用bootstrap+datetimepicker+ztree开发的偏pc端的数据决策系统。css
需求
因为某企业对该产品的使用逐渐增长的手机端，而pc浏览较少，而该系统针对可能是pc端，移动端能够说毫无用户体验，现对移动端进行逐步优化移动端用户体验。其一期需求大体以下：html
- 将原左侧导航转移到下方，造成更适合移动端的系统。
- 将原ztree组件造成的树形多选控件，转换为移动端。
具体设计
因为改项目已经完成，而开发周期有限，总体基于bootstrap进行优化，我在其中担任的角色是前端开发工程师兼ui设计，这个项目，没有产品、没有ui、没有测试，两我的，一个前端，一个后端，完成全部优化工做。责任巨大。前端
移动端导航改造java
原导航效果图如图所示：spring
这一效果的导航细看并无考虑移动端，彻底是pc端的风格，并且具有前端缓存的功能，以前也一直在思考前端缓存的问题，怎么样才能去提高系统性能的提高，并无明确的方式方法能够去作，看到这一个应用在管理系统内的前端缓存，知道了一种教好的方式去作一些改动不频繁，的前端页面缓存，减轻服务器的压力和负担。数据库
- 此种前端缓存作法流程以下：
- 导航处，跳转到对应页面，经过读取data-toggle属性，将相关页面以div的形式添加到内容页面
<a id="5" href="http://222.247.36.46/user/toList" data-toggle="navTab" data-target="userNav">
- 每个不一样的页面，在页面上只要经过导航请求获得的html以及数据，都在页面上，分块，而且提供了一个页签的形式，便于下一次，切换不一样的页面，其达到的效果以下图所示
加载过第一次以后，其他每一次点击切换页签所得到的页面都是页面自己已经存在的，只须要控制其显隐就达到了前端缓存的效果。json
- 为了保留前端缓存且能有移动端的效果，对前端导航进行了改造，具体改造步骤多且繁琐，在此就不详细介绍了，直接贴出改造后的效果图以下：
树形结构文件优化bootstrap
- 原版
原版这一个树结构多选地区选择方式，彻底不符合移动端的风格，采用的ztree控件的样式，在移动端并不能有好的体验，后端
- 第二版
第二版是在作的时候考虑的需求有着多选的需求，我想不到在移动端有什么好的方式去技能知足移动端ue，又能知足多选需求，充分发挥脑细胞，在ztree的基础上，进行样式的更改获得第二个版本。缓存
- 第三版
第三版下降需求，要求只能单选，故选用mobileselect插件来进行制做，具体代码实现以下：
var mobileSelect4 = new MobileSelect({
trigger: '.sel-area',
title: '地区选择',
wheels: [
{data:[
{
id:'1',
value:'所有',
childs:[ {id:'0',value:'请选择'},
{id:'1',value:'未分配片区',childs:[ {id:"0",value:"请选择"},
{id:"1",value:"阿瑞包装产品子公司"},
{id:"2",value:"阿瑞包装产品子公司"}
]},
{id:'1',value:'西南片区',childs:[
{id:"0",value:"请选择"},
{id:"1",value:"重庆地区"},
{id:"2",value:"成都地区"}
]},
]
}
]}
],
position:[0],
callback:function(indexArr, data){
console.log(data); //返回选中的json数据
}
});
这一款插件，我在使用时，在以div开头的页面模板中直接引入css，和js，实现出来的效果会有问题，必须将引入css和js的代码放入head标签中才可行
<head>
<link rel="stylesheet" type="text/css" href="${ctx }/static/js/board/area/css/mobileSelect.css">
<script src="${ctx }/static/js/board/area/js/mobileSelect.js"></script>
</head>
结语
这一次移动端优化，对我而言收获的是前端缓存的部分，为我本身的前进道路打开了新的天窗，同时对组件的封装有了新的认识，之后会试着本身封装属于本身的组件。共勉。