簡介

slick 是一個基于 jQuery 的響應觸摸式幻燈片插件，支持IE8+，Chrome, Firefox, and Safari，具有以下特點：

• 支持響應式
• 瀏覽器支持 CSS3 時，則使用 CSS3 過度/動畫
• 支持移動設備滑動
• 支持桌面瀏覽器鼠標拖動
• 支持循環
• 支持左右控制
• 支持動態添加、刪除、過濾
• 支持自動播放、圓點、箭頭、回調等等

兼容

瀏覽器兼容：兼容 IE7+ 及其他主流瀏覽器，若要兼容 IE7，需修改 CSS（slick.css）。

jQuery兼容：兼容 1.7 及以上版本。

使用方法

1、引入文件

  
    

        <link rel="stylesheet" href="style/slick.css">
    

    

        <script src="script/jquery.min.js"></script>
    

    

        <script src="script/slick.min.js"></script>
    

注意：需jQuery 1.7

2、HTML

  
    

        <div class="slick">
    

    

            <div><a ><img src="images/1.jpg" alt=""></a></div>
    

    

            <div><a ><img src="images/2.jpg" alt=""></a></div>
    

    

            <div><a ><img src="images/4.jpg" alt=""></a></div>
    

    

            <div><a ><img src="images/3.jpg" alt=""></a></div>
    
    <div><a ><img src="images/5.jpg" alt=""></a></div>
    

        </div>
    

3、JavaScript

  
    

        $(function(){
    

    

            $('.slick').slick({
    

    

                dots: true
    

    

        });
    

    

        });
    

參數

方法

演 示 下 載

GitHub：https://github.com/kenwheeler/slick

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

文章來源：csdn   作者：cc蒲公英

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

       隨著互聯網的發展，近這幾年設計圈子里大家都在討論UGD（User Growth Design），要向UGD轉型等等，以用戶為中心，以增長為導向，這個概念本身并沒有問題，而且是對UED的一種非常棒的進化和升級，要求設計團隊需要具備更綜合的專業能力與視野。本著對團隊的升級優化，我也以UGD的思路對團隊有了新的更高的要求，然而在這個過程中卻發現在很多問題。

       隨著各種社交平臺的傳播普及，什么閉環、串聯、顆粒度等等這些互聯網黑語，滿大街飛來飛去，設計師們的PPT、匯報資料是越來越豐富多彩，但項目效果卻并不明顯。數據、增長的概念確實是鋪開了，但卻成了PPT里的裝飾，并沒有真正落地生根。

       經過很長時間的摸索，我們終于有了一套適合團隊自己的UGD思路，也一步一步的在不斷的優化提升，下面以我們做過的一個項目（用戶投資路徑優化）為例來說說我們對UGD的思考，以及設計師對數據分析以及場景化設計的思路。

1. U user

       以用戶為中心，就是關注用戶的行為，串聯數據，從點線面結合場景分析，提出問題所在。

       作為設計師，最常關注的用戶數據就是轉化率、點擊率、停留時長、跳轉路徑等等，從單一數據來看，都是一些常見的簡單的數據，但要真正能夠分析用戶，還需要結合實際場景來分析。

案例：

       我們在分析交易線的數據時發現了一些問題，并對數據做了對比分析。

[ 項目列表頁 ] 

用戶的點擊主要集中在前十個投資項目，占據整個頁面點擊的80%。

[ 項目詳情頁 ] 

用戶通過列表頁進入到詳情頁，詳情頁的瀏覽率較高，但轉化卻很低，另外優惠券的點擊率十分高，超過85%，意味著進入到詳情頁的用戶，基本上都進入過優惠券頁面，而最終促成成交卻很低。

       以上是整個交易環節最初始的兩個頁面，也是最核心的頁面，從單個頁面的數據（點）來看都屬于正常漏斗數據表現，接下來我們從用戶路徑（線）的角度來繼續分析。

       我們從用戶當中，抽取了部分最終完成了交易的用戶，對整個交易路徑的進行分析，結果發現用戶在列表頁——詳情頁——優惠券這三個步驟之間反復切換。

       不難看出，用戶在列表頁、詳情頁、優惠券選擇頁來回切換，即使最終產生交易，但整個路徑耗時長，反復操作，跳轉不合理，導致大量流失，這是目前數據所呈現出來的情況，也是問題的核心所在。

