<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>

          首頁

          設計模式|輸入線索:如何讓用戶清楚該輸入什么?

          資深UI設計者


          What 是什么

          簡介:「輸入線索」是指用示例輸入或說明文本以占位符(Placeholder)的形式顯示在輸入框中,以幫助用戶理解需要輸入的內容,或給出相關線索的一種設計方式。

          例子:  在 Ant Design 輸入框組件 的示例中(如下圖),我們可以看到「輸入線索」可以更好地幫助界面說明輸入字段的內容或解釋輸入字段的功能。


          Why 為什么

          「輸入線索」這種設計模式可以讓界面不言自明。由于輸入線索的內容位于用戶輸入的位置,因此用戶往往不會忽略這個信息。



          對比:「輸入線索」VS「輸入說明」

          「輸入說明」與「輸入線索」都是輔助用戶輸入的設計模式,這些模式可以幫助用戶明確輸入信息的內容形式。

          那么這兩種模式有什么差異性呢?


          使用「輸入說明」這種模式時,快速瀏覽用戶界面的用戶可能會輕易地忽略說明信息,因為用戶的目標是盡可能快地完成表單,然后進入下一步操作(雖然有的場景下這也是其中一個設計目標,但在這里不討論)。因此,過多的文本說明也會給用戶帶來較大的心智負擔。


          Google 注冊賬號頁是結合使用「輸入說明」與「輸入線索」的一個典型案例。通過使用「輸入線索」告訴用戶需要填寫的內容,通過「輸入說明」來補充填寫信息的相應意圖,進而使得用戶可以清晰地意識到需要填寫什么,并輸入相應信息。


          When 什么時候使用

          用戶可能不一定清楚需要在輸入框中輸入的內容。在設計上,你可能不希望在輸入框附近上添加更多的字,造成視覺壓迫。還有一種情況,如果界面空間有限,無法使用「輸入說明」時,也可以考慮使用「輸入線索」。當出現下拉菜單或者組合輸入框時,往往需要配合該模式進行使用。


          使用條件

          · 輸入框要求輸入的內容可能不容易讓人馬上理解;

          · 設計上不希望在其他地方補充新的內容;

          · 可以承載文本的輸入空間可能沒有太多;

          · 配合下拉菜單或者組合輸入框使用;


          How 如何使用

          1. 選擇適當的提示文本

          · 對于下拉列表,使用 “選擇”、“選取”等單詞,英文使用 Select Choose 或者 Pick 等;

          · 對于文本輸入框,使用“輸入”等單詞,英文使用 Type 或 Enter;

          · 盡量使用祈使句,以動詞短語開頭;

          · 以描述輸入內容的名詞結尾,例如“選擇狀態”,“在此處輸入消息”或“輸入患者姓名”等;


          2. 提示文本的位置

          有關文本提示的位置應該和輸入值的位置一致。 比如,提示本身不應該是下拉菜單中的可選值。


          Example 案例

          案例一:Ant Design Pro 登錄功能預覽

          用戶需求:用戶登錄功能的預覽與體驗

          Ant Design Pro 是一個中后臺開發的模板腳手架,其并不提供真實賬號登錄服務。因此 Ant Design Pro 的開發者為了模擬真實使用環境,提供了一個可正常登錄的賬號,賬號密碼分別 user 和 ant.design ,其余情況下用戶輸入的賬號密碼均會提示不正確。


          在這個場景下,通過將正確的賬號密碼以輸入線索的方式顯示在占位符中,巧妙地告訴體驗 Ant Design Pro 的用戶正確的賬號密碼。


          案例二:163郵箱登錄頁面

          用戶需求:登錄賬號

          163郵箱登錄頁面的賬號輸入框中的輸入線索非常有用。正常用戶在看到后綴有 @163.com 時可能并不一定能意識到可以輸入手機號碼。而通過在占位符中 顯示「郵箱賬號或手機密碼」,高效便捷地提示了用戶可以直接輸入手機號碼進行登錄。


          案例三:小米賬號登錄頁面

          用戶需求:輸入賬號密碼

          「輸入線索」有一種設計上的變體,稱為「浮動標簽」。因為一般來說,當用戶激活輸入框時,占位符文本會消失。而「浮動標簽」不會消失,通過移動位置和更改大小駐留在界面中。這種設計方式可以使得界面變得簡潔、優雅。



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

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


          文章來源:站酷  作者:Ant_Design

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

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

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


          用戶訪談的小技巧

          資深UI設計者


          華為會定期派員工去兩個地方做用戶研究。第一個地方是華為手機線下門店,這個地方很好理解,通過觀察和訪談顧客,能挖掘到不少體驗設計需求。另外一個地方我完全沒想到是——手機維修中心!來維修手機的用戶都是憤怒而且失望,如果員工能體會到這些用戶的心境,對產品的設計底線和情感關懷應該會做得更好。

          另外一方面,通過數據分析、競品分析得來的信息,我們不過是依據腦子里已經存在的假設再設計方案驗證罷了。有很多信息是未知的盲區,未知的盲區有潛在不可預估的風險,通過用戶訪談探索盲區能幫助我們打破固有觀念,補齊短板,做出更貼近用戶的設計方案

          從多次實戰中,總結了用戶訪談的 8 個小技巧

          通過訪談確實得到了想要的信息,也為后來產品優化提供方向。訪談期間發現了一些實用的小技巧,在此分享給各位讀者。

          技巧 1:通過預訪談修正大綱

          我猜設計好訪談大綱的你迫不及待的馬上想去訪談用戶,但是如何證明現在的訪談大綱的正確的呢?萬一設計的問題不對,那自然得到的訪談結論也是錯的。所以在設計好訪談大綱后,可以先只預約 1 個用戶,或者和目標用戶相近的朋友進行一次訪談預演習。通過這次演習找到大綱問題或者訪談中遇到的其他突發情況,對大綱進行修正之后再批量預約用戶進行訪談。

          也可以把大綱當作一款互聯網產品,每一次訪談之后對大綱進行反思迭代,讓下一次訪談更好。

          從多次實戰中,總結了用戶訪談的 8 個小技巧

          技巧 2:寒暄和循循漸進

          如果和訪談的用戶一開場就單刀直入的提問,可能用戶此時剛從其他事情抽身出來,注意力和記憶力都還沒進入訪談狀態。開場立即提問會讓用戶懵,因此建議一開場先和用戶寒暄,比較輕松的聊一些和產品相關的問題,給訪談熱熱身。

          從多次實戰中,總結了用戶訪談的 8 個小技巧

          技巧 3:鼓勵用戶暢所欲言

          中國人講究和氣生財,尤其對陌生人更是客氣得很。不敢當面指出你的問題,擔心你面子上掛不住或者生氣。另外你認為是很重要的細節,用戶可能不太在乎。為了從用戶言語里得出更多信息,要鼓勵用戶多說不好的地方,甚至可以賣慘宣稱收集不到足夠的問題會被老板罵,求用戶多吐槽。

          從多次實戰中,總結了用戶訪談的 8 個小技巧

          技巧 4:不要使用用戶不懂的術語

          雖然在客戶面前說些黑話會讓你顯得很專業,或者你和同事在公司里有約定的簡化術語。但是用戶并不懂這些,所以在用戶前面收起你身為互聯網人的身份氣質,好好的說人話來和用戶溝通,本身也是在設計真正的用戶體驗

          從多次實戰中,總結了用戶訪談的 8 個小技巧

          技巧 5:多詢問曾經的真實經歷

          越是寬泛和抽象的問題越難回答,不知道該從哪個角度開始講起?!皬膱鼍爸袑ふ彝袋c”可不能只是嘴上說說的場面話,詢問用戶曾經的真實經歷,就是獲得現實的用戶使用場景,具體的問題也能讓用戶回憶起當時的細節,這樣你才能從細枝末節中找到痛點。

          從多次實戰中,總結了用戶訪談的 8 個小技巧

          技巧 6:穿插現場操作,鼓勵口述想法

          用戶訪談是非常消耗時間的方法,好不容易訪談一次就盡量榨干所有價值。建議訪談過程中穿插一些讓用戶現場操作的小任務,觀察用戶的現場操作,根據行為分析出體驗優化點。同時注意讓用戶一邊操作時一邊說出腦中的想法,獲取用戶的思考過程,更能得到有價值的信息。

          從多次實戰中,總結了用戶訪談的 8 個小技巧

          技巧 7:不要問封閉式問題

          封閉式問題得到的信息很少,而且所有的問題答案都只是你對現有已知信息設置的。如果要獲得封閉式問題的答案,不如網上直接發問卷來得效率高呢,在訪談中問這些性價比不高。我們盡可能多問開放式問題,多收集未知的信息。

          從多次實戰中,總結了用戶訪談的 8 個小技巧

          技巧 8:給用戶榮譽感

          “垃圾是放錯地方的資源”——說明對某些人不重要的信息對另外對人可能非常有價值。用戶對訪談中說過的話認為并不是很有意義的信息,但是對于你來說可能就是提升產品體驗的高價值問題。

          我幾乎每次訪談的最后用戶都會對我說“我就隨便說說,希望能幫到你”,這時候就真誠的告訴用戶這些信息很有價值,讓用戶心中獲得訪談的榮譽感,這樣可能比給物質獎勵讓用戶更開心。并且榮譽感會激勵用戶之后再給你反饋更多產品使用問題,持續得到有價值的反饋。

          從多次實戰中,總結了用戶訪談的 8 個小技巧

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

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



          文章來源:優設  作者:龍爪槐守望者

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

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



          Datatables表格固定列 dataTable.fixedColumns.js的使用和修復 - 完美解決ICheck不能勾選問題

          前端達人

          前言

          在項目實際開發我們會遇到表格列過多,表格內容過長的困擾,表格數據的展現很不理想,今天我為大家介紹如何結合Datatables 使用表格固定列;

          效果展示

          1、在屏幕足以展現內容的情況下
          在這里插入圖片描述
          2、模擬屏幕過小 或表格列過多的情況
          在這里插入圖片描述
          從效果圖可以看出,我將左側兩列和右側一列 作為固定列 ,中間內容可拖動顯示

          開始使用

          //引入juqery datables fixedColumns 根據各自的樣式需求 本人使用的是bootstrap 
          <link href="您的資源目錄/dataTables.bootstrap.css" rel="stylesheet">
          <link href="您的資源目錄/fixedColumns.bootstrap.css">
          <script src='您的資源目錄/jquery.js'></script>
          <script src='您的資源目錄/jquery.dataTables.min.js'></script>
          <script src='您的資源目錄/dataTable.fixedColumns.js'></script> 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6

          初始化datatables

          //異步請求獲取表格渲染數據
          var dataTable;
          $(function () {
              dataTable = $('#表格ID')..DataTable({
                      "processing": true,
                      "serverSide": true,
                      "ajax": {url:  "您的請求URL"},
                      "scrollX": true,
                      "autoWidth": true,
                      "columns": [
                      ...
                      ]
              });
          }) 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14

          初始化fixedColumns

          new $.fn.dataTable.FixedColumns(dataTable,{
              "iLeftColumns":2,  //開啟左側兩列固定
              "iRightColumns":1, //開啟右側1列固定
              "drawCallback": function(){
                  //重繪的回調執行
              }
          }); 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7

          原理解析

          在datableas 初始化后 根據設定的開啟固定列,獲取datables 對應表格數據 進行復制,然后采用position: absolute 在原表格 上加多一層固定列表格的展現,感興趣的朋友可以瀏覽器DEBUG查閱;

          出現的問題

          1、固定列出現滾動條
          在這里插入圖片描述
          出現這個問題是 dataTable.fixedColumns.js 插件計算固定列寬的問題,可以在源碼進行修改;或者在fixedColumns.js 重繪成功后回調中執行

          $(".DTFC_Cloned").css("width","auto"); 
          
          • 1

          2、采用ICheck 插件無法點擊 和 勾選問題

          原因:因為異步加載數據的問題 ,我們每次在datables重繪的回調函數中 進行ICheck 再次初始化;
          而dataTable.fixedColumns.js 是 datables 初始化完成后才執行的 ,上文也提到固定列實現的原理,其復制了固定列數據 position: absolute,那么展現給我們看到的是已經初始化的ICheck ,真正可以勾選點擊的其實在下一層;

          解決思路:在fixedColumns.js 重繪成功后回調中初始化ICheck; 再重新注冊全選 和反選事件;

          //朋友們可以根據需求 自定定義自己的初始化和事件注冊
          new $.fn.dataTable.FixedColumns(dataTable,{
              "iLeftColumns":2,
              "iRightColumns":1,
              "drawCallback": function(){
                  //重繪Icheck 這里是我封裝的初始化方法
                  iCheckInitFunction();
                  //重新設置全選事件 這里是我全選/反選的注冊事件
                  TableiCheck(".DTFC_Cloned thead tr th input.i-checks", ".DTFC_Cloned tbody tr td input.i-checks");
              }
          }); 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11

          修復版的 dataTable.fixedColumns.js 下載

          大家可以選擇適合自己的樣式
          在這里插入圖片描述

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

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


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

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

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


          jsTree默認展開、收起

          前端達人

          默認展開

          1. // 所有節點加載完成后觸發
          2. $('#jstree1').on("ready.jstree", function(e, data) {
          3. // 默認選擇節點
          4. $('#jstree1').jstree('select_node', ['child-1-1', 'child-2-2']);
          5. // 默認展開/打開全部
          6. $('#jstree1').jstree().open_all();
          7. });
          8. // 選擇更改時觸發
          9. $('#jstree1').on("changed.jstree", function(e, data) {
          10. console.log(data.selected);
          11. });

          默認收起

          1. // 所有節點加載完成后觸發
          2. $('#jstree1').on("ready.jstree", function(e, data) {
          3. // 默認選擇節點
          4. $('#jstree1').jstree('select_node', ['child-1-1', 'child-2-2']);
          5. // 默認關閉/收起宣布
          6. $('#jstree2').jstree().close_all();
          7. });
          8. // 選擇更改時觸發
          9. $('#jstree1').on("changed.jstree", function(e, data) {
          10. console.log(data.selected);
          11. });

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

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


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

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

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

          設計沉思錄 | B端商城的客戶鏈路設計

          seo達人


          背景:58會員商城是面向B端商戶的信息服務售賣平臺,囊括了公司各類業務的會員端口套餐、推廣商品、增值服務等商業化產品。長期以來公司的商業交易主要依賴電銷團隊、線下銷售團隊來完成,戰略層希望將線下銷售模式向線上模式轉變,建設一個以客戶為中心的售賣平臺。

           

          01.B端商城的認知探索

          說起商城,作為普通消費者第一印象就是京東、天貓、淘寶、拼多多等耳熟能詳的電商平臺。在早期,我們也先入為主地以為商城的參照系是C端電商,以最基本的購物流程和商品信息架構入手。
           
          然而在項目推進過程中,發現B端商城與C端電商有著孑然迥異的特征。為了調整原有的設計模式,讓整體的商業服務能更貼合客戶實際使用訴求,我們也先從研究入手,探索商城真實的客戶情況。
           

          調研花絮&物料

           

          02.B端客戶差異

          從研究中發現,比起獨立個體的C端消費者,B端客戶往往目標更明確、決策要素更集中。

           

          C端電商的客戶

          • 用戶:以獨立個體為主
          • 流程:導流-列表-詳情-訂單-支付-物流-收貨
          • 商品:以圖片介紹為主,多為大眾化消費品,認知成本低
          • 目標:靈活,分散,以興趣、生活需要為導向

           

          58會員商城的客戶

          • 用戶:既有公司團體,也有商戶個體、獨立個體
          • 流程:渠道轉化-注冊身份-選擇套餐-付費下單-確認合同-認證資質-開通使用
          • 商品:信息服務類商品,認知成本高
          • 目標:聚焦,為業務運轉而采購,推廣預算明確,追求商業效益最大化

           

          具體來說,58會員商城的客戶一部分來自企業間的框架合作,例如房產推廣客戶,大型中介品牌與58同城達成了合作協議(業務側稱之為KA客戶),定期從商城購買大批量的經紀人推廣套餐會員,購物這件事兒對他們來說反而成了例行任務;另一部分來自電銷推廣,例如本地服務商家在業務員的推廣轉化下來到商城購買商戶推廣套餐;還有一部分是個體商人、經紀人,通過公開渠道自主下單。
           
          這些客戶從購買的服務內容、購買的機制規則來說都有不同的差異。對于商城設計師而言,更需要關注客戶差異所帶來的購物效率、成功率等問題。

           

          • 效率問題:KA客戶采購模式與購物流程的矛盾
          • 成功率問題:客戶心智與商品選擇難度的矛盾

           

          03.客戶鏈路設計

          本著給客戶提供更好的商城售賣服務,根據上述關鍵問題,我們進行了針對性的流程鏈路梳理,探索更優解的方案設計。
           

          · KA客戶采購模式與購物流程的矛盾

          KA客戶的采購模式與C端電商經典購物流程截然不同。

          首先,客戶需要經歷繁復的線下任務:i.跟門店經紀人收集名單;ii.整理經紀人開通時間&套餐類型;iii.與業務員審核名單信息。
           
          然后才是進入商城-選擇商品-上傳名單-付費下單。根據KA客戶的管理規模不同,每個月需要多次進行線下收集任務,周期性為旗下經紀人開通推廣套餐。而收集環節中的名單信息存儲在公司內的另一個業務系統中,C端電商的線性流程不能在這場景上互融互通。因此,我們需要進行新的流程設計,聚焦KA客戶的采購場景,提升客戶購買效率。

          KA客戶流程改造示意圖

           

          在新的流程中,將線下任務轉移到線上,大幅縮減了參與人員類型和多個流程環節。用戶經由KA客戶專屬入口,進入采購模式,通過名單管理機制完成添加、管理等操作。根據名單結果匹配對應的套餐組合和優惠策略,引導KA客戶進行批量下單。通過系統流程的互通改造,打通原有操作屏障,提升采購流程的流程性與體驗。

          KA客戶改造方案

           

          不僅如此,還有更多細分場景,例如經紀人到期續費、新員工入職開通套餐、經紀人自主申報加開套餐等等。這些環節貫穿了KA客戶及其員工們的工作生命周期,通過關鍵服務觸點打磨和數據的融合,讓客戶能夠更快捷獲取信息通知、套餐管理、推廣服務管理,從而形成完整的KA客戶服務鏈路。而全鏈路設計非一日之功,這也是我們正在持續研究和挖掘的方向。

           

          · 客戶心智與商品選購難度的矛盾

          與KA客戶不同,黃頁商家客戶更接近于普通消費者。用戶在業務員的引導下進入商城采購,這期間用戶面臨的主要挑戰是:

          1.復雜的業務分類

          2.雷同的商品內容

          在原先設計中,采用了扁平的C端電商篩選邏輯,篩選信息密度高,使得商家客戶容易忽略城市、行業類別對套餐的影響,導致買錯套餐、退單重買的情況頻頻發生。再者是信息服務類商品的大量雷同,需要業務員反復與客戶介紹套餐資源差異,影響購物決策效率。因此,對于這類場景,設計師的目標就要聚焦商家客戶的購物成功率,通過改造篩選路徑提升交易準確性和體驗。

           

          商品列表問題

           

          新方案中,先解決用戶第一個挑戰:聚焦“行業類別”選擇。通過蒙層的方式,讓用戶聚焦自身的業務類型,再結合業務關鍵詞的搜索匹配,避免海量類目干擾。
           

          商品蒙層引導

           

          接著讓用戶去完成下一個挑戰:選擇會員套餐。
           
          信息服務類商品不像大眾消費品有物理實體,可以通過照片去判斷感知,更多情況只能通過文案描述來傳遞商品信息。那么,如何讓用戶感知文案差異也是設計的關鍵。通過信息清單的對比設計,來呈現不同規格的套餐內容。我們還衍伸套餐PK工具、自助餐模式,來應對信息服務商品的差異化感知問題。
           

          商品信息對比設計

           

          完成以上購物流程的改造、商品信息感知的設計之后,我們也逐漸發現:不同客戶之間雖然有購買場景的差異,但也在商城有著共同接觸的服務節點。

           

          04.鏈路的整合與延伸

          為了讓好的設計服務到更多用戶,我們需要從系統的角度去考慮如何讓流程路徑更具兼容性、讓商城服務更具通用性。

           

          · 業務分發路徑

          商城原先是以商品類型的分類邏輯進行組織,不同業務線與不同類型的商品交織混雜在一起。用戶不能在業務分類下檢索全部商品。在新的客戶鏈路設計下,需要融合業務線客戶特征、業務線商品特征等情況,因此需要調整為以業務類型為主的分類邏輯,在首頁中強化業務分類,并將原來的商品列表頁改成業務線大類頁。讓不同業務的商家、不同體量的客戶各得其所。
           

          商城框架改造示意

           

          · 公共服務觸點

          我們收集了客戶在購物不同階段所可能接觸的內容:購物前—咨詢客服、了解業務介紹&商品規則;購物中—對比商品信息;購物后—引導開通資質。根據這些環節沉淀了公共的客服幫助中心,信息卡片規則,商品信息的流轉結構、售后流程節點引導等等,通過細節的打磨和設計,給予用戶更清晰、更便捷的指導,以此帶來更方便的自助服務體驗。
           

          公共服務觸點梳理

           

          05.最后

          回想起來,B端商城的核心設計思想依然還是“以用戶為中心”。差別大致在于:C端是要去驗證用戶痛點的真偽,以“點狀”思路驗證可行性;而B端是要去支撐用戶的業務鏈路,以“面狀”的流程通路去滿足業務基本的運轉需要。在這樣的項目中,作為設計師需要進行更多思考,由“點“及“面”,不斷探索用戶與業務的邏輯交織,像個蜘蛛俠一樣跳躍在邏輯的塔樓。

           

          原文地址:58UXD(公眾號)
          作者: 環鐵藝術家 

          轉載請注明:學UI網》設計沉思錄 | B端商城的客戶鏈路設計

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

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


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

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

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

          5個設計小技巧,越早會越好

          seo達人


          平時很喜歡一些干凈的設計,讓人感覺很舒服,閱讀內容也清晰,很多設計師在設計時,經常細節過多,會顯得累贅,有時候設計也需要用到英文,但只專注到了字體選擇,卻忽略了英文其他細節,今天和大家分享下,如何讓你的設計更加利索干凈!

           

           1.調整行間距 

          行間距大家都知道,但是具體如何設定值很多人不知道,一般我常用規則是 +4 ,比如文字大小是12PX,那么行間距就是16,以此類推文字是14,那么行間距就是18。

          ▲ 上圖是之前設計的一套規范的字行間距規則,供大家參考。

           

          除了+4的規律你也可以運用黃金比例,文字大小X1.414,文字大小X1.616(1.414和1.616是黃金值)取四舍五入,得出以下字體間距規則。

           

          很多人要問,我如何判斷界面里面用多大的行間距呢?道理很簡單,就是看你們內容,如果你們app內容需要很豐富,你可以行間距小一些讓屏幕展示更多內容,可以運用+4的原則,目前淘寶天貓是這個原則,如果你頁面內容更加留白大一些閱讀舒服一些,可以運用黃金比例的行間距,比如新聞閱讀軟件,需要大量留白來調整呼吸感!

          ▲ Yahoo News因為文字內容信息比較多,所以需要頁面信息量豐富,所以在行間距上用的類似固定+4的原則,讓頁面看起來更加清爽。

           

          ▲ 相反Airbnb頁面節奏大家感覺更舒服一些,因為它整體的行間距比較大,留白比較舒服,給人很優雅,清爽的感覺,他們在很多設計細節上都沒有遵循iOS規范,而去打破重組,比如列表高度,列表的圖標大小等。

           

           2.調整字間距 

          除了行間距,字間距同樣很重要,特別是英文頁面時候,同樣的內容,字間距,和行間距不合適,看起來界面就會相差很多,有的看著很舒服,有的看起來說不出來哪里不對。

          ▲ 這2個頁面,左邊:  (字母和字母的字間距: 0 ,行間距:20);右邊: (字母和字母的字間距: 0.2 ,行間距:22)

          上面左邊的頁面字母和字母之前距離非常的緊密,句子和句子之間的行間距也很近,導致閱讀起來很密集,不夠舒服,相反右邊通過加大行間距和字間距,使得內容沒有那么滿,字母和字母之間的間距,行與行之間的間隔,使得整個設計節奏得到了一些舒緩!

          需要注意的是:不要給太大的字間距,有時候過大也會讓讀者不舒服。

           

           3.減少線 

          ▲ 同樣一個結構,Airbnb對于商品單元處理就比ebay看起來要干凈清爽一些,原因在于ebay上面線條太多,可能和他們整體視覺語言有關,線多了就沒有純色看著清爽干凈。

           

          ▲ 再看亞馬遜的設計,以及韓國29cm對于細節的處理,29cm去除一切線條,讓設計更加清爽利索,而亞馬遜線條很多,雖然很好的起到的信息分割作業,但是就不夠清爽利落。

           

          ▲ 同樣一個設計,上面的采用線條的處理,下面的采用去掉線條用色塊來處理,哪個看起來更加干凈,當然是下面的!

           

          所以在一個設計里面減少線條,或者讓線條最少化,是讓UI設計看起來干凈的一種很重要的方法,通過間距來分割信息,加強內容和內容之間的間距,這樣做,用戶也是可以很清晰的區分信息層級。

          需要注意的是:優先保證內容清晰,如果有些地方一定要用到線條,一定要使用它。

          ▲ 在Facebook新版本視覺風格中,很明顯發現去線條的設計技法,左側是改版前,右側是改版后,很明顯facebook減少了線的運用。

           

          ▲ 去掉線條后整個設計并沒有影響層級,相反更加清晰。

           

           4.留白 

          ▲ 頁面放松和呼吸感在UI中非常重要,在左側的設計中,元素之間的距離特別小,都擠在一個空間里面,非常的滿。

           

          右邊的界面,很好的運用了版式,和空間感,有足夠的空間讓元素之間去呼吸讓用戶感覺舒服。

          ▲ 這個案例里面,左邊的內容很密集,留白雖然有,但是不明顯,右邊運用了大的灰色留白來區分信息的內容,所以右側看起來更加舒適。

           

          ▲ Facebook的卡片設計同樣也是采用粗的間距來作為信息的區分,讓頁面看起來更加的層次分明,利索干凈。

           

          ▲ 同樣左側的頁面雖然運用了去線,每個內容和內容直接的間距留白有了,但是信息密集不清晰,右側的就很清晰,通過頭像作為紐帶來區分信息,讓每行的內容更加清晰可見。

           

           5運用卡片 

          ▲ 在清晰度層面,使用卡片是幫助內容信息反饋的很好一種視覺形式,同時也讓信息更加明確哪塊是哪塊。

           

          ▲ 卡片化設計在移動端讓設計更加干凈利落,是經常運用到的設計點。

           

           總結 

          今天分享的幾個小技巧點,其實是我們每天做設計中遇見的,需要靈活的多學多用,同時我們每天看到的一些好的設計,記得去留意分析,為什么別的設計好,別人設計看起來那么干凈,畢加索說過:好的設計師借鑒,偉大的設計師偷。

          • 1.加強行間距,+4原則或黃金比例
          • 2.加大字間距: 0.1或0.2勿過大
          • 3.減少線條,如非得已使用線
          • 4.合理留白,拉開信息層級
          • 5.運用卡片,更好整合信息

           

          原文地址:我們的設計日記(公眾號)

          作者:sky


          轉載請注明:學UI網》5個設計小技巧,越早會越好

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

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


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

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

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

          交互手勢全解析之位移類手勢

          seo達人



          通過本文,學會根據需求設計合適的位移類手勢,能夠判斷手勢的體驗問題并提出相應解決方案,并與開發同學高效溝通確保落地。

           

          前言

          一年前更新了文章《交互手勢的容錯性和邏輯性》之后,有很多讀者朋友詢問是否能夠做一個詳細的講解交互手勢的系列文章,講解每個手勢的不同之處、應用場景以及在工作中如何使用。

          我非常理解這些讀者的痛點,因為我在日常的工作中,也經常遇到一些難題。比如同樣是滑動,但是些許參數的變化就會導致體驗的天差地別,應該如何進行選擇。再比如與開發同學溝通過程中如何準確描述自己想要的效果,讓最后的結果不至于與自己的預期不一致。

          這些難題也促使我大量思考,大量體驗各種產品的手勢操作,希望能夠從中總結出規律,讓手勢的設計與落地能夠有理有據?,F在經過一段時間的積累,我認為我在這方面可以講一些能夠幫助大家的內容了。不足之處,希望大家指正。

          今天給大家帶來專欄的第一篇《交互手勢全解析之位移類手勢》。

           

          1 位移類手勢的描述維度

          手勢作為圖形界面與用戶之間溝通的方式之一,在便攜電子設備上大量應用。與實體按鍵相比,它有著純粹的簡潔性和無盡的創造性,手指的個數變化、不同變量的組合能夠創造出無數的操控方式。

          位移類手勢是指代那些通過手指接觸屏幕后的位置變化從而操控電子設備的手勢,本篇文章主要講解單指操作的位移類手勢,多指的位移類手勢(如捏合)將放到后續文章中講解。

          一談到位移類手勢,大部分設計師的腦海中可能會浮現出拖拽、甩動和輕掃這三個術語。然而,當我們想仔細談論他們三者之間的區別時,大部分設計師可能無法準確地描述。為了能夠準確描述三者的區別,我們在這里引入三個維度的概念,它們分別是控制方式穩定化效果、以及閾值類型,這三者的不同的變化組合可以創造不同的位移類手勢,拖拽、甩動和輕掃之間的區別也是這三個維度影響的。當我們在討論不同位移類手勢之間的區別時,不如說是在討論這三個維度之間的區別。比如常見的輕掃手勢,因為這三個維度的變化就會產生不同的變種,而且不同變種在體驗上也存在很大差別,若不分場景隨意使用,很容易就影響用戶體驗。那接下來我們首先了解一下這三個維度。

           

          1.1 控制方式

          第一個維度是控制方式,它分為絕對控制相對控制,也可以通俗的表達為跟手不跟手,區別如下。

          絕對控制/跟手:施加控制的一方(后文簡稱施控物)的某個屬性變化與被施加控制的一方(后文簡稱受控物)的某個屬性變化是對應的。

          相對控制/不跟手:施控物的某個屬性變化與受控物的某個屬性變化不是對應的。

          比如在網易云音樂的播放頁(下圖左),左右滑動黑膠時,手指是施控物,黑膠是受控物,手指的橫向位置變化和黑膠的橫向位置變化是對應的,即絕對控制。上滑調出評論頁時(下圖右),評論頁的位置和手指的位置沒有對應關系,手指的上滑僅僅控制評論頁是否出現,即相對控制。

          與相對控制相比,絕對控制允許用戶去操控受控物的屬性變化過程,因此給予了用戶更強的掌控感。比如在微信讀書閱讀頁邊緣右滑,手指的橫向位置與書籍封面的變化過程對應,模擬現實生活中慢慢合上書的感覺,如下圖。

          但是在有些場景,為了避免混亂,屬性變化過程是不適合被用戶絕對控制的,此時我們應采取相對控制的方案。比如 iOS 的相機中,左右滑動切換拍攝模式,由于前后不同模式之間的頁面框架變化較大,切換時會有過多元素的屬性變化,如果使用絕對控制就會導致切換拖沓且混亂,使用相對控制就能避免這個問題。

           

          1.2 穩定化效果

          1.2.1 定義

          當我們使用手勢控制某個受控物時,由于手勢的某個屬性(如手指位移)達到閾值,進而導致受控物的某個屬性穩定在了特定狀態的效果被稱為「穩定化效果」,或者也可以稱為「吸附」。

          穩定化效果能夠保持界面的視覺秩序,避免過多的中間狀態導致界面的雜亂,進而幫助用戶聚焦信息。

          是否有穩定化效果是區別輕掃與另外兩個手勢即甩動和拖拽的重要維度,當某個位移類手勢有穩定化效果,我們就將其稱作輕掃。

          以滑動切換抖音視頻為例,當手指上滑的位移距離和釋放速度其中的某一項屬性達到閾值后,下一條視頻會往上移動到一個固定的位置然后進入穩定狀態,而不會出現停留在不完整的中間狀態,如下圖所示。

          在 iOS 端的微信消息頁左滑某條消息后會出現更多操作按鈕,按鈕會在手指滑動的距離達到閾值并松開后穩定在一個固定的大小,而不會停在類似下圖左所示的混亂的中間狀態。

          在多內容選擇的場景中,如果滑動與選中是綁定的話,一般需要使用穩定化效果。例如在 iOS 相機里選擇濾鏡時,滑動濾鏡選項不但能夠控制濾鏡選項的位置,并且會自動選中一個位于中間位置的濾鏡,位置的穩定化避免了被選中選項的不明確。

          如果滑動與選中是分開的,比如美圖秀秀的濾鏡選項需要先滑動后選中,這種情況下穩定化效果不是必要的。

           

          1.2.2 與效率的關系

          不同的穩定化規則帶給用戶的體驗差異是非常大的,最明顯的差異是在效率方面。我們使用穩定化效果的強弱來理解,穩定化效果越強,單次滑動能夠切換的選項個數越少,效率越低。穩定化效果越弱,單次滑動能夠切換的選項個數越多,效率越高。

          比如在比較常見的 banner 切換功能中(下圖左),無論手指位移和釋放速度的值有多高,banner 只能切換并穩定到下一個,不能夠一次切換多個 banner。而在網易云音樂的首頁排行榜中,一次滑動能夠切換多個內容卡片。因此,我們可以說前者的穩定化效果比后者強。

          拖拽和甩動雖然沒有穩定化效果,但是也存在效率的高低。我們可以將其與輕掃放在一起做對比,如下圖所示,拖拽、穩定化效果強的輕掃、穩定化效果弱的輕掃、甩動它們切換效率依次增加。

          那么我們決定添加穩定化效果后,如何選擇強弱程度呢?選擇沒有絕對的對錯,整體來說主要考慮兩點,業務訴求和用戶訴求。例如在常見的 banner 切換中,banner  的總數量一般不會很多,業務的訴求是希望盡可能曝光每一個 banner ,使感興趣的用戶進行消費,因此這里比較適合做穩定化效果強的輕掃。在云音樂的排行榜案例里,不同用戶感興趣的榜單是不同的,穩定化效果弱的輕掃可以方便用戶單次滑動切換多個,快速切換到自己感興趣的榜單的大概位置。

          百度 App 的表情面板原本是左右輕掃瀏覽表情,在一次改版中改為了上下甩動瀏覽。主要目的之一就是為了提高瀏覽效率、降低非首屏表情的曝光難度。

          微信視頻號的改版是一個典型的案例,舊版的微信視頻號的視頻流并不是類似抖音那樣的全屏化形式和輕掃手勢(下圖右),而是占據屏幕尺寸三分之一到二分之一之間的卡片形式(下圖左),并且使用甩動而非輕掃。視頻號問世初期優質內容匱乏,社交推薦算法不完善,貿然模仿抖音式的全屏化形式和輕掃手勢的話,會導致用戶瀏覽到劣質視頻時負面感受被增強且切換效率變低,反之卡片形式加甩動手勢給予了用戶更自由的選擇空間,提高了用戶的切換效率,降低了負面體驗。等到如今時機成熟,再從卡片形式和甩動手勢換成全屏化形式和輕掃手勢就勢在必行了。

          在某些場景,用戶需要先通過高效的方式選擇特定區域的內容,然后進入聚焦狀態進行內容瀏覽和慢速的切換,此時我們需要設計兩種切換效率不同的手勢應對前后場景的變化。如下圖,在 iOS 的照片 App 中,先使用切換效率較高的甩動進行粗略切換找到目標圖片大概位置,點擊進入大圖模式時使用切換效率較低的輕掃進行精確切換查看。

           

          1.2.3 觸發時機

          觸發穩定化的時機可以分為釋放前和釋放后,不同的時機帶給用戶的體驗也不同。釋放前穩定化指的是用戶使用手指滑動屏幕時,手指位移達到閾值后,手指無需離開屏幕,穩定化即可被觸發。如下圖左,iOS 的相機滑動切換濾鏡使用的就是釋放前穩定化。釋放后穩定化指的是用戶使用手指滑動屏幕時,手指位移或釋放速度達到閾值后,手指必須離開屏幕,穩定化才能被觸發。如下圖右,常見的 banner 切換。

          釋放前穩定化可以避免拖沓,增加切換效率,但是缺點是無法反悔回退且缺乏掌控感。反之,釋放后穩定可以反悔回退,掌控感強,但是缺點是比釋放前穩定化拖沓了一些。

           

          1.3 閾值類型

          閾值是能夠觸發變化的最小值。比如當水的溫度達到 100 度時就開始變成水蒸氣,100 度就是一個閾值,溫度是閾值類型。在手指與屏幕的交互中,手指在屏幕上的某個停留時間、位移、釋放速度、點擊次數等都可以成為一個閾值類型,達到相應閾值后就可以觸發相應的變化,常見的變化有受控物的位置、大小、不透明度等,理論上變化可以是任意的。

          在位移類手勢中,通常會用到的閾值類型有手指位移釋放速度,手指位移是用戶在手指觸摸屏幕時的位置與之后某個時間手指位于屏幕的位置之間的距離,釋放速度是用戶的手指在屏幕表面進行位移后離開屏幕那一瞬間的速度。

          市面上的 App 暫時不存在僅通過釋放速度判定而與手指位移無關的閾值判定方式,因為其不太符合常識。因此我們在設計位移類手勢時,能夠選擇的閾值判定方式常見的有兩種:

          • ① 判定手指位移和釋放速度滿足任意一個即可;
          • ② 僅判定手指位移。

          當我們設計手勢時,就需要考慮兩者的區別。由于 ① 比 ② 增加了釋放速度帶來的額外移動距離,因此 ① 的主要優點是高效。但是由于我們無法預判釋放速度帶給受控物的移動距離長短,所以相對應的缺點就是易誤操作和不精確。②就恰恰相反,由于不存在釋放速度造成的不確定因素,它的優點是不易誤操作和精確,缺點是低效。

          甩動和拖拽之間的區別就在于閾值判定方式,甩動是 ① ,拖拽是 ② 。如下圖,當在微信消息列表找相應的消息時,用戶的訴求就是能夠快速找到特定消息的位置,對特定消息的出現在屏幕的位置也沒有特定要求,只要能夠被手指點擊到即可,因此選用甩動較為合適,但是對于調節音量、亮度這一類的操作,滑動的范圍有限,因此用戶對效率沒有太高的要求,但是對于滑塊位置的精確度有要求,因此選用拖拽是更為恰當的。

          再舉一個反例,在 Steam 移動端橫滑首頁的泳道卡片時(下圖左),使用的手勢是拖拽而不是甩動,瀏覽起來特別低效。更適合的做法應為甩動,會更符合此場景下的快速瀏覽的訴求,如下圖右的豆瓣。

          對于輕掃來說,使用哪種閾值判定方式有多種情況(如下圖所示)。在本文中,根據閾值類型、穩定化效果以及控制方式的不同我將把輕掃分為 A-E 共 5 類(A-E的命名方式僅存在于本文章,因此在向其他人傳達時,盡量使用在后文我介紹的手勢描述而不是類別名稱,以便于對方理解。)。后續會為大家仔細舉例講解,大家現在僅了解一下即可。

          當我們在刷抖音視頻時使用的手勢就是輕掃,是否滑動到下一條視頻進行播放的判定方式是① 判定手指位移和釋放速度滿足任意一個即可,對應的手勢類別是上面表格中的輕掃A。如下圖所示,在刷抖音時,如果使用判定手指位移的方式,我們可以將手指在垂直方向位移大于半個屏幕高度的距離,從而切換到下一個視頻。如果使用判定釋放速度的方式,我們可以移動任意的垂直距離但是手指離開屏幕時保留一個速度從而切換到下一個視頻。大部分情況下用戶都會使用判定釋放速度的方式,因為既省力又便捷。

          如果將閾值判定方式改為 ②僅判定手指位移,對應的手勢類別是上面表格中的輕掃 B,并且位移的閾值設置得比較大的話,給用戶帶來的負面體驗可能將是非常大的。比如下圖中打開美圖秀秀的短視頻評論浮層后,想要下滑收起時,App 僅判定手指位移,而且這個位移閾值設置得比較大,對于希望通過快速滑動一小段距離收起浮層的用戶來說體驗很差。即使由于開發資源有限我們只能做到僅判定手指位移,我們也可以通過減少手指位移的閾值來降低負面體驗。

          但是某些場景下,②僅判定手指位移是更加合適的。比如想要在微信中下拉打開小程序選擇頁,就只能通過手指位移達到一個特定的閾值才能夠觸發,無論怎么用力滑動去增加釋放速度都無法打開小程序選擇頁。這樣處理的原因是在微信消息列表頁,上下滑動瀏覽微信消息是一個高頻操作,如果釋放速度也能作為打開小程序頁面的閾值的話,用戶可能就極易在下滑消息列表時誤操作,無意間打開小程序選擇頁。

          因此,對于位移類手勢,選用哪種閾值判斷方式要依據用戶使用場景和訴求,不能想當然地設計。

           

          2 常見位移類手勢解析

          了解完三個基礎維度后,我們再將其進行組合,從特定手勢的角度更全面地理解它們的差異和使用場景。三個維度的排列組合能夠生成十余種位移類手勢,我列舉出了常見的 7 類,如下圖所示,這 7 類基本涵蓋了 95% 以上的場景,我將一一舉例說明。由于施控物控制受控物改變的屬性一般都為位置,因此接下來在描述下面手勢的定義時我都以受控物的位置變化進行舉例。

           

          2.1 拖拽

          2.1.1 定義

          使用手指在受控物位置按下后,操控受控物沿著某個方向移動,無論釋放時手指是否仍有速度,受控物都會立即停止移動。(下圖的動態演示由 Principle 制作,觀看會有些不太直觀,大家可以在文章結尾處下載 Principle 源文件后導入到手機里體驗,源文件包含文章提到的所有位移類手勢)

           

          2.1.2 特點

          精確度高但效率低。由于閾值類型僅判定手指位移且沒有穩定化效果,拖拽適用于對操作精度要求高,對效率要求低的功能。

           

          2.1.3 案例

          在 iOS 設置中調節亮度時,在有限范圍內,手指左右拖拽可以控制亮度變化。

           

          2.2甩動

          2.2.1定義

          使用手指在受控物位置按下后,操控受控物沿著某個方向移動。若釋放時手指仍有速度,受控物將移動一段距離后才慢慢停止,移動的距離與釋放速度呈正相關。若釋放時手指速度為 0 ,則受控物立即停止移動。

           

          2.2.2 特點

          精確度低但效率高。由于閾值類型判定釋放速度和手指位移,甩動適用于需要快速瀏覽較多內容的場景,如滾動瀏覽列表。

           

          2.2.3 案例

          在微信的消息列表頁,使用甩動手勢控制列表上下移動,若釋放時仍有速度,列表將仍移動一段距離后才慢慢停止。

           

          2.3 輕掃 A

          2.3.1 定義

          使用手指在受控物位置按下后,操控受控物沿著某個方向移動。若釋放時的速度和手指位移有任意一個達到閾值,受控物將穩定在一個新位置。若釋放速度和手指位移沒有任何一個達到閾值,受控物將回到原位置。

           

          2.3.2 特點

          由于輕掃擁有穩定化效果,因此它能夠保持界面的視覺秩序,避免過多的中間狀態導致界面的雜亂,進而幫助用戶聚焦信息。接下來講解的其他輕掃類型都有這一特性,就不一一贅述了。輕掃 A 與接下來要講解的輕掃 B-E 的最大不同之處在于輕掃 A 的閾值類型為「釋放速度和手指位移」,這讓輕掃 A 與輕掃 B-E 有兩點不同,一是輕掃 A 可以通過釋放速度的快慢去控制內容的切換數量的多少,更加高效,二是輕掃 A 可以通過用手指在屏幕滑動很短的距離但離開屏幕時保留一個速度來切換內容,因此更加省力。

           

          2.3.3 案例

          在刷抖音時,如果使用判定手指位移的方式,我們可以將手指在垂直方向移動大概半個屏幕高度的距離,從而切換到下一個視頻。如果使用判定釋放速度的方式,我們可以移動任意的垂直距離并且手指離開屏幕時保留一個速度從而切換到下一個視頻。

           

          2.4 輕掃 B

          2.4.1 定義

          使用手指在受控物位置按下后,操控受控物沿著某個方向移動。若釋放時手指位移達到閾值,受控物將穩定在一個新位置。若釋放時手指位移沒有達到閾值,受控物將回到原位置。

           

          2.4.2 特點

          輕掃 B 與輕掃 A 相比唯一的區別是閾值類型減少了釋放速度的判定方式,這提高了觸發切換的難度,使操作成本變高,但是在某些場景下,這也降低了誤操作的概率。如下拉刷新等。

           

          2.4.3 案例

          比如想要在微信中下拉打開小程序選擇頁,就只能通過手指位移達到一個特定的閾值才能夠觸發,無論怎么用力滑動去增加釋放速度都無法打開小程序選擇頁,這樣處理的原因是在消息列表頁上下滑動瀏覽消息是一個高頻操作,如果釋放速度也能作為打開小程序頁面的閾值判定方式,用戶可能就極易在下滑消息列表時誤操作,無意間打開小程序頁面。

          因此,當頁面已存在一個滑動操作的情況下,還存在另外一個方向相同的滑動操作且僅會在邊界情況下才能觸發時,為了避免誤操作,會將后者的手勢設計為輕掃 B 。

          上文提到,輕掃 A 的閾值類型為判定「釋放速度和手指位移」,輕掃 B 的閾值類型為僅判定「手指位移」,由于前者的實現成本比后者高,導致本應適合做成輕掃 A 的功能有時只能妥協做成輕掃 B ,比如之前提到過的美圖秀秀的短視頻評論浮層案例,但我們也可以通過減少手指位移的閾值來降低負面體驗,后文會講解如何與開發同學溝通。

           

          2.5 輕掃 C

          2.5.1 定義

          使用手指在受控物位置按下后,操控受控物沿著某個方向移動,但是受控物并不隨著手指的控制而同步移動,僅當釋放時手指位移達到閾值時,受控物才開始移動并穩定在一個新位置。若釋放時手指位移沒有達到閾值,受控物位置則一直保持不變。

           

          2.5.2 特點

          上文講到過釋放后穩定化和相對控制的缺點,釋放后穩定化比較拖沓,相對控制讓用戶缺乏掌控感。兩者如果應用到了同一個手勢(即輕掃 C ),就會導致用戶在滑動屏幕時得不到任何反饋,用戶會疑惑是否因為自己操作不當或是設備出現故障。只有當用戶手指離開屏幕后才會發現觸發了操作,整體的交互流程給用戶一種滯后與延遲的感覺。

          因此輕掃 C 與其他類別的輕掃相比存在劣勢,但是它也存在很多的 App 的 H5 頁面中,我的猜測是由于 H5 對于判定釋放速度和絕對控制這兩個維度與客戶端相比難度大很多,因此只能退而求其次選擇輕掃 C 這個較差的方案,實際上在同樣的應用場景中用輕掃 A 替換輕掃 C 可以帶來更好的體驗。

           

          2.5.3 案例

          下圖左是 QQ 的個性裝扮的 H5 頁面,卡片的切換使用的就是輕掃 C ,如果能夠優化為輕掃 A 體驗會更好,比如下圖右的音街首頁卡片的設計。

           

          2.6 輕掃 D

          2.6.1 定義

          使用手指在受控物位置按下后,操控受控物沿著某個方向移動,但是手指位移達到閾值前受控物并不隨著手指的移動而移動。若手指位移達到閾值,無需手指釋放,受控物將開始移動并穩定在一個新位置。若手指位移沒有達到閾值,無論是否釋放,受控物位置則一直保持不變。

           

          2.6.2 特點

          相對控制的方式降低了用戶的掌控感,釋放前穩定化減少了操作的拖沓感。使用此手勢的場景是在多個對象之間切換時,我們不希望用戶過于自由地操控對象之間的屬性變化過程,并且犧牲掌控感從而增加單次的切換效率。

           

          2.6.3 案例

          比如 iOS 的相機中,左右滑動切換拍攝模式時,由于前后不同模式之間的頁面框架變化較大,切換時會有不同元素的屬性變化,如果使用絕對控制和釋放后穩定化就會導致切換混亂且拖沓,使用相對控制和釋放前穩定化就能避免這個問題。

           

          2.7 輕掃E

          2.7.1 特殊說明

          上文我們講到,通過輕掃手勢 A-D 對受控物的絕對/相對控制都是存在于穩定化前,受控物一旦穩定化,就脫離了手指的控制,需要手指離開屏幕后再次接觸屏幕開始下一次控制。

          輕掃E的不同之處在于它可以在受控物穩定化后,仍然控制受控物朝著下一個節點穩定化,在每個節點之間切換時能夠明顯感覺到分段感,如下圖案例所示。

          由于輕掃E相對于輕掃 A-D 的特殊性,控制方式中的絕對控制和相對控制無法覆蓋這個特殊現象,因此我們使用「多段相對控制」來命名輕掃E的這種特殊的控制方式。

           

          2.7.2 定義

          使用手指在受控物位置按下后,操控受控物沿著某個方向移動,若手指位移達到閾值,無需手指釋放,受控物就穩定在了一個新位置,但是此時手指還是仍然可以操控受控物繼續移動的,并且繼續移動過程中如果手指位移達到閾值將會到達下一個穩定化狀態。

           

          2.7.3 特點

          輕掃 E 適用于需要在多個對象之間快速切換和確認的場景,它的使用感覺很接近拖拽。如下圖所示,我們可以這樣理解,當被切換的對象數量接近于無窮大同時每個對象之間的距離接近無窮小時,輕掃 E 就可以視為拖拽。

           

          2.7.4 案例

          iOS相機人像模式切換打光方式、微信的通訊錄滑動字母索引導航,它們都使用輕掃 E 來滿足多個對象之間快速切換和確認的需求。

           

          3 實戰案例

          了解完上述的維度和常用手勢后,我們在腦中就可以形成一個思考框架。當我們要針對一個功能設計位移類手勢時,就可以從閾值類型、穩定化效果以及控制方式這三個維度思考。接下來我用一個我參與過的實際項目作為案例給大家講解一下思考過程。

          本案例是網易云音樂陌生人版一起聽中的一個功能,一起聽的雙方在聽歌過程中會收到彼此共同信息,比如聽歌口味相似度、是否同城、都喜歡哪些歌手等,目的是為了增加可玩性和互動性、降低退出率,鼓勵用戶互相了解、提高一起聽過程中的社交體驗。

          為了營造儀式感和避免信息過載,共同信息的展示方式設計為了一次只能看一條,進入浮層后默認展示最新的一條,可以通過滑動查看上一條。因此為了避免出現兩條同時占據展示區域的混亂狀態(如下圖左),我們為其添加了釋放后穩定化效果(如下圖右),同時為了方便用戶可以快速瀏覽舊的共同信息,這里使用的穩定化效果是較弱的,用戶可以通過滑動一次切換多個共同信息。

          由于需要滿足用戶快速瀏覽舊的共同信息的訴求,閾值類型選用了「判定手指位移和釋放速度滿足任意一個即可」,用戶可以通過控制釋放速度進而控制信息的切換數量。控制方式則選擇了掌控感強的絕對控制。最后的結果如下圖所示。綜合三個維度進行歸類,此手勢為穩定化效果較弱的輕掃 A 。

           

          4 手勢角度的處理

          位移類手勢的方向一般為上下或左右,但并不是一定要完全垂直或水平才能夠觸發手勢。當上下滑動和左右滑動同時存在于一個頁面時,默認會有一個容錯角度,比如上滑時手指滑動方向只要左右偏移不超過 45° 都會被判定為上滑,如下圖所示。

          但是有時開發同學出現失誤,導致容錯角度沒有均分,例如下圖中觸發上滑和下滑的角度極小,導致用戶在上下滑動時非常容易誤操作為左滑和右滑。

          云音樂也曾有過類似的遺留問題,iOS 端的播放頁上滑調出評論頁極易誤操作為左右滑動黑膠切歌(如下圖 A ,現已修復),安卓端的賬號側邊欄上滑瀏覽極易誤操作為左滑收起側邊欄(如下圖 B )。

          因此,在驗收階段,除了上述的三個維度外,角度的容錯性檢查也是重要的一環。因此在驗收時間充裕的情況下,最好要切換不同的手持方式分別體驗一次,因為有些問題只有在特定的手持方式下才能夠被發現。

          客戶端的角度判定方式實際上是一個比較復雜的過程,上述的內容是簡化的版本。后續將延展為一篇獨立文章給大家仔細聊一聊。

           

          5 客戶端的差異

          上文講到,基礎的三個維度即閾值類型、穩定化效果和控制方式決定了手勢的類別,是設計階段一定要定義清楚的。但是除此之外,設計一個手勢需要定義的細節非常多。比如受控物的移動是否有速度曲線?手指位移與受控物之間的位移的比率是多少呢?這些都是開發階段不得不面對的。幸運的是,安卓和 iOS 有系統封裝好的一套系統組件可以調用,操作系統自行解決了剛才講到的細節問題,但是 H5 框架下是無法調用系統組件的,手勢的各種細節都需要前端開發人員自己編寫,難度較大,大部分情況只能實現一些比較簡陋的效果,這也是為什么在很多 H5 框架下的界面滑動的體驗比較差的原因。

           

          6 高效溝通

          由于信息不對稱,與開發的溝通過程中,很容易出現理解偏差。比較常見的錯誤有:將甩動誤解為輕掃 A ,將輕掃 A 誤解為輕掃 B 或甩動。如果造成效果達不到預期的情況,很多設計師不知道如何讓開發同學修改,只能說“這個手勢不絲滑,優化一下”,開發同學也是一頭霧水,不知道往哪個方向優化。如果我們能夠直接說出“閾值判定方式現在只有手指的位移,需要釋放時的速度也能夠觸發跳轉;這個位移的閾值太高了,滑動時很難觸發跳轉,需要把閾值改為 16pt ”類似這樣準確的描述,就能夠大大降低溝通成本,順利驗收。為了避免溝通出現問題,下面我將日常經驗總結出現希望能夠幫助到大家。

          首先,一旦涉及到位移類手勢,除了必要的文字描述外(可參考上述的手勢定義的描述),最好給開發體驗 demo 或者其他 App 上類似的效果,否則很容易產生理解偏差。各種 App 上的類似效果大家可以用本文的每個手勢的案例給開發同學展示,但是 App 可能會更新,案例可能在未來某個時間就找不到了,所以我用 Principle 做了一個簡易的基礎 demo 集合(如下圖,源文件在文章末尾下載),和我上述介紹的手勢是對應的,大家可以拿著這個 demo 給開發同學演示大概的效果,也可以在這個 demo 源文件修改。

          下載鏈接: https://pan.baidu.com/s/1iaFrcFwzC58TG3L17bjC_Q  密碼: asto。

          拖拽和甩動由于需要定義的細節參數都被操作系統提前封裝好了,一般不需要我們給到額外的標注。但是對于輕掃,我們需要將細節定義清晰,下面將詳細講解。

           

          6.1 閾值類型

          上文講到,閾值類型一般有兩種:

          • ① 判定手指位移和釋放速度滿足任意一個即可;
          • ② 僅判定手指位移。

          ①的開發成本高于②。

          如果我們選用輕掃的閾值類型是①,開發同學編寫代碼需要兩個參數的閾值,分別是手指位移和釋放速度。手指位移閾值一般默認為受控物的1/2,例如下圖的全屏短視頻和 Banner 。

          當然我們也可以自定義一個閾值,比如 100pt 、受控物高度的 1/6 等,沒有特別的需要的話使用默認值即可而且也不用給開發同學特殊說明,但是如果有特殊需要想要修改默認值,就要告知開發同學你自定義的手指位移閾值。對于釋放速度閾值,通常默認就非常的小,幾乎是大于 0 即可觸發,一般情況下使用默認值即可。

          在本應該選用①的場景中,如果由于技術成本原因不得不選用②,需要注意的是由于缺少了釋放速度的判定,手指位移的閾值我們需要設置得小一些方便用戶觸發,否則就會出現上文中美圖秀秀浮層的那樣的體驗問題。經過我的實驗,手指位移閾值一般定為 16pt 是比較適中的,既不會太容易誤操作也不會難以觸發。

           

          6.2 穩定化效果

          輕掃是一定存在穩定化效果的,關鍵在于告知開發是釋放前穩定化還是釋放后穩定化。從開發的角度講,系統會監測用戶的行為,用戶在使用滑動時會有按下(down)、移動(move)、抬起(up)三個行為,釋放前穩定化是在移動階段判斷閾值并觸發操作、釋放后穩定化是在抬起后判斷閾值并觸發操作,開發成本幾乎沒有區別。

          上文提到過穩定化效果強弱的概念。穩定化效果越強,單次滑動能夠切換的選項個數越少,效率越低。穩定化效果越弱,單次滑動能夠切換的選項個數越多,效率越高。首先,我們需要確定單次滑動允許切換多個還是只允許切換一個,如果允許切換多個,開發同學會設定一個控制切換難度的系數,而只允許切換一個的話就不存在這個系數。通常我們也不需要修改這個默認系數,但如果想讓操作更加難或容易觸發,可以告知開發同學修改這個系數。

           

          6.3 控制方式

          絕對控制比相對控制的開發成本高,如果開發資源并不是很緊張,需要絕對控制的場景就不要退而求其次使用相對控制。涉及到輕掃手勢一定要告知開發同學控制方式,否則很可能被視為相對控制處理。

           

          7 手勢排查

          通過本文的學習,我們不但可以在開發工作進行前與開發同學高效溝通,保證開發工作的順利進行,也可以對自家移動端產品的現有手勢進行逐一排查發現問題點進行記錄,并且找到合適解決方案,然后用準確的語言描述給開發同學。下圖是我在進行手勢排查后輸出的表格,挑選出一些有代表性的案例給大家作參考,開發同學可以通過它快速明確問題,理解解決方案。

           

          結語

          本篇文章的歸納總結是通過日常積累和思考得來,希望能夠幫助大家在設計與溝通層面解決實際問題,如果有任何疏漏和不嚴謹的地方,希望大家能夠指出,后續的更新會將專欄不斷完善,交互手勢系列暫定的后續更新計劃如下。

          基礎篇:

          • ①位移類手勢(本篇文章)
          • ②點擊類手勢
          • ③其他類手勢

          進階篇:

          • ④交互手勢的特性

          超越篇:

          • ⑤設計創新型手勢

          有興趣的小伙伴可以持續關注哦~

          文章提到的 Principle 格式的手勢 demo 下載鏈接: https://pan.baidu.com/s/1iaFrcFwzC58TG3L17bjC_Q  密碼: asto。

           

          參考書籍:

          《交互設計語言:與萬物對話的藝術》 作者: 羅濤

          《交互設計精髓 4》作者:[美] 艾倫·庫伯 / [美] 羅伯特·萊曼 / [美] 戴維·克羅寧 / [美] 克里斯托弗·諾埃塞爾

           

          參考文章:

          百度APP「表情面板」體驗升級

          微信視頻號為什么沒有采用全屏沉浸式交互

           

          參考網站:

          iOS Human Interface Guidelines

           

          原文地址:站酷

          作者:Ballen成明

          轉載請注明:學UI網》交互手勢全解析之位移類手勢

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

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


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

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

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


          B端設計師如何挖掘自己的設計價值

          seo達人



          B端產品會有一個非常明顯的特征,那就是行業與行業之間的壁壘非常大,能通曉兩三個行業已經很厲害了。但你是一個設計師,可能會遇到各種復雜的業務場景,很多行業術語你可能都不精通,就算學習了也不一定能非常懂,所以在做設計的時候還是會懵。這個時候就需要設計師有強大的抽象創意能力了。

          a

          01.前言

          B 端產品簡稱TOB(to Business)產品,使用對象一般為企業客戶或組織。B 端產品幫助企業或組織通過協同辦公,解決某類管理問題,承擔著為企業或組織提升效率、降低成本、控制風險從而提高企業收入,減少企業內部損耗的重要職責。B 端產品的工作是合理實現企業需求,提高產品核心競爭力,并提升市場價值。

          圖片

          B端產品會有一個非常明顯的特征,那就是行業與行業之間的壁壘非常大,能通曉兩三個行業已經很厲害了。但你是一個設計師,可能會遇到各種復雜的業務場景,很多行業術語你可能都不精通,就算學習了也不一定能非常懂,所以在做設計的時候還是會懵。

          這個時候就需要設計師有強大的抽象創意能力了,你做過的業務越多,你腦海中積累的業務模型就越多,如果你善于記錄,那么在遇到這種情況的時候,你可以快速的通過調用業務模型來解決,看能不能滿足業務方的需求,如果能滿足,就可以繼續完善和優化,凡是審批流,就必定有列表、詳情頁、查詢、新增編輯還有就是各種審批狀態對應的操作,諸如撤回、加簽之類的,用通用的業務模型解決不同的問題,用抽象的思維能力概括業務的實際需求,就可以戰無不勝了。

           

          02.定位好自己的角色

          一個B端設計師最應該具備的核心能力是什么?那就是解決問題的能力,以及理解業務和處理業務的能力。很多設計師成為了一個“項目推動型”設計師,并沒有搞清楚自己的角色和該角色應該具備的責任、技能和價值。

          作為一個B端設計師來說,需要很快的認識到自身的角色和其所具備的責任、技能和能創造的價值。需要搞清楚如何體現自身的價值以及增加自身價值的方向。

          先來看一個產品的設計流程圖

          圖片

          流程圖里可以看出來,在整個產品流程中,設計師是跨團隊+全鏈路參與的角色,在每個環節都有可挖掘和貢獻的價值點。

           

          03.如何挖掘設計價值

          B端產品重業務、重交互、輕視覺,業務必然比C端復雜、非人性,需要設計師對相關行業有一定的理解,需要用戶跨過學習門檻,才能使用系統提高工作效率。接下來會根據具體案例,來闡述一下設計師可以賦能業務的點。

           

          · 對思維的培養

          大部分設計師拿到需求之后,直接會在需求文檔的基礎上進行設計,在與產品的配合中屬于被執行者,被動的接收產品的需求,按照原型輸出設計稿,這會使 B 端的設計變得無趣,也體現不出你的價值。

          圖片

          設計師要學會轉被動為主動,才能很好的發揮設計價值。本身設計與產品的配合就是相互成就的,大家的目標都是一致的。面對B端復雜的業務需求,在和產品思維對焦時,需要設計師思維前置,辯證的去思考產品方向,幫助產品梳理需求,從需求背景出發,收集用戶、需求方的反饋,綜合考慮根本要解決的問題是什么,再去想如何產出設計方案,不要只被動的承接需求。平衡當前資源實現業務方要求的功能,讓用戶體驗易用性,從而提高業務效率。

           

          · 從解決問題入手

          B端設計師的核心競爭力就是解決問題的能力,需要快速理解業務和處理業務的能力,這樣才能更好的創造更多的價值。

          圖片

          后臺系統的搭建離不開一套強大的、統一的UI設計規范。規范是設計視覺統一的基礎也是配合技術團隊高效產出一致體驗所必不可少的工具。說到規范就得提一下組件了,組件的產生是為了避免我們重復的造輪子,并且對控件細節進行了把控。市面上雖然有已經成熟的組件,但是和自身的業務特點并不一定貼合,就需要我們基于 B 端產品特性和自身業務特點,以靈活性、復用性、全面性的設計原則來進行設計,例如我們就對頭部篩選項的自定義設置,在縱向間距關系和橫向間距關系上指出信息之間的距離和關聯性之間的關系,更能靈活的選取我們想要的狀態進行搭配,復用全局的使用。提升了研發團隊的效率也解決了視覺一致性的細節問題,節約時間去做更有意義的事情。

          圖片

           

          · 設計賦能業務

          單純的支持業務需求是每個設計師的本質工作,那我們怎么能把價值賦能到業務上呢,這就回歸到文章開始說的設計思維的轉變,對思維的培養就是對需求的深挖,對問題的收集和思考,那么再進一步就要行動起來,主動進行用戶調研,挖掘需求的突破點,找到更好的解決方案和更有價值的驅動點。那么我們在對不同項目賦能時也可采取此種方法進行思考,拆解任務跟進落地,提供規范與組件支撐,采集此流程中帶來的價值,在項目結束后進行復盤總結,逐漸沉淀累積自身能力,逐步搭建自身的方法論在驗證中成長。

          圖片

           

          · 項目復盤

          一個設計師想要成長,一定是在一個不斷回顧和思考及歸納分析中成長起來的,多去沉淀積累總結不好的經驗,輸出自己的一套方法論,查缺補漏提升自身的設計能力,避免低效率的重復工作。復盤是設計師自我提升的非常有效的方式。不僅為了自己,還可以提升自己對團隊的價值,多去做知識分享,鍛煉自己的表達力和控場能力。

          圖片

           

          04.總結

          不管 B 端還是 C 端,設計的價值在于通過視覺表現的方式去助力公司、助力產品實現用戶的需求、幫助用戶解決問題。B 端產品相對而言,場景、功能、業務流程、信息架構要比 C 端更復雜,面對的異常情況也比較多,所以 B 端在設計風格上盡量做到簡潔,B 端產品實用性大于美觀性,在每一個功能的設計都需要你去思考很多方面:用戶易用、信息層級、未來擴展,你都要做出取舍,而對于每個模塊都需要你思考、結合用戶場景。所以想要做好 B 端設計,一定要去了解業務,了解用戶需求。設計獨有的用戶體驗思維+業務理解能力,可推導出產品的可發力點,抓住并完善這些發力點,也從中體現了設計的價值。

          圖片

           

          原文地址: 58UXD(公眾號)

          作者:環鐵藝術家

          轉載請注明:學UI網》B端設計師如何挖掘自己的設計價值

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

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


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

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

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


          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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          日歷

          鏈接

          個人資料

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

          存檔

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