移動端用戶體驗（UE）優化歷程

時間 2019-11-16

標籤移動用戶體驗優化歷程欄目無線简体版

原文原文鏈接

前言

項目是用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>