2. G growth

       以增長為導向，以數據為依據發現或提出問題所在，確定最終需要增長（優化）的數據指標，并以此為目標展開思考，提出解決思路。

案例：

這是最典型的購物交易場景，通過上面的分析，我們再結合場景化的思路進一步整理思考用戶的操作行為目的。

以投資理財的角度，換位思考，其實就是：想投資——挑選——看看優惠——挑挑其他的——再看看優惠——再看看其他的——還看優惠。

       用戶為何反復的從列表頁進入詳情，又跳轉回列表頁再進入詳情頁？這就是突破口了，想清楚這一點，解決思路也就清晰了。

我們舉一個現實生活中的購物場景來幫助思考分析（靈感來源于生活）。

購物路徑1：想買東西-找到對應的貨架-使用優惠券并買單；

購物路徑2：有優惠券-到超市看看有沒有想買的-使用優惠券并買單；

       在現實生活中，除了”有想買的東西”這一主觀需求外，對交易產生一定決策作用的，就是優惠。

結合前面對投資用戶路徑的分析來看，用戶交易路徑如此反復，實際上就是在同樣的資金投入的前提下，對比不同的項目、不同的優惠，如何搭配才能利益最大化，這就是用戶的最核心需求。

       如何幫助用戶快速完成相關數據的對比，縮短操作路徑，降低交易耗時，從而減少流失提升成交率，這就是解決思路，也是我們需要增長（優化）的數據指標。

       基于場景化的分析明確用戶的核心需求，確定需要增長（優化）的數據指標，我們提出來了兩個解決方向。

[ A方案——詳情頁的快速切換（優化） ]

       ，在原有的路徑上，保持用戶的操作習慣，新增詳情頁左右滑動切換的功能，用戶學習成本低，開發成本低，可快速上線，但對于路徑優化、數據對比不夠直接，治標不治本；

[ B方案—— 設計新的快速路徑（創新）]

       結合前面分析的兩種現實生活中的購物場景，在原有的路徑上，針對平臺老客對平臺項目的規則詳情已經清楚了解的特點，設置多一條快速通道，減少干擾，對比直接，加快老客的決策速度，但用戶學習成本高，開發成本高，雖然治本但風險也大。

3. D design

       到此為止，我們就可以進入具體的解決方案的嘗試了，設計師的方案，自然就是設計稿了。

案例：

       A方案直接開發上線即可，上線后就可以收集數據進行分析了，經過兩周的時間，從數據表現來看，交易總時長稍有所下降但并不明顯，約下降了2%，而交易率基本持平。

[ B方案最終UI稿 ]

       在此期間B方案完成設計開發后，協調產品運營推廣等業務方，選擇確定部分渠道進行ABtest，經過一個多月，持續收集數據反饋優化方案，多輪ABtest后，從數據反饋來看，B方案數據提升明顯，有效的降低了用戶的決策時長（降低了近20%） ，提升交易成功率（老客轉化提升1%），說明方案的可行性強，隨即全量更新。

       從隨后的數據表現來看（總轉化提升0.3%，總時長降低15%），整體方案對平臺的整體效益產生了積極推動作用，說證明了設計團隊對于產品與企業的價值（我們不是美工）。

       在后續工作過程中，持續根據數據表現，分析，發現并提出問題，提出解決方案，測試驗證，不斷的循環重復，持續提升用戶體驗，以數據為依據，以增長（優化）為目標，這就是我們對于UGD的一些思考跟嘗試。

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

文章來源：站酷   作者：包大佬

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

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

很多設計師包括我在內對按鈕尺寸有著頗多困惑。為什么很多產品甚至蘋果本身并沒有遵循 44pt 的標準規范？為什么有些場景下的 CTA 按鈕那么小？按鈕的最佳尺寸到底是多少？按鈕規范背后到底是什么樣的科學依據？這些依據可否量化？

emmmm，如果你和我一樣有著這些困惑，本篇文章應該可以給你很多啟發。

按鈕尺寸對點擊行為的影響

按鈕的尺寸具體影響到的依舊是視覺和交互的兩種能力。

