<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          JSTree 默認展開 樹節點默認展開

          前端達人

          紅色部分

           

                                        $("#jstree_demo")

                                         .jstree({                                 

                                             "core" : {

                                                 "animation" : 0,

                                                 "check_callback" : true,

                                                 'force_text' : true,

                                                 "themes" : { "stripes" : true },

                                         // so that create works

                                             "check_callback" : true,

                                             'data' : function (obj, callback) {

                                                          var jsonstr="[]";

                                                          var jsonarray = eval('('+jsonstr+')');

                                                          

                                                          $.ajax({

                                                              type: "POST",

                                                              url:url,

                                                              dataType:"json",

                                                              async: false,

                                                              success:function(result) {

                                                      

                                                                

                                                                  var arrays= result;

                                                        

                                                                  for(var i=0 ; i<arrays.length; i++){

                                                                   console.log(Object.getOwnPropertyNames(arrays[i]).sort());

                                                                      var arr = {

                                                                              "id":arrays[i].id,

                                                                              "parent":arrays[i].pid==""?"#":arrays[i].pid,

                                                                              "text":arrays[i].name,

                                                                              "type":arrays[i].iconSkin,

                                                                              "state": {"opened" : true}

                                                                              //"state": {"selected":true}

                                                                      }

                                                                      jsonarray.push(arr);

                                                                  }

                                                              }

           

                                                          });

                                                          

                                                          callback.call(this, jsonarray);

                                                      }

                                                  },

                                                   

                                                  "plugins" : [ "search""state""types""wholerow","checkbox" ]

                                              });








          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          解決火狐瀏覽隱藏不了滾動條問題

          前端達人

          解決火狐瀏覽隱藏不了滾動條問題

          1.里層容器的width多17px,外層容器溢出隱藏,能兼容各個瀏覽器

          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          .outContainer {
          width:350px;
          height:300px;
          overflow: hidden;
          }
          .inContainer {
             height:300px;
             width: 367px;
             overflow-x:hidden;
             overflow-y:scroll;
          }

          2.設置 scrollbar-width: none,可兼容

          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          16
          17
          18
          19
          20
          21
          22
          23
          24
          .outContainer {
          width:350px;
          height:300px;
          overflow: hidden;
          }
          .inContainer {
             height:300px;
             width: 350px;
             overflow-x:hidden;
             overflow-y:scroll;
             scrollbar-width: none; 
          }
          /* 使用偽類選擇器 ::-webkit-scrollbar ,兼容chrome和safari瀏覽器 */
          .inContainer::-webkit-scrollbar{
              display: none;
          }
          /*兼容火狐*/
          .inContainer {
             scrollbar-width: none;
          }
          /* 兼容IE10+ */
          .inContainer {
              -ms-overflow-style: none;
          }

          html如下

          1
          2
          3
          4
          5
          6
          7
          8
          9
          <body>
              <div class="outContainer" >
                  <div class="inContainer">
                      <div class="inContent" ></div>
                      <div class="inContent inContent2"></div>
                      <div class="inContent" ></div>
                  </div>
              </div>
          </body>


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

          如何做好適老化設計?

          資深UI設計者

          如何做好適老化設計?支付寶設計師送你9個實用錦囊!

          如何做好適老化設計?支付寶設計師送你9個實用錦囊!

          如何做好適老化設計?支付寶設計師送你9個實用錦囊!

          如何做好適老化設計?支付寶設計師送你9個實用錦囊!

          如何做好適老化設計?支付寶設計師送你9個實用錦囊!

          如何做好適老化設計?支付寶設計師送你9個實用錦囊!

          如何做好適老化設計?支付寶設計師送你9個實用錦囊!

          如何做好適老化設計?支付寶設計師送你9個實用錦囊!

          如何做好適老化設計?支付寶設計師送你9個實用錦囊!

          如何做好適老化設計?支付寶設計師送你9個實用錦囊!

          如何做好適老化設計?支付寶設計師送你9個實用錦囊!


          如何做好適老化設計?支付寶設計師送你9個實用錦囊!

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          文章來源:優設  作者:Alipay


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務



          掌握這五個方法,幫你提升智能產品體驗

          資深UI設計者

          場景細分

          隨著各大智能廠商對用戶行為數據的收集積累,拆分提煉出了不同場景下用戶的特定需求,相比以前的大而全臃腫的功能界面,現在的功能、信息更加精確,產品將不同場景下的解決方案為用戶提前準備好,用戶只需要簡單的選擇就好,更加人性便捷。

          1. B&O 音箱歌曲模糊切換界面

          掌握這五個方法,幫你提升智能產品體驗

          B&O 音箱面向的人群是音樂發燒友,他們對音樂有獨到的理解,為了為用戶提供便捷合乎口味的音樂,B&O 將歌曲類型與顏色情感相結合,分別是:黃色代表愉快的歌曲、紅色代表激情的歌曲、紫色代表憂郁的歌曲、藍色代表輕松的歌曲。用戶只需要選擇顏色就可以播放相應風格的音樂,給用戶濃烈的感性藝術氣息。

          掌握這五個方法,幫你提升智能產品體驗

          并且 B&O 將音樂播放場景做了細分:只收聽自己收藏的歌曲、收聽與自己品味相似的歌曲、隨便聽聽;這三個場景下的需求通過三層圓環來滿足:點擊外環區域播放全網歌曲、點擊中環區域播放與用戶收藏相似的歌曲、點擊內環區域播放用戶收藏的歌曲。這種感性的操作方式省去了搜索歌曲的過程,極大的提高了便捷性。

          2. 三星智能冰箱 2.0 系統

          掌握這五個方法,幫你提升智能產品體驗

          我們先了解一下三星智能冰箱 1.0 的系統是什么樣的,首頁包含時間、天氣顯示、音樂播放、購物清單、備忘錄、相冊、留言板、設備控制,用戶在冰箱面板上什么都能做,整體感覺是一個臃腫的功能集合。

          掌握這五個方法,幫你提升智能產品體驗

          在 2.0 中,三星將用戶使用場景做了以下的細分:烹飪模式、日常模式、娛樂休閑模式、家庭管理模式;在烹飪場景下,為用戶展現菜譜,用戶可以專注的去研究飯菜制作方法;在日常場景下,為用戶提供日歷、照片墻、留言板、日程等日常生活相關信息;娛樂場景下,用戶可以在廚房一邊忙碌一邊聽音樂,還可以查看社交消息,所有的功能都是圍繞娛樂休閑;家庭管理場景下,全職媽媽可以一邊做著飯,一邊看著監控屏幕上兒童房孩子的情況及全屋的安防情況,也可以控制家中的設備。

          場景細分可以有重點的為用戶提供他們真正需要的服務,讓用戶感受到產品帶來的貼心感。

          3. Orvibo 燈光照明場景

          掌握這五個方法,幫你提升智能產品體驗

          Orvibo 根據用戶使用燈光的習慣,按照用戶對于光線的需求程度,將燈光使用場景分為:夜晚光線昏暗需要明亮的光照、白天光線充足不需要燈光、休閑時需要柔和些的光線、閱讀需要不刺眼但明亮的光線、起夜時微弱的輪廓照明即可。為用戶提供每種場景下的照明方案,準確快速的滿足用戶不同的需求。

          4. 小米 TV 端空調控制界面

          掌握這五個方法,幫你提升智能產品體驗

          小米根據用戶對于空調各個功能的操作頻率,羅列出核心功能:開關、溫度調節、冷熱模式,界面中只體現這幾種種信息,將低頻功能隱藏起來,為視覺降噪,突出核心功能,提升了用戶操控效率。

          5. WOM 天氣展示模塊

          掌握這五個方法,幫你提升智能產品體驗

          針對那些上班中不方便看手機、穿好衣服正要出門、旅游到達當地酒店需要看一眼天氣狀況的場景,WOM 提供了簡潔直觀的設計方案,產品顯示區域只保留 4 種常見天氣類型,高亮的天氣 icon 代表當前的天氣狀況,當天氣將要發生變化時,相應的天氣 icon 會閃爍。

          掌握這五個方法,幫你提升智能產品體驗

          此外,通過利用顏色來傳達不同的溫度,藍色代表 0℃,白色代表10℃,黃色代表20℃,紅色代表30℃,在不需要手機的情況下為用戶提供了豐富的展現形式。

          6. 三星電子畫框

          掌握這五個方法,幫你提升智能產品體驗

          隨著手機的普及,家庭對于電視的需求已不完全是為了收看節目,往往一個禮拜也看不了幾回。三星基于這種情況為了延續電子屏幕的銷量,賦予了電視裝飾屬性,演變為純展示的電子畫框,用戶可以選擇各種風格的肖像或風景圖片進行輪播展示,扮演藝術裝飾畫的角色,從而滿足用戶日常家庭裝飾需求。

          直觀明確的表現方式

          在設計中融入圖片,將操作、狀態可視化,這些具象的形式可以讓用戶快速理解并操作,讓我們看看各大智能產品廠商是如何實施的:

          1. Nest 溫控器安裝界面

          掌握這五個方法,幫你提升智能產品體驗

          大多數智能設備買回家后,需要用戶自己安裝,有的甚至牽扯到線路問題,Nest 溫控器安裝界面采用與實物一致的模型元素,讓用戶有參照依據;通過零部件的運動告訴用戶安裝順序;通過放大細節,告訴用戶應該選哪一個部件及如何鏈接。讓用戶有更好的參與感、成就感,還可以降低公司的人力安裝成本、客服成本。

          2. 小米智能家居電視

          掌握這五個方法,幫你提升智能產品體驗

          小米智能家居電視背景運用實物圖片,給用戶營造家庭的氛圍,設備卡片 icon 運用半寫實風格,和實際產品一一對應,便于用戶快速查找設備;卡片底部體現設備狀態,精簡的卡片信息使得設備的狀態更容易被用戶感知到。

          3. 三星、蘋果智能家居系統首頁

          掌握這五個方法,幫你提升智能產品體驗

          三星、蘋果都運用圖片作為系統的背景,可以很好的和用戶拉近距離,通過白色或磨砂卡片與背景做區分,三星的設備 icon 采用多彩漸變風格,和它趨于年輕化、時尚個性的品牌戰略方向保持一致。

          4. Whirlpool 洗衣機、烤箱、冰箱模式選擇界面

          掌握這五個方法,幫你提升智能產品體驗

          由于洗衣機、烤箱、冰箱的運行模式和用戶想要洗的衣物類型、材質、烹飪的食物類型、儲藏的食物類型有強關聯,Whirlpool 運用圖片作為模式背景,將功能和物品類型結合,用戶可以直觀感性的理解和區分各個功能,從而快速做出選擇。

          5. Orvibo MixPad

          掌握這五個方法,幫你提升智能產品體驗

          Orvibo 在大屏智能面板的設計上大量使用圖片元素,不僅可以區分各個功能模塊,還增添了內容的豐富性,要知道智能面板的首屏和設備控制列表頁功能是不一樣的,它是用來承接并向用戶展示房間內各個信息的,房間圖片作為背景烘托出家的氛圍,每個房間頁面的左上角顯示屋內溫度、濕度、當前開啟的設備類型及數量,很直觀的向用戶展示屋內信息。

          掌握這五個方法,幫你提升智能產品體驗

          每個場景都用具體的圖片作為卡片背景,可以讓用戶預想到每個場景對應的運行效果。有的場景卡片中體現所屬房間信息,告訴用戶該場景只聯動運行特定區域的設備。

          運用圖片會有以下問題:1、找到能體現各個特定功能的圖片增加了人力成本;2、圖片的多樣性容易打破畫面的整體統一感。所以要結合公司的現狀克制的運用圖片。

          6. Amazon 智能家居系統

          掌握這五個方法,幫你提升智能產品體驗

          Amazon 的監控設備卡片背景外顯了房間內的監控畫面,用戶在設備列表界面就可以直觀的看到監控區域的信息,強調了用戶關注的內容,縮短了操作步長。

          7. Lenovo Smart Clock 備忘提醒時間設置界面

          掌握這五個方法,幫你提升智能產品體驗

          通常,我們設置時間時,系統會給我彈出時間選擇控件,需要我們上下滑動設置;Lenovo Smart Clock 的做法是將時、分的設置具象成了時鐘實際運行的圓形軌跡,與用戶對于時間的認知保持一致,很貼心的設計,這種方式非常值得我們學習。

          8. Google Nest Hub 定時界面

          掌握這五個方法,幫你提升智能產品體驗

          Google Nest Hub 將傳統的定時列表具象成了一個個正在倒計時的時鐘,用戶可以更直觀的看到每個定時的狀態。點擊某個定時卡片可以快速的進行暫?;騽h除操作。

          9. 小米空氣凈化器界面

          掌握這五個方法,幫你提升智能產品體驗

          小米空氣凈化器界面,每一檔空氣質量值都對應不同的顏色,并且將顏色延續到了其他操控按鈕,讓用戶對當前空氣質量有更強的感知;凈化器被關閉時,顯示區域、控制區域置灰,明確告知用戶設備狀態及可操作區域。

          10. 三星 SmartThings 設備連接查看界面

          掌握這五個方法,幫你提升智能產品體驗

          房屋面積大,會有很多的設備與多個網關連接,家中與網關連接的智能設備有時候會連接中斷,具體哪個設備與哪個網關中斷了不容易被查清。三星 SmartThings 將設備與網關的連接情況可視化,可以向用戶直觀的反映出哪個設備連接出了問題。

          運用手勢控制

          通過利用不同形式的手勢操控,讓用戶和產品的交互過程更新穎更便捷。要注意的是雖然手勢不需要操控物理按鍵,但手勢操控的形式要建立在用戶已有認知習慣之上,請看以下案例:

          1. LG 手機系統控制界面

          掌握這五個方法,幫你提升智能產品體驗

          最左邊的圖為行程信息截屏操作,目前截圖方式有幾個按鍵一起按下的,也有手機背面敲擊三下的,這些都需要與設備接觸,接觸交互的過程就需要花費用戶更多的時間,LG 通過雙手捏合截圖的形式體現現實中“抓取”的語義,用戶使用起來順其自然,瞬間就可以完成截圖的目標。

          中間的圖為應用快速切換操作,用戶只需要對著屏幕做揮手動作,就可以切換至下一個應用,這個隔空操控的手勢核心使用場景是:當你正在廚房,手上沾著面粉或其他東西時,需要操控手機又不想弄臟手機,那么隔空操作就可以解決這一痛點。

          最右邊的圖為多媒體音量調節,只需要作出旋鈕的動作,就可以實現音量的控制,是不是覺著很 Cool。這種新的控制形式可以讓用戶加深對產品的印象。

          2. Google Nest Hub 音樂播放控制界面

          掌握這五個方法,幫你提升智能產品體驗

          在 Google Nest Hub 的音樂播放界面,當你想開啟或暫停音樂播放,只需要手掌隔空朝著屏幕方向做按壓動作,就可以快速觸發相應功能,這種方式讓用戶會感覺很爽,自己就像有了魔力。

          3. Google Nest Hub 鬧鐘控制界面

          掌握這五個方法,幫你提升智能產品體驗

          早上鬧鐘響起時,需要用戶選擇關閉鬧鐘還是稍后提醒,常見的情景是,用戶睜開眼伸手去點擊某個選項,會干擾想要接著睡的用戶。Google Nest Hub 在此處增加了隔空操控手勢,用戶如果想關閉鬧鐘,只需要閉著眼,手掌朝著屏幕一揮手,就可以搞定了,有沒有被寵愛的感覺。

          4. HomePod 音樂投射功能

          掌握這五個方法,幫你提升智能產品體驗

          蘋果用戶如果想將手機上正在聽的歌曲通過 HomePod 播放,只需要將手機靠近 HomePod,就可以輕松完成音樂投射,整個過程就像將一個容器的內容倒入到另一個容器內,既充滿趣味性又大大簡化了音樂播放設備切換的過程。

          提供個性化、多樣化的選擇

          通過設計語言為用戶提供更多的視覺風格,甚至開放編輯權限讓用戶更自由的制定自己喜歡的形式,這些都可以滿足用戶的個性化需求及專屬感,請看以下案例:

          1. Sony HUIS 遙控器

          掌握這五個方法,幫你提升智能產品體驗

          Sony HUIS 遙控器為用戶提供了最大限度的自主編輯權,用戶可以從后臺設定每個按鍵的形式及功能,也可以在屏幕中設置戶型圖,方便控制對應的設備。

          掌握這五個方法,幫你提升智能產品體驗

          甚至可以繪制只有自己理解的專屬圖案,大大提升了專屬感。

          2. 三星智能冰箱屏保

          掌握這五個方法,幫你提升智能產品體驗

          用戶具有喜新厭舊的心理,三星智能冰箱為用戶提供了豐富的屏保:有沒有任何信息展示的抽象幾何藝術畫風格、有配合溫度展示的春夏秋冬風格、有簡潔素雅的時間顯示風格、還有照片背景墻風格;兼顧了用戶日常裝飾和功能的需求。

          3. Lenovo Smart Clock

          掌握這五個方法,幫你提升智能產品體驗

          Lenovo Smart Clock 對于時鐘屏保為用戶提供了不同的風格,涵蓋了大多數的人群風格喜好:活潑跳躍、實用直觀、極簡現代、抽象藝術、純文字、純數字等

          掌握這五個方法,幫你提升智能產品體驗

          甚至在同一種風格中再細分為多種色彩搭配方案供用戶選擇??梢哉f想盡辦法來滿足用戶的個性化需求。

          統一的設計語言及操控邏輯

          這里的統一設計語言有兩個方面:一、同一個功能在不同的智能設備上布局要一致;二、同一類設備在 APP 中的功能布局要一致;操控邏輯統一指的是:產品中設備的操控方式要和用戶對實際設備的認知一致。一致性可以降低學習成本,提升更穩定的操控體驗。請看以下案例:

          1. 溫控器多端控制界面

          掌握這五個方法,幫你提升智能產品體驗

          Nest 溫控器及 ecobee 溫控器在設備上的設計語言和 App 上的保持一致,方便用戶在多端設備上的無縫操控體驗。移動端與智能設備界面唯一不同的是,移動端,同一層級上展示的功能入口更多,適合更復雜的操作。

          2. Orvibo 移動端設置界面

          掌握這五個方法,幫你提升智能產品體驗

          在移動端設置智能面板功能按鍵的界面中,Orvibo 將按鍵列表做成與實物一致的樣式,便于用戶快速找到對應的按鍵進行設置,這是提升智能家居一致體驗常見的方式。

          3. 三星 SmartThings 功能卡片

          掌握這五個方法,幫你提升智能產品體驗

          在智能家居 App 中,由于功能種類繁多、內容不確定等因素,承載它們的卡片在布局設計上面臨很大挑戰,需要兼容各種功能、還要保證卡片的整體一致性及合理的屏效比。

          在 SmartThings 智能家居控制系統中,三星對功能卡片進行了統一的部署,卡片左上角為功能名稱,左下角為狀態信息,右下角區域為操控區,并且還考慮了只有功能控制沒有狀態、只有信息沒有功能控制情況下卡片的拓展形式,充分保證了操控的一致體驗。

          4. Google Nest Hub 調光燈控制界面

          掌握這五個方法,幫你提升智能產品體驗

          在調光燈的操作邏輯里有這么個問題:是將亮度值調至 0%關閉燈光,還是需要一個單獨的開關按鈕。看看 Google 是怎么做的,它將調光區域與燈的開關做了區分,也就是說亮度通過調光區域操作最低為 1%,需要通過開關按鈕進行關閉;這樣做的好處是操作邏輯明確,并且當用戶在 80%亮度下關閉燈光,下次開啟時還是 80%的亮度,更加人性。

          總結

          目前網上各平臺的智能產品界面有很多,然而大多都是不落地的概念稿,里面的設計稿由于沒有具體場景及需求的約束,大多都無法解決公司實際項目中的問題,經常瀏覽僅能提升個人審美。只有平時通過對各行業實際落地產品的搜集積累和分析,才能發現它們在提升產品體驗道路上的共通點、差異點,從而為公司提供真正有價值的設計方案。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          文章來源:優設  作者:Aaron杜斌 



          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          f

          jquery DataTable 漢化 以及其他實用配置

          前端達人

          一、將 DataTable 設置成中文

          復制代碼
          <script> $('#datatable').DataTable({
          
             language: { "sProcessing": "處理中...", "sLengthMenu": "顯示 _MENU_ 項結果", "sZeroRecords": "沒有匹配結果", "sInfo": "顯示第 _START_ 至 _END_ 項結果,共 _TOTAL_ 項", "sInfoEmpty": "顯示第 0 至 0 項結果,共 0 項", "sInfoFiltered": "(由 _MAX_ 項結果過濾)", "sInfoPostFix": "", "sSearch": "搜索:", "sUrl": "", "sEmptyTable": "表中數據為空", "sLoadingRecords": "載入中...", "sInfoThousands": ",", "oPaginate": { "sFirst": "首頁", "sPrevious": "上頁", "sNext": "下頁", "sLast": "末頁" }, "oAria": { "sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列" }
             }
          });
          }); </script>
          復制代碼

           

          二、設置列寬度

          復制代碼
          <script>
          $('#datatable').DataTable({

          "columnDefs": [
            {
              render: function (data, type, full, meta) {
                  return "<div style='white-space:nowrap;float:right'>" + data + "</div>";
              },
              targets: [2,3,4,5,6]
            },
          ],

          });

          </script>
          復制代碼

           

          三、修改表格數據后,靜態刷新表格數據不跳轉

          dataTable.ajax.reload(null, false);

           

          // 重載所有接口數據,返回到第一頁
          dataTable.ajax.reload();

           

          相關 API

          ajax.reload( callback, resetPaging )


          里面有二個參數:
          callback :當服務器返回數據并重繪完畢時執行此回調方法,回調方法返回的是服務器返回的數據
          resetPaging: 重置(默認或者設置為true)或者保持分頁信息(設置為false) 


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

          JqueryTable的使用

          前端達人

          1.目的

          用漂亮的前端表格直觀顯示數據

           

          2. JqueryTable簡介

          JqueryTable官網

          表格顯示

           

          3.用法

          1.初始化html頁面

          設置一個table

          
          
          1. <table id="table_id" class="display">
          2. <thead>
          3. <tr>
          4. <th>Column 1</th>
          5. <th>Column 2</th>
          6. </tr>
          7. </thead>
          8. <tbody>
          9. <tr>
          10. <td>Row 1 Data 1</td>
          11. <td>Row 1 Data 2</td>
          12. </tr>
          13. <tr>
          14. <td>Row 2 Data 1</td>
          15. <td>Row 2 Data 2</td>
          16. </tr>
          17. </tbody>
          18. </table>

           

          2.引入靜態資源

          這個是JqueryTable必要的靜態資源

          
          
          1. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
          2. <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>

          如果你使用了js, 那么還需要引入jquery.js

           

          3.初始化表格

          
          
          1. $(document).ready( function () {
          2. $('#table_id').DataTable();
          3. } );

          3.實例

           

          1. html頁面

          
          
          1. <table id="tbl_grantedCoach" class="table table-striped table-bordered nowrap" style="table-layout:fixed; text-align: center;">
          2. <thead>
          3. <tr>
          4. <th width="10%">用戶名</th>
          5. <th width="10%">姓名</th>
          6. <th width="8%">性別</th>
          7. <th width="10%">手機號</th>
          8. <th width="5%">工作年限</th>
          9. <th width="12%">教員類型</th>
          10. <th width="15%">角色</th>
          11. <th width="10%">備注</th>
          12. <th width="12%">操作</th>
          13. </tr>
          14. </thead>
          15. </table>

           

          2.js代碼

          ajax 發送請求, 接受表格數據,再填寫進去

          
          
          1. initGrantedCoachGrid:function(){
          2. selectedUserId =[];
          3. if(grantedCoachGrid){
          4. grantedCoachGrid.ajax.url(
          5. "course/getGrantedCoachByFolder?json&folderId="
          6. + selectNodeId + "").load();
          7. } else {
          8. grantedCoachGrid = $('#tbl_grantedCoach')
          9. .DataTable(
          10. {
          11. "lengthMenu" : [ [ 10, 20, 30 ],
          12. [ 10, 20, 30 ] // change per page
          13. // values here
          14. ],
          15. "ordering":false,
          16. "retrieve":true ,
          17. "bDestory" :true,
          18. "pageLength": 10,
          19. "bAutoWidth" : false,
          20. "ajax" : {
          21. "url" : "course/getGrantedCoachByFolder?json&folderId="
          22. + selectNodeId + "",
          23. "type" : "get",
          24. "cache" : false,
          25. "contentType" : "application/json; charset=utf-8",
          26. "dataSrc" : ""
          27. },
          28. "rowCallback" : function(row, data) {
          29. selectedUserId.push(data.userId);
          30. },
          31. "aoColumnDefs" : [ {
          32. sDefaultContent : '',
          33. aTargets : [ '_all' ]
          34. } ],
          35. // 填入列數據
          36. "columns" : [
          37. {
          38. "data" : "loginName"
          39. },
          40. {
          41. "data" : "userFullName"
          42. },
          43. {
          44. "data" : "gender",
          45. "mRender" : function(data,
          46. type, full) {
          47. if (data == "M") {
          48. return "男";
          49. } else if (data == "F") {
          50. return "女";
          51. }
          52. }
          53. },
          54. {
          55. "data" : "mobilePhone"
          56. },
          57. {
          58. "data" : "workYear"
          59. },
          60. { "data": "coachType" , "mRender":function(data,type,full){
          61. if(data=="0")
          62. {
          63. data="理論培訓";
          64. }else if(data=="1"){
          65. data="實習培訓";
          66. }else{
          67. data="理論培訓+實習培訓";
          68. }
          69. return data;
          70. }},
          71. {
          72. "data" :function( row, type, val, meta ){
          73. return row.userRoles[0].roleName;
          74. }
          75. },
          76. {
          77. "data" : "remark"
          78. },
          79. {
          80. "data" : null,
          81. "mRender" : function(data,
          82. type, full) {
          83. return "";
          84. }
          85. }
          86. ],
          87. "oLanguage" : {
          88. "sProcessing" : "正在加載中......",
          89. "sLengthMenu" : "每頁顯示_MENU_條記錄",
          90. "sZeroRecords" : "對不起,查詢不到相關數據!",
          91. "sEmptyTable" : "無數據存在!",
          92. "sInfo" : "當前顯示_START_到_END_條,共_TOTAL_條記錄",
          93. "sInfoFiltered" : "數據表中共為 _MAX_ 條記錄",
          94. "sSearch" : "",
          95. "oPaginate" : {
          96. "sFirst" : "首頁",
          97. "sPrevious" : "上一頁",
          98. "sNext" : "下一頁",
          99. "sLast" : "末頁"
          100. }
          101. }, // 多語言配置
          102. "stateSave" : true
          103. // save the state of a table
          104. });
          105. }
          106. }

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          從垃圾桶到“多入口”,談談B端設計思考

          seo達人


          好的設計,都不會是“無緣無故”,它一定是從滿足某種實際需求而出發,向更高級的目標前進。作者從垃圾桶的設計開始,將思緒延展到界面的功能入口,帶大家一起思考一些B端的設計邏輯。

           

          最近在一次大掃除當中,不小心把廚房里的垃圾桶給摔壞了,于是乎想在網上選購一個合適的垃圾桶,而回顧了垃圾桶的選購經歷,或許它是一個很好的例子,讓大家了解 多入口 的設計思考。

          首先,究竟廚房需要是什么樣的垃圾桶?我陷入了嘀咕,因為我自己也不太明白,于是我在淘寶上看到了許多不同類型的垃圾桶

          把它們總結了一下,基本上可以分為兩類:直筒式、腳踏式:

          圖片

           

          直筒式:

          采取頂部開放的結構,使用者可以直接將垃圾扔到桶里。如果不夠有趣?你還可以將垃圾桶看作“籃筐”進行投籃。

          直筒式頂部開放的結構,確實能夠給我們扔垃圾帶來不少便利,但同時也會暴露一些問題,就是蚊蟲

          因為 廚房里的垃圾桶會有很多 餐廚垃圾,也因此會滋生很多蚊蟲,特別是在一些剩下的水果核上,會留下很多蚊蟲。

           

          腳踏式:

          頂部為蓋板,當需要扔垃圾時,使用者需要用腳踏住蓋板,并將其抬起。這種方式就能夠避免廚房餐廚垃圾所滋生出來的蚊蟲

          但問題又來了,在做菜時,扔垃圾通常十分頻繁,每一次都需要腳踏顯然效率太低。

          那能否既能腳踏又能隨手就扔呢?

          面對這一問題,我發現了一個新式垃圾桶:

          圖片

          它在為用戶設計時,考慮到了兩種不同的模式,因而將兩種入口進行巧妙的融合。

          通過頂部面板的開關,可以將垃圾桶設定為開啟或者關閉,能夠讓垃圾桶在你想要的時候保持開啟的狀態,這樣就能滿足在一小段時間內的頻繁扔垃圾的需求。同時又能提供腳踏的形式,將垃圾桶蓋完整抬起,這樣的垃圾桶既可以腳踏也可以直接扔。

          而在我們設計B端產品時,同樣會有 “多入口”的情況。

          比如在 紛享銷客 的設計當中,新建客戶有著兩個不同的入口:

           

          入口一:首頁 – 客戶及商機管理 – 客戶 – 新建

          這是新建客戶最為常規的入口,它就類似垃圾桶的直筒式。通過表格頁操作的新建,讓用戶進行表單的填寫,進而新增客戶。

          圖片

           

          入口二:首頁 – 新建 – 客戶

          這是 紛享銷客 的一個特別設計,它在導航菜單處設置一個全局的新建入口,當用戶在系統的任意頁面,都可以進行新建。

          大家可以跟我一起思考一下,我們如果是一個銷售人員,在我的工作當中,會去經常新建客戶、跟進記錄等,那通過一個全局的新建入口,能幫助我們更快的進行操作。這便是紛享銷客的第二個新建入口。

          圖片

           

          我再給大家舉一個簡單例子,同樣我們在紛享銷客當中,表格當中的篩選同樣也是有著兩個不同的入口:常規篩選與表頭篩選(大家可以看我B端設計指南篩選的文章):

          常規篩選:

          用于表格當中一般和許多操作并排放置,算是一個較為基礎的入口

          表頭篩選:

          點擊過后同樣也是進入到篩選彈窗,但不同的是,表頭篩選點擊過后,會將表格的值帶入到篩選當中,來實現篩選+選值這樣的兩步操作。

          而為什么會有兩種不同的入口,我們回過頭來想想,就像我文章開頭說到的垃圾桶一樣,兩種不同的入口,其實是為了方便我在某一個場景下進行使用(比如垃圾桶的 持續丟垃圾與開關垃圾桶蓋;紛享銷客  新建操作當中的 常規新建與快捷新建;)

          而它不正是因為用戶在不同的場景需求下,所設計的形式不同。

          在B端產品當中,不同場景的需求其實經常存在,但為什么沒有暴露出來?

          其實是因為用戶在B端產品當中,本身用戶就是處于弱勢群體,他們都是服從于上級的安排,而設計師不會分析,就會選擇最平庸的方式去處理需求。我們往往需要基于場景去思考問題,而場景如何理解?

          之后有機會再和大家展開聊聊~

           

          原文鏈接:CE青年(公眾號)

          作者:CE青年


          轉載請注明:學UI網》從垃圾桶到“多入口”,談談B端設計思考

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:站酷   作者:陳皮Celia 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          后臺查詢頁面的交互樣式優化

          ui設計分享達人

          一、什么是“查詢”?

          “查詢”是指用戶在通過某些查詢條件進行數據篩選后,再以“表格”的展現形式進行數據呈現,以到達篩選數據,快速查看的目的。

          查詢的動作主要由搜索和篩選組成,這里要強調一下查詢和篩選的區別

          搜索和篩選的主要區別是:搜索可以自定義查詢條件,篩選是必須按照特定的條件字段查詢,如“是”、“否”、“不限”、“男”等條件

          一般語境下,不支持模糊搜索的查詢結果為單項數據,如姓名查詢,訂單號查詢,這些查詢操作只能輸出一條結果,即查一得一

          舉例 手機號搜索 139xxxx2918 正常情況下是輸入11位號碼進行搜索數據 得到手機號碼為139xxxx2918的各項數據,即查一得一

          輸入139進行搜索查詢也可以得到多條手機號碼包括139的數據,但是一定程度上失去了手機號搜索的意義

          所以建議在后臺數據查詢的頁面,將搜索和篩選這兩個操作區域通過換行或者間隔拉大進行比較清晰的區分,不要在搜索字段的區域里面混入篩選的內容。


          二、數據過多時,“查詢”為什么要優化?

          當數據過多,導致“查詢條件”的搜索項和“搜索結果”的數據項過多的情形。查詢操作優先級混亂,增加操作人員的使用負擔和效率

          好的查詢界面可以通過折疊,新增彈框等方式,合理的編排查詢層級關系,在保證查詢功能完整性的情況下,高頻查詢優先展示,編輯方便,預覽快捷,增加工作效率。


          三、操作修改實例

          我們來看一下什么樣的界面屬于查詢條件過多,搜索結果項過多的頁面,分析一下臃腫的部分和解決方法。

          查詢頁面可以分為三個區域,查詢條件區域、操作按鈕區域和數據展示區域,分析一下3個區域冗余和待優化的地方才可以設計出交互良好簡介的頁面




          問題分析:

          1、搜索條件和篩選條件混合,功能區混亂

          2、單項選擇框對多選的字段兼容性差,表達效果弱

          3、查詢區域設計語言混亂,輸入框 選擇框 時間選擇框 數值框同時出現 視覺上渙散,混亂 



          改良目標:

          1、查詢區域搜索和篩選字段重新編排,并且進行優先級整理排序

          2、重新設計針對多選的字段的選擇組件

          3、將同一數據類型的查詢字段合并,頁面只出現一個時間組件、數值框



          改良方法:

          1、查詢區域搜索和篩選字段重新編排,并且進行優先級整理排序

          2、重新設計針對多選的字段的選擇組件

          3、將同一數據類型的查詢字段合并,頁面只出現一個時間組件、數值框


          四、具體案例

             鑒于后臺系統的龐大數據量,查詢條件難免會出現過多的情況,為保持各頁面簡潔統一,默認當數據超過N條的時候,將其余查詢條件進行收起處理,防止查詢條件過長,導示影響用戶查看搜索結果。這種收起狀態可以通過幾種不同的形式呈現。


          對于單個查詢項 

          1.相同搜索類型合并展示

          鑒于后臺系統查詢種類繁雜,我們大體把他分為關鍵字搜索,日期選擇,數值范圍,單選多選

          為保持設計語言統一,可以將關鍵詞搜索和日期選擇合并展示,折疊不同的數據項。



          若一個搜索同時存在兩種及以上狀態,可以通過標簽展示刪除



          2.搜索項分類選擇

          當搜索項中的數據項過多還可使用另一種優化形式,使用下拉框與分類形式相結合。為方便用戶快

          速選擇加入了“本項全選/反選”和“全部全選/反選”的功能。其中,“本項全選/反選”是針對當前項

          的批量操作,“全部全選/反選”是針對所有項的批量操作。


          對于整個查詢區域的布局

          1.折疊收起過多搜索項



          2.通過開關收起過多搜索項




          3.通過分類搜索項目,用標簽跳轉區分


          4.通過增加新彈框,隱藏使用頻率低的查詢項







          問題分析:

          1、操作按鈕數量過多

          2、操作按鈕樣式類似,無法體現功能優先級


          改良目標:

          1、精簡按鈕數量

          2、根據按鈕功能地位,強化/弱化按鈕樣式體現層級關系


          改良方法:

          1、將使用頻率不高的按鈕折疊展示

          2、弱化次要按鈕


          四、具體案例






          問題分析:

          1、表頭與關鍵數據列固定列表內數據行的橫向、縱向數據過多

          2、無法自定義展示的數據列


          改良目標:

          1、將重要的數據項固定,梳理過多的數據項

          2、增加自定義展示數據列的功能


          改良方法:

          1、選擇使用表頭固定及關鍵數據列固定,方便對應查看數據標題及內容

          2、通過增加自定義字段展示和支持列寬,就能盡可能多的展示需要觀察的數據項


          四、具體案例

          1.表頭與關鍵數據列固定

          列表內數據行的橫向、縱向數據過多時,選擇使用表頭固定及關鍵數據列固定,方便對應查看數據標題及內容。



          2.分類篩選字段展示

          數據行橫向字段過多時,可將字段分類展示,根據不同的分類去展示字段,即可全局查看,又可分類查看。根據用戶選擇的分類進行橫向滾動,方便查看數據。



          5.自定義篩選字段展示

          數據行橫向字段過多時,還可將字段自定義展示,用戶可以自定義選擇展示的篩選字段和調整順序,根據用戶的要求將常用的高頻率的篩選字段優先展示,提高工作效率。




          五、實際操作

          以上的內容是按照查詢頁面的三個部分臃腫的地方提出的解決方法,但是優化查詢頁面的交互,使得查詢操作既高效又舒適

          還是得依據各個查詢頁面的業務需求,將以上不同的解決方法組合,才能得到一個適應于自己當下任務的方案。

          方案一

          查詢條件區域    將低頻率的篩選條件折疊到高級篩選中+搜索項分類選擇+將關鍵字搜索字段合并展示

          操作按鈕區域    將低頻率的操作按鈕折疊到更多按鈕中    

          數據展示區域    使用分類展示+表頭與關鍵數據列固定



          優點    首頁展示查詢內容最少,頁面簡潔,可以展示更多查詢數據,頁面和彈框內將類似字段折疊展示,內容緊            湊,操作便捷


          缺點    頁面交互路徑增長,編輯數據要進彈窗,不夠方便,次要按鈕和次要查詢字段被折疊隱藏,新客戶不易找            到



          方案二

          查詢條件區域    通過篩選開關,選擇是否展示篩選字段 字段選項鋪開展示

          操作按鈕區域    將低頻率的操作按鈕折疊到更多按鈕中

          數據展示區域    使用自定義顯示表格字段





          優點    首頁可以直接編輯字段,展示內容最多,直觀方便,可操作性強,交互路徑短

          缺點    頁面鋪開高度過高,關閉篩選開關無法預覽篩選條件,打開開關,則壓縮表格空間,電腦一屏展示數據較            少


          靈活運用布局和組件的簡化方法,才能搭配出適合自己產品的最優設計,以上內容僅供參考,希望大家可以學到的是設計方法,而不是組件和布局本身。感謝觀看。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          文章來源:站酷  作者酸奶烤鴨

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務



          圍繞應用生命周期的編排設計

          ui設計分享達人

          什么是圍繞應用生命周期的編排設計

          圍繞應用生命周期的編排設計是一種企業級技術產品設計策略。

          它的核心是要解決設計師很難上手企業級技術產品,且更加難以找到體驗設計機會點的問題。我們是一群工作在企業級技術產品領域里的設計師,同時也是掘金者,這篇分享即是我們在企業級技術產品領域里探索的一些方法總結。

           


          當設計遇上技術

          工作現狀

          在我們日常工作中,和技術產品 PD 聊需求是一件非常痛苦的事情,他們講的每一個字都認識,但是組合起來就不知道是干什么的了,因此設計師也很難去想象用戶是怎么在用這些功能。

          因此相較于 C 端產品來說,B 端的技術產品目前還處于基本可用的狀態,更談不上什么體驗了。

           

          分析原因

          究其原因,我們總結有三點:

          ① 這些產品大多數都是由技術來主導,功能優先

          ② 設計在整個流程中都處于非常被動的狀態

          ③ 設計與技術之間存在一定的專業壁壘,技術往往比較抽象難以理解

          同時,我們的用戶并不是客戶,用戶不能根據自己的意愿喜好選擇產品。用戶隱藏在企業內部,設計師日常中很難接觸到真實用戶。另一方面,用戶的技術專業背景與設計師的專業存在鴻溝,這使得設計師對用戶需求的理解也不夠深,所以說在這種環境隔離和語境不通的狀態下,設計師其實難以和用戶構建同理心。

           

          能做的事

          在這種狹小的設計發揮空間里,我們能做什么呢?

          其實我們設計師有明顯的優點:

          比較擅長找規律找方法,有破局意識,從而能夠發現設計的機會點。


           

          企業級技術產品設計探索

          發現規律

          所以我們回過頭看一下之前做過的這些產品和功能,從它們的作用對象、出現時間、用戶目標、用戶行為這四個維度對他們進行歸納和總結。

          我們發現這些產品具有很強的階段性,通過不同的產品來支撐各個階段下的用戶目標。用戶通過產品的功能來實現各種編排動作,例如對應用本身代碼的編排、對應用依賴的底層資源的編排,從而支撐用戶應用的生命周期。

          因此企業級技術產品具有以下四個特點:

          • 階段性

          • 驅動性

          • 流程性

          • 抽象性


          提出策略-圍繞應用生命周期的編排設計

          首先我們要針對這四個特性進行一輪判斷,了解這個產品的場景,場景下對應的角色,每個角色執行的是單線還是多線任務流,以及任務流是由哪些功能支撐。經過這層判斷之后再定位具體問題:

          ① 每個階段的目標是什么

          ② 階段下每個角色各自的小目標又是什么

          ③ 任務要對應用還是應用相關的內容進行編排

          ④ 產品的功能是如何實現的


          當找到這些問題的答案以后,我們就可以對產品的上下游場景進行編排,明確各階段的側重以及上下游場景的限制條件;對角色進行權限分配以及協作觸點的確定;將任務流從起點到過程再到結果進行梳理;以及最后通過對底層技術的理解,合理編排產品信息架構和界面內容。

          為了能夠更加高效的完成以上信息的收集和處理,我們沉淀了 CMTD 四個小工具。

           

          策略詳解

          C 是 Collaboration,協同場景,主要回答四個問題:When、What、Who、Where。

          ① When:用以明確產品所處階段以及上下游階段,以全鏈路的視角看用戶的完整使用場景,因為產品往往可能只是解決用戶部分場景的問題

          ② What:定義當前場景的階段目標以及要做的事情

          ③ Who:當前階段的事情由哪些角色參與

          ④ Where:這些角色在線上或線下是如何配合協作的

          例如我們要做一個技術產品,通過 Collaboration,我們知道它覆蓋了發布階段、日常運維階段,目的是把經過測試的應用發布上線并進行日常維護,主要是運維人員配合研發人員和發布經理完成線上的問題排查和線下配置文檔的交接,我們就能比較清楚的知道我們要做的是一個運維平臺。

           

          M 是 multi-role,多角色,主要用以分析產品是由哪些角色共同協同驅動的。

          與 C 端產品不同的是,我們除了對核心角色的自然人屬性進行洞察,還要定義清楚該角色的目標有哪些,目標對應的任務流以及支撐的功能和權限。并且企業級技術產品往往都不是一個角色就能完全執行完成,所以該角色的上下游角色也要摸清之間的協作觸點在哪里。

          多角色的信息我們可以通過在客戶現場或者用戶訪談來收集,并沉淀為用戶角色庫。

          基于收集來的用戶信息,來定義我們產品的角色:

           

          T 是 Task flow,任務流。任務流一定是基于一個用戶角色的某個目標,來定義任務的起點-過程-結果。

          起點就是界面上用戶的操作入口,過程需要包含觸發操作、自操作、條件判斷以及是否有協作角色參與進來,在結果處除了提供結果反饋還要提供下一任務的去向入口,幫助用戶把流程串聯起來。

          任務流可以借助現有流程的走查或按照 T 模型來梳理任務流信息,從而幫助我們更好的定義一條用戶的任務流是如何執行的。

          例如我們要做的運維平臺的產品,核心角色是運維,他其中的一個目標是為應用創建工作空間。按照 T 模型,我們可以很方便的將這條任務流定義出來。

           

          D 是 deep ,深化。主要從兩個維度展開:技術架構和邏輯原理。這是兩個在做技術產品的過程中經常會接觸到的兩個概念。

          在分析技術架構時,我們可以重點關注兩個點:看由哪些功能模塊構成,這些功能之間的靜態結構,是包含關系還是依賴關系。分析邏輯原理,一是了解這些功能產生的實例,是一對一的關系還是一對多的關系,信息或流量在這些功能模塊之間如何流轉。通過這些分析,我們可以把掌握的功能特征和邏輯規律。

          舉例來說,運維平臺的核心角色運維人員需要為應用創建工作空間,按照梳理出的任務流,用戶需要經過3次跳轉7步完成,那這個是否還有優化空間呢?

          我們可以從 Deep 深化的角度入手,看這條任務流是由哪幾塊功能支撐的。例如工作空間內包含網絡和安全組,安全組內包含負載均衡和虛擬機。就像我們了解汽車的制動裝置,看到裝置內包含氣室,氣室內包含活塞體、密封墊,密封墊連接在推桿上。

          再從邏輯原理圖入口,了解流量會先按照工作空間進行隔離,從工作空間走專有網絡還是經典網絡,網絡將流量分發到安全組,安全組里的負載均衡會負責調配流量到虛擬機。他們之間層層遞進互相依賴。就像汽油從油箱到達制動裝置,在發動機里和空氣一起被壓縮燃燒后能量轉化轉送到動力裝置一樣。

          通過上面的分析我們了解到這幾個功能其實是緊密關聯的,用戶沒有必要分散到不同的地方進行添加和創建,完全可以借助流程表單和抽屜把他們串聯在一起。

          因此我們找到優化體驗的機會點,把之前需要三次跳轉7步完成的任務流,優化到1個入口5步完成。

           


          總結回顧

          企業級技術產品有四個特性:階段性、驅動性、流程性、抽象性。通過 C、M、T、D 四個小工具來幫助我們收集和歸納信息,實現對上下游場景的編排、角色的定義、任務流的編排以及界面的編排。



          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:站酷  作者:Ant_Design

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          B端產品布局設計規范

          ui設計分享達人

          一、布局原則:古登堡、尼爾森

          二、結合B端產品和頁面分析

          三、大廠布局設計規范分析

          四、總結

          一、布局原則

          布局設計在設計的每個領域都有涉及,這里說的不是設計中的布局四原則:親密、對齊、重復、對比(專業術語:格式塔原則),這是平面設計中常用的布局方式,我的理解就是排版。但B端的布局設計是不同的,每個企業或者產品的設計規范有各自不同的依據。

          B端頁面布局最常用的原則我見過有兩種:古登堡原則和尼爾森F型視覺模型。下面是網上找的圖:

          (1-侵權提刪:古登堡原則)

          古登堡原則:閱讀引力是從上到下,從左到右,呈現Z字形移動,而起點和終點會作為重點視覺記憶區,中間過程會輕掃作為次要視覺記憶區。左上和右下是用戶會比較容易關注和注意到的地方。

           

          (2-侵權提刪:尼爾森F模型)

          尼爾森F模型:我們在第一次觀看頁面時,視線會呈 F的形狀關注頁面。先從頂部開始從左到右水平移動,目光再下移開始從左到右觀察但是長度會相對短些,以較短的長度向下掃視,形成一個 F形狀。

          這兩個原則都是從用戶視覺角度分析,在按需帶入產品頁面設計的。沒法單純的說哪個對哪個錯,或者說哪個更好。因為要結合產品屬性、信息結構、及用戶心理等因素。

          二、結合產品和頁面屬性分析

          我們公司產品的列表頁面是參考古登堡原則制定的布局設計規范。這是一個運維產品(我們通常稱為SaaS:軟件即服務)-列表頁面的模板,可以看到大部分內容被表格占據,且表格中的內容是相似的。通過與騰訊藍鯨團隊的溝通,最終確定這種布局的頁面用戶視角瀏覽流程是“Z”型的。

          主要操作按鈕在左側的第一視角區,通常以“新建”等主要按鈕為主、“導出”或“批量操作”等次要按鈕為輔一同擺放。因為列表通常是某個任務的羅列,會把新建的入口也放在一起,一是為了方便用戶快速找到新建任務入口,二是為了讓信息結構更聚攏。強休息區放搜索框。在不同場景下,按鈕和搜索框位置要視需求確定位置。在我們公司的大部分產品場景下,按鈕是在左側。最終落腳點是在操作字段(表頭屬性,技術角度稱為字段)。

           

          彈窗的布局也是類似的,很容易可以判斷出標題和確定、取消按鈕是兩個視角落腳點。

           

          當然不是所有頁面都遵循古登堡原則,像下面的表單頁面就是使用F模型。因為最主要信息標題都在左側,且信息流是集中往下走,并不分散也不需要橫向跨度很大。所以使用尼爾森F模型就可以支持布局走勢。

           

          三、大廠布局設計規范

          這里以騰訊Magic Box VUE組件庫和阿里AntDesign來分析我個人的理解:

           

          這是從antdesign官網找到的信息復雜度和相關性模型,選用相應的信息呈現方式,選用合理的布局方案來承載詳情頁的內容。這應該是阿里內部自己建立的布局規范,既不符合古登堡原則,也不適應尼爾森F模型。但從地下不同頁面內容的分布來看,我覺得是把這兩種模型結合了。請看下圖:

           

          古登堡原則注重左上角和右下角的內容。尼爾森F模型是只注重左側內容,這種布局方式通常是信息量比較大時用的比較多。我們把頁面的內容拆開看就可以分析出,每個模塊也是可以分成不同模型的結合。

           

          騰訊Magic Box的布局規范就是前面我們公司用的是一樣的,就不多分析了。

          四、總結

          通常:信息流頁面使用尼爾森F模型。需要用戶操作頁面的則常常把古登堡和F模型結合使用,具體使用哪種看兩個:1、用戶在頁面的常用操作是什么,2、你想或者說是產品想傳遞給用戶的信息是什么。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          文章來源:站酷  作者:lq934731638

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合