移动端用户体验（UE）优化历程

Bowman_han 发布于2019-08-02 16:04 / 3046人阅读

摘要：需求由于某企业对该产品的使用逐渐增加的手机端，而浏览较少，而该系统针对多是端，移动端可以说毫无用户体验，现对移动端进行逐步优化移动端用户体验。将原组件形成的树形多选控件，转换为移动端。

前言

项目是用sap的BI智能决策分析系统，java运用spring+springMVC+hibernate，数据库运用了sap企业的HANA内存数据库。前端技术采用bootstrap+datetimepicker+ztree开发的偏pc端的数据决策系统。

需求

由于某企业对该产品的使用逐渐增加的手机端，而pc浏览较少，而该系统针对多是pc端，移动端可以说毫无用户体验，现对移动端进行逐步优化移动端用户体验。其一期需求大致如下：

将原左侧导航转移到下方，形成更适合移动端的系统。

将原ztree组件形成的树形多选控件，转换为移动端。

具体设计

由于改项目已经完成，而开发周期有限，整体基于bootstrap进行优化，我在其中担任的角色是前端开发工程师兼ui设计，这个项目，没有产品、没有ui、没有测试，两个人，一个前端，一个后端，完成所有优化工作。责任巨大。

移动端导航改造

原导航效果图如图所示：

这一效果的导航细看并没有考虑移动端，完全是pc端的风格，而且具备前端缓存的功能，之前也一直在思考前端缓存的问题，怎么样才能去提升系统性能的提升，并没有明确的方式方法可以去做，看到这一个应用在管理系统内的前端缓存，知道了一种教好的方式去做一些改动不频繁，的前端页面缓存，减轻服务器的压力和负担。

此种前端缓存做法流程如下：

导航处，跳转到对应页面，通过读取data-toggle属性，将相关页面以div的形式添加到内容页面

每一个不同的页面，在页面上只要通过导航请求得到的html以及数据，都在页面上，分块，并且提供了一个页签的形式，便于下一次，切换不同的页面，其达到的效果如下图所示

加载过第一次之后，其余每一次点击切换页签所获得的页面都是页面本身已经存在的，只需要控制其显隐就达到了前端缓存的效果。

为了保留前端缓存且能有移动端的效果，对前端导航进行了改造，具体改造步骤多且繁琐，在此就不详细介绍了，直接贴出改造后的效果图如下：

树形结构文件优化

原版

原版这一个树结构多选地区选择方式，完全不符合移动端的风格，采用的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标签中才可行

结语

这一次移动端优化，对我而言收获的是前端缓存的部分，为我自己的前进道路打开了新的天窗，
同时对组件的封装有了新的认识，以后会试着自己封装属于自己的组件。共勉。

私有云专线服务移动端体验 webrtc移动端传输优化用户体验用户体验部

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54599.html

移动端用户体验（UE）优化历程

摘要：需求由于某企业对该产品的使用逐渐增加的手机端，而浏览较少，而该系统针对多是端，移动端可以说毫无用户体验，现对移动端进行逐步优化移动端用户体验。将原组件形成的树形多选控件，转换为移动端。前言项目是用sap的BI智能决策分析系统，java运用spring+springMVC+hibernate，数据库运用了sap企业的HANA内存数据库。前端技术采用bootstrap+datetime...

0xE7A38A 2019-08-29 16:39 评论0 收藏0
移动端用户体验（UE）优化历程

摘要：需求由于某企业对该产品的使用逐渐增加的手机端，而浏览较少，而该系统针对多是端，移动端可以说毫无用户体验，现对移动端进行逐步优化移动端用户体验。将原组件形成的树形多选控件，转换为移动端。前言项目是用sap的BI智能决策分析系统，java运用spring+springMVC+hibernate，数据库运用了sap企业的HANA内存数据库。前端技术采用bootstrap+datetime...

Brenner 2019-08-23 11:45 评论0 收藏0
从零搭建移动H5开发项目实战

摘要：并且除了常用的端，还要考虑微信端，或者是端。所以我们要有一套机制，在端上走的代码，在端或者微信端上走端对应的代码。对于一个从零开始的移动端项目，我总结了以上这些移动开发难点，希望之后的人能少踩点坑，站在我的肩膀上提高项目开发的效率和质量。从零搭建移动H5开发项目实战前端H5的前世今身在Pc的时代，前端技术无疑统治了大多数用户的交互界面！而在移动为王的今天，NA开发在早期占领了大多...

terro 2019-08-29 11:32 评论0 收藏0
从零搭建移动H5开发项目实战

摘要：并且除了常用的端，还要考虑微信端，或者是端。所以我们要有一套机制，在端上走的代码，在端或者微信端上走端对应的代码。对于一个从零开始的移动端项目，我总结了以上这些移动开发难点，希望之后的人能少踩点坑，站在我的肩膀上提高项目开发的效率和质量。从零搭建移动H5开发项目实战前端H5的前世今身在Pc的时代，前端技术无疑统治了大多数用户的交互界面！而在移动为王的今天，NA开发在早期占领了大多...

dreamGong 2019-08-05 10:23 评论0 收藏0
从零搭建移动H5开发项目实战

摘要：并且除了常用的端，还要考虑微信端，或者是端。所以我们要有一套机制，在端上走的代码，在端或者微信端上走端对应的代码。对于一个从零开始的移动端项目，我总结了以上这些移动开发难点，希望之后的人能少踩点坑，站在我的肩膀上提高项目开发的效率和质量。从零搭建移动H5开发项目实战前端H5的前世今身在Pc的时代，前端技术无疑统治了大多数用户的交互界面！而在移动为王的今天，NA开发在早期占领了大多...

pepperwang 2019-08-20 12:14 评论0 收藏0