視覺能力上很好理解。當一個元素尺寸越大，人眼就越容易抓捕到這個元素。所以那些越重要的東西，往往會給予更大的尺寸來強制用戶注意到它，這也可以解釋為什么甲方總喜歡不停地在背后指指點點嫌棄元素太小，就是因為這些元素對他們來說非常重要，只是他們沒有我們那么專業，知道強調一個東西的手法不僅僅是放大一種策略。

因此，相對較大的按鈕尺寸從視覺上，可以迅速捕獲用戶的注意力，對點擊行為是有益的。

而在交互能力上，涉及到的依然是前篇提到的菲茨定律——目標尺寸越大，移動至目標所花費的時間就越短。所以，較大的按鈕尺寸可以降低用戶交互的交互成本，使得目標更加”易點“，對點擊行為同樣是有益的。

但是，按鈕尺寸并非越大越好，一方面是避免視覺上的失衡，另一方面也會受到界面空間限制、以及場景差異等因素的影響。

規范中的定義

我們先來看下 iOS 的。蘋果規定的最小點擊區域是 44pt，這意味著一旦點擊區域低于 44pt，將可能會出現點擊失準的情況。當然，一些控件（標簽欄圖標、文字鏈）可以在視覺表現上只有 24pt*24pt，但是會在周圍加入額外的填充使其達到 44pt。

但是，在實際的 iOS 原生產品界面中，很多按鈕并未嚴格執行 44pt 這個數值。小于 44pt 的按鈕比比皆是，比如信息頁的發送、App Store 的獲取、購買浮層的確認、添加 siri、導航類右上角的工具型按鈕，它們的點擊區域為按鈕本身，但是均未達到 44pt。況且其中有一些還是非常典型的 CTA 按鈕，比如 App Store 產品詳情頁中的獲取按鈕，它的高度僅僅是 27pt。

而 Android 中的按鈕建議尺寸是 56dp，但是和 iOS 一樣存在著大量低于這個尺寸的情況。其中不乏那些 CTA 按鈕。

這些情況的發生其實也很好理解，每個按鈕所對應的用戶場景、業務訴求不同，因此并不能一招鮮用一個尺寸吃遍所有場景。但是，有沒有一些科學的依據來可量化地解釋按鈕尺寸對點擊的影響？

從 Apple Music 說起

著名產品設計師斯科特·赫爾夫就曾在他的文章《Using science to make truly tappable user interfaces》中提過，iOS9 的 Apple Music 在鎖屏界面下的按鈕過小，經常會發生無法準確點擊的情況，他需要集中精力精確得點擊才能完成任務。

不過蘋果在 iOS10 之后，鎖屏界面下的三個按鈕、乃至進度、音量的控制球全部被顯著地增大。這使得歌曲點擊操作的錯誤率明顯下降，不論是在什么場景下（你懂得，跑步、擠地鐵這些不可控的場景下總是會有聽歌的需求）都可以輕松地點擊。

而他為了解釋按鈕尺寸所帶來的變化，引入了歷史上著名的兩個實驗。

第一次實驗

2006 年，芬蘭 Oulu 大學，Maryland 大學和 Parck 學院的研究人員組成一個研究小組。他們的研究目標是，確定在觸摸屏幕上單手使用最容易的按鈕尺寸。

他們進行了兩組不同場景的實驗。第一組讓受試者執行一次性的任務，點擊一個 CTA 按鈕、復選框或者多選框；第二組讓受試者執行多次連續的任務，比如輸入電話號碼。并且在實驗期間，研究人員測試了每一種場景下按鈕的尺寸。最終的實驗結果表明，單個任務下，按鈕尺寸小于 9.2mm 后錯誤率顯著增加，而多次連續任務下，按鈕尺寸小于 9.6mm 后的錯誤率顯著增加。

特別的是，對于多次連續任務，9.6mm 到 11.5mm 之間的錯誤率基本不變。

看到這，來稍微總結一下，9.2mm 和 9.6mm 是兩個關鍵的尺寸節點。在單次任務和多次連續任務下，按鈕尺寸分別小于 9.2mm 和 9.6mm 會導致錯誤率的攀升。這個結果和 MIT Touch Lab 研究得出的最佳熱區尺寸 10mm 很接近。

第二次實驗

當然，這還不算完。5 年后，德國兩所大學的研究人員又進行了一項類似的研究，目的是確定觸摸屏幕按鈕的最佳大小。

