成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

移動(dòng)端用戶體驗(yàn)（UE）優(yōu)化歷程

0xE7A38A / 3290人閱讀

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

前言

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

需求

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

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

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

具體設(shè)計(jì)

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

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

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

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

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

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

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

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

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

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

原版

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

第二版

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

第三版

第三版降低需求，要求只能單選，故選用mobileselect插件來進(jìn)行制作，具體代碼實(shí)現(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ù)
      } 
  });

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113891.html

相關(guān)文章

  • 移動(dòng)端用戶體驗(yàn)（UE）優(yōu)化歷程

    摘要：需求由于某企業(yè)對該產(chǎn)品的使用逐漸增加的手機(jī)端，而瀏覽較少，而該系統(tǒng)針對多是端，移動(dòng)端可以說毫無用戶體驗(yàn)，現(xiàn)對移動(dòng)端進(jìn)行逐步優(yōu)化移動(dòng)端用戶體驗(yàn)。將原組件形成的樹形多選控件，轉(zhuǎn)換為移動(dòng)端。 前言 項(xiàng)目是用sap的BI智能決策分析系統(tǒng)，java運(yùn)用spring+springMVC+hibernate，數(shù)據(jù)庫運(yùn)用了sap企業(yè)的HANA內(nèi)存數(shù)據(jù)庫。前端技術(shù)采用bootstrap+datetime...

    Bowman_han 評論0 收藏0

  • 移動(dòng)端用戶體驗(yàn)（UE）優(yōu)化歷程

    摘要：需求由于某企業(yè)對該產(chǎn)品的使用逐漸增加的手機(jī)端，而瀏覽較少，而該系統(tǒng)針對多是端，移動(dòng)端可以說毫無用戶體驗(yàn)，現(xiàn)對移動(dòng)端進(jìn)行逐步優(yōu)化移動(dòng)端用戶體驗(yàn)。將原組件形成的樹形多選控件，轉(zhuǎn)換為移動(dòng)端。 前言 項(xiàng)目是用sap的BI智能決策分析系統(tǒng)，java運(yùn)用spring+springMVC+hibernate，數(shù)據(jù)庫運(yùn)用了sap企業(yè)的HANA內(nèi)存數(shù)據(jù)庫。前端技術(shù)采用bootstrap+datetime...

    Brenner 評論0 收藏0

  • 從零搭建移動(dòng)H5開發(fā)項(xiàng)目實(shí)戰(zhàn)

    摘要：并且除了常用的端，還要考慮微信端，或者是端。所以我們要有一套機(jī)制，在端上走的代碼，在端或者微信端上走端對應(yīng)的代碼。對于一個(gè)從零開始的移動(dòng)端項(xiàng)目，我總結(jié)了以上這些移動(dòng)開發(fā)難點(diǎn)，希望之后的人能少踩點(diǎn)坑，站在我的肩膀上提高項(xiàng)目開發(fā)的效率和質(zhì)量。 從零搭建移動(dòng)H5開發(fā)項(xiàng)目實(shí)戰(zhàn) 前端H5的前世今身 在Pc的時(shí)代，前端技術(shù)無疑統(tǒng)治了大多數(shù)用戶的交互界面！而在移動(dòng)為王的今天，NA開發(fā)在早期占領(lǐng)了大多...

    terro 評論0 收藏0

  • 從零搭建移動(dòng)H5開發(fā)項(xiàng)目實(shí)戰(zhàn)

    摘要：并且除了常用的端，還要考慮微信端，或者是端。所以我們要有一套機(jī)制，在端上走的代碼，在端或者微信端上走端對應(yīng)的代碼。對于一個(gè)從零開始的移動(dòng)端項(xiàng)目，我總結(jié)了以上這些移動(dòng)開發(fā)難點(diǎn)，希望之后的人能少踩點(diǎn)坑，站在我的肩膀上提高項(xiàng)目開發(fā)的效率和質(zhì)量。 從零搭建移動(dòng)H5開發(fā)項(xiàng)目實(shí)戰(zhàn) 前端H5的前世今身 在Pc的時(shí)代，前端技術(shù)無疑統(tǒng)治了大多數(shù)用戶的交互界面！而在移動(dòng)為王的今天，NA開發(fā)在早期占領(lǐng)了大多...

    pepperwang 評論0 收藏0

發(fā)表評論

0條評論

0xE7A38A

男|高級講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<