移動端用戶體驗（UE）優(yōu)化歷程

Brenner 發(fā)布于2019-08-23 11:45 / 1815人閱讀

摘要：需求由于某企業(yè)對該產(chǎn)品的使用逐漸增加的手機端，而瀏覽較少，而該系統(tǒng)針對多是端，移動端可以說毫無用戶體驗，現(xiàn)對移動端進行逐步優(yōu)化移動端用戶體驗。將原組件形成的樹形多選控件，轉(zhuǎn)換為移動端。

前言

項目是用sap的BI智能決策分析系統(tǒng)，java運用spring+springMVC+hibernate，數(shù)據(jù)庫運用了sap企業(yè)的HANA內(nèi)存數(shù)據(jù)庫。前端技術(shù)采用bootstrap+datetimepicker+ztree開發(fā)的偏pc端的數(shù)據(jù)決策系統(tǒng)。

需求

由于某企業(yè)對該產(chǎn)品的使用逐漸增加的手機端，而pc瀏覽較少，而該系統(tǒng)針對多是pc端，移動端可以說毫無用戶體驗，現(xiàn)對移動端進行逐步優(yōu)化移動端用戶體驗。其一期需求大致如下：

將原左側(cè)導(dǎo)航轉(zhuǎn)移到下方，形成更適合移動端的系統(tǒng)。

將原ztree組件形成的樹形多選控件，轉(zhuǎn)換為移動端。

具體設(shè)計

由于改項目已經(jīng)完成，而開發(fā)周期有限，整體基于bootstrap進行優(yōu)化，我在其中擔(dān)任的角色是前端開發(fā)工程師兼ui設(shè)計，這個項目，沒有產(chǎn)品、沒有ui、沒有測試，兩個人，一個前端，一個后端，完成所有優(yōu)化工作。責(zé)任巨大。

移動端導(dǎo)航改造

原導(dǎo)航效果圖如圖所示：

這一效果的導(dǎo)航細(xì)看并沒有考慮移動端，完全是pc端的風(fēng)格，而且具備前端緩存的功能，之前也一直在思考前端緩存的問題，怎么樣才能去提升系統(tǒng)性能的提升，并沒有明確的方式方法可以去做，看到這一個應(yīng)用在管理系統(tǒng)內(nèi)的前端緩存，知道了一種教好的方式去做一些改動不頻繁，的前端頁面緩存，減輕服務(wù)器的壓力和負(fù)擔(dān)。

此種前端緩存做法流程如下：

導(dǎo)航處，跳轉(zhuǎn)到對應(yīng)頁面，通過讀取data-toggle屬性，將相關(guān)頁面以div的形式添加到內(nèi)容頁面

每一個不同的頁面，在頁面上只要通過導(dǎo)航請求得到的html以及數(shù)據(jù)，都在頁面上，分塊，并且提供了一個頁簽的形式，便于下一次，切換不同的頁面，其達到的效果如下圖所示

加載過第一次之后，其余每一次點擊切換頁簽所獲得的頁面都是頁面本身已經(jīng)存在的，只需要控制其顯隱就達到了前端緩存的效果。

為了保留前端緩存且能有移動端的效果，對前端導(dǎo)航進行了改造，具體改造步驟多且繁瑣，在此就不詳細(xì)介紹了，直接貼出改造后的效果圖如下：

樹形結(jié)構(gòu)文件優(yōu)化

原版

原版這一個樹結(jié)構(gòu)多選地區(qū)選擇方式，完全不符合移動端的風(fēng)格，采用的ztree控件的樣式，在移動端并不能有好的體驗，

第二版

第二版是在做的時候考慮的需求有著多選的需求，我想不到在移動端有什么好的方式去技能滿足移動端ue，又能滿足多選需求，充分發(fā)揮腦細(xì)胞，在ztree的基礎(chǔ)上，進行樣式的更改得到第二個版本。

第三版

第三版降低需求，要求只能單選，故選用mobileselect插件來進行制作，具體代碼實現(xiàn)如下：

var mobileSelect4 = new MobileSelect({
      trigger: ".sel-area",
      title: "地區(qū)選擇",
      wheels: [
                  {data:[
                      {
                          id:"1",
                          value:"全部",
                          childs:[ {id:"0",value:"請選擇"},
                              {id:"1",value:"未分配片區(qū)",childs:[    {id:"0",value:"請選擇"},
                                      {id:"1",value:"阿瑞包裝產(chǎn)品子公司"},
                                     {id:"2",value:"阿瑞包裝產(chǎn)品子公司"}
                                ]},
                                 {id:"1",value:"西南片區(qū)",childs:[
                                 {id:"0",value:"請選擇"},
                                      {id:"1",value:"重慶地區(qū)"},
                                     {id:"2",value:"成都地區(qū)"}
                                ]},
                             
                          ]
                      }
          
                  ]}
              ],
      position:[0],
      callback:function(indexArr, data){
          console.log(data); //返回選中的json數(shù)據(jù)
      } 
  });

這一款插件，我在使用時，在以div開頭的頁面模板中直接引入css，和js，實現(xiàn)出來的效果會有問題，必須將引入css和js的代碼放入head標(biāo)簽中才可行

結(jié)語

這一次移動端優(yōu)化，對我而言收獲的是前端緩存的部分，為我自己的前進道路打開了新的天窗，
同時對組件的封裝有了新的認(rèn)識，以后會試著自己封裝屬于自己的組件。共勉。