他們的實驗方法相對就很潮了。他們專門開發了一款安卓游戲，游戲玩法也很無腦：玩家必須要精準地點擊到屏幕中任何地方飄動的任意尺寸的圓圈，游戲才能繼續。并且速度越快，得分也就越高。

這款游戲在上線之后被下載了 10w 次，并且悄咪咪得暗中記錄了用戶所有的點擊行為，記錄總量約為 1.2 億次。

最后根據統計分析，得出了錯誤率和圓圈尺寸的圖表關系。你可以看到，和 5 年前的實驗同樣，呈現類似的指數關系。研究人員根據圖表發現：

在圓圈尺寸小于 12mm 后，錯誤率開始逐步提升。在尺寸小于 8mm 之后，錯誤率高達 40%以上。并且研究還發現，在圓圈尺寸超過 12mm 之后，玩家的正確率并沒有得到顯著的提升。

結論

由上述的兩個實驗，我們可以概括出一些有用的結論。

• 根據各自的實驗，在目標尺寸分別小于 9.2mm、9.6mm 或者 12mm 后，均會導致錯誤率的攀升；
• 當目標尺寸增加到一定程度之后，正確率基本保持不變。

那么，按鈕的最佳尺寸到底是多少呢？

斯科特將實驗得出的關鍵尺寸與蘋果、谷歌和微軟三大規范進行結合，發現了一些有意思的現象——

• iOS 的 44pt 對應到實際尺寸為 6.9mm，約 7mm；
• Android 的 56pt 對應到實際尺寸為 8.8mm，約 9mm；
• 而微軟的 9mm+兩邊 2mm 的熱區，對應的實際尺寸為 13mm。

可以看到 Android 和微軟的尺寸，基本對應到了這兩項實驗得出的關鍵尺寸。

最后，再來看下開頭 iTunes 的鎖屏界面的按鈕?？梢钥吹綇?iOS9 到 iOS10，蘋果將按鈕可點范圍由 7mm（44pt）擴大至 12mm（82pt），結果也正好符合了微軟的規范?？吹竭@里，你肯定更困惑了——按鈕的最佳尺寸到底是多少？

其實，并不存在什么按鈕的最佳尺寸。

不論是 iOS 的 44pt，Android 的 56dp，還是微軟的 82pt，都需要具體情況具體分析。界面布局、用戶場景、業務訴求等等，都屬于按鈕尺寸的影響因素。

比如下面這些 iOS 端產品的 CTA 按鈕，它們的尺寸最小到 26pt，最大到 87pt，而且每個產品內部的 CTA 按鈕也存在差異。你能說出這些按鈕哪一個是最佳尺寸嗎?

當然，我們起碼可以去界定一些相對可控的范圍。

這里我簡單根據斯科特文章中的結論，結合市面主流產品的情況劃分出按鈕的幾類尺寸：

1. 常規場景、局部模塊

比如 App Store 的產品詳情頁的獲取，知乎中個人主頁的關注，都屬于當前頁的局部模塊，點擊之后通常是狀態的變化或者出現新的彈層。這些按鈕的尺寸我建議控制在 28pt~40pt 之間。

2. 常規場景、全局模塊、強業務屬性

比如微信個人頁的添加好友、各大電商商品詳情頁的加購、登錄注冊頁的登錄注冊等等。這些頁面的 CTA 按鈕隸屬于頁面全局，所以可以給它極高的權重、甚至全局吸底展示（如詳情頁），以更快地促進點擊。通常，這類按鈕在常規場景下具備了最大尺寸。我個人的建議是保持在 40pt~60pt 之間。

3. 不可控場景

不可控場景的意思就是，用戶點擊按鈕時所處的場景可能比較特殊，并且這種特殊的場景很可能給用戶帶來一系列無法掌控的風險。

比如 keep 在跑步場景下的按鈕，就需要充分考慮到跑步時不穩定的狀態，如果按鈕和常規場景一樣，那很容易發生無法準確點擊的情況，增加意外事故發生的概率；包括來電場景、地圖導航場景、快遞取件場景等等，都屬于不可控的場景。各位可以自己代入腦補一下，這些場景中無法準確點擊時容易產生什么樣的后果。

所以這些場景中的按鈕就得夠大，以盡可能覆蓋到那些極端的不可控情況。我個人的建議保持在 60pt~90pt 之間。

