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

Bowman_han 發布于2019-08-02 16:04 / 3231人閱讀

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

前言

項目是用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標簽中才可行

結語

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

云服務器 GPU云服務器移動端體驗 webrtc移動端傳輸優化用戶體驗用戶體驗部

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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開發在早期占領了大多...

pepperwang 2019-08-20 12:14 評論0 收藏0