用戶越接近里程碑（例如完成任務、達到目標等），他們就越快地朝著目標努力
心理學家曾經做過個有趣的實驗，把老鼠放入迷宮里面，出口放置老鼠愛吃的甜點，結果發現，越是接近目標老鼠跑的越快，人類也有這樣的現象，還記得我們上大學時都會測跑步時長，每當剩最后幾百米時同學們都會瘋狂沖刺，這就是所謂的目標梯度效應，越接近目標動機就越強，反之如果讓人感覺距離目標很遙遠，就很難有動力。
在互聯網產品中拼多多就把目標梯度效應應用的非常成功，如果我們在拼多多上購買商品時到結算完成后會彈出一個分享領現金的彈窗，而這個彈窗上的內容展示是通過進度條的模式告訴用戶你還差百分之幾就能夠領現金，當用戶看到這種情況時大部分會選擇分享，努力的完成最后百分之幾，相信大家都收到過父母好友等分享的砍一刀鏈接，在這個過程中拼多多就通過了物質的刺激，運用目標梯度效應刺激用戶產生分享行為，從而達到裂變的目的。
下圖中的飛書官網，banner處就使用了梯度效應，告訴用戶還需要多久到達目標，不需要用戶在進行滾動或者點擊，對廣告來講用戶在得知目標的時候會耐心等待，從而避免用戶直接跳過
當然也會出現弊端，當頻繁去利用用戶的目標梯度效應時，并不能幫助用戶達到目標，久而久之就會對產品失去信任，會損失用戶的忠誠度。
它指出計算機與用戶的互動速度都不需要雙方等待時，效率就會提升。
1979年IBM的，Walter Doherty提出系統響應時間每減少一秒，用戶進行下一次的操作思考就會降低，這種現象與個人注意力的持續時間線相關，在1979年之前計算機的處理性還處于相對較慢的階段平均高響應時長為2s，因此在1979年之前用戶普遍認為2s的時間是最有效的時間，而1979年后計算機性能方面迎來提高，系統響應時間降到2s一下。
在1979年IBM公司的Doherty和他的團隊通過3年的時間在1982年就《系統響應時間對經濟價值影響》的課題進行研究，研究的主體主要以用戶操作系后，響應時間作為變量，對多維度產生結果的影響。
結果發現，計算機處理請求所用的時間與用戶的響應時間高度相關，即計算機響應時間越短，用戶的思考時間就越短，而其中一組研究數據就顯示一現象，一旦系統響應時間超過400ms左右時各項指標數據會產生較大的波動，于是IBM公司就此提出研究結果系統響應時間低于400ms效率就會提升。
在產品設計中多爾蒂閾值如何運用，我們要明白400ms是個范圍值并不是一定要卡在400ms，而是在響應時間低于400ms范圍，我們可以理解為是一個上限，那么有上限就有下限，響應時間并不是越快越好。
IBM在系統響應時間規范中強調了‘過渡時間’概念，雖然越快越好，但是用戶在使用產品中需要理解結果和過程，這里可以理解為有效延遲，像我們在做UI中涉及的一些彈窗反饋這類通知形的元素，在做交互時間時對于用戶越快越好，像一些輪播banner需要用戶手動滑動的時候同樣是響應越快越好，如果延遲超過400ms用戶就會感知到明顯的卡頓不流程。
而《過渡延遲》則需要在一些具有明顯目標的場景進行使用，如我們做UI的過程中涉及到的TAB切換，這里則需要刻意的延長時間，目的是幫助用戶感受到頁面之間的變化，反而會感知上會更加流暢，對于用戶而言有助于用戶思考：我點了什么、結果是什么。
小場景內：過渡時間100ms左右
中型場景：過渡時間250ms左右
大型場景：過渡時間350ms左右
系統響應時間的目的是進行關鍵指引，因此并不是越快越好，多爾蒂閾值是一個范圍值，而在這個范圍內如何利用則需要根據具體的場景、產品目標、用戶目標等多維度思考
戶的大部分時間都在瀏覽其他網站或app，因此用戶希望你所設計的網站或app能夠像他們已知的網站或app一樣運作。
雅各布定律是一個描述用戶學習的定律，降低用戶學習成本要求盡可能依據用戶既有經驗進行任務和流程設計。
例如在UI設計中我們強調一致性，從大的頁面、組件到小的一個按鈕元素，我們都要做的樣式和交互的統一，這里除了說要保持一致性才去規范頁面組件，還有一個就是因為我們要遵循雅各布定律，相似的內容、相似的操作方式能夠讓用戶體驗你的產品時更快的適應設計模式。
這里舉個我工作中的例子，在去年的時候我幫助團隊另一位設計做一個?？蛍eb端的產品改版，由于產品的業務錯綜復雜，一個網頁端承載了招聘、學習、社交、工具等多項業務。而整個產品的設計風格還還存在16年之前，這次做跨時代的改版對于當時的我們而言也是比較棘手的，因為市場上并沒有像我們的產品這么業務復雜，每一個業務板塊單獨來拆解都是一個大的方向，并且競品也是很多，用戶群體來講分層也是比較嚴重，像使用招聘業務的用戶并不會去社交或者學習刷題。
因此我們當時就想到雅各布定律讓用戶決定產品的風格，本著這個思路我們去進行用戶問卷調研，通過對用戶日常使用什么網站的頻率次數進行調研，通過對用戶日常使用的網站進行統計，找出數量最高的前三位，以此再針對性的調研設計風格和形式，最終確定我們自己的產品風格，這個方法也是當時我們為了避免不同業務的用戶群體對新風格的接受程度，最后用戶的反饋也是符合我們的預期。
雅各布定律告訴我們在進行設計時，要延續用戶已經習慣的認知，其次從產品自身業務出發進行細化，像一些同類型的產品，他們無論從功能還是設計上都大同小異，因為對于用戶來講，用戶對這個行業的產品已經具備一定的認知，例如做電商的產品去用戶做金融產品的思路來進行設計產品，那對于用戶無疑就是增加認知成本。
像下圖中的醫療軟件，從功能和板式上首屏都高度相似，三個核心功能icon，緊接著是各個科室的入口，然后就是一些內容推薦，而右邊的音樂產品又是另一種結構風格，試想一下如果我們目的是在去找醫院，結果看到了音樂類產品的布局結構，這就打破了認知，雖然有創新但是在用戶認知成本上就會非常大。
最后總結一下，用戶會把使用其他產品的習慣轉移到另一款相似的產品，我們做設計時金盡可能的避免非必要的創新，這樣會讓用戶更快的適應產品。
霍桑效應是一種理論，它描述了一種反應性，在這種反應性中，個體根據被觀察的意識來修改他們行為的一個方面，所以又被稱為被“被試效應”。
霍桑是20世紀20年代位于美國芝加哥的一家電工廠，雖然設備先進、福利優越，但是工人們還是不滿意，生產效率低下，為了研究這一現象，美國科學院專門進行了工作條件、設計會因素和生產效益關系等系列研究，最后發現是實驗中效應，稱為霍桑效應。
你是否有過這樣的經歷你們公司的大boss或者是某位重量級領導人物總是會時不時得“經過”你們辦公室，搞得所有人都迅速進入戰備狀態，當有人要造訪你家時，你是否會確保房間處于干凈、整潔狀態，并且會確保孩子們在客人來訪過程中都展示出最佳狀態，這些行為都是霍桑效應。
在產品設計時利用霍桑效應就能夠激起用戶的效率和產品數據，比如產品簽到流程，在用戶進行累計簽到時給予特殊獎勵，在連續簽到過程中給出鼓勵的話術，根據霍桑效應給予人們足夠的尊重或者讓人們感受參與其中會提升明顯的效率，在簽到過程中給予鼓勵能夠讓用戶感受到尊重，讓產品更加人性化。
霍桑效應中講到從旁人的角度，善意的謊言和夸獎真的可以造就一個，那么在產品設計的維度來思考這句話，我們在設計中是不是可以去不定時的夸獎用戶呢，比如下面中keep在新用戶進行一項運動結束后，會彈出稱成就勛章給予支持鼓勵，提升用戶自信心和參與感
當用戶由于先前投入的資源（時間、精力、金錢等）而繼續做某事時，他們會體驗到沉沒成本效應。
沉沒成本，是指已經付出且不可收回的成本，在日常生活中，沉沒成本可以是已經花費的金錢、等待的時間甚至是付出的感情等。
比如我們去電影院看電影，過程中發現電影內容過于無聊、枯燥，大多數還是堅持看完，他們內心的想法是錢都花了怎么也要看完，在比如用戶購買88元課程，贈送各種輔助服務導師指導、問題答疑、課后作業等服務，對于企業來講這些贈送的服務就是對沖用戶購買88元課程的沉沒成本，既利于銷售又增加企業的信任感。
而在產品設計中，不同的用戶在不同的場景中也都會遇到沉沒成本的抉擇，幫助用戶減少甚至隱去抉擇、降低厭惡心理在一定程度上不僅提高用戶體驗，甚至能提升產品數據。
人們總是會對已知的損失耿耿于懷而造成判斷的偏差，這來自于每一個“非理性人”本能性的恐懼，每個人損失厭惡，相對于收益所得往往更在意損失。試想當我們無意中獲得一筆百元的收益時，我們因此興奮的時間可能也僅限于當天甚至更短；而若自己不小心掉落一百元或因為決策失誤損失一百元費用時，則將會捶胸頓足好長時間。
在產品設計中運用較多的是電商產品，例如京東的購物車中除了展示商品信息和價格外還會把贈品鋪列出來，如果是多件商品，還會幫助用戶計算好預計可節省多少錢，這些贈品和節省的錢都是沉沒成本，用來刺激用戶進行下單消費，提高平臺的活躍度。
除此之外社交產品中也可以在情感方面減少用戶的損失厭惡感，例如在一些直播產品中當用戶進入直播間在聊天區域會通知主播，而同一時間用戶退出直播間則不會提示，這個過程主播的感知幾乎為零，不通過仔細對比很難發現，這樣的手段對于產品而言能讓主播在直播的過程中增加積極性，避免情緒上低落的表現，同時也能夠幫助產品提升信任度。
上面說的是正向的沉沒成本，而反向成本效應也可以幫助產品帶來信任感，增加用戶記憶提升用戶增長，如下圖中的京東的商品頁面，用戶下單后并不直接扣款，當7天過后用戶沒用進行售后退貨等行為，平臺將自動扣除，
在這7天內用戶可以進行隨意退款。
其實很簡單，心理學目的是了解用戶真實的想法，希望設計師在注重頁面美感的同時也要注重用戶的使用，做產品設計最終目的是為了給公司帶來價值，給公司帶來價值的前提是要給用戶帶來價值，這就需要我們去了解心理學當然不需要精通，每個心理學如果要去吃透他，需要耗費非常大的精力，對于設計帶來的幫助不成正比，所以只需要了解各個心理學法則在產品中如何應用就OK了。
本次繼續分享10個心理學的知識，將從心理學的背景定義、重點解析、設計運用、詳細案例4個維度進行深度解析
簡述定義：保證用戶在使用流程中的高峰處和結尾處保持較高的愉悅體驗
簡述定義：用戶對未完成的事情、被中斷的事情記憶更加深刻
簡述定義：基礎的信息組織原則，主要提升用戶獲取信息的效率
簡述定義：用戶會更加珍惜已經獲得的服務、物品等
用戶同時思考兩件事情以上時，思考效率和準確性會下降，做事情難以專注。
用戶在使用一個產品流程時的高峰體驗和結尾體驗。
用峰終法則提升用戶在整個產品上或某個功能上的體驗，需要先對用戶在整個產品上或某個功能上的使用行為與想法進行分析，并繪制出用戶的情緒曲線，根據情緒的峰值節點和使用流程的結尾，這兩個“關鍵時刻”，進行體驗上的重點打造。
2002年的諾貝爾經濟學獎得主、美國心理學家丹尼爾?卡尼曼經過深入研究，發現人們對體驗的記憶由兩個因素決定，即高峰（無論是正向的還是負向 的）時與結束時的感覺，這就是“峰終定律”。關于峰終定律有這樣一個實驗：讓兩組人員聽相同時間的強噪音，然后一組停下來，另一組接著再聽一段時間的弱噪音，就實際遭遇來講，后一組比前一組受了更多的折磨，但是聽到更長時間噪音的后一組的痛苦指數卻要比前一組低很多，原因就是對于兩組人員來講，結束時刻的噪音給他們留下的感受最為深刻，因而他們的痛苦指數主要是由噪音結束時的刺激程度所決定的。在另 外一種情況下，令兩組人員聽相同時間的噪音，其中一組的噪音強度較高，另 外一組的噪音強度較低，但是其中某一時刻聽到了極其刺耳的超強度的噪音， 結果就是，后一組的痛苦指數要高于前一組，盡管就總體而言，后一組所聽到 的噪音強度要低許多。
這體現的就是感受過程中的“高峰”一刻的決定作用。依照峰終定律，高峰和結束時的體驗主宰了人們這段感受的性質和強弱的 程度，而跟感受的總的比重以及體驗時間的長短無關。也就是說，如果在一段 體驗的高峰和結尾，體驗是愉悅的，那么對整個體驗的感受就是愉悅的，即使 這次體驗更多的是痛苦或不愉快的感受。
用戶根據體驗的高峰和結束來判斷產品體驗是否好壞，并不是根據用戶使用產品的每一個節點感受的平均值來判定，我們可以理解為結果比過程重要。
就像我們看電影時，一個電影2小時前1小時都枯燥無味，突然中間有5分鐘讓你的情緒上升，此時你可能覺得這個電影還行，至少讓你達到了情緒高潮，當你繼續觀看時電影片段又變得枯燥無味，突然最后10分鐘和結束時出現了電影彩蛋，并且這10分鐘的內容特別符合你的胃口，這時候你就會出現一種“嗯，這個電影不錯，結局挺好”這樣的心理暗示，此時會發現接近100多分鐘的枯燥內容都被你忽略掉了，或者你也記得但是你默認了電影90%的枯燥。
一些app里在用戶購買成功后，將已購商品以一種具有儀式感的收藏卡形式展示給用戶，給用戶驚喜的體驗，在盲盒星球內購買盲盒成功后會彈出卡片，把用戶獲得感拉滿，在網易云音樂直播間內如果是新手用戶就會彈出新人見面禮，通過視覺的表現形式把氛圍拉拉滿，當然還有一種反向峰值，當有一些產品進行抽獎時，如果用戶未中獎會彈出情感化彈窗，對用戶進行安慰降低用戶的挫敗感。
上面講的偏向于業務彈窗，還有一種是功能性彈窗， 當用戶使用某個產品流程時，這個流程可能通過多個維度才能到達最終的節點，在最后用戶完成操作時通過情感化彈窗進行提示，又或者在版本升級時需要引導用戶進行更新，使用情感化的表現，能夠將產品與用戶產生情緒共鳴，增加趣味性，提升體驗。
當用戶使用產品去完成目標時，突然中間步驟出現網絡波動、網絡斷開等不可抗拒的因素，此時在頁面中添加一些情感化設計，會緩解用戶焦慮情緒，甚至可以在空狀態中添加動效來提升趣味性。
近期在工作中做了一個直播項目，其中的一個功能就涉及到直播抽獎，因為產品獎品比例較多且輪數也多，用戶的中獎幾率也比較高，所以導致用戶在中獎后基本就退出直播間，因此在做設計的過程中為了避免這個問題，我在中間彈窗上做了優化。
通過情感的中獎彈窗形式來強化用戶的感知度，在直播過程中提升興奮感，提升用戶觀看的直播的欲望。
在講一個案例，去年我們做一個刷題功能的體驗優化，用戶在刷題場景下會面對幾十道甚至上百道題目，整個過程非常漫長，并且舊版的功能交互上并沒有展示總共還有多少題的這個提示，用戶在刷題過程中會非常焦慮，為了解決這個問題，通過這三個手段改進，1）我在刷題過程中以進度條的形式去實時告知用戶刷題進度，減少用戶焦慮，2）用戶在最后幾題的場景中會添加鼓勵話語，強化用戶峰值，3）在結果頁面為用戶展示直觀的數據變化，強化用戶的滿足感，同時激勵用戶進行持續性刷題。
用戶只記得使用過程中體驗高的場景和結束時的場景。
無論是在交互還是視覺上我們都可以利用峰終定律幫助用戶達到好的使用體驗。
蔡格尼克記憶效應（Zeigarnik effect；又稱蔡加尼克效應、“契可尼效應”） 是一種記憶效應，指用戶在完成一件事的過程中被打斷，他會持續關注這件事，記憶更加深刻。
簡單理解就是用戶對沒有完成的事更關注。
該效應由蘇聯心理學家蔡加尼克在20世紀20年代提出，有一次她在酒館用餐，遇到了一位記憶力過人的服務生，她不用筆記就能記住所有客人下單的菜肴，奇怪的是當菜肴上齊之后，蔡加尼克再次詢問服務生，她竟然完全不記得菜單了，這就是由于她的工作完成之后，緊張狀態消失，記憶水平隨之下降了。
我們生活中也會遇到相似的場景，考試我們都經歷過，在過程中某一道題沒答上來，在答后后面的時候腦子里一直會想那道未填的題，而前面填過那么多題，我們卻不容易記住。
看綜藝大家經常都知道，看到關鍵節點的時刻總會有廣告插入，但是我們又舍不得換臺生怕廣告結束，錯過了什么關鍵內容，廣告商其實就是摸透觀眾心理，讓你又愛又恨的看廣告。
生活中還有很多場景，像晚上刷抖音一直想著刷兩條就趕緊睡覺，一抬頭發現凌晨了...打游戲贏一把就不玩了，但當到了贏一把時一看時間過了好幾個小時...小時候買方便面集里面的卡片....
為什么我們會對未完成的工作事項記憶深刻？
假如我們把事項分為三類：1）我們允許其正常完成，2）我們再完成的過程中打斷，過一段時間在接著進行，3）在完成的過程中打斷，并且不允許完成。
稍加思考其實會發現，正常完成任務后是沒有任何心理負擔，完成事項的過程中被打斷，這時候人的心理的會時刻記憶這件未完成的事項，就像我現在寫這篇文章，如果某個段落我沒寫完去做一些其他事情，我就會時刻想著我文章的小段還沒有完成，那么假如我在寫文章的過程中，被打斷并且不允許我寫后續的文章，我的注意力可能就會完全在寫文章這件事，我要去想怎么才能繼續寫，或者怎么才能讓我繼續寫，這恰恰驗證了人們對于未完成且無法繼續的事項心理負擔是最重的。
在一些教育產品或者簽到產品中都會有一些進度型的提示，像下面“開言英語”的課程報名頁面，在側面添加了進度條，時刻告知用戶當前進度，并且在進度末端提示未到達節點，對用戶進行心理暗示，引導完成未來事項。
在新用戶注冊頁面時很多產品會收集用戶基本信息，通常會使用分段形式把信息分開，減輕用戶心理負擔，并且在完成任務時會給用戶明確當前進度，同樣在一些其他場景例如認證信息場景中，哪怕用戶中途因為其他時間被打斷，回來后也能夠很快的定位到未完成事項。
很多日歷產品中會添加代辦事項的功能，這個功能就很好的利用了《蔡加尼克效應》有些用戶會通過在日歷下面添加每天的計劃以此來督促自己完成，如果某一天的事項發現沒有完成就會有很重心理負擔，哪怕到了第二天也會回過頭來把錯過的事項給完成，像我經常就會使用《滴答清單》來督促自己完成什么事情，如果有哪一天的事項沒有在清單上打上勾，我可能好幾天都在關注這件事。
前幾個月的時候我在公司做了一個新用戶注冊登錄的流程，在過程中我主要是負責UI和UX的工作，在這個過程中就使用到了蔡加尼克效應，當時接到的需求是公司戰略目標擴張，需要在移動端更針對性的收集新用戶信息以此進行內容推薦，提升用戶留存。
在得知業務目標是提升用戶留存時，我就思考設計的發力點，通過倒推的方式去一步一步拆解，在這個需求場景內，用戶留存取決于內容推薦是否準確，內容推薦準確度取決收集的用戶信息是否準確和用戶信息填寫率，用戶填寫的準度度需要產品側通過內容的方式進行發力，而如何讓用戶信息填寫率增長則是設計目標。
設計目標已經很明確了，那么如果去優化呢，當時我是先把舊版的問題給拆解出來。
1、交互上舊版把用戶信息都堆積在一個頁面上，并且對于業務目標上很多信息是無效的并且還在視覺核心位置，如用戶頭像、用戶昵稱等這些信息對于內容推薦沒有任何作用。
2、視覺上沒有核心聚焦區域，用戶進來后會措手不及不知道從哪開始下手填寫，并且按鈕的樣式也不夠直觀對用戶造成不可點擊的假象。
首先從交互上開始優化，因為會新增很多信息填寫內容，所以為了避免用戶在同一個頁面看到很多的表單，把交互流程拆解，按照業務維度把表單拆分成多個頁面，在每個流程內給用戶傳達出這個填寫是個簡單的事情，從而避免用戶從第一步就抗拒。
這里面還涉及到【沉沒成本效應】當用戶在填寫第三步四步的時候會因為前面已經填寫了那么多信息花費了時間并不想放棄，沉沒成本前面幾篇文章講過設計心理學-5種用戶體驗法則，這里不詳細講了，其次就是【蔡加尼克效應】用戶在每個頁面看到當前進度的時候就會產生必須完成的暗示，然后這個心理暗示就會持續推動用戶完成剩下的內容填寫。
后期我們針對舊版和新版的優化做了可用性測試，結果上也非常正向，新版的步驟雖然被拉長了，但是每一個步驟都比較簡單用戶填寫起來沒有門檻，所以填寫效率上大于舊版，詳細過程之前有復盤過一篇文章感興趣的可以了解一下注冊登錄可用性流程最后用戶的信息填寫率也是非常有效的提升。
上線之后數據也是正向增長，當然不止這一個場景才能用到蔡加尼克效應，比如像一些用戶成本要求比較高的健身打卡、學習打卡等任務可以使用一些階段獎勵來激勵用戶持續完成。
五架帽理論簡稱為LATCH原則，它定義了在好的組織性信息才能提升用戶體驗，使設計更易于理解、靈活和可維護。
LATCH的概念最初由Richard Saul Wurman在他的設計原則和設計模式中提到，后來在他的《信息架構》的書中重新定義了五架帽概念。
LATCH即是Location位置，Alphabet字母，Time時間，Category類別和Hierarchy視覺層級組成，這五種方式目標都是通過高效的信息呈現來提升用戶體驗。
理論上講的是通過位置來組織信息，其實比較好理解，我們可以理解為你本人所在位置是一個坐標點，所有的信息形成都是圍繞你的坐標點來組成的。
例如地圖軟件中你的當前位置不斷變換，手機屏幕中不斷加載出新的地標建筑，在一些游戲場景，例如絕地求生，隨著你的位置變換，不同的建筑環境、人、道具等都會隨著在你周圍出現，當一些信息組成對用戶非常重視時則會優先出現，比如駕駛過程中當前位置不變，地圖會優先加載道路信息，其次是建筑信息（網絡波動的時候比較明顯）。
并且隨著VR/元宇宙等技術，基于位置變換組織信息已經是非常重要的一環。
總結：通過位置結合時間能夠給用戶展示高效率的信息
與字面意思一樣，按字母順序排列信息，當數據量很大時，它是組織信息的最佳方法之一，在產品應用中常見的就是像通訊錄、目錄等能夠快速的定位到信息，通過這種方式延伸出其他場景的排序方式，例如電商產品中的側邊分類，就是利用英文字母的邏輯把商品類別進行分類，在一種就是按照時間的維度進行信息分類。
當信息具有相同性需要排序的時候，使用分類的方式能夠最快的提升用戶篩選效率，在我們生活我們每個人都有分類的習慣，如電腦桌上會放置一些小物件或電子設備相關的，衣柜里統一都放衣服每一層放不同季節的衣服，每當我們想使用到某件物品時第一時間就能定位到它的位置。
在產品中使用最多的是分類和導航，例如同樣的鞋子可以用品牌分類，也可以按照季節分類或者性別分類......音樂可以用流行、搖滾、民謠等等分類......
類別是該理論中比較關鍵的一環，它定義事物按照分類的方式能夠讓用戶快速的查找信息組織。
上面位置、字母、類別都是提高信息查找效率，視覺層級與字面意思相同，當我們滿足基本的查找效率后可以使用不同的視覺層級來凸顯重要性。
例如在產品設計中可以從顏色、大小等方式來滿足我們想要的層級梯度，讓產品/用戶的核心價值快速的讓用戶察覺到。
上面只是對每條規則單獨拆出來解析，實際中它們是可以共存的，如位置結合時間能夠讓用戶第一時間看到重要信息，類別結合字母就出現了我們看到的通訊錄，類別結合視覺層級能夠讓分類更加重要等。
五架帽理論最終目的都是為了提升用戶使用產品時的信息效率，它的五條設計規則也是在產品設計中的必須要遵守的，為什么說要遵守，因為設計中我們可以仔細回想下，基本上每一個頁面的誕生都與這五條規則相關，一但違背，這個頁面的可用性或者美觀就會有所缺失。
當一個物品用戶沒有擁有時，對他的價值感相對較低，當用戶擁有時會高估和珍惜物品的價值。
心理學家 Daniel Kahneman、Jack Knetsch 和 Richard Thaler 對稟賦效應進行了實驗，并在他們 1990 年的論文“稟賦效應和粗略定理的實驗檢驗”中展示了這一概念，這一現象可以用行為金融學中的“損失厭惡”理論來解釋，該理論認為一定量的損失給人們帶來的效用降低要多過相同的收益給人們帶來的效用增加。因此人們在決策過程中對利害的權衡是不均衡的，對“避害”的考慮遠大于對“趨利”的考慮。出于對損失的畏懼，人們在出賣商品時往往索要過高的價格。
比如我們過生日收到的禮物，在沒有得到這件禮物之前，我們對他的價值或者吸引力往往沒那么高，但是當這件禮物通過生日的形式送給你的時候，他就具有一定的意義并且這件禮物是屬于你的，假如此時有人花市場價購買你的禮物，內心更多的想法是不舍得賣，因為這件禮物已經屬于你了。
講個自己真實的故事，我自己是對一些財富手串、事業手串等等相關的東西不感興趣的，哪怕他很便宜我也不會去買，但是有一天女朋友從雍和宮幫我求來一個財富手串并且還是開過光的，以后我就每天帶著這個手串形影不離，有一次放在某個地方找不到了，當時我就很焦慮，感覺自己損失了很大一筆錢，這個其實就是稟賦效應作祟，因為這件東西通過很特別的方式才到我手里，我已經認定這就是我的東西了，所以他對我的價值是極其高，哪怕我之前對這種手串不感興趣。
最常見的產品設計場景中就是分享的場景，例如我們常見的一些分享都是底部彈出一些第三方鏈接方式，那么想一下這樣的方式分享率極低，我們可以利用稟賦效應去強化產品的價值感，在學習產品中把學習數據融入分享頁面中提升讓用戶感受到學習的價值增加分享欲望，在旅游產品中一般都會記錄用戶的旅游足跡，此時把用戶經過的城市以地圖的形式融入在分享頁面中，激發用戶的旅游價值，稟賦效應在分享產品中不止這些玩法，商品收貨時、貴重物品分享時等等。
誘導即是向用戶贈送免費的東西，通過這種方式提供免費試用服務或者是一些優惠禮包等，當得到免費服務或者優惠時由于稟賦效應用戶可能會去進行付費或者深度使用，讓用戶感受到這是它自己的東西，對產品的價值感加倍。（但是我感覺這種方式效果提升不是很明顯，但是確實可以利用這種心理去嘗試可能會有意外收獲。）
誘發稟賦效應的另一個重要因素是用戶的主人翁意識，在一些產品中會有一些個性化的設置，用戶可以根據自己的喜好去進行設置，這樣可以讓用戶與產品產生價值聯動，比如谷歌瀏覽器的背景和同步功能就是我一直使用的原因，雖然其他瀏覽器也有同樣的功能，但是在互聯網初期谷歌可是用這個功能吸引了不少用戶，在比如app中常見的換膚、換色等功能。
有正向的也就有反向的，反向指的就是厭惡效應，人們對自己所擁有的東西更加珍視，所以對于損失所表現出來的厭惡要比獲取收益表現出的愉悅強烈得多，我們往往會對所損失的東西更為敏感，有心理學家實驗過，股票下跌的損失要用雙倍的漲幅才能挽回心理痛苦，在產品中常見的就是會員試用服務，當我們給用戶7天或者30天的試用期后，時間一到大部分用戶都會選擇付費，因為他們默認這些服務已經擁有不愿損失。
情緒和社會會影響一個人的決策，因此根據行為經濟學，當我們了解這些因素時，我們可以構建設計來幫助用戶做出可能的最佳決策，產品設計師可以通過使用價值賦能、個性化、免費試用等簡單方法，利用這種效果來提高產品的留存率和滲透率。
指的是用戶同時思考兩件事情以上時，思考效率和準確性會下降，做事情難以專注。
我們日常工作的時候，如果好幾件待辦事情同時需要處理，我們自己也是很難去說專注某一件事完成，做設計師的都知道，在設計時如果被別人打擾很容易打斷設計思路，我們應該都經歷過好不容易沉浸下來去做某個需求，忽然中間有個緊急的需求插過來讓我們完成，當我們把緊急需求完成后，再去做被打斷的需求發現思路被打斷了，這就是《干擾效應》的影響。
人們在處理事情時大腦會給傳遞出目標信號，根據人的本能認知進行操作，處理收到的反饋信息，最后在反饋給大腦，當多個事情需要處理時，大腦需要同時傳送不同的目標信號，身體的各項部位進行執行，這時候我們往往跟不上大腦信號，因為《想》和《做》是跟人能能力反應相關。
人們處理事情就像電腦運行軟件一樣，同時運行多個軟件時，電腦的效率就會出現發燙、卡頓等問題，人處理多項事情時效率就會變慢，無法專注某一個事情。
看下圖中這兩組金剛區圖標，首先第一組的問題是雖然顏色很豐富，但是沒有進行很好的分類，增加用戶的思考時間，干擾性太大。
再看第二組金剛區圖標，雖然很精致且有食欲，很符合外賣平臺的調性，當然有好也會有壞，這么多復雜的圖標同時出現，當用戶目標很明確的時候，這么多的圖標就形成了信息干擾，用戶需要配合文字才能減少篩選效率。
下面這組某生鮮的金剛區也是同樣的問題，雖然把商品實物圖作為信息傳達的元素，但商品過于復雜，在移動端屏幕上很難看到細節，這需要用戶對商品的認知非常明確，例如一用戶來賣水果，如果是第一次使用這個產品可能很難通過圖標來找到入口。
我們看下面的美團首頁，他的金剛區入口有15個，他們的處理方法在結構上是進行了層級區分，把重要切頻率高的5個入口重點突出，使用頻率較低的入口弱化，通過層級和減少復雜度避免用戶出現迷惑行為。
個人中心是承載功能入口較多的頁面，很多功能用戶一般很少用到，每個用戶的功能使用頻率都根據用戶習慣而定，在設計上個人中心常見的就是把功能按照維度分類，如設置類、功能類等便于用戶查找。
還有一種像站酷這種列表布局也是比較效率的布局方式，這種布局方式按照用戶的習慣，由上到下的順序進行瀏覽，干凈簡潔的頁面，某種程度是減少了干擾。
先看一張對比圖，簡單講下我是如何運用干擾效應進行設計。
這是去年我對我們產品的個人中心頁進行改版，左邊是舊版頁面，舊版頁面無論是視覺上還是交互上都不符合用戶認知，在功能層面也是紊亂不夠簡潔，整個改版流程呢分為分析用戶目標、問題梳理、針對優化、結果驗證。
這里主要講下如何針對用戶目標進行優化，用戶目標分兩個維度，一是個人中心作為管理內容進行使用，二是通過個人中心查看投遞簡歷的進度，其中投遞簡歷對于產品價值是相對較高。
提一嘴當時的用戶是技術類居多，大多是求職、學習目的。
無論是視覺上還是交互上問題都是比較多，并且結構比較混亂，把一些用戶不常用且對產品沒有價值的功能點放置層級較高，過多的就不寫了，總之都是問題。
作者：愛吃貓的魚___ 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
有效的顏色應用技巧是每個從事視覺合成相關工作的，包括插畫家和UI設計師，都必須具備的。隨著扁平化設計和material design的普及，具備色彩理論知識變得更加重要。
目前鮮艷的顏色和漸變出現在不同數字產品的用戶界面上：從好玩和有趣的到商業應用和網站。然而，關于明亮的顏色對用戶體驗的影響還有很多討論。本文對豐富多彩的用戶界面設計的優缺點進行了深入的分析。
增加可讀性和易讀性
我們之前的一篇文章中，介紹了影響配色方案選擇的因素?？勺x性和易讀性是設計師考慮色彩運用的基本因素。提醒一下，可讀性是指人們閱讀文本內容的容易程度，而易讀性則定義了用戶在特定字體中區分字母的速度。
鮮明的顏色足夠的對比度有助于增加可讀性和易讀性。有對比的布局元素會變得可區分和引人注目。然而，高色彩對比可能并不總是有效。如果文本內容和背景顏色對比度太大，將很難閱讀或掃描文本。這就是為什么推薦設計師創建一個溫和的對比度，只用高對比度顏色突出元素的原因。
對任何數字產品來說，視覺層次是打造清晰導航和直觀交互的核心要素。UI組件就是這樣被組織起來的，這樣大腦就可以通過這種包括顏色在內的物理差異來區分物體。
顏色有自己的層次結構，這是受用戶思維的影響所決定的。有大膽的顏色，如紅色和橙色，以及弱的白色和奶油色。明亮的顏色很容易被注意到，所以設計師經常用它們來突出或設置對比度。此外，將一種顏色應用到幾個元素上，表示它們在某種程度上是有相關性的。例如，您可以為購買按鈕選擇紅色，以便人們在需要時直觀地找到它們。
大腦對大膽的顏色反應強烈，這就是為什么明亮的顏色組合很容易被注意和記住的原因。色彩豐富的用戶界面設計，在眾多顏色較輕的產品中容易脫穎而出。顏色的選擇需要基于目標受眾的喜好和市場調查。
此外，如果一個公司擁有明亮的企業顏色應用于商標和品牌項目，那使用同樣顏色在其網站或移動應用上也是一個好方法。這種方式連接公司所有的溝通渠道，創造了一致性的視覺解決方案，并且提高了品牌知名度。
為了傳達正確的語氣、信息和號召用戶做出預期的行動，設計師需要知道顏色會影響我們的情緒和行為。我們的大腦會對顏色做出反應，而我們通常不會注意這點。這項名為“顏色心理學”的研究表明，當我們的眼睛感知到一種顏色時，大腦就會向內分泌系統發出信號，釋放負責情緒變化的荷爾蒙。
適當選擇顏色有助于讓用戶處于一種促使他們采取行動的心理狀態，并設置合適的氛圍將正確的信息傳遞給用戶。比如，如果設計師設計了一個與自然或園藝相關的產品的UI，很有可能會選擇用綠色和藍色。通過這種方式，設計將從一開始就與一種產品或服務類型相關聯。您可以在我們的文章《顏色對用戶行為的影響》中找到對顏色含義的具體描述。
明亮的顏色和漸變，是UI設計中的最流行的趨勢。如今，可以在不同類型的數字產品中看到這種運用，而嚴格的商業風格的限制似乎被拋在了一邊。
明亮的漸變色彩在用戶界面上可以帶來一種現代化感和新鮮的想法。結合最新趨勢設計的APP或網站往往引人注目，盡管競爭激烈，仍能吸引用戶的注意力。
那些認為顏色能靠直覺和審美隨意混合的觀念是錯誤的。如果你想要創造和諧的視覺構圖，那么關于顏色如何起作用以及它們如何協作的基本知識是必不可少的。
在UI中應用的顏色越鮮艷，搭配就越困難。為了讓用戶感到愉悅和舒適，設計師努力將平衡和和諧融入到用戶界面設計中。色彩協調是指在設計中以最吸引人、最有效的方式來安排色彩，以供用戶感知。和諧的顏色組合有助于對網站或APP獲得一個不錯的第一印象。顏色理論定義了一些基本的顏色方案，下面這些配色方案被證明是有效的。
單色，色彩和諧是基于一種顏色和它的各種色調。
類似色，該方案適用于顏色輪上相鄰的顏色。
互補色，它是在色輪上相互放置的顏色的混合，目的是產生高對比度。
多色互補，這個方案與前一個方案相似，但是它使用了更多的顏色。例如，如果你選擇藍色，你需要取另外兩個相鄰的顏色，表示黃色和紅色。
三元色，它是基于三個獨立的顏色，在色輪上是等距的。專業人士建議使用一種顏色作為主調，其他顏色作為輔助。
四色，tetradic配色方案使用四個顏色從車輪是互補的。如果你把選中顏色上的點連起來，它們就形成了矩形。
大膽的顏色可以作為在UI中進行重音的工具，但它也可能成為重音消失的原因。許多鮮明的顏色在一個單一的視覺組成會帶來了失去突出元素的風險，因為他們成為一個色彩種制造混亂的一部分。
這就是為什么推薦設計師使用60%-30%-10%的比例。最重要的部分應該是主色調，三分之一的構圖采用第二色，10%的部分應該選擇有助于形成重音的顏色。這樣的比例被認為是令人愉快的，因為它允許逐漸感知所有的視覺元素。
創造數字產品的核心階段之一是用戶研究。定義和分析目標受眾，使設計師了解他們對網站或應用程序的期望。年齡、性別和文化會影響潛在用戶的喜好。例如，孩子們很喜歡黃色，但當我們長大后，黃色通?？雌饋聿荒敲从形ΑＤ腥撕团送ǔＯ矚g冷酷的顏色，如藍色，綠色。不像女人，男人通常喜歡白色、黑色和灰色。
明亮的顏色也是如此。即使您是設計一個有趣的APP，也需要考慮目標受眾的具體情況。中年人通常更喜歡輕松的用戶界面，他們可能不喜歡屏幕上很重的顏色去分散注意力。
正如我們上面所說，明亮的顏色可以產生大量的對比度，幫助突出重要的UI元素，并提供良好的易讀性和可讀性。然而，過多的對比度可能會起到不好的效果，尤其是在移動界面上，因為它們的空間有限，可以在不同的環境下使用。
小屏幕、環境光和明亮的字體使對比度高的圖像在用戶眼中顯得很難看。這就是為什么在移動UI設計中使用明亮的顏色需要注意顏色之間的對比度，這樣人們在閱讀文字時會感到舒服。
顏色是大師手中的一件偉大的工具，和其他任何工具一樣，它也有它的優點和缺點。為了有效地使用它，需要考慮它的所有方面，以便能夠找到適合設計任務和目標的解決方案。
作者：愛設計的狐貍 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
「尼爾森十大原則」又稱為「用戶界面設計的10種可用性啟發式」，是由雅各布·尼爾森（Jakob Nielsen）提出的10條交互設計一般原則。之所以將其定義為“啟發式”，是因為它們是廣泛的經驗法則，而不是特定的可用性準則。
在官方2019年的描述視頻中將原則定義為「十大UX設計試探法」，運用這些原則有助于我們試探設計的邊界，探索設計的可能性，千萬不要讓原則成為束縛我們設計的枷鎖。
“保證元素對象，操作選項的可見性，以此降低用戶的記憶負荷?！?
這個原則直譯文過來的話有點拗口，其實就是指盡量減少需要用戶記憶的東西，特殊情況下提供可選項讓用戶在此確認信息。特別是在一些較為長流程的頁面流轉中，一定要注意上下文的關聯性，以此協助用戶進行回憶，而不是從頭開始記憶。
1. 選項可視性
最常見的運用，將選項以用戶最能理解的方式呈現出來，不讓用戶疑惑。
在平常練習的飛機稿或者一些風格獨特的產品中我們經常會看到只使用了icon的tab欄，雖然美觀，但是當用戶量達到一定程度，且用戶屬性較多的情況下很容易造成識別上的問題。目前市面上較多的產品還是選擇了文字+icon的展示形式，通過文字與圖形加深用戶的識別，高德則選擇了使用表意最為明確的文字。
2. 頁面可視性
頁面標題也是最為常見的運用形式，產品需要清晰的告知用戶目前所處的位置。特別是在一些需要長時間停留，存在操作被打斷的界面中標題尤為重要。
目前市面上常見的產品都會在用標題來告知用戶當前所處頁面，有段時間特別流行類似APP Store這種刻意放大來突出頁面標題。值得一提的是，在IOS中如果從一個APP跳轉至另一個APP左上角則會出現上一個APP的名稱，切點擊可以快速返回。如上圖中的淘寶頁面，我是通過微博點擊廣告鏈接后跳轉進入的。
3. 交互通用性
只要是用戶熟悉的交互形式，用戶就不用浪費時間去記憶，即使不用文字說明，也能有效的保證用戶的識別。
在文字閱讀或者編輯的時候，長按可以拷貝/粘貼，即使不用說明，絕大部分用戶也能get到，還有就是預覽圖片時候，使用手指交換進行縮放。
4. 歷史記錄
提供最近訪問項可以幫助用戶恢復他們未完成的任務以及難以回憶的任務。
最常見的莫過于瀏覽器的歷史記錄，可以幫助用戶回憶尋找某個時間節點的內容，微信的聊天記錄劃分了更多的維度來幫助用戶搜索相應的記錄。淘寶瀏覽商品不穩定性較大，有時用戶會因為某個宣傳而點進某個商品，通過足跡可以查看瀏覽記錄，這樣就不用特地去記店鋪名稱或者加入收藏夾了。
“用戶看不見的加速器（快捷方式）通?？梢约涌鞂＜矣脩舻慕换ニ俣龋瑥亩瓜到y可以同時滿足經驗不足和經驗豐富的用戶。允許用戶定制頻繁的操作?！?
系統需要同時適用于新手用戶與專家用戶，對于新手用戶來說，需要盡量降低他們的學習成本，幫助他們快速上手，而對于專家用戶來說，他們需要的是快捷以及高效。
1. 千人千面
在注重用戶數據分析的今天，很多時候已經不用用戶自己手動去設置自己的偏好，產品便能像你所想。
左圖的滴答清單是最為常見的為新手用戶準備的引導方式，右圖支付寶的財富界面，如果是新手用戶，那么金剛區下方則展示現金紅包，基金推薦等吸新人，如果是基金老用戶了，則會展示更加專業的數據字段來幫助用戶決策。
2. 重復操作
對于熟悉的產品，一般來說用戶更希望一切趨于穩定。
在外賣這種使用頻次較高選擇項較多的產品中，很大一部分用戶不愿意冒著風險嘗試新的菜品，或者點餐決策時間較短（比如開會），他們很多時候會選擇“再來一單”。
3. 快捷方式
在操作同一款軟件時，專家用戶的屏幕只有一個預覽窗口，而我…恨不得屏幕再大點，塞下所有工具欄。
在各種軟件中都會設置快捷鍵便于專家用戶的高效操作，比如專家用戶的Photoshop和我的PS。
“對話中不應包含無關緊要或很少需要的信息。對話中每增加一個信息單元都會與相關信息單元競爭，從而降低其相對可見度?！?
我們在設計一個頁面的時候，如果其中的元素都想突出，最終只會導致沒有任何突出的元素。這里可以參考“信噪比”的概念，即相關信息與無關信息的比例，用戶的注意力是有限的，降低不必要的視覺噪音，才不會過于分散用戶的注意力，提高用戶效率。
1. 文字內容
資訊類產品中最為常見，如果一大段文字又臭又長,那么就很容易影響到想要傳達給用戶的核心思想。
36氪在快訊頁面中會將重點資訊標紅來突出，此外默認情況下只展示資訊標題，方便用戶快速瀏覽，如果遇到感興趣的資訊可以再選擇展開瀏覽詳細信息。
2. 視覺元素
利用這個原理，現在的產品會在一些視覺元素處理上做出區分，不僅能引導用戶快速完成預設的操作路徑，且對產品本身業務也是相當有利。
淘寶的結算頁面中，為了促使用戶剁手不受干擾，會將付款btn與其他做高反差處理，同理Airbnb在首頁中將搜索房源作同樣的的處理，只要促使用戶搜索了，那就提高了剁手的轉化率。
“錯誤信息應該使用簡單的語言表示，準確指示問題并建設性地提出解決方案?！?
原文中特地強調不要用代碼去表示錯誤信息，即用用戶能夠理解的，通俗的，接地氣的詞匯，千萬不要用一些專業性術語。用語盡量禮貌，不要責怪用戶，讓他們覺得自己是個傻逼，這樣很容易讓他們產生挫敗感。
得道在使用手機號登錄的時候手機號少輸入了一位，以至于登錄btn一直無法點擊，雖然診斷了錯誤，但是沒有明確的告知用戶錯在哪。Behance在這方面就顯得更為完善，會實時判斷狀態，并且實時告知原因，協助用戶進行改正。
“即使可以在沒有文檔的情況下使用系統會更好，但可能仍需要提供幫助和文檔。任何此類信息都應該易于搜索，著眼于用戶的任務，列出要執行的具體步驟，并且信息量不要太大。”
每個用戶的背景都有所不同，所以很難確保所有用戶都能暢通無阻的使用自己的產品。無論什么類型的產品，都盡量給用戶提供一個幫助的途徑，對于那些只需要一句話就能概括的，可以考慮在附近進行簡短的說明，而對于需要復雜說明的，最好統一一個幫助入口，且放置于用戶易于找到的位置。
在IOS的設置中，會在一些設置項下添加簡要的說明，以此來幫助用戶更好的理解。印象筆記與普遍的產品一樣，在菜單欄上有幫助的入口，而且提供精準的搜索功能，幫助用戶更快的解決有可能遇到的問題。
作者：CE青年 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
篩選可以說是我使用比較頻繁的一種交互形式，比如我點外賣，會選擇滿減優惠力度大，同時我也可以選擇在哪一個價格區間內的產品，這就會用到篩選，而到了B端產品上來，一個CRM系統當中，篩選的邏輯也會比移動端的復雜，伴隨著：且關系、或關系、大于、小于等等這樣復雜的邏輯，也為設計本身增加了很多難度。因此，今天我們就來討論討論篩選控件
篩選存在的對于整個表單來說是非常重要的，它可以幫助用戶，在表單茫茫多的數據當中進行快速的定位；可以對表單進行快速劃分，縮短用戶對于數據的尋找時間；能夠滿足用戶在工作中，實際業務場景的篩選。
對于實際B端場景來說，篩選是日常數據分類的一個重要途徑，我們先來看看實際場景到底有哪些？
比如今天作為一個電話銷售人員，想要聯系最近注冊的用戶時，通常會通過篩選來選出最近幾天注冊過，同時又沒有銷售更進的客戶，進行一個優先級的排布；
再比如說，在銷售周報當中，銷售主管可以通過篩選得到每個人這周完成的狀態，也可以通過篩選得出每個人對于線索的更進情況和對客戶的流失狀態等等，這些都可以通過各種各樣的篩選形式來滿足用戶對于特定情況下的使用
篩選可以通過多個篩選條件進行多維度的尋找，而導航、搜索只能通過單一條件進行指定篩選。
雖然在現在很多搜索都可以支持多維度用空格去進行多字段的關鍵詞搜索，但本質上區別不大
所以在B端項目當中，如果你有表單，那你就需要篩選
我們將篩選分為基礎篩選和高級篩選兩種，兩種篩選會根據業務場景不同，在不同的頁面去使用
基礎篩選一般為系統預設好的篩選字段，具有很強的業務和場景的需求?；A篩選一般分為四個部分：
篩選條件：是指用戶可以篩選的范圍
篩選項：是指用戶可以選擇的篩選項目
已選項：是指用戶已經選中的篩選項
備選項：是指用戶還沒有選擇的篩選選項
基礎篩選更多作為用戶快捷篩選的一種方式，因為一般使用場景當中用戶幾個篩選邏輯為“且”
同時篩選的邏輯也為簡單篩選，所以在使用場景上只適合在對篩選要求不高的場景下使用。
高級篩選一般為篩選中含有運算符，同時篩選當中包含條件關系，比如且關系或者否關系。一般高級篩選包含以下幾類關鍵詞
篩選關系：是指幾個篩選條件之間的關系，一般為 且、或關系，即 且 關系為幾個條件之間的交集；或 關系為幾個條件之間的聯集（并集）
篩選字段：是指在篩選當中，所要的篩選項，一般為表單當中的所有可篩選的字段
篩選操作：是指篩選字段和篩選值之間的關系，常見的篩選操作有：大于、小于、是、否、包含、不包含、為空、不為空等等。
篩選值：你所需要篩選的數值
高級篩選一般滿足更多的用戶場景，為用戶多條件多字段、多個篩選關系、多個篩選操作 提供有利保障。
當在篩選器條件少于5個的情況下，最常使用的就是上下布局，這樣篩選能與網站保持統一的情況下，上下布局也更方便用戶進行閱讀
當篩選器過多的情況下（一般在5-15個之間），篩選器過多，需要滾屏才能看到篩選結果，用戶使用起來會很別扭。所以在5-15個的情況下，一般會將篩選項進行收折，這樣保證篩選整體面積不會太大，同時將用戶常用的篩選放在前面，可以滿足用戶基本的業務需求和使用場景
左右布局在PC端一般是以字段選擇進行篩選，通俗來講就是將用戶可以篩選的所有字段全部羅列出來，然后通過勾選選，擇出你需要篩選的字段，進行篩選器的使用
左右布局的好處是能夠將篩選的所有條件都直接的展示出來，可以適應很多場景，在篩選器用15個以上時。通過左右布局的方式，能夠讓篩選條件進行滾動，在最大限度保持用戶使用體驗
在日常的B端產品中，篩選的形式有哪些？篩選到底應該怎么設計？接下來為大家總結梳理一些在 B端產品 中的篩選玩法，希望為你開啟新大陸。
平鋪型一般為用戶搜索結果數據量過大，使用戶搜索出來的結果與其預期差距過大，用戶然后可以通過篩選對數據的再一次分類，使用戶能夠精準尋找其想要的結果。
平鋪型一般為篩選條件少于6個，這樣能夠通過1行或者2行去展示篩選項的結果
多用于信息量大的產品，比如電商、視頻網站等等。常見的淘寶、京東、騰訊視頻PC端 都采取用這樣的方式，將所有的篩選條件列出來。
平鋪型的好處是將篩選項的結果全部或者部分放出，能夠幫助用戶快速理解篩選項以及快讀找到自己想要的結果。
缺點也是很明顯，平鋪型的控件占比大，需要占據大量面積展示平鋪出的篩選結果。
比如淘寶PC端，搜索一個產品后花去40%的面積去展示所有的篩選條件，其實就是想引導用戶，淘寶搜索過后spu的數量仍然過大，想通過進一步的篩選，讓用戶明確自己對想要東西。同時因為面積占比大，通常平鋪型都是以收折的狀態，只有在搜索觸發后才會完全展開
收折型篩選是一種簡單直接的篩選形式，將用戶常用的篩選形式通過下拉框的形式進行篩選。每一個篩選條件就是一個下拉框，這種形式看上去很簡單，但是在B端場景中，下拉框對于用戶來說認知成本低，操作性也較強，同時在用戶重度使用時，又能給用戶很好的使用體驗的一種方式
用戶可以直接對其常用的字段篩選進行一步操作，并且沒有復雜的篩選關系，全部都是“且”的篩選邏輯，能夠保證用戶進行快速的篩選選擇
將所有信息全部平鋪展開，信息量過于冗雜繁多，同時在做通用性產品時，這種方式很難做到通用性
單側篩選是一種更通用的篩選形式，通過對于你想篩選的字段進行勾選，勾選完成后就會出現篩選條件，然后選擇篩選字段、篩選操作、篩選值，一般選擇完成所有篩選后，還需要點擊查詢，篩選操作才算完成。
整個單側篩選，大量的篩選條件可以放置在表單的左側或者右側，通過表單縱向空間，去承載大量篩選條件。
節省空間、通用性強。因為在很多Saas系統、Paas系統當中，無法針對每一個客戶進行設計，就要考慮到系統通用型高，做一些大而全的功能。在每個表單也所需要定制化修改的地方很少，同時能容納的信息量可以很大。
就是在后臺系統當中只有這一種篩選形式會面臨在我常用的幾種篩選的字段中，要通過不斷尋找，來滿足我的篩選需求，操作麻煩。
我們產品在某一次改版就將篩選由收折式修改為單側式，因為我們用戶使用篩選的場景非常的多，用戶每次篩選都要多進行2、3步操作，導致用戶進行了大量的吐槽，后來進行修改，將篩選順序支持手動調整順序，用戶吐槽的次數才慢慢減少。
表頭篩選是一種復雜篩選的形式，其最開始是來源于Excel的篩選形式。點擊表單的篩選按鈕，可以將表頭的篩選字段直接帶入，方便用戶。之后在后臺產品的發展中，得以借鑒過來。
可以通過表頭的點擊，使用戶更快捷進入到自己的篩選條件，在通常情況下，在表單越左的數據顯然是越重要的，也是使用篩選去篩頻率最高的，因此高頻的篩選場景基本還是得到滿足。
用戶第一次進入系統很難理解這種交互形式，且在每個表頭都會有一個icon，影響用戶對于表頭的識別。
通過點擊篩選按鈕，展現出篩選彈窗，進行篩選。這種篩選適合在篩選功能在系統中不是很重要的層級。最常見的就是Tapd，在其中篩選不是很強的一個功能，同時也是系統中十分有必要的。
是能夠在節省面積的情況下，可以進行很復雜的篩選，同時可以支持復雜情況下的篩選
彈窗會遮擋一部分表單數據，會影響篩選人的判斷，其次篩選條件的添加也相對更加繁瑣。
在我們一系列篩選的調整過后，我們團隊也總結了對于我們來說更重要的條件和形式，來和大家分享探討一下。
我們認為影響篩選控件最重要的是用戶的使用頻率，因為用戶的使用頻率和使用方式，直接影響到我們篩選是用普通篩選or高級篩選，也會影響到篩選的形式。
篩選功能的做法，取決于我們產品未來是想往哪一個方向發展，如果想把功能做的強大，就得考慮到篩選的后續擴展性。因此滿足實際業務也是十分重要。
在B端系統當中，最可能遇見的就是你給用戶設計的路徑但是其實用戶根本沒有往你想的方向去操作。我們系統最開始給用戶設計好了很多功能點，但是用戶對于這個點的認知成本實在過低，也導致了后面系統功能點很多都被埋沒。因為在你設計好了一個功能點后，要適當引導用戶，解釋這個功能的使用場景才不會讓你設計的功能被淹沒。
作者：CE青年 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
關于樹形選擇，我們必須先知道它的基礎概念，“樹” 究竟是什么？我們先來看看樹狀結構的定義
樹狀結構其實是作為一種層次結構化的表達方式，它能夠將樹的抽象出來表達完整的構造關系，為什么叫做樹，是因為它更像是一個上下顛倒的樹，根部在最頂端，枝葉反而變為下方。
同樣在對樹狀結構的整體命名上，也遵循了與之類似的表達方式：
節點（Node）：是樹狀結構當中的基本單位，使用節點可以表示 不同數據間的 組成關系（從屬關系與并列關系）通常節點會分為幾類特殊情況。
1.根節點：整個樹狀結構的開端被稱為根節點。一個樹狀結構一定只有一個根，在思維導圖中，根節點就代表著它的開端，用于延展出更多的樹狀結構。不過在目前的樹形選擇當中，因為對易用性的要求，通常會隱藏根節點，只展示子節點。而根節點隱藏在 標題、選項文本 當中。
2.子節點：根節點之外的節點被稱為子節點。一個樹狀結構子節點數量是沒有具體限制，在樹形選擇當中是直接展示出來的部分。
3.葉節點：沒有連接到其他子節點的節點。葉節點屬于一類特殊的子節點，它是整個樹狀結構的最末端節點，在樹形選擇當中是一個重要的概念，下面會展開來講。
分支（Branch）：節點之間的鏈接，在我們樹形選擇當中，分支的線條可以選擇顯隱。其搭配的使用方式也有所不同
同時我們還會用到節點的幾個基礎的概念：
節點層級：指當前節點所在的層級，比如根節點為第一層級，根的子節點為第二層級，以此類推；
節點高度：對于某一節點的高度，便是該節點下所有葉節點從上到下的個數；
節點深度：指該節點到根節點的唯一路徑長度，深度與層級較為類似。
樹狀結構究竟出現在生活中的什么地方呢？樹狀結構對于我們又有什么用呢？大家可能理解上會覺得很枯燥，我給大家舉一個例子：
回憶一下我們小學使用字典時的場景，首先我們是先通過聲母，去確定這個漢字的大概的頁數范圍，然后通過韻母去確定這個漢字的詳細位置，最后通過音調找到想要尋找的漢字：
其實字典的設計，便是一個典型的樹形結構。而在 B端系統中我們常見的公司組織架構、省 市 縣 地址選擇、在線教育的班級結構 等等，這些都是使用了完整的樹形結構。
采用樹形可以快速進行結構化的表達，其目的是為了用戶能夠快速地增刪改查，想要更多了解結構化表達的同學推薦大家看一本書《金字塔原理》，里面講了非常多的邏輯化思維、表達的方法與內容，內容比較多，而這種思維其實在我們工作生活中都能夠用到。
1.層級縮進
為了將樹的整個結構完整的表達出來，會使用層級縮進的方式進行區分，通常會使用 8px 對下一級節點進行縮進，這樣能夠表達更為完整的層級關系。
這里要注意，如果想要更為強調樹形選擇的層級關系或者樹形內容本身就比較多的情況下，可以見解 Coding 編輯器的思路，即：將縮進內容使用“分支線”進行表達，更明確清晰。 這里使用層級線后，折疊圖標也會有所不同，下面有明確解釋。
2.折疊圖標（節點按鈕）
主要是將節點下的所有樹葉與子節點進行展示，在整個樹的結構中，折疊圖標一般分為兩種：三角折疊、方形折疊
三角折疊：為頁面層級較少時使用。因為在較少的層級下，用戶不用特意去思考當前節點所在層級究竟在哪。
方形折疊： 更多與頁面層級線進行配合使用，通過層級縮進，將頁面層級線標識清楚，能夠更好的在多層級情況下進行合理區分。
3.選擇控件
整個樹形結構依舊是在選擇錄入框架下，分為單選和多選。因此需要對其類型有所展示，特別是在多選的場景下，一定要標明它的類型，方便用戶進行理解使用。
通常這個控件可以在單選的時候進行隱藏，這里先按下不表，我在樹形選擇的類型當中深入給同學們進行分析理解。
4.選項文本
注意字數限制、超出后如何處理即可，我就不做過多介紹。
在講樹形選擇之前，我先為大家講解關于與其相關的同類型產品，為了方便大家的記憶，我選擇出了兩類不同的組件進行對比，感興趣的同學可以關注“CE青年” 后臺回復樹形對比進行查看。我通過視頻的形式為大家進行了講解，相信大家在看完之后一定會有所收獲。
單選樹只能選擇葉節點，也就是需要將每個樹展開過后才能進行選擇。
它是一個較為傳統的選擇方式，因為它的選擇熱區較小并且理解成本較高，因此這種方式不太滿足現如今對于B端產品效率提升方面的要求，并且要求十分特殊，因此使用較少，現多以單選節點樹為主。
單選節點樹與單選樹最大的區別在于其能夠選擇子節點，這樣可快速選擇該子節點以及其各種葉節點。
同時傳統的單選節點樹中是采取單選按鈕的方式，隨著對B端要求的不斷提高，并且在樹的功能越發的復雜過后，幾乎取消了 單選按鈕 的形式，取而代之的是將整個 文本標簽 作為選擇的熱區，用戶點擊過后即可進行選擇。
因此在樹形選擇當中，逐漸將單選節點樹演變成由兩部分熱區所組成的一個控件：
在左側，主要以樹類型的展開折疊操作，熱區通常就是圖標折疊圖標這一部分；
在右側，以選擇該選項、節點的操作為主，熱區范圍以整個選項文本作為基礎，進行延展即可。
這里還是提示以下新讀者，這類選擇一定要進行 Hover 狀態處理，不然用戶無法根據光標的變化判斷是否可點擊，當然老讀者跳過就行～
大家在對比單選與多選時會發現，為什么不會存在多選樹？不存在只選擇選項的多選呢？
思考時間又到了，別忘下劃，自己先想想呢～
雖然在理論上會存在多選樹的情況，但是它存在的價值比較詭異。首先在樹的節點當中，我選擇一個子節點就是選擇該節點下的所有。因此可以說是選擇了一個節點；或者說它選擇了該節點下的多個選項，因此在實際情況中這類場景過于的少，更多會用多選節點樹進行代替。
當然，多選節點樹與單選節點樹在結構上是十分接近的，就是將復選框展示出來，方便大家進行選擇。考慮到大家經驗不足，建議這里復選框放在折疊圖標前側，原因有二：
在樹形選擇后續的拓展當中，經常會遇到選擇增加一些操作功能，比如 新增、刪除、復制、粘貼、拖動排序。我看很多設計師最開始因為種種原因將選擇組件部分放在后側，導致之后的操作無法進行更多的拓展，隨之崩潰，對樹形選擇又是一頓亂造～
現有的基礎架構基本都是沿用了這類設計，可減少前端同學的工作量，同時也減少他 BUG 的產生。
多選節點樹的使用場景非常多，我舉一個大家在樹形選擇中都會犯的例子，希望大家能夠多理解其中存在的特殊邏輯：
比如在一個大型上市公司當中，我作為老板會去設定整個“設計部”的權限，并且想要得到的效果是之后有任何新員工都是使用這個權限。如果作為一個新人設計師，很容易就會使用多選節點樹，將整個組織架構進行選擇，但是這樣的選擇與用戶實際想要的內容是存在較大差異的。
在產品設計中，對于上訴的“設計部”這個概念其實是一個動態數據，即在之后新增到“設計部”的所有員工，我不必再去權限管理中重新配置。我們遇到動態數據的情況時，首先不建議大家采取樹形選擇，因為首先對于這個概念的理解成本很高，無法通過樹形選擇這樣的方式讓用戶理解；同時系統對于這類動態數據的情況都建議特殊處理，至于怎么處理，大家可以在評論區討論，我也會在后續文章當中為大家進行講解。
易理解：
因為樹狀結構本身就已經存在很久，早在 DOS 計算機時代就有它的影子，經過長期累月的發展，用戶在理解上也會相對更加容易
快瀏覽：
在數據量特別大的時候，能夠根據子節點優先找到自己想要的葉節點，從而提升選擇效率，與《選擇錄入02》當中講到的 Tab選擇十分類似，沒看過的同學建議先去看看。
看結構：
結構，能夠輔助人們進行快速記憶，從而對整體框架有著更深了解。而樹形選擇正是有了這種結構能夠更為方便的讓更多人熟知，從而更快了解業務。
首先對于樹形選擇本身的控件形式，你就需要去分析其能承載的內容數據量。應該是在什么范圍內較為合適。
當數據量過大時一定會出現異步加載、數據分頁等諸多情況，因此在設計中，需對這類情況進行設計。
全選功能本身較為簡答，無外乎就是一個復選框的事情，但是在上面提到的數據量過大 + 全選的存在，會有些問題還需要大家進行留意。
在樹形選擇當中，都可以采取鍵盤操作從而提高效率。基本規則是：
↑鍵：向上切換同級節點；從第一子節點，順序返回父節點；
↓鍵：向下切換同級節點；順序進入已展開的第一子節點；
←鍵：關閉當前級別節點；返回上一級父節點；
→鍵：展開子節點列表；順序進入已經展開的第一子節點；
回車鍵：提交當前 foucs 的節點選項；
樹形選擇是較為常見的一類方式，但由于大家對 基本的樹形結構 認識不足，導致對其設計會有許多誤區。
作者：CE青年 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
最近看到很多美妝博主都在出什么紅黑榜，其實就是在說哪些產品是有問題，不推薦大家使用，有哪些東西是可以安利的好物。
想著B端設計當中，也會存在這一情況。然后我在打開 Ant Design ，瀏覽完所有的組件，你會發現：“組件當中也會存在紅黑榜~”
今天就趁著 618 剛過的這個時間節點，我也來“帶帶貨”，說說B端組件當中的紅黑榜
首先我先說一下關于紅黑榜的定義
1.使用頻率高：也就是這個組件我們平時會頻繁的使用
2.黑榜：在使用過程中，會遇到諸多問題，導致無法正常使用
3.紅榜：往往會更滿足B端產品的實際需求，對于組件有更深的認識
通過我的分享能夠給大家有一個初步的認識，當然整個組件都是基于我平時的設計觀察與使用，目的也是想和大家分享、避避坑，如果有什么疑惑，歡迎在評論區我們一起討論~
樹形選擇在B端系統當中的出現頻率非常高，比如我們常見的：表格、表單、各類詳情頁，只要涉及到 層級結構的選擇，都會有它的身影（注意，這里主要說的是樹狀的選擇類組件）但是作為設計師，樹形選擇在使用的過程當中，會出現很多意想不到問題
尺寸無法確定
因為樹形選擇本身這個組件的特殊性，它的大小需要通過內容當中的高度與寬度共同決定，而在設計過程當中，高度與寬度究竟為多少就要仔細的考慮
因為在使用樹形選擇時，需要思考每一個內容的具體尺寸，太高太低都不行
如果太低，展開樹形選擇就會非常的麻煩；如果太高，則在數據量較少的時候，會給人數據很空
橫向空間也是同理，也就造成了在設計時，需要深入思考
樹形選擇，作為基礎組件，在應付復雜的選擇需求時，很明顯的會感到“力不從心”，無論是從它顯示選中時的內容，還是大量的數據時的選擇難度，樹形在適用性上，都會大大降低，當遇到這類情況時，建議采取更多 “業務組件” 的方式來對選擇進行優化
分類表單（也可以叫Tab表單，不過只是代稱而已~）在B端產品當中也非常常見，它出現在復雜的表單當中，但是作為設計師，在真正去使用分類表單時，你就會發現會有非常多的問題需要我們去處理
對于用戶而言，分類表單不能夠完整的查看表單信息，每一個都需要來回切換。也就意味著填寫表單的時候，我們不能通過滾動查看所有數據，而是要去點擊每一個單獨的分類里面，通過分類了解具體的表單內容
同時必填項的提示，在分類表單也非常難以處理，因為其每一個獨立，而作為用戶，其實是不清楚具體哪一個分類里面有必填項，也會導致填寫的效率過于低下（其實會有處理的辦法，只是大家對于這類提醒都不太滿意）
分類表單在編輯狀態時，同樣難以處理。當提交完分類表單后，我們還需要考慮數據在詳情頁里的展示形式，因為表單與詳情頁的映射關系，這時候在設計時，應該提供某一分類下的數據編輯，還是整個分類表單的數據編輯？
其實這種情況，特別是初級B端設計師，處理起來也是非常棘手
頂部導航非常特殊，雖然在我之前 導航菜單 的文章當中提到過，但在使用頂部導航的過程當中，還是會面臨很多問題
頂部導航最大的局限性便是展示數量太低，畢竟在空間布局當中，橫向空間與縱向空間的差異其實是非常大的，頂部導航的高度設定不能過高，同時 二級、三級菜單 只能夠使用下拉菜單，也就導致在導航菜單的設計當中局限性過大，并且項目一旦發展過后，不容易解決問題
當然，頂部導航并不是一無是處，在許多工具型產品、官網 當中，頂部導航都有著它的一席之地，其實這類形式，更多是以內容為主的網站結構，才會采取頂部導航，也就是上下結構會更加合理
柵格嚴格意義上來講不算是組建，但是由于很多設計師 誤用、亂用，導致設計師為了柵格而柵格
因為在常見的移動端設計當中，是不存在柵格（主要是移動端橫向空間小，使用不頻繁）
在桌面端的設計當中，并不是說柵格不好，而是很多時候設計師使用柵格往往會非常盲目，舉一個簡單的例子，在表格當中是否需要使用柵格？
答案是：“不用使用柵格”，其實這類問題就是目前很多設計師的問題，因為會盲目使用，也就導致了我在做設計的過程當中，出現很多為了柵格而柵格的現象。后面有時間單獨總結一下柵格主要運用在哪些地方，希望大家別盲目使用
至于柵格應該如何使用，在我之前的文章當中都有提到，可以自行點擊歷史記錄查看
滑動輸入條在很多概念設計當中都會經常出現，特別是在 Dribbble 上的桌面端設計當中，是每一個設計師的標配，但是在實際的B端項目中，特別是桌面端的B端系統當中，滑動輸入條是非常不合理的一個組件
因為B端產品當中，大多數的產品都是需要精準錄入，并且數據的區間非常大，因此也就造成了滑動輸入條，使用起來給用戶的感受是非常糟糕的，并且由于大多數用戶的預期還是以直接輸入為主，這也就造成了現如今B端產品很見到滑動輸入條的原因
面包屑導航在實際工作當中經常使用，因為在常見的B端系統當中，導航菜單以及信息結構，一定是非常復雜的（除非你的系統里面就只有一級導航菜單，并且沒有其他的頁面層級邏輯）
因此通過面包屑導航，能夠讓我們清晰知道整個頁面的信息結構，通過面包屑又因為其 小巧、靈活，無論你是在一個完整大頁面當中，又或者是一個小的氣泡卡片當中，面包屑都能進行承載，并且它還能夠起到 返回 的作用，又能夠清晰的展示頁面的路徑信息，是一個可以一舉多得的組件
穿梭框相比大家的不會陌生，在設計B端產品的時候，或多或少都會有所涉及，與此同時，由于穿梭框本身復雜，再加上很多設計師會覺得它占比過大，因此不會去使用
今天安利穿梭框，其實是想安利這一類的穿梭類的組件，你會發現其實很多業務選擇類的組件都會通過穿梭框的形式進行演變，比如我們常見的“國家城市選擇、部門成員選擇” 甚至表格當中的字段顯示隱藏設置，這些都是傳統的數據選擇過后一步一步演變而來，因此這類穿梭框型的數據選擇
其實更加體現的是設計師基于目前的組件所進行的優化，而分析它為何這樣做，這樣做的原因，成為了穿梭框上榜的理由
折疊面板就像一個大的“盒子”，當產品經理在你的身后說著：“這個信息我要放，那個信息也不能落下的時候”，拖出一個折疊面板來解決這個問題
其實在折疊面板的使用過程中，主要是在詳情頁以及表格當中，因為折疊面板本身可以容納很多信息，并且能夠交代具體的層級關系，因此使用折疊面板能夠有更多展示數據的可能性，即插即用，非常方便
在頁面當中的任何地方，蹦出一個氣泡卡片你都不會感到奇怪。其實氣泡卡片我在日常設計當中，經常使用的一個組件，因為它能夠容納下任意的內容，小到一串文字、大到一個視頻，都能夠在氣泡卡片當中進行使用
并且在信息當中，氣泡卡片作為一個信息補充的組件，因此在系統當中，需要展示但是又不是那么重要的信息，使用氣泡卡片，就會更加的方便
最后一個，自然逃不掉我們的錨點導航。感覺在我的瘋狂安利下，越來越多的產品都開始使用錨點導航。因為B端產品必定是復雜且多的信息，自然而然我們在使用的過程當中要更多考慮信息的承載
作者：CE青年 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
按鈕是任何用戶界面當中（無論是桌面還是移動用戶界面）必備的交互元素：甚至可以說，如果頁面中沒有一個按鈕，整個頁面設計將是不完整的。在日常生活中，按鈕也是隨處可見的，一個電燈開關、遙控器按鈕，現實生活中按鈕反復的出現也可以幫助我們不斷去理解屏幕世界中按鈕應該如何操作，從而衍生出屏幕世界中的按鈕的具體形態
人機交互中最重要的就是把我們從小到大對于這個世界的認識映射到屏幕世界中，比如蘋果最為經典ios的滑動解鎖
而到了屏幕世界中，控件的設計更應該與物理世界保持相對的一致，這也是按鈕設計中，尤為重要的一個環節
最近常問身邊的朋友，按鈕究竟是什么？
因為對于他們而言，按鈕不就是一個操作區域加上文字，沒什么特別的，也正因如此，對于按鈕的具體構造也不太了解。這篇文章主要是根據自身的工作經驗，結合當下對于按鈕設計的理解，去分析如何進行更合理的按鈕設計
對于每個設計師來說按鈕并不陌生，在每天的設計中，都會使用按鈕進行頁面設計；但又不是每一個設計師都能夠將按鈕設計好，因為它存在三個方面的復雜性：
使用場景過多：
不是每個場景都需要相同的按鈕，比如在登錄頁當中，登錄和注冊就是使用不同的按鈕形式。這些情況特別在B端產品中，業務在每個步驟中需要突出和強調的點不同，導致設計師很難通過具體場景進行按鈕設計；
出現頻率太高：
B端產品中，每個頁面當中都會有按鈕不停的重復，而高頻的出現會讓我們感到麻木，導致很多設計師都將其忽略；
形式太多：
在我總結的按鈕形式當中，一共分為10類，且情況多種多樣，很多時候都沒有意識到不同形式之間的差距，導致亂用混用
因此一個看上去小小的按鈕，其實經常會困擾著我們，如果剛開始沒有將按鈕進行整體的梳理，那么在你的設計過程中，按鈕會經常打斷自己的設計思維，為了讓大家能夠對按鈕有更深的理解，我將按鈕進行系統的拆解，結合實際案例，能夠使按鈕更淺顯易懂
在文章按鈕類型的分析中，我將按鈕分為兩大類、十小類，將其分類也是為了更好的為大家去分析每一個按鈕所涉及到的狀態，當我們理解按鈕之前，你需要了解它的內部構造
首先，拋出一個問題給大家，下圖中，共有幾種按鈕形式？分別是什么？給大家五秒鐘時間思考
如果你對上圖的按鈕形式并不完全了解，建議你拿好小本本，做好筆記～
在開始講常見按鈕類型前，我們必須要搞清楚一個重要的知識點：按鈕狀態
按鈕狀態：可以讓用戶知道這個按鈕當前是在進行哪一種操作，方便幫助用戶進行判斷
常見的按鈕狀態分為：正常狀態(Normal)、聚焦狀態(Focus)、懸停狀態(Hover)、激活狀態(Active)、加載狀態(Loading)、禁用狀態(Disabled)，下面分別對這六大狀態進行拆解
正常狀態 (Normal)：除了其他五種狀態外的情況都是正常狀態，它是按鈕最為常規的狀態形式，也是設計師必須設計的一種狀態
聚焦狀態 (Focus)：主要是用于展示當前電腦光標所在的具體位置。聽起來有點玄乎，我來講他背后的原理，主要是方便一些鍵盤使用的用戶，可以使用Tab鍵或者方向鍵來對網頁進行訪問輸入
比如在Mac OS 以及 Windows的使用中，通過點擊Tab，便展示出文件的Focus狀態
Focus狀態是一個非常重要的交互形式，但是很多設計師都會忽略，甚至在很多網站，直接就是將這個樣式所去除，導致使用Tab鍵無法獲取聚焦的反饋，比如常見的百度、Google再到各大操作系統都會有這類反饋，去除這類反饋，會導致用戶無法用方向鍵控制光標位置，在很大程度上降低用戶使用的可能性
懸停狀態 (Hover)：在桌面端的設計當中，即使用戶知道它是可以點擊的，但是你還是需要設計懸停狀態，表明鼠標現在正在按鈕上。平板電腦和移動端的設備上用永遠不會展示懸停狀態，因為你的手指是無法在屏幕上進行懸停的（雖然IPad OS 更新了13.4版本后，會有Hover態的出現，但是是通過鼠標進行操作，因此這里不予以討論）
激活狀態 (Active)：激活狀態因為叫法不同，在有的地方也稱之為Press狀態，它的表現就是將按鈕按壓下，將顏色變深同時會涉及到內陰影等效果的出現
禁用狀態 (Disable)：按鈕禁用狀態作為最難設計的狀態之一，主要在于禁用狀態的表現形式以及禁用狀態與激活狀態之間如何的切換，我具體來分析一下兩個難點
難點一：禁用狀態在顏色上首先會給人灰色塊的感覺，行業里也稱之為置灰，在設計上，也需要注意光標移動時需要展示禁用光標，即讓前端大哥將Cursor的hover狀態更改為not-allowed，你可以優雅的在前端面前裝個X（之后會出一期，簡單聊聊我與前端如何協作如何裝X）
難點二：禁用與激活狀態的切換，比如在一個注冊頁面中，需要姓名與電話必填，當用戶沒有填寫完成姓名與電話時，應該將按鈕置灰，提示用戶不可以點擊，當用戶填寫完成必填字段后，將禁用按鈕轉變為激活按鈕，提示用戶可以點擊登錄
加載狀態/Loading：按鈕需要時間進行加載的一種狀態，通常會被用戶忽略，但是在B端產品中，Loading狀態尤為重要，這里有很多細節和小技巧，展開講篇幅太大，在文中4.3小節（按鈕細節）會詳細解答
主按鈕為頁面中按鈕區最為核心的操作，在日常場景中，主要按鈕一般都為新建、編輯、保存這一類正向的操作，強調頁面中最為核心的功能，能夠讓用戶一看到主按鈕就明白大致在頁面中需要如何操作
但在主按鈕的使用中，要遵循以下兩個原則：
1.在頁面當中，按鈕區域的主按鈕最好只有一個，否者會對頁面的主要功能造成干擾
2.并不是每一個頁面都需要有主按鈕，不要因為頁面缺失主按鈕而強行加上。因為在實際使用中，時常遇到按鈕之間為平級的關系，強行添加，容易造成頁面層級混亂
在主按鈕中，按鈕狀態的設計也會跟隨物理世界進行相應的映射，因此在設計時需考慮現實生活中的狀態
比如用戶的Hover時，一般都將按鈕抬起并亮度增加，其目的是為了提示用戶可以點擊，而用戶在按下時，用加黑來表示用戶按下的狀態，與現實生活中按鈕的狀態類似，因此按鈕狀態也應該映射物理世界
次按鈕在頁面中出現最為頻繁，在日常使用中，如果你不太確定使用何種按鈕時，那使用它，大概率沒有錯。因為它運用廣泛，出現頻率也最高，因此也被人們稱為標準按鈕
在次按鈕的設計形式中，我們團隊將設計形式分為兩類：
此按鈕整體以文字+邊框的形式，這類形式在視覺層面上感知較弱，適合幾個按鈕同時展示，在B端項目中，字線型也是在使用中最為頻繁的形式
字面型更偏向表達按鈕整體，常見于各類移動端的按鈕當中，整體的表達也更適合移動端這類屏幕尺寸較少的設備當中，更符合卡片化設計的思路，反而不太適合桌面端的設計
文字按鈕為頁面中視覺層級較低的按鈕形式，因而可以在頁面中大面積的重復使用，文字按鈕與鏈接（Link）基本一致，且沒有太多區分，所以在設計上，文字按鈕與鏈接基本相同
文字按鈕重復的出現，以表格頁面當中的操作列表最為突出，因為表格當中常用的操作最好能夠直接展示出來，因此表格中基本都采取文字按鈕的形式
圖標按鈕為頁面中控件占比最小的按鈕，所以在頁面中的使用也是最為高效的。因為沒有了文字元素，會導致用戶在圖標的理解上出現偏差。為了解決這一問題，主要是通過用戶在Hover時使用展示Tooltip提示按鈕的含義，同時建議在圖標按鈕的使用上多為高頻且易理解的圖標
我舉一個簡單例子：
在桌面端產品中，幫助文檔一定是非常重要的一個入口，當用戶對頁面中的功能有所疑惑時，可以通過此來幫助用戶進行理解，通常需要在大多數頁面當中展示幫助中心的入口，這時圖標按鈕就變得最為合適
因此，我們可以得出圖標按鈕的應用場景通常為：當頁面中需要高效的展示一個或幾個圖標時，同時圖標按鈕的展示最為頻繁時，當同時滿足以上兩點，使用圖標按鈕就是一個更優的解決方案
按鈕菜單為頁面中許多操作的集合，通常是將高頻的操作以及一些低頻的操作進行整合，組成的按鈕菜單。這樣既能夠減少頁面元素的冗雜，同時也能夠滿足業務對于功能的需求
舉個例子，在表格頁面當中，B端設計師最常見到的按鈕菜單就是新建，這類新建按鈕其實是必不可少的，同時業務需要，還需要多個業務按鈕進行展示，按鈕菜單的出現，幫助用戶進行按鈕的整理，同時也滿足業務需求
這其實是主按鈕的一種衍生，通過圖標對主按鈕的含義進行解釋，從而幫助用戶提高這個按鈕的識別性。如果一個按鈕你想比主按鈕更加強調，那便可使用在按鈕中添加圖標，這樣既能夠強化圖標的含義，同時也加深了用戶對于按鈕的印象
在六個常見按鈕形式中，我們根據重要的優先級，給常見按鈕進行一個簡單的排序：
危險按鈕在刪除操作中最為常見，通常是為了警告用戶，這個數據刪除不可恢復，讓用戶謹慎考慮。在常見的刪除操作中，都需要用戶進行二次確認，避免用戶誤操作
當然，在實際業務中，危險按鈕不宜過多，如果業務當中無法避免，需要展示多個刪除按鈕時，推薦采取圖標按鈕進行展示或者Hover過后將其呼出
幽靈按鈕，看它的名字就能想到它的作用：像幽靈一般透明的存在
它沒有使用復雜的顏色、樣式，而是用線條表示外部輪廓，證明它還是一個按鈕。同時內部只用文字展示按鈕名稱。它只出現在按鈕背景復雜的頁面當中，比如：漸變色、紋理、動態圖片背景的情況下，幽靈按鈕能夠完美融入到環境當中
而現如今，傳統意義上的幽靈按鈕已經很少，畢竟在現如今的官網當中，幽靈按鈕已經不再流行，更多的是出現在復雜頁面的“實心按鈕”，而在某種意義上講，這類按鈕才是幽靈按鈕現在的狀態
在形式上，幽靈按鈕和次按鈕看來起沒有并什么不同，因此會有很多疑惑，那我什么時候用幽靈按鈕什么時候用次按鈕呢？
首先幽靈按鈕是屬于特殊按鈕體系中，因此它不會受整個按鈕體系的束縛，比如我在一個設計系統中，分別定義了常規按鈕的尺寸分別是24px、32px、40px，但是我在一個官網落地頁當中需要有一個46px的按鈕出現，次按鈕就完全不合適。其次幽靈按鈕邊框粗細、字體大小都是和常規按鈕體系不同，因此幽靈按鈕就和次按鈕有所不同
第二個方面在次按鈕的設計形式中，不僅僅只有描邊按鈕這一種形式，因此幽靈按鈕與次按鈕它們可能會有交集，但是屬于兩種不同類型的場景，因此也不能將它們混用
在Material Design 出現之初，懸浮按鈕受到了很多人的追捧，它也是安卓設計的代名詞。主要是用于頁面當中最常用的操作，是整個APP中最核心的按鈕，能夠代表這個產品的核心功能，比如印象筆記的新增筆記（安卓）、滴答清單的新增清單等等...
但沉浸式設計的出現，使得移動端寸土寸金的地方，需要固定一個按鈕的情況就變得更加少見
而在B端的設計過程中，逐漸衍生出了B端行業特有的方式
懸浮按鈕在B端場景中，主要是幫助用戶進行輔助咨詢的功能，例如在一些用戶需要得到幫助的頁面中，可以通過懸浮按鈕，使用戶的又疑問的頁面進行快速提問，幫助用戶能夠進行快速的跳轉，在飛書的應用列表中，其實用戶剛開始理解應用列表其實存在一個理解成本，就可以通過懸浮按鈕進行展示
行為號召按鈕簡稱：CTA按鈕
主要目的是為了號召人們在某些特定的頁面中使用此按鈕來提高轉化，比如立即購買、聯系我們、立即訂閱等等...
大多數時候，CTA按鈕都是成對出現的?！笆桥c否“ 、“登錄與注冊”、“確認與取消”等。因此，分析清楚CTA按鈕后設計出視覺層級合理的頁面稱為非常重要的點。在設計中，一般會采取漸變色、主題色、主題色的互補色等等，它經常獨立出現
在B端軟件的場景中，官網是CTA按鈕出現最為重要的頁面，一般在官網中，使用CTA按鈕將用戶引導從潛在客戶向付費客戶進行轉變（點擊過后一般是一個聯系表單進行信息的填寫），這也是在B端產品中非常重要的指標：潛客向付費客戶轉變?？梢砸龑в脩暨M入到下一個階段，如果CTA按鈕設計不好，人們對于官網只是瀏覽，不會有任何轉化
因此，在設計CTA按鈕的形式與位置時，需要與產品、設計、運營等共同確定并討論使用，大家站在不同的立場希望得到一個完美的方案，因為設計出清晰的結構層次將直接引導用戶朝著理想的使用路徑前進，從而極大提高轉化率
在我們日常設計中，常常會遇到一些棘手的文案問題：登陸、登錄、確認、確定、發送、發布，在許許多多的工作場景中，猶豫究竟應該在按鈕上使用哪種文案，這就需要我們通過具體的案例場景進行展示相應文案
登陸（Land) ：這是網絡中錯別字最為頻繁的用此，很多人都會把登陸放到登錄頁面中，其實是錯的。這個詞里的“陸”字，就是陸地的意思，其基本含義只是登上陸地而已，拓展出來還會有“登陸到某一個市場”，但登陸網站的說法是絕對錯誤的
登錄（Login）：這是“登記記錄、記載”的含義，我們正常輸入賬號密碼就是為了去記錄我們的一個信息，一般為官網登錄頁
確認（Confirm）：這是帶有一些不可逆我操作的提示，一般用于用戶配置、選擇項等
確定（Yes）：這是詢問用戶是否進行某項不可逆操作，一般為一個單獨的操作
發送（Send）：這是盡快傳遞對方的聊天消息，一般為即時性的聊天發送
發布（Publish）：這是用于用戶填寫的觀點、意見、文章等反饋信息發布到一些正式場合，如論壇、社區等
這些細節的文案就是幫助用戶去理解頁面中所傳達的真正含義，多將文字放置到場景中，文案也更好的輔佐他們作出抉擇
圓角在每一個軟件中，隨處可見。圓角大小所帶來的不僅僅是視覺表現，還更多影響著用戶的使用體驗以及對于產品而言的整體的認知，如果在開始設計之前，沒有對按鈕圓角有具體的規劃，很容易踩坑，如何設計好圓角，我們來進行系統分析
在下文中我們將按鈕的圓角大小，分為以下三類：直角、圓角、半圓
直角：
按鈕四角的方向，具有很強烈的引導性，看上去也會更加刺眼，使得在頁面當中注意力會減弱。同時，直角在按鈕排列當中看上去更加統一，相同的東西在視覺上不太能引起我們的注意
圓角：
相比與直角按鈕，在使用圓角的按鈕中，視覺上總是給人一種柔和親近的感覺，當幾個圓角按鈕進行排列時，能夠感受到圓角按鈕更容易被點擊。因此在使用的按鈕中，建議添加圓角的細節元素
為何直角的物體會給人更嚴肅的感受——每一個人都認為圓角會更好，但是并不是每一個人都能夠解答為什么圓角更好
在巴羅神經病學研究所對拐角的科學研究發現，“拐角的感知程度隨著角度線性變化。銳角比鈍角產生更強的幻覺顯著性”。換句話說，拐角越尖，則感覺越亮，拐角越多，越難看
圓角還有另一種解釋，是因為現實生活中有圓角的物體會更友好。從小，我們就知道尖角的物體會讓人受傷，圓角的物體會更安全。這就是小孩在玩皮球與刀的時候，家長的反應完全不同。
小朋友玩刀會讓家長十分的緊張，趕緊讓孩子放下；而小朋友玩皮球時，家長則是非常的放心。這激起了神經科學所謂的尖銳邊緣“回避反應”。因此，我們傾向于“避免鋒利的邊緣，因為在自然界中它們可能會構成危險”
通常在移動端場景中，半圓按鈕隨處可見，移動端手指觸摸操作上，對于圓角的影響小之又?。欢搅俗烂娑说膱鼍跋?，鼠標的使用，半圓按鈕就會有所不妥
如果相同面積中，按鈕的圓角增大，相應的對于按鈕的可操作區域就會隨之減小，在同等尺寸下的按鈕中，小圓角的按鈕明顯比大圓角的按鈕更容易操作
當然，麻煩事還不僅僅于操作區域，在結合實際業務，我們的按鈕常常作為原子（原子設計理論）用來組成為下拉菜單進行聯動，半圓按鈕在下拉菜單的設計中，也會因為半圓的局限，使下拉菜單的設計會更加困難，同樣在設計上，半圓角對于下拉菜單的適配也會相當突兀，因此在考慮這方面設計時，需要你多去思考之后的業務場景
按鈕的狀態中，Loading狀態通常不會對用戶進行直接展示，因為大多數情況下，Loading狀態就發生在一秒鐘以內，但是對于B端場景中有很多重要操作，在長時間等待中不展示loading狀態，會導致用戶在使用時犯下錯誤
當按鈕響應時間小于1秒時，通常正常反饋即可
當按鈕響應時間長于1秒時，我們通常會采取加載動畫，減緩用戶等待的焦慮感
舉個例子：比如一個確認提交的按鈕，由于網絡或者服務器等原因，需要長時間加載資源，而用戶不知道我剛才按下的按鈕是否有效，這時用戶慌張，想要多按下幾次這個按鈕，系統就會不停提交數據，最后網絡變好時，窗口就會一瞬間瘋狂展示，導致用戶體驗下降
為了防止這類事情的發生，需要在設計師考慮到按鈕在加載一秒以后的狀態，應當提示用戶在網頁已經收到請求，正在加載，同時在按鈕狀態中應該為不可操作狀態。同時會給出加載轉圈的動畫，緩解用戶的焦慮
當你完成了第一步的設計后，想想在按鈕的狀態中，是否更能夠幫助用戶進行體驗上的提升呢？
這也是在面試某大型互聯網公司時，被問到過的一個問題～敲黑板
對用戶操作的適當反饋是用戶界面設計的最基本準則。讓用戶了解當前狀態、位置、是否成功、進度如何，減少不確定性；并引導他們在正確的方向上交互，而不是浪費精力在重復操作上
在Loading的加載過程中，等待焦慮一直是用戶想要了解到的，為了緩解類似情況，可以將等待的進度狀態進行展示，使的用戶在等待的過程中，能夠清晰的清楚自己的按鈕目前處于何種狀態，我大概還需要等待多久，緩解用戶在等待過程中的焦慮
以上兩個方式均是尼爾森十大原則的內容，能夠在按鈕Loading狀態中，緩解用戶在按鈕加載過程中、重復提交、等待焦慮的問題，通過一些設計小細節，幫助產品提升用戶體驗
通過上文對于按鈕的解釋，大致明白按鈕在設計中的作用，接下來我結合一個工作中的實際案例，來看看我們應該如何優化常見按鈕在頁面當中的設計
項目背景：在桌面端，我們需要對整個導航欄進行設計改版，但其中涉及到對于導航的一個整體優化，主要是由于業務功能發生變化，我們需要在導航欄上增加快捷添加入口和通知中心，來滿足導航的后續的功能需求，由于保密協議的原因，就不放自家產品
在桌面端中，瀏覽模式大致分為兩類，F型瀏覽模式、Z型瀏覽模式（下方知識拓展會有講到）
首先，因為導航在整個頁面的頂部，結合兩種瀏覽模式在頂部時統一都為從左到右的瀏覽順序
因此確定整個導航按鈕初步的按鈕重要層級排序
我們對于用戶的按鈕層級有著明顯的劃分，因為在整個導航右側，又因為其的特殊性，我們把操作空間分為三部分：
左側為操作路徑最短的區域，因為桌面端的產品需要通過鼠標進行交互操作，而其中移動鼠標的長短直接決定用戶是否愿意點擊這個按鈕，因此，靠左的按鈕適合放置用戶最常使用的操作
中部為按鈕內部區，可以放置一些低頻，但是又必須出現在這個區域的按鈕操作（比如：幫助中心、通知中心等等...）
右側為按鈕最為重要層級最弱的區域，同時它也有一些特殊性
一般在瀏覽器的右側，為用戶最容易定位的操作區域，因為靠近邊緣導致在用戶定位當中能夠幫助用戶進行快速選擇
回到頁面中信息層級較高、同時需要精準定位的按鈕就會將個人中心放置在最右側，方便用戶進行快速定位
因此我們講導航當中按鈕重要層級進行簡單排序，得到下圖：
通過親密性原則，我們將除去左右兩側確定好的按鈕之外的按鈕進行簡單分類，將有關聯的按鈕進行組合，形成較強的關聯性～
視覺調整作為最重要的一步，主要是為了在最后的按鈕重要層級上，將一部分按鈕突出、一部分按鈕弱化，達到我們想要的整個層級效果
通過團隊內部討論，將我們的新增按鈕定位CTA按鈕，因為它關聯到我們每個使用系統的人都會用到，屬于最高頻的操作按鈕，也因此將其突出
F型瀏覽模式：
是新聞平臺、博客等文字為主的網站布局所采取的閱讀模式
該閱讀模式由尼爾森團隊的眼動追蹤研究結果從而進行普及，在這個研究中記錄了超過200位用戶瀏覽網頁時，發現用戶的主要閱讀行為在許多網站和場景中表現得相當一致。這個閱讀模式看起來有點像字母F，因此也被叫做F型瀏覽模式。
首先用戶以水平方向進行閱讀，通常是在閱讀區域的上半部分
接下來，他們在屏幕左側垂直瀏覽，尋找段落開篇幾句中感興趣的內容。當他們找到感興趣的內容時，他們在第二個水平方向上快速瀏覽，通常這塊內容區比上一個內容區更短小、更簡潔。這部分元素形成了F的下半部分
最后，用戶在垂直方向上瀏覽內容的左側區域
Z型瀏覽模式
是掃描滾動的網站的典型模式
正如你所期望的，“z”型模式的布局遵循字母Z的形狀。“Z”型模式的設計跟蹤了人眼掃描頁面時的路線——從左到右，從上到下：
首先，人們從左上角到右上角進行掃描，形成一條水平線
接下來，向頁面的左下側掃描，鏈接成一條對角線
最后，再次向右轉，形成第二條水平線
當觀眾的視角以這種模式移動時，它形成一個虛構的“Z”字形
在實際工作中，經常遇到自己設計的按鈕與開發實際還原的按鈕差距很大，一些沒有經驗的設計師會和開發說，你看我設計稿，每一個按鈕都要按照設計稿的來，這樣設計師與前端開發之間的矛盾就會越來越深。其實在按鈕設計的細節中，開發怎么完美的還原，里面還有很多細節
首先要想讓開發完全還原你的設計稿，就必須了解開發實現的思維方式，針對它的思維方式進行相應的思考。
又由于Sketch與開發常使用的VScode之間邏輯上存在較大差異，導致設計師設計出來的很多設計稿開發根本無法實現，這也是B端設計師擺在你面前的第一個問題
對你沒看錯，無法實現，我舉一個例子
這是一位同學問我的一個問題，他說我這個按鈕為啥實現不了，前端不就是多幾個代碼去適配我的設計稿就可以了嗎？
如果你看了上圖也有很多疑問，那就接著看下去～
在按鈕當中，通俗的理解Padding就是文字與按鈕之間的間距
因為Sketch等軟件在按鈕的設計中，只有圖形位置的概念，沒有內間距Padding的概念，因此需要對按鈕還原要明確的描述
比如上圖，前端同學在開發是就會將Padding設置為24px，所以整個按鈕長度便為24px*2+20px（文本寬度）=68px
而為什么說上面的設計規范實現不了，因為對于前端而言，Padding通常都是統一且固定的，只會根據按鈕文字長度進行相應的調整，比如我上面舉的錯誤栗子，其實在前端同學面前這類設計是不能夠被共用，而且對前端同學項目會變得越來越不能維護，所以按鈕設計應該更規劃
但是如果真的需要去實現兩個文字按鈕長度和四個字的一樣怎么辦，需要去設定按鈕的最小寬度
按鈕最小寬度的設定一般為4個字文字的長度，假設字體大小為16px，左右的Padding為24px
最小寬度為：88px，因此在按鈕的標注中，需要展示最小間距為88px，方便前端進行CSS開發
在我們的sketch中，按鈕邊框有三種，內邊框、居中邊框、外邊框，默認為居中，但是在前端的CSS代碼中沒有居中邊框，沒有居中邊框，沒有居中邊框（重要的事情說三遍），默認為內邊框，如果需要調整為外邊框，最好能夠標注
作者：CE青年 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
信息無障礙，是指任何人在任何情況下都能平等地、方便地、無障礙地獲取信息和利用信息。隨著互聯網覆蓋越來越廣，對于身體有局限的群體而言，更加迫切通過互聯網獲取信息，而這就需要互聯網產品進行信息無障礙的優化。在我國其受益人群至少包括：8500多萬殘障人士，2億多60歲以上的老年人，數量龐大。率先考慮信息無障礙能為產品增加優勢而帶來更多用戶。
如今智能手機掀起了一場無障礙輔助工具的革命，而站在這個關鍵點的互聯網設計師，也要開始行動起來，先從以下這幾個容易實現的事情開始著手進行無障礙的優化吧。
對視障用戶來說，是用聽取讀屏語音來了解你設計的界面信息的。讀屏軟件就像他們了解互聯網世界的眼睛，它的原理是直接讀出界面里的文字，如果icon按鈕未加無障礙標簽讀屏會讀為"無法發音"，那么視障者就無法獲取這些信息，自然也就無法使用你設計的功能。
解決的辦法是:
1.需要在產品代碼中添加無障礙標簽(Android :contentDescription ; iOS:accessibilityLabel在對應的開發者文檔里很容易找到，可以發給你合作的研發同學)。
2.裝飾性icon可隱藏標簽不讀，提升讀屏效率。不建議不做處理也不加標簽，那么用戶聽到的就是“無標簽”，這樣會讓用戶以為這里有什么重要信息讀不到而感到不安。
3.標簽語義簡短準確，盡可能使用動詞。
4.必要時需要走查焦點順序，確保不會被錯誤的焦點順序誤導頁面含義。
并且最好由設計師進行語義的標注，因為設計師才是對頁面里圖形應用最了解的人。避免出現“搜索”被寫成“放大鏡”、或者是“searchBtn_123”之類的情況。
顏色可以用來區分信息數據的類別和維度，也可以幫助傳達情緒等重要信息。然而，世界上有超過8%的男性和0.4%的女性都被色覺障礙的問題困擾。我們通?；\統的稱這類人群為“色盲”，他們是典型的識別顏色有問題的群體。
"色彩"的目標是"易于感知"，指的是互聯網產品的內容信息的色彩對任何人來說，都應該擁有足夠高的辨識度和舒適度，我從以下4個方向進行介紹。
1.更安全的配色
a.色盲人群：
設計師在進行設計配色時應時刻自測，避免明度相似的橙黃綠兩兩配色和明度相似的紅綠配色，因為這樣的配色勢必會造成色盲用戶的可讀性問題。并且，紅色在紅綠色盲眼中并不是一種明亮醒目的顏色。相反紅色對他們來說顯得非常深，而暗紅色則幾乎接近黑色。因此色盲人士很難分辨出文章內的深紅色的強調字，從而遺漏關鍵信息（設計時，可利用此插件模擬色盲眼中的顏色：Color Oracle） 。
b.文化差異：
因為色彩在不同國家文化中代表不同含義,所以對于國際用戶來說也是存在障礙的。在西方文化里，紅色通常用于表示消極趨勢，而綠色則表示積極趨勢，但在東方文化中卻正相反。
c.特殊群體：
臨床醫學研究表明對于部分自閉癥患者來說，高飽和高對比度的顏色，甚至只是黃色都會讓他們感到不舒服和不安，因此在自閉癥康復中心是不會出現過于對比刺激的顏色的。
另外，老年群體隨著年齡的增長，晶狀體變黃變渾濁，會選擇性的吸收藍光，從而導致老年人對藍色的鑒別能力下降明顯，如果你的主流用戶是老年人，請盡量避免將藍色運用到重要的按鍵中去。
2.更強的文本對比度
文本對比度與可讀性息息相關，它測量的文本顏色和背景色之間的明度差。WCAG AA對于文本對比度的規范是：4.5:1，若字號夠大（>18pt，或粗體>14pt）時，標準可降到3:1。如果滿足4.5:1這個標準會讓你的頁面視覺看起來不那么優雅，可以嘗試局部加強可視性的方法：
關于可讀性其他需要注意的點：盡量不要在圖片上疊加文字，除非你能保證圖片背景顏色單一且對比度足夠高。
Material Design設計規范建議，需要淡淡的遮罩確保上層文字的可讀性；并且不建議極高對比度的文本，因為這樣會使一部分視障者看到的字旋轉模糊。
3.更多樣的視覺變量
顏色是數據可視化中最常用的視覺變量之一。但是對于無法辨別顏色的用戶，如果顏色作為的唯一的提示信息，他們可能將無法理解你傳達的信息。那么有什么改善的方法呢?
a. 不讓顏色成為唯一的視覺變量：除顏色外，我們可以追加圖標、紋理或者文字來加以標注。
b.色盲模式：Trello作為一款工具產品，在標注信息時，提供色盲模式可打開和關閉，并用不同紋理加以區別，色盲友好模式是一個很好的范例，它可以有效幫助色盲，又不會妨礙非色盲用戶。
c.以明度飽和度為度量：雖然色盲人士對色相的辨識能力較弱，但卻對明度、飽和度非常敏感。我們可以使用明度或飽和度區分信息。看這個例子：傳統熱力圖習慣用暖色代表熱力高冷色代表熱力低，Google Analaytics的熱力圖采用深藍色顯示熱度高的時段、淺藍色顯示熱度低的時段，簡單有效。
控件可以是按鈕、鏈接、輸入框或任何帶有事件監聽器的HTML元素?？丶』虮舜颂拷赡軙o用戶帶來糟糕的體驗問題。
比如對于無法用指尖精確定位的用戶（有顫抖疾病的用戶），或因年齡而導致靈活性降低的老年用戶，都會難以點擊過小控件。
為了給用戶足夠的間距來準確選擇控件，Material Design建議至少48×48dp，iOS設計系統將目標熱區尺寸最小值定為44 x 44pt，而WCAG對WEB的規范則建議至少44×44px。一個控件可以在視覺上是24 x 24px，但是在所有邊上都會有一個額外的填充使它達到44×44px。并且太靠近的控件可能會因誤點擊而帶來挫敗感，所以同時還建議控件之間的空間足夠遠以減少誤觸。Microsoft給pc的建議是至少有8px的間距，而Material Design推薦的控件至少間隔8dp。我們可根據以上規范來審視自己設計的控件。
1.文字大?。?/strong>
有視覺障礙的用戶可能會把字號調得很大。你需要保證你的設計在大字號的情況下內容不會溢出或排版錯亂。做設計的時候，可以使用2倍以上的字體測試你的設計。
在互聯網早期，設計了字號在9-14px之間的網頁，如今已與20年前不同，瀏覽器已經可以在任何尺寸設備上使用，小到智能手表大到4K熒幕，我們不能再使用固定的字號來設計產品了。字號應該與設計本身一樣具有響應性。例如可以允許用戶自定義字號、行高或字間距等以達到舒適的閱讀水平。
2.文字樣式:
文字作為傳達信息的重要載體，對于許多用戶來說，裝飾字體或草書字體都是比較難閱讀的。且用過細的、過小的、斜體和全大寫文本，也會降低識別度。
有效的動畫可以給頁面帶來生命感，但如果濫用動效不僅會分散用戶注意力，嚴重的話對某些用戶來說來說可能是致命的（光敏性癲癇的臨床誘因之一就是閃光圖像的刺激）。
1997年的一天，日本電視臺正在播放《精靈寶可夢》第38集“電腦戰士3D龍”，但就在這天晚上發生了600多名兒童昏倒在家中集體送醫事件，轟動了動畫界，任天堂的股價也隨之大跌。原來，為了達到震撼效果，3D龍的背景運用了“藍-紅-藍”的快速閃爍來表現爆炸，這樣高頻率的閃爍刺激了孩子們脆弱的眼睛，導致他們集體患上了急性光敏癥。也因為這件事日本開始著手對動畫片的制作制定規范。Twitter在2019年為了保護對閃爍圖像敏感的人員安全，也采取了禁用APNG動圖格式的措施。
另外WCAG 2.3.3官方說明，一些用戶會因滾動頁面的動效（例如緩動和視差滾動）而觸發大腦前庭疾病從而產生頭暈的癥狀，所以iOS、Mac、Windows 10都具有關閉動效的功能。
為了避免給特殊人群造成困擾，設計師在開始做動效之前，應該看看以下四條是否滿足：
1.動效每秒閃動不超過3次，發生的閃光區域不超過超過25％否則，光敏癲癇患者會有發病的風險。
2.避免過于夸張的視差和運動效果，因為大腦前庭失調者會引發眩暈。
3.避免有多個元素通過不斷移動、閃爍而分散注意力，因為這可能會讓注意力缺陷者產生困擾 。
4.如果有上述情況，需提供一些控件或選項來暫停、隱藏或者更改任何動畫或效果的頻率。
作者：百度MEUX 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
作者：大秘密mimi 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
藍藍設計的小編 http://www.syprn.cn