當然，這僅僅是很粗略的參考區間值，如何結合現有業務訴求、用戶場景需求等因素去合理地界定才是重中之重。如果為了追求最佳效果或者尺寸的一致性，反而有些舍本逐末的意思。

其實從知乎去年 10 周年的大改版可以看到一些有意思的細節。很多按鈕的高度比以往更高了。比如鹽選會員的續費按鈕，由之前的 36pt 提升到了 40pt。

個人主頁的關注按鈕也由 28pt 提升到了 32pt，你仔細看的話，按鈕的寬度也發生了變化，從之前的 90pt 提升到了 100pt。

邀請回答界面中的寫回答按鈕，也由原本的文字鏈，提升到了實心按鈕，高度則直接復用了關注按鈕的尺寸——32pt。哦，不好意思，這應該是按鈕設計形式上的改變。

總之一句話，知乎這次的改版，CTA 按鈕的尺寸更大了。我們從尺寸對點擊行為的影響可以推導出，這次改版背后更為明確的業務目標——促進UGC內容生產、促進關系鏈沉淀（一旦沉淀了復雜的關系鏈，用戶也就更難以離開平臺）以及會員付費轉化。

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

文章來源：優設   作者：轉行人的設計筆記

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

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

例子一：

例子三、jQuery中選擇器參數使用變量應該注意的問題

這是原來的代碼

實現的是關鍵詞替換，不過到第三行時候不執行了，調試啊，替換啊，都不行。 從早上到剛才一直在各種群里面發問，終于 …… 俺們大本營 的Lomu大神一陣見血：

你的寫法不對

要連接符

$(“div.content:nth-child($content_index)”);

關鍵是外面有引號

有引號被當字符串處理了

說真的現在感覺，有些基礎的東西出錯，光靠自己調試根本找不出問題所在。比如剛才那個 + 號，我看書就沒見過。出現這種錯誤百度也不知道什么關鍵詞。真不知道  選擇器 里面用變量 還要用到+號，那個《鋒利的jQuery 》也沒有明確的說 選擇器 里面用變量 還要用到+號，包括我們的w3cschool。

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

文章來源：腳本之家   作者：junjie  

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

據說只要可能犯錯，就一定會有人犯錯，用戶犯錯的可能性比我們想象中要大得多得多得多得多。

做好防錯與容錯，可以讓用戶更順暢的達成自己的目標。

恩，用戶總是那么不可理喻對吧

都做得那么明顯了，還犯錯。該提醒的也提醒了...誒～

打住，打住，當用戶犯錯時，別急著怪他，我們需要先判斷清楚。

一、用戶真的錯了嗎？

用戶委屈的說：“來來來，我就想下載一個資源，大家都是講道理的設計師，來評評理，我錯在哪里？”

這，這... 每一步的確都好像沒問題，那，問題究竟在哪？

作為設計師的你是不是已經敏銳的察覺到了什么？

對，關鍵點在 ' 67bh ' 這里。都是空格惹的禍！

那好，你準備好方案救用戶了嗎？......（這里理論上應該停頓30s以上吧）。

當然，現在不會公布答案，方式有好多種。留著你看完文章中間部分再跟大家一起找方案吧。

這一部分的重點不是方案，而是思維。

很多時候，用戶并沒有錯，作為一個有擔當的設計師，我們可不能甩鍋。

有了這個前提，我們就可以去掉心中的那些煩躁和埋怨...開始愿意伸出援手，去拯救用戶了。

二、如何避免用戶“犯錯”

對，這個疑問就已經包含了解決方案了。

真的感嘆中文的博大精深，避 （防錯）、免 （容錯）。

為了讓大家能更好的理解什么是防錯和容錯，我特意舉一個例子哈～

（什么，防錯容錯你都懂？你怎么知道我講的跟你想的一樣呢，既然這么厲害趕緊做下面這道題。）

對，就是圖片里那個拿滑板的家伙，估計是第一次來這片海灘，有鯊魚都不知道，還使勁忘海里沖...

從避（防錯）的角度來看，你有什么方法幫他呢？（先不考慮哪種方法更好也不要考慮成本哈，能達到目的的都行。）

友情提示：防錯的目的是讓用戶在操作之前，盡量減少用戶出錯的可能性。

看看的你腦袋是不是真的轉得飛起...

我這邊有幾個想法，看看我們有沒有緣，想到一塊兒去了：

