這陣子又常被問到一個老生常談的話題：UI 需要升級成體驗設計師嗎？升級成什么樣才算呢？
作為一個專業向和業務導向大廠都呆過的老司機很認真負責的告訴各位鐵汁，升級是有必要的，但是度和偏重還是需要自己把握。
全面的 UX 知識體系如果能完整且合理的應用在你出色的視覺能力基礎上的話，無論是去哪個廠子都是巨大的加分，但前提一定還是扎實的 UI 基本功。
行業背景交代完了，接下來給各位介紹一下我吐血整理的從 UI 到 UX 的完整知識體系，一共 6 大模塊：
數據收集/分析定義/策略定制/體系建設/設計執行/設計驗證（給大家新增了一個很多人都會忽略的體系化模塊，在大廠面試中是很加分的）。
這里都以腦圖的方式給大家整理出來了，超級清晰，這下再也不用說我想學習 UX 的相關知識，但是無從下手了。不過因為具體的知識點對應的保姆級教學內容實在太多了，這里也不可能一一給大家都列舉，所以看到陌生的知識點建議大家可以去到各種設計、產品相關文章平臺去搜尋一下，一般都能通過自學解決掉很多漏洞。
數據收集模塊主要是我們在開啟項目前需要了解的內容，也是我們進行策略制定和分析時候的重要依據。它屬于我們進階模塊里最陌生的環節，實際工作中可能應用的并不是太多，但要求大家有一定了解，在有資源條件的時候合理利用，那么它就會是你作品集里加分的一部分。
分析定義通常是在我們做具體決策前，通過數據收集來的調研結果進行一定的分析判斷。這里也包含我們對完整的項目事件進行的完整分析，得出有利于我們做優化決策的結論。
通過前 2 個模塊的內容，可以輔助我們推到設計決策的落地。比如通過定義好的“產品目標”與“業務指標”來進行設計改版的設計目標與主題升級。
體系建設是很多鐵汁作品集里匱乏的一環，但恰恰也是體現設計師沉淀和大型項目經驗的一環。體系化的搭建除了體現設計師的經驗，也可以很好的從設計專業側角度為項目提升整體效率與品質。
設計執行部分的內容看似基礎，但其實細分支的知識點特別多，很多設計師工作了很多年也沒有完全牢固的掌握，這樣就會影響很多日常的工作輸出效率與質量。
完整的用戶體驗設計流程一定是有頭有尾的，也就是我們做設計需要得到一個價值肯定，可以通過一系列的方式獲取主觀與客觀的驗證。
介紹完 6 個模塊，還有一些話要叮囑大家：
知識體系給到大家也并不是要求大家面面俱到，精鉆每個方法論的細節，只是至少腦子里能有這個概念，實際工作項目有可以應用的地方你能想得起來，就不會“書到用時方恨少”啦。
文章來源：優設網 作者：柒言設語
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
一個簡易的小教程，一起Get起來~
設計中存在一些不可忽視的趨勢。盡管玻璃態在UI設計中不是新的事物，但是最近又被人們挖掘出來了。有些人甚至將這個趨勢稱為“玻璃態”。
下面讓我向你展示如何通過7個簡單的步驟教你如何創建玻璃態的UI效果。
1）畫一個形狀
首先創建一個基本形狀，一個具有以下尺寸的矩形：640×400，再加40pt的圓角。
2）應用漸變填充
現在該基本填充了。在本教程中，我們將使用漸變。兩種漸變顏色都將是純白色（#FFFFFF），但是它們的不透明度會有所不同。將第一個設置為40％，第二個設置為10％。
3）添加背景模糊
我們來模仿玻璃的是模糊感。首先將背景模糊值設置為20左右，來看看這個是表面如何變化的。當然，你也可以根據自己的效果來設置不同的模糊度。
4）添加邊框
一個優雅的邊框會為元素增添了光澤。當玻璃表面重疊時，它也有助于建立視覺層次。如果要在設計中創建定向光的幻覺，則可能需要對邊框使用漸變。我是這樣制作卡片的，所以看起來更有“質感”。
卡邊界對角漸變的設置：
邊框：3px
顏色1：#FFFFFF（不透明度50％）
顏色2：#FFFFFF（不透明度0％）
顏色3：＃FF48DB（不透明度0％）
顏色4：＃FF48DB（不透明度50％）
5）應用陰影
細微的陰影效果有助于增強視覺層次。由于陰影的存在，區分所有層將更加容易。
在我的示例中，我使用具有24的模糊值的深色，并且擴展減小為-1。這次，你將通過添加陰影樣式屬性以與玻璃表面一起成形來獲得最佳效果。
6）填寫內容
是時候添加一些內容了。填寫必要的徽標和文字。要創建壓印層的錯覺，請用白色填充內容，并將不透明度降低到50％。你也可以玩圖層混合-嘗試疊加以獲得有趣的結果。
7）添加質感
玻璃卡片已完成，但是，你可以進一步添加一些高級紋理！要添加優雅的噪點，我們添加帶有噪點的圖像。將不透明度降低到20％，并將填充的混合模式設置為“疊加”。看看現在看起來多么有質感。
來看一些其它的嘗試~
文章來源：UI中國 作者：Tzw_n
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
導讀
你的設計是否能被理解？為什么設計的價值總是不被人認可？
設計不僅僅只是帶來美感，好的設計能夠為產品、公司甚至整個社會創造巨大的價值。而在創造好的設計這個過程中，最重要、也是最容易被人忽視的，便是設計思維。
何為全局性設計思維？它能夠為設計師帶來哪些價值？本文將從設計的本質出發，結合設計的發展趨勢，帶你了解全局性設計思維的真正力量。
目錄
寫在前面
一個習慣性的序
一、我們為什么需要設計思維？
二、下一個時代在哪里？
三、互聯網“下半場”，從大勢中看變化
四、設計思維的轉變，差異與融合
五、探尋全新的思維方式
六、全局性設計思維概述
七、如何運用全局性設計思維？
八、以全局性設計思維，構建設計體系
九、文章預告
末
寫在前面
這篇文章的主要內容，來自我在19年底的一個沙龍分享。整個分享以設計思維的角度入手，講述了全局性設計思維的來源和重要性，以及我是如何在不同產品線上去運用這種設計思維的。
何為全局性設計思維？為什么要講這種思維方式？
這是我一直在探索并實踐的一種設計思維。從最開始的理論雛形，到各種項目的實踐，不斷進行修正和完善，最終形成了一套卓有成效的思維方式。通過這種思維方式，我逐步幫助產品解決了許多長期性的問題，并最終構建了各種不同類型的設計體系。最終，隨著品牌矩陣與產品體系的落地，形成了一個完整的網易智慧企業設計體系。
網易智慧企業設計體系
因為篇幅原因，本篇文章將重點從理論層面闡釋全局性設計思維的導論、價值及使用方式。而具體的實戰案例，我之后將會以另外幾篇單獨文章的形式進行展現，并詳細講解在設計過程中的一些細節與過程。希望能夠幫助大家更深入地去理解如何根據不同的場景正確地去使用這種思維方式。
未來可能會包含以下幾篇文章：
全局性設計思維 | 如何打造強大的品牌體系
FishDesign組件庫 | 從零到一構建企業級UI組件庫
全局性設計思維 | 如何構建事業部級大型設計體系
當然，目前的設計體系僅僅只是一個開始，未來還有很長的路要走。
希望本文能夠給為你帶來小小的啟發，讓設計思維幫助你更好地發揮設計的價值。如果你對某一方面特別感興趣，可以直接跳到這一章進行閱讀，無需浪費過多時間。如果你有任何疑問，也歡迎隨時與我交流。
?
一個習慣性的序
-
“喵嗚～” 我又出現了，那個愛寫序的裝逼作者。
這次把序放在了第二段，這樣子看上去就不那么不務正業了哈哈。當然，寫序更多的是為了記錄生活，希望每一篇文章不僅僅只是傳遞知識，更是一篇有溫度的文章。
經歷了風風雨雨的2019，又度過了魔幻版的春節，我終于又開始正式地寫文章了。但這次不同，我擁有了兩只可愛的小伙伴——汽水和芬達。汽水8月18出生，芬達8月20出生，現在都已經是肥肥壯壯的兩大只了。。
汽水總是在我碼字的時候，睡在我的鍵盤上，或者以各種姿勢吸引我的注意力。。 為啥拖了這么久才寫寫完文章，除了懶以外，汽水大概也要背點鍋，哈哈。
整個2019年中，經歷了很多事情，人生觀也隨之發生了些許變化。
從并肩作戰的同事的不斷離去，到逐漸需要考慮團隊的發展。從單打獨斗闖天下，到思考如何讓整個團隊更加優秀、如何建立完善的設計體系等等。
角色、心態、責任，以及如何坦然地面對自己。
活在當下，用心生活。這是我一直當作座右銘的語錄，也是我希望給自己的承諾?？偸窃噲D去嘗試這種狀態，但卻異常艱難。像我這樣的人，看上去總是“積極向上”，總是“規劃未來”，總是希望事事完美，強迫著每個細節的完善。但不知不覺中，人生好像開始進入了“自動駕駛”的模式，活在了過去的思索中，活在了未來的規劃中，唯獨對于當下異常麻木。
這并不是我想要的生活，我開始嘗試做出改變。
偶然間，通過一些書籍，我開始嘗試正念禪修。感受每個呼吸中空氣的流動、感受身體的每個部分、感受當下空間發生的每一件事情。雖然只是很淺顯的境界，但正念依然對我產生了巨大的影響。我開始重新地審視自己的人生，審視自己的生活狀態。
網易蝸牛圖書館：與快樂的小伙伴們
這種感覺，就像再次地呼吸了新鮮空氣一樣。
我們其實只存在于當下的時空中，過去和未來，并非真實存在的事物。回想一下，我們有多久沒有像小時候一樣，完完全全、毫無雜念地享受在當下的時光中了？
用心活在當下，平靜地接納一切發生的事物，這種感覺真是太美好了～
?
一、我們為什么需要設計思維？
-
對于設計師來說，什么能力更為重要？是設計這門“技術”本身，還是思考如何去設計的“思維”能力？
對于不同的設計師來說，一定會有不同的答案。
這兩種能力本身并不矛盾，他們相互影響，互相促進——就像“術”與“道”之間的關系。設計能力決定了設計作品的輸出質量，而設計思維則決定了你思考問題、解決問題的能力。
然而，在現實的大環境下，“術”的重視程度遠高于“道”，造成了很多設計師與日常業務的“分離感”。以至于，多數的設計師，無法將自己的設計能力有效地用于日常業務中；抱怨他人不理解設計，也因此錯失了許多機會。
重視設計美感，其實并沒有問題。視覺是最直接的表現方式，我們從最初開始喜歡這個行業，并最終成為設計師，大概都是因為如此。包括我個人，也是美感的追求者，常常為了幾像素的細節，調整無數稿。也常常沉浸于自己的作品無法自拔emmm…
但是，美感之后，設計還需要什么？
路易斯·沙利文曾講過：“形式追隨功能”。而功能存在的意義，則在于解決問題。視覺的形式、美感，很多時候只是包裹在外側的表層，而解決問題才是設計真正的核心。視覺的表現，一定要遵循解決問題的方式，向用戶傳遞恰當的信息，最終引導用戶以此來解決問題。
因此，我更希望更多的設計師，在追求美感的同時，能夠重拾設計思維本身，尋找設計最根本的價值。
我們其實可以站得更遠一些。學會去理解事物，學會用設計去解決問題。再以此為基礎，通過你的設計能力去塑造它、點亮它，讓它成為一個真正美好而又有價值的設計。
而設計的價值，將會成為你的價值。
?
二、下一個時代在哪里？
-
互聯網時代中的數字產品設計，需要什么樣的設計思維？或者說，當下我們需要什么樣的設計思維？
這個問題的答案，好像一直在變。
互聯網本身便是一個新的形態，1989年“萬維網”發明，1996年中國引入互聯網，到今年已經有大約24個年頭。我們經歷了不同的互聯網時期，而“設計”的概念也一直在變化中。
Internet 1.0 PC互聯網時代。在這個時代，我們將大量的信息虛擬化，并通過網絡進行信息傳遞。而我們的“設計師”們大多被稱為“美工”，我們的“設計思維”，便是將信息變得更好看。
Internet 2.0 移動互聯網時代，或者稱為消費互聯網時代。自從2007年喬布斯發布第一代iPhone之后，疊加4G、wifi等技術，手機成為日益重要的終端，世界逐漸進入了移動互聯網時代。伴隨著iPhone與其應用的出現，喬布斯讓所有人理解了“用戶體驗”的重要性。我們不再是“美工”，我們變成了“UI設計師”、“交互設計師”。而這個時代，我們的設計思維變成了“用戶體驗思維”。
那么，下一個時代在哪里？我們的設計思維又將如何轉變，才能適應下一個時代？
?
三、互聯網下半場，從大勢中看變化
-
1.紅利消失、增長觸頂，互聯網下半場到來
最近幾年，我們已經能夠明顯地感知到——互聯網的“寒冬”真的來了。隨之而來的，便是互聯網的發展方向似乎也正在發生變化。于是大約從2017年開始，互聯網圈內逐漸出現一個新的名詞——互聯網“下半場”。人們普遍認為，中國的互聯網將會由消費互聯網時代進入下一個時代，即互聯網下半場。
我并不完全認同互聯網”下半場“的稱呼?；ヂ摼W本身是一個年輕的行業，中國互聯網“下半場”，其實更像是互聯網發展方向轉變的標志。
因此，我們認為的下一個時代的方向，也許將會是Internet 3.0——即產業互聯網時代。
互聯網會什么必須要進入下一個時代？
對于互聯網企業來說，一方面在成本端，隨著人口紅利消褪，勞動力價格上升，企業的成本將逐漸升高，倒逼管理者使用系統和工具來提率；另一方面，在收入端，野蠻增長的時代結束，增量經濟轉向存量經濟，紅利經濟轉向效率經濟。
在“成本”與“效率”的雙重壓力下，再加上整個市場經濟的下行周期，整體經濟出現下滑，而一些依靠融資的互聯網公司將難以為繼。因此企業不得不尋找方式來提升效率，降低成本——而這正是企業級軟件（ToB產品）最擅長的地方。
因此，在互聯網寒冬之下，ToB市場便理所應當地開始被重視。
讓我們縱觀整個中國市場的發展，互聯網的興趣雖然促進了消費領域的蓬勃發展，但產業領域的發展則因此受到了巨大制約。中國率先從消費端、從第三產業開始數字化，然而在第一、二產業的數字化進程似乎并不是很快。一個重要的原因是，人口紅利促使了消費互聯網的快速發展，而這種紅利讓人們忽視了產業互聯網的重要性。
在寒冬之下，我們終于發現，消費互聯網蓬勃的基石，正是底層堅實的產業互聯網。產業互聯網如果不能得到有效的發展，則整個市場經濟將無法更進一步的發展。
因此，產業互聯網時代的到來，是中國互聯網發展的需要，也將是大勢所趨。
2.ToB市場將迎來機遇
產業互聯網的發展，需要依托B端領域的發展，并逐步融入并帶動整個產業進入互聯網時代。那么，B端產品在中國目前處于一個什么階段呢？
對于整個中國的ToB行業發展現狀，大多數的人并沒有一個清晰的概念。盤點中美上市的科技公司會發現，美國toC領域與toB領域市值之比是6:4，但在中國這個數字是20:1。
雖然互聯網的整體環境不同，但中國ToB行業的發展，顯然是落后太多了。于是乎，2018年開始，BAT大舉布局，PE、VC加速進場——中國B端產品已經逐漸進入必須發展的時候了。
中國市場已經坐擁全球最發達的發達的消費互聯網體系，而產業互聯網的發展則卻嚴重滯后。
同時，對比B端中云計算領域的IaaS、PaaS、SaaS三層架構，全球市場中SaaS占據了52.5%的份額，在中國卻是IaaS分走了最大的蛋糕，占比達61.2%。中國市場VC的投資總額已經與美國相當，在SaaS領域美國企業獲得了全球70.1%的融資，而中國只有11.7%。
因此，在互聯網下半場，相對于ToC行業的觸頂，ToB行業將會迎來歷史級的發展機遇，隨之而來的將會是產業互聯網時代的逐漸到來。而在整個B端產品的類目中，SaaS產品作為企業級軟件中最集成的產品，也將隨著這股浪潮迎來爆發式的增長。
什么是SaaS產品？很多同學并沒有接觸過B端行業，平時用到的也都是C端產品，所以對B端產品的了解比較少。在B端行業最熱門的云計算領域中，目前普遍會分為三層架構。SaaS（Software as a Service–軟件即服務）；PaaS（Platform as a Service–平臺即服務） ；IaaS（Infrastructure as a Service–基礎架構即服務）。
附：云計算領域，三種不同的架構與對應的服務。
PaaS基于IaaS實現，SaaS的服務層次又在PaaS之上，三者分別面對不同的需求。越往上層，產品的集成度越高，提供的服務也就越豐富，而用戶所需要的自行解決的東西就越少。而最頂層的SaaS產品，便是用戶可以直接購買并使用的云端產品。
我們為什么要了解這些趨勢？
因為一個新的時代，對應一場變革，也將成為一次新的機會。不管是SaaS產品還是其他B端產品，都將在新的時代中逐漸得到重視。而C端產品的發展策略，也將迎來新的變化。對于許多設計師來說，這將會是一個新的機遇。
順勢而為，方能乘勢而上。
?
四、設計思維的轉變，差異與融合
-
那么，在逐漸到來的產業互聯網時代，設計師需要注意哪些東西？設計思維又將進行如何轉變？
產業互聯網時代，意味著B端產品將得到重視，并與C端產品逐漸趨于平衡。因此，了解設計思維的變化，我們首先要從B端與C端產品之間，在產品設計與產品策略之間的差異性說起。
1.服務對象的差異性
從服務對象來看，C端產品的服務對象是人，產品的目標是針對人們生活方式進行的變革、升級。而B端產品的服務對象則大多是企業，目標是幫助企業進行商業效率的提升，從而產生價值。
服務對象的差異性，決定了產品在發展策略也將存在著較大的差異性。
2.產品“打法”上的差異性
從宏觀的打法上看，消費互聯網時代會更求“快”，而產品互聯網時代則會更偏“穩”。
C端產品的服務對象是人，而人的需求在個體差異性上相對變化較小，這就決定了C端產品通常都擁有廣闊的用戶市場。
因此，消費互聯網時代就像是資本在遼闊平原的角逐，長驅直入。講究快速占領市場，不斷地試錯、不斷地調整。從團購到直播，從打車到短視頻領域的興起，再到最后的單車大戰落幕。消費互聯網時代的每一次風口，都伴隨著各種“游擊戰”式的競爭。入場速度、快速調整能力、資本深度，都直接影響了最后的結果，而最終的結果也往往是勝者為王，敗者將快速地被市場淘汰。
B端產品的服務對象是企業，而企業間的需求差異性則非常巨大，這就決定了B端產品通常需要較強的縱深能力。相對應的，其用戶群里在總量上就比較小、但也相對穩固。
因此，產業互聯網就像在崎嶇叢林的蹣跚前行，漸次演進，如同一場曠日持久的拉鋸戰。一方面，產業互聯網的鏈條非常長，需要長期的深耕、積累才能逐漸站穩腳跟。而這也導致了產品的壁壘足夠深厚，同類產品在短期內無法快速跟進。另一方面，企業間的差距需求的差異性非常大，因此產業互聯網存在非常多的細分市場，不同的產品各自在不同的賽道中深耕。而其最終的結果往往是百花齊放，各自盛開。
3.整體行業的協同發展
雖然整個市場都不斷地強調——ToC增長觸頂，ToB是一篇藍海。但這并非是“取而代之”，而是逐漸走向整體的“協調發展”。中國ToB的發展的一個重要根基，其實是“中國擁有世界上最成熟的消費互聯網體系”這一巨大的優勢。
因此，ToC在很長的時間內，仍然會是互聯網的主力，而ToC市場的轉型，也將有賴于ToB產品所提供的服務。
而隨著中國將“互聯網+”政策上升為國家戰略，更是明確了以互聯網帶動傳統產業的發展方向。因此，互聯網的下半場，即產業互聯網時代的最終形態，將是互聯網與傳統行業的“融合式發展“。
ToB產品將會成為帶動互聯網下一輪發展的核心驅動力。一方面幫助ToC領域完成轉型，進入更健康、更穩健的發展階段；另一方向，ToB領域賦能傳統產業與互聯網相融合，并最終完成產業升級。
4.產品形態的融合與趨同
整體產業的融合趨同，意味產品的特性也將互相融合。一個很重要的現象是：C端產品逐漸變得不那么C端了，而B端產品也越來越變得得不像B端了。
比如C端產品的主流賽道中，隨著頭部產品的賽道日漸趨于穩定，其產品體量也因為業務擴展而不斷增加。同時，因為產品體系的逐漸形成，為了服務更多的C端用戶，會有越來越多的B類用戶進入平臺，而為了滿足B類商家的需要，產品的B端屬性變得越來越強了。
而隨著B端產品的不斷受到重視，原先不被重視的產品UI、用戶體驗也逐漸在B端產品中得到加強。B端用戶雖然服務于B端，但使用者終究是人。而隨著競爭的不斷加劇，原來的“重功能、輕體驗”思路逐漸式微。我們逐漸發現，許多B端產品長的越來越像C端產品了，甚至在UI和體驗層面做的與C端產品不相上下。
因此，隨著產品屬性的融合趨同，意味設計思維勢必會與消費者互聯網時代存在差異。而我們的設計思維將不僅僅局限在誕生于消費互聯網時代的“用戶體驗思維”。我們需要更新的、更廣闊的設計思維，以滿足下一個時代的產品發展需要。
那么，新的思維是什么？它將從何而來？
?
五、探尋全新的思維方式
-
從整個市場的協同發展，到產品形態的融合趨同。那么，我們的設計思維需要如何進行相應的變化？是同樣進行“融合趨同”，還是另辟蹊徑，尋求新的視角？
1.關鍵詞提取
首先，不管設計思維如何變化，它一定需要同時滿足兩種產品設計思維的特性。通過前文的分析，我們可以在產品設計特性的維度，提取各自的關鍵詞進行分析：
產品體驗：誕生于消費互聯網時代的用戶體驗思維，在產業互聯網時代依然是產品設計中最重要的部分。無論是C端還是B端產品，用戶體驗必然是產品的核心競爭力，只有足夠好用、好看，產品才能獲得更多用戶，最終獲得商業上的成功。
靈活性：在消費互聯網時代，在激烈的競爭中，C端產品的靈活性的打法對于產品的突圍至關重要。而未來的B端產品競爭將會加劇，這就需要B端產品也逐漸需要較強的靈活性。
成長性：產品的發展必將伴隨著不斷的變化，特別是具有一定體量之后，產品設計的成長性將至關重要。因此，產品的設計是否能夠預見未來發展，滿足不斷變化的產品形態，伴隨著產品不斷地成長，也將成為產品是否能夠持續獲得成功的關鍵因素。
產品效率：因為產品服務對象的關系，B端產品一直是產品效率的代名詞。而在人口紅利消失與經濟下行的壓力下，產品效率將成為所有企業關注的重要因素之一。產品的效率不僅影響著企業的成本，也是產品競爭力的重要體現。
這四個關鍵詞，將會是我們在未來所需要關注的四個重點關鍵詞。越是往左，則“C”屬性越強，因為它更多地從用戶的角度出發，更關注用戶體驗。而越是往右，則“B”屬性越強，因為它更多地從企業的角度出發，更關注企業的長期發展。
2.跳出單一層面，尋求新視角
在四個關鍵詞中，我們會發現，特性越是靠右，其所需要的整體性就越強。要滿足靈活性，就需要用戶體驗與產品策略相關聯。要滿足成長性，則要進一步結合底層的開發能力。而產品效率的提升，則需要產品的設計與不同層面都有著緊密的耦合。
在互聯網設計發展的過程中，我們從單點只關注視覺表層的“美工時代”，逐漸發展為關注線性的“用戶體驗思維”。在對于產品用戶體驗層面，確實有著長足的發展。
但是，單一層面的用戶體驗思維，在逐漸成熟的互聯網時代中，逐漸顯示出了一定的局限性。我們的價值局限于單一的體驗層面，我們似乎無法對產品形成更大的影響力，也難以為產品帶來體驗之外的更多價值。
因此，設計思維想要滿足新時代的需求，就需要同時滿足前文提到的四個關鍵詞。這就要求我們需要跳出單一層面，以全局的維度去思考產品的設計。
因此，全局性將成為未來的關鍵，我暫且將這種思維方式稱為——全局性設計思維。
?
六、全局性設計思維概述
-
全局性設計思維，即在設計過程中，始終能以更高的維度去審視全局，思考當下的設計。
何以全局，如何跳出單一層面？這種思維方式的前提，是你要首先了解整個產品（亦或是物體、組織等）的運行方式，清楚的知道整個產品需要達到的目標，從而準確、合理地對針對目前的局部做出設計，并最終構成整個完整的形態。
而“全局”的前提，是你擁有更高的眼界。你的眼界越高，你對產品、市場、甚至整個社會的洞察就越全面，你就能夠解決越大的問題，你能夠實現的價值就越高。眼界是基礎，解決更大的問題是目標，而全局性設計思維則是實現這個目標的方式與過程。
全局性設計思維，可以幫助我們跳出產品的單一層面，去思考從產品層、到體驗層、再到開發層這一完成的整體。讓設計滿足體驗層的同時，滿足產品層面的目標，同時讓產品的設計與開發高度耦合，將整個產品串聯成一個完成的整體。
好了，講了這么多，我們具體應該如何去運用全局性設計思維呢？
?
七、全局性設計思維的運用方式
-
全局性設計思維，的應用方式非常廣泛。它并不是一個固定的方程式，而是一個更高層面的指導性設計思維，能夠通過不同的形式，來幫助你解決問題。
1.全局觀——在生活思考更多可能
在嘗試這種思維之初，我們可以通過一些小的實踐，去鍛煉這種思維能力。
在日常的生活、工作中，其實我們有大量的事物可以練習和運用這種思維方式。比如你在裝修一個大房子，需要去選擇房子里的家具。當你在購買家具時，常規的思維方式是：這個家具在某個房間時應該是怎樣搭配的，所以我要購買什么樣形狀、顏色的家具，來滿足這個房間的需要。
但是，用這么思維方式來購買家具，將為對家具的靈活性與長期價值造成一定影響。從居住環境的長遠來看，也許這個家具有可能會因為某些原因，需要放到另一個房間，而它的形狀、尺寸、配色卻無法滿足其他房間的需要。最終，我們只能重新購買，或者接受一個風格、尺寸上并不搭調的房間出現。
因此，當我們在購買家具時，我們是否可以利用全局性設計思維，從整體空間的角度出發（而非單個房間），去思考如何讓家具滿足更多空間需求。長此以往，我們不僅可以打造一個風格統一的大空間，同時也能增加每個家具的利用率，在無形中也增加了這個家具本身的價值。
之所以舉家具這個例子，是因為這個原理與產品設計的原理非常類似。你可以將這個房子看成是整個產品，而家具則是不同的組件。通過不同的家具（組件），構成了我們的不同功能模塊（房間/功能區），而所有的功能模塊則構成了整個產品（房子）。
房子（產品體量）越大，房間/功能區（功能模塊）就越多，家具（組件）的多樣性、復雜性就越高，我們就越是需要從全局的角度去思考裝修的統一性（風格體系化）和家具的通用性（樣式組件化）。只有這樣，我們才能更好地去打造一個風格統一、體驗一致，同時又具備足夠自由調整空間的“大房子”。
2.全鏈路——從全流程中重新思考設計
當你仔細地去理解許多非常著名的設計作品時。你會發現，幾乎所有優秀的、巧妙的設計，往往在設計中都體現了全局性的設計思維。它不僅僅解決著當前的問題，同時也能夠解決更大的問題，發揮巨大的價值。
比如著名的坂茂衛生紙的設計，看似普通，只是將衛生紙的軸心從圓形改成了方形，但它卻成為了舉世聞名的、公認的好的設計。為什么呢？
我們先了解一下這個設計為什么好。
首先，傳統的圓形紙卷拉出來的紙會比你實際需要的更多。而方形紙卷則由于阻力的作用，讓你用得更少，從而起到了解決資源的作用。其次，在運輸過程中，圓形的紙卷之間會產生很大的空隙，而方形紙卷則能夠緊緊靠在一起，提升空間利用率，從而起到降低運輸成本的作用。
這簡單的設計，居然發揮了如此大的作用。
那么，為什么我們在設計時就沒有考慮到這些問題呢？因為我們從最開始，就沒有從“紙”的整個全流程來去思考問題。
讓我們“站的更遠一些”，紙這個商品，并非只是我們見到的在商店售賣的那一刻。它從工廠中制造完成，通過運輸送到每個超市中，當我們購買以后，它又會在很長一段時間內，出現在衛生間，陪伴你使用的每一刻。我們可以將整個流程分為3個場景，而每個不同的場景，又將會對紙本身有著不同的影響。
運輸場景——衛生紙的運輸成本——衛生紙的價格
售賣場景——衛生紙的造型、包裝——影響用戶購買
使用場景——衛生紙的使用過程——影響用戶的使用體驗
當我們能夠考慮到衛生紙的運輸過程時，我們就可以通過設計去降低運輸成本；而當我們可以考慮到用戶的使用場景時，我們就可以通過設計，去提升阻力，降低使用量，間接地去提升用戶的使用體驗。而當我們通過全局性設計思維，可以同時解決這三個問題時，我們的設計就是好的設計，就擁有了更高的價值。
發現了嗎，為什么你沒有想到相同的設計方案？設計能力并不是關鍵，設計思維才是指引你做出好的設計的前提。當你能按上述的方式，去思考整個流程、不同的場景，我相信大多數的人都能夠設計出坂茂的設計方案，甚至比這個方案更好的解決方式。
?
八、以全局性設計思維，構建設計體系
-
通過前面的兩個案例，相信大家已經了解了全局觀、全鏈路兩種應用方式。
那么，我們最最最關心的問題——如何在業務中去使用這種思維呢？
在產品設計中，全局性設計思維也有著非常多樣化的使用方式和場景，在之后的文章中我也會講到很多應用方式。但是，在所有的方式中，我認為最為有效的，便是以全局性設計思維，幫助產品去構建一個完整的設計體系。
1.設計體系概述
什么是設計體系？談及設計體系，大多數設計師會認為，設計體系就是設計規范。“不就是找個名次包裝一下規范嘛？”
我們為什么需要設計體系？它與設計規范有何不同呢？
設計規范是設計師最為熟悉的一種規范文檔。在產品設計時，優秀的設計師通常都會建立設計規范。然而在實際的項目中，設計規范往往無法難以有效實施。比如在開發眼中，規范并不符合開發規則，過于碎片化。而產品經理通常又不會去了解設計規范，因此在構建產品框架時也常常隨意發揮。
很多項目做到最后，設計規范僅存在于紙面的意義，并隨著項目的發展逐漸混亂。為什么會這樣？
因為不同職能間的思考方式存在差別，設計規范對于其他職能來說經常難以理解與運用，無法與其他職能形成有效聯動。
設計規范僅僅是基于視覺層面的規范，它是一個“平面”。而設計體系則是貫穿于產品的每個層面的、與產品深度結合的完整體系，它是“立體”的“有機生命體”。
設計體系的核心在于“體”，它是貫穿于整個產品的完整體系。設計體系由設計師創造，并深度融合于產品每個部分。它能夠讓產品更緊密、更統一、更有序，伴隨著產品的生長，與產品共同進化，并最終推動產品的發展。
創造并推動這一體系，則要求設計師需要更全面的能力。只有充分地去理解并參與產品的每個部分的設計，才能讓設計真正延伸至產品的每個部分。
而創造這一切的前提，便是全局性設計思維。
2.設計體系的構建法則
羅馬不是一天建成的，設計體系也是如此。設計體系的建立是一個漫長的過程（與產品體量相關），需要在前期投入更多的精力。但若是你的方法得當，就會在項目中越來越輕松，并以此形成良性循環，而你也會越來越有成就感。
如何正確地去構建設計體系呢？我在這里總結了幾個要點：
1）樹立觀念
首先，樹立長期的體系化意識是必要前提。在任何項目中都要時刻保持體系化思維，著眼于整個項目，去尋找體系化的推動時機。當你在潛意識中擁有這種思維之后，你會自然而然的將其植入到設計中。
2）以解決問題為導向
體系化并非憑空建立，而是建立在解決問題的基礎之上。設計體系的本質，就是由無數個標準化的解決方案，最終構成的一個完整的體系。因此，我們要以解決問題為導向，以全局性思維去思考問題的本質，最終建立適用于全局設計體系。
3）以小為始，重視質量
腳踏實地，從小處入手，去發現產品中最基礎的一些問題。表面上看這些問題，對項目影響不大，但他們數量龐大，加在一起便會嚴重影響整個產品的效率。因此，我們要首先建立高品質的基礎體系，再以此為基礎構建更大的體系。
不要一開始就設法建立一個巨大的體系，那樣只會是一盤散沙，因為它的結構是無序、混亂、不健康的。而這也是大多設計規范缺乏有效性和可實施性的根源。
梅拉妮·米歇爾的《復雜》一書中講到，任何復雜系統，都是由無數個體通過簡單的算法所構成的。在算法領域也是同樣的原理，一個優秀而強大的代碼，必然是由無數個小型模塊，通過簡單的算法耦合形成巨大的代碼矩陣。基礎算法越強大、代碼結構越“健康”，可擴展性和靈活性就越強，其能力就越強大。
4）從規范入手，由面到體
從本質上來說，設計體系是由“多個個層面的規范”組合而成的。因此，由設計師推動的體系化建設，往往最初都是從設計規范這一“單層規范”開始。但是，設計體系的建設需要將單層的規范，通過不同的方式，轉化為不同層面的規范，最終由面到體，形成體系化。
5）換位思考，尋求跨職能合作
設計體系的建立與維護，通常需要多職能的通力協作。因此，我們需要經常換位思考，在完成設計的工作，幫助其他職能完成目標。只有這樣，才能得到更多的信任，并以此為基礎推動更多體系化的建設。
比如我在設計一個功能模塊的頁面時，首先會與不同模塊產品經理進行交流，了解不同的業務需求，并從產品層面就開始尋求統一性與通用性。這樣的話，當其他模塊需要同一個功能時，前端便可以直接復用，同時后端的數據也可以進行互通。而在開發端，我也會詳細了解不同端的開發實現原理，務求設計規范與開發規則在理解上的一致性。這一既方便了開發理解規范，同時也從根本上提升了開還原的準確性。
長此以往，整個團隊就能夠建立良好的溝通和互信關系。有了這種默契，設計體系的推動就容易多了。
6）保持優化，不斷成長
設計體系的另一個重要價值在于，它是可以伴隨產品不斷成長的。所有產品都是在發展中不斷變化的，過分僵硬的規則，將會對產品發展起到反作用。
在業務發展中，產品一定會不斷地加入新的功能模塊，并對原有頁面作出相應的調整。因此，設計體系需要時刻與產品策略保持一致，及時與上下游職能溝通，不斷地針對產品發展進行優化，以保證設計體系能夠符合產品的發展需要。
7）使用正確的推動方式
體系化最終能否成功實施，推動的方式至關重要。
在日常的項目中，大多數的業務方對設計體系了解甚少，也難以體會其中的價值。因此，他們通常會認為這些東西毫無必要，多數情況也不太愿意配合體系的推進。如果強行推進，反而會引起不必要的阻力，招致反感。那么，我們應該如何正確的去推進設計體系建設呢？
1.為他人帶來價值：首先，尋找雙方共同的利益點是首要任務。也許是可以讓其他職能的工作更，也許能夠促使其達成KPI，再不直接，那也一定能夠為整個產品帶來價值（不然你也沒必要推了。。）?？傊?，設計體系一定要能夠為他人帶來價值，這樣才能順利推進。否則人家憑什么要協助你推進，因為你美麗可愛嗎？你也可能比較可愛，但總歸是不能一直這么來吧。。。
2.在解決問題后提出方案：不要一開始就啪一下拋出一個“宏大的理想”，大部分人會覺得你不切實際。你只需要通過這個體系，幫助業務方先解決一個問題，然后再提出你解決方式的來源——一個嚴謹的、可驗證的、長遠價值的體系化解決方案。
3.尋找合適的推動時間：最后，對于設計體系來說，尋找到正確、恰當的推進時機至關重要。比如當你在平時突然想要提出，對現有品牌進行升級時，大多數業務方都會認為你是沒事找事。而如果情況是在新的一年中，產品進行了概念的升級，這時候你將概念以及未來的品牌規劃融入在你的方案中，再去推進品牌升級，就會容易很多了。
?
九、文章預告
-
本文旨在引導大家更好地理解和學習這種思維方式，想要用好全局性設計思維，光靠講是遠遠不夠的。最重要的是能將這種思維帶入到產品中，為業務帶來更大的價值。
因此，在后續的幾篇文章中，我將通過不同類型案例，為大家深入講解全局性的具體實踐案例。
全局性設計思維 | 如何打造強大的品牌體系
為什么要建立品牌體系？品牌體系有哪些價值？設計師應該如何推動品牌體系的建立？
本文將帶你了解網易智慧企業品牌體系的建設與推動全過程，聊一聊品牌體系建設的那些事兒～
FishDesign組件庫 | 從零到一構建企業級UI組件庫
我們為什么要建立組件庫？在產品的什么階段需要組件庫？如何抽象業務組件？組件庫設計過程中有哪些重要的細節需要注意？
本文帶你深入了解，網易Web端組件庫——FishDesign組件庫從零到一的完整全過程。
全局性設計思維 | 如何構建事業部級大型設計體系
設計體系有什么價值？如何基于不同的業務建立設計體系？設計師如何推動體系化建設？在體系化過程中有哪些需要注意的地方？
我將會在這篇文章中，為大家介紹網易智慧企業設計體系構建全過程
1. 樣式組件化+規范體系化，形成產品設計體系，整體重構產品線。
2. 結合品牌體系，推動事業部更多產品加入體系，形成智慧企業Web端產品設計體系
3. 推動更多產品/業務融入體系中，讓智慧企業設計體系不斷成長，賦能業務發展
文章來源：tob.design 作者：tob官方小編
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
交互設計之父的阿蘭·庫珀，最為人熟知的就是這句話：“除非有更好的選擇，否則就遵從標準”。
a. 費茨定律，它是在1954 年 ，由保羅.菲茨心理學家 Paul Fitts 首先提出，當時用來預測從任意一點到目標中心位置所需時間的數學模型，在人機交互和設計領域的影響力最為廣泛和深遠。
b. 定義：從一個起始位置移動到一個最終目標所需的時間由兩個參數來決定，到目標的距離和目標的大小
（上圖中的 D與W），用數學公式表達為時間 T = a + b log2(D/W+1)。
c. 費茨定律，在產品設計中的價值是提高產品的可用性和易用性。例如：界面設計中，按鈕等可點擊對象要合理的設置大小尺寸才能容易操作，所以在移動應用中，圖標按鈕會增加點擊熱區范圍，以便用戶輕松點擊按鈕，做到
產品設計上的可用性和易用性。
費茨定律的思考分析，如下圖所示 。
1. 可點擊對象的設計，需要設計合理的大小和尺寸。功能設計的越大，用戶越容易點擊操作，交互效率越好。
2. 界面設計的屏幕邊緣或角，適合放置像菜單欄或按鈕這樣的設計元素，如果邊角是目標，它們可無限高或無限寬，更容易觸達到操作目標。不管你移動了多遠，點擊操作最終都會停在屏幕的邊緣，并定位在按鈕的上面。
3. 界面設計中，出現在用戶正在操作的對象旁邊的刪除列表（右滑刪除）比下方彈出選擇對象容易操作，右滑刪除交互可以被用戶打開得更快，更有效率，因為不需要移動到屏幕的其他位置，就可以刪除多余的列表。
4. Apple的iOS人機交互設計指南中指出，按鈕的點擊熱區大于44x44pt，這樣操作按鈕才會讓用戶覺得容易使用。
5. 費茨定律案例：用戶在使用產品時，比較重要的操作，我們會放在移動端應用的屏幕邊緣處，方便我們的
用戶點擊操作產品的功能圖標。如下圖所示。
2. Hick’s Law / 席克定律（?？朔▌t）
我們看一下，席克定律的數學公式表達是 : RT= a+blog2 ( n )。RT 表示反應時間，a 表示跟做決定無關的總時間，b 表示根據對選項認知的處理時間實證衍生出的常數，n 表示同樣可能的選項數。
在人機交互的界面設計中，選項越多，意味著用戶做出決定的時間就越長。
分布操作，專注當前行為，就可以節約用戶作出決定的時間。如下圖所示。
其他符合席克定律的案例，如下圖所示：
a. 對于用戶，低頻率功能或不太重要的功能，可以收納起來。比如：個人中心的設置功能模塊。如下圖所示：
b. 分布操作，專注于當前的行為設計，如下圖所示：
c. 在人機交互設計中，我們對核心功能選項做好設計上的歸類，可以提升用戶做選擇的效率。
比如：我們幫助用戶選擇 5 種核心的功能需求，它首先劃分了旅游場景下的功能分類，讓用戶對分類進行選擇。
然后進入選擇機票入口，這樣我們極大的化解了用戶面對很多旅游功能選項的難度和糾結，節約了用戶做決定的
時間。
d. 做好分類選擇，可以提高交互體驗設計的效率，選擇你想要的商品并購買。如下圖所示。
3. 神奇數字 7 ± 2 法則
1. 因為美國認知心理學 George A Miller 的研究，人們短時記憶廣度大約為7個單位（字母、數字、中文等），也就是說每次只能處理 5 到 9 件事情。
2. 人的大腦認知信息的能力有限，所以我們通過把信息分組和模塊分類，以此來認識和思考一些復雜性的問題。
3. 神奇數字 7 ± 2 法則，應用范圍很廣。例如我們記憶的電話號碼，可以分成三組數字：159 5555 6666 ，
這樣分組記憶起來就會容易很多。
4. UI 界面的導航設計，為了給用戶提供明確的設計向導，兩種導航（底部導航欄和頂部導航欄）的欄目設計通常都控制在 5 個之內，欄目功能過多用戶不容易記憶，5 個之內的導航設計方便用戶記憶和快速操作。
5. 移動應用的交互設計規律。神奇數字 7 加減 2 法則同樣適用，螞蟻金服的品類區的核心功能模塊的設計，懸浮卡片上只顯示 8 個 功能圖標，如下圖所示。
6. 同一類功能和同一層級的元素出現時，數目一般控制在 5-9 個，如下圖所示。
7. 如果超過 5 個，可以右滑選擇你想要的產品功能，如下邊的右圖所示。
8. 神奇數字 7±2 法則，運營廣告圖設計要抓住重點去設計，更好的引導用戶去瀏覽內容和產品的交互體驗。
如下圖所示，數字符號標注-突出重點，主圖、主題、操作按鈕、主色氛圍等，我們會作出優秀的運營設計。
根據格式塔的心理學思考 ：當對象離得太近的時候，人的意識會認為界面元素之間是相關的。
在交互設計中，界面設計中的接近原則是對相似信息及功能類別進行內容分組和布局設計的優化設計。
接近法則在界面設計中的作用，能夠直接影響到用戶與產品界面之間的視覺互動，來引導用戶的瀏覽及點擊交互行為。因此，相似的內容和功能模塊應該彼此靠近，而關聯性較弱的內容應該保持大一點的間距。
接近法則運用的目的：在視覺上通過組與組的區分，來劃分功能模塊之間的關聯性，讓界面變得更加清晰，同時幫助用戶在瀏覽頁面時，能夠清楚的看到到各個內容模塊之間的關聯性，就是視覺信息的劃分和分組展示。
如下圖所示。同一類的功能可分為一組，組內使用淺灰色的分割線來表達。而關聯性弱的功能模塊，組內的可以用淺灰色的分割面表達，拉開組與組之間的距離，做好視覺信息的劃分效果。
a. “復制粘貼之父” Larry Tesler (1945-2020) 說過，“任何事物都具有其固有的復雜性，無法簡化”。
引入第三方登錄，減少注冊賬號的復雜步驟，節約用戶登錄或注冊這一流程上所耗費的步驟和時間。
復雜性守恒定律，認為每一個產品設計的過程中，都有其固有的復雜性，存在著一個臨界點，超過了這個點產品設計的過程就不能再簡化了，你只能將固有的復雜性從一個地方轉移到另外一個地方。
b. 以用戶為中心的產品設計，交互設計應盡量簡化用戶層面上的交互設計的過程。比如：頂部導航欄的更多圖標，就是將常用的功能整合并隱藏在首頁設計的更多功能模塊中。如下圖所示。
a. 防錯原則，認為大部分的意外都是由產品設計上的疏忽，而不是人為的操作疏忽。所以我們可以通過改變產品
體驗設計把過失率降到。
我們在設計過程中，要從用戶維度出發，做設計前思考用戶的使用場景，預測到他們有可能發生的誤操作狀態，
做到操作前給用戶的溫馨提示、操作中的實時告知、操作后給用戶的及時反饋。
b. 防錯原則是著名的品質管理專家新鄉重夫提出來的。原則最初是用于工業管理，在交互設計中也可以使用。
比如圖 1，今日幸運星主題，分享給好友幫忙砍價。在沒有滿足條件時，通過彈窗來提示用戶去邀請好友，以此
來完成產品設計的任務。
比如圖 2，請輸入驗證碼的彈窗，驗證碼錯誤，您還可以重復 3 次，只有信息都輸入正確時，用戶才能完成的這個界面任務，如下圖所示。
簡單有效原理，被稱為“如無必要，勿增實體”（Entities should not be multiplied unnecessarily），即如有兩個
功能相等的設計，那么選擇最簡單的、視覺干擾比較少的設計。在其他條件相同的情況下，要求得越少的那個就
越好，越有價值。
a. 合并多余流程，點擊極速支付，支付成功彈窗提示。
b. 高頻率使用的產品界面，保持清爽的設計感。
c. 優先展示核心功能，減少點擊次數。如下圖所示。
圖 1，界面中清晰的品牌色的底部操作按鈕，可以明確的引導用戶去選擇優質的理財產品。
圖 2 ，摩拜單車首頁，用戶最關注的功能是掃碼開鎖的核心功能，方便用戶直接操作，提高交互效率。
d. 蘋果官方網站的簡約設計做的很棒。蘋果公司用一種很和品質感的設計提供了足夠多的內容，網站的文案，交互和圖片都比較集中展示，網頁設計沒有放一些使用戶分心的廣告和不重要的內容。如下圖所示。
總結：
1. 在產品設計領域，有很多經過時間檢驗過的定律，可以作為產品設計的指導原理。作為交互設計之父的
阿蘭·庫珀，他最為人熟知的就是這句話 ：“ 除非有更好的選擇，否則就遵從標準 ”。
2. 交互設計的定律，能夠幫助產品設計師對界面上的各種視覺元素進行合理思考，從而發現一些用戶使用場景中的可用性問題。從產品設計的維度思考看，我們來改善產品設計的操作效率和用戶的滿意度。設計服務于產品、設計服務于商業。
a. 什么是用戶體驗地圖 ？
定義：用戶體驗地圖，是一種梳理產品體驗問題的設計工具。展示的就是用戶在使用一款產品和設計服務的過程中，每一個階段的體驗、用戶對產品直觀的心理感受。將用戶的所做、所思都展現出來，便于團隊設計師全面思考產品帶給用戶的體驗，挖掘設計的優化點。例如，你去三亞去度假旅游，用戶體驗地圖就是用圖形的形式，可視化的表達，將你在三亞的一天活動情況記錄下來，其中包含你這段時間去過的旅游景點，以及在每個旅游景點的用戶
體驗感受。
思考用戶體驗地圖，適合在產品設計的那幾個階段繪制？
1. 原型制作前，設計師從直觀感覺的角度看，我們要了解自己的產品為用戶提供了什么功能、交互體驗，同時協助我們的產品設計團隊，做好產品功能的體驗設計。
2. 產品上線時，我們可以結合用戶調研、可用性測試等方法論。以此獲取用戶的美好體驗和真實的心理感受，來幫助我們公司的產品設計發現問題，以此作為產品設計的迭代優化的方向或者尋找新的創意設計機會點來解決問題。
a. 我們做好用戶體驗地圖的兩個優點：
1. 產品設計的體驗目標是讓用戶用起來，感覺到產品具有可用性、好用性、易用性，那么產品設計也應該從用戶
視角出發，用戶從產品那個觸點點擊進來，怎樣點擊交互下一步，怎樣保持對產品的活躍度，如何傳播分享；定位用戶使用產品過程中的體驗痛點。
2. 真正思考用戶需要什么功能，讓更多用戶參與進來，換位思考我們產品帶給用戶具體什么感受，全局性的思維去思考產品的體驗，與團隊成員、產品交互設計、開發部門和項目負責人等達成一致性的共識、有效溝通和協作，一起制作出解決方案。
b. 思考用戶體驗地圖的價值點
1. 基于用戶使用場景的設計是基于用戶達到某個體驗設計目標的一系列場景的分析與產品思考，理解用戶在每一個使用場景下的痛點及需求分析，同時結合用戶的上一場景，思考用戶下一步的體驗目標，我們可以通過做好體驗設計，來引起用戶情感上的共鳴。
2. 使用用戶體驗地圖，團隊成員可以從用戶的痛點出發，讓產品設計師、團隊成員全面的思考產品體驗，從用戶
體驗地圖中來挖掘產品設計的機會點。
以途牛用戶體驗地圖為例，如下圖所示。
我們運用用戶體驗地圖時，作為設計師或參與者需要切換成用戶視角、第一次使用者的角度去思考，去發現產品體驗上的問題，同時解決產品體驗中遇到的問題，提升用戶體驗的滿意度。
制作用戶體驗地圖時，四個關鍵點的思考：
1. 明確我們的核心用戶人群等; 2. 研究用戶的使用場景。3. 做好用戶的訪談和調研。4. 制作好用戶體驗地圖。
制作用戶體驗地圖的具體步驟如下：
1. 前期準備工作：
我們可以先做用戶的深度訪談、用戶對產品反饋、產品設計的走查和交互的走查、產品的數據分析、同行業的競品分析、訪談用戶等方法，獲取大量真實可靠的資料。
我們就會認識到：思考用戶在使用產品設計的過程中產生的行為數據、用戶體驗和用戶內心的真實感受。我們也可以思考產品的設計思路、產品的核心用戶人群等，以此作為我們制作用戶體驗地圖過程中的重要參考和依據，知道用戶到底需要什么功能和流程，來幫助用戶解決問題。
2. 用戶調研的方法如下：
我們可以先采訪用戶或者做好調研和記錄，將我們的采訪或調研記錄的內容做好整理歸檔，團隊成員一起來拆解和記錄用戶的行為、用戶的直觀感受和用戶心中真實的想法。
3. 我們要梳理好關鍵產品設計任務的流程，就是用戶在使用產品功能的過程中，會面臨很多不同的場景或復雜的設計流程和體驗設計的目標。然后我們再撰寫用戶完成每個關鍵任務的時間：比如，對于我們日常所見的查找功能而言，用戶希望更快的查找到自己想要的產品功能和體驗目標。
我們再寫出關鍵產品任務的用戶操作產品時的行為：
指的是用戶當下在做什么，通常是用 “我+動詞” 來表示，例如：我購買基金產品。
4. 我們再確定好關鍵節點，寫出用戶調研過程中的痛點思考、用戶的滿意度思考，放在對應的行為點的下方。
我們思考和分析用戶的痛點、用戶滿意度的調查，判斷用戶的情緒變化。分析結束后，需要將以上三類信息都寫下來，方便后續整理分組。把行為按照達成用戶目標的邏輯順序整理出來，并做好歸類。例如：美團 App 的例子中分為 4 個階段，如下圖所示。
5. 我們來判斷：用戶在每個階段，體驗產品設計任務中所產生的情緒高低的不同值，并把它們連成一條線，這樣就形成用戶的情緒曲線。
6. 也就是說，制作用戶體驗地圖過程中，我們要思考用戶每個行為背后的痛點和產品設計上的機會點。
最后，制作好一張實用性很強的用戶體驗地圖，以此來挖掘用戶的痛點問題，我們可以更好的去挖掘產品體驗設計中的設計機會點，如下圖所示。
網上的案例欣賞，出境購物的用戶體驗地圖，如下圖所示。
總結：
1. 我們制作用戶體驗地圖，注重的是團隊成員的洞察分析能力和對產品的思考能力，我們要用心思考產品設計中的核心用戶的痛點和產品設計中的機會點，我們要輸出一套符合用戶價值、商業價值和和產品功能價值的體驗設計方案，以此解決用戶的體驗問題，把產品做的更好，讓用戶使用產品過程中，產生愉悅感。
2. 制作用戶體驗地圖的價值是，不僅能使我們以“用戶視角”的維度去思考，引導團隊和設計師去思考問題并做好
產品的體驗設計。同時我們也可運用“全局性的設計思維” 去思考產品體驗設計，去發現產品問題并解決產品設計中遇到的體驗問題，讓我們產品帶給用戶的是：產品設計的可用性、好用性和易用性的價值。
文章來源：tob.design 作者：峻溪POINTV
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
現代管理學之父彼得.德魯克說過一句話很經典的話：“如果你不能衡量它，那么你就不能有效的讓它增長”。
寫在前面
為了快速提升產品設計的商業價值，我們必須先明確思考商業價值的數據指標，用它來指導后續的設計工作，并
衡量其關鍵成果。步驟如下：
1. 分析我們產品的用戶群體
做好用戶人群的分析，定義好你產品的核心用戶，找到核心設計思路，發現商業服務的設計邏輯，做好用戶分析。
2. 制定產品設計的目標
找到商業產品設計的盈利點，做好商業設計價值的平衡和營收的策略，提升產品設計的商業價值。
3. 產品設計的整體規劃
運用商業價值的思維做設計和嚴謹的科學態度，定義你產品的價值指標和商業增值的思路，做好用戶增長地圖。
4. 做好產品設計并科學測試
對產品設計進行科學測試，通過持續的測試和拆分變量，做好設計的迭代優化。
5. 最后跟進，做好產品設計的迭代和優化
產品設計需要設計的迭代和優化，經過科學嚴謹的設計流程，提升產品設計的價值感，定量為主，量化數據。
用戶增長（UGD）的設計核心是 ？
1. 不斷滿足客戶需求、創造客戶價值；2. 不斷與競爭對手進行區分，獲得差異化的產品設計優勢等。
一 重點思考：OKRs-目標與關鍵成果法
通過分析數據漏斗模型，以此來驅動團隊使用數據思維，發現問題并成本的解決設計問題。
OKRs-目標與關鍵成果法，起源于德魯克的目標管理框架也就是MBO,由因特爾前CEO安迪·格魯夫演變成了iMBOs，意思是“英特爾公司的目標管理系統”。后來格魯夫的同事約翰·杜爾為避免這個方法與德魯克的MBO混淆，將其命名為OKR，OKR從此正式誕生.后來約翰把這套方法引入到谷歌,而真正讓OKR火起來的是谷歌的風投合作伙伴瑞克·克勞，2013年他在網上發布了一段一個多小時的OKR視頻，引爆了整個網絡和企業界，從此OKR開始風靡全球。2013年底，OKR傳入中國。
對于我們現在的互聯網企業，如何通過OKRs思維細化設計的迭代優化和改版，結合實際工作的鍛煉和思考，
我感覺具體可以拆分為以下 3 個方面 ：
1. 定義設計目標，（年度目標、季度目標、階段性目標）。
2. 關鍵成果，設計目標通過哪些關鍵成果來達成。
3. 行動方案，這些關鍵成果或數據，應該采取什么行動來完成。
a. 定義：
OKR（Objectives and Key Results）即目標與關鍵成果法，是一套明確和跟蹤目標及其完成情況的管理工具和
方法，由英特爾公司原CEO安迪·格魯夫發明。
b. 為什么使用OKRs工作法呢 ？
在日常的設計工作和生活中，你是否會遇到以下的這些問題呢 ？
1：設計師，下班前回想一天工作時，感覺沒有設計任務可以記。
2：團隊設計師等開發工作人魚，季度考核時，領導問你這個月，工作收獲是什么時，你回想起來只是簡單做了一些設計項目。
3：平時自己的目標太多，缺少產品設計的重點或創意點。
4：沒有聚焦的產品設計目標和團隊貢獻感。
解決以上問題的思路，是今天我們所提到的OKRs工作法，OKRs工作法的主要目標是明確公司和團隊的“目標”以及明確每個目標達成的可以衡量的“關鍵成果”。
OKRs工作法，可以在整個團隊的工作項目中執行，產品設計的團隊就可以明確工作的設計目標，集中精力去完成設計目標。
c. 如何去達成設計目標？
我們先確定團隊的工作目標，確保團隊成員的設計工作目標明確。每個人、每一天都聚焦到核心的設計目標上。
d. 設計目標的價值思考如下：
1. 明確產品設計優化的方向。
2. 有效的激勵團隊的設計成員。
3. 設計決策的認真思考和設計考核的思路等價值點。
e. 遵循設定目標的基本原則 ( SMART法則 ) ：
1. 明確具體（Specific）
2. 可衡量性（Measurable）
3. 可實現性（Attainable）
4. 相關性（Relevant）
5. 時限性（Time bound）
f. 舉個例子
第一步：O（目標）
星期一，設計網站分享關于國際平面設計排版的設計文章。
KR1：文章正常推送文章，并且文章閱讀量大于600000 。
KR2：文章點贊數量大于3000 。
KR3：文章互動評論大于100 。
第二步：關鍵成果，設計目標通過哪些關鍵成果來達成。
制定關鍵成果的建議是：
1. 必須是設計師能有效達成的設計目標。
2. 設計思考要具有創新價值的。
3. 輸出的設計結果是可衡量的。
4. 設計目標一般三個目標以內。
第三步：超強的執行力，從關鍵成果到 “執行力計劃" , 關鍵成果確定后，就要圍繞關鍵成果來分解設計任務，每項關鍵成果就會做出一系列的設計任務，將這些合理分配至每周或者每天中去執行設計任務。
超強執行力的原則：
1. 必須寫明最后的截止時間；
2. 必須寫好完成的百分比。
溫馨提示：
關鍵結果轉化為具體行動后，我們就需要定期進行復盤確保每天工作都聚焦在重要目標上，所做的事情都服務于
設計目標上，使用專一、專注、專心的做事思路；要想發現痛點，我們需要考慮用戶、場景、問題、動機。
痛點是用戶增長的第一要素，用戶增長的第一步是找到用戶痛點。場景是同理心，站在用戶的角度，去發現用戶的痛點，為用戶提供正確的產品設計和解決方案。
做好產品設計體驗，提升用戶的活躍度的三個關鍵性動作：
價值，引導，刺激 ：
1. 產品設計的價值思考，首先要解決用戶的痛點，產品的功能設計帶給用戶的好處和好用。
2. 幫助用戶設計好功能模塊，引導用戶更好的使用產品。
3. 刺激點，首單減免、優惠價等獎勵措施。信任背書，名人、大V等知名機構的影響力，觸動用戶愿意使用產品。
重點來了，我們具體看優秀的運營設計案例，站在營銷的角度思考用戶增長：
1. 700 元禮包等你領-運營設計活動的價值思考：
518-收益狂歡節，最高領取700元紅包，時間限制在：5月8日到5月31日，領取紅包，點擊立即領取后，方可參與獲得獎勵。限制活動時間，提升用戶的緊迫感。送518現金或120元京東卡和50元話費等68888的體驗金，吸引
用戶享受優惠的心理，提升用戶使用產品的愉悅感和驚喜感，用戶粘性、產品的營銷設計價值得到大大的發揮，運營氛圍和主視覺設計等，專業的品牌形象和主張，建立用戶的信任感，設計創意能很好的驅動用戶增長。
2. 天天領福利和15元快車券大派送的運營設計價值思考：
超級 9:30 的天天領福利和15元快車券大派送，首次借錢成果即可領取，這個是金融產品都有的一種營銷策略，
降低用戶的成本。這里先拿網商銀行和滴滴金融的做任務-領福利活動為例子，因為網商銀行的天天領福利運營設計和滴滴金融的15元快車券的運營活動做的很棒，做任務領福利、使用時間。還是滴滴金融的15元快車券的營銷活動，低價優品，為滴水貸的引流等方面設計的都很合理，有利于用戶去使用產品，參與運營活動，提升產品的
復購率和留存率。
3. 運營設計彈窗帶給用戶的價值和產品的價值，思考如下：
提升新用戶的粘性價值和活躍度，比較常見的做法就是給予用戶明確的優惠價格，提升用戶的粘性和活躍度，或
通過天天領紅包的折扣券或會員狂歡周的運營設計活動，引導用戶在平臺上進行的第一筆消費，加深用戶對產品的好印象。比較典型的就是天天領紅包或會員狂歡周的夜宵紅包的運營彈窗的設計。
4. 城市生活享樂季 , 吃喝玩樂買買買的H5運營活動的產品設計思考，如下圖所示 ：
招商銀行，城市生活享樂季，吃喝玩樂買買買的活動，三重福利送給用戶，通過優惠券、瓜分紅包、兩人同行，一人免單等活動，引導用戶在產品中消費，提升用戶的參與感，營銷設計的場景感，主題明確，主視覺的美食和
商城券、紅包、大禮盒等設計元素，運營氛圍渲染的很好，底部招商銀行的品牌設計記憶點，提升產品的粘性度和用戶的留存率和轉化率。
5. 支付寶-螞蟻森林的社交化、游戲化的創新價值思考，如下圖所示 ：
支付寶的螞蟻森林，通過社交化、游戲化的創新，提升了用戶的粘性度和留存率。
螞蟻森林的用戶每天步行、地鐵支付、線上生活繳費等就能積累能量，當能量達到一定的數值時，我們就可以
種植一棵樹，同時用戶可以去偷好友的能量數值。螞蟻森林的游戲，會促進用戶打開支付寶的次數越來越多，提高了支付寶的打開率。同時用戶可以獲得更多的能量，也會經常使用支付寶，這樣就可以大大的提升了支付寶用戶的
活躍度和留存率。
小結：H5 運營落地頁的增長設計三要素：1. 做好產品設計的優質內容。2. 設計的價值表現。3. 產品設計的
體驗感。運用好增長設計的三要素，我們可以更好的去服務好用戶的體驗設計感。
1 . 優化打卡文案使學習效果更明顯，提高1%的DAU。
2 . 推遲強制注冊頁面，提高20%的DAU。
3 . 優化推送文案，使用戶平均留存時間，增加了三周。
4 . 上線徽章功能提高了2%的DAU，雙周留存提高了2%，App內購買收入增加了5%。
5 . 引入打卡對賭功能，14天提高了5%，APP內購買增加了600%。
附加：用戶增長思維的地圖示例：
1. 確定增長指標，增長指標拆解，AARRR增長模型分析。
一 數據指標的定義是什么？
它是對當前業務有參考價值的統計數據，是通過對于業務需求的進一步抽象，并進行數據埋點后，加工出來的一套計算規則，并通過有效的方法論和數據可視化呈現，最終能夠解釋業務變化和用戶行為。只有對當前業務有參考
價值的指標才可稱作指標，同時要具備：可統計、可分析、可監測的特點。
產品中常見的數據及其表意：
分析一款產品，重點關注三項內容：用戶、需求、數據。
我們可以從業務、產品、感知三個方向去強化產品：1. 業務方向：聚焦核心痛點業務。2. 產品方向：確定產品的
主線功能。3. 感知方向：強化產品的痛點感知。如下圖所示。
以上三個方向都是指向用戶的痛點，目的都是為了解決痛點問題，搶占用戶心智，形成強大的競爭壁壘和
增長勢能，形成用戶增長的優化點。
數據對體驗設計師來說很重要，功能上線后，關注數據的變化來了解用戶的心理變化，這個對比看用戶反饋要客觀的多。數據量化結合用戶反饋，做好用戶增長的體驗設計優化。
1. 點擊率
是指網站頁面上某一內容被點擊的次數與被顯示次數之比，即clicks/views，它是一個百分比。反映了網頁上某一內容的受關注程度，經常用來衡量廣告的吸引程度。
意向率 ：意向UV占曝光UV的比例，用戶衡量運營活動/功能的導流能力。
2. 人均使用時長
在一段時間內，總活躍時長/總活躍用戶數。娛樂游戲、社交等產品數值往往比較大，工具類產品數值比較低。
人均使用時長不一定越大越好，比如：內容類產品的人均使用時長較長，說明內容質量高，但是工具類產品如果
人均使用時長過長，反而代表產品使用效率低，用戶學習成本較高，所以數據需要多角度靈活的去分析產品。
3. 留存率
互聯網行業，用戶在某段時間內開始使用產品，一定時間內，繼續使用的用戶，就是留存用戶。（留存率=留存用戶/新增用戶*100%）。通常重點關注次日、3日、7日、30日即可，并觀察留存率的衰減程度。留存率是判斷產品價值的重要指標之一。留存率高的產品，更容易獲得資本市場的看好。
留存率的計算：
7日留存率：第一天新增的用戶中，在注冊的第7天還有登陸的用戶數/第一天新增的總用戶數；這個時間段內，用戶通常會經歷一個完整的產品體驗周期，如果這個階段用戶能夠留下來繼續使用，很有可能成為產品的忠實用戶；
次日留存率：當天新增的用戶中，在注冊的第2天還登陸的用戶數/第一天新增總用戶數。
月留存率：即某一統計時段新增用戶在第30天再次成功啟動該應用的比例。通常移動端產品的迭代周期為2~4周為一個版本，所以月留存率能夠反映出一個版本的用戶留存情況，版本的更新，會影響部分產品的體驗，所以通過
對比月留存率能判斷出每個版本的更新對用戶的影響，從而定位到設計問題進行優化點設計。
4. 活躍用戶數
產品活躍度一般分為日活(DAU)、月活(MAU)、周活(WAU)，產品活躍用戶是需要達到某一個指標，比如內容類
產品，閱讀了一篇文章或電商類產品用戶完成3次頁面跳轉，都可以算作是一個活躍指標。
提高新用戶的活躍度，比較常見的做法就是給予用戶最初的引導以及簡化功能路徑，降低新用戶的使用難度，或者說通過一些優惠或者卡券引導用戶在平臺進行第一筆消費，加深用戶對產品的使用印象。
5. 轉化率
是完成轉化目標的用戶占總體用戶的比例，注冊、下單、登錄、復購，都可以用轉化率來進行量化，根據產品不同階段來定義不同的轉化率指標，轉化率是互聯網產品的增長的重要因素。
轉化率=產生購買行為的客戶人數/所有到達店鋪的訪客人數*100%
小結：各屬性的產品更看中那些數據 ？
業務型產品：一般和 意向UV、CTR 點擊率、跳出率、意向UV訪購率 有關。
內容型產品：一般和 用戶的停留時長、功能 CVR轉化率 、跳出率 有關。
社交型產品：一般和 次日留存率、用戶互動和使用時長、CTR 點擊率 有關。
工具型產品：一般和 用戶的活躍度高、次月留存率、用戶使用時長、核心轉化率 有關。
電商型產品：一般和 GMV成交總額、下單量、DAU 日活躍用戶數、核心轉化率 有關。
游戲類產品：一般和 玩家的付費率與ARPU值、用戶使用時長、核心轉化率 有關。
產品生命周期，可分為初創期、成長期、成熟期、衰退期，每個階段的工作權重和數據關注點都會有所區別。
我們分析一下產品的增長思路：科學提升數據的方式，控制變量。
1、初創期
初創期的重點在于驗證產品的核心價值，通過某種產品或服務可以為特定的人群解決某個問題。
在產品初期，快速驗證痛點和需求的方法被稱為MVP（Miumum Viable Product）,這里的MVP不是指最有價值的球員，而是最小可行性產品的縮寫。
MVP是埃里克.萊斯（ Eric Ries ）在他的《精益創業》一書中關于精益創業的核心理念和思想。MVP是指用最快、最簡明的方法開發初一個可用的產品原型，但MVP不僅僅是一個產品，還是一個過程，是由開發、測量、迭代三個環節形成的循環，即最小產品開發、產品驗證、產品調整不斷循環，同時我們也要注重產品的可行性，重視用戶的質量很關鍵。
2、成長期
該階段的產品已經能夠解決用戶的基本訴求了，所以將側重點關注在用戶的生命周期的管理，提升拉新和留存率。
3、成熟期
成熟期的產品，不再做整體的頁面優化，而是一次只改一個內容模塊的設計優化設計，或者只改一個元素的優化或顏色修改，或者只修改圖標樣式，團隊內討論和設計專家走查，思考那個顏色受用戶歡迎；圖標的設計風格符合用戶的審美心理等。
第二輪優化，經過AB測試，頁面的轉化率就可以對比出來，最終選擇轉化率高的設計方案就好。
把AB測試作為一個測試設計方案數據提升的方法之一。
在產品的成熟期，設計師一般盡量做細節上的優化?？匆淮蔚慕Y果，對數據影響不會太大，但是累計起來就非常驚人的。這就意味著必須經過長期的AB測試，才能測試產品迭代優化的數據洞察，多次優化后我們可以得到累積的效果，做到設計的量化。
下面幾個案例來自《增長黑客實戰》
Google 從2004～2007年歷時3年逐步構建并建立了一套強大的內部AB測試系統，每個月會執行幾百甚至上千次試驗，小到將公司移動幾個像素，廣告上背景顏色序列稍作改變，大到對某個新產品反饋作出評斷并決定去留。僅2010年，Google就進行了8000多次AB測試和將近3000次灰度測試。
亞馬遜對AB測試的偏執，更是到了近乎苛刻的地步，甚至被賦予“AB測試公司”。不僅公司自行研發了AB測試系統，允許員工將網頁拆分成不同版本進行對比和測量，就連辦公室桌子的擺放角度，都要通過AB測試來決定。
所以，高價值的公司不僅在科技創新、用戶價值、商業變現等方面表現突出，更重要的是他們利用數據思維去衡量每一個微小的改變，積累多了，最終大幅度提升產品設計價值。這對于追求科學嚴謹的成熟期來說至關重要。
4、衰退期
關注用戶流失后的產品，分析競品的商業模式和功能，同時監測流失的速度，拓展產品邊界，尋找新的切入點。
小結：
1. 通過標準的設計流程和專家設計走查等思路，幫助我們學會用科學的方式，量化設計細節并提升設計效果。
2. 通過發現用戶新的痛點，突破產品的生命周期，找到產品增長的第二曲線，實現產品的持續增長。
三 AARRR增長模型和用戶增長案例分析
在《增長黑客》中，提出了AARRR的用戶增長模型，將增長分為5個階段：獲取、互動、留存、變現、傳播。通過遞進式的引導，實現持續的增長閉環。設計師可以基于這個模型，探索設計在增長各階段的作用。
用戶增長的案例分析 ：
現在市場上有很多優秀的用戶增長的產品設計案例，與用戶增長模型有關 ：
a. 微信讀書-無限卡為案例思考，如下圖所示。
1. 每天限量派送7天無限卡
微信讀書無限卡活動。同時面向老用戶和新用戶，老用戶默認領取3天無限卡，分享到朋友圈后才能獲得剩余的4天無限卡。新用戶通過老用戶的分享，注冊后即可獲得7天的無限卡。
這就充分利用了影響力 “互惠”、“喜好”、“稀缺性價值” 三要素。
“互惠” 微信讀書，會給予用戶無門檻，贈送3天無限卡，然后再要求老用戶分享即可再獲得4天，利用先讓利再要求用戶進行操作的態度，老用戶內心非常愿意分享微信讀書的無限卡。
“喜好” 是因為老用戶分享出去，新用戶因為老朋友的分享，生活情感上的一致性思維，更容易接受微信讀書這個閱讀性產品，同時可以領取微信讀書的無限卡。
“稀缺性價值” 微信閱讀很少做全場無限閱讀的權益，我們可以購買微信讀書的 Vip服務，看老用戶，這個無限卡就是稀缺性價值，更愿意為稀缺性的權益而分享給好友。
2. 組隊抽取無限卡
無限卡活動投放在微信讀書的-用戶重點關注的模塊，每周成功組成5人隊伍，就可以獲抽獎機會，獎品是1、3、5、7、30、365天、終身無限卡會員，隊伍中有了新用戶，我們才能抽取終身大獎-無限卡活動。
組隊抽獎活動依托終身無限卡這個“稀缺”資源，要求老用戶每次組隊都要拉新用戶，老用戶為了平臺資源，一般會每周主動尋找 1 名新用戶來組隊，爭取獲得抽終身無限卡的讀書權限。
對于新用戶，“互惠”和“社會認同”會起到參與的價值，新用戶參與這個活動，也能免費獲得1天的無限卡會員；我們看到好朋友參與讀書活動，我們也會想參與組隊讀書的無限卡活動。
b. 拼多多的增長案例分析
增長原因
首先，說明這個產品的核心模塊，再分析拼多多是如何一步步引導用戶注冊、留存和傳播的。
用戶的裂變或分享
例如：天天半價購、好友互動等運營活動，為了做好營銷設計而做的一些增長功能。
拼多多解決了用戶兩個問題
1. 商品價格低。2. 購買、支付方便快捷。
天天半價購有 2 種運營形式，H5運營圖展示和運營彈窗設計
第 1 種，天天半價購的流程，選擇商品-半價拼單-團成開獎-每團必中。拼團后，馬上就可以半價購物使用。新人首次發起半價團，中獎率高達99%哦～這個設計即可引導新用戶馬上下單消費，也實現新用戶分享拉新的目標。
第 2 種，天天半價購這個活動，每團手氣最佳獲得商品，其余人立即退款，并送優惠券。而好友拼單=邀請新用戶下單。
小結：用戶為了實現某個目標，邀請好友幫助完成某項任務，從而影響更多的潛在用戶，達到傳播和裂變的目標。
文章來源：tob.design 作者：峻溪POINTV
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
2021年的第一篇萬字長文，文章主題是一次偶然的反思中總結出的設計師思維進階的過程，詳細講述了我在兩年間從一名應屆非科班設計師成長為一名高級體驗設計師的思維進階過程。與一篇UI教程、一篇交互分析的文章不同，這篇文章希望能夠從底層的思維層面幫助你明確自己的狀態，并提供一個快速進階的思路，所謂授人以魚不如授人與魚正是這個道理。
一：前言：靈感與反思
靈感始末
最初，在一個偶然的機會讀到一本規范相關的書籍，然后我開始反思自己是否有積累成系統的設計規范、設計技能樹，為了驗證這一點，我便以設計一個彈窗為例子開始模擬演繹，演繹完畢后進一步思考，我是如何積累這些方法論或思維模型的？正因此發現了我作為非科班設計師，從最初開始自學設計到如今晉升到高級體驗設計師的思考方式的轉變。進一步從現象中探究原因，于是輸出了本文。
如何設計一個彈窗？
在做任何需求的時候，甚至是一個極小的需求，你有沒有持續思考過？有沒有進一步思考過？又有沒有刻意、主動完善設計思路，積累思考模型？如果沒有，你可以從接下來這個思考案例中反思一些東西。
設計彈窗時，我畫的第一個元素——彈窗的矩形背景時，是如何思考的，考慮了哪些元素。進一步設計我還要考慮哪些因素？下面是我的瞬時思考能整理的有效信息。
方法1：根據彈窗內容進行界定（根據內容極限情況，及你的設計系統定義的間距來控制整個彈窗的尺寸）
方法2：根據固定比例，主要適用于移動端，例如3比4的矩形比例較美觀，計算彈窗面積與屏幕整體面積的比例、計算留白與彈窗的比例、參考黃金比例Golden Ratio、白銀比例Silver Ratio等。
方法3：根據你的系統定義的柵格進行界定，如小彈窗使用1/4,1/3,1/2，大彈窗使用1/2,2/3,3/4柵格。
方法4：柵格+比例，方法3界定寬度，方法2界定高度 。
設計延展性：考慮彈窗內的內容發生變化時的自適應情況，內容過多的極限情況/內容過少的極限情況。 自適應的規則，彈窗窗口尺寸的延展方式（橫向拓展/縱向拓展）
交互：彈窗又叫模態視圖，其通過遮罩突出彈窗視區，在蒙層遮罩上方的最高層，根據通用規則，大部分情況我們不應當在彈窗上再次疊加界面層。若彈窗場景下有新的縱深層，如下一級操作或內容界面，此時如何處理？
如下方，PC端google drive，就在結構上使用類平級跳躍的形式來“借面板”解決新的操作需求。
而再下方的IOS使用的bottom sheet則采用了完全不同的解決方案，表面上似乎是違背了彈窗模態上重復疊加的規則，但在移動端一屏僅僅解決一個問題、完成一個任務的語境下，反而更加合理。（而這些成熟的模式、范式，或者說設計單元，正是在主動思考和被動思考階段設計師需要積累的設計經驗，它們將作為設計師知識庫中的組成部分，指導設計并進一步提效和促使設計合規）
常規易用性：如退出機制——關閉的解決方案，通過關閉按鈕退出，那關閉按鈕尺寸在當前彈窗尺寸下定義為多少合適，視覺尺寸與hover實際可點擊尺寸分別是多少？PC端是否只能使用關閉按鈕退出？點擊空白區域退出是否更，如下方的dribble，點擊上方黑色空白區域即可退出，而無相關經驗的用戶也可以在右上角看到關閉icon的暗示線索。
場景與業務背景：詳細了解當前需求的業務背景與場景，進一步概覽整體業務背景，即兼顧其他可能性的業務場景。如我設計的B端系統包括辦公室類工作場景，同時也包括站立、遠距離觀看屏幕的工作場景，這將涉及到信息能否直觀清晰的被傳達、獲取。當前需求的業務是主流場景？可向上向下兼顧大部分同系統的其他業務場景？還是無法兼顧而需要同時列出更多場景來制定通用規則？以我所設計的B端系統為例，較高頻的出現在彈窗下存在下一級操作或展示頁面的場景，因此我考慮在工作空閑時輸出一份彈窗場景下有縱深的下一級信息或操作的解決方案，并將其作為產品相同場景的應用解決方案。
視覺合規性：保證主要信息的對比度，清晰度，保證所有信息傳遞和展示時的節奏和梯度優先級。從字號到字重再到段落行高間距等，從彈窗中ICON的樣式選擇，到Icon語義清晰度等。
...
如果進一步思考，其實可以思考more and more。你會發現，從基礎的結構涉及的柵格，到基礎的視覺合規性涉及到的字體設計、icon設計。再到交互涉及到的典型設計單元，通用交互模型范式等，在設計一項內容前，我們有很多的思考空間，或者稱之為思考機會點更為合適。將充足的思考納入設計過程后，初期設計時間線被拉長，但長遠來看避免了思慮不足引發的風險與反復更改的成本，合理的設計預測與分析則向上向下兼容未來場景，提高設計輸出物的通用性與成效，即所謂的磨刀不誤砍柴工。
那么這樣成熟（我自己其實是偽成熟，還不夠完善和系統）的思考過程，分析過程是如何學習或者說培養的？
二：設計思考的三個階段
這其實是我接下來要講的正題，我將設計中的思考分為三個階段，無思考——主動思考——被動思考，這是一個初期線性發展，后期循環迭代的過程。其實我定義這一套思考階段的分級是在短暫的靈感爆發后立即輸出的，來源于我對自己2年間從一個非科班新手到如今高級體驗設計師思考邏輯的發展變化的回顧。我發現其確實有跡可循，在地鐵上很興奮很興奮的頭腦沸騰過程中快速記錄下大綱，到了工位立即記錄并輸出。
無思考階段
大意為，新手設計師，或沒有刻意練習、思考、總結的習慣的設計師，最初由于沒有通用的設計經驗、沒有相關成熟設計模型或組件與設計單元的使用和設計經驗，因此設計一個新內容實際為從0開始，此時設計師可能會單憑直覺 隨意設計，例如設計彈窗就隨便畫一個矩形，然后隨機調整?；蛘呤褂贸墒斓慕M件系統，直接套用，純粹執行。這就是處于 0思考階段，憑直覺設計（注意和直覺性設計區分開，直覺性設計是從用戶的維度定義的，即用戶可以單憑直覺理解設計，這也是我們常說的可供性"affordance"原理）
主動思考階段
而主動思考階段的起點是，隨著設計師接觸的工作范圍、工作內容、合作對象的擴大或增加，及接觸同類工種（其他設計師、設計leader）的輸出思考過程、輸出物、行為模式、思維模型等等設計價值觀與執行模式等信息后。
前者會使新手設計師（或沒有有意識的反思、總結沉淀的初中級設計師，或剛剛轉換行業的各等級設計師）逐漸暴露并意識到自己的問題，大概率可能涉及到輸出物質量、規范性、平臺或行業壁壘造成的經驗缺失等。
后者則是一個對比與發現的過程，即接觸到更優質的輸出物，更合規的輸出過程，更的設計流程、協作流程等等?？赡苁潜粍咏邮艿模鏻eader或同事的分享，及日常工作中為提高團隊整體效率而被灌輸的新的工作方法和進入新公司要強制適應的新的工作流，也可能是主動接受，如發現同事設計到輸出的質量和效率等遠優于自身而自發去了解，學習。
因此，在主動思考階段，會有一個從發現問題到解決問題的過程，是不是和設計本身的職能很像，而在這個過程中，設計師自身就是被設計的對象，即如何解決自己身上存在的問題？如何使自己變得更完善更優秀？
你可以回顧下，在你初入行業時，最熱情的接納各種信息、知識、經驗的階段，你當時的狀態是什么樣的？概括來講就是遇到感興趣的內容-發現自己在此間的不足-了解學習并掌握。從基礎的某個視覺效果的實現方式，到某個設計方法論、某個解決典型問題的交互設計等。
主動思考階段與興趣（對某個領域的衷情）、個人行為習慣（自學習慣，求知與自發研究的習慣）、周邊環境等因素有關。因此核心是與本人、其他個人（同事，設計圈關系人）、團隊相關。某些人天生對未知事物、信息及技能有濃厚的興趣，所以會自發的廣泛接收各種新的信息，并在這個過程中養成思考總結的習慣（比如在下），同理，個人在大學期間，甚至成長過程中有養成良好的自學習慣，有訂立目標并逐步實現的習慣，他們會長期甚至一直處于主動思考階段。另一種情況則是周邊環境，社交關系人對你所產生的主動及被動的影響，如leader布置課題及學習計劃，同事，好友，行業人員的協作共創活動，分享會等。
所以，主動思考階段應該是優秀設計師需要長期自發維持的一個設計狀態，持續的發現身邊的問題，發現自身的不足，發現新內容新趨勢新動態。并在發現新的內容并與自身能力模型對比的過程中，發現不足并持續思考和輸入信息，反思，輸入，鞏固，沉淀。是一個升級打怪的過程更是一個知識資本的原始積累階段，與無思考階段相比，由于它是一個主動，刻意學習的過程，因此積累知識的效率要遠遠高于懵懂狀態的初級設計師。（這應該也能解釋為什么一些沒有進入主動思考階段的設計師，工作四五年卻被一些一兩年的新人設計師趕超）。
從新人設計師“無思考”階段到主動思考階段關系到一個設計師能否完成初級到中級的進階。主要差別則是輸出物的不確定性（初級）與輸出質量趨于穩定并持續迭代提升（中級）。
這個思考階段線性過程的第一個門檻，雖然是初中級設計師面臨的門檻，卻是能持續影響設計師整個設計生涯的關鍵轉型點，奇異點。就像先賺它一個億中所謂的一個億啟動資金?？邕^這個門檻，設計師會迎來第一個爆發期，中級設計師我的理解是下限清晰，上限無窮。即在主動思考階段，設計師可以將個人設計能力，從技巧到方法推動到一個較高上限的地步，概括定義———擁有在從事行業領域內輸出高質量設計方案的能力。
如何跨過新手期，從無思考到主動思考？
刻意練習與學習
最優解是從興趣到發現，即培養興趣，調動興趣去開展某個內容或者技能的研究學習，并逐步掌握為自身技能樹的一部分。次解則是從目標到強制規劃自我再到研究學習和逐步掌握。以興趣為老師是最易收獲的方法，但確定目標并刻意學習才是大多數人要走的路。完美解則是興趣驅動同時嚴格規劃。在我作為非科班設計師開始自學到工作的早期，每天固定不變的是大量瀏覽作品，大量閱讀文章，大量練習技巧，后面逐漸選擇性瀏覽，選擇性閱讀，選擇性練習。這期間發生了什么？是綜合當前工作場景和設計趨勢等各方條件后的縝密思考所做的決策，也就是一個反思的過程，從發散到收束，以提高在當前工作場景下的個人能力，集中精力在核心能力的提升上。
也是這種能力使我快速B端轉型C端，使我在上手新軟件Figma后由一個新手使用者快速蛻變為講師、分享輸出者。刻意練習和學習的能力與傾向，應當在主動思考階段養成為習慣。
What——How——Why
從淺層思考到深層思考，最簡單的就是所謂的黃金圈法則。What僅僅讓你了解到所見是什么,能提高你的審美，積累設計相關的表層信息。而當你思考How時，你將掌握如何實現該效果的能力。再進一步，當你開始思考Why時，你終于探尋到設計的本質，該設計是在遇到了一個什么設計課題、問題的基礎上提出的，解決了什么問題，如何解決的，有沒有更優解？目前的解法能否納入自己的知識庫？
T型構建能力模型
T型中縱深為你所對應的領域、行業、業務強關聯的能力。 以UIUX為例，其中又以基礎UI界面輸出能力為例。
視覺：布局結構、柵格、字體、配色、間距、ICON及插畫繪制、對應平臺尺寸規范...
交互：信息架構、業務梳理、導航設計、流程設計、原型設計、交互演繹
業務：當前從事行業、細分領域、細分到業務的理解程度，細分需求的業務背景的理解程度
橫向為拓展能力，通用能力如經常講的共情能力，溝通能力，協作能力，邏輯思維能力，復盤輸出能力等等。除此之外還有特殊能力，比如UI UX以插畫 ，3D作為特殊能力項。
關注環境
在最初定義主動思考階段時，我就講過個人覺醒主動思考的過程中，他人和環境的影響因素十分關鍵，因為這是一個發現不足然后去解決問題的過程。整體環境如整個大的設計團隊，及細分的每個設計組，從小環境到大環境都有相當多的團隊沉淀和個人沉淀可以供你吸收成長。如我們設計團隊定期舉辦的月度會議包含超高質量的分享，公共Drive保存有設計團隊成立來的所有設計輸出積淀。再如你的設計小組的定期分享，以及你身邊擁有個人特長能力的同事們，關注優秀的內容，優秀的解決問題的思路，身邊就是老師，萬物都是書。例如我從C端轉型B端后，在一兩個月內快速融入團隊，期間從不同的同事身上學到了時間管理（正經的）、項目管理、規范體系的制定等特長能力，而我給團隊成員的反饋是智能組件系統的制定方法同時搭建了一套常用智能組件，大大提升了復用界面的設計效率，至少百分五十以上。沒有對應的環境和社會關系人，靠自己悶頭苦學很難有這樣的效果 。
善用工具
這里專指記錄，輸出類工具，例如印象筆記。從舊的設計過程中獲得收獲與經驗的核心在于復盤。忌諱對所知和所得模棱兩可，因此需要在記錄，總結的復盤過程中真正鞏固從設計思考和實踐中獲得的反饋，并進一步加深為自身的持續性積淀。沒有復盤過的設計師可能不會意識到，你的每一個需求設計經過一次復盤后都有可能發現新的問題，思慮不足的點或者仍然未解決的痛點等，當然也很可能發現能持續復用的思路、設計模塊等優質資源。
除了筆記類工具，公開分享甚至私人交流都可以作為復盤工具，在這個過程中你會回顧自己的設計流程和思考過程，并在言辭交鋒間發掘新的機會點。因此當你完成一次自我感覺良好的需求設計乃至小的版本迭代后，嘗試著與身邊的工具人同事溝通，嘗試在設計小組內分享，在籌備分享與交流思路時，對于該需求的設計思路便躍然而紙上了。
被動思考階段
被動思考階段有兩個核心特征，這里的被動不是指傾向性，而是指無意識且自動處理信息的狀態。可以理解為游戲中的被動技能。
第一個特征，即達到在主動思考的基礎上，持續積累和迭代知識庫的信息，然后將設計規范，典型范式，通用經驗思考模型等內化后的階段。
何謂內化，抓起超燙的茶杯會自動放開手，反應速度不會超過零點幾秒，這就是人自我保護機制的內化，即整個過程已經不需要刻意去思考和醞釀，而是在無意識的過程中自發的做出反應，完成系統的思考并形成一個規范的方案建議。
與主動思考階段相比，主要差別在于對已有能力的使用熟練度，調用效率，及思考的全局性。
說的通俗些，遇到一個設計問題時，處于主動思考階段的設計師會在遇到設計問題后，從過往經驗，相似解決問題的思路中篩選，尋找一個合適的解，這些解是零散的，且需要設計師主動去回憶甚至瀏覽歷史文件來搜集。而對于被動思考階段的設計師來講，若是面對一個較為熟悉的設計問題，如一個彈窗設計，此時該設計的解答方案會自然而然的出現在腦海，并且存在多個方案進行對比，并且每個方案都完整全面，從業務的考量到體驗的權衡，再到業務與體驗的相互平衡。方案如何推進，按照經驗會遇到哪些阻力，需要說服哪些利益相關者，案例如何演示，有否有設計還原類風險？如何解決等等。
因此，處于被動思考階段的設計師能夠自然并的調用個人積累的成體系的技能和經驗以及執行和推進設計的流程，從輸出設計到推動方案落地一氣呵成，宛若天成。在沒有一定思考和實踐經驗積累的情況下，主動思考階段的設計師則可能需要花費成倍的時間在方案探索輸出再到落地的過程上，期間遇到的典型性問題則會一點點被消化并推動設計師向被動型晉升。
第二個特征則是視野與維度，視野也就是常掛在我們口中的全鏈路視野，維度則指的是看待問題或方案的更高維度。這一特征使用實際案例來說明或許更易于理解，
案例1微信紅包早期推廣的案例
微信紅包作為微信的一個核心功能，初期花費大量成本推廣并成為一個現象級“產品”，作為產品設計師，底層的視覺設計師與交互設計師在產品視覺交互邏輯等方面投入較大精力，他們只需要將自己負責的需求完成，輸出達標的基礎方案，可能會聚焦于如何設計紅包樣式更易于理解，如何設計紅包樣式能賦予其可供性，幫助用戶快速理解產品與現實中的紅包的映射關系，在進一步可能要考慮不同年齡階層對紅包樣式的接受度，而交互設計師可能要考慮如何縮短用戶路徑，使紅包開啟的愉悅感能夠最的被用戶觸達。
而此時產品負責人是如何考慮該紅包功能設計的？答案是通過微信病毒式傳播，的綁定銀行卡，為微信支付業務鋪路。綁卡才是當時該產品設計的核心。這就是維度的差異，同一個產品，不同的崗位不同的身份，不同階段的設計師看到的會是不同的維度視角，更高的維度往往意味著更長遠的考慮，意味著碾壓式的決策?！盀橹Ц稑I務奠基”與“糾結紅包是否要帶花紋”相比，維度視野的差距，高下立判。
案例2與設計團隊負責人評審 Logo方案
上圖是該提案的部分PPT，在一次品牌LOGO提案的評審過程中，我花費較多的精力去宣講Logo的品牌理念和故事，分析圖形的演化過程，同時輸出多個方案用于對比。設計負責人一針見血的指出幾個核心問題。
第一點，在設計過程中不要過早的給圖形設計融入顏色，顏色是第二層信息會干擾設計過程，當然也會干擾需求方的理解過程。一次只闡述一件事情，設計圖形，講解圖形就使用灰度模式。
第二點，給群體及普通需求方宣講可以使用較多包裝或附上比較詳細的設計思路，而需要給企業級Boss過稿時則切記簡化一切過程，開門見山，直接鋪陳LOGO圖形，對不同利益相關者采用不同的策略。
第三點，該品牌LOGO的單獨設計輸出物看起來不錯，但需要置于我們跨國的多個產品品牌構成的總的品牌體系中，判斷其品牌一致性等問題，一致的產品品牌效果不僅能闡釋品牌歸屬，同時也能很大程度上降低推廣成本。作為設計師，既要細化到每一像素，又要高屋建瓴從全局層面考慮問題。
當你收到的反饋或建議都是你從來沒有考慮到的問題和想法時，這有可能就是維度的差異。
資源3：周陟 《設計師如何解決全過程問題》
周陟分享的《設計師如何解決全過程問題》是一個全局性與高緯度思考的典型案例。該分享詳細的闡述了設計師如何從產品的底層框架，結合業務的思考，市場趨勢、歷史數據對比分析，定義核心設計問題并探索設計方案的過程。
其中即有低維度的設計師底層能力方面的闡述，如從產品用戶體驗五個層面的設計思考（戰略層、范圍層、結構層、框架層、視覺層）到具體的可讀性、視覺舒適度等具體的設計問題。更有高緯度的市場銷售趨勢、不同手機廠商間的用戶流失流轉情況、市占率、信任度等業務層思考。從上帝視角，全覽產品各個階段的場景及問題，并在對比分析中聚焦核心問題，探索方案去持續解決。
我們可以用一個超級樸實的方式來闡述主動思考階段和被動思考階段的差異。當一個設計師處于主動思考階段，你可以把他置于他所熟悉的設計領域，他將會輸出高質量的設計物，能夠較好的解決當前遇到的設計問題，體驗問題。
而一個被動思考階段的設計師，你可以把他置于有一定相關性的各個設計領域（比如互聯網方向的設計不能被置于廣告方向），他會在較短的時間內理解不同領域的特征和需求，并輸出高質量的解決方案，且能夠兼顧各個利益相關者，主動推動產品實現進度，并提前規避各類問題。這其中的差別在于，是否有自己沉淀的一套解決問題的方法和過程，是否將通用設計經驗系統化，是否有足夠廣闊的視野及更高的維度。這也映射了你是一名所謂的UI設計師，還是一名高級體驗設計師，前者限制在一個領域內，后者已然破圈。
如何從主動思考階段跨越到被動思考階段
在體驗設計的領域，主動思考階段的設計師與被動思考階段的設計師，在單純的設計能力上，其實沒有太大的差距，即輸出物本身沒有太大差距。都能夠快速輸出達標的設計方案，解決大部分體驗類問題。那么關鍵差距提現在哪里？
其一是從設計到落地的總的效率。主動思考階段的設計師在整個設計過程中需要頻繁的遇到問題，并陷入陷阱，然后持續的糾正方案，一步步推進，踩著荊棘摸到最終方案所在的那塊石頭。而被動思考階段的設計師只需要在知識庫中的成熟方案中選擇一條更加應景的路，多個方案已經擺在那里，而設計師只需要去考慮低維到高維的一系列影響因素，從基礎體驗，用戶習慣，再到業務和戰略上的布局，最終選擇全局視野下最正確的方案。
第二點差距在于可能性，被動思考階段的設計師有精力和能力去思考如何把方案做到超標準，超出需求本身的要求，超出利益相關者的期待（如需求方和開發人員）。我們經常會講行業標準這個詞，作為一個設計方案的基礎判斷標準，但行業標準永遠不是上限。微信的撤回功能，從僅撤回到撤回后可編輯就是一次體驗上的超標方案。
第三點則是打通上下游的能力，即涉及到上游的需求理解與轉化，詳細的設計項目還會涉及到用研類信息的接受與轉化，下游則涉及到開發還原的質量與效率問題。在有意識的關注設計全流程和生命周期的情況下，被動思考階段的設計師可以更輕松的管理設計并反饋到整個項目的開發周期上。
想要從主動思考階段跨越到被動思考階段，我總結以下三個建議。
從輸入到梳理
首先是核心的底層設計能力方面，表面上是基礎能力與通用能力的的刻意學習鍛煉，而關鍵在于對知識體系的梳理。在我們初入職場逐漸積累設計經驗的過程中，一些典型的設計過程，流程，針對某個領域甚至模塊的典型解決方案，將其拆解匯總然后梳理分類，不論使用印象筆記等筆記產品，還是思維導圖等腦圖類產品，都能夠幫你實現這個目的。
忍受立即獲得解決方案的誘惑
其次，在真正開始做項目時，主動思考，刻意將個人知識庫梳理的信息與項目需求進行對照，主動回憶和驗證積累的方案，盡可能多的羅列場景，羅列可能性，不要被第一時間想到的方案所誘惑而止于此。設計師在遇到一個設計問題后，會第一時間想到的方案往往是最普通，未經思考的初步方案，但往往該方案可以一定程度上解決當前的問題。此時設計師需要強制自己從最簡單的方案中脫離，進一步思考，并大量的舉例、演繹，探索更多機會點，調動腦海中更多可能性的方案。每當想要就此停下時，反問自己，我能否做的更好，是否有更好的方案可以解決這個問題。
視野和維度來源于廣泛閱讀、案例、及復盤
被動思考階段的設計師橫跨了高級體驗設計師到設計專家這個范圍。抵達這個階段的設計師視野將拓展至整個企業機構，而不局限于設計團隊的個人的視野。除了強大的解決設計問題的能力，相較于普通設計師，他們往往有更高的思考維度，全局性的設計視野，此類中后設計生命周期中的經驗往往需要通過閱讀、項目實踐等多個方面持續輸入，然后復盤并沉淀為自己的經驗。
因此這要求設計師廣泛的閱讀各類設計項目總結，參考實際案例，并在真實的項目中持續計劃、嘗試、驗證，然后復盤。需要脫離設計師基礎能力層面的視野，更多的關注解決問題的思路與流程，最終掌握的設計思路或能力可以稱之為通用性設計解決能力。
當然，上面所講的都是我從個人思考方式的轉變中總結出來的經驗，其目的是分享設計師應該如何思考？不同階段應該聚焦于哪些問題領域才能最大化提升思考方式的進階速度等問題，而不是在講設計師如何從初級進階到高級，進階到體驗專家（非設計師位階的進階）。因為不同企業對不同位階、不同專供方向的設計師有不同的具體要求，比如設計leader可能更傾向于業務的理解與把控度，設計推進，研發流程中不同團隊成員間的溝通合作等能力 。
如果有關于此的疑問，我只能以我的理解解答，不論是什么位置的設計師，判斷其位置層次的標準必然是由上層的企業來制定的，而企業制定規則的出發點源于利益本身，換言之，你能獲得的位置和你能夠為團隊和企業貢獻的利益正相關，所以我們很容易理解，設計師的職業后期或者用于解決超級復雜的設計問題， 以對應的價值映襯其收入，偏具體設計能力層面，或者用于承擔全局性企業需求，如帶領設計團隊支撐某個業務線，偏業務理解和統籌方面。
從線性流程到循環往復的迭代過程
我們回顧一個努力的設計打工仔的職業生涯，首先，一個新手設計師從純粹執行的無思考階段，進階到主動思考階段，當他的基礎設計能力不斷進階后，開始拓展視野，思考業務，并在大量的項目鍛煉中形成自己的一套成熟的設計方法論，從設計思考流程到具體的設計流程，從而進階到被動思考階段。但這是一個理想化的描述，真實情況是，設計師會在這三個階段中循環往復，而甚至有些設計師可能會在前兩個階段循環往復。
人都有惰性，你我都如此。在主動設計思考階段，因為一次小長假，因為種種原因，我們可能會退步回無思考的階段。持續性學習是一件 令人興奮的事，也是一件需要莫大毅力的事情。技巧經驗會隨著時間消磨，這是設計師需要警惕的問題，因為這個行業就是如此，我們只能變化，只能持續不斷的學習。
而當將經驗與成體系的思考范式內化后，設計師會養成核心的通用設計解決問題的能力。此時，設計師期去接觸一個新的領域，不再需要從0開始，而是可以使用自己積累的通用設計能力，來指導和規范化新的設計領域的需求，并快速融入該領域。而新的領域的經驗與視野會被納入你的整體設計理解中。
從主動思考，到經驗內化，不斷脫離舒適區，納入新的設計領域、新的視野維度，在這個過程中使個人的通用設計能力螺旋進步。
最佳啟動：消滅設計的不確定性
我知道，我的讀者中有很大一批人都處于設計能力良莠不齊，沒有系統的設計思路與設計流程，介于初中級設計師之間的狀態。而當今國內的設計領域也是如此，初中級別的設計師完全飽和，而企業對高級體驗設計師又求而不得，這種人才斷層既有培訓爆火下的積弊，也和設計門檻與崗位收益相關，大環境無法改變，能改變的只有自身。
在這里，我總結一個更簡單的設計思路，只要你按照該方法去執行和反思，應該會有很大的收獲。即從今天開始，對你所接到的每個設計需求都提出唯一一個標準——消滅不確定性?，F在停下來詢問自己，你接到的每個需求，對于你輸出的設計結果，你認為其最終效果是確定的嗎？換言之，你認為你的設計真的解決了該需求的問題了嗎？
你只需要把你個需求設計的思考分為設計前和設計后。
設計前請思考，我如何設計這個需求能確定以及肯定的解決這個問題，沒思考清楚前不要動手設計，想到第一個方案后也不要動手設計，繼續思考，延遲設計決策。
如果你乍一想到的方案自己都認為模棱兩可，那不要執行設計。此時發揮主觀能動性去思考，我如何能夠獲得相關信息，來輔助我做出這個設計決策，我需要去參考一些競品？我需要列出目前存在的疑問點，或者我無法解決的問題點去詢問設計專家設計leader？或者我把場景，整體的體驗流、用戶操作流都列出來，然后繼續埋頭探索方案？
千萬千萬不要在方案還沒想清楚前就開始設計，這將輸出無意義的方案，且浪費大量時間，千萬千萬不要在想到第一個方案后立即開始設計，這將不會給你帶來任何進步，以后遇到相同場景你也僅有一個可選方案，千萬千萬不要忽略競品忽略他人閉門造車。
千萬千萬試著思考盡可能多的方案，乃至輸出多個方案（僅指體驗設計類，而不是視覺設計）。作為體驗設計師，必須鍛煉的技能是方案演繹能力，在腦海中演繹可能的方案，如果有精力則可以借助工具甚至把演繹過程記錄輸出。 如下方我進行的一個需求的方案演繹與思考。
設計前保證方案確定性，第一關要能夠經受自己的邏輯考驗，當你探索多個方案后最終確定了一個符合業務場景，同時體驗良好的方案，作為設計師自己給該方案打上一個“確定”的標簽，此時再去執行并輸出，而這過程中的思路，從糾結到決策都是最終設計輸出的關鍵證明，既能提高設計說服力，又能鍛煉個人能力，而這正是初級設計師容易忽略的部分。
設計后的確定性則是指，產品還原與產品驗證方面。產品還原度是設計稿的視覺確定性，確保開發還原的線上效果與設計一致，這不僅僅要靠開發的努力，更要有設計師的具體標注說明的輔助。驗證則是產品上線后的必要環節，不論是預先根據業務指標設定埋點，還是設計師通過各種途徑獲得用戶反饋，最終都要保證你所設計的產品體驗的確定性是達標的，確定解決了需求提到的問題，確定能滿足用戶需求。若沒有，則重復這個過程，重新思考然后設計。
作為設計師，應該理解自己也能作為設計對象。在我看來，設計師就是遇到一個問題解決一個問題，遇到兩個解決兩個，直到面前再也沒有問題。所以當不清楚自己該如何設計，下一步該如何做時？你只需要思考，把解決當前的迷惑作為一個需求，去思考，深入思考，列出所有可能性，不管是百度還是詢問同事查閱資料，總歸在思考后，你會有所收獲。
結語
最后，我們一直在思考，在定義，到底什么是設計？
我自己一直遵循的理念是——設計解決問題，形式追隨功能。
而有人說設計是做選擇（決策），有人說設計是永遠做正確的事情。
事實上這些說法都有其正確性，也都有各自的評價標準，因為場景，趨勢，市場各種因素都在發展變化， 設計最終要兼顧場景兼顧各種利益相關者，在正確的時間做正確的選擇并最終做到正確的事情。
解決問題有多個方案 ，設計師需要在其中做出抉擇，選擇最佳方案，最佳方案如何判斷的？對當下場景，對主流用戶，對更多利益相關者來講是更正確的選擇。那它就是最終方案。
當設計被置于真實的環境，真實的市場下 實際上其傾向性和評價標準一直在發展變化從最初重視覺到重體驗再到重商業。設計傾向性一直在變就像設計潮流，唯一不變的是設計師面對復雜的場景和問題時一如既往的優雅的解決問題的思路，并幫助設計師讓世界變的更美好。
文章來源：UI中國 作者：AI-玲玲
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
降本增效一直是為B端賦能的首要宗旨，那么我們該如何從設設層面為用戶提高表單錄入的效率呢？
什么是表單頁
表單都是界面中最 常見、最 重要 的組件之一，屬于 數據錄入 板塊。
表單是2B產品“管理”的第一步。軟件/系統/平臺本身是沒有信息的，像是一個空的架子，表單是用戶向系統輸入信息的一種非常重要的手段，只有用戶向系統添加了豐富的信息，系統才能實現其價值。
表單是信息添加、錄入的通用形式；主要作用是負責數據采集，是最常用的信息錄入工具，隨著互聯網興起，特別是最近幾年B端的興起，表單的重要性顯得越來越突出。
表單的設計原則
- 充分考慮用戶填寫表單的目的，區分必填項和非必填項，刪減不必要的表單信息（例如：填寫了身份證就無需再填寫出生日期，因身份證信息內包含出生日期，系統自動識別即可），確定完表單內容。必要的時候對信息分組，表單項并非從上到下無序羅列，而是根據表單內容，按照一定的邏輯或者用戶熟悉的模式順序，對表單項進行排序和分組，才能讓用戶瀏覽和填寫流暢且。
準確- 信息表達要準確無誤，避免歧義，提示說明要合適，不要給正確的廢話，例如：填寫備注的提示用“請輸入備注”沒有意義，換成“不超過100字”更有助用戶對表單的理解。
一致- 組件的規范和操作的規范同樣重要。同一套系統同一個組件使用一個樣式即可，這樣才能保證頁面的視覺統一。同一個功能按鈕，在A頁面點擊給的彈窗，在B頁面也同樣要為彈窗。
易懂- 給予高質量的信息提示及反饋，如果需要輸入某種特殊格式，請給出具體要求（例如：密碼長度8-20位)；錯誤提示的時候要給用戶錯誤的具體內容（例如：登錄時不能單純去提示“您輸入的信息有誤”，需準確提示是賬號格式錯誤，還是密碼長度錯誤）。
我們先看看表單主構成，表單主要由這5部分構成：
分組標題：表單項較多的情況下建議分組，分組標題有引導用戶完成表單填寫的作用。
表單標簽：也就是填寫或操作內容的標題。標簽規范的方式時標題后帶冒號，還是不帶冒號呢？這個其實都可以，沒有硬性的標準，自定義一個規范去執行就可以了。
表單域：表單是用來數據采集的容器，也可以視為一個對象。包含了文本框、多行文本框、密碼框、隱藏域、復選框、單選框、下拉選擇框和文件上傳等，用于采集用戶的輸入或選擇的數據。
提示信息：分為說明性提示信息和操作反饋提示。提示信息可以放在表單域里邊（例如：備注的提示“不超過100字”），也可以在表單域或后邊，還可以收進“問號icon”里，鼠標hover后給氣泡提示展示信息即可。
操作按鈕：操作按鈕為頁面的全局操作，為滿足用戶隨時對表單進行操作的需求，操作按鈕會懸浮在頁面底部。一般情況按鈕最多只有一個主按鈕，可以有多個次按鈕。
(1) 分類
左標簽：優勢-節約縱向空間，信息表達明確，多用于web端；劣勢-橫向空間利用率不高，不適用移動端等狹窄空間。
頂標簽：優勢-視覺舒適，節約橫向空間；劣勢-縱向空間利用率不高。
行內標簽：優勢-最節省空間，多用于注冊登錄等字段少的表單；劣勢-輸入時和輸入后標簽消失，令用戶迷茫（可優化為浮動標簽，在光標鍵入時，標簽展示輸入框上），字段多的表單不建議使用行內標簽及浮動標簽。
(2) 對齊方式
左對齊：從左至右的閱讀順序，符合人們的閱讀習慣，一般用于詳情的陳列。
右對齊：也被稱為“冒號對齊”，右對齊使得標簽和輸入之間的距離固定，有明確的視覺關聯，操作效率高，非常適合表單錄入。
表單域大致分為以下5個大類：輸入、內容選擇、日期時間選擇、數值范圍和上傳。
選擇適合的控件，不光能在視覺上做到統一規范，還能提高用戶操作效率。
(1) 輸入
文本框：選擇適合的大小，它的大小應該向用戶暗示所需輸入內容的長度，以此減輕判斷負擔（注意：文章類超長文本不適用于長文本輸入框，建議使用富文本編輯器）。
特定前/后綴：涉及到金額輸入時，當用戶輸入的金額超過千時，出現千分位最數據進行分組，方便用戶快速識別金額。
帶icon或按鈕：“日期選擇”和“時間選擇”一般都附帶icon，便于用戶快速識別。帶按鈕的表單項在“密碼輸入”用的最多，可做隱藏密碼和顯示密碼的切換用，因為盲輸及可能會出錯。
(2) 選擇
內容選擇：含單選、多選、選擇器（常用的有下拉單選/多選）、級聯選擇（多層級聯動選擇）、樹選擇、穿梭框、開關。
1、單選框、復選框：一般用于選項不多且相對固定的情況，選項控制在6個以內為宜，用戶可以一眼看到所有內容。單選框只能是其中一個選項，多選框則可以選擇其中一個或多個選項。
2、開關：使用開關控件的條件是選項的性質互斥（例如：是和否、打開和關閉、開啟和禁用等）；
3、選擇器：當選擇項超6個，就需要考慮用到選擇器了。下拉列表是網頁中一種最省頁面空間的選擇方式，單擊下拉按鈕后能看到最多展示的8個選項，少于8個則顯示實際個數自適應，多余8個則出現滾動條。下拉選擇器根據屏幕位置決定向下展示或者向上展示。
選擇器適用廣泛，同類選項（例如：選擇客戶、商品名稱、貨物編號等）、增量選項（例如：年份選擇）。
4、級聯選擇、樹選擇：二者都屬層級選擇，區別在于級聯選好選項后框內顯示的是含層級的內容選項，且只能選擇需最子集選項（例如：江蘇省/蘇州市/工業園區，不能選擇江蘇省，因為前面的選項只為導航至最子集），而樹選擇框內展示的是單個選項的內容，不展示層級，但可以選擇任何層級（例如下圖：浙江?。?
日期及時間選擇：分為日期選擇、時間選擇、日期時間選擇，可以是單個時間，也可以是時間區間；他們很特殊，只為日期和時間選項而生。
1、日期、時間選擇：當用戶需要一個時間/日期，可以點擊標準輸入框，彈出選擇面板進行選擇，或者輸入時間后自動定位到該選項，無需手動選擇。
2、日期時間選擇：相當于將日期和時間這兩個選擇項集為一身，在同一個選擇器里選擇（年月日時分秒）；下例相當于兩個下拉框切換使用，步驟1先彈出日期選擇框選擇年月日，選擇好日期后點擊“確定按鈕”旁邊的“選擇時間”，則切換為步驟2的時間選擇框。
數值范圍：
1、滑動輸入器：滑動型輸入器，展示當前值和可選范圍，通過拖動滑塊在一個固定區間內進行選擇。
2、步進器：也稱為計數器，僅允許輸入自定義范圍內標準的數字值，當自定義標準數字值為整數時，輸入小數點后回車，帶小數點的數字只保留整數呈現。上下按鈕也不是每點擊一次數值±1，可以設置跳每點擊一次±N，N可以為任何數字，也可以為小數。
(3) 上傳
文件、圖片上傳：第一種情況是上傳圖片和文件合在一個上傳控件里；第二種情況是區分了圖片上傳和除了圖片之外的其他文件的上傳，這種情況下的圖片成功上傳后是有縮略圖的；根據需求選擇其中一種即可。要注意的是上傳有四種狀態：上傳前、上傳中、上傳后的成功狀態、上傳后的失敗狀態，UI都需要設計出來，一個都不能少。
(1) 占位符
占位符就是先占據一個固定的位置，等著用戶往里面添加內容的符號或文字。在鍵入信息前，出現在輸入框和下拉框里的提示信息就是占位符。占位符需要注意的是，要避免使用“正確的廢話”，因為給不到用戶任何提示幫助，如果表單項沒有制定規則，可用表單項編輯方式占位“請輸入”/“請選擇”，以新增商品為案例：
(2) 幫助信息
幫助信息和占位符類似，也是在輸入編輯前給用戶的提示信息。和占位符不同點在于“幫助信息”不占據輸入編輯的位置，不會因為鍵入信息后消失，屬于表單中的常駐信息。三種方式可以同時運用在一套系統內，視當前表單情況選定。
(3) 校驗信息
校驗信息是在輸入后或者提交后，系統對編輯的信息進行的校驗，分為前端校驗和后端校驗兩種。
前端校驗：一般校驗顯示錯誤和格式錯誤：必填項、（郵箱、電話號、地址）格式、密碼強度等?？焖俜答?，直接提醒用戶錯誤內容，讓用戶及時知曉并更改。
后端校驗：唯一性驗證、驗證碼、敏感詞等，觸發校驗請求后系統會去數據庫查詢校驗信息，再給予用戶相應的反饋。
(1) 分布的位置
表單頂部、表單底部：用于放置全局按鈕，兩個位置的功能按鈕是一樣的，只是出現的條件不同。默認顯示表單頂部按鈕，當頂部按鈕因為頁面上滑被遮蓋了，底部按鈕才懸浮在窗口底部。目的在于用戶無需上下滑動到固定位置才能對表單進行操作，省時增效。
跟隨表單項：這種情況很少用到，一般是需要校驗的情況下使用，或者可手動增減的表單項。
分組底部：一般是對于這個分組進行的操作按鈕。
溫馨提示：當操作按鈕超三個時，可以將相對低頻的操作按鈕折疊收起，點擊或鼠標hover“更多操作”時下拉展開顯示所有按鈕。
(2) 閱讀順序、按鈕層級、對齊方式
其實這三者的規則都是一樣的，當按鈕右對齊頁面的時候，閱讀順序自然是從右向左，而按鈕層級也是從右向左遞減，比如頂部的提交、保存、取消三個按鈕；商品列表的“添加商品”和“刪除全部商品”，左對齊頁面，閱讀順序和層級自然也是從左至右。
表單頁面主要的交互方式有四種：原位編輯、氣泡卡片、彈窗/抽屜、頁面跳轉。表單頁面在交互方式的選擇取決于表單容量及表單親密度。
原位編輯是輕量型信息采集表單，適用于表單編輯項較少（盡量低于5個編輯項），且屬于主功能分支的場景。其優點在于操作便捷，隨時啟用與退出，能夠保證用戶對主要功能的操作流暢度。其存在的意義在于完善或者增強主功能的操作，而不是打斷。
使用場景：常用于列表及卡片，詳情內也可以使用原位編輯（例如：詳情內只有A和B可以編輯，且需分別編輯，此時建議用原位編輯進行操作），需要注意的是，盡量不要用在長文本編輯。
激活方式：信息展示區域通過雙擊、單擊、hover或點擊“編輯”按鈕即變為激活編輯狀態。最常見的比如：微信/企業微信修改群名就是單擊激活，列表、表格的點擊“編輯”激活，相比之下hover去激活相對用的少。
與頁面的親密度：親密度高，編輯內容即為展示內容，當編輯內容不止表格內展示的字段數量，且存在聯動關系時，需慎重（例如：“部門”和“班次”屬于上下級聯動關系，列表內只顯示“部門”，而“班次”在詳情頁面顯示，則不適用原位編輯）。
使用場景：常用于條件篩選的設置，點擊或hover后顯示氣泡卡片內容（建議不超過5個設置項）。觸發生效機制可以是設置項點擊即生效，也可以多個設置項選擇后，觸發操作按鈕生效（操作按鈕建議不超過2個），觸發機制可以根據項目實際需求而定。
與頁面的親密度：親密度高，所見即所得，編輯前/后都不遮擋列表，用戶剛剛操做了什么，即在當前展示操作后的結果，讓用戶感受到一切都在掌握之中，不會出現斷裂感，交互很友好；
(1) 彈窗
雖說設計上對彈窗的使用都是持謹慎態度的，但希望大家也不要談彈窗就色變。彈窗的好處在于讓用戶更聚焦，且不用離開當前頁面就能更快速更容易完成任務。
其實該使用彈窗的時候也是要用的，特別是在B端，如果彈窗能解決的問題，不建議頻繁的跳頁面去操作。如下例：下單錄入涉及添加產品，而產品信息字段又很多，不是一個模糊搜索就能解決的，此時建議使用彈窗而不是跳頁面去操作。來回跳頁面頻繁刷新，不如用彈窗選擇操作更為簡單，在當前頁的彈窗選擇產品，再將產品信息帶入當前錄入頁面，此流程更符合用戶操作時的心理預期。
使用場景：所有頁面均可，3個以上的錄入項即可使用彈窗；需要注意保持交互一致性（例如：在列表“新增會員”點擊觸發是彈窗，在其他頁面也同樣要是彈窗）；當然也有特殊情況，例如：快捷新增時只需錄入一個名稱，可以先使用快捷操作添加極少的信息，后續在編輯頁面進行補充；
與頁面的親密度：可以有強關聯，也可以沒有關聯。有強關聯指的是，比如說：點擊“新增會員”按鈕彈出來的此彈窗，在其他也要用這個“新增會員”名稱，避免用戶迷茫（當然了，很多新增和編輯其實用的同一個彈窗，這個特殊情況除外）。沒有關聯是指，可以在列表頁面使用“新增會員”彈窗，也可以在工作臺或者其他有需求的頁面去使用“新增會員”彈窗。
(2) 抽屜
抽屜彈窗也被稱為側彈窗，彈窗抽屜和彈窗很類似，使用場景和親密度都是一樣的。相比彈窗，抽屜的側邊彈出的交互方式，其操作成本和用戶使用心理負擔會小很多。
注意事項：如果系統大部分用的彈窗，就優先選用彈窗，如果表單內增加了更多字段，可以換成抽屜彈窗；
使用場景：超出了彈窗/抽屜的承載量，就要用到頁面跳轉了，一般一級模塊的設置項也會用到頁面跳轉，因為會牽一發動全身。還有初始化入駐也需要跳轉頁面進行操作，不光因為需要提交大量信息，還因為各種認證審核需要一項一項進行，此時用抽屜和彈窗承載內容顯然不合適，因為彈窗和抽屜，代表著快速完成。
與頁面的親密度：跳轉了頁面，不管是新開頁面還是刷新原頁面，與原頁面的關聯性已經沒那么強了，只能說他們屬于同一條路徑下不同頁面。
根據內容的多少及親密程度來決定，我們設計時應選用哪種交互方式，或者可以直接根據內容承載量做判斷也是可以的，從少到多依次此為：氣泡卡片-原位編輯-彈窗-抽屜-頁面跳轉。
排版布局的方式有四種：平鋪、分組、標簽頁、分步驟。根據內容項的多少及實際需求相應合理的布局。
輸入信息的分類，是有效的減少用戶操作疲勞度的方法。分類的維度有多種，根據表單輸入內容的相關性、內容的所屬類別，可以將同類型的數據統一輸入，減少用戶輸入信息的跨度，提高輸入效率。
使用場景：平鋪顧名思義就是指表單項不做分組，全部平鋪展開，很多注冊和登錄都是這種布局。適用于表單項少，或者多但表單項之間親密性很強，就無需額外分組，直接將表單項平鋪開展示，簡單明了。
對于內容過多的表單輸入頁面，分組、分模塊的排版方式讓用戶感覺更友好，不是密密麻麻一大片，讓人喘不過氣來，而是有條理的布局，張弛有度，疏密有致。用戶可以在填寫好一段內容后進行心理上停頓休息，減少視覺疲勞和心理壓力。
(1) 標題分組
使用場景：超過了7個設置項，且較為復雜的表單，標題分組之間的關聯性較弱，就可以去分類歸納表單信息，位的是降低用戶的認知負擔，提高用戶體驗。注意：分組內組內設置項要有強關聯性，否則不能歸為一組，不能因為字段多，為了分組去分組。
(2) 卡片分組
使用場景：7-15個設置項，用標題分組不足以給信息做層級區分，為了讓用戶在操作時更聚焦，也需要給用戶更明確的操作引導，即可使用卡片分組。
卡片分組之間關聯性更弱，分類更明確，多個設置項，多個分類。需要注意，一個表單項不要分過多的卡片分組，不能每兩項做一個分組，這反而會造成用戶視覺壓力和操作負擔。
使用場景：當標題分組和卡片分組都不足以對表單進行分組時，就可以考慮用tab切換了。每個設置都包含多個錄入，且使用了標簽。
注意事項：tab標簽的填寫沒有先后順序的規則，標簽頁彼此之間沒有特定的關聯性，可獨立去設置。也就是說先填寫tab1還是先填寫tab2，對表單的其他tab項沒有任何影響，不存在聯動關系。
標簽頁對應的詳情展示：一項一項上下鋪出來，但如果表單詳情信息過長，可以考慮將錨點定位，點擊錨點定位的標題即可自動定位到該區域，方便用戶快速定位瀏覽位置。
使用場景：對輸入表單進行分步驟的處理，可以降低用戶的操作頻率，給與用戶一定的休息空間，用戶會有階段性的成就感，同時分步驟的輸入還有利于減少信息的錯誤率。如果輸入表單的內容較多，同時輸入內容有邏輯上的先后順序，此時可以考慮將輸入表單進行分步驟處理。
利用步驟條，將大型、復雜任務拆解為多個部分，并按照相關性分組，可以提高用戶處理的專注度，降低頁面的復雜性，減輕用戶操作負擔，降低用戶出錯率，提高用戶體驗。
根據內容關聯性的強弱程度來決定，我們設計時應選用哪種布局方式，或者可以直接根據復雜程度做選擇也是可以的，從弱到強依次此為：平鋪-標題分組-卡片分組-標簽頁/分步驟轉。
提高易用性的方式有以下四種分別為：視覺清晰、信息降噪、智能、準確易懂，每個表單，每個頁面都要應用這四項準則，不光是在表單頁面，所有頁面都適用。
布局方式-單列布局：常見的表單布局為單列信息展示布局，比如：蘋果、飛書、釘釘、有贊、微盟等首選使用單列布局進行頁面排版。設計中盡量采用單列布局，是為保證用戶的視覺動線流暢，不容易遺漏信息；
在輸入項較多時，每次填寫完一項都要鼠標選中下一個輸入框，很容易讓用戶失去耐心，而單列布局恰好能解決這個問題并提高用戶體驗，輸入完一項按enter鍵可快速切換至下一項，提高用戶操作效率。
當然了按Tab鍵也是一樣的效果，只是，一般情況下，大眾都更習慣也更熟悉回車鍵的位置，需要注意的是，長文本輸入框的屬性里回車鍵是文本換行的意思，需要區別設置兩者的操作機制。
布局方式-橫向布局：橫向布局也是單列布局，是它的發散版本。如果出于業務方復雜需求的考慮，必須在橫向增加內容，那增加的表單項一定要和前表單項有關聯，才可作為分組橫向排列，還需注意不能出現Y軸平行豎向分組（如下圖），避免用戶迷?；蜻z漏信。
(1) 合理設置必填項
正常情況下，我們標示“*”標就是為了提示用戶此項必須要填寫方能提交單據。
但當一個編輯頁面的必填項非常多時，就可以無需標注必填，只標明哪些是非必填項就行。
當編輯頁全部都是必填項時，可在大標題處用標示必填即可。
(2) 折疊不重要非必填信息
在能完整獲取需要信息的前提下，輸入項越少越好，當表單頁很長，且有些信息非必填，或者說填寫后的意義不大。這樣的情況下可以考慮將非必要信息折疊收起，點擊“展示更多”下拉展開全部表單項，讓用戶可以選擇性錄入不重要的信息。
(1) 智能填寫
根據上下文信息可自動獲取的，無需用戶再次填寫。如下例：通過客戶名稱數據庫可自動匹配客戶手機號，或者通過手機號匹配客戶名稱。填寫郵寄信息的時候，只需選擇省市區，郵政編碼便自動填充，減少了用戶查找郵政編碼的繁瑣（甚至可以提議“郵政編碼”字段直接去掉）。而生日和性別都可以在身份證號內提取。
(2) 智能排序
默認高頻：當選擇器內容超過5個選則項時，可以對內容選項進行一定排序規則（首字母排序、數字排序或設置默認高頻選項等），方面用戶提前預知選項的大致位置，檢索找到相應的選項。
(3) 智能聯想
智能聯想是給予用戶鍵入字段的聯想功能，用戶少量輸入后進行選擇。錄入方式由原來的輸入變成半輸入后選擇，減少用戶的輸入成本，提高用戶操作效率。
自動搜索：當下拉選項超過16個時，建議加入輸入選擇功能，用戶可使用下拉選擇，也可以輸入關鍵字后智能匹配顯示對應的選項?；蛘呖梢栽偌由闲畔⑴判?，根據點擊頻次進行排序，高頻選項前置。
后綴聯想：一般用于郵箱信息的錄入，當輸入內容后，自動將默認高頻的郵箱后綴作為補充數據填充在后方，減少用戶的輸入。
操作直觀：去除冗余且無用的部件：切換“開關”操作后會立即生效展示結果，無需與操作按鈕搭配使用，避免造成用戶的誤解，導致體驗不友好。
準確的錯誤提示：反饋提示是頁面系統對用戶的輸入的內容進行的校驗，并對校驗結果予以展示的提示形式?？煞譃榍岸诵ｒ灪秃蠖诵ｒ瀮煞N。
錯誤提示的時候要給用戶錯誤的具體內容，而非簡單粗暴的錯誤提示。例如：登錄時不能單純去提示“您輸入的信息有誤”，需準確提示是賬號信息錯誤，還是密碼校驗錯誤。
前端校驗：也被稱為“即時校驗”，一般是校驗顯現的數據內容，比如字符長度、格式（是否包含非法字符）、是否為空等。該方式的校驗條件多在本地，無需實時向服務器發命令而得到反饋。
后端校驗：包含“局部校驗”和“全局校驗”，局部校驗：在注冊賬號時，輸入完整用戶名以后，提示用戶名是否可用，則為局部校驗反饋。全局校驗反饋：多指在輸入完成提交或者階段性完成（分步驟跳轉下一步）時，系統給出的校驗反饋。在用戶操作反饋動作按鈕后，界面在相應位置（一般為單個輸入框的下方或右側）一次性給出對應的錯誤提示。
文章來源：UI中國 作者：AI-玲玲
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
大家好，今天給大家帶來的是配色干貨系列之第三期?。〕壐韶洠?！
前兩期地址傳送門：
前面兩期，主要分享審美的培養與提升、配色的技巧與習慣。本篇更為實在，主要分析有哪些經典的萬金油配色組合，滿足日常工作使用。
看完這篇文章，相信你對色彩的掌握，能更深一步~~干貨建議提前收藏！喜歡記得給咱們公眾號添加星標喔~~
1）經典搭配-黃配黑
色板 顏色組合
Yellow & Black
黃配黑的色系非常經典耐看，普適度也很廣。我在公眾號里寫的一些文章，也經常采用這套配色。
這套黃與黑的組合很適合一些生活、社區、人文、情感等場景進行使用，情緒溫和。如果你的設計，會被頻繁的在這些場景里進行使用，那么不妨使用一下這套黃黑配色試試看。
比如以下這些案例：
這里也給出我經常使用的兩組黃黑色板，一組更為活潑鮮艷，更具娛樂化。一組更為內斂，充滿文化氣息。
推薦組合色板①：
推薦組合色板②：
2）科技搭配-藍黑白
色板 顏色組合
Blue & Black
這套色彩就不多說了，藍色可以說是我非常喜歡的顏色之一了。從咱們公眾號的logo，還有日常發文的封面，相信大家就能感受到。
藍黑白搭配，可以說顏色是百看不膩，并且藍色色相偏冷，沒那么多情緒傾向，所以更能夠讓人心平氣和的閱讀信息，提升效率。因此也經常被用到科技、數據、社交、工具等應用場景。
比如以下幾組案例：
關于藍黑白，我也給大家推薦兩組我很喜歡的色號組合。一組更為明亮，顯得年輕活潑些，而另外一組則更加深沉商務，更為內斂。
推薦組合色板③：
推薦組合色板④：
3）CP組合-紅藍配
色板 顏色組合
Red & Blue
這套顏色組合，在近幾年可以說是非常流行了。顏色比較淺的，有經典的馬卡龍色組合，被廣泛運用到年輕社交等工具場景。而顏色重點的，直播娛樂等秀場平臺，也都大量可見其身影。
紅藍搭配，顏色的相撞導致色彩充滿了熱情與朝氣，社交娛樂化產品的場景，非常適合這套色彩組合。
比如下面這些案例：
這里也給大家分享兩套紅藍搭配的色板，一套略顯溫柔，另外一套則熱情如火。
推薦組合色板⑤：
推薦組合色板⑥：
4）經典國潮-赤金組合
色板 顏色組合
Yellow & Black
這幾年國潮風格也越來越受到大眾所喜愛，而在國潮色彩的搭配中，赤色與金色的搭配。一方面紅色中國味特色濃厚，而搭配上高檔的金色，瞬間濃厚的精致國民畫風，就出來了。
比如每年的集五福，就是非常經典的赤金組合，精致的同時，還非常接地氣兒。
關于赤金，我也從潘通色里挑選出了一組很經典高檔的色彩組合，色板色號也分享給大家。
推薦組合色板⑦：
推薦組合色板⑧：
5）尊顯高貴-黑金色
色板 顏色組合
Yellow & Black
黑金組合相比其它顏色更顯高貴，在很多知名的APP里面，也都是能看得到，比如淘寶的88vip，京東金融的小金庫。這套色彩組合往往代表著商務、尊貴，高級，既內斂又隱蔽，通常被用到各類會員、金融等尊貴體系中。
比如以下這些案例
關于黑金里面的金色，也分為兩種，一種顏色更為純金，還有種偏向于玫瑰金，玫瑰金的色彩相對要更溫和一些，沒那么冰冷。這兩套色板，我都分享給大家啦~~
推薦組合色板⑨：
推薦組合色板⑩：
6）其它色彩組合
色板 顏色組合資源下載
Yellow & Black
除了我上面分享的這五套經典配色，還有很多其它的色彩組合，也都非常優秀好看，比如上次分享的這些：
這段時間的積累收集，又更新了下面這些新色板。
還有很多，就不一一展示了。方便大家收藏，我把這些色彩組合的圖片+色板文件，都進行了打包，方便大家直接借鑒這些色彩。
文章來源：UI中國 作者：UX小學
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
色彩是影響用戶最簡單和最重要的一個因素。研究表明，人們只需 90 秒就能對一種產品做出下意識的判斷，而其中高達 60%以上的判斷僅基于顏色。因此，選擇合適的顏色對于改進產品的轉換率和提高產品的可用性是非常有用的。在沒有文字的場景中，顏色的搭配非常重要。如何配色可以使設計感更強，如何配色更好看，哪些配色不好看，解決這些問題就需要學習色彩理論。
我們身處在一個多彩的世界中，物體的不同顏色，會讓我們產生不同的情緒。色彩，即光從物體反射到人的眼睛所引起的一種視覺心理感受，按字面含義上理解可分為色和彩?！干故侵溉藢M入眼睛的光傳至大腦時所產生的感覺，「彩」則指多色的意思，是人對光變化的理解。色彩的基本理論雖然老生常談，但在 UI 設計中具體怎么運用，還有關于色彩的性格和含義，都是我們需要了解的。因此在學習 UI 配色之前我們先來了解色彩的基礎知識。
原色
所有的色彩都源自“紅黃藍”三種原色，很多人誤以為三原色是“紅綠藍”，其實不是。紅綠藍是顯示上的三原色，計算機屏幕的顯示是色光三原色（紅 red，綠 green，藍 blue）即 RGB 組成的，每一個像素的顏色都用三原色值來顯示，與美術上的三原色不一樣。原色是其他顏色調配不出來的。把原色相互混合，可以調和出其他種顏色。
雖然 RGB 在顯示設備上表現良好，但并不夠人性化。因為人們判斷顏色，往往是通過：這是什么顏色？是不是太艷了？是太亮了還是太暗了？這樣的感官維度，而很難通過紅綠藍的亮度層級去判斷。所以人們后來基于 RGB 衍生出了 HSB 模式和 HSL 模式。
印刷三原色為青（Cyan)、品紅（Magenta)、黃（Yellow)。是減色模式，混合為深灰色，并不能產生黑，所以在印刷時加上黑色油墨，才能產生純正的黑，就是 CMYK 顏色模式。
間色
又叫“二次色”。它是由三原色兩兩混合調配出來的顏色。紅與黃調配出橙色；黃與藍調配出綠色；紅與藍調配出紫色，橙、綠、紫三種顏色又叫“三間色”。在調配時，由于原色在份量多少上有所不同，所以能產生豐富的間色變化。
復色
也叫“復合色”。復色是用原色與間色相調或用間色與間色相調而成的“三次色”復色是最豐富的色彩家族，千變萬化，豐富異常，復色包括了除原色和間色以外的所有顏色。例如，黃色與橙色混合得到橙黃，紅色與紫色混合得到紫紅。
冷暖色
最后由三種原色、三種間色和六種復色組成的系統就稱為十二色環，從紫色至黃綠為冷色，黃色至紫色為暖色。冷色令人聯想到天空、海洋、冰雪等，產生寒冷、理智、寧靜等感覺；暖色則令人聯想到太陽、火焰、熱血等，產生溫暖、熱烈、危險等感覺。
雖然可以用「冷」、「暖」色系來劃分色彩，但配色的變化卻有千種萬種。借著色彩的組合方式，從「非常冷」到「涼爽」到「暖和」再到「炎熱」都可以用不同的配色組來表現色彩的印象。
不同的色輪由不同的人發明，他們對于色彩的見解不一樣，因此創建出來的色輪用途也不一樣。比如：伊頓色輪又被稱之為美術三原色，是由顏料的三原色混合疊加而成；RGB 色輪主要運用于電腦、手機、平板等一系列科技產品，RGB 的三原色是光的三原色；CMYK 色輪主要用于印刷領域。
豐富多樣的顏色可以分成兩大類，即有彩色系和無彩色系。彩色系的顏色具有三個基本特征：色相、明度和飽和度，在色彩學上被稱為色彩三大要素或色彩三屬性。
色相（Hue）
色相是自然狀態下的色彩，是色彩的相貌。簡言之，色環上沒有改變明暗的色彩。色相是色彩的首要特征，是區別各種不同色彩的標準。例如紅、橙、黃、綠、青、藍、紫就是其中不同的基本色相。黑色是沒有色相的中性色。不同的色相在人眼中的差異是色相本身對應光的波長不同而造成的。紅色波長最長，紫色的波長最短。
飽和度（Saturation）
飽和度是色彩的純度，他表示顏色中所含有色成分的比例。增加飽和度，色彩會變得更強烈、鮮艷生動；降低飽和度，顏色中灰色成分越大，色彩會變得暗淡乏味。當一種顏色摻入黑、白或其他色彩時，純度就產生了變化，當摻入的顏色達到很大的比例時，人的眼睛就無法感知出來了。
飽和度為 0 的顏色為無彩色，就是黑、白、灰。數值越大，顏色中的灰色越少，顏色越鮮艷。飽和度高的地方給人感覺靠近，而飽和度低的地方則給人的感覺很遙遠。高飽和度和低飽和度的色彩都給人堅硬的感覺。
明度（Brightness）
明度，指色彩的明暗度，反應的是色彩的深淺變化。以自然界為例，一些物體在早晨和晚上的色彩不同。如樹木和山脈，早晨色調淺；傍晚因為光線減少了，色調變得偏暗。距光源越近的物體，明度越高，反之，則明度越暗。
明度在 UI 設計中扮演重要的角色，明度運用得好，可以實現好的對比效果。明度達到 100%時，色彩就會變成白色（黑白模式下）；明度是 0%時，就會變成黑色。色彩的明度變化往往會影響到純度，例如藍色加入黑色以后明度降低了，同時純度也降低了；如果藍色加入白色則明度提高了，純度卻降低了。
完整的 UI 配色應包含主色、輔助色和中灰色。主色通常與品牌色一致，輔助色一般選擇與主色色調一致且能拉開層次的顏色，強調色選擇與主色相對立的互補色。下面我們來學習幾種常見的配色方案。
單色
單色是指某個色彩的明度變化，即在色彩上疊加 10%-90%白色或黑色得到的一組顏色。單色搭配由于彼此之間色彩相同，因此能和諧共處，但因較為樸素也就不容易引人注目，而且會給人一種單調的感覺。單色配色在色彩變化上也適合長時間閱讀，顏色波動較少，比較適合沉浸式交互的界面設計。
蝦米音樂就是單色搭配的最好例子，它將主色橙色用在主要功能入口、標簽欄圖標等所有界面的關鍵元素上，給人非常精致和統一的視覺體驗。
如若想要在色彩變化上融入一點微妙的變化，可以嘗試在色環中選用兩側相近的顏色，這樣色彩層次豐富了而統一感也不會變，稱之為“鄰近色配色”。
鄰近色
是指在色相環中相鄰的兩種顏色，在色相環上相距 60°，或者相隔五六個數位的兩色。它可以在同一個色調中建立起豐富的質感和層次，優點是陽光、活潑、穩定、和諧但不單調，理所當然稱為最安全的配色法則。鄰近色色相相近，冷暖性質相近，傳遞的情感也較為相似。例如，紅色，黃色和橙色就是一組鄰近色。鄰近色表現的情感多為溫和穩定，沒有太大的視覺沖擊。
美顏相機的主色是粉色，將淺粉色和淺紫色作為輔助色，既能信息區分又和諧統一。
互補色
互補色是指在色相環上對立（180°）的兩個顏色，色相環上夾角呈現一條直線，例如黃色和紫色、橙色和藍色、紅色和綠色等?；パa色有著非常強烈的對比度，在顏色飽和度很高時，可以產生許多十分強烈的視覺效果，就會使這兩種顏色都顯得更加鮮明，也將視覺沖擊力強度提升至峰值。這類配色形式優缺點和對比色很相似。常給人一種潮流、刺激、興奮的感覺，把互補色放在一起，會給人強烈的排斥感，搭配不好會很山寨。
Airbnb 的主色為紅色，界面設計中使用主色的互補色「墨綠」作為主色調，給人清晰、簡潔的感覺。
分裂互補色
分裂互補色是指尋找三種顏色，其中兩種互為鄰近色，另一種與它們形成互補色，例如黃色和藍色、洋紅。這種搭配既能保持互補色強烈的對比及視覺上的趣味性，又能讓顏色變得柔和。
36Kr 將藍色作為主色，互補色黃色作為輔助色用在圖標、標簽上，再選擇黃色的鄰近色紅色作為另一輔助色，用在不同的信息上，有助于用戶區分產品信息。
對比色
指在色環上相距 120°～180°之間的兩種顏色，也是兩種可以明顯區分的色彩，包括顏色三要素的對比、冷暖對比，彩色和消色的對比等。對比色能使色彩效果表現更明顯，形式多樣，極富表現力。需要注意的是，互補色一定是對比色，但是對比色不一定是互補色。因為對比色的范圍更大，包括的要素更多，如冷暖對比、明度對比、純度對比等。這類配色形式優點是視覺沖擊力強烈、富有跳躍性、突出、點綴能力強，比如常用作畫面中的點綴色，或與主體固有色成對比關系的背景色，用于突出主體。缺點是大面積使用比較難把控。
馬蜂窩的主色是黃色，對比色藍色作為輔色用在標簽、小圖標上，紅色作為強調色用在價格等信息上。
對比色也不單純是兩個顏色之間的對比，而是色調之間的對比！對比色還包括：補色對比、色相對比、明度對比、飽和度對比、冷暖對比，飽和度越高對比越強烈，明度反差越大對比越強烈。
四元色搭配
四元色搭配在色環上形成了一個矩形，使用不是一對而是兩對互補色。將其中的一個顏色作為主色，其余顏色作為輔色進行搭配可以得出不錯的效果。
四元色是比較難以平衡的顏色，不過搭配好了會非常出彩。不信可以自己用用感受一下，尤其是使用其中一個顏色作為主色，其他的三個顏色作為輔助色的時候。
了解了色彩的基本知識，下面說說色彩和光源的關系。如果想描繪好對象的色彩，那么就必須了解對象的固有色、光源色、環境色及它們之間的關系和變化。
固有色
即物體本身的顏色。是指在光源條件下物體占主導地位的色彩，如紅色的罐子、綠色的植物等。物體的固有色并不存在，在繪畫過程中為了觀察方便經常引入“固有色”這一概念。從實際方面來看，即使日光也是在不停地變化中，何況任何物體的色彩不僅受到投照光的影響，還會受到周圍環境中各種反射光的影響。所以物體色并不是固定不變的。
光源色
物體只有在光源的照亮下才能觀察到它們的色彩。光源有自然光（太陽、天光）和人造光（燈），這些光源都各自具有不同的顏色。太陽光是偏黃色暖色光，月光是偏青的冷色光，陰天則更多的是藍灰色的天光，普通燈光是偏黃色的暖色光。光源的顏色對物體的顏色影響很大，想象一下一個置于紅色光源照射下的藍色物體會是什么顏色。
環境色
物體周圍環境的顏色就是環境色。環境色對物體的影響非常大，如在紅色背景下的白色物體，由于光源打到紅色背景上的背景反射光也會“染”到白色物體上，因此白色物體的部分表面會蒙上一層淡紅色的色彩。所以，設計師在用電腦作圖時也需要考慮并想象環境色的影響。
Lab
Lab 的全稱是 CIELAB，有時候也寫成 CIE L*a*b*。最突出的特點是它的生理特性，一是它包括人眼所看到的所有顏色，是目前為止色域最寬的色彩空間，二是跟人眼一樣，首先看到的是明暗，其次是色彩，可以用數字化的方式描述人的視覺感應，在計算機視覺中廣泛應用。
LAB 顏色空間中，L 表示亮度，取值[0-100]對應[純黑—純白]；A顏色表示從綠色到紅色的范圍，取值[-128—+127]對應[綠—洋紅]；B表示從藍色到黃色的范圍，取值[-128—+127]對應[藍-黃]，正是暖色，負是冷色。Lab顏色空間中亮度和顏色是分開的， L通道沒有顏色，a通道和b通道只有顏色。不像在RGB顏色空間中，R通道、G通道、B通道每一個既包含有明度又包含有顏色。
在表達色彩范圍上，最全的是 Lab 模式（其次是 RGB 模式，最窄的是 CMYK 模式），它彌補了 RGB 色彩模型和 CMYK 色彩模式色彩分布不均的不足。也就是說 Lab 模式所定義的色彩最多，且與光線及設備無關，并且處理速度與 RGB 模式同樣快，比 CMYK 模式快數倍。
Hsb
HSB 和 HSV 是同一個東西，只是名稱不同。在 Photoshop 拾色器上可以看到每個顏色都有一組 HSB 值，H 表示色相、S 表示純度、B 表示明度。色相值為 0～360 度，即圓；純度和明度值為 0～100%，因此，了解 HSB 模式的原理，就能了解色彩的本質。
當我們需要調配同色系色彩，保持色相不變，只需要改變純度和明度即可。如下圖所示的 3 種同色系綠色，他們的色相（H152）都一致，僅在純度和明度上有所變化。
當色相和純度都為 0 時，色彩稱為中性色，也稱為灰度色，即黑白灰。其中，灰不是單指某一種顏色，而是一系列從黑到白的過渡色。
灰度色多用于文字，通常一個應用中的文字不應超過 3 種灰度色。深黑用于標題、正文等主要文字；淺黑或深灰用于輔助、提示性文字；淺灰用于禁用、失效等狀態文字；純白用于深色按鈕文字。
此外，灰度色由于沒有任何色相，始終沉著冷靜，減少對內容的視覺干擾，因此常用于界面背景色，例如 MOO 音樂的界面設計。
Hsl
HSL 色彩模式是工業界的另一種顏色標準，是通過對色相(H)、飽和度(S)、亮度(L)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的。在原理和表現上，HSL 和 HSB 中的 H（色相） 完全一致，但二者的 S（飽和度）不一樣，L 和 B （明度 ）也不一樣。
取一個顏色試試看，先選一個顏色 #0688F9，放入 “HSL Color Picker”，顯示 HSL 數值為：H(208), S(95), L(50)，但是我們放在 Sketch 里面看一下，顯示的 HSB 數值為，H(208), S(98), B(98) 。
HSL 的 H 代表的是人眼所能感知的顏色范圍，這些顏色分布在一個平面的色相環上，取值范圍是 0°到 360°的圓心角，每個角度可以代表一種顏色。色相值的意義在于，我們可以在不改變光感的情況下，通過旋轉色相環來改變顏色。在實際應用中，我們需要記住色相環上的六大主色，用作基本參照：360°/0°紅、60°黃、120°綠、180°青、240°藍、300°洋紅，它們在色相環上按照 60°圓心角的間隔排列。
HSL 相比 RGB 的優勢
我們來做一個基于 HSL 的調色實踐。你可不可以快速說出“海棠紅”所對應的 RGB 色值？如果再加一點橙色進去，把亮度提高一點，色值又是多少？想想那應該是一個介于洋紅和紅色之間的，性感嬌艷的顏色。我們可以假定它在色相環 H 上的角度是 330°左右，飽和度較高，亮度適中，看看那是什么顏色？
em…我們想要的顏色應該再接近紅色一點，讓我們把色相（H）+20°到 350°，現在好多了。
通過改變色相值 H，我們實現了色相從洋紅向海棠紅的偏移。 大感覺接近了，但還是略微有點灰暗，我們可以通過增加飽和度（S）+15%，讓這個顏色變得更鮮活，看起來更亮麗。
感覺還是差點，海棠紅是屬于少女的顏色，應當再嫩一點、通透一點，不會這么強烈。那可以通過增加亮度 L，+10%試試看，嗯，這才是我們想要的顏色。
同理，如果想加點橙色進去， 再亮一點，我們通過心算就大致可以確定色相環的相位和亮度值。在這里，我們需要讓 H 增加 20°，L 增加 5%。
在使用 HSL 調色的過程中，不需要了解復雜的色光混合原理，這是一個自然的、感性的、易于理解的過程。相比之下，RGB 調色方式顯得非常笨拙復雜、難以理解，而 HSL 是多么的友好。
需要提醒一下的是，CSS 代碼里支持的是 HSL，而不是 HSB。如果和前端對接時，UI 給到的是 HSB 的色值，那么最終落地的顏色效果會與設計稿有出入。Photoshop 中的 Hex 和 RGB 顏色可以直接在 CSS 文件中使用，但是 Photoshop 中的 HSB 模式顏色和 HSL 是不同的。
Yuv
YUV，是一種顏色編碼方法。常使用在各個影像處理組件中。YUV 在對照片或影片編碼時，考慮到人類的感知能力，允許降低色度的帶寬。Y 表示明亮度（Luminance 或 Luma），也就是灰度值；U(Cb)表示色度（Chrominance）；V(Cr)表示濃度（Chroma）；通常 UV 一起描述影像色彩和飽和度，用于指定像素的顏色。
采用 YUV 色彩空間的重要性是它的亮度信號 Y 和色度信號 U、V 是分離的。如果只有 Y 信號分量而沒有 U、V 信號分量，那么這樣表示的圖像就是黑白灰度圖像（回想一下小時候看的黑白電視）。彩色電視采用 YUV 空間正是為了用亮度信號 Y 解決彩色電視機與黑白電視機的兼容問題，使黑白電視機也能接收彩色電視信號。
色彩心理學是美術知識學習中非常重要的一部分。他所研究的是色彩通過對人視覺上的刺激，而引發人情感和感官上的變化，通過日常生活中人們對應用色彩的經驗積累而歸納總結出人類對色彩心理上的預期感受。在生活中，色彩心理學對人們對顏色的認知有很大的影響。為什么交通信號燈用紅色表示停止通行而不是綠色呢？為什么大多快餐店用紅色或黃色作為品牌的主色？這都是色彩心理學的相關知識。
雖然紅、藍是受到最普遍喜愛的顏色（通過對 App Store 應用流行顏色分類統計得知）。但并不意味著這一準則可以套用在所有產品上。產品的屬性是什么，用戶定位是什么，要傳達的產品氣質是什么等等，這些都是選擇應用圖標的顏色時需要考慮的問題。世界上第一間 Airbnb 房間是在一條叫 Rausch street 的街上誕生的，因此 Airbnb 的主色被命名為「Rausch」的溫暖顏色。在挑選主色調的時候，4 名設計師前往世界 13 個城市，只為了更好地理解 Airbnb 的理念：熱情、能量和自信，這正是 Rausch 要傳遞的信息。除了 Rausch 以外，Airbnb 還有其它九種顏色，包括 Kazan、Beach、Tirol、Foggy 等等，它們也都是以 Airbnb 的社區街道命名的。
下面來講解每一種顏色都各自帶有什么樣的性格，只有理解了顏色的性格才能正確的使用它們。
黑色
黑色代表著品質、高端、時尚、低調、權威、嚴肅、穩重，是一種充滿質感的顏色。它是所有色彩中最有力量的，能很快吸引用戶的注意力。作為一種無彩色，能讓它和其他色彩百搭，黑色+金黃色，給人一種奢華精致的感覺；黑色+銀灰色，則給人一種成熟穩重的感覺；黑色+紅色，給人一種時尚潮流的感覺。因此黑色是一種永遠流行的主要色彩。
白色
白色代表著純潔、簡單、純真、樸素、信任、開放、雅致，白色常常被認為是“無色”，即不是色彩。單一使用白色通常不會引起任何情感，但是當白色與其他顏色配合使用時，白色能很好的襯托，大量的留白讓其他元素脫穎而出。在界面設計中，作為無彩色的白色，常用于背景色，緩和各種顏色的沖突，以襯托其他色彩，提高畫面明度，提高文字可讀性。
灰色
灰色是代表著睿智、老實、執著、嚴肅、壓抑、沉穩。介于黑色和白色之間，也屬于無彩色，沒有色相也沒有純度，只有明度的變化。它和任何顏色都能很好的搭配，也常常用于背景色或用于突出其他彩色。灰色不像黑色那么堅硬刺眼，他更有彈性，它比黑色更有深層次的力量。因此在畫面中，很少出現純黑，基本都是用深灰色來代替黑色，也可以用淺灰色來代替白色。
紅色
紅色代表著喜慶、熱情、歡樂、斗志、奔放、自信，是一種充滿能量的顏色。這是最醒目和強勢的顏色，一登場即獲得全場的關注，甚至能引起一些生理反應，例如心跳呼吸加快等。紅色最能烘托氣氛，在中國傳統節日里都使用熱鬧的紅色來裝飾，因此也就不難理解每逢佳節各大電商應用活動頁一片紅，為的就是發沖動，引人消費。同時紅色也代表了警示、告誡。所以在界面設計中常用紅色的文字和按鈕來警示用戶慎重操作。
橙色
橙色代表著溫暖、歡樂、輝煌、健康、陽光、年輕、華麗，是一種充滿朝氣的顏色。橙色并不像紅色那樣咄咄逼人，而且它烘托出的活躍氣氛沒有危險的感覺，反而是一種友好。因此越來越多的應用避開常見的紅色和藍色，而選擇橙色的原因。
黃色
黃色代表著信心、青春、聰明、尊貴、輝煌、時尚，是一種充滿活力的顏色。黃色是明度極高的顏色，其鮮亮的色調使它在眾多圖標陣列中顯得尤為突出。盡管在警示效果上沒有紅色那么明顯和強烈，但是還是能給人很醒目和危險的感覺（例如道路警示牌）。同時因為過于明亮，也是一種非常難以運用的顏色，性格不穩定常有偏差，和別的顏色配合使用易失去本來的性格。不過黃+黑的搭配很流行，例如站酷和美團外賣。
綠色
綠色代表著健康、生命、青春、寧靜、自然、和平、安全、舒適，是一種充滿希望的顏色。綠色給人無限的安全感，當情緒低落與消極時看一些綠色，能緩解我們焦躁的情緒。綠色在生活中被廣泛運用，如安全出口的顏色就是綠色，但綠色的飽和度要適當控制，如高飽和度的綠色也會令人興奮，引起注意。
青色
青色代表著堅強、古樸、活潑、清爽、柔和、優雅、希望，是一種充滿靈動的顏色。青色是一種介于綠色與藍色之間的顏色，如果無法界定一種顏色是藍色還是綠色時，這個顏色就可以被稱為青色。豆瓣的主色調是青色，很符合豆瓣小清新的氣質，帶給用戶恬靜的感受。
藍色
藍色代表著冷靜、科技、靈性、自由、放松、未來、理智、純凈、商務，是一種充滿理性的顏色。藍色是天空的顏色，是大海的顏色。在色彩心理學的測試中發現，幾乎沒有人對藍色反感。純凈的藍色通常讓人聯想到海洋和天空，可以撫平內心的傷口，讓人的內心感到平和，有助于人的頭腦變得冷靜。例如 twitter 的主色調是藍色，在社交應用里藍色是一種很安全的顏色，高純度的顏色傳遞了信賴、年輕和溝通的氛圍。
紫色
紫色代表著高貴、浪漫、優雅、性感、幸運、夢幻、時尚、創造性，是一種充滿神秘的顏色。是小孩子和有創造力的人十分喜歡的顏色。紫色的光波最短，在自然界中較少見到，所以被引申為象征高貴的色彩。紫色的明度在所有有彩色的顏色中是的。與不同的顏色結合會展現出不同的風格特色。紫+粉常用于女性化的產品調性，黃色是紫色的對比色。
當我們討論色彩的時候，聊的更多的是色彩的搭配。雖然有些設計師認為有些色彩是一些純粹的美學上的選擇，但是實際上，色彩對于用戶的心理和行為的影響相對更深，最終會反映在用戶體驗和行為反饋上。
當然，色彩理論是一個相對復雜的主題。從用戶體驗的角度上來說，色彩所涉及到的遠不是配色方案這一個維度。通常，我們聊得最多的是不同色彩所產生的心理效應，以及多色彩搭配時，相互之間的影響和可訪問性上的問題。設計師可以將色彩更好地運用到設計中，而無需重新考慮整個過程。一旦設計師掌握了基礎知識，色彩理論中最有意義的部分之一就是學習將更多意想不到的色彩融入他們的設計中。
界面顏色的情感影響不容忽視。盡管有些顏色在 Ui 設計中是“通用的”（例如，黑色，白色和灰色，實際上幾乎所有好的設計中都使用了其中的至少一種），但它們結合使用的顏色可能會對體驗設計產生巨大影響。當然，顏色的使用方式也會對顏色的感知產生巨大影響。以藍色為例，在簡約的布局當中，大面積使用藍色作為主色調，和在大面積白底上使用很小的一抹藍色用來強調 CTA 按鈕，所帶來體驗是截然不同的。
尊重文化差異
人類對于色彩都有著共通的認知，但不同國家對于色彩賦予了不同的含義。紅色在中國象征著喜慶、財富和愛情，而在西方國家被賦予了流血、犧牲、暴力和激進的文化意義，貶義的味道更重一些。而白色與紅色相反，白色在中國代表了死亡、反動和投降，以白色為主的設計常常會被視之為過于「素」，認為不夠吉利。而西方國家卻認為白色高雅、純潔和幸運，因此要根據不同的文化背景，使用不同的色彩，才能更好地降低被誤解的風險。
另外一方面，隨著現代主義運動的普及，白色也擁有了更加現代的特征。在日本，白色甚至和當地文化結合，延伸出更加細膩獨特的精神特質，隨著日本戰后設計領域的發展和崛起，白色在這一地區的含義則更加豐厚。原研哉在《白》一書當中，針對白色的含義和特征進行了非常深入的探討，之后的《Subtle》一書當中，雖是圍繞紙來探討微妙的體驗，但是也沒少提及白色本身的特征。
例如股票交易市場，在國際股票市場通常是綠漲紅跌，這是因為紅色在西方國家代表著財政赤字，綠色代表著財富；而在中國正好相反是紅漲綠跌，這是因為在中國紅色象征著財富。
設計師必須根據產品的目標受眾來審視其調色板的文化含義，這一點很重要。如果產品要面向全球受眾，請確保在使用的顏色和圖像之間取得平衡，以防止負面的文化內涵。如果產品主要只針對特定文化，則設計師可以不用太關心所選調色板在其他文化中可能產生的影響。
歷史對配色的影響
時間變化對于配色所帶來的影響不僅僅如此。比如中日兩國在色彩使用上，還存在一個非常典型的差異，歷史上日本在一個很長的周期內是作為中國的屬國所存在的，這也使得中國自古以來崇尚飽和度較高的正色，而日本則大多使用飽和度偏低的間色，這一特征可以從兩國的傳統色上體現出來：
△ 中國傳統色：https://color.uisdc.com/
△ 日本傳統色：https://color.uisdc.com/jp.html
性別誤區
或許天生如此，女性不喜歡灰色、棕色和橙色。她們鐘愛藍色、紫色和綠色。而男性不喜歡紫色、棕色和橙色。男性喜歡藍色、綠色和黑色。只要記住，當你的產品目標用戶群是男性時，選擇能傳達男性氣概的色彩，想象下你把運動類應用的界面使用女性色彩，結果可想而知。
△ 男女最喜歡的顏色
△ 男女最不喜歡的顏色
你有沒有想過你的 APP 使用人群中會有視力障礙者？
當人們談論色盲時，他們通常指的是不能感知某些色彩。 大約 8％的男性和 0.5％的女性患有不同程度的色盲——他們在識別部分或者全部顏色時有困難。面對如此龐大的特殊受眾，設計師理應關注他們的需求。
△ 正常人和紅綠色盲看到的相同色彩
因為色盲有多重表現形式，例如紅綠色盲，藍黃色盲和單色色盲。所以運用多樣的視覺線索來連接你 APP 的重要狀態是很重要的。絕不要僅僅依靠色彩來表示系統狀態。 相反，應使用元素（如筆畫，指示符，圖案，紋理或文本）來描述操作和內容。需要注意的就是不要簡單認為色盲就是簡單的分不清紅綠，色盲用戶對色彩的感受差異不僅僅是單獨某種的問題，是某些范圍色光的敏感程度問題。
有趣的事實：Facebook 的標志和不怎么討喜的藍色配色是特意挑選的。因為 FB 創始人馬克·扎克伯格是紅綠色盲，他對藍色的識別是最好的。他曾說過，“藍色是我生命中最豐富的顏色，我幾乎可以看見這世上所有的藍色?！?
Photoshop 有非常實用的工具來幫助模擬色盲，在「視圖」的「校樣設置」菜單內選中就可以使用了。這個功能讓設計師可以看到在色盲用戶的眼中你的界面是什么樣子的。
△ pinterest登陸頁紅綠色盲視圖
下面以點狀圖信息圖形為例，來說明如何為色盲用戶優化信息圖：
優化采用了這樣一些手段：1.調整配色，將色盲人士容易混淆的紅、綠、橙色換為紅、藍、黃色。2.調整明度，使圖中幾個顏色在明度上差異更明顯。3.為不同元素賦予不同形狀。所有使用點元素的信息圖，都可以參考這種解決方式。
在實際設計過程中，我們需要在美觀和友好之間進行權衡。我們也可以采用一些交互手段，避免同一界面中元素太多太過雜亂的問題。
這是更長維度上的變化，在短時間以內，流行色的趨勢變化，對于用色也同樣存在影響。這種影響在時尚行業有著非常直接的體現，而在網頁和 UI 設計行業，同樣存在。比如 2020 年的潘通年度流行色是「經典藍」（Classic Blue），也就明白了為什么 iphone12 今年的主打色是藍色了。
所以，當你在設計的時候，如果你的目標用戶群體有著清晰的地域或者性別偏向，你可以有目的地利用這些知識來規避設計陷阱，更好地發揮色彩本身的功能和優勢。如果受眾廣泛，則可以盡量使用通用性更強的色彩來進行設計。
你知道世界上的顏色是什么嗎？
是否存在一種色彩，是不分性別文化，大家都會喜歡的呢？確實有人通過大規模的調研和探索找到了一種世界上的色彩：馬爾斯綠（Marrs Green）。來自全世界 100 多個國家 3 萬多人響應號召完成了這項投票，并且最終選取出來的一款綠色。
人腦對于色彩的記憶度要高于形態，即一個 App 給用戶留下深刻印象的往往是界面的色彩。例如說到支付寶，我們可能想不起它的首頁長什么樣子，標簽欄圖標是那些，但能馬上記起它的界面主色是藍色。因此運用好色彩對 UI 設計十分重要，它能直觀的呈現產品的氣質和性格，能有效的幫助用戶組織和閱讀信息，與界面設計產生聯系和記憶。好的配色往往依靠設計師審美、感覺搭配出來，但合理的顏色搭配必定存在合理的配色規律和配色方法論的支撐，下面結合相關案例為大家講解色彩運用的幾個技巧。
不得觸碰的禁區
分析研究了很多優秀設計作品，發現他們在用色的時候有一部分區域是不會使用的，也就是我們常說的“配色禁區”。當然，這里的“禁區”是帶雙引號帶的，并沒有什么絕對的禁區，只是說這些顏色不易控制，在連基礎色都沒有駕馭好之前，盡量少碰。
配色禁區大概分為這三種：三角形禁區、矩形禁區、扇形禁區（紅色為禁區），如下圖：
綜合看來，不管是那種禁區，右下角區域的顏色是很少用的。畢竟他們又臟又深，當然什么顏色都能駕馭的大師請略過。
在界面設計中，一般主色和輔助色都集中在右上角，次要的和不可點的顏色都集中在中上方，而文字信息和背景色則集中在左側，右下角禁區是我們要重點避開的對象。
色調一致
在 App 設計之前應先確定界面的主色調，主色將占據界面中很大的比例，通常是品牌色，而輔助色、點綴色、背景色等都應以主色調為基準來搭配，這樣才能保證 App 整體色調的一致。色調一致的界面，能帶給用戶始終如一的視覺體驗。例如馬蜂窩將黃色（品牌色）作為主色，以及從主色搭配出的藍色（對比色）貫穿 App 始終。
60-30-10 原則
60% 30% 10%的原則，是達到色彩平衡的最佳比例。在 60%的空間使用主色，可以運用到導航欄、按鈕、圖標等關鍵的元素中，使之成為整個 App 的視覺焦點和色彩關系；30%的空間使用輔助色，可以平衡過多的主色而造成的視覺疲勞；最后剩下 10%的空間為點綴色，可以用在一些不太重要的元素又需要區分的時候。6:3:1 原則構建了一種豐富的色彩層次，讓界面看上去和諧、平衡和不雜亂。
嗶哩嗶哩將粉色運用到頁簽、標簽欄、按鈕、入口圖標等上，藍色的輔助色用在角標、圖標上，還有黃色、紅色用在一些小圖標、小標簽上，主次非常清晰明了。
色不過三
經常很多大神在網上說配色不要超過三種色，其實就是「色不過三」原則，即在一個頁面中不要使用超過 3 種顏色搭配，這也和上面說的“60-30-10 原則”類似，即一個主色、一個輔助色和一個點綴色。但在實際 UI 設計中，迫于產品的需要可能會使用更多數量的色彩，但切記不可超過 7 種色相（注意不是 7 種色值），每個色相還可以運用其飽和度、明度的變化分解出豐富的色彩搭配。
美團外賣的首頁 20 個功能入口大圖標的背景用了 9 種不同的色彩，每種色彩又包含一種低飽和度色彩進行彩色漸變，但并沒有顯得雜亂，而是呈現一種年輕時尚的律動感。這是因為這里雖然使用了 9 種不同的色彩，但仔細觀察發現只使用了 3 種色彩，其他 6 種則是從前者鄰近色中提取出來的搭配，再將它們錯落放置，呈現出豐富多彩的色彩搭配，整體和諧統一。
遠離純黑色和純灰色
黑色就像沒有生命力的深淵，使用戶陷入冷冷的負面情緒中。遠離純黑色和純灰色，是因為它們不存在于現實世界里。嘗試在純黑和純灰中加入一些色調，會讓界面看上去更柔和自然。另外，純黑色還會與白色產生強烈的對比度，看久了會使人疲勞，讓用戶產生焦慮的情緒。MONO 的導航欄并不是深黑色，而是加入了藍色的低飽和度藍黑色，它的界面背景也是加入了藍色的的淺色，這樣就不會讓界面看上去死氣沉沉的。
遵循色彩心理學
前文我們已經了解過各種色彩的心理學知識，就是為了我們在進行 App 設計時提供依據。這些色彩都是源于人類對大自然最原始的感受，藍色的天空、綠色的草地、黃色的沙漠等等，自然的色彩，對于我們來說是司空見慣的，但其中卻蘊含著豐富的美感，并達到了和諧統一。網易云音樂使用紅色作為主色，這種熱情奔放的顏色傳遞出一種充滿能量、自信的氣質。
良好的可讀性
良好的可讀性在界面設計中能為用戶提供主次分明、層次清晰的閱讀體驗，而一個可讀性差的界面則會成為用戶瀏覽的障礙。那如何確保界面具有良好的可讀性呢？這就需要在界面設計中注意色彩搭配的對比，如在淺色背景上使用深色文字，在深色背景上使用淺色文字，使用高對比的度的亮色展示重要的元素，用低對比度的淺色來體現需要弱化和次要的內容。例如蘋果 Music 的主要功能入口，標簽欄圖標、按鈕等都是用了高純度的紅色，與其他元素形成鮮明對比，就連深灰色的輔助文字都有著清晰的可讀性。
從大自然中獲得靈感
配色中盡量使用大眾熟悉的色彩，如自然界中人們常見的色彩等。從大自然中獲取的配色靈感可以使你的設計更加切合用戶的審美，非常自然。而藝術是對自然的直接反映，是非常寶貴的資源，值得好好利用。我們可以搜集各種與自然風光相關的圖片，從中提取色彩運用到設計中，這些幾近完美的搭配呈現出來的和諧美感能瞬間打動人心。天氣應用 Marline 就是一個很好的例子，它的界面背景漸變就參考大自然的變化，隨著不同時間段呈現出清晨、日出、正午、日落、深夜、雨天等漸變色，打開應用即喚起了用戶的快樂情緒。
將 UX 顏色與品牌相匹配
品牌價值在創建調色板中發揮關鍵作用，但是它們不是唯一重要的因素，行業規范也是關鍵。使用與品牌主要競爭產品幾乎相同的配色方案不失一種好方法。配色在品牌視覺中所發揮的作用是不言而喻的，但是，色彩本身的內涵和情緒特質并不是全部。比如一個行業當中，很多產品都使用了藍色，那么你的產品繼續使用藍色，可以讓用戶更快「識別出」你所屬的領域，但是本身也存在讓人混淆的風險。如果你想要在視覺上脫穎而出，可以試著使用不同的色彩。
△中國區或美國區，紅色和藍色都是最流行的顏色。
在進行品牌設計的時候，選擇配色的第一步，始終是了解各種顏色或者色相的氣質和情感屬性。然后，在具體設計的時候，再進一步根據品牌的氣質和需求，再在色相的基礎上調整明暗和飽和度。也可以打破常規創造出與眾不同的配色方案。
從強調色入手
想要讓配色方案更加突出，在設計中添加強調色可能是最容易入手的地方。舉個例子，一個律師咨詢的 App 可能會使用傳統的藍色作為基礎配色，但是，如果能夠加入檸檬綠作為強調色，會顯得獨特很多。
冷暖色對比搭配
冷暖對比色是自然平衡的規律，可以在設計中大量使用，這樣的配色會使作品非常的出彩，同時不顯單調，讓用戶感覺舒服平和。而且這種搭配方法基本沒有啥缺點，使用在設計中，技巧性比較多，對設計的細膩感受要求比較高，需要多練習。
黑白色搭配不過時
黑色是所有中性色中最強的，而白色是最常用的背景顏色。黑色是一個很好的選擇，有種高端和永恒的感覺，而白色可以帶給用戶自由，寬敞和透氣的感覺。如上所述，黑色和白色也是最大的對比色，如果合理的使用黑色配合白色，會營造出一種優雅的氛圍。
強交互色彩
交互色彩在執行過程中必須清晰且在界面中保持一致。號召性用語必須相對于背景具有足夠的對比度，并且相對于其他組件必須具有足夠的視覺權重，以便用戶可以輕松識別它們。Nike 健身應用中，「開始」按鈕以高飽和度的檸檬綠作為主色，從背景中脫引而出。
但是，交互色彩并不總是以最具飽和度或最亮為特征，而是通過色調、形狀、大小或對比度，從屏幕上脫穎而出。因此，交互色彩的有效性將基于用戶識別交互區域和執行任務的速度來衡量。同時，次要功能權重要更輕，并在視覺上更接近信息元素。如上圖 Nike Training 界面中，“設置”和“聲音”按鈕只用簡單的白色，減輕對主按鈕的干擾，也避免了頁面中出現多個強交互按鈕。
保證良好的可讀性
可讀性是任何設計中的重要因素。你的顏色應該清晰易讀，尤其是在處理文字時。因此對比度對視覺效果的影響就非常關鍵，對比度過小，就會使得界面出現灰蒙蒙的效果。清晰的對比度，一般會采用色彩的兩極，黑紙白字或白紙黑字。而在彩色背景上要讓內容清晰可見，就需要搭配純白或高明度的文字，避免灰色文字。也要注意避免彩色背景上搭配互補色和明度接近的文字，因為這兩種搭配會產生一種“震顫效應”，發出光暈的視覺效果。
UI 中的陰影
沒有完全純黑的陰影，陰影的顏色是會受到物體本身固有色的影響，一定要避免使用純黑色（#000000），使用不太深的灰色，效果會更好。對于有顏色的元素，好的做法是為陰影設定與元素相同的顏色，并使其更暗一些。
如果是有顏色的元素，并且它處在黑暗的背景下，一般情況下，是不建議使用陰影的。但是如果你一定要用，把陰影透明度調到小于 10%及以下，并且顏色跟隨主色調來。比如按鈕為綠色，則可以為按鈕設定一個更深的綠色陰影，并加上小于 10%的透明度數值。如下圖，左側的按鈕陰影很自然，右側的則有一層模糊發光的效果，顯得不夠漂亮。
為什么「超鏈接文字」要用藍色？
簡單說，因為在最早期的網站頁面中，藍色能呈現最高的對比度。
Tim Berners-Lee——web 的主要開創者，被認為是最早用藍色鏈接的人。
一個很早期的 web 瀏覽器 Mosaic，用的是深灰色背景和黑色文字。那時候，能用的非黑色、最深的文字顏色，就是藍色。所以，讓超鏈接文字突出顯示，同時保證可讀性，就選定了藍色。此后超鏈接文字都用藍色的傳統沿用至今。
App 的色彩搭配能直觀、快速的反饋到用戶的大腦中形成記憶思維。好的色彩搭配可以加深用戶對產品的印象；明確界面的視覺層次，讓用戶分清主次信息；同時還能給用戶賞心悅目的視覺享受。那么，在 UI 設計時該如何進行色彩搭配呢？我們可以從 App 中都包含了那些色彩開始，通常一個 App 中包含了主色、輔助色、點綴色、背景色這 4 類，下面就以微信讀書為例進行詳細的講解（個人角度）。
主色
主色是指在配色中處于主導地位的色彩，給用戶的第一眼印象，通常是產品的品牌色。在 App 設計中，主色一般占有色相色彩的 60%的比例。這里指的是 60%的界面都使用到的主色比例，而不是使用面積（因為通常一個界面中使用面積最大的是背景色）。還有就是背景色多為淺灰色或白色，它們都屬于無色相色彩，因此不涉及到配色過程中。我們看到微信讀書的第一印象，就可以判斷它的主色為藍色，這也是它的品牌色。在標簽欄、按鈕、圖標、注冊登陸全都使用了這種純凈的主色，使界面看上去非常和諧一致。
輔助色
輔助色與主色相輔相成，輔助色的功能是幫助主色建立更完整的形象，使界面豐富精彩起來，避免畫面過于單一。通常，主色的鄰近色、互補色、分散互補色和三角對立色都可以成為優秀的輔助色，但注意輔助色不宜過多，否則就會使界面看上去花哨分散了主題。根據 6:3:1 原則，輔助色可以占有色相色彩的 30%或更少為宜。
在微信讀書中，綠色、橙色、梅紅、藍紫色是除了主色以外使用最多的顏色，它們都是輔助色，主要用于功能圖標和欄目分類上。雖然輔助色看起來有點多，但其實都是從主色的鄰近色和對比色（及其鄰近色）中提取出來的搭配，而且只用在頁面中很少的地方，這種搭配技巧既可以豐富色彩的搭配，傳遞出年輕活躍的產品氣質，又保證了整體搭配的和諧統一。
點綴色
點綴色是除了主色和輔助色以外的另一種色彩，通常體現在細節上。其作用是，當頁面中主色和輔助色不能滿足關鍵信息的提示時，就需要點綴色來吸引用戶眼球，還有就是利用點綴色來平衡畫面的冷暖色調。點綴色通常都是分散的，使用面積小，顏色非常顯眼，能與主色形成強烈的對比。一般點綴色是主色的互補色。在微信讀書中，使用了香檳金、梅紅和紅色作為點綴色。香檳金用在文章分享按鈕上，梅紅色用在點贊圖標上，強調其特殊性，紅色用在通知及退出登錄提醒上，用于警示。
來康康這三種點綴色與主色之間存在什么樣的關系，在色相（H）上，3 種點綴色為鄰近色，與主色為互補色；在明度（B）上，3 種點綴色均為高明度色彩，起到強提醒的作用。這種強對比的互補色的點綴色可以快速引起用戶注意力。
背景色
背景色就比較好理解了，通常為了襯托內容，大多數 App 都是用淺灰色作為背景色，以白色作為背景色的對比色，來區分視覺層次。建議是可以根據前景色來提取背景色，將其調亮或變暗，這樣可以讓界面色調更加統一。在微信讀書中背景色是偏藍色調的淺灰色，而不是純灰色，背景對比色是在白色里加入了藍色色相，而不是純白色，整體對比較柔和，給人清爽通透的感覺。
支付寶 Alipay Design 團隊提出過一個配色原則：
以同色系配色為主導，多色搭配為輔。
同色系為統一的色相，使用中可以加深品牌色的感知，可以讓界面更有層次，同時可以讓界面保持色彩上的一致性；由于業務的多樣化，我們需要多色搭配為輔；多色的輔助顏色，也可稱之為功能色，可設定不同的任務屬性和情感表達；再搭配中性色黑白灰，賦予更多的變化和層次。兩種配色通過主次、使用比例，可靈活運用在業務的各個場景中，具有非常好的延展性。
不同于單一色彩，漸變色不屬于任何色彩，它營造出千變萬化的視覺效果，卻又不會增加視覺負擔。相較于單一的色彩，漸變色的復合性質讓它在界面設計中具有更強的視覺沖擊力，有助于快速搶占視線。如今，這種的色彩正逐漸成為一種潮流，究其原因是目前大量的扁平風格造成 UI 設計的嚴重同質化，人們需要追求更加個性的視覺語言來滿足日益增長的設計需求。下面我們來了解幾種常見的漸變的使用技巧。
色相、飽和度、明度的漸變
色相（H）漸變是指由一種色彩向另一種色彩的過渡，這種漸變因跨度大產生的視覺效果非常明顯；飽和度（S）漸變是指同一種色彩不同純度的過度，其產生的視覺效果比較和諧單調；明度（B）漸變是同一種色彩不同明暗的過度，這種漸變的視覺效果給人一種沉靜的氛圍。
漸變的表現形式
在界面設計中經常看多各種各樣的漸變表現方式，使用最多的有以下幾種：
這個很好理解，是指角度為 0 的線性漸變，是最流行的漸變形式。界面設計中多用在導航欄、進度條、按鈕等元素上，能讓畫面變得精致而通透。例如京東使用橙紅漸變的設計語言貫穿整個 App，從應用圖標到導航欄、按鈕、標簽，全部都運用了這種由紅色到橙色的過渡。仔細觀察發現在很多小標簽上都使用了水平漸變設計手法，使產品看起來更年輕化。
在水平漸變中，通常把輕（亮）的色彩放在左邊，重（暗）的色彩放在右邊，這樣由左向右的方向感剛好與人的瀏覽習慣保持一致。而反過來就會與人的瀏覽視線相悖，應避免。
垂直漸變
即角度為 90°的線性漸變，它通常被用在正方形或豎條形的元素上，如注冊登陸頁，個人中心頭部等。垂直漸變中上下兩種色彩的深淺變化會產生截然不同的視覺效果，上淺下深會讓給人一種凸起的立體感，而上深下淺會給人一種凹陷下去的空間感。例如「紀念碑谷」的背景是采用了單色相和多色相的垂直漸變作為游戲背景，在讓整個畫面豐富的同時又不會太搶奪主體的色彩，使畫面顯得清新透氣而不沉悶。
角度漸變
角度漸變通常有對角漸變和多角度漸變。有角度的漸變相比水平和垂直漸變，它的使用場景更廣，如圖標背板、啟動頁、注冊登錄頁、標簽等。想讓界面更加絢麗、動感和迷人，這時候我們可以考慮多組漸變搭配使用。
色塊漸變
漸變的顏色不只可以運用在一個色塊上，還可以運用在一組色塊上。設計師運用一組近似性色彩，將每個菜單項清晰區分開，讓界面平衡在一個頻率上，這樣的畫面更有節奏感和舒適性。不同于平滑的漸變，色塊漸變不再是單純的背景裝飾，在某些地方還具有一定的功能性，比如使用不同的色塊來分割的列表樣式。Clear Todos 是一款日常任務清單的 APP，它拋棄了傳統的列表樣式，使用了一系列色塊來作為列表的分割，非常漂亮和精致。
徑向漸變
是指色彩以圓心向四周擴散的漸變，是一種模擬光源照射的視覺效果，因此光源是整個畫面的視覺焦點，將關鍵元素放在光源中心就會成為主角。通常被運用到大背景上，如啟動頁、引導頁等。Solar 天氣應用的背景就是徑向漸變，光源擴散的效果營造出一種夢幻般的美感。
和諧的漸變色
漸變色是由一個色彩走向另一個色彩的過程，有著迷人的視覺效果。如果你仔細觀察兩種色彩的過渡關系，就會發現不是每次都會得到滿意的效果，例如紅綠漸變就很糟糕，因為它們兩者是互為對立的色彩，但是如果加入黃色的過渡色就會好很多。原因是當兩種色彩之間超過 90 度就會導致其漸變色看上去不太和諧自然，只有控制在 90 度之內才會產生美妙的變化。如何改善超過 90 度的兩種色相的漸變呢？這時候可以在兩色之間加入過渡色進行調和。例如當從黃色到藍色漸變時，就可以加入紫色作為過渡才能呈現完美的視覺效果。
在搭配漸變色時，盡量只改變其色相（H）、飽和度（S）、明度（B）中的一項，這樣才能創造出和諧的漸變色方案。
調色板幫助我們在設計項目中建立色彩規范、提高工作效率。通過上文對色彩基礎知識的學習，接下來為大家介紹幾種簡單易用的創建調色板的小技巧，以及 Materia design 配色方法和配色網站推薦。
打開 dribbble，每一幅作品預覽頁左下角都有一份自動生成的配色板，很多同學可能不知道這個配色文件是可以下載的。將調色板保存到本地，為自己在創作時提供靈感。在 ps 里的操作步驟是：點擊“窗口—色板”，然后在色板的屬性面板右上角打開“導入色板”，載入剛下載的色彩文件即可。
它也有顏色搜索工具，輸入或選擇顏色值即可搜索相關配色的設計作品。
這種方法也很常用，不需要任何插件，丟一張圖片到 Ps，然后將圖片「馬賽克」處理下就可得到一組配色。例如，我們需要一組同色系的綠色，在網上（建議 unsplash 或 500px 等專業圖片網站）找一張樹葉的圖片，接著將圖片在 Ps 中打開，進入“濾鏡—像素化—馬賽克”，在打開的窗口里調節單元格大小即可。
同時，建議平時多去收集好看的攝影圖片和優秀的配色方案，看的多了就知道什么是好的什么是 Low 的配色，對提升審美也有很大幫助。
△ pinterest畫板
該方法稍微復雜一點，示例步驟如下：第一步繪制一個正方形做底板，填充一個顏色#5354F0；第二步分別在正方形的上和下 1/3 處疊加 20%的白色和黑色；第三步分別在正方形中和右 1/3 處疊加 40%、80%的紫紅色#DF56FA；最后改變紫紅色圖層的混合模式為疊加即可得到一組藍紫色色調的調色板。
Materia design 調色板
Materia design 從生活場景中提煉出 19 個充滿活力的色彩，旨在和諧地協同工作，可用于開發品牌調色板。Materia design 提供了一整套調色板，從原色開始，延伸出其他許多色彩，這些色彩和諧相處，可用于產品設計的品牌色。基礎色的飽和度是 500，Google 建議以此作為產品應用的主色調，可以再選擇一種輔助色，并在主色的基礎上進行飽和度，明度變化，構成一套配色方案。
如果上面的色板不能滿足你的需求，你可以選擇一個主色，Materia design 調色板生成工具會為你生成完整的色板。
主色和強調色
在色彩選取時，需要先明確品牌色在界面中的使用場景及范圍。在基礎色板中選擇主色，建議選擇飽和度為 500 的基礎色作為主色，根據設計需要在主色的基礎上增加 1～3 種不同飽和度、明度的色彩建立層次感，再選擇一種強調色突出重要內容或操作，例如 FAB 的背景色。
深/淺背景上的文字
Materia design 通過文本的不透明度建立在不同背景上的深淺對比，對于淺色背景上黑色文字，主文字不透明度 87%，次要文字不透明度 60%，禁用文字不透明度 38%；而黑色背景上的白色文字正好相反；彩色背景上的白色文字不透明度 100%，分割線不透明度 12%。Ant Design 也定義了一套用于界面文字、背景、分割線的中性色，在落地的時候同樣也是按照透明度的方式實現的。
背景
為了提高應用之間的一致性和閱讀的可讀性，背景色根據設計需要選擇純白色或飽和度依次為 50、100、300 的灰色。
顏色是一個很難掌握的概念-因為有無限多種可能的顏色組合，對于很多設計師來說還是一件蠻困難的事，為了讓設計配色變得容易些，下面推薦幾個常用的配色網站，希望能幫助大家在日常工作中節省更多的時間。
Adobe Color
Adobe Color 是一個基于網絡的應用程序和創意社區，提供免費的色彩主題，并且在 Adobe 相應的軟件中也提供了擴展程序，比如我們常用的 Photoshop 和 Illustrator。
Adobe Color 通過拖拽色輪或輸入自定義色值，可以創造出基于相似、互補、三原色、正方形等不同色彩規則的配色方案。除此之外，還支持 CMYK、RGB、HSV 多種色彩模式的配色調整。用法很簡單，點擊顏色塊上的小三角確定基礎色，就會自動生成 5 個基于你所選色彩規則的配色方案，拖動下方的顏色條時相應的也會改變配色方案。如果沒有靈感可以通過頂部導航進入“探索”頁，這里為我們提供了很多提取好的顏色和圖片，有的是攝影作品，有的是設計作品，上方的輪播圖提供的一些其他內容，比如潘通流行色、Adobe 社區和手機端的 APP 等等，非常的實用。
Eva Design System
Eva Design System 是一個基于深度學習算法的配色網站。適用于給我們的產品或品牌生成一個系統的配色方案。右上角可以切換淺色模式和深色模式的對比。
Colorhunt
Color Hunt 是由設計師 Gal Shir 創建的開放調色板集合，每天更新豐富的配色方案。顏色卡片下方可以看到更新的時間和喜歡人數。鼠標懸浮在任一色塊上顯示顏色值，點擊顏色卡進入詳情頁可下載和分享，驚喜的是還可以添加到 chrome 瀏覽器，方便隨時隨地使用。
Grabient
Grabient 是一個非常漂亮且實用的漸變配色網站，支持 CSS 樣式代碼復制、360 度漸變旋轉、自由增加或刪除漸變顏色等功能。設計師可以在色塊下方自由添加和調整漸變的色系、以及線性漸變方向。
當然，以上這些配色工具只是為我們提供方便的，而不是主導我們的，所以在使用配色工具的時候最好是要有一定的理論基礎作為支撐，讓你的配色有理有據，切忌生搬硬套。
對于新手設計師來說，顏色越少越容易把控畫面。色彩層級越精簡，就越容易達到整體色彩平衡，掌握好色彩的功能劃分必然會讓你的配色過程保持思路清晰從而提率。
同時，不管是 2C 還是 2B，很多大公司都構建了自己的設計系統。如果你想學習別人是如何進行配色布局的，最快的方式就是研究他們的設計源文件。
建議設計軟件使用 sRGB 作為色彩空間的默認配置，而不要采用未管理（ Sketch 中默認是未管理），若團隊協作請提前保持色彩空間配置的統一性。如果有需要針對廣色域色彩空間做項目，可以單獨設置該項目文檔的色彩空間為 Display P3 或者 Adobe RGB。
Mac 系統色彩空間配置
建議所有 macOS 用戶都在系統偏好設定的顯示器顏色設定當中換用 sRGB IEC61966-2.1 這個校色方案，可以極大改善系統顯示效能。如果有外接顯示器，也建議使用外接的默認選項，默認選項一般可以發揮出該顯示器的最大色彩性能。
Sketch 色彩空間配置
Sketch 默認顏色配置是 Unmanaged「非托管」， 我們可以在「偏好設置」中為 Sketch 指定默認的色彩空間配置，如此一來每次新建設計文檔將會默認采用我們的設置作為默認的色彩空間，不用每次新建文檔都單獨設置一次。
設置方法：Sketch → 偏好設置(Preferences) → 通用(General) → 顏色描述文件(Color Profile)，修改下拉框選擇器的內容為 sRGB IEC61996-2.1。（其他設計軟件設置方法類似）
如果要更改已有的文檔為 sRGB 色彩配置，可以通過文件——更改顏色配置，在彈出的對話窗里對文件進行色彩空間的更改即可。
其實無論是色彩理論還是配色方法，最本質的東西就那些，更多的還是需要設計師在日后的工作中不斷的摸索和積累。這篇文章全部寫下來耗費了不少時間（小聲 BB：其實每篇都是），抱歉內容確實有點多，但其實已經是收著點寫了。就像大樹一樣，有很多分枝不斷生長，需要了解很多細分出來的深度知識。這也是寫這類文章的樂趣，通過不斷的查閱資料，把過去很多模糊的概念摸清楚了。果然學透一個知識點的最好方式就是把它講出來才能真正為自己所有。關于色彩的知識先分享到這里，希望對大家有所幫助，文中有不嚴謹或錯誤的地方，歡迎大家指正，一起學習成長。
文章來源：優設網 作者：印跡
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
