KIT組件庫本質上是一個集合的Sketch文件，由原子、分子、組織、模板、頁面組成。原子理論支撐可復用、可修改、易于協同和維護。
由Google推出的當時媲美蘋果全新設計語言的Material Design，Material Design也是最為經典組件庫設計?，F如今阿里的Ant Design和Element給我們提供了一套完整可復用的組件庫。
在千禧年來臨之前，我們首先開始在單一視圖屏幕中進行UI設計，這類屏幕在當時最流行的尺寸是640x480。大多數時候，我們甚至沒有考慮讓屏幕滾動，而是在特定區域或文本局部區塊中設置了內部滾動條。毋庸置疑，當時的大部分網頁也是用Flash或HTML創建的，并帶有用于布局的表格。那是在智能手機出現之前，隨著事物的發展，我們經歷了第一個向“響應式”設計的根本轉變。我們已經走了很長一段路，CSS已得到長足的發展，“響應式”網頁設計從2010年開始才真正獲得了專有工具。
圖表來源: https://www.webdesignmuseum.org/web-design-history
隨著CSS3的發布，我們獲得了對“媒體查詢”（Media Queries）的訪問權限（譯者注：隨著移動互聯網的興起,我們需要適配多種移動端設備,這就需要用到Media Queries，即“媒體查詢”），此后不久，Ethan Marcotte在2009年底創造了“響應式設計”一詞。十多年來，我們一直使用“響應式網頁設計” (RWD) 創建網頁布局，作為一種網頁設計方法，僅需基于一種屏幕尺寸進行設計，“響應式”使我們的設計能夠適配各種設備和屏幕尺寸。
在早期，當移動電話還不兼容媒體查詢或JavaScript時，“移動優先”和”漸進式增強”的概念就成為了非常流行的方法，當時有很多CSS完全不受支持。
用我們今天的話來說響應式設計，我們認為頁面的布局要適配整個瀏覽器、屏幕大小和那些需要投射到整個布局上的限制。當需要設計從桌面端調整為移動設備屏幕所需的尺寸時，我們使用“媒體查詢”來更改整個頁面布局。
很快，使用這種“響應式”設計方法可能會被認為與使用表格進行頁面布局一樣過時—就像我們在90年代所做的那樣。
我們通過基于viewport（視口）的“媒體查詢”獲得了許多強大的工具，但我們也缺乏很多適配的可能性，因為“媒體查詢”是一個適用于整個頁面的通用解決方案，并且對每個用戶來說都一樣。我們缺乏響應“用戶需求”的能力，也缺乏將“響應式”樣式注入“組件”本身的能力。
當我們談到組件時，這里指的是頁面上的“元素”，這些元素可以由其它“元素”的集合組成。例如卡片、橫劃卡或推薦模塊之類的UI內容，每個“塊”都由各種更小的“構建塊”組成。這些組件拼湊在一起構成我們的網頁。我們可以使用 global viewport information（全局視口信息）來設置這些組件，但它們仍然無法擁有自己的風格。當我們的設計系統是基于“組件”的而不是基于“頁面”的時，這使得它變得更加困難。
好消息是這個生態系統正在發生變化，而且它正在迅速變化，這需要我們進行一些思維轉變：考慮如何設計和定義組件樣式以及它們如何適應周圍環境。
CSS正在不斷發展，“響應式”網頁設計的新時代即將到來。從目前的情況來看，自從我們第一次引入 “響應式網頁設計” (RWD) 以來，僅僅10多年的時間，這個生態系統已經準備好迎接CSS發生一些相當大的改變。
讓我們深入研究一下可以期待哪些類型的變化，這會如何改變我們的設計方法，以及我們如何考慮界面設計。
簡單來說，我們可以期待新的基于偏好的“媒體查詢”來幫助我們更好地“響應”用戶。它們將使我們能夠根據用戶自己的特定偏好或需求來設定網頁樣式。這將使我們能夠根據用戶的體驗偏好來調整用戶體驗。
這絕不是一個完整的列表，但能給你一些想法，這些基于偏好的“媒體查詢”可能包括：
這些將幫助我們構建更具活力和個性化的網頁體驗，專門滿足我們用戶的專屬需求，尤其是那些希望網站易于訪問的用戶。更進一步說，這些基于偏好的“媒體查詢“尊重任何用戶已經在操作系統設置的偏好。舉個例子，當用戶的操作系統偏好設定為“減少動效”時，他們很可能不喜歡你頁面上的超級華麗的介紹、加載或飛入的動畫動效。我們應先尊重他們的偏好，并為其他人提供“動效增強”的體驗。
另一個流行的媒體查詢是@prefers-color-scheme（配色偏好設定），它允許我們根據用戶的偏好和操作系統中的設置將我們的設計更改為“亮色模式”或“暗色模式”。這不依賴于用戶需要手動來更改“暗色模式”，它會自動發生。
CSS 中最令人興奮的新興領域之一是“容器查詢”（container queries），通常也稱為“元素查詢”。從基于“頁面”的“響應式”設計到基于“容器”的“響應式”設計的轉變對發展“設計系統”的作用價值不容低估，盡管今天使用它并不安全，但重要的是要了解其發展方向。
簡而言之，“容器查詢”將允許我們基于“父級容器”而不是整個頁面來設置規則。這意味著任何組件都更加獨立，與現代設計系統保持一致，真正成為“即插即用”模塊，可以轉移到任何頁面或布局，而且無需根據新環境重新考慮所有內容。
“容器查詢”為我們如何規劃、設計和構建特定組件提供了一種更加動態的方法，因為組件本身擁有它的響應信息。
甚至Ethan Marcotte自己也表達了為什么“容器查詢”如此重要，我們應該研究一下。
由于各種“形態因素”（form factors）的變化和擴展，例如新的屏幕類型，可折疊屏，我們需要“媒體查詢”來考慮這些場景。在這里提到的所有內容中，請記住，這是最具實驗性的，并且只是一項正在進行的工作，仍在嘗試解決我們可能遇到的任何復雜問題，同時考慮未來“形體因素”可能會如何發展。
在可折疊屏場景中，原型中有一些“媒體查詢”可以讓你定位屏幕跨度以及我們如何讓內容根據新環境進行適配。例如，你可以在一個屏幕上放置一個收起的側邊欄（或菜單），并允許內容在另一個屏幕上展開并隨頁面滾動。
我知道你在想什么，我們已經從事網頁設計并使用“響應式”來進行網頁設計10余年了。我們對其相當滿意，那么為什么要改變呢？如果我們真的以終局視角來看響應式設計，那么它就是關于個人用戶的用戶體驗設計。我們正朝著一個與每一位個體用戶高度相關的時代邁進。我們的網頁體驗應該去適應用戶的需求偏好。隨著設計系統的發展以及我們如何創建更便攜的網頁，諸如“容器查詢”之類的工具將變得非常有意義。
配圖：CSS 將基于各個層級來確定用戶的最佳體驗
考慮到這一點，這意味著我們現在可以使用基于頁面的媒體查（包括跨越屏幕的細微差別）來設計宏觀布局；使用容器查詢的組件設計微觀布局；使用基于用戶偏好的媒體查詢，根據用戶獨特的偏好和需求定制用戶體驗。
對于新的響應式設計，有許多新概念正在被原型化和概念化-請看下面的延伸閱讀。所有這些協同工作的方式需要我們從根本上轉變我們對設計和用戶獨特體驗的看法。我們需要更加適應這樣一個事實：即我們的設計不是靜態的，不僅在布局上，還有在用戶可獲得的體驗中，我們需要學會在這種模糊性中做出計劃。網頁和設計的未來變得越來越復雜，我們需要適應和挑戰自己，理解“新響應式”體驗的意義。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加：ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
表單頁作為基礎通用組件，也是B端產品中臺、后臺出現比較頻繁的頁面之一。看似簡單的頁面我們在設計時卻有很多值得推敲的點，在細節處提升用戶易用度，我通過日常的學習和公司項目，在這里總結復盤了自己的經驗。
表單的適用場景比較廣泛，常見的基礎表單比如登錄注冊頁面，這一類往往信息簡單，格式比較固定，除此之外就是分步表單、高級表單。常見的場景主要用于新建信息、申請、客戶信息、商品信息等等。這類表單可能存在復雜邏輯關系和功能，有時會給我們造成困擾。以下我將以這一類表單為主要案例，一一進行拆解。
登錄注冊頁：表單內容簡單，操作簡單。
分步表單：具有流程化特點，具有先后邏輯關系，內容較多的業務類型，比如轉賬，新建商品訂單等。分步填寫可以減緩用戶壓力，起到安撫用戶情緒的作用。
高級表單：主要用于需要一次性輸入、提交 大批量數據的場景。也成為分組表單，和分布表單一樣都是為了減輕用戶填寫壓力。
首先我們需要明確表單頁的主要功能：表單頁承載了系統中絕大多數系統數據的錄入、增刪、修改、查看，是系統中人機交互最為頻繁和典型的數據媒介。表單頁通常需要用戶錄入大量的信息或數據，在設計時我們的核心目標應該是讓用戶明確當前表單頁面要完成什么任務，輕松理解項目含義及生效的結果，思考如何幫助用戶高效、準確、輕松的完成任務。
表單設計基本原則：明確、高效、安全
明確：用戶可以快速定位重要信息和目標選項，表單文案和組件可以準確傳達任務含義
高效：易理解易操作的交互方式，盡量減少交互步驟，減少用戶任務路徑步長，配合合理的信息布局引導，準確的選擇合適的組件傳達信息，幫助用戶高效的完成任務。
安全感：操作前有效的防錯機制，操作中有明確的狀態反饋與容錯，允許糾正錯誤。操作后及時的保存，取消機制。
一個完整的表單通常包括表單標題、表單標簽、表單域、提示信息、占位符、操作按鈕幾部分。
標題：起到說明表單模塊的作用，是用戶快速明確任務和定位頁面位置的重要標識。
表單標簽：內容項的名稱，說明對應填寫項含義及說明用戶該填入什么信息。
表單域：表單的核心操作區域，用戶操作最頻繁，最集中的地方，這里的可選擇組件樣式也會根據內容需要而變化，類型最為豐富多樣。需要注意的是同一類型的組件需保持一致性原則。
占位符：一般出現在用戶未填寫內容時，用于輔助提示用戶錄入線索。
提示信息：輔助提示用戶的作用。分為普通提示和錯誤提示，也是很好的防錯糾錯機制體驗。
操作按鈕：“結束”表單任務的觸發器，用于向服務器提交數據或者放棄操作。
表單標簽
表單標簽樣式常見的有4種，左對齊標簽、右對齊標簽、頂部標簽和行內標簽，不同的對齊方式各有優勢和缺點，適應在不同的場景。
右對齊標簽（冒號對齊）
優點：標簽指向明確，操作效率高，節約縱向空間
缺點：可讀性低，不適用于狹長空間或需要適配多語言的頁面
場景：普通表單填寫，多用于web端
左對齊標簽
優點：閱讀性高，節約縱向空間
缺點：不適用于狹長空間或需要多語言適配的頁面，操作效率低
場景：詳情陳列
頂部標簽
優點：視覺對齊舒適，節約橫向空間
缺點：縱向空間利用不高
場景：多用于移動端表單填寫，多語言適配頁面
行內標簽
優點：視覺對齊和空間最節約的方式
缺點：當用戶輸入狀態時，標簽消失，增加用戶記憶負擔
場景：多用于登錄注冊，修改密碼等內容極少，不需要記憶的頁面
表單域
表單域是一個表單頁面的主體部分，其內容豐富多樣，從而它可選擇形式也最多，不同的內容我們在設計的時候應該選擇最合適的組件，以及應該注意同類型內容選擇統一的組件進行設計。
定義操作框大小
在實際項目中我們往往會遇到內容長度不能統一的時候，那怎么這種情況該怎么處理呢？
以往我的處理方式是強行拉長對齊，但我們可以發現強行對齊的時候，視覺沒有得到很大優化，反而在隱喻傳達給用戶錯誤的信息，當用戶在操作1功能的時候，可能會錯誤的認為這個選項可以選擇很多，因為我們給的選擇框很長，而實際上它只能選一個。這樣就會給用戶造成不必要的理解成本。
比較好的方式處理方式是我們設計組件庫時就設定不同尺寸的操作框，來適應不同場景下不同內容需求。如果不能對齊，那就讓它參差不齊。
提示信息
提示信息在表單中起到提示、糾錯的作用。形式主要有以下幾種：行內占位符提示、操作框下方文字提示、tost提示、氣泡提示。
行內占位符：這是一種基礎應用，它即可用于占位，也可用于任務說明提示，當我們說明文字很少的時候可選擇的一種方式。需要注意的是內容務必簡潔易懂，減少閱讀成本，不要說“正確的廢話”，語句應該是完整的陳述句。
氣泡提示：當提示文字很多，主要用于對標簽的名字釋義時，氣泡彈窗是個不錯的選擇。它的優勢在于可以將更多內容折疊，不占用空間，缺點是不直觀，增加了用戶操作步驟。
Tost提示：Tost提示一般是在出發操作按鈕后給出的提示，可以是操作結果提示，也可以是內容填寫提示。
操作框下方文字提示：當提示內容很多時，還可以考慮操作框下方提示，多用于對輸入內容的輔助說明場景。應用場景包括以下幾種：
組件組合后在表現層的設計
提示信息在頁面中還是一個輔助性的角色，常規情況下的視覺層級應該是 表單內容>表單標簽>提示信息。當用戶有錯誤操作時“錯誤提示”優先級是最高的，我們一般用帶有警示性的顏色給以醒目顯示。
為了使用戶更好的辨別任務項，需要注意組件與組件、組件與說明文字之間的間距差別。
表單中的交互方式根據其內容選擇對應最合適的形式，內容簡單而少的可以直接在原位編輯，操作快捷，關聯性最強，所見即所得，內容容量低于5個。其次內容較多的，或者針對全局操作的可以選擇氣泡卡片，比如全局設置等。第三種是彈窗或者抽屜，兩者形式是一致的，區別在于對內容的承載量上，彈窗容量較小，內容較多的情況下抽屜式彈窗（側拉彈窗）是更好的選擇。最后，內容承載最大的就是頁面跳轉，同時這種方式與原頁面的關聯性最弱。
組件構成表單，實際項目中，我們的表單往往內容會多而復雜，設計時可以考慮在布局上優化去提升使用體驗。
常用的方式有幾種：信息分組、錨點定位、標簽頁、分步驟。
在格式塔鄰近性原則中提到，人們將彼此接近的事物、元素，傾向于認為它們是相關的。在設計中很早就運用到這種認識傾向。所以我們在信息分組時可以運用設計手法將相關信息從視覺上區分開，提升信息閱讀有效率。
分組方式：
1.簡單的內容使用標題分組或卡片分組就可以達到目的。
2.而內容很多，組別之間沒有關聯性時用標簽分組。
3.頁面內容很長需要連續下滑操作時，錨點定位就可以提供便捷的操作體驗。
4.在任務有先后邏輯關系時，分步驟是最好的選擇。
標簽分組與錨點定位在表現形式上類似，區別點在于操作后的結果。標簽分組切換標簽后頁面數據會刷新，一般沒有自動保存功能，錨點定位則是每次點擊定位頁面不刷新數據，始終保持在同一數據頁面。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加：ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
做一個完整C端項目前，從產品思維得理解、需求分析到場景分析，通過以上分析得出結論，進而制定我們的設計目標，把設計目標落地到解決實際的設計問題，內容較多，大家可以根據上述目錄來進行選擇性閱讀。
了解用戶心理：“心理”主要是指用戶的情緒，只有了解用戶的心理狀態，才能知道他們在接觸到或者使用我們的產品時是正面的情緒還是負面的情緒。正面情緒需要我們引導去實現轉化，負面情緒需要我們安撫以避免跳出和口碑的損失。
把控用戶行為：最終目的還是引導用戶行為，讓用戶按照我們的計劃進行產品的交互、操作，從而實現對用戶的有效管控和轉化。例如：上品店慶推出“購物省錢節”的概念，聯合商家推出各種優惠活動，就是抓住用戶在購物時想省錢的心理，通過降價、優惠券等方案讓用戶在選購商品、提交訂單和結算階段都保持高漲的情緒，從而推動用戶最終完成付款。
解決用戶痛點: 在完成上面的分析后，我們最終需要把調研和分析結論落地為設計方案，前提是要關注用戶當前的情緒是負面的還是正面的，如果是負面的情緒，我們可以通過補償、安撫等方案對用戶進行留存。例如：在等待外賣送達時，配送信息頁一般都會有預估時間、位置等信息，讓用戶有一定預期。同時如果遲到時間過長，也會通過準時寶等規則給予用戶優惠券補償，這些都是負面情緒的安慰。
項目思維主要指，我們要具備極強的發現問題、輸出方案、推動落地的能力。這就是設計師的項目思維和推動力，可以保證自己的想法快速落地、推動設計優化并盡快上線。
商業思維是指，拉新：通過產品、運營和營銷策略讓用戶下載產品。留存：讓下載的用戶保持活躍度，留住用戶，便于轉化。轉化：讓用戶按照我們的業務規劃去注冊、分享、下單、付款等動作，一步步帶入我們的圈套，完成關鍵操作。變現：將用戶行為變現，內容產品的活躍度可以帶來廣告營收，電商產品的成交額就是業務收益。
相同點：在實際工作中，設計師和產品經理的目標在本質上是一致的，都是解決用戶的痛點、滿足用戶的需求，為用戶提供體驗更好的產品，并在此基礎之上完成用戶轉化，實現收益。作為一個設計師，我們對產品了解的深度不一定比得過產品經理，但是廣度上你應該要求自己和產品經理保持一致。只要掌握產品的架構、流程和業務的模式、原理即可。
不同點：UI設計師更注重通過用戶體驗來留存用戶，產品經理更多地考慮轉化用戶和變現的途徑。
沖突點：這時就會產生一些沖突和矛盾，有時為達到業績目標，產品經理或其他業務方可能會提出有損用戶體驗的方案或者策略。
想要解決與產品沖突得問題，就要充分調動自己的產品思維，保持習慣性的產品思維，才能始終保持和業務一致的目標。和業務方站在一起，才能找到設計和業務的共同目標，并將業務目標轉化為可執行的設計目標，才能為設計帶來更高的價值。
這里就繞不開這個話題----產品思維。別人眼里的UI設計師，很多人會認為設計師的工作就是設計流程頁面、視覺效果。這些工作看起來只是錦上添花，即使沒有專業的設計師來設計，可能只是流程、控件位置不太合理、樣式和顏色不太好看而已，并不會影響產品的開發和上線。其實，設計師的價值不僅是藝術價值，更重要的是為業務帶來價值。
UI/UX設計師，關鍵在于對用戶場景、對產品細節的敏感度，這也是其他崗位不具備的技能。實際工作中這些細節問題，很容易區分出來專業性的差異，因為UIUX設計師是距離用戶最近的人。我們設計頁面，用戶在頁面上操作和獲取信息。我們設計流程，用戶通過流程完成各自的需求。我們設計的產品流程、頁面，是用戶直接接觸和使用的東西?；谶@個原因，設計師對用戶的需求、反饋是最了解和最敏感的，我們可以通過用戶的反饋、操作數據把控用戶的心理狀態和行為方向。無論是在方向上還是從細節出發，挖掘和洞察用戶需求，設計師有明顯的優勢。
所以UI設計師真正的價值就是通過自己對細節和場景的思考，自我驅動，找到設計優化、產品迭代、業務提升的機會點。想要找到這些機會點，你需要培養自己的產品思維、項目思維和商業思維。
01、多與需求方、業務方（產品經理、運營、市場等崗位的同事）溝通，在參加需求評審的時候，深入了解業務和產品的特點、原理。
02、了解產品流程：在接手某項業務或產品時，先利用思維導圖對產品的架構做一次梳理，通過功能結構圖你可以清晰地看到產品應該有的功能。在掌握架構的基礎上，對產品的核心流程再進行一次梳理，包括線上、線下所有的流程節點、體驗接觸點和不同用戶端的流程觸點。
03、多做競品分析，從競品中尋找靈感和產品感。怎么做競品分析具體可查看我的其他文章，競品分析維度的確定。
04、持續不斷地培養自己的思維能力，深入思考、多做歸納總結和分析。在做設計的時候我們也可以讓自己的思維慢下來，多去思考：思考一下為什么做這個需求？對用戶有什么價值？對產品有什么價值？對業務有什么價值？設計、產品、運營應該怎么做才能達成這個目標？我們的做法對業務、對產品有什么影響？設計方案能不能很好地平衡業務和體驗的關系？
01、用戶不知道自己真正想要什么。
02、用戶難以說出自己的真實需求，用戶在闡釋自己的需求時，就會不自覺地粉飾和解釋自己赤裸裸的本質需求。例如：那些刷視頻就能領紅包得產品，但為什么它最近不火了，這類產品的人群，本質需求是：通過刷頁面領紅包，獲取更多的錢，這類人根本不關心內容是什么、內容質量怎么樣，這就造成了內容的觸達效果非常差。
01、了解我們產品的目標用戶群體和現有產品用戶群體，掌握用戶基本信息，分析用戶特征。（Who）用戶是哪些人：性別、年齡、地域分布、學歷收入等。(What) 用戶有什么共性。（Why）為什么選用我們的產品。（Where/When）在什么場景下使用我們的產品。
02、通過了解用戶得到的所有信息，然后創建用戶畫像，得出結論。那么如何創建用戶畫像呢？
001、人物創建：創建一個虛擬的用戶群體中的一員，利用我們上面提到的用戶相關信息，可以給他/她一個插畫風格的照片幫助我們具體化這個用戶的人格和形象。然后列出他/她的基本信息，給他/她定一個社會角色，比如：小王，男，28歲，銷售經理，我們產品的熟練用戶，月收入2萬，學歷本科。
002、分析動機：這個人物用我們的產品想干什么；這個人物對我們產品某個功能使用較多，需求較強的原因是什么，想達成什么樣的個人目標。
可以通過用戶畫像推測用戶的心理特征和行為偏好，積累了以上信息，你就比較容易進行需求的分析和挖掘了，提煉出解決用戶需求的核心的痛點。例如：解決了用戶在特定場景下的某一個核心痛點，滿足了用戶在當前場景下特定的訴求/需求。例如：共享單車產品就是解決了從車站、地鐵站到家、工作單位最后一段距離的出行痛點。例如：地圖軟件解決的是陌生地區找不到路和易違章的痛點。
01、了解人性：做設計就是做人性，只有把握好人性的特點才能更好地滿足用戶心理，進一步引導用戶行為。馬斯洛需求層次理論，人的需求從低到高可分為 5 個層次：我們就可以試著洞察用戶在特定場景下的本質需求到底是什么了。生理需求（呼吸/食物/水）：現代社會其實就是對生存條件的追求；安全需求（避免自己受到傷害）；
社交需求（愛與被愛/社會關系/地位）對情感的需要；尊重需求（被自己認可/被他人認可和尊重）對穩定社會地位的需要；自我實現需求（道德層面/內心層面的追求和滿足）。
所以用戶的本質需求無外乎：生存、金錢、情感、名利、心理滿足這幾個方面。
02、將用戶敘述的需求，轉化為本質需求：比如：有的用戶說，上品商場最近優惠券怎么少了？我都不想去上品買東西了。用戶表意是嫌優惠券少，如果我們草率得出：增加優惠券運營力度的結論太過于表面，其實用戶的本質是嫌商品太貴了，他們的本質需求是省錢，少花錢且買到想要的東西。而這類用戶是對價格極其敏感的用戶，增加優惠券只是其中一個策略，是無法滿足他們根本需求的。根據他們省錢的本質需求，我們可以給他們更多地推薦低端商家，哪怕沒有優惠券，還是能提升一波 GMV。
進而轉化成設計目標為，要通過我們的設計能力，給用戶營造一個很省錢的氛圍，而不是一味地給用戶降價或是發優惠券。規劃更多的秒殺、每日特價、分享領券等活動專區，在設計頁面時增加優惠券、紅包等元素，突出省錢、低價等文案，可以有效地吸引此類用戶，引導他們下單付款。這就是本質需求的應用方法。
工具——KANO 模型問卷調研，主要依據是用戶調研，可以通過定性訪談的方式，對部分用戶進行了解，大概了解用戶對需求的態度；也可以通過定量問卷的方式，通過問卷獲取比較有參考價值的數據信息。不同類型的需求和用戶滿意度之間的關系，將影響用戶滿意度的因素分成五類：
基本型需求：無此功能，用戶滿意度會顯著降低；有此功能，用戶滿意度不會顯著提升。
期望型需求：無此功能，用戶滿意度會降低；有此功能，用戶滿意度會提升。
興奮型需求：無此功能，用戶滿意度不會降低；有此功能，用戶滿意度會有顯著提升。
無差異需求：有無此功能，用戶滿意度都不會有太大變化。
反向型需求：無此功能，不會影響滿意度；但有此功能用戶滿意度會下降。
經過需求分析我們會拿到大量用戶需求的相關信息，在取舍和決策時我們可以使用三個原則 + 一個工具：01、
圍繞本質需求和痛點；關注與業務不相悖的需求；解決影響用戶峰值體驗的問題；在做分析時可以利用 KANO 模型，重點關注模型定位出的基本型、期望型需求，適當關注興奮型和反向型需求。
至此，我們掌握了產品分析的第一步，也就是找到設計的方向和基本依據——用戶需求；下一模塊我們將進入需求分析的第二步——場景分析，來找到設計可以利用的機會點、切入點！
01、任何產品的誕生都是基于用途，牙刷為了刷牙、菜刀為了切菜、汽車為了出行……生產這些產品是為了滿足用戶的需求，而生產產品時需要考慮的因素如外觀、材質、設計細節等則源于用戶場景。
02、互聯網產品其實也是一樣的道理，產品基于用戶的一些需求或者痛點而誕生，基于用戶的使用場景做功能和細節體驗。
站在用戶的立場思考細節：必須首先知道用戶需要什么、喜好什么、討厭什么、不能接受什么，才能進一步改善我們的產品?；谟脩舻哪康摹⑿袨槠玫妊芯坑脩粼趫鼍袄锏男袨?、情緒，從而深入場景，做出正確的決策。
避免主管的質疑和批判：有的用戶會有各種各樣“奇葩”的反饋，所以我們要多理解用戶的選擇和立場，避免主觀的質疑和批判。
學會聆聽和關注反饋：在日常工作的溝通、對用戶的訪談中，我們可以試著多用心傾聽對方的表達。
01、還原用戶體驗產品的流程（分析的是場景中的線，包括流程線、行為線等。）02、列出用戶與產品、與線下場景有聯系的所有觸點。03、通過這些觸點掌握用戶的操作軌跡和行為特征。04、分析用戶的體驗感受。
01、明確分析對象：最重要的是確定一條明確的流程線，分析的產品某個功能或者某個服務/體驗流程，并非用戶。
02、拆解體驗流程：把分析的流程進行拆分，拆成一個個體驗節點，實際場景設置節點。比如網約車的產品，要根據用戶在線下叫出租車的體驗場景來拆分，可以拆成走到路邊、招手攔車、上車、行程中、支付下車等幾個重要節點，然后根據這些節點來考慮和分析是否有優化或者需要顛覆的地方。
03、創建用戶畫像：主要從用戶的基礎特征、用戶的心理和偏好等信息去做畫像，最后可以形成一個稍稍具體的角色。
04、分析階段：制作表格，把每個節點的信息進行分析推測和記錄。例如下面表格：
橫向：是第二步拆解出來的所有的流程節點。
縱向：用戶與產品的觸點：就是用戶如何操作我們產品，點了哪里、在哪里停留時間較長，這都是通過埋點數據可以看到的。
用戶目標：從用戶的使用數據和用戶訪談中獲取相關的用戶信息，通過用戶的行為和他們表述的信息找到他們的立場、目的和利益點，從而分析他們想要什么。
用戶行為：為了這個目標會怎么做。
結果：看我們的產品頁面信息、流程及功能能不能滿足用戶上述的目的和行為即可。
用戶情緒：用戶的目標和我們觸點是否契合，最終的結果是否能滿足用戶的需求和目的，沒有滿足的時候情緒低落到什么程度，滿足的時候情緒會高漲到什么情況，哪里是最低谷，哪里是最高峰。
05、得出結論：重點要看的是用戶情緒的起伏。找到最低點，看哪些節點影響了用戶的體驗，就是產品的痛點，也是我們的設計發力點和機會點。
同理心模型適合分析我們產品體驗流程中的某個節點或細節功能，不適合進行流程化的分析。包含所看、所聽、所做、感受、所想。
01、明確我們分析的對象是什么：比如：網約車用戶在打車等待接單的環節；比如電商產品確認訂單的環節；這些環節這些環節和節點都有共同的特點，就是集中在有限的一到三個頁面中，用戶的核心操作比較簡單。
02、首先把圖表畫在白板上，用便利貼寫出所看、所聽、所做、感受、所想，五個維度的想法，
03、然后進行集體討論，把這些便利貼提煉總結，歸納出重點信息，通過這種方式可以避免一個人悶頭思考的局限性，也可以保證思考的全面性。
04、接下來對這個圖進行行為總結，找到用戶行為的原因，分析用戶的偏好和習慣。
05、最后通過用戶情緒和感受，分析我們產品體驗的問題。
親切：通過情感化設計，營造親切的氛圍，拉近與用戶的距離。比如：百度地圖可以在導航設置里將導航車標設置成自己的汽車品牌，當看到自己車的車標在地圖上移動，用戶就會感覺非常親切和熟悉。
安全：讓用戶感到人身、隱私的安全。比如：嗶哩嗶哩在登錄界面輸入密碼時的二次元形象會有捂眼睛的動作。
互動：我們的產品流程和功能的實現需要用戶的參與。比如：用戶刷新網頁時，由于網速較慢、需要較多的加載時間，在加載的過程中，有很多網站會提供一些互動小游戲。用戶參與進來了，整體等待的時間也就顯得沒那么漫長，這種互動既可以緩解用戶的焦慮情緒，又能有效防止用戶跳出。
驚喜：人們對一件事物的判斷往往會基于最初的信息。所以如果我們在提供最初的信息時就給予用戶更好的結果，一定可以給用戶帶來驚喜?；ㄐ∝i在打車時先出現原價，然后彈出優惠券動效，價格數字也嘩啦嘩啦往下降，這個不斷下降的數字就利用了錨定效應，給予用戶一定的驚喜。
關懷：考慮用戶的使用場景，在場景下給予用戶細節上的功能推薦或操作建議。比如：美團外賣，在天氣惡劣時會提前提醒用戶：為避免延誤用餐時間，請提前下單。比如：滴滴出行，在用戶經常通勤的時間段也會自動提示：由常用起點至常用終點的路線派車大概需要XX分鐘，點擊即可叫車
預期：難以避免需要等待、甚至反復操作的情況，此時為避免用戶跳出，你需要在細節上做好預期管理。比如：我們在用支付寶還信用卡時，支付完成后我們能看到已提交——待銀行處理等環節的流程提示。比如：我們在填寫一個需要補充大量信息才能注冊的網站賬號時，網站頂部一般會有注冊步驟的導航。當然以上只是最基礎的預期管理，如果你的文案能更俏皮一點，視覺效果上增加一些 IP 、甚至動畫就更好了。
反饋：對用戶的操作及時給予回應，尤其是異常場景，需要使用用戶更容易接受的方式給予反饋。
情懷：能給用戶帶來情感上的力量。
品牌：在產品的配色、排版、控件樣式上體現品牌的統一調性。在產品的體驗流程中貫穿品牌的價值。比如：在京東自營的店鋪購物、使用京東物流的產品會標明“京東物流”，在確認訂單頁也有“京準達”的功能選項，京東通過這種方式，將自營物流、快速到達的品牌特性一一表達。
價值：實現更大的社會價值，從而提升企業形象。比如：商城的包裝箱、騰訊的 404 網頁上都能看到一些被拐兒童的尋人啟事，因為這些網頁和包裝材料的傳播力極大、傳播范圍極廣，可以帶來良好的社會公益效益。
故事版：體驗地圖和同理心模型，可以分別從流程到節點對場景進行分析，那么這些場景如何歸納和表達，以供大家決策和評審呢？需要站在用戶需求的角度講故事。故事板這種漫畫/故事的形式易于被受眾接受，在闡釋需求、說明方案時具有更強的親和力和說服力，
描述過程：創建的虛擬人物；明確關鍵節點；找到虛擬人物在整個故事中所有行為和目的。
產品思維、需求分析、場景分析這三部分是產品設計三個基本要素，做好這些分析能幫助我們了解產品、業務與用戶之間的聯系，從而做出體驗好、價值高的優秀產品。這些分析都是我們進入設計工作的前期信息和準備依據。接下來我們要做的就是明確設計目標。
01、一接到需求就馬上打開軟件開始往上鋪圖，遇到被卡住的情況，沒有辦法繼續做下去，總在糾結。
02、有時候產品經理對某個需求也提不出很明確的方向，我們設計的時候能搞出幾個方向的方案，但是不知道如何決策。
03、我們在著手設計的時候就沒有想好我們輸出這個設計圖的目的是什么，比如需要促進產品什么轉化、解決用戶什么痛點、解決體驗上哪些問題？
04、我們做這些工作的目的是XXX，只有達到這個目標我們做了這么多工作才有意義、有價值。
05、在日常工作中你也會發現，產品設計不等于純創意設計，產品設計的關鍵價值在于發現和解決問題，通過對體驗流程和頁面細節的處理/優化，得到我們期望的用戶反饋和業務數據。
01、設計目標的來源是用戶目標、業務目標和產品目標，依據這三個目標，我們將其轉化為設計目標；
02、然后是將設計方案朝著既定目標實施，在方案的流程和細節里體現/實現我們的設計目標；
03、上線后，及時收集和整理設計目標、產品目標相關的數據和用戶反饋，驗證我們的設計方案有無達到目標；
04、然后規劃下一步的迭代方向。
01、明確用戶目標和產品目標：設計目標的根本是產品目標，產品目標的根本來是業務目標和用戶目標，也就是業務的規劃和用戶的需求、痛點。因此在實際操作中，第一步我們要先明確我們的產品目標是什么，產品目標大多和用戶的轉化、功能的使用率有關，我們朝著這些方向分析一般不會有較大偏差。
02、通過上面目標找到與之相關的關鍵用戶操作：比如點擊加購按鈕、比如完成付款驗證操作、比如填寫全部表單信息。
03、將關鍵的用戶操作轉化成可以衡量的數據指標：將這些關鍵的用戶操作轉化為可以衡量的數據指標，比如加購 BTN 的點擊量、訂單提交后的付款成功率、比如表單信息的完整率。因此設計目標必須是可量化的，產品使用數據和業務數據，比如點擊量、退出率、取消率、跳出率等，才能在設計方案上線后正確評估我們的方案有沒有完成設計目標。
01、先去定位設計難點，找到設計重點，再著手設計。完成主流程后再去解決小問題。
02、接著列出流程或需求點，對設計方案有大致框架；
03、然后針對流程中每個節點列舉可能會出現的問題把精力放在影響設計目標和用戶核心體驗的重點問題上。
精益創業模式里有一個 MVP 的概念，我們現在產品研發中的敏捷模式也是源于這個概念。簡單來講，就是用較小的成本先做出一個產品，然后快速上線，驗證業務模式、產品策略和用戶體驗等問題，然后小版本快速迭代，進行優化。
參考資料：
《用戶體驗干貨筆記》
《用戶體驗要素》
《騰訊產品法》
《交互設計知識體系》
C端設計前的準備工作，其中重點在于學會需求分析和場景分析。具體掌握需求分析的核心方法步驟，和場景分析中用到的三個工具用戶體驗地圖、同理心模型、情感化設計、和故事版。需求分析、場景分析是產品設計的基本要素，做好這些分析能幫助我們了解產品、業務與用戶之間的聯系，從而做出體驗好、價值高的優秀產品。這些分析都是我們進入設計工作的前期信息和準備依據。
接下來我們要做的就是明確設計目標，設計目標的來源是用戶目標、業務目標和產品目標，依據這三個目標，我們將其轉化為設計目標，然后將設計方案朝著既定目標實施，在方案的流程和細節里體現/實現我們的設計目標，在產品上線后，及時收集和整理和設計目標、產品目標相關的數據和用戶反饋，驗證我們的設計方案有無達到目標，然后規劃下一步的迭代方向。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
做一個完整C端項目前，從產品思維得理解、需求分析到場景分析，通過以上分析得出結論，進而制定我們的設計目標，把設計目標落地到解決實際的設計問題，內容較多，大家可以根據上述目錄來進行選擇性閱讀。
了解用戶心理：“心理”主要是指用戶的情緒，只有了解用戶的心理狀態，才能知道他們在接觸到或者使用我們的產品時是正面的情緒還是負面的情緒。正面情緒需要我們引導去實現轉化，負面情緒需要我們安撫以避免跳出和口碑的損失。
把控用戶行為：最終目的還是引導用戶行為，讓用戶按照我們的計劃進行產品的交互、操作，從而實現對用戶的有效管控和轉化。例如：上品店慶推出“購物省錢節”的概念，聯合商家推出各種優惠活動，就是抓住用戶在購物時想省錢的心理，通過降價、優惠券等方案讓用戶在選購商品、提交訂單和結算階段都保持高漲的情緒，從而推動用戶最終完成付款。
解決用戶痛點: 在完成上面的分析后，我們最終需要把調研和分析結論落地為設計方案，前提是要關注用戶當前的情緒是負面的還是正面的，如果是負面的情緒，我們可以通過補償、安撫等方案對用戶進行留存。例如：在等待外賣送達時，配送信息頁一般都會有預估時間、位置等信息，讓用戶有一定預期。同時如果遲到時間過長，也會通過準時寶等規則給予用戶優惠券補償，這些都是負面情緒的安慰。
項目思維主要指，我們要具備極強的發現問題、輸出方案、推動落地的能力。這就是設計師的項目思維和推動力，可以保證自己的想法快速落地、推動設計優化并盡快上線。
商業思維是指，拉新：通過產品、運營和營銷策略讓用戶下載產品。留存：讓下載的用戶保持活躍度，留住用戶，便于轉化。轉化：讓用戶按照我們的業務規劃去注冊、分享、下單、付款等動作，一步步帶入我們的圈套，完成關鍵操作。變現：將用戶行為變現，內容產品的活躍度可以帶來廣告營收，電商產品的成交額就是業務收益。
相同點：在實際工作中，設計師和產品經理的目標在本質上是一致的，都是解決用戶的痛點、滿足用戶的需求，為用戶提供體驗更好的產品，并在此基礎之上完成用戶轉化，實現收益。作為一個設計師，我們對產品了解的深度不一定比得過產品經理，但是廣度上你應該要求自己和產品經理保持一致。只要掌握產品的架構、流程和業務的模式、原理即可。
不同點：UI設計師更注重通過用戶體驗來留存用戶，產品經理更多地考慮轉化用戶和變現的途徑。
沖突點：這時就會產生一些沖突和矛盾，有時為達到業績目標，產品經理或其他業務方可能會提出有損用戶體驗的方案或者策略。
想要解決與產品沖突得問題，就要充分調動自己的產品思維，保持習慣性的產品思維，才能始終保持和業務一致的目標。和業務方站在一起，才能找到設計和業務的共同目標，并將業務目標轉化為可執行的設計目標，才能為設計帶來更高的價值。
這里就繞不開這個話題----產品思維。別人眼里的UI設計師，很多人會認為設計師的工作就是設計流程頁面、視覺效果。這些工作看起來只是錦上添花，即使沒有專業的設計師來設計，可能只是流程、控件位置不太合理、樣式和顏色不太好看而已，并不會影響產品的開發和上線。其實，設計師的價值不僅是藝術價值，更重要的是為業務帶來價值。
UI/UX設計師，關鍵在于對用戶場景、對產品細節的敏感度，這也是其他崗位不具備的技能。實際工作中這些細節問題，很容易區分出來專業性的差異，因為UIUX設計師是距離用戶最近的人。我們設計頁面，用戶在頁面上操作和獲取信息。我們設計流程，用戶通過流程完成各自的需求。我們設計的產品流程、頁面，是用戶直接接觸和使用的東西?；谶@個原因，設計師對用戶的需求、反饋是最了解和最敏感的，我們可以通過用戶的反饋、操作數據把控用戶的心理狀態和行為方向。無論是在方向上還是從細節出發，挖掘和洞察用戶需求，設計師有明顯的優勢。
所以UI設計師真正的價值就是通過自己對細節和場景的思考，自我驅動，找到設計優化、產品迭代、業務提升的機會點。想要找到這些機會點，你需要培養自己的產品思維、項目思維和商業思維。
01、多與需求方、業務方（產品經理、運營、市場等崗位的同事）溝通，在參加需求評審的時候，深入了解業務和產品的特點、原理。
02、了解產品流程：在接手某項業務或產品時，先利用思維導圖對產品的架構做一次梳理，通過功能結構圖你可以清晰地看到產品應該有的功能。在掌握架構的基礎上，對產品的核心流程再進行一次梳理，包括線上、線下所有的流程節點、體驗接觸點和不同用戶端的流程觸點。
03、多做競品分析，從競品中尋找靈感和產品感。怎么做競品分析具體可查看我的其他文章，競品分析維度的確定。
04、持續不斷地培養自己的思維能力，深入思考、多做歸納總結和分析。在做設計的時候我們也可以讓自己的思維慢下來，多去思考：思考一下為什么做這個需求？對用戶有什么價值？對產品有什么價值？對業務有什么價值？設計、產品、運營應該怎么做才能達成這個目標？我們的做法對業務、對產品有什么影響？設計方案能不能很好地平衡業務和體驗的關系？
01、用戶不知道自己真正想要什么。
02、用戶難以說出自己的真實需求，用戶在闡釋自己的需求時，就會不自覺地粉飾和解釋自己赤裸裸的本質需求。例如：那些刷視頻就能領紅包得產品，但為什么它最近不火了，這類產品的人群，本質需求是：通過刷頁面領紅包，獲取更多的錢，這類人根本不關心內容是什么、內容質量怎么樣，這就造成了內容的觸達效果非常差。
01、了解我們產品的目標用戶群體和現有產品用戶群體，掌握用戶基本信息，分析用戶特征。（Who）用戶是哪些人：性別、年齡、地域分布、學歷收入等。(What) 用戶有什么共性。（Why）為什么選用我們的產品。（Where/When）在什么場景下使用我們的產品。
02、通過了解用戶得到的所有信息，然后創建用戶畫像，得出結論。那么如何創建用戶畫像呢？
001、人物創建：創建一個虛擬的用戶群體中的一員，利用我們上面提到的用戶相關信息，可以給他/她一個插畫風格的照片幫助我們具體化這個用戶的人格和形象。然后列出他/她的基本信息，給他/她定一個社會角色，比如：小王，男，28歲，銷售經理，我們產品的熟練用戶，月收入2萬，學歷本科。
002、分析動機：這個人物用我們的產品想干什么；這個人物對我們產品某個功能使用較多，需求較強的原因是什么，想達成什么樣的個人目標。
可以通過用戶畫像推測用戶的心理特征和行為偏好，積累了以上信息，你就比較容易進行需求的分析和挖掘了，提煉出解決用戶需求的核心的痛點。例如：解決了用戶在特定場景下的某一個核心痛點，滿足了用戶在當前場景下特定的訴求/需求。例如：共享單車產品就是解決了從車站、地鐵站到家、工作單位最后一段距離的出行痛點。例如：地圖軟件解決的是陌生地區找不到路和易違章的痛點。
01、了解人性：做設計就是做人性，只有把握好人性的特點才能更好地滿足用戶心理，進一步引導用戶行為。馬斯洛需求層次理論，人的需求從低到高可分為 5 個層次：我們就可以試著洞察用戶在特定場景下的本質需求到底是什么了。生理需求（呼吸/食物/水）：現代社會其實就是對生存條件的追求；安全需求（避免自己受到傷害）；
社交需求（愛與被愛/社會關系/地位）對情感的需要；尊重需求（被自己認可/被他人認可和尊重）對穩定社會地位的需要；自我實現需求（道德層面/內心層面的追求和滿足）。
所以用戶的本質需求無外乎：生存、金錢、情感、名利、心理滿足這幾個方面。
02、將用戶敘述的需求，轉化為本質需求：比如：有的用戶說，上品商場最近優惠券怎么少了？我都不想去上品買東西了。用戶表意是嫌優惠券少，如果我們草率得出：增加優惠券運營力度的結論太過于表面，其實用戶的本質是嫌商品太貴了，他們的本質需求是省錢，少花錢且買到想要的東西。而這類用戶是對價格極其敏感的用戶，增加優惠券只是其中一個策略，是無法滿足他們根本需求的。根據他們省錢的本質需求，我們可以給他們更多地推薦低端商家，哪怕沒有優惠券，還是能提升一波 GMV。
進而轉化成設計目標為，要通過我們的設計能力，給用戶營造一個很省錢的氛圍，而不是一味地給用戶降價或是發優惠券。規劃更多的秒殺、每日特價、分享領券等活動專區，在設計頁面時增加優惠券、紅包等元素，突出省錢、低價等文案，可以有效地吸引此類用戶，引導他們下單付款。這就是本質需求的應用方法。
工具——KANO 模型問卷調研，主要依據是用戶調研，可以通過定性訪談的方式，對部分用戶進行了解，大概了解用戶對需求的態度；也可以通過定量問卷的方式，通過問卷獲取比較有參考價值的數據信息。不同類型的需求和用戶滿意度之間的關系，將影響用戶滿意度的因素分成五類：
基本型需求：無此功能，用戶滿意度會顯著降低；有此功能，用戶滿意度不會顯著提升。
期望型需求：無此功能，用戶滿意度會降低；有此功能，用戶滿意度會提升。
興奮型需求：無此功能，用戶滿意度不會降低；有此功能，用戶滿意度會有顯著提升。
無差異需求：有無此功能，用戶滿意度都不會有太大變化。
反向型需求：無此功能，不會影響滿意度；但有此功能用戶滿意度會下降。
經過需求分析我們會拿到大量用戶需求的相關信息，在取舍和決策時我們可以使用三個原則 + 一個工具：01、
圍繞本質需求和痛點；關注與業務不相悖的需求；解決影響用戶峰值體驗的問題；在做分析時可以利用 KANO 模型，重點關注模型定位出的基本型、期望型需求，適當關注興奮型和反向型需求。
至此，我們掌握了產品分析的第一步，也就是找到設計的方向和基本依據——用戶需求；下一模塊我們將進入需求分析的第二步——場景分析，來找到設計可以利用的機會點、切入點！
01、任何產品的誕生都是基于用途，牙刷為了刷牙、菜刀為了切菜、汽車為了出行……生產這些產品是為了滿足用戶的需求，而生產產品時需要考慮的因素如外觀、材質、設計細節等則源于用戶場景。
02、互聯網產品其實也是一樣的道理，產品基于用戶的一些需求或者痛點而誕生，基于用戶的使用場景做功能和細節體驗。
站在用戶的立場思考細節：必須首先知道用戶需要什么、喜好什么、討厭什么、不能接受什么，才能進一步改善我們的產品?；谟脩舻哪康?、行為偏好等研究用戶在場景里的行為、情緒，從而深入場景，做出正確的決策。
避免主管的質疑和批判：有的用戶會有各種各樣“奇葩”的反饋，所以我們要多理解用戶的選擇和立場，避免主觀的質疑和批判。
學會聆聽和關注反饋：在日常工作的溝通、對用戶的訪談中，我們可以試著多用心傾聽對方的表達。
01、還原用戶體驗產品的流程（分析的是場景中的線，包括流程線、行為線等。）02、列出用戶與產品、與線下場景有聯系的所有觸點。03、通過這些觸點掌握用戶的操作軌跡和行為特征。04、分析用戶的體驗感受。
01、明確分析對象：最重要的是確定一條明確的流程線，分析的產品某個功能或者某個服務/體驗流程，并非用戶。
02、拆解體驗流程：把分析的流程進行拆分，拆成一個個體驗節點，實際場景設置節點。比如網約車的產品，要根據用戶在線下叫出租車的體驗場景來拆分，可以拆成走到路邊、招手攔車、上車、行程中、支付下車等幾個重要節點，然后根據這些節點來考慮和分析是否有優化或者需要顛覆的地方。
03、創建用戶畫像：主要從用戶的基礎特征、用戶的心理和偏好等信息去做畫像，最后可以形成一個稍稍具體的角色。
04、分析階段：制作表格，把每個節點的信息進行分析推測和記錄。例如下面表格：
橫向：是第二步拆解出來的所有的流程節點。
縱向：用戶與產品的觸點：就是用戶如何操作我們產品，點了哪里、在哪里停留時間較長，這都是通過埋點數據可以看到的。
用戶目標：從用戶的使用數據和用戶訪談中獲取相關的用戶信息，通過用戶的行為和他們表述的信息找到他們的立場、目的和利益點，從而分析他們想要什么。
用戶行為：為了這個目標會怎么做。
結果：看我們的產品頁面信息、流程及功能能不能滿足用戶上述的目的和行為即可。
用戶情緒：用戶的目標和我們觸點是否契合，最終的結果是否能滿足用戶的需求和目的，沒有滿足的時候情緒低落到什么程度，滿足的時候情緒會高漲到什么情況，哪里是最低谷，哪里是最高峰。
05、得出結論：重點要看的是用戶情緒的起伏。找到最低點，看哪些節點影響了用戶的體驗，就是產品的痛點，也是我們的設計發力點和機會點。
同理心模型適合分析我們產品體驗流程中的某個節點或細節功能，不適合進行流程化的分析。包含所看、所聽、所做、感受、所想。
01、明確我們分析的對象是什么：比如：網約車用戶在打車等待接單的環節；比如電商產品確認訂單的環節；這些環節這些環節和節點都有共同的特點，就是集中在有限的一到三個頁面中，用戶的核心操作比較簡單。
02、首先把圖表畫在白板上，用便利貼寫出所看、所聽、所做、感受、所想，五個維度的想法，
03、然后進行集體討論，把這些便利貼提煉總結，歸納出重點信息，通過這種方式可以避免一個人悶頭思考的局限性，也可以保證思考的全面性。
04、接下來對這個圖進行行為總結，找到用戶行為的原因，分析用戶的偏好和習慣。
05、最后通過用戶情緒和感受，分析我們產品體驗的問題。
親切：通過情感化設計，營造親切的氛圍，拉近與用戶的距離。比如：百度地圖可以在導航設置里將導航車標設置成自己的汽車品牌，當看到自己車的車標在地圖上移動，用戶就會感覺非常親切和熟悉。
安全：讓用戶感到人身、隱私的安全。比如：嗶哩嗶哩在登錄界面輸入密碼時的二次元形象會有捂眼睛的動作。
互動：我們的產品流程和功能的實現需要用戶的參與。比如：用戶刷新網頁時，由于網速較慢、需要較多的加載時間，在加載的過程中，有很多網站會提供一些互動小游戲。用戶參與進來了，整體等待的時間也就顯得沒那么漫長，這種互動既可以緩解用戶的焦慮情緒，又能有效防止用戶跳出。
驚喜：人們對一件事物的判斷往往會基于最初的信息。所以如果我們在提供最初的信息時就給予用戶更好的結果，一定可以給用戶帶來驚喜?；ㄐ∝i在打車時先出現原價，然后彈出優惠券動效，價格數字也嘩啦嘩啦往下降，這個不斷下降的數字就利用了錨定效應，給予用戶一定的驚喜。
關懷：考慮用戶的使用場景，在場景下給予用戶細節上的功能推薦或操作建議。比如：美團外賣，在天氣惡劣時會提前提醒用戶：為避免延誤用餐時間，請提前下單。比如：滴滴出行，在用戶經常通勤的時間段也會自動提示：由常用起點至常用終點的路線派車大概需要XX分鐘，點擊即可叫車
預期：難以避免需要等待、甚至反復操作的情況，此時為避免用戶跳出，你需要在細節上做好預期管理。比如：我們在用支付寶還信用卡時，支付完成后我們能看到已提交——待銀行處理等環節的流程提示。比如：我們在填寫一個需要補充大量信息才能注冊的網站賬號時，網站頂部一般會有注冊步驟的導航。當然以上只是最基礎的預期管理，如果你的文案能更俏皮一點，視覺效果上增加一些 IP 、甚至動畫就更好了。
反饋：對用戶的操作及時給予回應，尤其是異常場景，需要使用用戶更容易接受的方式給予反饋。
情懷：能給用戶帶來情感上的力量。
品牌：在產品的配色、排版、控件樣式上體現品牌的統一調性。在產品的體驗流程中貫穿品牌的價值。比如：在京東自營的店鋪購物、使用京東物流的產品會標明“京東物流”，在確認訂單頁也有“京準達”的功能選項，京東通過這種方式，將自營物流、快速到達的品牌特性一一表達。
價值：實現更大的社會價值，從而提升企業形象。比如：商城的包裝箱、騰訊的 404 網頁上都能看到一些被拐兒童的尋人啟事，因為這些網頁和包裝材料的傳播力極大、傳播范圍極廣，可以帶來良好的社會公益效益。
故事版：體驗地圖和同理心模型，可以分別從流程到節點對場景進行分析，那么這些場景如何歸納和表達，以供大家決策和評審呢？需要站在用戶需求的角度講故事。故事板這種漫畫/故事的形式易于被受眾接受，在闡釋需求、說明方案時具有更強的親和力和說服力，
描述過程：創建的虛擬人物；明確關鍵節點；找到虛擬人物在整個故事中所有行為和目的。
產品思維、需求分析、場景分析這三部分是產品設計三個基本要素，做好這些分析能幫助我們了解產品、業務與用戶之間的聯系，從而做出體驗好、價值高的優秀產品。這些分析都是我們進入設計工作的前期信息和準備依據。接下來我們要做的就是明確設計目標。
01、一接到需求就馬上打開軟件開始往上鋪圖，遇到被卡住的情況，沒有辦法繼續做下去，總在糾結。
02、有時候產品經理對某個需求也提不出很明確的方向，我們設計的時候能搞出幾個方向的方案，但是不知道如何決策。
03、我們在著手設計的時候就沒有想好我們輸出這個設計圖的目的是什么，比如需要促進產品什么轉化、解決用戶什么痛點、解決體驗上哪些問題？
04、我們做這些工作的目的是XXX，只有達到這個目標我們做了這么多工作才有意義、有價值。
05、在日常工作中你也會發現，產品設計不等于純創意設計，產品設計的關鍵價值在于發現和解決問題，通過對體驗流程和頁面細節的處理/優化，得到我們期望的用戶反饋和業務數據。
01、設計目標的來源是用戶目標、業務目標和產品目標，依據這三個目標，我們將其轉化為設計目標；
02、然后是將設計方案朝著既定目標實施，在方案的流程和細節里體現/實現我們的設計目標；
03、上線后，及時收集和整理設計目標、產品目標相關的數據和用戶反饋，驗證我們的設計方案有無達到目標；
04、然后規劃下一步的迭代方向。
01、明確用戶目標和產品目標：設計目標的根本是產品目標，產品目標的根本來是業務目標和用戶目標，也就是業務的規劃和用戶的需求、痛點。因此在實際操作中，第一步我們要先明確我們的產品目標是什么，產品目標大多和用戶的轉化、功能的使用率有關，我們朝著這些方向分析一般不會有較大偏差。
02、通過上面目標找到與之相關的關鍵用戶操作：比如點擊加購按鈕、比如完成付款驗證操作、比如填寫全部表單信息。
03、將關鍵的用戶操作轉化成可以衡量的數據指標：將這些關鍵的用戶操作轉化為可以衡量的數據指標，比如加購 BTN 的點擊量、訂單提交后的付款成功率、比如表單信息的完整率。因此設計目標必須是可量化的，產品使用數據和業務數據，比如點擊量、退出率、取消率、跳出率等，才能在設計方案上線后正確評估我們的方案有沒有完成設計目標。
01、先去定位設計難點，找到設計重點，再著手設計。完成主流程后再去解決小問題。
02、接著列出流程或需求點，對設計方案有大致框架；
03、然后針對流程中每個節點列舉可能會出現的問題把精力放在影響設計目標和用戶核心體驗的重點問題上。
精益創業模式里有一個 MVP 的概念，我們現在產品研發中的敏捷模式也是源于這個概念。簡單來講，就是用較小的成本先做出一個產品，然后快速上線，驗證業務模式、產品策略和用戶體驗等問題，然后小版本快速迭代，進行優化。
參考資料：
《用戶體驗干貨筆記》
《用戶體驗要素》
《騰訊產品法》
《交互設計知識體系》
C端設計前的準備工作，其中重點在于學會需求分析和場景分析。具體掌握需求分析的核心方法步驟，和場景分析中用到的三個工具用戶體驗地圖、同理心模型、情感化設計、和故事版。需求分析、場景分析是產品設計的基本要素，做好這些分析能幫助我們了解產品、業務與用戶之間的聯系，從而做出體驗好、價值高的優秀產品。這些分析都是我們進入設計工作的前期信息和準備依據。
接下來我們要做的就是明確設計目標，設計目標的來源是用戶目標、業務目標和產品目標，依據這三個目標，我們將其轉化為設計目標，然后將設計方案朝著既定目標實施，在方案的流程和細節里體現/實現我們的設計目標，在產品上線后，及時收集和整理和設計目標、產品目標相關的數據和用戶反饋，驗證我們的設計方案有無達到目標，然后規劃下一步的迭代方向。以上內容，感謝觀看。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
我們生活在一個信息大爆炸的數據化時代，隨著網絡科技的飛速發展，產品和用戶之間的互動也日趨復雜，新功能不斷涌現，帶來便利的同時也導致用戶對功能的認知摩擦日益加劇。在這種情況下，人們對交互設計的需求就越來越大，市場對交互設計師的需求也越來越多。許多公司都注意到交互設計對品牌創建、用戶滿意度以及回頭率等方面的影響。那么，什么是交互？交互設計應該做什么？希望今天這篇文章，能夠加強你對交互的理解。
交互就是與另一個人或者物進行交流互動，比如你說話或按動鼠標，對方給你反饋，這就是交互。對于設計師們來講，交互多指用戶與計算機、手機等產品進行的交互。
交互設計是一個頁面或者一個界面的內容規劃，例如哪里放圖片，哪里放按鈕，哪里出現文字；或者說是一個龐大網站以及產品的整體邏輯梳理，例如如何安排信息層級，如何讓用戶更輕松地找到自己想要了解的信息，如何讓整個網站或產品更加合理、有效地運轉。
一個城市有合理的規劃交通才會便利，城市里面的人才會覺得更加舒適，而一個合理的交互設計也直接影響著一個網站、一個產品甚至一個品牌。
視覺設計是感性的，更注重一切表象的東西，比如顏色、版式、形狀、調性等，視覺設計最終的成品是視覺的效果圖設計稿。
交互設計相對來說更加理性，交互設計更加注重用戶是誰，通過需求分析得出問題、解決問題，交互設計的最終成品是原型圖。
看過了文字解釋，再讓我們一起來看看生活中無處不在的交互設計。
疊貓貓、蓋樓、星秀貓……每年雙11，天貓都會創新活動，激發用戶對雙11購物節的期待，營造蓄勢。
今年的雙11的主題為喵糖總動員，用戶通過組隊一起做任務賺喵糖，通過擲骰子的方式獲取糖果數，占領格子，擊敗對手。獲取喵糖的過程中，營銷或引流設置無處不在。除了做每日簽到獎勵的簡單任務外，最簡單的方式就是用15秒的時間去瀏覽平臺推送給你的主會場、各大分會場、各細分品類、各個商家店鋪等頁面。通過這樣的任務設計，可以引導用戶瀏覽會場店鋪或各品類商品，最大程度地完成各個淘寶店鋪的曝光需求。
天貓雙11-喵糖總動員活動頁面
新冠疫情還在持續蔓延，飛豬App貼心的在行程頁面，添加了防疫工具引導欄，通過點擊按鈕，可跳轉至支付寶中行程碼、核酸預約等界面，為用戶出行提供便捷的準備工作。
用戶在滑動頁面時該導航欄會被隱藏，靜態時則顯示兩個應用，點擊展開才能查看更多。設計采用浮層式引導，提供便利的同時，且不會對用戶產生干擾。
飛豬App界面
一切交互設計所要達到的效果就是形成良好的用戶體驗，讓用戶在使用界面時更方便找到自己感興趣的東西。
通過地圖及定位，通過氣泡及icon的區別，把附近的美食等進行排名，讓用戶更快知道自己的距離。還設置了點擊卡片展示店鋪信息同時支持查詢路線等功能。
美團App界面
“優秀的設計是考慮周到且不放過每個細節”。往往在那些不易被察覺的細微之處，傾注了設計師的諸多巧思與心血，嗶哩嗶哩在設計中做了以下一個有趣的小細節。
在賬號登陸頁面，當我們輸入賬號或者手機號的時候，頁面插畫中的22和33是睜大眼睛的，而當我們輸入密碼或者驗證碼的時候，他們則用手捂住了眼睛。這個有趣的設計生動地傳遞了App對用戶隱私的尊重與保護。
嗶哩嗶哩App界面
當你使用百度搜索物品，查看圖片時，左右滑動即可切換下一張圖片，上劃即可關閉圖片，這樣的操作手勢，更加方便快捷。
在查看物品圖片時，下方還會出現商品推薦購買鏈接，仿佛“一站式”購物的貼心服務。
百度App界面
交互設計的核心目的是信息的傳遞，無論如何設計交互圖、如何設計交互流程，我們要思考的核心和準則是如何把想要傳遞給用戶的信息以最簡單、最容易的方式讓客戶接收，反之用戶也能用最簡單的方式找到自己想要的信息。
這些信息包括內容、按鈕、文字、圖片等一切信息的載體。我們要明白在進行交互設計時的前提是如何去梳理信息更好地傳遞。
那么，如何才能讓信息更好地進行傳遞？我們要搞明白信息傳遞時需要營造什么樣的氛圍，哪些信息元素需要突出，目標用戶是誰，根據這些才能以一個正確的方向有邏輯地進行交互設計，而這一切的最終結果就是實現一個良好的用戶體驗。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
進行配色時，要從兩方面考慮，既突出提升的方面又融合平穩方面。
例如，以自己最喜歡的顏色為中心完成了初稿，然后應該檢查一下，是否過于沉重模糊，或者是否過于喧鬧令人不安。如果過于沉靜，則下點功夫突出一下即可；如果過于喧鬧，則向著沉靜、融合的方向調整即可。
畫面整體顯得模糊時，要放棄幾個要點，明確主題。大力強調作為主角的部分，并刪去曖昧模糊的地方。主題明確后，不僅氣氛被提升，畫面也會顯得清爽踏實。
感覺配色過于沉重壓抑時，應該減少黑色，增加鮮艷的顏色，配色將瞬間明朗起來。色調沉重是由于混入過多黑色，減少黑色后自然會呈現出鮮艷的色彩。這是最有代表性的突出配色的方法，也是效果最顯著的方法。
當畫面的中心部分被提升后，才會使配色給人深刻印象。我們還可以強化明度對比，加強畫面中心部分明度，這樣的畫面會格外令人印象深刻。
A海報帶點夢幻的感覺，但是主角不夠清晰。而B海報提升了背景亮度，擴大與中心人物的明度對比度，從而能強調了主角。
提高顏色純度
強化明度對比
強化色相對比
我們很多小伙伴喜歡沉穩踏實的配色，這種配色方法雖然是好的，但是畫面的配色過于均一則平淡無奇。那怎么解決這個問題呢？其實我們可以在畫面中心設置小面積的亮點，給畫面增添品味和活力。
要記住，亮點的面積越小給人的印象就越深刻。如果你想更加凸顯亮點，那就要抑制周邊的背景色。只有這樣，即使在平穩不顯眼的配色中，這個亮點一樣很顯眼。
A圖中整體色調沉穩，但是總覺得少了點什么。而B圖中鮮艷的紅色成為寧靜配色的亮點，給原本平淡的畫面注入了活力。
弱化背景色，突出亮點
控制好背景色，即使純度不高的亮點也有很好的效果
如果你想增加配色的歡快感，就應該加入純度高的顏色。
A產品整體是暗色調，高雅莊重，但是似乎有些欠缺。而B產品加上了小面積的鮮艷色彩，高雅不變，華麗有余。
加入鮮艷色，變得活力
當人們看到無彩色畫面時，總會感到有所欠缺。如果在無彩色畫面當中加入一些色彩，畫面頓時變得歡快活躍。
A海報是無彩色的，畫面過于單調；而B海報只是在A海報的基礎上增加了色彩面，畫面頓時變得歡快活躍，生動了許多。
增加色彩面，變得明快
很多小伙伴喜歡把畫面背景色設為暗色調，因為這樣有踏實感。這樣做畫面雖然高雅卻有失歡快，我們不妨試試將背景色調亮一個等級，最后你會發現畫面變得明朗愉悅了許多。
因為A畫面沉穩有余，但過于灰暗，缺乏歡快氣氛；將A背景色中的黑色調到零就得到如圖B背景色，調整之后的畫面能給人明快的印象。
減少黑色使畫面明亮
如果你希望畫面變得明亮，又不想破壞原有的踏實感時，則可以保留10%的黑色。
大家都知道按照色相、明度次序配色稱為“漸進配色”；那與之相對的配色方式就是“分離配色”，獨立配置每個顏色。
A圖采用的是漸進式配色，按色相順序排列，給人安靜平穩之感，但有失緊湊，略顯無趣。而B圖采用的是分離式配色，使用與A圖中相同的色彩，只是簡單變換順序，突出各色的獨立性，沖破秩序感，給人以活潑的感覺。
打破顏色順序，隨機分離，使之獨立，釋放出動感
在色相圖在相對的為對比色，相鄰的為鄰近色。單用鄰近色配色，則畫面感覺平穩；加入對比色，則頗具緊湊感。
挑選色相環中的相對兩色，則帶來歡快的節日型配色。若組合在色相環圖中呈正三角形的紅、黃、藍，則得到理性安定的畫面。通過顏色在色相環中的形狀，能創造出各式各樣的色彩表情。
不難想像加入黑色會起提升效果，其實白色同樣能在輕松氛圍中制造緊湊感。
色相環中相對的色相成為對比色，也叫補色，甚至可以說，配色的基本就在于補色，配色完成于補充顏色的過程之中。加入補色使人心情舒暢，缺乏補色的畫面容易令人覺得不自然。
A圖是以同色系為中心的平穩配色；圖B加入對比色藍色后，畫面效果加強了些許。
加入對比色，使畫面生動突出
紅、黃、藍在色相環上組成一個正三角形，被稱為三原色，是特殊的顏色。綠色、紫色等顏色都可以通過混合這3種顏色得來，但是無論怎樣混合其他顏色都無法得到三原色。隨著畢加索、蒙德里安等現代派畫家們追求終極的純粹色，三原色的組合得到了重視。
蒙德里安《紅、黃、藍的構成》
這幅作于1930年的《紅、黃、藍的構成》是蒙德里安幾何抽象風格的代表作。蒙德里安將色彩、形狀純粹化的結果，是否定紅、黃、藍三色以外的一切色彩。線條的方向也限定于水平或垂直，排斥斜線。
三角型的效果，掌握好平衡即可
將兩組對比配色交叉組合后，便得到十字型配色。醒目安定的同時，又具有緊湊感。在一組對比色產生的緊湊感上加一組，自然成為最強配色型。
梵高《軍人》
A畫面只用了一組紅綠對比色，看上去很有緊湊感，但是過于硬朗。在A的基礎上增加了一組藍橙對比色，帶來有力的安定感及緊湊感，畫面豐富了許多。
由于把兩組補色組成十字型，達到了完全的平衡。
黑色是“無色”的特殊色，純度、色相、明度都為零。但是，加入黑色會突出原有的顏色，使畫面有力度。黑色與其他色彩組合時，是最有力的配角色。
海報A藍綠色均為冷色，綠色背景下，表現出輕快自然、明亮卻趨于平淡。海報B背景變為黑色后，綠色變得深邃而閃爍。這時，黑色本身難掩的光輝甚至會使人誤將其當成主角，但是不會喧賓奪主掩蓋主角色。
黑色無論與任何色彩搭配，都起強調提升作用。使強色更加強烈，使淺色更加突出，產生生動醒目的效果。
白色是所有色彩中最中立、最無個性的顏色，但是可以通過特定的使用方法，使畫面整體更突出。在不破壞其他色彩感覺的基礎上提升整體。
白色與任何顏色的反差都很大。人眼對最明亮的白色頗為敏感。即使是相當低的明度下，白色的效果也顯而易見。海報B加入白色，瞬間被突出。
白色有著意想不到的效果。配上過于強硬的顏色則使之緩和，配上淺色則使之被強調。保持淺色原本的感覺，突出整體效果。
與突出型配色一樣，我們采用三屬性（色相、純度、明度）來緩和過于喧鬧、醒目的顏色。突出時要增強三屬性的對比，融合時則要減弱對比色的對立。
色相差越大越活潑，反之，色相越靠近越穩定。色彩給人感覺過于突出喧鬧時，可以靠近色相，協調各種色彩，使畫面穩定下來。
B圖使用近似色配色，表現出平穩安詳的感覺。而A圖紅綠色相之間變化幅度過大，流于散漫，給人一種不安定的感覺。
色相被靠近后稱為鄰近色，進一步靠近則稱為同系色，越偏離對比色、接近同系色，就越有平穩踏實感。
即使色相差很大，只要明度統一，畫面整體就會給人以安定的感覺。這是在不破壞色相平衡、維持原有氣氛的同時，得到安定感的巧妙方法。
A圖明度差較大，產生活潑感。而B圖縮減明度差至零后，畫面整體變得和諧，給人一種安定的感覺。
無論多么松散的配色，統一明度后都會呈現出整齊穩定的效果。零明度差營造出踏實穩定的感覺，因此最好盡量擴大色相差，力求維持色彩之間的跳躍感。
色調也稱“調子”，表示色彩的感覺、品位。因此，可以把同一色調的色群歸為具有同一類色彩感覺。組合同一色調的顏色，則相當于統一了畫面氣氛。
A畫面組合有所偏高的色調，會破壞畫面的統一，而B畫面將鮮艷的色調換為明灰色調，畫面感覺統一和諧了許多。
如果畫面松散，缺乏統一感，則需要統一色調。統一至相同或相近色調后，原本混亂的配色將變得緩和穩定。
將混亂的配色群化會得到踏實的效果。所謂群化，就是賦予色相、色調、明度等以共通性，制造出整齊劃一的組合。畫面松散時，將三屬性的一部分共通化，會得到統一感。
A圖的配色過于混亂，色彩紛繁的效果使畫面整體顯得混亂。B圖的配色明度、色相以及色調都比較相近，畫面整體顯得統一和諧。
所謂群化，指的就是分組、共通化。將前面講述的明度、色相、色調等綜合地共通化后，產生群化效果，畫面收斂、緩和。
所謂“雙色調”，指從相同或相近色相中抽出兩種色調的組合。最有代表性的雙色調是同一色相的單色與明色的組合。制造色差，或是組合進濁色，都能創造出豐富的色彩表情。
B圖的配色采用的是同一色相的淡色與暗色的組合雙色調；而A圖中的綠色與淡紅色的色相差過大，無法組合成相同或相近色相的雙色調。
雙色調組合類型
濃淡法指按照色相或明度順序的配色。由于順序被明示出來，因此產生節奏感，給人以舒適的感覺。對畫面的一部分使用濃淡法配色，則該部分周報有著踏實的效果。
A圖中彩虹的配色排列松散，但頗為活潑；B圖中彩虹按色相順序排列后產生穩定感、節奏感，就會顯得既張揚又踏實。
色相的漸進
明度的漸進
使兩組雙色調對比后，同時呈現出平穩與緊湊的畫面感，將雙色調具有的舒適感與色相對比具有的緊湊感調和至平衡，是活躍在19世紀的英國裝飾藝術大師威廉·莫里斯鐘愛的配色形式。
A圖由綠色的明、中、暗三階段構成的配色。由于是同一色相，所以畫面踏實，不過似乎太過單調而顯無趣。鑒于出現3個階段的顏色，應成為三色調，不過與雙色調效果大致相同。而B圖中加入對比色紅色系的雙色調。對比色效果強調了整體，雙色調的平穩感與色相對比的緊湊感共存。
組合身為對比色的雙色調，產生緊湊感，給人以自然的印象。
使用幾乎令人察覺不到的微笑色彩差別配色，會傳達出高雅寂靜的感覺。一般情況下，微差因其曖昧模糊感并不討好，不過一旦被有意圖地巧妙使用，會有意想不到的效果。想運用好微差，周邊色尤為關鍵。若不小心搭配進強色，則會瞬間破壞來之不易的靜感，稱為庸俗失敗的模糊配色。
A圖鮮艷的黃色破壞了整體的寧靜氣氛；而B圖去掉了鮮艷的色彩，包的色調具有微差的特點，微差配色表現靜謐。
微差配色可以營造出幽靜氣氛
在稍稍偏離的位置上放置統一色彩，會達到共鳴融合的效果。這就是重復法。一致的色彩不僅互相呼應，整個畫面也融為一體。
A圖頂部與下面的顏色沒有呼應，使得上下分離，破壞了畫面的整體效果；而B圖下面汽車的青藍色與頂部天空的青藍色呼應，形成一致的色相，上下便產生一體感，使得整體緊湊嚴密。
在偏離的位置上放置與主要色彩同色系的顏色，使得整體融合，產生統一感
白色的色彩度為零，可以說是完全中立的顏色，但是由于搭配方法不同，可以產生十分鮮艷的效果。白色可以令平淡的配色鮮明，也可以令濃艷的配色柔和。
A畫面全部是過于強烈的顏色，濃艷而令人膩煩；而B畫面換成白色背景去除了濃艷的感覺，畫面表現得柔和起來了。
如果強烈的帶有刺激性的色彩讓人感覺很浮躁的話，可以嘗試在中間插入白色間隔，這樣不僅減弱了壓迫感，也使這種顏色的特征更加鮮明生動
如果商品與畫面不一致的話，即使有了漂亮的配色也沒有任何價值。已完成配色的畫面能否與目光鎖定的方向一致是成功與否的關鍵。想要隨意表現一個快樂的畫面，如果用上等的格調和高雅的配色，就會令畫面混亂，無法傳達正確的意思。
決定畫面的三要素是色調、色相和對比強度。其中最重要的就是色調。色調換言之是“格調”，是和“心情、品位、興趣”具有相同語感的詞匯。選擇哪種色調進行畫面的配色，決定性因素就是心情。
即使是相同的材料、相同風格的形狀，當色彩的色調發生變化時，畫面也會完全不同。色調在營造畫面氛圍的要素之中起決定性作用，如果錯誤地選擇了色調，無論在色相和明度上下多少工夫都無法修正畫面。
選擇的色調就決定了配色的畫面。如設計嬰兒產品，就不適合用鮮艷或嚴肅的色調。
色相大致可以分為暖色和冷色。由紅色至橙色、黃色被稱為暖色，正如字面上的意義一樣，這些顏色給人溫暖的感覺。相反，由藍色至青紫色被稱為冷色，表現出清涼、冷靜的感覺。一方面，各自的顏色都與各自特有的氛圍相聯系。綠色、褐色是用來表現大自然的色彩，字色無論濃淡都散發著女性的氣息。
色相大致可以分為冷色與暖色，一級位于其中間的色相共4部分。以暖色為主體進行配色給人以溫暖健康的印象，以冷色為中心則給人寒冷的印象。
組合色彩之間的色相之差、明度之差和純度之差稱為對比強度。增加對比強度可以增添活力，減少對比強度則顯得沉穩。想要創造富予活力、精神飽滿的畫面就要增加對比強度，想要表現靜謐高雅的畫面，就要限制對比強度。
A圖中的運動鞋色相對比較小，給人穩重的印象；反觀B圖的配色色相對比強烈，表現年輕人的朝氣蓬勃。
即使使用相同顏色的搭配，當面積比例改變時印象也會隨之改變。增大面積比（大小差）可以產生輕快的動感，相反，減小面積就會帶給人輕松愉快的印象。
A圖中的橙色地面在畫面中占據了相當大的面積，給人以輕松舒適的印象。較少地面橙色的面積，畫面變得銳利鮮明起來。
如果想要傳達的內容與畫面的配色產生分歧，那么無論怎樣美麗的配色都不會有任何效果。觀看者的印象與配色所表達的畫面無法產生共鳴，那么無論怎樣美麗的配色都沒有任何意義了。
令人感覺到男性特征的色彩，必須具有強大的力量。表現強大力量的純色，接近純色的暗色都是符合男性形象的色彩。
和藹、親切、溫柔的色調與保守色調的對比是關鍵因素。以紅色為中心的暖色十分有效。另外，紫色是可以表現女性溫柔的特殊色相。
如果只用藍色為主的冷色進行配色，就可以營造出冰天雪地的寒冷感覺。增大明度差能夠進一步強調寒冷的感覺。
以冷色為主的大部分色相，減小其對比強度即可減弱寒冷的程度，使畫面表現出涼爽的感覺。由于亮度是主要因素所以要避免使用強色調。
橙色、紅色、茶色等以暖色為中心的色相用來表現溫暖。減小對比強度就可以營造出溫暖的感覺。使用任何色調均可。
加入對比色相更能夠強調暖色。純色色調是基本要素，素雅的色調與明亮的色調都無法表現出炎熱的感覺。
朝氣、活力、休閑
略顯素雅的明亮色調帶給人平靜和安詳的感覺。表現出橙色生活的優雅氛圍。
將暗色色調放置在純色的旁邊，表現出豪華氣質。即使是同樣的暗色，由于被放置在離純色較遠的位置上而失去了鮮艷色澤，豪華的氛圍也一下子消失不見了。
樹木的綠色、大地的褐色使人直接聯想到大自然，心情也變得安定祥和。
充滿力量的畫面不可缺少重量感，但并不一定適合于表現速度感。速度感是以鮮艷的純色色調為基調，而力量感則與鮮艷的厚重色調相吻合。
同色系色彩帶來幻想世界的縹緲感。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
“價值”在百度百科的解釋是————“價值屬于關系范疇，從認識論上來說，是指客體能夠滿足主體需要的效益關系，是表示客體的屬性和功能與主體需要間的一種效用、效益或效應關系的哲學范疇?！?br style="outline:0px;margin:0px;padding:0px;" />
因為一些外部原因，讓我最近一段時間都在思考一個問題，作為一名設計師，我的價值是什么？？？我的設計能力。那我設計能力的價值是什么？？？完成產品視覺的呈現，幫助項目上線和產品落地？
當這個回答擺到我面前的時候，我竟然有了一絲的不安。
因為在我看來視覺呈現這只是能力，并不是真正的價值。如果作為設計師只是這樣的能力，你會發現在團隊的位置是很容易就會被頂替的。
那作為設計師的我，那如何才能讓自己不容易被頂替，體現自身價值到底是什么就成了重中之重的事情。
那體現自身價值之前，我需要去知道設計價值是什么。設計價值說到底就是解決問題，從而帶來了想要的效益。
一、設計師解決了什么問題
1、發現問題
2、定義問題
3、分析問題
二、設計師如何解決的問題
1、明確設計目標
2、制定設計策略
三、設計師如何驗證問題是否解決
1、收集用戶反饋
2、跟蹤數據指標
四、舉個例子
五、總結一下
發現問題、定義問題、分析問題
一開始工作的時候很長一段時間都是被動接需求、找參考、輸出設計稿，這樣一個流程下來，解決的問題無非就是如何用設計呈現需求的過程，設計師的價值發揮就會非常有限。所以如果想發掘更多設計價值，就需要轉被動為主動，將設計前置，從業務出發去發現問題（通過分析項目背景/目標、用戶調研、行業/競品分析等）、定義問題（問題出現的原因是什么？用戶的原因？還是產品本身的原因）并且分析問題（細化出現問題的原因，給出解決問題的方案）
明確設計目標、制定設計策略
雖然如何解決問題每個人的側重點都不一樣的，但是設計目標作為體驗提升的開始，正確的設計目標決定了提升的方向，而設計目標可以由產品目標（提升某個具體的指標、提高用戶的操作效率）和用戶目標（用戶的想要得到什么、用戶使用產品的痛點是什么）的推導出來。目標有了就要落地去實現，作為設計師，設計策略是落地的重要一步：統一規范、縮短操作路徑、提升用戶滿意度等等
收集用戶反饋、跟蹤數據指標
我們總是在主觀的評價這個設計好不好看、好不好用，導致設計的價值很難去真正的衡量。其實衡量價值最基本的方法無非就是你這樣做帶來了什么，結果導向是衡量設計最為標準的，也是流程閉環的最后一步，如果沒有結果，流程無法閉環，那設計價值也無法衡量。而產品上線后得到結果又是什么？無非就是用戶反饋是否滿意和數據指標是否達標。
項目背景是在公司業務快速增長和用戶對于服務品質的訴求提升，加上客服團隊一直處于被動依靠人力處理用戶問題的服務模式的情況下，排除大幅度疊加人員的方案，希望通過數據驅動+服務產品智能化的方式來對客服體系的升級。從而提高客服人員的工作效率，減少公司的招聘成本的同時提升用戶的體驗，最終實現公司業務的快速增長。
通過項目背景不難發現其中問題所在：在不增加人員的情況下，當前客服團隊的服務模式，已經滿足不了現有的業務增長趨勢和客戶的品質訴求。
那我們需要做的就是解決服務模式的問題。
服務模式有什么問題呢？一直處于被動依靠人力處理用戶問題。
為什么一直處于被動依靠人力處理用戶問題呢？
· 用戶一遇到問題就去找客服，用戶做不到遇到問題可以通過自我查詢或者其他不依賴客服的方式來解決。
· 客服人員能力有限，每天的用戶承接量大，重復性問題多，問題處理流程繁瑣，導致單個問題處理時間較長。
排除人力堆加的方法以外，如何才能解決服務模式的問題呢？
方法就是
增強用戶自主解決能力：自主渠道的升級，實現渠道擴增和業務分流，通過內容分層，簡化用戶查找問題的流程，培養用戶自主解決能力的心智模型；引入智能機器人能力，實現簡單性、高頻率問題由機器人代理解決。
提升客服解決問題能力：調整問題的優先級排序，優先解決重要客戶的問題，減少重要客戶的投訴和流失；尋找問題處理流程的機會點，減少客服單個處理時長；分析不同程度客服同時處理問題量的數據，限制客服最大承接量。
既然問題已經確定了，那就要去解決問題。根據對問題的分析結果，該如何轉換為設計呢？
結合產品目標（自助渠道升級、產品智能化/數據化）+用戶目標=設計目標的推導公式
產品目標是產品經理/需求方給到你的，但是用戶目標則是設計師自己調研分析得來的
----用戶想做什么？
用戶想快速解決遇到的問題
----客服想做什么？
客服想輕松快速的幫助用戶解決遇到的問題，完成工作中的KPI指標
----用戶的痛點？
用戶在自助渠道找不到答案，于是遇到問題就找客服去解決問題，智能機器人的回答也解決不了問題，所以需要找人工客服，但是需要等待很長的時間
----客服的痛點？
每天高負壓的的工作環境，枯燥重復的工作流程，敏感繁多的考核指標。
那在確定好設計目標之后，就需要通過制定設計策略，以達到設計目標。
注意：我們在做設計之前，必須要確定設計目標。因為目標是方向，不然做到最后發現自己做的設計沒有解決產品目標和用戶目標，那就是白白的浪費時間，也說明自己做的設計是又問題的。
項目上線后，我們需要去收集用戶反饋，關注我們設定好的指標去衡量、驗證構建的設計方案是否解決用了用戶問題以及是否達成了產品目標，因為這樣設計工作才能實現一個閉環。
可通過在產品上線初期以及上線一段時間后進行調查問卷的發放，通過調查問卷得到用戶在使用新的產品的感受，直觀感受產品迭代后的反響，同時也可以為下次的迭代提供方向和依據
從產品目標我們可以看出，我們的數據指標就是提高用戶對自主渠道的使用率，那我們只需要在自主渠道的頁面增加一定的數據埋點：頁面點擊率、頁面瀏覽時長等等
寫了這么多，才發現自己現在欠缺的，還有環境欠缺的。所以冷靜的理一理自己的工作的流程，多關注業界的動態。主動的將設計前置，提升自己的價值，提高自己在團隊/項目中的話語權。不然如果只是簡簡單單的設計呈現，自己永遠處于被動挨打的狀態，沒有話語權，沒有價值體現，隨時都有可能被替代。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
一類支持有C端前臺，支持前臺產品管理各種資源。第二類服務企業，提高企業工作效率和營收。
1.監控運營：時效性強，旨在實時反饋異常情況，快速判斷下達命令，回復信息、多用于數據控制中心。
2.數據分析：數據結果的對比和分析趨勢，時效性要求并不高，了解整體和各部分數據水平，助力決策。
3.記錄管理類：主要用于人員、設備、資產等增刪改查，文本信息容量大，頻繁便捷的操作。
4.系統配置：權限配置、設備功能配置，操作為主。
淺色：
適合文本信息多密集的表單列表類后臺，淺色更符合人眼白底黑字的閱讀習慣，瀏覽速度更快，信息獲取效率更高。
深色：
圖像信息密集的后臺適合圖片、數據可視化圖表等；深色對彩色的圖像信息襯托更強。信息獲取速度較慢，長時間可能視疲勞。
較常見
優點：市面最常見的風格，普世性高，大多數用戶可快速接受，層次分明
缺點：視覺缺乏記憶點
優點：視覺清新明快更年輕化更輕量，對其他文本及圖形展示包容性高，就像A4白紙一樣容器存在感弱
缺點：純白色導航+頁面層次略曖昧。
適合：適合科技屬性強的產品界面，圖像圖形展示
缺點：對其他色彩信息有干擾，持續性長時間觀看易視覺疲勞
優點：對色彩表現力強
缺點：密集文本信息獲取速度會下降，持續性長時間觀看易視覺疲勞
比如美妝和科技行業的整體設計基調就不太相同。
理性可靠 or 簡潔輕松輕量 or 關懷普世 or 酷炫吸睛….這個可以和相關產品經理、銷售共同商討
根據目標用戶的性別、年齡層、受教育水平，審美水平考量（可能包含多種角色，選取1.2個核心角色為參考）帶入目標用戶工作場景及愛用物常用物品味，去判斷基調。
如主要用戶群：40+男性用戶，本科以上受教育水平，使用windows電腦進行專業管理操作，審美傾向明確內斂。
如主要用戶群：20-40歲，男女比例約6：4；大專；操作水平參差
例如：最常使用數據分析管理，需要快速閱覽多條數據，對數據進行比對，更適合淺色風格展示表單數據。
獨立開發的，可以采取更獨特設計。若平臺很大需要不同外包公司的合作屬于整合類平臺則更注重設計的包容性。
“731配色比例”70%的面板色，30%的導航面板色，10%的強調色。（這里的用色比例可以根據內容具體再去調節只是大概比例）品牌色或重點色：強調行動關鍵點、重要信息高亮、圖形化說明等。強調色用就要用的像蛋糕上的櫻桃。起到畫龍點睛作用即可。
后臺高頻出現的圖標，值得我們花時間去統一設計打磨，調整圓角粗細疏密，符合整體界面氣質。從圖標庫里拖出的圖標很多在線條粗細上是不統一的，好的設計在細節處也要動人。
B端工具類圖標識別性第一，美觀性第二。B端導航圖標更多是在基礎造型上打磨，不需要加花里胡哨的漸變、投影，導航圖標一般在24px-16px大小，太復雜反而看不清。在區分狀態的時候可以考慮加點品牌色
空狀態插畫是B端設計師少有能發揮自己繪畫天賦小巧思的地方。
圖形化狀態語言，輔助用戶理解內容?？梢詫a品機械蒼白的文案設計表現的更加具有溫度，具有引導性。讓乏味的工作出現一些共情小彩蛋，有趣的插圖動畫可以緩解等待的焦慮。
純色背景卡片式：簡單大方更聚焦登錄操作
插畫背景：場景化展示產品的功能及亮點，讓用戶更有心理預期
幾何圖形背景：最后和品牌圖形相關，加深用戶對產品的品牌印象。
照片背景：相關場景或產品類型，具象圖片信息更直觀
不同大小的圓角傳達產品不同的氣質，大圓角親和、小圓角精致、中等圓角大眾中庸。
優化信息層級，區分信息主次可以使閱讀更快，操作更快，界面更有節奏感。
這時候你就是那個考前畫重點的老師
判斷一個頁面里最重要的是那些信息或操作，強化它！并弱化輔助信息；
判斷一個模塊里那些是重要信息，強化它！
1.追求炫酷的視覺效果舍棄操作效率。比如追波風滿屏花里胡哨的卡片及面板，滿屏大投影及高飽和色彩。對于B端界面來說信息噪音太多，反而干擾信息獲取效率。
2.反常規用戶習慣的操作。尊重用戶習慣，不要為了個性化去嘗試改變，不要妄圖改變用戶的操作和認知的慣性。慣性思維大于設計思維，曾經遇到過產品因為右手操作所以要把導航放在右邊的離譜例子。
3.數量多，動靜大的夸張的動效。B端與C端不同的地方在于希望操作者沉浸式工作，遵循非必要不打擾。之前看過一個反面例子后臺，在每一步操作后都出現大的場景動效鼓勵完成，如果作為一個長期使用的工作者，我會覺得每次完成任務都需要等待動畫完成可能只需要2-3s也很浪費我的時間。
4.新人建議多看Antdesign和Element等成熟的組件，創新類組件樣式，最好和和開發商量是否能夠實現。
5.在確定主要風格及2-5張主要頁面后，就應該著手基礎規范（色彩字體等，不然后面越做越亂）。
6.一段時間一個審美，同一界面中的元素風格不統一。
7.避免大面積使用高飽和高明度的色彩，及曖昧含糊的臨近色彩。長時間使用眼睛會累，產生不耐煩焦躁的負面情緒。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
本文將從理論到實踐，從軟件到插件，再到不同應用場景拆解和團隊協同的重構，一步步教你如何搭建產品KIT組件庫。也給大家帶來逆天的Anima插件教程，組件化設計的必備插件，目前國內還比較少有文章講到。手把手！嘴對嘴！堪稱全網最細保姆級教程！
一個成熟的設計團隊，都會為產品制定設計規范，搭建產品KIT組件庫，組件化思維也是設計師的必備思維之一。組件庫會讓團隊協作變得高效且一致，讓團隊成員專注于深耕體驗和細節，實現設計向產品賦能。極大的節省設計和開發成本，優化用戶在界面流轉間的感知差異體驗。
KIT組件庫本質上是一個集合的Sketch文件，由原子、分子、組織、模板、頁面組成。原子理論支撐可復用、可修改、易于協同和維護。
由Google推出的當時媲美蘋果全新設計語言的Material Design，Material Design也是最為經典組件庫設計?，F如今阿里的Ant Design和Element給我們提供了一套完整可復用的組件庫。
原子設計是將界面設計中最小元素——原子，組合嵌套為分子、組織、模板、頁面的系統規范化設計過程。
原子Atoms，我們知道是指化學反應不可再分的基本微粒。原子在化學反應中不可分割，但在物理狀態中可以分割的。原子由原子核和繞核運動的電子組成，所以原子是構成物質的最小粒子這就不對了。
但在界面設計中我們所說的原子是構成界面的最小顆粒度元素，在設計中無法再被拆分或者拆分下去已無意義的最小單位。比如不同顏色樣式、文字樣式、輸入框、icon圖標、分割線等。
由原子按照一定的規律和目的組成的部分為分子，在界面設計中比如Button按鈕、swittch開關、非模態彈窗Toast等，可以理解為比較簡單的小組件。
將不同的分子與原子組合就組成了組織。比如頭像與信息組成的聯系人容器卡片、Table列表、Nav-bar、Tab-bar等等。
將組織與分子、原子進行特定的組合就形成了模板。這一步已經能展示界面的主要功能和交互了。一般這一步得到的結果就是我們日常工作中的原型圖，產品的大致形態也慢慢清晰。所以模板可以理解成未上色的界面。
最終輸出的高保真設計圖即為我們說的表現層的頁面Pages。將模板填充信息和圖片內容，就得到了高保真設計界面。
以最近做的一個NFT項目為例子，展示具體搭建細節的全過程。
命名按照：一級分類 / 二級分類 / 三級分類 。例如：一級標題樣式/蘋方/常規/灰階0
其中 “/” 為層級結構分隔符，Sketch會自動識別。組件庫的搭建需要按照層級規范命名，從最外層到最內層，就像一個抽屜，每一層都對應放著東西。規范的命名會使后期調用維護、團隊協同變得清晰高效。
我們設計一般都需要定義顏色樣式，一般有主色調（Main tone）、輔助色（Minor）、漸變色（Gradient）、字體的灰階度（Gray scale）等。選中你需要創建樣式的顏色，點擊「外觀 - 創建」，在輸入框內輸入層級規范命名。
定義文字樣式，文字具有字體、大小、字重、灰階等屬性，選中文字，點擊【外觀-新建】，在輸入框內輸入層級規范命名。
當我們需要切換一個定義好的文字樣式時，比如從“閱讀文本樣式”更換為“一級標題樣式”，只需要選中文字 - 點擊「當前文檔」下定義的文字樣式 - 點擊需要更改的文字樣式即可。
當我們需要對定義好的文字樣式進行修改時，比如在設計的過程中突然感覺"閱讀文本樣式"字體小了點，為了優化閱讀體驗需要增大字號。
1. 單個修改 - 解綁
將文字調整更改為你需要的大小或字重，此時只對單個文本修改，不對其他文本產生影響，點擊解綁，便可與定義好的樣式分離。
2. 整體同步 - 更新
將文字調整更改為你需要的大小或字重，樣式名稱后會出現 "*" 星號，此時代表未保存，且更新按鈕激活，點擊更新按鈕則所有使用該樣式的字段都會更改，整體同步更新。
組件是將元素定義為標準化可復用的集合體，對組件進行規范的命名，形成高效設計的KIT組件庫。
選中我們需要定義的文本字段，注意！根據實際應用場景選擇合適的文本對齊方式，否則修改字段信息是會出錯。這里文本選擇左對齊，點擊 「創建控件」- 按照層級規范命名，選擇從左往右布局 - 點擊 「覆蓋層」即可對文本字段內容進行修改。
1. 單個標簽
當設計完標簽后，對標簽創建組件。依次選中便簽中的文字“LIMIT”、“2000份”，依次將文本選擇左對齊，步驟同上。將整個標簽打組，點擊 「創建控件」- 按照層級規范命名，選擇從左往右布局（這里注意！從左往右布局表示標簽在更改字段信息后，便簽左邊固定不動，從左往右自適應） - 在覆蓋層修改文本字段信息，庫存標簽組件自適應。
2. 標簽修改
如果我們覺得這個庫存標簽設計的不滿意，或者還需新增倒計時標簽、已售標簽，那怎樣又該怎么做的？
第一步：這時我們新建一個Sketch文件，命名為「 *** KIT 組件庫」。選中標簽圖標復制，將圖標粘貼到新建文件內，注意！此時需要給圖標添加合適的畫板，并按規范命名。
第二步：將Sketch文件保存到桌面，拖動到「首選項-組件庫」內。
第三步：選中組件，回車可進入控件（組件）頁面，可直接調用定義好的控件，進行修改。
Tips：這里畫板的作用是
（1）畫板是用來規范固定組件位置和大小的，成套系的KIT Library需要建立畫板。
（2）畫板組件在創建后，調用時只固定大小和邊界。
（2）如果只是做較少的界面，較少的復用的樣式，就可以不用做畫板。
3. 多個標簽
當頁面需要不止一個標簽時，就需要新增標簽，通常為左右或上下布局。若直接增加一個標簽修改字段，文本標簽不會自適應。 和之前操作一致，將新建的標簽新建組件后，可實現標簽文本自適應。
4. Sketch素材調用
繼續添加商品作者組件、價格組件。點擊右邊覆蓋層可修改文本字段。點擊文字右邊小icon可調用Sketch自帶的數據。
將前面定義好的所有組件整合到容器中，形成可直接復用的商品信息容器組件。
第一步：調用定義好的閱讀文本樣式，注意！直接拖過來即可，文本框的長度左右拉到合適的左右間距，這里不需要動文本框的高度，否則會出錯。將底部容器（卡片）的收起到合適的高度
第二步：選中整體打組，創建組件。注意! 此時選擇從上向下布局。
第三步：選中整體，在右側覆蓋層可對文本進行編輯，輸入文本字段，此時容器高度實現自適應。
頁面可一步步拆解為模板、組織、分子到原子。原子和分子可組合嵌套重構為組織、模板和頁面。
如果上下同時有卡片的情況該怎么呢? 當然，我們完全可以將它們一起定義組件，但有沒有其他更便捷，更靈活的方法呢？這里跟大家介紹Anima插件的使用，會使得大家在搭建組件庫時變得更加靈活高效。
Anima插件為一款在線自動響應式的插件，其中的STACK與PADDING功能簡直是Sketch設計必備，簡直逆天。
1. PADDING功能
新建一個文本，當點擊PADDING后，會自動生成一個底板，選中底板可對其進行編輯，更改顏色、原角度等。在PADDING輸入框內可輸入距離上下左右的邊距。此時注意文本的對其方式，左對齊一般適合標簽使用較多，而居中對齊適合一般的居中按鈕，如立即支付、立即報名等。
2. STACK功能
將三個標簽分別打組，再全選整體打一個組，點擊STACK，選擇左右排版和居中對齊，輸入你需要的間距。此時Anima插件最牛的STACK功能就是可以雙擊選中任一個標簽，拖拽可改變排列順序，松手后還可以自適應。
1. 團隊不同成員或新來設計師之間協同配合，保證輸出的一致性和穩定性。
2. 統一的組件庫樣式，會減輕用戶在頁面流轉間的疑惑感和理解成本，使用戶體驗得到了提高。
1. 減少相同模塊的重復設計。一個產品功能流轉、頁面交互必定會涉及到大量的重復設計的樣式與組件。試想一下，如果每一個都重新設計將是一個巨大的時間成本浪費。
2. 如果從產品的全生命周期來看，搭建好設計中臺KIT組件庫，并與開發進行溝通，能減少前端開發樣式，將時間更多的放在功能交互體驗和項目推動上，極大提高了效率。
1. 建立完善的設計規范和KIT組件庫，提高組件庫優化迭代效率。組件庫團隊協同自動更新。
2. KIT組件庫一鍵修改，也可通過組件分離功能（解綁）單獨對樣式進行修改，工作中需要對設計反復調整打磨，可進行批量一鍵更改，單個模塊的單獨修改。
什么時候時候搭建組件庫？先定義規范都是扯淡！所謂實踐才是檢驗真理的唯一標準，“在設計開始之前就制定設計規范，是不切實際的做法，你會發現做好的規范在實際操作中是無用且白費精力的”摘自《破繭成蝶 用戶體驗設計師的成長之路》。所以組件庫中的組件必定是經過反復修改后適合產品以及可后期可復用的。
并不是所有的設計都需要做設計規范或者KIT組件庫。組件庫的搭建本身就是一個耗費時間人力的事情，如果是一次性項目那根本就沒有必要做組件庫了。是否需要創建樣式或組件取決于該樣式或組件在后續的工作中是否會被復用或復用的頻次。也會減少前端工程師重復開發CSS樣式以及后臺數據的封裝成本。
將組件都定義在新建的Sketch文件中，將文件發給你的團隊其他成員。步驟同上。
第一步：新建一個Sketch文件，命名為「 *** KIT組件庫」，將組件都創建在新建文件內。
第二步：將Sketch文件發送給團隊其他成員，拖動到Sketch「首選項-組件庫」內。
第三步：直接調用定義好的組件。
共享組件庫個人使用 Sketch Cloud，但組件庫有更新Sketch右上角會有提示，及時溝通更新即可。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果將【UI設計】比喻成一位新型時髦的青年，那么【公共藝術】則是一位已在歷史長河中摸爬滾打數十載的老者，一位偉人曾說過：人類的發展從歷史中獲得啟迪，故筆者旨在從探討公共藝術在地性觀念的角度，來淺談如何在UI設計中凸顯情感關懷。
“藝術是什么”
當代藝術作品（圖片來源：網絡）
學者王瑞蕓認為當代藝術邊界模糊且藝術家創作手段任意， 不僅沒有一個能夠稱得上固定的風格，也不存在相應的美術主張，因此無法用語言對其進行概述。 而二十世紀實驗藝術的先鋒馬塞爾·杜尚 (Marcel Duchamp) 曾用種種藝術實踐行為向公眾宣告：經由藝術家之手創造的就是藝術。
“什么是公共藝術”
公共藝術作品（圖片來源：網絡）
學者金江波在其專著《地方重塑—公共藝術的挑戰與機遇》中指出：公共藝術體現的藝術主張依托于關注人文的公共理想。 復旦大學的湯筠冰教授曾在其公開課《城市公共藝術》中講述到，公共藝術與純藝術的不同之處體現在，公共藝術中包含了一種地域文化。
相較于說不清、道不明的“藝術”，公共藝術有別于純藝術“為我性”的情感抒發，更加強調藝術作品與空間、人之間有意識產生的情感聯系，用語言來概況其特性可以總結為：公共性、藝術性、在地性。
“什么是公共藝術在地性”
公共藝術作品《爬墻的熊貓》（圖片來源：網絡）
相較于“公共性”與“藝術性”的“基本性質”，筆者認為受“他人”影響而產生的“在地性”更能明顯地體現公共藝術中的文化關懷，什么是公共藝術在地性觀念，用一句話來概括：公共藝術與空間的關聯性。
縱觀藝術史，公共藝術的在地性范式可以總結為以下三類：
(一） 與空間的融合關聯性
古希臘帕特農神廟（圖片來源：網絡）
最常見的一種在地性范式，起源于人民的基本需求已得到滿足，開始追求更高層次的精神追求——對美的追求。例如古希臘帕特農神廟的建造依托于古希臘人民對細節美與民主性的崇尚與追求，以及中世紀的“城市美化運動”，“依附于建筑的藝術”，均是以在依托于周圍環境、融入當前環境的方式來體現公共藝術的藝術性價值。
(二） 與空間的沖突關聯性
藝術家佩爾施克策劃的公共藝術活動《紅球計劃》 （圖片來源：網絡）
主要集中在后現代主義時期，后現代主義藝術批判以往藝術的精英化，追求藝術“生活化”。這一時期許多藝術家將與需求空間格格不入的通俗化形象放大植入公共空間中，產生與當下空間沖突的視覺感官體驗，以“介入”空間的“逆向之美”的方式來體現出了公共藝術的藝術評判性價值。
藝術家奧登伯格創作的《世俗豐碑系列》（圖片來源：網絡）
(三） 與空間的無關聯性
《瑞秋豬》與《乳牛大游行》（圖片來源：網絡）
出現在后現代主義時期，此時藝術家致力于使藝術擺脫架上束縛，追求藝術的開放性，諸如《柏林熊》、《乳牛大游行》以及《瑞秋豬》等社區參與類公共藝術作品，以藝術家主導的活動形式讓大眾參與到藝術創作過程中，打破以往以藝術家為中心開展的藝術創作行為，去中心化，此類公共藝術擺脫空間的束縛，其在地性含義由參與者構成，其開放性藝術價值仿佛實現了大同之美。
例子1
上圖中左邊是由英國藝術家安尼什.卡普爾（Anish Kapoor）創作的公共藝術作品《云門》，將芝加哥市民引以為傲的摩天大樓與天際線的形象利用鏡像反射的原理映射在光滑的雕塑表面，凸顯城市文化與自信。右邊為新疆克拉瑪依油田新地標，似乎與芝加哥的《云門》沒有太大的區別，拋開是否購買版權這一點涉及到法律層面的考量，從藝術價值層面來考量這件“作品”，周遭土黃色的大樓并非是需要凸顯的城市文化與特質，強硬的植入只會削弱了作品的藝術價值。
例子2
再舉一個例子，以美的美居APP的缺省頁為例，在最新的版本中，美的美居設計團隊將缺省頁的視覺元素替換成了自身IP形象“小藍”，運用與產品相關聯的視覺元素，不僅在美化的基礎上增強了頁面與產品的關聯性，更是彰顯了品牌自信。
以上兩個例子也是為了說明，在UI設計中視覺元素的運用需站在“有理有據”的立場上，貫徹“取之有道 用之有理”的思想。以公共藝術中“與空間的沖突關聯性”藝術語言為例，來探討下此藝術語言在UI設計中的運用。而選擇沖突性藝術語言來探討的原因，主要在于該藝術語言包含的批判性、先鋒性與幽默性特質，能夠滿足當今人們對情感化產品的需求。
聊到公共藝術，不得不提到的一位藝術家：致力于把生活用品變成藝術品——克萊斯.奧登伯格（Claes Oldenburg），其世俗豐碑系列作品運用幽默風趣的藝術手法，提取與日常生活中通俗的現成物的形象介入公共空間，是對藝術精英化以及國際主義千篇一律設計風格的不滿與批判，以及藝術生活化精神的體現。該藝術形式可以引起大眾對其的新鮮感以及體現出一種趣味性，但當好奇與新鮮感退卻之后，對其剩余價值的質疑也是各學者對這種藝術形式爭議不斷的原因，持有質疑態度的學者認為“沖突式”公共藝術具有時效限制性，只能在時代特定階段發揮其藝術作用。
筆者認為站在城市形象塑造的角度來看：
a、"沖突式”公共藝術能夠體現一個城市的包容性與開放性，萬千藝術姿態都能被接受與容納。
b、藝術家選取的藝術形象均來源于人們的日常生活形態，其藝術元素并不因地域等物質外在條件的不同，而對不同城市地區的人們產生不同意義，其體現的是一種全球共通性文化，其藝術性是針對城市公共空間而言。
綜上所述，筆者認為在沖突式在地性語言中，運用的藝術元素具有以下幾點特征：
通俗性：大眾對其有相似的認知與理解
原生性：夸張、未修飾的規模與形態來展示
戲謔性：不按常理出牌，以“格格不入”的形式存在
例子1
針對上述三種特征，在一些APP的UI設計中，也可以找到相應的案例。例如B站番劇《總之就是非?？蓯邸返倪M度條的圖標設計案例之一，該案例的運用起因在于該番劇的劇情甜份過高，網友們紛紛用彈幕類似于表達“我酸了”的通俗網絡語言來刷屏，引起了B站的關注，于是就有了檸檬代替進度條的操作。
例子2
而Instagram推出的視頻產品「IGTV」，其加載頁借用了8090年代人們對老式電視信息收視不良的記憶——雪花屏元素，該元素與當前高科技信息技術時代的沖突性不僅營造出了炫酷的視覺效果，同時也使得產品飽含了懷舊的情感關懷，代表了一個時代的通俗回憶，得以與用戶產生共情。
例子3
嗶哩嗶哩閱讀的停更通知用更加通俗易懂的【請假】來代替，以及克拉克拉APP用【拔掉電線】的口語化用語來描述退出直播間的行為，不僅拉近了產品與生活的距離，也凸顯了幽默的情感化設計。
雖然藝術與設計的邊界日益模糊，但是二者之間仍然具有本質上的區別，那么我們在探討藝術語言在設計中的運用時，應把用戶體驗的良好與普適性也考慮其中，將藝術語言進行設計化的處理，結合上述藝術案例與設計案例來看，沖突式在地性藝術語言在UI設計中的運用時，其運用元素的特性可以歸納為：
基礎條件-通俗性：能夠引起大眾的共識與話題，大多數的靈感來源于生活；
必要條件-適應性：將原元素的特性進行特質提煉與設計化，與公共藝術不同，在UI設計中是將原元素的特征運用在設計中，同時注重例如提煉的雪花屏幕的閃爍特質，而不是直接將整個雪花屏幕運用在界面上；
增味條件-創新性：跨領域找參考元素。（舉個例子，從B領域提取一個元素運用在A領域上，但B領域和A領域的在大家通俗認知中的兼容性并不強，其創新性是由疏離性凸顯）
簡而言之：
1、保證元素的通俗性，結合當代語境，亦可以理解為#話題性#；
2、可跨領域找參考元素；
3、需要對元素的特質進行加工提??；
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn