題圖來自Saurageresearch
企業對客戶旅程總體的認知與應用比例為25%，屬于初期水平。2C類企業、大型企業、金融行業對客戶旅程的認知和應用水平明顯高于其他類型的企業。大多數企業在最近兩年才開始嘗試客戶旅程方法，主要由研究、設計、客服部門在主導客戶旅程的應用，客戶旅程地圖的繪制頻率大部分是每年或半年繪制一次。
企業目前主要將客戶旅程應用于客戶需求分析、產品和服務的設計、以及客戶旅程測量與分析等領域，并在提升客戶滿意度、促進以客戶為中的企業文化，以及提升營銷和運營的轉化率方面效果最明顯。大部分企業對認為客戶旅程有積極的效果，極少給出負面評價?？蛻袈贸谭椒?/span>使用時間越長，客戶旅程地圖繪制頻次越高的企業獲得效果越明顯，并且2B企業比2C企業獲得效果更明顯。
雖然目前由市場部門（包括營銷、銷售和品牌部門）主導的比例較少，但由市場部門主導客戶旅程應用獲得效果明顯好于其他部門主導的情況，由客服部門主導的效果低于其他部門。這與MyCustomer在2018年在歐美的研究結論相反，這可能說明市場部門在客戶體驗領域的主導權在逐步上升。
對于未來一年的使用客戶旅程的意愿，雖然各類企業對客戶旅程方法的效果表示肯定，并且明確表示不會使用的比例很少，但相當比例的企業存在較大不確定性。存在的主要困難和挑戰包括專業知識、方法和技能的欠缺，以及專業工具和平臺的不足。未來客戶旅程方法要在整體應用水平上取得突破，這些方面是需要重點聚焦的領域。
02：
不同類型的企業，在客戶旅程的認知和應用程度上也表現出較大差異：2C企業的應用程度明顯高于2B類型的企業，總體認知和應用比例分別為30%和20%。大型企業也明顯高出中小型企業，分別為29%、22%和19%。客戶旅程是一個相對比較復雜的系統性方法，真正的應用需要人員、資金等各項資源的投入，大型企業更具備優勢。相比而言，小型企業的在。分行業來看，認知和應用程度最高是銀行/金融/保險行業（30%），一方面是由于這個行業的本身的客戶決策流程長、金額大、風險大，另外一方面也是由于這個行業的利潤較高，企業有相對較為充足的資源進行投入。
由客戶研究部門和團隊主導客戶旅程的繪制時目前的最常見的模式，其次是設計部門，以及客服、品質部門主導。但產品、戰略、營銷、銷售部門主導的情況也一定的比例，這也說明目前開展客戶旅程應用的企業，其目的存在多樣性。不同部門來主導，其方法和應用上也會存在差異。
在繪制客戶旅程的過程中，目前主要用的是客戶調查數據和客戶訪談數據，這也是客戶研究團隊最擅長和最容易采集的數據。其次最常用的數據來源是客戶行為和客戶反饋/投訴數據，總體上對外部數據應用多于內部數據，對小數據多于大數據。
在客戶旅程地圖繪制工具方面，使用最多的是PowerPoint，處于絕對領先的地位；其次是常用的繪圖和設計工具，例如Visio、Photoshop、Adobe Illustrator等；專用的客戶旅程地圖繪制工作使用比例非常低，最主要的客戶旅程地圖專用繪制工具UXpressia的使用比例也只有10%，其他的則更低，使用比例只有2%-4%。主要是目前客戶旅程地圖繪制并不是一項常見工作，所以通用型的文編編輯和繪圖工具會是常用選擇，而目前的客戶旅程地圖繪制工具多為英文版本，國內還沒有出現較好的客戶旅程地圖繪制工具，這也是客戶旅程地圖專用工具使用比例較低的重要原因。
不同情況下，客戶旅程的應用效果也不盡相同。調查數據顯示，使用客戶旅程方法時間越長，繪制客戶旅程地圖頻率越高，客戶旅程方法取得的效果越好。使用2年以上的企業和2年以下的企業表示有效的比例（包括“比較有效”和“非常有效”，下同）分別為83%和69%；每年繪制多次客戶旅程地圖的企業和多年繪制一次地圖的企業的表示有效的比例分別為81%和62%。
在將客戶旅程方法進行具體應用時，最常見是用于客戶需求分析、產品和服務設計、客戶旅程分析和測量。其次是在企業文化建設、工作管理和溝通方面的應用。在具體操作層面，例如客戶旅程編排、營銷和互動，目前也有一定比例的具體應用。隨著客戶旅程方法應用的進一步深入，直接到操作層面的應用將逐步提升。
客戶旅程在不同領域的應用對最終的效果有明顯的影響：表示客戶旅程應用效果一般的企業在各個具體應用領域的應用比例均低于獲得明顯效果的企業。效果一般的企業在客戶需求研究和分析、客戶旅程編排、市場營銷和推廣，以及品牌傳播與互動方面的應用差距最大（落后超過10%的比例）。從調查數據來看，雖然用于編排、營銷和品牌的總體比例不高，但確實影響最終應用效果的顯著因素。
通過以上在不同領域的應用，客戶旅程方法在各個方面的效果都有所體現，尤其是在提升客戶滿意度、強化以客戶為中心的企業文化、提升營銷和運營的轉化率方面最為明顯，分別由59%、54%和37%的企業表示在這三個方面得到了提升。
不同類型的企業未來使用客戶旅程方法的可能性也存在明顯差異。使用客戶旅程越久、使用頻率越高，獲得的效果越好的企業，繼續使用客戶旅程方法的傾向越高。2C企業比2B企業未來更愿意使用客戶旅程，雖然2B企業獲得效果更明顯，但2B企業使用客戶旅程的難度和成本更多到，導致2B企業的使用意愿要明顯低于2C企業。另外，相對于中型和小型企業，大型企業的使用意愿明顯更高，表示可能會使用的比例達到了61%，明顯高出中小型企業。
對于在客戶旅程應用過程中的挑戰，最大的困難不是預算不足，而是知識、方法、技能、工具和人員的欠缺和不足，尤其是專業知識和方法的掌握不夠，是最大的兩項困難。其次碰到的問題是企業高層，以及其他部門的支持不夠。
文章來源：UXOOLS
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編者按：這篇文章來自資深設計師 Taras Bakusevych ，他對于產品和體驗有著非常深入的理解，這篇文章深入梳理了如何制作用戶歷程圖才是合理和便捷的，是一篇相當給力的用戶歷程圖終極設計指南：
用戶歷程圖（Journey Mapping）可能看起來是一個復雜的東西，尤其是當你嘗試在小組討論的時候把這個東西說清楚，會發現相當不容易。這篇文章將會為你闡明這一強大工具的使用方法，并且提供一個簡單的模板，并且幫你創建擁有足夠洞察力的用戶歷程圖，讓你像真正專業的 UX 設計師一樣，創建便利、深入、有效的用戶歷程圖。
在數字產品當中，用戶歷程圖可能是用來呈現用戶如何達成目標的最佳、最常用的工具了。當我們故事以可視化的方式呈現出來，就可以沉浸在用戶的體驗當中。這也是為什么說用戶歷程的價值是巨大的。
理解用戶歷程圖，會迫使我們以更加結構化的方式來思考整個用戶體驗，去梳理和定義事件的順序、關鍵階段以及事件之間的過渡。
同時，用戶歷程圖還能建立起用戶和設計師之間的同理心，當你隨著用戶歷程圖推進的時候，能夠更加深入理解用戶的痛苦和無奈，從而幫設計師理解用戶的動機。
用戶歷程圖還能幫你真正定義痛點，這是至關重要的。每種產品都應該在某種程度上幫助用戶，讓用戶生活更加輕松，如果你對痛點有所了解，自然就可以改善體驗。
根據實際的使用場景，用戶歷程圖會有很多不同的呈現形式，里面通常會包括一些圖形化的元素將整個歷程或者流程呈現出來，而余下的元素則采用解釋性的文本來作為支撐。
絕大多數的模板會顯得過度裝飾，且過于復雜，在很多時候，它們會作為項目中的展示性成果展現在PPT當中，而不是作為一種有效的工具，來幫助團隊來洞察需求。
如果你上網搜索用戶歷程圖，你會發現一大堆各式各樣的圖，這些圖和實際的理解是脫節的。
用戶現狀歷程圖反映的是用戶當前的狀態，這反映的是用戶歷程在優化之前、當下的狀態。而用戶未來歷程圖則反映的是用戶歷程在優化過之后，未來理想的狀態是什么樣的。
這兩者在結構和目標上是不一樣的，主要差別在于用戶角色的定義上。有的時候，你的用戶確實是消費者，而在很多情況下，用戶又不一定是消費者，這就是差別所在。
用戶歷程圖側重于呈現客戶的前端體驗，而服務藍圖則重在呈現后端的構成，以及交付方式背后的業務邏輯以及同產品核心之間的關系。
你可以在 Megan Erin Miller 和 Erik Flowers 的這篇文章當中找到更多的信息。
從來就不存在什么完美的用戶歷程圖，不過你可以基于某個版本的用戶歷程圖來著手。而這里準備的這套模板是經過長期測試和實驗之后總結出來的一款，它非常容易上手，復雜度也控制得恰到好處，并且它包含你所關注的絕大多數的指標，甚至更多。下面，我將教你如何逐步完成這個用戶歷程圖。
你可以在這里下載 PDF 文檔
在研討會或者工作坊模式下，開始用戶歷程的研究和搭建，是一個不錯的練習方式。在這種情況下，即使的團隊有較多的人，也最好按照小組來進行（每個小組3-5人）。根據用戶歷程的復雜度和涉及的內容的不同，通常你應該可以在 1.5 小時候完成整個用戶歷程圖的搭建。至于你能用到的文具，僅僅 需要多種不同顏色的便簽紙，筆和紅點貼紙即可。在開始之前，你需要和各個小組先聲明和解釋整個過程，并且確保所有人對于這個過程的流程、原理和方法的認知保持一致。
在這里，我們需要定義地圖的內容，用戶的整個行為歷程，以及他們試圖要達成的目標，都有哪些。這很關鍵，不僅要確保所有的參與者都很清楚用戶場景，而且要借此構建出對于后續設計有幫助的內容輸出。
演員——這個歷程與誰有關？整個歷程圖應該只和一個角色有關，也就是要經歷整個歷程的用戶角色。
場景和目標——描述參與的用戶的行動的情況和狀態，從而增加上下文環境的清晰度。描述用戶的目標，期望以及動機都有什么。
當前/未來狀態——闡明用戶歷程所在的階段。
Ps：即使此刻你要做的是某個未來的產品，也最好不要跳過當前狀態，洞察當前的用戶和產品狀態、痛點、習慣，有助于你去驗證想法。
接下來，你需要定義整個用戶歷程的大的階段。先把各個階段定義好能夠最大程度節省你的時間和精力。最簡單的方法，是先定義第一個和最后一個階段，然后再來填補中間的各個階段，不要創建太多的階段，而是將整個用戶歷程切分成為有意義的部分。
按照用戶操作流程，來逐個執行梳理各個階段用戶的行為、狀態。千萬不要試圖梳理得過于詳盡和細致，盡量專注于關鍵因素，確定用戶需要哪些要素，才能推進到下一個階段。
在這個階段，要開始描述和用戶執行操作緊密關聯的的想法，涉及到的問題，還有感受。在很多其他的用戶歷程圖模板當中，這個部分通常是和整個用戶歷程圖是分開的，但是實際上，只有合并到一起才是合理的。
在這個部分，我不建議將時間花費在用戶情感曲線的繪制上，這樣做的實際目標更多是為了更加具有視覺吸引力，并不具備實際的價值。
在這個步驟當中，我們會高亮標注出用戶在各個階段會接觸到的物理和數字交互點，以及涉及到的工具、人和服務。我相信各個階段所覆蓋的這些觸點，能夠幫助我們更好地梳理和構建出整個心智模型，并且能夠幫助產品和服務，讓它們能夠更加切合用戶的需求，更好地集成到一起。
如果你已經和你的團隊創建了類似移情圖、價值主張畫布，那么你無需在這個事情上重新創建相同的內容，因為用戶歷程圖和以上內容中有大量重復的部分，你只需要遷移過來即可。隨后，你可以將進度合并到當前的用戶歷程圖當中。
這個步驟，需要將各個不同階段的內容填寫進來。
給每個參與者一些紅點貼紙，方便他們在整個用戶歷程圖上，對他們認為是痛點的部分進行標記并投票。痛點可能和情緒有關（比如害怕提供個人詳細信息），也可能與行為有關（比如手動輸入快遞地址等）。這就是為什么最好不要為痛點創建單獨的行列，因為可能涉及到的點非常多也非常分散。如果需要對痛點進行深入的描述，使用紅色便簽紙來進行詳細闡述。
到了最后的階段。在確定痛點之后，我們就可以開始思考如何緩解或者消除痛點。通常，我們需要通過改進整體策略，完善功能，集成服務，來解決痛點，當然，更多的時候，可能還需要我們擁抱一些更加狂放的構思，通過創新來搞定痛點。
在小而無關緊要的細節上進行爭論，很容易迷失方向。我經常會看到某些小組會停留在第一階段，陷入爭論，無法推進。從來都沒有任何一個用戶歷程圖是完美的，因為用戶總會有不同的習慣，并且需要產品設計師從不同的角度來解決問題。
因此，這需要你和你的團隊專注于 80%最關鍵的用例，而不是在所有可能的事情上做復雜的取舍，并且踟躕不前。
文章來源：優設 作者：Taras Bakusevych
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
鳳凰新聞 APP 在 2020 年上半年完成了 Dark Mode 適配，本文主要從規范、設計和實現的角度對整個項目的落地過程進行復盤。
1. 背景色
iOS 平臺在深色模式下的背景色展示是動態的，分為基礎、升起（例如，彈出框或半浮層）。如下圖中 iOS 系統的兩個界面，相同樣式的組件在基礎層與升起層顯示的是不同的兩組顏色。
從 iOS14 的色彩規范中可以發現隨著界面高度的升起，系統定義的三級背景色也同步進行了一級上升。
iOS 通過這種背景色統一升級的處理方式來達到多任務窗口疊加的視覺隔離效果，但相對的開發成本也較高。
再來看看 Android 平臺深色模式下不同層級間背景色的顯示規律。
Android 把頁面分為從“0dp”到“24dp”的 10 個不同高度的顯示層級，通過在同一背景色上疊加不同透明度的白色來區分顯示層級。相對于 iOS 的整體背景色升級，Android 的背景色分級邏輯則更加的簡單易用。
2. 文字色
iOS 的規范中定義了 4 個等級的文字色，一級文字色為黑白純色，二到四級文字色為色相偏藍的半透明色，通過降低同一顏色的不透明度數值來進行分級。
Android 的文字色分為 3 個等級，與 iOS 的共同點是都用了半透明顏色，也都采用了降低不透明度的方式來進行分級。不同點是 Android 文字色使用的黑色與白色，沒有添加色相。
使用帶有透明度的字色能夠避免相同字色與背景色相融的問題。以 Android 為例，三級文字色與 10 種背景色疊加后都具有較高的識別度。
iOS 則通過一套半透明字色可以適應基礎與升起兩種不同背景色的使用場景。
3. WCAG
iOS 人機界面準則和 Material design 在深色模式的建議中，都提到了文字信息需滿足 WCAG 無障礙閱讀的 AA 標準。
WCAG 全稱為 Web 內容無障礙指南，其中包含分為可感知性、可操作性、可理解性、可兼容性四項原則的相關建議，這些建議可使網站內容更容易訪問。WCAG 從高到低分別是 AAA、AA、A 三個等級。其中 AA 要求文字與背景對比度不小于 4.5:1。
感興趣的朋友可以通過下面鏈接進行深入了解： https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
也可以通過下面的色彩對比計算器進行對比度檢驗（下圖為翻譯后展示）https://www.msfw.com/Services/ContrastRatioCalculator
這里我拿 iOS 在深色模式下的主次兩級字色與基礎、升起背景色做了一下對比度檢驗，得到的結果均滿足 WCAG 無障礙閱讀的 AA 標準。這里再給大家推薦一個可以同時對多個顏色進行對比度檢驗的網站 https://hexnaw.com
4. 彩色
iOS 人機界面準則的彩色方案中給出了 9 種顏色。如下圖所示的深淺配色方案以 RGB 與 HSB 兩種屬性進行對比。
https://baike.baidu.com/item/HSB
圖中左側以 RGB 屬性展示的各項參數差值較大，沒有明顯的規律性；右側以 HSB 屬性展示的各項參數差值較小，其中靛青與紫色 HS 數值相同，僅有 B 的數值有所差異，但整體來看依然沒有一個完整的規律。
相較 iOS 系統彩色方案的單獨訂制，Android 系統的配色方案則是一整套漸變梯度由“50-900”的色彩庫。
在 Android 的色彩工具中還可以自定義配色方案，在色板中選取一個主題色，對應梯度值為 500，通過一套算法來自動獲取其他梯度的輔助色。
為了在深色主題中提供更大的靈活性和可用性，Android 官方建議在深色主題中使用較淺的色調（200-50），而不使用默認的主題顏色（飽和色調范圍為 900-500）。
總結來看兩大平臺在深色模式的適配上都各有所長，在整體的視覺體驗上 iOS 更加鮮亮突出，Android 則更加柔和舒適。
iOS 更加注重細節體驗，在整體的色彩規范中的很多顏色都是單獨定義的，這也印證了 iOS 13 發布后蘋果官方向用戶所表達的“屏幕上的每個元素都經過精心設計”這一理念。而 Android 的色彩規范中無論從背景色、文字色還是彩色都遵循著一個梯度規律。
深色模式改版設計的前期工作除了調研兩大平臺的指導規范外，我們還對已上線深色模式的競品 app 進行了調研，調研的主要目標是背景色、文字色的色相與亮度展示效果。（以下截圖時間為 2020 年 2 月份）
騰訊新聞，主背景無色相，次級背景無色相，一級文字無色相亮度較高，次級文字無色相亮度極低。文字與背景對比度高，主要信息比較突出。
網易新聞，主背景色相偏藍，次級背景色相偏藍，一級文字無色相亮度較高，次級文字無色相亮度極低。文字與背景對比度高，主要信息比較突出。
鳳凰新聞，主背景無色相，次級背景無色相，一級文字無色相亮度偏低，次級文字無色相亮度極低。文字與背景對比度低，主要信息不夠突出。
以 3 個 APP 首頁來對比，可以明顯的感覺到鳳凰新聞首頁的信息展示不夠突出，在日間場景下體驗極差。
深色模式并不是簡單的把整個界面反色了那么簡單，還是要考慮到所有用戶的需求。鳳凰新聞作為資訊類 app 用戶在夜間使用的場景也有一定的占比。深色模式的改版不僅要在日間滿足使用需求，還要保證夜間的視覺刺激相對柔和。所以，在設計配色方案時就不能使用對比度極高的純黑色背景與純白色文字，只能在各種灰色中搭配出最優方案。
經過多稿背景色與文字色的搭配嘗試后，最終確定了下圖中所框選的配色方案。這個方案整體背景色與二三四級文字色在色相上略微偏藍，相較于無色相背景更具有活力，在視覺體驗上信息層級的區分也更加明確。
在各種方案嘗試設計的過程中對顏色的色相、飽和度、亮度的選取都是隨機的，目的是在短時間內進行快速試錯來確定配色方向。
本次改版的目標中還需要重新構建色彩規范，所以還需要對這稿配色的選用進行細致的打磨，在色彩對應的 HSB 參數中進行細微的調整使整套配色方案有律可循。
最終方案在四級背景的色相與飽和度方面進行了統一，對亮度的遞增梯度統一為 5。對比初選方案在視覺上變動也很微弱，卻使色彩分級規律一目了然。那么依照此方式也可以對文字色與彩色也進行了一輪打磨。
對于文字色在深色模式優化調整的基礎上也對淺色模式下的文字色進行了調整，使深淺模式下兩套字色更具有規律性。
在文字色的使用上鳳凰新聞沒有參照兩大平臺規則使用帶透明度的顏色，主要原因是從自身實際出發，考慮到端內的文字色使用場景部分是用于半透明背景色上的，如果文字色與背景色均帶有透明度，疊加后的體驗會很差。
鳳凰新聞的功能圖標以線性為主，通常搭配文字一起使用，所以對圖標顏色的定義與文字色是保持一致的。
在彩色的規范梳理中淺色模式下保持不變，僅對深色模式下顏色的亮度進行了調整，使深淺色模式下顏色的亮度對比有了統一的規則。
當然我們還需要對新的背景色與一二級文字色進行檢驗，看看是否滿足 WCAG 無障礙閱讀的 AA 標準，也就是常規尺寸文本對比度高于 4.5 : 1。
下圖就是鳳凰新聞客戶端的新版色彩規范，在規范中除了上述的主要的通用顏色外也有部分是單獨定義的顏色，這些顏色多用于獨立或特定的場景下。
在完成色彩規范的重構后，重新輸出界面樣稿與舊版進行對比。
通過設計稿對比老版夜間模式與新版深色模式，能夠直觀的感受到新版在信息瀏覽上體驗更好。
1. 色值替換
在著手進行色值替換時，iOS 開發小哥反饋給我鳳凰新聞全端跟色值有關的代碼有 2000+條，如下圖中是日夜間對應的這條代碼樣式。
如此多的色值代碼多數是相同色值在不同場景中重復使用，但彼此卻又完全無關聯，還有很多是日積月累的舊色值未被刪除。如逐條替換費時費力效率極低，后期的維護也極其麻煩。
為了提高適配效率以及便于后期維護，使得之后的色值替換可以達到全局響應的目的。由設計師與開發人員共同建立一個色值對照表。
此表中設計命名主要基于色彩規范，用于設計師團隊間的溝通協作。工程命名由開發人員提供，主要用于設計師與開發人員的在設計走查中進行高效的溝通協作。
以鳳凰新聞 iOS 端為例，優化后的色值代碼庫如下圖，由原來的 2000 多條色值代碼變成了 30 多條色值代碼「宏」。
在 iOS 開發工具 Xcode 的可視化文件夾中看起來就更加直觀了。
之后的色值使用開發人員只需要調用代碼庫中相應的「宏」即可，后續版本迭代中如有對通用色值的調整只需修改相應的「宏」代碼即可完成全端替換。
以這種方式快速完成首輪色值替換后很多頁面的色值會出現錯誤，需要 UI 設計師持續的進行走查反饋，再由開發人員根據反饋進行修改校正。
以 iOS 端為例在深色模式色值走查過程中設計師分批次以 PDF 格式反饋給開發人員的，開發人員在修改反饋問題的同時設計師也在進行下一批問題的整理，這樣同步進行的效率會更高。
2. 切圖替換
切圖替換場景相對比較多，同樣延用色值走查的協作方式，設計師分批修改開發同步進行替換。開發小哥提供切圖的方式就是直接扔過來一個全端切圖包，需要設計師修改切圖顏色后以原命名重新發回去。當打開切圖包后頓感一陣頭大，切圖總數有近千張之多。
雖然切圖很多但其中有一部分是已經無用的老切圖，在替換的過程中也對端內切圖重新進行了一輪梳理，刪除了很多無用和重復的切圖，同時也對鳳凰新聞 app 的體積進行了瘦身。
在切圖的替換過程中比較費時的是對同一切圖存在多張的情況進行整理，梳理出該切圖的所有使用場景然后反饋給開發人員進行統一調用，之后如再次修改即可完成全局替換。
除 icon 外還需要對默認圖與缺省圖進行替換。
3. 特殊適配
鳳凰新聞客戶端需要進行特殊適配的場景主要是圖集與小視頻界面，這兩個界面僅有一套色值與 icon，界面中的元素需要單獨處理，在切換深色模式后避免出現錯誤。
4. 界面展示
Dark Mode 適配是一項費時費力的巨大工程，也是探索和優化用戶體驗的全新挑戰。本文主要描述了鳳凰新聞 APP 在 Dark Mode 適配中的一整套心路歷程，從規范、設計以及實現的角度對整個項目進行復盤總結。
文章來源：優設 作者：鳳凰網設計中心
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
關于按鈕的一些知識和我的一些觀點分享給大家。
按鈕是最常用的組件之一，有很多小伙伴并沒有很全面的認識這個組件，今天我把關于按鈕的一些知識和我的一些觀點分享給大家。
一 按鈕的作用
在使用按鈕之前，你要了解什么是按鈕，按鈕的作用是什么，什么時候該用按鈕。
1）什么是按鈕
按鈕用于觸發一個及時操作。
2）有什么作用
2.1 功能操作
比較常見的是：展開收起、加減、下拉等。這種情況下以功能性為主，按鈕的形式適當弱化，重點強調功能，突出主體信息。
2.2 指引用戶下一步操作
這個是最常見的使用場景，每個可交互頁面上都有這類按鈕的出現，用來指引用戶下一步該怎么做。比如：創建、保存...
2.3 培養用戶習慣
當用戶知悉某個按鈕能指向某個操作，或者獲取某類信息后，長此以往用戶就會形成使用習慣。如果某操作能夠為用戶持續帶來價值，那就可以在按鈕的位置讓它更醒目，持續培養用戶點擊習慣。
二 按鈕有哪些類型
· 主按鈕：用于主動行動點，一個操作區域內只有且只能有一個主按鈕；
· 默認按鈕：用戶內有主次之分的一組行動點；
· 虛線按鈕：常用于【添加】操作；
· 文本按鈕：用于次級的行動點；
· 鏈接按鈕：用于作為外鏈的行動點。
三 按鈕的狀態
1）交互狀態
1.1 Normal 正常狀態
此狀態為按鈕的正常顯示狀態，就是按鈕在也頁面中的常規狀態。
1.2 Hover 懸浮狀態
此狀態為按鈕的懸浮狀態，當鼠標滑過時候的狀態會給用戶一個交互反饋，因為它只是一個視覺上的反饋并無實際作用，所以在移動端就把此狀態去掉了。
此狀態的效果并沒有具體的規則，具體按產品風格來定。這里我給一個參考效果，但并不是唯一效果，如果不合適，可以酌情更改。
1.3 Click 點擊狀態
此狀態為按鈕的鼠標 / 手指按鈕狀態，操作完此狀態后，就會引發此按鈕的真實作用。
同時，此狀態的效果也沒有具體的規則，具體按產品風格來定。這里我給一個參考效果，但并不是唯一效果，如果不合適，可以酌情更改。
1.4 Disable 禁用狀態
此狀態為按鈕的不可操作狀態。
當頁面中有未完成的任務或頁面中有錯誤導致不可提交頁面時，按鈕會處于 Disable 狀態。這個狀態在產品中也是很常用的，而且這種情況下應該引導用戶去做其他操作，所以此按鈕在視覺上一定要弱于其他。所以要制定一個通用的展示方案。
一般方案有兩種：
· 無論按鈕本身顏色是什么，它的背景色均為純灰色，常用的色值有：#CCC、#999等，此種方案為常用方案；
· Disable 狀態為 Normal 狀態的 30% 透明度，如果你想讓按鈕都有顏色傾向的話，可以用這種方案。
2）狀態屬性
· 常規：常規樣式的按鈕，主操作按鈕；
· 危險按鈕：刪除/移動/修改權限等危險操作，一般需要二次確認；
· 幽靈按鈕：用于背景色比較復雜的地方，常用在首頁/產品頁等展示場景；
· 加載：用于異步操作等待反饋的時候，可以避免多次提交。
四 按鈕的使用方法 / 禁忌
1）一個操作區有且只有一個主按鈕
一個操作區有且只有一個主按鈕去引導用戶操作，如有有多個或沒有則會影響用戶的判斷。盡可能少的讓用戶去做選擇，產品的終極目標應該是“傻瓜式”產品，不要讓用戶有學習成本。
2）圓角值
根據產品風格，三種圓角值的設定：
2.1 圓角值為 0
這種適合用在比較嚴謹 / 企業級產品中，比如：阿里云；
2.2 小圓角值
這種是最常用的形式，在不失嚴謹的同時還有一些細節，如果可以的話，盡量選這種的；
2.3 超大圓角值
這種一般需要有獨特的產品風格才可使用。樣式不好把控全局效果，所以使用頻率較低，慎重使用。
較大圓角值，此類千萬不要用，不要問，問就是太丑。
3）精簡文字
按鈕里面的文字一定是精簡的，不要展示過多文字，更不要折行。
4）文字與按鈕比例要適中
文字與按鈕的比例要適中，文字不要太大或太小，都會影響視覺展示。
5）彌散陰影
如果你想要用彌散陰影，陰影的顏色盡量用帶按鈕本身顏色傾向的，這樣會讓按鈕更有呼吸感。需要注意的是：只有主按鈕才能用陰影，其他級別的不要用，不然識別度會變差，并且會讓按鈕的體驗變得很差。
6）主次操作按鈕樣式統一
主次操作按鈕樣式要統一，不要濫用樣式。
7）按鈕樣式與其他組件要有區別
實際使用中，按鈕樣式不要與其他組件樣式混用，避免讓用戶產生誤解，做一些不必要的操作和思考。
8）不同場景適配
現在暗黑模式也是常用的場景了，所以黑/白場景下都要考慮到識別度的問題。
9）主次按鈕的位置
主次按鈕左右的問題，也常常出現在設計討論會中，這次我直接放個結論吧，以后不要再為這件事吵架了。
在提交頁面、彈窗中，主按鈕在右；在其他常規頁面上，酌情考慮。
五 按鈕尺寸
按鈕尺寸具體用多大的，這里我總結了一個規范（僅代表個人意見）。
· 高 = 文字行高 + Xn，X=自然數，n=4
· 寬 = 文字寬度 + Xn，X=自然數，n=4
在其他地方也可以用類似的公式去做規范，比如卡片的間距，你可以設置 n 為基礎值，在此基礎上用 Xn 去選取合適的值。
注意：常用的字號為 12px、14px，盡量不要用太大的字號在按鈕上。
小結
按鈕只是眾多組件中的其中一個，也是最常用的組件之一。對于設計師來說，無論大小組件，我們都要精益求精的去思考，只有把每一個細節做好了，才能做好產品。日積月累的把每一個知識點掌握了，我們也就成長了。
文章來源：優設網 作者：友設青年
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