• 大聲告訴他，這位拿滑板的大哥，海里有鯊魚，別忘海里沖了...

• 警告這位大哥，嘿兄弟，這里只允許坐輪船和直升機去海島那邊。

• 在通往海島的路線全程搭起防鯊網。

恩，目前就想到這些了，還有方案的同學可以在評論區炸沙發哈。

這些方式，我們試著抽象一下：

• 【提前做好引導和提示】大聲告訴他，這位拿滑板的大哥，海里有鯊魚，別忘海里沖了...

• 【優先選擇減少輸入】警告這位大哥，嘿兄弟，這里只允許坐輪船和直升機去海島那邊。

• 【限制原操作范圍】在通往海島的路線全程搭起防鯊網。

大家應該都發現了，這種方式雖然能達到讓用戶安全的目的，但是用戶會有挫敗感，同時也會有被限制的感覺。

我只要說到USB插頭，大家應該就開始腦補畫面了吧“為什么我插的進去的第一次永遠是錯的方向，OMG!”

那，容錯呢？

還是這位拿著滑板的大哥，想要去海上的小島，從免（容錯）的角度來看，你有什么方法幫他呢？

友情提示：容錯的目的是在用戶操作之后，自動糾正/化解錯誤或提供挽回的方法。

我有幾個奇怪的方法，來跟大家分享一下：

• 呃...馴化/殺死鯊魚。

• 派一直專業驅鯊救援隊跟隨這位大哥（滑板大哥：我何德何能，太感動了）。

同樣，我們繼續抽象一下：

• 【讓原本的錯誤不影響用戶行為和結果】呃...馴化/殺死鯊魚。

• 【出現錯誤可挽回】派一直專業驅鯊救援隊跟隨這位大哥，出現鯊魚就殺魚。

  
  

誒，成本好像非常高哈，但是用戶感覺良好哦～

因為他甚至都感知不到這片海還有過危險，按自己喜歡的方式行動就行。

我提一提微信消息的撤銷功能，大家可能就會舒緩一口氣了。

不知道挽回了多少個尷尬的瞬間，是吧～

可是...我只是一個有無縛雞之力的設計師，我肝不過鯊魚怎么辦？

來來來，前面那個喊救命的大哥又來了，大家趕緊想想辦法吧～

三、試用一下以上方法

（第一步和第四步就是單純點擊，就先刪掉了）

前面講的方法也列在右側了，看看你們是不是可以針對每種方法找到對應方案了呢？

看看是不是可以這樣？

方案一：使用方法-提前做好引導和提示

方案二：使用方法-優先選擇減少輸入

方案三：使用方法-限制操作范圍

方案四：使用方法-出現錯誤可挽回

方案五：使用方法-讓錯誤不影響結果

在這個案例中，大家覺得那個方案更好呢？

好吧，這個問題的確很蠢。當然是 方案二 + 方案五 結合使用了。因為是兩個平臺的交互，而對于各自平臺而言，一個控制好輸出，一個控制好輸入。對平臺自身的容錯性有很大的幫助。

通過上面的案例，相信大家都已經熟練掌握好防錯和容錯的方法了。

什么，還沒掌握？那你滾回去，（望著你正在慢慢蜷縮的身體）不.........不是你滾，是你的鼠標往回滾!

那，我們先不管那幾個往回滾的同學，開始進行強化學習啦～

四、帶著思考學習

找了一些生活中經常用到的產品，讓大家感受一下防錯容錯的魅力。

如果你根本無法從圖中發現什么，那我只能說... 你還是需要經常用銀杏葉擦擦眼睛了（因為擦了之后你就更容易發現（人性）。

案例先到這里，大家一定以為要結束了吧～不，不，前面這些都不是最重要的。

方法總會越來越多，靠“別人”總結的方法也就能應個急。

來來來，放空～～～～拋棄你的職業相關認知、拋棄你的設計師的身份，你再看我們的設計。

你像孩子一樣，好奇又“無知”。

你會發現，為什么會有這么多奇怪的看不見的規則，為什么我這么難完成我的任務。

五、提前預知錯誤風險（重點）

如果當客戶遇到問題，你能用合適的方法去解決，那你已經是個不錯的設計師了，但離優秀還很遠，因為優秀的設計師必須具有敏銳的嗅覺，要在產品團隊的前面，感知并規避風險。

所以，更重要的還是，我們必須學會變身。

好了，這一次真的需要大家獨立思考了，并且沒有標準答案，大家可以交流交流。

在以下場景中，可能會出現什么“錯誤”，如何有效處理用戶“犯錯”？

在生活中，其實會有很多很多“讓用戶犯錯”的產品/場景，多參與其中，去發現問題，去思考解決方案，慢慢的，你就會具備非常好的問題發現能力和解決能力了。

說了這么多，可能有一部分同學會想說：

“用戶出錯的情況應該很少吧，你花這么長的篇幅”

“你一定低估了用戶的智商”

我告訴你，出來玩玩，誰帶智商做事啊～

不信你看。

六、那些你可能想象不到的用戶錯誤

百度一下，你會發現用戶犯錯的可能性大大超出你的預期。

只是，你以為與你“無關”而已。

七、防止用戶犯錯的設計可能比你想象中更難，更重要

要防止用戶犯錯，你需要不斷的模擬用戶的操作行為，去捕獲那些可能存在的問題，然后將它一一化解；這個過程很難，因為你要拋開自己以往的經驗和認知，去感受用戶的視角。

想想，用戶體驗的改進不就是讓產品越來越符合用戶認知，從而減少用戶“犯錯”嗎？

只是有些錯誤，我們只作為圍觀者，將它推向了用戶。

從現在起，將“錯誤”留給自己。

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

文章來源：站酷   作者：得勿

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

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

合理的移動導航設計能夠盡可能地減少摩擦，引導用戶去他們要去的地方。

這篇文章匯總了移動端導航設計最常見的樣式、要注意的設計準則以及優秀的案例分析，一起來系統性地掌握這些知識～

什么是移動端導航？

簡單來說，導航是用戶從 A 點到 B 點的方式，是他們發現設計點并與產品交互的過程。

可能很多用戶認為導航的目標是“在盡可能短的時間內讓用戶從 A 到 B”，但時間短只屬于操作結果，這個結果需要依靠合理且簡單的設計才能實現。

△ 一個頁面中可以存在多種導航。例如在油管首頁，有頂部導航欄、篩選器導航和底部導航，這些導航相互搭配為產品助力。

移動端導航常見的設計樣式

1. 漢堡菜單

圍繞漢堡菜單有很多爭論，但存在即合理，在合適的場景下漢堡菜單也能發揮大的作用。

來看一下漢堡菜單具備的優勢：

• 視覺空間：節省屏幕空間，包含有價值的信息；
• 心智模型：大多數用戶熟悉這種設計樣式并知道如何操作；
• 使用經驗：調節學習曲線，改善使用體驗。

△ 使用用戶熟悉的設計可以事半功倍。例如美團和餓了么兩個產品有著完全不同的主題色，但外賣點餐流程卻是一樣的，仍然是用戶熟悉的操作，并沒有因為產品的不同而改變點餐流程。

2. 底部導航

底部導航欄通常包含產品中最主要的導航鏈接，用戶只需要簡單的點擊就能直觀地在不同頁面間切換。

△ 幾乎每款產品都缺少不了底部導航欄，它方便用戶單手操作，不需要太費力就能快速訪問產品頁面，提高可用性。

3. 頂部導航

關于頂部導航，可以看之前分享的文章，里面詳細介紹了頂部導航的設計方法。

△ 頂部導航通常包含頁面中最重要的信息，與其他輔助導航結合使用。

4. 卡片式導航

卡片式是一種出色的設計樣式，支持改變各種形狀和大小，并且能展示文本、鏈接或照片等各種元素。

隨著網絡上的內容越來越碎片化和個性化，卡片是在頁面中聚合單個信息的好方式。

△ 為了改進體驗，卡片可以個性化顯示不同的內容。另外卡片很容易適應不同的屏幕尺寸，配合響應性設計。

5. 標簽

標簽往往是在一個大主題下同時支持多個選項，每個選項都轉到不同的界面。

△ 標簽通常用于在同一頁面中的幾個視圖之間切換，展示內容上的差異性。而頂部導航欄有主頁、搜索、收藏夾等多個圖標，代表不同的功能。

6. 基于手勢的導航

基于手勢的導航可以讓用戶在所需方向上快速滑動，來完成特定的操作。

這種樣式的優點在于，即使最沒有經驗的用戶也很容易掌握，因為手勢通常是直觀的。

△ 國外大火的約會產品Tinder以及國內的探探，都使用了基于手勢的導航樣式，為用戶帶來滑動的樂趣。

△ 基于手勢的導航并不是Tinder發明的，但這款產品無疑將這種流行帶給了大眾。經典的向左或向右滑動模式保持了事物的動態性、簡單性和娛樂性。

7. 全屏導航

全屏導航是指將大部分屏幕用于導航操作，能夠很好地將用戶的注意力聚焦到具體的產品細節上。這是一種以連貫的方式提供大量導航的方法，可以立即幫助用戶了解產品的功能。

△ 點擊圖片可以跳轉到全屏大圖導航中，能夠更清晰地查看商品的外觀狀態。

8. 3D touch

最初是由蘋果公司提供給用戶的，這是一種創建導航快捷方式的方法，可以顯示選定的 APP 的一些關鍵操作。

△ 蘋果為手機創造了一種全新的快捷方式，同時提供了強大的可用性。

△ 3D touch另一個用途是內容預覽，在處理內容選項時例如收件箱或文章列表時，這是給用戶提供預覽的好方法。

移動端導航設計準則

1. 導航需要直觀明顯

對所有類型的導航來說都是如此。在移動端中由于屏幕空間的縮小和交互成本的增加，導航體驗的好壞會對產品產生很大的影響。

△ 從可用性角度來看，直觀的導航對目標用戶來說至關重要。這意味著需要進行嚴格的測試和大量的研究，可以使用卡片分類或樹狀圖等方法來驗證導航的可用性。

2. 考慮手指的位置

這點對于移動應用來說至關重要，沒有用戶想反復點擊圖標卻沒有反應。

△ 鏈接和按鈕的尺寸需要足夠大，以便大多數用戶在第一次點擊時就能成功點擊。頁面中按鈕的尺寸最小通常保持在10mm。

3. 建立視覺層級避免混亂

小屏幕意味著更容易陷入混亂。即使頁面中有少量的元素，如果元素沒有平衡，用戶仍然會有混亂的感覺。

△ 極簡主義是UI設計的一種特定風格，通過必備的頂部導航欄、留白以及由大小、版式、顏色劃分的視覺層級來規劃頁面內容。

移動端導航示例分析

1. Facebook

Facebook 的導航構成比較復雜，融合了多種不同樣式的導航。

△ Facebook主頁包括漢堡菜單、頂部導航欄和底部導航欄。通過這種方式，這家社交媒體巨頭明確的將主要內容與次要內容分隔開。

2. Spotify

Spotif 作為音樂流媒體業務的巨頭，即使對于新用戶來說，頁面的設計也容易理解和探索。

△ 以高度視覺化的形式突出每張卡片背后的關鍵內容，另外底部導航也可以完成繁重的任務指引。

3. App Store

App Store 是使用標簽進行導航的好例證，每個標簽代表了同一內容的不同方面。

△ 在排行榜中，用戶可以瀏覽付費、免費和熱門的標簽頁，從而快速建立一致性和對其他頁面的感知。

4. Telegram

Telegram 可以供任何人使用，漢堡菜單提供了用戶可能需要的所有關鍵導航選項。

△ 每個用戶都能立即找出漢堡菜單，非常容易使用和理解，而且幾乎不占用界面中的寶貴空間。

5. Yelp

yelp 在創建全屏導航體驗時采用了一種稍微不同的方法。

△ Yelp將屏幕劃分為兩個不同的區域，實際上并沒有將整個屏幕專門用于導航選項，而是將頂部用于導航選項，并在底部留下更多的負空間。

6. Trello

頁面中的卡片是拉長的矩形，整齊有序地填滿屏幕空間而不會讓用戶不知所措。

△ 卡片系統很好地代表了Trello簡化復雜工作流程的能力，為用戶帶來整潔和方便。

7. Twitter

同樣使用了多種導航混合的設計樣式。

△ Twitter將導航重點放在底部欄上，涵蓋了整個平臺中四個主要的方面。

最后

沒有高速公路，我們很難便利地在城市間穿梭。同理，如果沒有導航，一款 APP 的使用也會遇到很多麻煩。導航就像高速，不斷在為用戶提供必要的指引！

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

文章來源：站酷   作者：Clip設計夾

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

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