什么是B端產品經理？和C端產品經理有什么區別？
B端設計規范如何正確搭建，好的設計規范對設計有什么幫助呢？設計夾老師在這篇文章中圍繞清晰、高效、友好、可控四個關鍵設計原則，帶你一步步建立起設計規范，推薦各位設計er和對交互產品、B端產品設計感興趣的童鞋閱讀。
Halo，這里是設計夾，今天為大家分享的是「B端設計」。B端設計離不開設計規范這個話題，而做好設計規范是一個龐大復雜工程，很多人對這些處于一知半解狀態。在這個系列文章里通過結合平時的項目案例來談談自己對B端設計規范的一些理解，希望可以帶來一些啟發。
本篇先談談設計規范制作的指導思想–設計原則，后續文章再展開講一下常見各種組件的設計規范。
設計規范作為B端設計中非常重要的一環，它的作用主要體現在以下三個方面：
在日常工作中，當項目組收到一個新的需求時，如果已經具備了成熟的設計規范體系，其工作效率往往會得到很好的提升。最后上線的頁面不用走查還原度。以下是具體工作流程：
通過前面內容我們知道了設計規范對于產品設計意義重大，那么制定設計規范制定依據又是什么呢？這里就要引出設計原則這個話題，設計原則是設計規范的總綱領，所有的設計規范都應當以設計原則為基準。設計原則主要包含以下內容：
接下來就圍繞設計原則清晰、高效、友好、可控這四個方面展開講解。
清晰原則主要從視覺角度讓界面信息傳達合理，提高用戶信息獲取效率。主要包含對比，親密，對齊，重復四個方面。
1.對比
對比是指界面中為了區分信息層級，強化元素對比度，使用的很常見的一種手段。例如，下圖中利用大色塊按鈕與線框按鈕形成對比來凸顯關鍵按鈕；通過對文字字號加大，字體加粗，顏色加深來與弱文案形成對比，凸顯關鍵文字信息。
2.親密
如果信息之間關聯性越高，它們之間的距離就應該越接近，也越像一個視覺單元；反之，距離就應該越遠，也越像多個視覺單元。親密性的根本目的是實現組織性，讓用戶對頁面結構和信息層次一目了然。
3.對齊
在界面設計中，將元素進行對齊，既符合了用戶的認知特點(我們往往傾向使知覺對象的直線延續還是直線，曲線延續還是曲線)，也能引導用戶視覺流，讓用戶更流暢地接收信息。
4.重復
重復是指相同的元素在項目中重復引用，作用是可以有效降低用戶的學習成本，同時提高這些元素之間的關聯性。
高效原則體現在便捷、輕量、簡化、一致幾個方面，目的是通過合理的方式讓產品操作更加便捷；交互體驗與內容更加輕量和簡化；以及產品風格保持一致。下面結合常見案例說明如何應用這一原則。
1.合理利用拖拽–便捷、輕量
在涉及到諸如上傳文件，排序，滑動輸入，搭建等需求時，合理采用拖拽交互往往可以打造更加便捷用戶體驗。
2.盡量減少不必要的跳轉–便捷、輕量
用戶操作過程盡量減少跳轉，以實現交互減步長，從而使用戶操作更高效輕量。例如能用原位操作就不考慮展開收起；能用展開收起就不用氣泡…依次類推(優先級從高到低：原位＞展開收起＞氣泡＞彈窗＞抽屜＞新頁面)
3.放大點擊熱區–便捷
放大可點擊按鈕熱區，相對于較小點擊熱區，具備更絲滑操作體驗。
4.懸停即現–輕量
利用懸停即現，避免信息過于重復啰嗦，簡化頁面提高閱讀體驗。
5.折疊次要功能–簡化
頁面功能按鈕過多時，可將次要按鈕收納到一起，點擊時再展開，外面只展示高頻操作或重要按鈕，保證頁面內容簡潔。
6.統一樣式–一致
一致性是指在不同頁面中相同操作應保持一致視覺與交互樣式，可有降低用戶學習成本與企業開發成本。
友好原則應貫穿用戶操作前，操作中及操作后三個階段，給予用戶及時反饋與幫助。
1.操作前
在用戶操作前給到合適的引導與幫助，有效減少用戶迷茫感。
2.操作中
通過交互效果及頁面樣式讓用戶可以清晰感知到自己當前操作。
3.操作后
利用界面中元素變化清晰直觀展示當前的狀態。
可控主要體現在自由和導航兩個方面。
1.自由
自由即指用戶可以自由完成一些操作，例如回退，撤銷，終止等。
2.導航
導航是指用戶隨時知曉當前所在位置，而且可以利用導航隨意到達目標頁面。
通過本篇內容我們大概知道了制作設計規范主要方向，那么具體到每個組件上，我們該如何去設計呢？后續篇章將細分聊聊如何去設計「B端常見組件」。
專欄作家
作者：Clippp，每周精選設計文章，專注分享關于產品、交互、UI視覺上的設計思考。
本文原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自 Unsplash，基于CC0協議。
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(m.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
毫無疑問，表格之于B端產品而言是及其重要的一部分，那么，如何系統掌握B端產品中的表格設計呢？本文作者從表格設計規范與交互邏輯兩個角度提出了15點建議，干貨滿滿，希望對你有幫助。
表格作為B端產品中重要的界面組成部分，承載著內容展示、數據記錄等多重任務。每家產品的表格看起來構成差不多，但在交互細節上仍然有很多好的地方值得我們仔細思考。
本次通過整理10條B端表格設計規范+5條B端表格交互邏輯，系統掌握B端產品中的表格設計～
表格內的信息通過對齊，會更加規范易理解，給用戶視覺上的統一感，且視線流動順暢，能夠讓人快速捕捉到所要的內容。
默認展示的列數為3-8列，如果需要展示更多列數，則需要優先固定展示重要列，其余的列的內容會以滾動條滑動而展示出來。
有操作時需固定，操作項不固定時無法快速定位會降低操作效率；重要信息固定，有利于快速獲取重要的內容。
寬度的尺寸大小自適應，但需要根據文字的重要性顯示，重要文字內容優先完整顯示。（如果由于屏幕小表格會出現省略，就要考慮多一個瀏覽器自帶的title提示。）
注：當第一列是序號或多選項時，列寬不需要太寬，這樣視覺不會顯得空洞。
字符不要多，如果文字太多，就需要做文字信息精簡化。同樣，對于專業術語或用戶不常見的名詞應給予一定的幫助說明。
表格內容較多且有長文本時，長文本縮略展示；表格內容較少時有長文本，長文本換行展示。
表格中經常會出現空數據或無數據的情況，留白處理會給用戶造成一定的困惑和誤解，是系統沒有加載出來嗎？明智的做法，使用「-」填充顯示。圖片為空時使用圖片占位符。
同一項目中的操作列命名應該保持統一，例如：常規增、刪、改、查命名為新增、刪除、編輯、詳情。
操作項超過三個時，將操作低頻折疊收起，可以幫助頁面突出更加重要的信息，減輕空間壓力，減少干擾。
給數據做升降區分可以快速判斷數據的趨勢，國內數據升圖標默認為紅色，降的為綠色。
全局操作為無需選擇數據內容即可進行的操作，常見的有新增、導入、篩選。
批量操作就是對表格的多行數據同時操作，常見的有導出、刪除。
全局和批量都不屬于單個對象因此需要放在表格外，操作具體的位置排放根據操作的重要程度一次從左到右遞減。
條紋顏色：標題背景色透明度60%左右；（條紋顏色視覺上應該比標題欄弱一點）鼠標hover顏色：主題色透明度10%。
當閱讀豐富且繁多的表格時，由于屏幕有限，用戶不得不拖動橫向或縱向滾動條來閱讀信息。
固定表頭，能夠讓用戶明白當前單元格內信息的屬性而不至于不知道該信息的意思。固定表頭也是一種界面友好性的體現。
可以讓無序信息內容進行有序排列，排序分為升序和降序，一般用在數據、時間、數量上。
允許調整列的寬度來查看更加完整的縮略數據。被截斷的數據，默認支持鼠標懸停時瀏覽器自帶title顯示完整數據。
呈現大型數據集時，水平滾動是不可避免的，通過橫向滾動查看其它數據。將首列進行固定（若包含勾選操作，則一起固定），以便用戶將數據與對象進行對應。
若表格是分頁處理的，分頁會放在上部、下部或上下部均有，分頁固定省去了用戶需要翻到頂部或底部進行操作的麻煩。
作者：譚檀檀
本文由 @Clippp 授權發布于人人都是產品經理，未經作者許可，禁止轉載
題圖來自 Pixabay，基于 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(m.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
都是交互反饋和提示組件，大家可能會疑惑：文字氣泡 Tooltips 和氣泡卡片 Popover 的區別是什么，兩者之間的應用場景如何？本文對兩者的差異進行總結，希望對你有所幫助。
同樣都是交互反饋及提示組件，你可能會疑惑：文字氣泡 Tooltips 和氣泡卡片 Popover 有什么區別？分別有哪些特定的使用場景？
本文就來詳細分析下這兩個組件的區別和聯系，幫助你做好應用。
氣泡卡片（Popover）是當用戶點擊 / 鼠標移入元素時，就會彈出氣泡式的卡片浮層。當對于某個元素有更多的解釋性描述和相關操作時，這些內容可以收納到元素的氣泡卡片中，根據用戶的操作行為進行展現。
其用法特征是：
1. 用戶可以在浮層卡片上進行相關操作，也即氣泡卡片可以并需要承載更復雜的內容和交互功能。
2. 卡片中可以包括的內容有：文字說明，圖片內容，操作按鈕，相關鏈接等等。
3. 組件功能側重于：承載信息和操作。即收納并在需要的時候展示與該元素內容相關的信息和操作。這些信息的特征通常是：
文字氣泡（Tooltips）是相對簡單的文字提示氣泡框。用戶使用鼠標移入元素后顯示提示，移出后提示消失。
其用法特征是：
1. 文字氣泡通常不承載復雜的信息和操作，僅提供一段文案解釋，也即用戶在文字氣泡中不能做除閱讀外的其它操作。
2. 該組件功能側重于：解釋說明。即對局部內容或元素進行文字性的解釋說明。通常來說該氣泡是對其載體本身的解釋，比如：
有同學看過 Ant Design 組件庫提供的組件樣例，會覺得氣泡卡片 Popover 是白色背景，而文字氣泡 Tooltips 是半透明黑色背景。
其實這兩個組件的背景顏色上的差異并不是重點，因為這兩個組件都可以使用其他顏色（比如帶有透明度的品牌色）做背景底色。顏色并不具備唯一標準。AntD 就提供了多種顏色的文字氣泡樣式：
也許你已經發現，即使我們將一個組件的使用規范和應用場景解釋得再全面，在使用時也總會出現一些特殊的業務需求和應用場景無法嚴格按照規范來執行。
面對復雜多樣的業務需求，我們更應該學會：在理解業務需求的基礎上，合理調整組件的使用方式和樣式。
組件的規范對設計師來說并不應該是限制或約束，而是一種能夠幫助我們快速實現產品設計一致性，保證基礎體驗的快速方式。
專欄作家
元堯，人人都是產品經理專欄作家。
本文原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協議。
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(m.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
編輯導語：B端產品的展現形式包含了很多類型，標簽頁、彈窗、懸浮層等等。本篇文章中作者分享了如何正確的呈現B端產品，讓產品的交互體驗更加絲滑。感興趣的小伙伴們快來一起看看吧，希望對你有所幫助。
在B端產品操作中，需要高頻率地打開各類鏈接和按鈕，如果點擊后需要展示新的內容，那么展現形式就包含了很多種類型，標簽頁、新頁面、懸浮層、彈窗、抽屜等等。
在面對數量龐大的B端頁面、組件、交互場景下，應該選擇哪種展示形式就變成了一個棘手的問題。
本篇分享就將集中在解決如何選擇正確的呈現形式上，讓產品的交互體驗更順滑。
網頁是一種可視化的UI界面，也是一種內容載體，它是瀏覽器訪問網站后顯示的主要對象，也是瀏覽器展示內容中層級最高的單位。
在同一個網站中，如果我們想要訪問其它網頁，就需要點擊按鈕或鏈接觸發，這時候，打開新網頁的方式就有兩種，在新窗口/標簽中打開（_blank）或者在本窗口/標簽中打開（_self）。
不管是哪種，本質上都需要瀏覽器重新加載新的頁面。對于一般的企業官網、新聞網站來說，這種加載的模式沒有太大的問題，因為操作頻次相對適中，用戶中間會有比較長的時間停頓下來查看頁面的內容信息。
而B端項目則不同，雖然也有不少查看頁面信息的需求，但是包含了更多需要短平快完成操作目標的使用場景，比如修改個標題，更改商品價格，添加分類字段等。
如果所有高頻操作的場景，都要重新加載頁面，使用起來的 “頓挫感” 是非常強的，降低使用體驗。
早期的網站加載內容必須刷新頁面，所以頓挫感是難以解決的，只能想辦法減少跳轉流程來提升用戶體驗。
隨著網頁技術的發展，異步處理（AJAX數據交換方式）技術的應用，讓網頁的內容可以通過不刷新或加載新網頁的形式加載和顯示。
簡單解釋，就是早期的網頁加載完成以后就是 “靜止” 的，里面所有內容是固定的（不是HTML的靜態）。而異步處理，就是讓頁面中的指定模塊處于 “運動” 的狀態，客戶端可以在不重載網頁的情況下只加載和更新這個模塊的內容。
比如下面的案例，設置不同的條件選項，在過去的網頁中只能重載頁面更新，而使用異步處理就可以直接和服務器請求數據刷新這個圖表模塊，而不用重載整個頁面。
所以，在B端項目中，我們不再是只有重載網頁一個選項，而有了其它的選擇，如下圖所示。
其中，網頁展示作為一個基礎展示對象，我就不多做介紹了。我會通過分別介紹其它幾個內容的載體，幫助大家區分它們和重載頁面有何不同，以及如何正確選擇內容加載形式。
首先介紹浮層，它是我對通過懸浮在頁面基礎內容之上的內容層的統稱。例如各類氣泡、提示框、下拉菜單，都是浮層的表現形式。
浮層是比較底層的形式，其展示內的容完全不需要使用一個新的頁面，且和觸發的元素有較強的視覺聯系（對比彈窗）。
浮層并不是由內容的多和少決定的，復雜的浮層可以包含非常多的交互選項和內容信息，導致我們很容易和下方解釋的彈窗搞混。
比如客戶端軟件常見的隱藏式側邊欄，搜索欄中展開的復雜面板，都是浮層的一種而不是彈窗。
浮層最大的特點，源自它的位置定義邏輯，它會和觸發它的元素具有非常緊密的位置關系，而不是像彈窗一樣無差別顯示在界面或瀏覽器視圖的固定區域。
如果我們想要顯示內容，完全沒到用一個新頁面展示的地步（如搜索建議面板），且和觸發它的控件有較強的聯系，就可以考慮使用浮層來展示。
彈窗，也是一種懸浮在基礎內容之上的內容層，它和浮層的不同之處，就在于彈窗通常是居中固定的顯示區域，和觸發它的元素沒有什么位置聯系。并且，彈窗可以包含的內容量級也是高于浮層的。基礎的彈窗包含強提示彈窗，或類似注冊登錄這種表單彈窗。
而高級的彈窗，則類似下方案例，約等于打開一個獨立的網頁。
之所以使用這些高級彈窗作為頁面載體，原因就是對原觸發頁面的使用和關注并沒有結束，需要支持快速關閉當前的窗口并返回原來的頁面中去。
比如在一個非常長的列表中，你下滑了幾十頁的高度，肯定不想放棄掉當前的頁面位置，所以Behance或者花瓣等應用，都采用窗口模式加載新頁面。
或者類似一個列表頁面中需要大量創建新的數據，這些數據又不復雜。于是就通過彈窗表單的形式，快速完成創建并在原頁面中再次點擊 “新增” 按鈕。
高級的彈窗使用除了保持原頁面位置、高頻操作等防止加載的原因之外，還有個更重要的特征，就是強制吸引用戶的注意力到窗口上。
因為彈窗主要以模態 （Modal，后方有黑色遮罩）居中顯示，通過深色蒙版進行前后隔斷，凸顯彈窗區域，意味著我們強制讓用戶關注眼前的信息和任務。
如果我們想要顯示的內容，需要保留原頁面狀態，減少頁面跳轉數量，又需求用戶強行關注，就可以使用這種模式展示。
最后，就是最難選擇，也最容易和其它組件搞混的抽屜了。
抽屜本身的特征包含懸浮屬性，覆蓋在原頁面之上。而我們常見的側邊欄、側邊菜單并不能和抽屜畫上等號，因為他們會占用畫布的實際顯示區域，和原有內容同層。
比如下方案例中，Jira左側導航（不分左右）可以隱藏收入，頁面內容變大，這是側邊欄。而點擊列表選項，右側彈窗的窗口覆蓋原有頁面，才是抽屜。
和高級的彈窗類似，抽屜也可以當成一個獨立的頁面展示信息。但它和彈窗不同的是，抽屜通常是從頁面的右側展開，沒有遮擋左側的空間。它的主要特征是還需要在原頁面進行交互。
比如Teambition案例中的列表，我們每開一個抽屜都還可以直接點擊原列表的其它選項切換下一個抽屜，省掉關閉步驟或者原頁面被遮擋的情況。
它比較適合應用在表格/列表環境中，作為表格/列表內容的詳情頁形式展開，這樣用戶可以在一個頁面中快速查看不同列表的具體信息或編輯。并且，表格/列表本身的特征會將標題放在最左側，也方便抽屜的切換。
也因為這種特性，抽屜不太需要使用模態和遮罩將左側內容遮擋掉。如果需要通過遮擋來吸引用戶注意力，那么這種情況往往更適合使用彈窗。
所以，如果不想通過新頁面打開的列表詳情內容，且不是強制要求用戶聚焦的任務，就可以使用抽屜的形式展現。
以上就是幾種基本的內容展現形式說明，時間關系還有后半部分關于如何站在系統框架級的角度使用內容載體的分享，我會留在下次分享。
如果有關于這部分的實際項目疑問，也可以在下方留言。
我們下篇再見～
作者：酸梅干超人；公眾號：超人的電話亭
本文由 @超人的電話亭 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Unsplash，基于CC0協議。
專欄作家
韓敘，微信公眾號：運營狗工作日記，人人都是產品經理專欄作家。原貓眼電影產品運營專家，創業時經歷了0到1的艱辛，在百度時規劃了海量用戶的玩法。從業10年，專注互聯網運營領域，包括產品運營、用戶運營、社區運營和UGC運營。
本文原創發布于人人都是產品經理，未經許可，不得轉載。
題圖來自Unsplash，基于CC0協議。
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(m.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
本文深入分析了B端彈窗設計的尺寸規范問題，提供了科學定義彈窗尺寸的方法和思路，旨在幫助設計師提升操作效率并確保良好的用戶體驗，希望對您在彈窗設計上的決策有所啟發。
相信大多B端設計師對web彈窗設計的規范都不陌生：比如彈窗按交互形式可分為模態彈窗和非模態彈窗；
按承載內容類型分為：提示類、操作類、展示類彈窗；按彈窗承載信息量的大小可以分為：小尺寸彈窗、中尺寸彈窗、大尺寸彈窗…等等但最近，在做一個操作提效的需求設計時遇到了需求方對彈窗尺寸的規范挑戰~
大致需求是這樣：為節省彈窗內對選項選擇的時間，現將原本彈窗內的級聯選擇下拉框改成平鋪按鈕的形式。（見下圖）ps：本平臺為人工審核平臺，使用用戶為審核員，平臺設計要為審核員的審核效率負責，審核效率一般表示為：單人單天（8小時）xxx條審核量。
問題點：承載內容信息量不固定原因：彈窗內用戶選擇項為不通過原因，而此選擇項是用戶根據自身企業的風險標簽來自定義配置，這就涉及到級聯選擇數量的問題，有的客戶風險標簽體系細，多則幾百個，有的客戶只需要粗粒度標簽，例如只有一級標簽，總數可能不超過十個…
需求方：我要一個這么大的彈窗！好讓信息呈現更全面！
但做設計從來不是憑空定義一個彈窗大小，要做到有理有據；前期選擇先跟使用此平臺的審核負責人溝通，來確定目前已接入的客戶在此處自定義配置的原因數量量級并整理出溝通結論：
存在少量客戶10個以內的原因個數、常規客戶在30個左右的原因個數、現存一家客戶使用最大量級100+原因個數。但由于控制權在客戶方，原因量級不可控，未來也可能出現幾百的數量。在以上結論中，可以確定出可能的備選 600px中彈窗、800px的大彈窗、或者需求方提出的將近1200px的超大彈窗，但到底哪個最為合適需要進一步判斷。
在有可能的600px、800px、1200px三種寬度中選取最合適的彈窗尺寸，分別從操作效率與適配性角度對其進行判斷。操作效率層面：
當原因個數在30個以下時：
若不同寬度時，都選擇第一個處置原因，根據交互方法論–菲茨定律，指點設備到達目標的與兩個因素有關：（1）設備當前位置和目標位置的距離（D）。距離越長，所用時間越長；（2）目標的大小（S）。目標越大，所用時間越短。
由此可見此操作的最終目標按鈕為右下角的確定按鈕，目標按鈕大小不變，但整體的選擇距離是相對兩個較小彈窗要遠的。D3>D2>D1，所用時間 T3>T2>T1。由于對審核員任務操作時間和效率要考慮到秒或毫秒級別，此大小對用戶快速完成此操作起到負向作用。
另外，當原因個數10個以內時，可見此時彈窗寬度過寬，導致空白區域過大。
當原因個數在30個以下時，操作效率評分：
1200px ????
800px ??????
600px ??????
當超過100個原因個數時：1200px 一屏內展示完全，不需要滾屏滑動；800px 可在兩屏內展示完全，需要滾屏滑動；600px 超出兩屏展示才可展示完全，需要滾屏滑動。
當原因個數超過100時，操作效率評分：
1200px ??????
800px ??????
600px ????
適配性層面：
根據市面主流屏幕分辨率尺寸調研：
市面上存在部分 1024 分辨率的顯示屏，所以：600px能夠適配所有市面主流分辨率顯示器；800px能夠適配所有市面主流分辨率顯示器；1200px不能能夠適配市面主流1024*768的分辨率顯示器，彈窗不能在顯示器內顯示完全，固適配性相對較弱。
綜合三種彈窗大小的操作效率和適配性：
800px的表現最優，固選取800px的彈窗大小。
高度規范：由于信息量的不同可以根據內容多少進行自適應高度，限定max high 700px。由于一般超出800px可能出現瀏覽器外滾動條，所以選取高度為600-800px之間。
滾動條規范：限高后，若信息超出max high支持出現內滾動條。瀏覽器適配規范：瀏覽器窗口>800px，彈窗寬度保持固定寬度800px。瀏覽器窗口600-800px之間彈窗同步在600-800之間自適應。瀏覽器窗口<600px，彈窗寬度保持600px，出現瀏覽器外滾動條。
本文由人人都是產品經理作者【Clippp】，原創/授權 發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基于 CC0 協議。
蘭亭妙微(m.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
在當今這個信息爆炸、競爭激烈的市場環境中，用戶體驗已成為企業核心競爭力的關鍵因素。在這一背景下，我們啟動了一項名為“簡單設計”的專項優化項目，旨在通過化繁為簡，重塑用戶體驗，提升B端產品的用戶滿意度和忠誠度。
在當今信息爆炸、競爭白熱化的市場大環境下，企業核心競爭力的內涵已悄然變遷，不再單純聚焦于產品或服務本身，而是將重心逐漸傾向于用戶體驗這一關鍵維度。
于招聘領域而言，B 端產品作為銜接招聘方與求職者的關鍵紐帶，其設計的合理性、操作的便捷性以及語義的明晰度，猶如三把密鑰，直接決定著用戶滿意度與忠誠度的高低。
今年，58招聘B端開啟了“簡單設計”專項優化的征程，作為項目主導設計師，我全程深度參與了從調研、剖析、設計至實施的各個環節，在這一過程中，深刻領悟到設計對于提升用戶體驗的非凡意義。
項目伊始，我們即對58招聘B端產品的現有用戶展開了全面且深入的調研行動。
我們深知，唯有精準洞悉用戶需求與痛點，方能打造出契合用戶期望的產品。
為此，設計團隊全員深入一線，置身于用戶的實際使用環境，與各行業用戶進行深度的面對面溝通。同時，我們運用多種調研方法，包括問卷調查、用戶訪談、數據分析等，多維度、全方位地搜集用戶信息。
在調研過程中，一系列影響用戶體驗的關鍵問題浮出水面。
其中，操作繁瑣成為用戶反饋最為突出的問題。眾多用戶抱怨，在使用B端產品時，完成諸如客戶認證、發布職位、篩選簡歷等簡單任務，往往需歷經多個復雜步驟。
這種繁復的操作流程，不僅耗費大量時間與精力，更易引發用戶的挫敗感和不滿情緒，宛如一道無形的屏障，拉遠了用戶與平臺的距離。
此外，語義晦澀難懂也是普遍存在的問題。
B端產品中的專業術語和復雜表述，對于非專業用戶而言，仿若天書，極大地增加了學習成本，甚至可能導致誤解和誤操作，嚴重損害了用戶體驗。
這些問題的根源，經深入分析，與傳統產品設計理念的局限、對用戶體驗的忽視以及用戶研究與溝通的不足密切相關。
基于此，我們決定從這三個層面入手，重塑設計思路，以提升用戶體驗。
在扎實調研的基礎上，我們對問題進行了抽絲剝繭般的分析。
我們深刻意識到，若要從根本上解決用戶問題，必須對設計理念進行大刀闊斧的革新。
首先，我們毅然摒棄傳統的以產品為核心的設計理念，轉而擁抱以用戶為中心的設計哲學。用戶作為產品的最終使用者，他們的需求和體驗是產品設計的靈魂所在。因此，我們將用戶需求與體驗置于首位，重新審視產品的功能布局、操作流程以及語義表達等各個維度。
其次，我們將用戶體驗的重視程度提升至前所未有的高度。用戶體驗，作為產品競爭力的核心要素，貫穿于設計的全過程。我們通過簡化操作流程、優化界面布局、明晰語義表述等手段，致力于提升用戶的操作效率和滿意度，打造流暢、高效的用戶交互體驗。
最后，我們強化了用戶研究與溝通機制。深知只有深入了解用戶需求與痛點，才能設計出符合用戶期望的產品。因此，在與用戶的每一次接觸中，我們都用心收集他們的意見和建議，為產品設計與優化注入源源不斷的智慧源泉。
基于對問題的深度剖析，我們開啟了具體的設計工作。
設計，作為解決問題的關鍵環節，需要我們充分施展設計師的專業素養與創新能力，以用戶為中心，對招聘B端產品進行全方位的重塑。
在操作流程優化方面，我們對現有流程進行了細致梳理和深度優化，大刀闊斧地去除了冗余步驟和環節，使操作流程如行云流水般簡潔明了。
例如，在發布職位這一關鍵功能上，我們簡化了信息填寫步驟，并貼心地提供模板和自動填充功能，極大地降低了用戶操作難度和時間成本，讓用戶在操作過程中感受到前所未有的便捷。
在語義表述清晰化上，我們對界面上的專業術語和復雜表述進行了精心簡化和優化，使其通俗易懂且易于記憶。同時，對重點文案和標題進行突出處理，便于用戶快速抓取關鍵信息，清晰知曉每一步操作的目的，輔助用戶迅速決策，從而進一步提升用戶體驗。
在界面布局精簡方面，我們對界面進行了精心雕琢，去除了繁雜的信息和多余的按鈕。通過合理的布局與色彩搭配，提高了界面的可讀性和美觀度，營造出簡潔大氣的視覺體驗。此外，增加搜索和篩選功能，使用戶能夠快速定位所需信息，進一步提升操作效率和滿意度。
在整個設計過程中，我們充分發揮設計師的專業能力和創新精神，運用多種先進的設計方法和工具，如用戶畫像、設計原型、用戶體驗測試等，確保設計方案的科學性和有效性。同時，與產品經理、開發人員等團隊成員緊密協作，形成強大的合力，共同推動項目順利前行。
設計完成后，項目進入實施階段。
我們深知，實施是設計落地生根的關鍵一步，需要團隊充分發揮協作精神和強大執行力，確保項目順利推進。
在實施過程中，我們采用敏捷開發方法，通過持續迭代和優化，不斷提升產品的功能和性能。定期收集和分析用戶反饋意見，及時對產品進行調整和改進。同時，加強與用戶的溝通，通過多樣化的用戶調研方式，積極捕捉用戶的每一個意見和建議，為產品的持續優化提供堅實支撐。
經過不懈努力，“簡單設計”專項已取得顯著成效。用戶操作效率和滿意度大幅攀升，產品留存率和口碑亦顯著改善。然而，我們明白，設計優化是一場永無止境的修行。隨著用戶需求的持續演變和技術的不斷革新，我們需持續探索與創新，以維持產品的競爭力和生命力。
展望未來，我們將堅定不移地秉持以用戶為中心的設計理念，持續優化產品功能和性能。同時，進一步加強用戶研究與溝通，通過持續收集和分析用戶信息與意見，不斷改進和優化產品設計。我們堅信，在全體設計師的共同努力下，58招聘B端產品將為用戶帶來更便捷、高效、愉悅的使用體驗，成為招聘領域的璀璨之星。
總之，“簡單設計”專項不僅是產品設計層面的優化與提升，更是對用戶需求深度洞察與積極回應的生動實踐。未來，我們將繼續堅守這一理念，為用戶創造更多價值與驚喜，同時不斷提升自身設計能力與創新力，為產品的持續優化與創新注入源源不斷的動力。
設計團隊：老李頭、王丹、溫正遠、崔秉鑒、趙德馨、陳浩然、劉靜頤、劉春明
本文由人人都是產品經理作者【58UXD】，原創/授權 發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基于 CC0 協議。
蘭亭妙微(m.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
在效率至上的數字時代，釘釘硬件卻走出一條“溫暖設計”之路，從愉悅體驗到隱私守護，再到多感官協同，它是如何讓冰冷機器擁有心跳，重塑B端硬件設計準則的？一起來探尋。
釘釘自2015年推出后，逐步構建“軟硬一體”生態，其智能硬件以“簡單高效，底色溫暖”為核心，通過普惠（幾何美學/曲率連續）、專注（層級顯隱/寧靜科技）、平衡（功能-成本-環境）三大準則，將復雜B端需求轉化為簡約設計，設計出的產品斬獲iF/Reddot等眾多國際大獎，服務超1500萬企業。
如今用戶的需求已不再局限于實用功能，更追求情感層面的滿足。
這種轉變就像從”需要一臺電腦處理工作”到”渴望一個能提供陪伴的機器人助手”——本質是從單純的功能需求升級為情感連接。
通過洞察用戶從本能需求到行為習慣，再到情感共鳴的完整鏈條，我們不斷優化產品，讓科技與人的關系變得更加緊密溫暖。
產品與人的配合度決定了使用體驗是否安全順手，更是用戶獲得愉悅感的關鍵。我們建議從三個維度展開研究——人的使用習慣、設備性能特征、使用場景特點，通過實際測試與綜合分析，最終得出科學可靠的最優方案。
讓冰冷的工具性產品因為材質的改變而富有溫度，讓設備的立桿因為角度的改變而變得有儀式感和尊重感，以人為本的情感的設計賦予產品價值，形成用戶對品牌的認知性與認可度。
2030年的碳中和戰略和可持續目標已經是全球的趨勢共識，這意味著產品不僅為今天創造價值，也為明天創造價值，釘釘建議從產品級的3R原則 (Reduce、Reuse、Recycle) 再到系統級的LCED（產品生命周期設計）的設計標準去思考如何給用戶帶來產生正向的綠色價值認同感和愉悅感的產品，再到通過設計領導力帶來理念變革與循環經濟。
現今無處不在的智能產品和共享數據在帶來變革的同時帶來了巨大的安全風險， 釘釘設計非常注重可感知的用戶隱私信息保護（PBD），一直致力于通過最好的手段來守護用戶安全隱私，消除用戶在使用產品中“被監視”來的不安定感。
在隱私性設計上應考量如下維度：
策略-隱私保護不是成本負擔，而是產品核心競爭力。
眼睛看到的不等于全部體驗。我們始終相信，當視覺與聽覺的韻律、觸覺的肌理、嗅覺的記憶、味覺的驚喜交織成網（五感聯動），產品才能真正叩擊人心。這種立體的感官交響，不僅塑造獨特的品牌印記，更能在用戶腦海中種下記憶錨點。要讓感官設計真正釋放能量，設計師們需要一套系統化的設計指南——就像指揮家需要樂譜來統籌交響樂團。
釘釘設計一直致力于協調所有感官輸入，以提供關于品牌價值的豐富信息和功能表達，光作為其中一條重要媒介，即是交互媒介也是內容更是品牌記憶點，其中包含了光的色彩，明暗，變化形式，以帶給產品獨特的識別度和無限的可能性。
聲音的反饋能夠在恰當的場景給予用戶明確的指向和好的用戶體驗，同時也能很好得傳達出品牌和價值主張，汽車關車門的聲音是感官設計方法中最著名和最常用的例子，許多頂級汽車品牌都有獨立的車門開發團隊，例如梅賽德斯 SUV 的車門被調教得聽起來更重，以傳達它們的堅固性。
色彩是除了造型以外最能影響產品設計視覺體驗的關鍵設計因素，中性的黑白灰建議作為產品主基調，能夠適配更多場景的同時也能覆蓋更多受眾，限定色一般做根據產品定位的特殊版，或者局部的顏色點綴。
材質是產品外觀效果實現的物質載體同樣也是凸顯產品定位的重要媒介，我們主張通過引入功能&情感導向材質的概念，來進行不同產品定位上的區分，同時保持理念透出的一致性。
工藝處理&圖案是外觀效果最后一步，為營造溫潤感和保證多場景下的耐用性，表面處理應注意以下兩點：
1.主殼體表面處理應避免大面積高亮，避免使用大面積金屬拉絲，表面質感光澤低于4分光，素色為主，可點綴亮色，避免大面積純度過高的顏色噴涂，除窗口鏡片外避免大面積亮鍍，
2.肌理圖案應選擇低調克制的圖形，以功能性為導向，例如在關鍵物理交互點上給予適當的觸感引導或輔助。
在產品落地過程中，設計師應在量產限制與工藝要求之間平衡出最優化解，并將其沉淀成相應準則。
在效率至上的數字時代，釘釘硬件的設計選擇了一條不同的路——不讓技術成為壓迫用戶的工具，而是化作理解人心的伙伴。上篇提出的“簡單高效”生態，不是把復雜功能簡單堆砌，而是像拼樂高一樣，用“普惠、專注、平衡”三大準則搭建出真正懂用戶需求的硬件；下篇揭示的“溫暖設計”，則讓冷冰冰的機器擁有了心跳：它可能是電腦支架上一個微微傾斜的弧度，讓你工作時挺直腰背的瞬間，感受到被尊重的儀式感；也可能是設備上一盞呼吸節奏的指示燈，用光的明暗變化悄悄告訴你：“數據已加密，請安心”；或是關機時那一秒類似合上書頁的“咔嗒”聲，讓結束工作的動作變得像放下咖啡杯一樣自然。這些細節背后，是釘釘對產品的三個堅持：
說到底，好的設計從不需要刻意標榜“高大上”。當科技能讀懂人的疲憊、尊重隱私的敏感、在乎環境的未來，甚至在意你觸摸機身時的指尖溫度——這便是“芥子納須彌”的真正含義：用最小的人文微光，照亮最深的數字叢林，讓每個人在智能時代依然能體面地工作、自在地生活。
作者：創客
本文由人人都是產品經理作者【釘釘用戶體驗】，原創/授權 發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基于 CC0 協議。
蘭亭妙微(m.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
許多設計團隊在面對復雜的業務需求時，往往忽視了側邊欄設計的細節和靈活性。本文將深入探討B端側邊欄的設計要點，并結合實際案例，分享如何根據不同行業、業務場景和用戶習慣進行靈活設計，供大家參考。
很長一段時間我都覺得做B端的中臺時間沒什么技術含量，不就是第三方的組件，拼積木一樣，拼接就好，甚至很多團隊也是這么想的，早期很多的中臺都沒有設計師；
但是隨著這幾年越來越深度的B端中臺的設計，做了太多各式各樣的后臺的設計系統，深入的進入業務，才發現設計過程中必須考慮很多細節和維度，甚至很小的點，也是有考究的。
最近我們在做側邊欄的升級，我做了市場上50+中臺的側邊欄目調研，看了上萬張圖，越看越越是能發現針對不同的行業，不同的業務場景、信息層級和用戶習慣進行靈活設計選擇，需要具體問題具體分析及處理。
下面我就來總結一下我調研的這些側邊的設計分類及設計規則。
細欄（垂直導航）：以圖標為主，文字輔助，適用于模塊較少、內容區域需最大化展示的場景。
優勢是簡潔高效，但要求用戶對圖標含義有較高認知。
寬欄（混合導航）：圖標與文字并存，支持多級菜單，兼容性強，適合復雜業務層級。這也是常見的側邊欄樣式。
通過分組和標題提升信息密度，但可能壓縮內容區域。
單級導航：直接展示所有一級菜單，適合功能模塊較少的中小型系統（如藍湖、Coding）。
遵循“7±2”原則，菜單數量控制在5-9個，避免用戶選擇疲勞;
多級導航：通過折疊面板或樹形結構收納子菜單，適用于大型企業級系統（如ERP、CRM）。
需明確可點擊項與純分類項的區分，避免交互混淆 ；
平鋪模式：菜單完全展開，用戶可快速定位功能（如新紅小紅書后臺、抖音抖店等等模塊）。適用于高頻操作場景；
折疊/懸浮模式：側邊欄可收縮為圖標或隱藏，適應窄屏設備或需專注內容的情境（如飛書的icon展開收起）。需提供顯性觸發按鈕（如漢堡菜單）
側邊欄設計需平衡功能性與視覺體驗，核心規則如下：
背景色差異化：通過深色或淺色背景區分側邊欄與內容區域，避免視覺干擾。例如，深色背景可突出白色內容區，但需確保品牌色符合無障礙標準（對比度≥4.5:1）
信息分組與留白：使用分割線、標題或間距對功能模塊分組，減少信息密度。
圖標設計原則：B端圖標需簡約且具辨識度，避免過度裝飾。選中狀態可通過填充色、微動效或標識線強化（如Ant Design的選中高亮）
交互反饋優化：鼠標懸停時圖標變色、文字浮現；選中狀態結合背景色與文字加粗，提升操作感知
響應式適配：窄屏下自動切換為圖標模式，確保移動端可用性（如飛書后臺的側邊欄收縮功能）
規范復用：建立統一的字號、間距、顏色規范（如主文字14px、輔助文字12px），降低用戶認知成本
高頻功能前置：將常用模塊置于頂部（如“更多功能、功能設置等等”），低頻功能收納至底部折疊區
teambition：不僅做了更多功能，有意思的他還做了自定義導航欄的功能，支持排序，做到低成本的定制化。
權限分級展示：根據角色動態顯示菜單（如管理員可見“系統設置”，普通員工僅顯示“任務列表”），減少信息冗余
設計亮點：頂部導航進行功能入口切換，左側平鋪核心功能，圖標與文字比例均衡；通過級分類提升信息層級
適用場景：設計協作工具，功能模塊清晰且用戶操作高頻
設計亮點：頂部導航切換業務大類，側邊欄展開子模塊；有一級也有多級菜單通過折疊面板收納，層級深度可控。
適用場景：復雜業務，需支持多業務線交叉跳轉
設計亮點：分兩欄導航，窄屏下收縮為圖標或者圖標+簡短文字；第二欄按照層級排列，客一級或者多級。
適用場景：企業級后臺系統，業務場景復雜，需要多種場景切換，導航多層級切功能極多的情況
設計亮點：可自定義導航，包含排版、顏色。相對來說體驗感更加，不過對應屏幕自適應要求更高。
適用場景：針對C端，功能復雜的情況
老版設計
新版設計
設計亮點：遵循原子設計方法論，定義圖標尺寸（24px）、間距（8px倍數）、選中態（主色填充），確保開發與設計一致性 ，便于快速搭建新平臺
適用場景：中臺型系統，需快速復用組件庫
側邊欄設計需以業務邏輯為核心，考慮信息層級與用戶角色，同時兼顧視覺清晰度與交互效率。
未來趨勢上，側邊欄的“C端化”設計（如情感化微交互、個性化皮膚）可能成為提升B端產品吸引力的新方向。
總的來說，做設計這些年，當遇到問題的時候，我覺得最好的解法就是看案例，看很多案例，爆炸式的研究一下，很多問題就有了解法。
專欄作家
三原設計，人人都是產品經理專欄作家。分享B端設計、品牌設計，原創設計文章、教程。
本文原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash，基于 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(m.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
在B端產品設計的世界里，色彩不僅僅是視覺元素，它還承載著信息傳遞、用戶體驗和品牌識別的重要角色。本文深入探討了色彩空間理論在B端設計中的應用，從基礎的色彩空間概念到如何在實際工作中運用這些理論，為設計師提供了一套科學的顏色搭配和管理方法。
對于 B 端產品而言，我們經常會和顏色進行斗爭。
比如在工作當中，開發沒有正確還原顏色、不知道如何進行色彩配置、以及對于 B 端產品而言，究竟應該如何協調科學的進行顏色的搭配～
最近會講顏色的部分，整體會分為四篇文章：B 端設計如何理解色彩空間、B 端產品怎樣合理搭配顏色、B 端項目的視覺風格、B 端項目顏色的實戰技巧。
本篇文章是第一篇，我們先來聊聊產品配色的基礎 色彩空間與顏色管理。
不知道各位同學是否遇到這種情況，當你在調整顏色時，就是在漫無目的的在拾色器上來回游走，在被問到為什么要選擇這個顏色時，也茫然無措，這時候的你作何感想？
所以顏色還原需要熟練的掌握色彩空間，并配合屏幕進行顏色管理，才能夠讓設計順利落地。但顏色其實過于抽象，因此我們將整體內容進行簡化，多和大家聊聊在理論背后究竟應該如何與工作內容進行結合。
首先我們先說說色彩空間。
色彩空間又叫色彩模型，它是為了讓系統能夠準確地描述顏色、使用顏色，進而定義出來的一種顏色組織方式。
比如有一排隨機顏色，要按特定規則排列，你會怎么做？我相信，我們首先想到的便是按照不同的色相進行歸類。
如果顏色變為10000個，又該怎么排列呢？因此，為了讓企業更好地使用顏色、設計師更便利地選擇一致的顏色，行業中便提出了色彩空間的概念。
色彩空間其實很簡單。因為我們需要使用顏色，且不同人群對顏色的需求不同，所以顏色的排列方式會存在差異。
比如，行業中較為出名的潘通色彩體系，其實是基于印刷行業制定的一種特殊色彩空間；CMYK是為印刷從業者提供的、便于他們更好地進行物料印刷的色彩空間；Lab是一種更強調色彩亮度的色彩空間。
因此，行業會根據顏色的不同規律和自身使用需求，總結整理出不同的色彩空間。
我們目前在工作當中，主要都是聚焦于屏幕當中，因此影響顏色呈現的也就變為：
在我們細致講解色彩空間的部分時，我們先來了解三個重要的概念。
RGB是顯示器當中的顏色基礎。
比如在現實世界當中，我們將手機屏幕進行放大，你會發現屏幕都是由紅綠藍三個燈管所組成的。
而 RGB 的色彩模式就是模擬現實世界當中的屏幕顯示原理，將燈光照射的邏輯在設計軟件當中進行復現，因此在 RGB 的調色盤中，就會分別包含三個輸入框，這便是 紅綠藍。
其中，數字 0 代表不發光、255 則是最亮的燈光。
那為什么最亮是 255，不是 250？或者是 280 呢？
原因在于RGB 所有的顏色，最后都需要通過計算機進行運算顯示，對于它說并不認識 紅色、藍色，在它的腦袋里（不對，CPU 里面）就只有 0 與 1，因此在計算機存儲的時候，一個字節也就是 8 個比特、也就是 2 的八次方、也就是 256，這樣 一個色彩信息等于一個字節，數據存儲就會更加高效。
所以我們所聊的顏色更多指的是代碼層面的顏色設定。
接著我們打開 Figma，看到另一種格式 Hex，那我們稱之為是 RGB 模式的精簡版。
因為它嫌棄每個輸入框都會出現 255（255,255,255 白色）實在太長，不利于我們在日常工作當中進行記錄。
因此將每個顏色，三位數值縮減為兩位數值（十進制變為十六進制），就是增加英文字符的數據，就能較短的表達顏色，使得顏色表達更為高效。
因為 Hex 只是 RGB 的精簡版本，所以 Hex 里面，每兩個字符所對應的就是 紅、綠、藍。
比如我們剛才提到的這個藍色，在 RGB 空間當中為(0,86,255) ，Hex 則是#0056FF，也是一一對應關系。
RGB 聽上去似乎很美好，但問題在于兩點：
1.顏色的調整不夠直觀：作為設計師，我們很難模擬燈光的照射思維對顏色進行調整，具體應該增加多少顏色，其實是不夠清楚的。我們更熟悉的其實是：亮度、色相、飽和度，因此在調色時會十分困難。
比如我目前是紅色，那我要調整到紫色，應該輸入多少值呢？其實我們很難進行一個準確的判斷。
2.顏色信息與亮度信息的數據混合：導致我們很難對于有一個準確的判斷，比如在 RGB 相同的數值當中，明顯會感受到 黃綠色 與其他顏色的亮度存在較大差異，這樣在調色時，顏色一致性偏差較大。
為了解決這些問題，就提出一種新的色彩模型：HSB
HSB （也叫 HSV）就是通過顏色的 色相、飽和度、亮度 來進行表示。
在色相當中，由于顏色的呈現是色環的方式，因此在數值上是以 0-360 度來進行表示的，在設計軟件里面，我們也只能輸入所對應的數值。
同時飽和度與亮度都是以百分比的形式進行呈現，飽和度越低，相對應就會給顏色增加白色，使其更灰；亮度越低，就會增加對應的黑色，讓其更深。
由于 HSB 的色彩空間的分類模式非常有利于我們進行顏色的調整，因此我們在日常調色時其實會經常用到。
比如日常工作當中，假設我們需要設計一組圖標，根據 HSB 顏色的基本原理，我們其實只需要調整不同的色相，就能夠得到不同的圖標顏色。
但… 顏色上依舊會存在問題。
你會發現當我們調整了色相過后，整體的顏色并沒有形成統一。原因在于我們人眼對于 黃綠色的感知 會和紅色、藍色有所不同，我們通常在看黃綠色時會更為刺眼，因此在設計層面上需要單獨調整。
所以在 HSB 當中的顏色邏輯上，也并沒有解決顏色一致性的問題。于是在 2021 年 Google 提出一種全新的色彩模式，HCT。
HCT 首先會將顏色當中的 感知度、亮度 進行結合，對之前的 HSB 重新調整。
在顏色層面上主要分為：Hue：色相、Chroma：色度、Tone：色調
色相與色度和之前基本類似，但色調上優化了黃綠色凸顯問題，讓人眼的感知度也加入到了色彩空間當中，使其顏色更為準確。
同時色彩空間的呈現，優化了顏色漸變的流暢性，我們會發現整體的漸變感覺會更為自然。
那為什么 Google 想要做 HCT？
其實因為 Material Design 當中會強調設計的一致性和靈活性，在功能設計上，需要增加一個根據屏幕當中的圖標生成與其風格一致的壁紙。
但在之前無論什么樣的色彩空間都不能準確的還原顏色。現在就提供了一個可靠的色彩基礎，能夠讓我們在不同的設備、平臺和應用場景下，都能夠生成具有一致性的色彩方案，同時也能更好地適應各種主題和風格的變化，如亮色模式和暗色模式的切換。
比如，還是以上面這個案例，我們使用 HSB 與 HCT 對顏色進行的色相的調整，那得到的結果明顯會發現 HCT 會更加準確。
那 HCT 就真那么完美無瑕？
其實也不然，因為 HCT 色彩空間出現時間較晚，所以在使用上也會有很多問題。
這么深奧的色彩空間，到底要如何使用？
因為 HSB 是設計師最容易理解的色彩空間，因此我們在調色時需要根據數值來進行顏色的調教。
比如說你的顏色很臟，不夠干凈。其實就是在強調 HSB 當中使用了更多的黑色，我們便可以調整到這個色彩空間當中，去增加 B 的值（也就是第三個輸入框）
比如說你的字體很灰，不夠明確。
其實就是在說 你的亮度太高，需要減少亮度，也就是 H 的值（也就是第一個輸入框）
因為每一個屏幕所顯示的顏色其實都不太相同，因此色彩調整時要多看數據，觀察數據之間的對比變化。
比如以 B 端產品的中性色為例，現在系統當中所使用的正文顏色為 #333333，看到過后就明確知道顏色深度不夠、顏色也不透氣。
我們就會按照，先確定顏色色相，為灰色偏藍色，因此在色相當中需要拖動色環找到合適的色相；
緊接著確定飽和度，因為要偏藍色，但不宜過多，因此整體的數值只會在 1-5 之前浮動；
最后確定深度，之前顏色過于淺，需要加深，所以直接減少，變為 22 左右的數值。
其次在判斷顏色時，也會更具章法。
在多輔助色的情況下，我們可以使用 HCT 對顏色進行判斷。
對于日常工作來說，我們可以使用 Figma 當中的 color Space 插件 進行日常的色彩管理。在今后遇到類似同類型圖標時，我們可以使用 HCT 的方式快速生成發散色板，幫助我們進行色彩搭配。
最后在 B 端系統當中，會存在較多顏色搭配的場景。
像是圖表設計、自定義系統主題，原來只能通過系統預設固定顏色的方式進行解決，而現在 Google 也將這套計算公式開源，也就是說程序員可以直接引用 HCT 的色彩空間，將顏色配置的權限給到用戶，通過顏色的調整，呈現用戶想要的顏色內容。
對于屏幕顯示的色彩空間而言，有部分內容我們也是要重點關注。比如在 B 端設計當中，色彩還原老是出問題，那我們就可以通過屏幕的色彩空間進行判斷。
sRGB（standard Red Green Blue）是由惠普公司和微軟公司共同開發的一種標準色彩空間，目的是提供一種通用的色彩標準，使得在不同的設備（如顯示器、打印機等）之間能夠實現相對一致的色彩顯示。
對于 sRGB 來說，它是我們作為設計師最為重要的屏幕顯示色彩空間，因為它通用性強，所以大多數普通的電腦顯示器、網頁瀏覽器等都默認采用 sRGB 色彩空間，這樣在瀏覽網頁、查看普通的數碼照片時，可以獲得比較穩定的色彩效果。
所以我們在做設計時，通常都會將屏幕與軟件，都調整的 sRGB 的空間當中，這樣就能夠最大限度保證色彩的一致。
Display P3 是基于 DCI – P3 色彩空間衍生而來的，主要用于消費級顯示器設備。它在 DCI – P3 的基礎上進行了一些調整，以適應顯示器的特性。
整體而言 P3 色彩空間顯示出來的顏色會更加 生動、艷麗，但是這會和你的設備密切相關。目前行業中只在蘋果設備以及部分高端顯示器才會使用，所以我們在設計時需要考慮自己產品的受眾，這一設備是否普遍使用。
最后，我們總結一下：
本文由人人都是產品經理作者【CE青年】，微信公眾號：【CE青年Youthce】，原創/授權 發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基于 CC0 協議。
蘭亭妙微(m.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
在視覺設計的世界里，色彩不僅僅是一種裝飾，它是傳達情感、影響情緒和吸引用戶的關鍵。本文深入探討了色彩在界面設計中的重要性，揭示了如何通過色彩的定義、屬性、模型以及在不同場景下的應用來增強設計的吸引力。
色彩在我們日常設計中起著定生死的作用，它是設計的靈魂，舒適的色彩搭配可以讓設計師一遍定稿，感覺在自己的設計生涯中，大部分都是在與色彩的博弈中度過的，雖然客戶可能不懂色彩原理，可是客戶天生都是色彩的感受家，什么樣的色彩搭配美，通常他們瞄一眼就會有定論，不用你去辯解太多，不好的搭配，縱使有千萬種理由，也說服不了客戶，所以好好研究色彩以及每一種色彩傳遞的情感對我們做好設計至關重要。
目錄
一、 色彩的定義
二、 色彩的三屬性
三、 色彩的三種常見模型
四、 色彩的語意及它的應用
五、 不同場景下的色彩應用
六、 色彩在B端設計中的作用
七、 B端色彩設計使用的原則
1、物理學角度
色彩是光的屬性，當光波通過物體時，物體會吸收某些波長的光，而反射或透射其他波長的光，這些被反射或透射的光波長度決定了我們看到的顏色。
2、心理學角度
色彩是人腦對光波長的視覺感知，不同的波長刺激視網膜上不同類型的感光細胞，進而產生不同的色彩感覺。
3、 藝術學角度
色彩是藝術創作的重要元素，它不僅關乎視覺感受，還與情感、文化、象征意義相關聯。
4、 設計學角度
在設計領域，色彩是傳達信息、影響情緒和創造美感的關鍵工具。
5、 計算機科學角度
在數字圖像處理中，色彩通常通過顏色模型（如RGB、CMYK等）來定義，這些模型通過不同比例的原色或色料混合來表示各種顏色。
色相是指不同顏色之間的差別，即不同顏色的表象和名稱，每個顏色都有自己的專屬ID,如紅、橙、黃、綠、青、藍、紫等。不同的色別都可用光譜中的波長來表示，人的眼睛可分辨出的色別有180種左右。
明度是指色彩的明暗程度。一般在反光率相同的情況下，不同色別的明暗程度不同。如黃色光比紅色光更明亮，而紅色光則比青色光要明亮。
同時，同一色相在受光強弱或者物體對光的吸收、反射性能不同的情況下，會呈現不同的明暗變化和差異。
飽和度（純度）是指同一色別的純凈度和鮮明度的變化。從色光的角度而言，光的波長單一程度越高，飽和度就會越高；不同色別所達到的飽和度不同，一般情況下，紅色的純度可達到最高，綠色的則相對較低；同一色相深淺不同的顏色有不同的飽和度；黑白色光的滲入會導致飽和度和明度發生變化；通常，照明光線的性質、物體表面結構對光線吸收與反射的性能等因素影響飽和度。
HSB模型也叫HSV模型，其中H代表色相，即顏色的種類；S代表飽和度，即顏色的純度；B(V)代表亮度，即顏色的明亮程度。
這種色彩模型是我日常在的設計工作中用的最多的一種色彩模型，如果在同色系中如果只想讓他們有細微的變化，我通常會通過調節S和B的百分比數值來達到自己想要的目的。
以上就是我在設計項目中，運用該色彩模型做的一個實戰，項目中用到了一個圖形，需要用同色系來表達，我保持了H色值的不變，讓S值和B值都發生著微妙的不同，于是就產生了四五種同色系的綠色，該色彩模型特別的好使，也鼓勵大家多在實戰中運用這樣的色彩模型，簡單實用。
RGB是從顏色發光的原理來設計定的，通俗點說它的顏色混合方式就好像有紅、綠、藍三盞燈，當它們的光相互疊合的時候，色彩相混，而亮度卻等于三者亮度之總和，越混合亮度越高，即加法混合。
紅、綠、藍三個顏色通道每種色各分為256階亮度，在0時“燈”最弱——是關掉的，而在255時“燈”最亮。當三色灰度數值相同時，產生不同灰度值的灰色調，即三色灰度都為0時，是最暗的黑色調；三色灰度都為255時，是最亮的白色調。
雖然RGB模型色彩更加的豐富，但是很多顏色不能完全打印出來，于是CMYK模型就成了打印、印刷的不二選擇。C是青、M是品紅、Y是黃、K是黑，通過顏料反射和吸收光線來顯色。
記得之前自己從事平面工作的時候，就經常要用到CMYK模式，因為印出來的效果偏差是最小的，是最靠近設計效果圖的。
通過對比，我們發現RGB色彩模型顏色顯示上確實更加的絢麗豐富些，而CMYK的色彩模型顏色顯示上就黯淡了不少，但是要印刷的話，就必須轉化為成CMYK的色彩模式。
紅色代表熱情、活力、強烈的情感和愛。它可以象征著激情、勇氣和行動力，也常與興奮、熱烈的情緒相關。
著名的快餐品牌肯德基，在自己的網頁及店鋪裝修中都運用了紅色，因為紅色是所有顏色中最容易引起人們注意的顏色，也是很容易刺激人們食欲和購買的顏色。
橙色傳達溫暖、歡快和積極向上的情感；它常與樂觀、友好、創造力聯系在一起，給人以活力充沛和充滿希望的感覺。
百度網盤的這個登錄界面就運用了橙色，給人陽光、向上、熱情的感覺，通過色彩的運用一下讓界面有了溫度。
黃色象征快樂、開朗和樂觀；它能帶來明亮、愉悅的情緒，代表著陽光、溫暖和智慧。
叫叫閱讀是一款非常著名的兒童閱讀軟件，整個色調采用的是非常有活力的黃色，這與兒童處于好奇與活力的階段相符合，這種高亮的黃色，飽和度和明度都非常的高，特別容易抓住兒童的目光，同時它是一種快樂的顏色，也是一種能激發孩子創造力和想象力的顏色，特別符合兒童成長的需求。
綠色代表平靜、和諧與生機。綠色常與大自然相關，給人帶來安寧、放松的感覺，也象征著成長、希望和新生。
青椒云的目標用戶是吸引年輕用戶和創意工作者，綠色這種富有活力和創意的顏色更容易吸引他們的關注，同時綠色也代表著健康、可持續發展的企業形象。
青色寓意清新、寧靜和沉穩，它給人一種冷靜、理智的印象，同時也帶有一絲清新的活力。
青色是一種帶有藍色和綠色的顏色，因此青色既有藍色的專業感、信任感，也有綠色的生機感、希望感。
以下是日本某牙醫品牌的官網首頁，病人希望在這里帶來健康與復蘇，也希望獲得專業、可靠的治療，而青色就成了很好傳遞這種情感的品牌色。
藍色代表冷靜、忠誠和信任；它常與沉穩、深邃的情感相關，能帶來寧靜、平和的心境，也象征著智慧和理性。
123云盤使用了藍色，藍色符合社會的普遍審美認知，接受度比較高；其次，藍色給人安全的感覺，也符合云盤的初衷，給用戶安全的存儲服務。
紫色象征神秘、高貴和浪漫；它常給人一種優雅、奢華的感覺，同時也帶有神秘莫測的氛圍，與夢幻、創造力等情感相關。
美柚的主要用戶是女性，紫色在色彩心理學中常被認為具有優雅、神秘、浪漫的特質，這些特質與女性的審美和情感需求相契合，能夠吸引女性的關注。
白色代表著純潔、神圣、信任、安靜、樸素和雅致，是一種充滿純潔的顏色，它可以跟任何顏色和諧的共生。
以下是熊掌ID的登錄界面，顏色用了大量的白與灰，簡潔又不失大氣，傳遞出了一種質樸、雅致的感覺。
? 吸引顧客注意力
在眾多商業場所中脫穎而出，色彩鮮艷的商場外觀和內部裝飾更容易在人們的視線中凸顯出來，吸引過往行人的目光，激發他們的好奇心和探索欲。
確實多彩的顏色更加容易引起我的關注，這不看到商場的美圖，都忍不住拍照留念了，成功的吸引了我的目光。
? 增強可見性
即使在較遠的距離或在繁忙的街道上，多彩熱烈的配色也能讓商場更容易被發現，提高商場的知名度和曝光度。
多彩的配色，讓我很遠就被商場美輪美奐的插畫吸引，大大增加了商場的可見性。
? 營造愉悅氛圍
色彩可以激發積極情緒，明亮、鮮艷的色彩往往與快樂、活力和興奮等積極情緒相關聯。當顧客進入一個色彩豐富的商場時，會感受到一種愉悅和輕松的氛圍，從而更愿意在商場中停留和購物。
星沙永旺城的美陳設計很好，墻面采用極具誘惑力的顏色與美食，把小小實物十倍放大，增加了視覺看點，讓人忍不住過去拍照曬一下，大大增加了愉悅性。
? 緩解壓力
在現代生活中，人們常常面臨各種壓力。走進一個多彩熱烈的商場，可以暫時擺脫日常的煩惱和壓力，享受購物的樂趣。
特別可愛夸張的插圖設計，引發了絲絲童趣和歡樂，讓人短暫忘記壓力，遠離煩惱。
? 引導消費行為
商場通常會使用不同的顏色來區分不同的區域，如購物區、餐飲區、娛樂區等。這樣可以幫助顧客更快速地找到自己感興趣的區域，提高購物效率。
突出重點商品，對于一些重點推薦的商品或促銷活動，商場可以使用鮮艷的色彩來突出展示，吸引顧客的注意力，引導他們進行購買。
? 塑造品牌形象
6.1 傳達個性和風格
不同的商場可能有不同的品牌定位和目標客戶群體。通過選擇特定的色彩組合，商場可以傳達出自己的個性和風格，吸引與之相符的顧客。
6.2 增強品牌記憶度
獨特而鮮明的色彩搭配可以讓商場在顧客的心中留下深刻的印象，提高品牌的記憶度和辨識度。
芙蓉區的龍湖天街主要面向中等收入新興家庭，是一個區域型的購物中心，集購物、餐飲、休閑、娛樂等多業態于一體，為消費者提供一站式商業綜合體，它在餐飲區采用了大量的吃喝玩樂的插畫來引導用戶消費。
? 視覺特性方面
1.1 穩定性
藍色給人一種沉穩、可靠的感覺。在B端產品中，用戶往往需要處理重要的業務數據和進行復雜的操作，藍色的穩定性可以讓用戶感到安心，增強對產品的信任感。
1.2 專業性
藍色通常與科技、專業領域相關聯。B端產品通常面向企業用戶，需要傳達出專業、高效的形象，藍色正好符合這一需求。
? 心理影響方面
2.1 減少焦慮
相比鮮艷、刺激的顏色，藍色較為柔和，不容易引起用戶焦慮和緊張的情緒；在B端使用場景中，用戶可能需要長時間使用產品，藍色的舒緩效果有助于提高用戶的使用體驗。
2.2 提高專注度
藍色具有一定的沉靜作用，能夠幫助用戶集中注意力，專注于工作任務。對于B端用戶來說，高效完成工作是首要目標，藍色的這一特性有助于提高工作效率。
B端產品在心理上追求的是類似如下圖的這種寧靜式的體驗，跟教育有著異曲同工之處，就像這個易貝樂少兒英語一樣，用大面積的藍色，希望孩子在這里能很快的安靜下來學習、專注自己的事情。
? 行業習慣方面
3.1 科技行業引領
許多知名的科技企業和軟件產品在 B 端市場中廣泛使用藍色，逐漸形成了一種行業習慣。其他企業在設計B端產品時，也會傾向于選擇藍色以符合用戶的認知和期望。
3.2 傳統與延續
在過去的設計中，藍色在 B 端領域的成功應用使得它成為了一種傳統選擇。設計師們在延續這一傳統的同時，也不斷優化和創新藍色的運用方式，使其更符合現代設計趨勢和用戶需求。
嘉為科技是一個有著20多年技術沉淀的科技公司，它的官網和產品風格一直是沿用著科技藍的風格，應該也是基于傳統的沉淀吧。
?藍色可以提高產品的復用率
很多用戶都能接受藍色的B端界面，當面對有差不多需求客戶時，同一套UI，可以多次復用，可以減少開發成本和設計成本，這也是自己通過長期實戰觀察發現的。
一個UI風格，用在了兩個項目中，不同的用戶，趨向同樣的風格，說明藍色在大家心目中的接受度是非常的高，用藍色可以促進設計的多次復用。
在日常的項目中，我看到的B端UI界面是千篇一律的穩重，不追求過于刺激的顏色搭配，通常都比較的干凈簡潔，不像商場里面的美陳背景設計，色彩對比非常的強烈，比較的吸引人眼球。
有一次我厭煩了常規的穩重風，探索一種大膽的色彩風格時，雖然風格比較新穎，可是發出去客戶的接受度不高，覺得太不穩重了，然后重新按照以往習慣進行設計時，就很好，客戶一致認同。
可見每個領域都有自己的色彩運用習慣，商場需要吸引人眼球、刺激消費，越大膽越好，可是B端設計需要提供一個讓人平靜去處理工作事項的環境，它需要安靜，不需要過于刺激的顏色搭配。
比方在日常設計當中，紅色代表流程失敗，綠色代表流程成功，橙色代表信息有告警，藍色代表著鏈接，同時不同的按鈕顏色也可以很好的區分按鈕狀態，在反饋結果和狀況方面，色彩起著非常重要的作用。
下面這個IDC運營的監測平臺，它就是通過顏色來區分不同的告警級別的，可見顏色在B端產品中的重要性。（備注：圖中數據都不是真實數據，僅做展示）
B端設計中大面積使用品牌色，可以強化品牌形象，使用與品牌標志風格相近的色彩，可以幫助用戶快速識別和記住品牌，在不同的B端產品界面中使用統一的色彩方案，有助于建立品牌的連貫性和一致性，增強用戶對品牌的信任。
例如我給湖南高速設計的一套B端界面設計，用戶強烈要求改變傳統的藍色風格，要求整套界面設計要用湖南高速品牌色-綠色，說明在追求大流和品牌色之間，客戶更加傾向品牌的傳達。（備注：圖中數據都不是真實數據，僅做展示）
在B端界面設計中，顏色在幫助信息區分起著非常重要的作用，通常可以通過不同的色彩來區分功能區域，可以讓用戶更清晰地了解界面的結構和布局，例如，導航欄使用一種特定的顏色，而內容區域則使用另一種顏色。
我設計的天翼寫作，就是這樣的設計思路，導航欄和內容區的顏色完全不一樣，這里顏色起到了很好的區分作用。
選擇合適的色彩對比度可以增強文本的可讀性，減少用戶的視覺疲勞。例如，黑色文字在白色背景上通常比較容易閱讀。
選擇適當的色彩可以營造出專業、高效、舒適的工作氛圍，從而影響用戶的情緒和感受，提高用戶的使用體驗。
我參與的這個后臺界面，就是通過合理的色彩搭配來引導用戶使用的，當用戶已經完成的環節都是用綠色表示，沒有走完的流程就會是灰色的，寓意指示非常的鮮明，很好的解決了用戶不知道清晰進程的卡點，提升了用戶體驗。
人的性格有活潑的、文靜的、沉穩的、深邃的，其實色彩也是有性格的，不同的色彩也有不同的性格，當我們對色彩的性格有足夠多的了解，在面對不同的客戶時，我們對色彩的拿捏以及設計需求的把握時，會更加的游刃有余。
我們平常確實是在做設計，但是我們更多的是在與人打交道，我們更好的聆聽，會幫助我們更快的抓取到客戶的喜好，快速做出滿足客戶需求的設計，少受加班之苦。
比方說我之前給云門戶設計的一套UI，客戶的決策層是男性，且年齡偏大，他們就偏愛深沉的UI風格；而我負責的天翼云電腦專家，客戶的決策層是女性，且年齡偏年輕，她每次就喜歡輕盈、明快的UI色調,不同的決策層客戶，就會帶來不同的設計結果。
在這個登錄頁面中，我就是運用的6：3：1原則，60%的主色，30%的次要色，10%的點綴色；使用了大面積的藍色和藍灰色，最后使用一點點的橙色，這樣的配色會顯得高級。
為了保證畫面風格的統一、干凈整潔，文字顏色、邊框顏色、以及邊框背景色都需要用到無彩色，通常通過顏色的深淺來區分信息的層級關系。
比方說我參與的星辰大模型AI文檔生成能力的應用，里面無論文字顏色還是底色都是運用的無彩色，只是通過了色彩深淺變化來做了層級區分，因為無彩色可以起到很好的降噪作用，既傳達了信息，又不會顯得界面凌亂復雜。
比方說，日常我們設計的卡片都是用的白色，而底色我們用的是灰色，因為卡片里面的內容都是比較重要的信息，需要用一個亮度比較高的顏色，讓內容往前走，而灰色的背景通常就往后走的感覺，這樣能跟卡片形成一個一前一后的對比，更好的幫助內容進行傳播。
比方說我設計的這個IT運維監控平臺的首頁，物理主機、網絡及安全設備、工單、在途工單這幾個指標是非常關鍵的，所以他們的圖片底色用了純度比較高的有彩色來標識。
作為設計師，我們的設計工作其實就是在設計一種感覺，一種情緒，設計前定調的意識真的太重要了，感覺對了，什么都就對了。
比方說我前段時間接到了一個B端的大屏可視化需求設計，客戶說之前的大屏設計不喜歡，希望重新出一個新的設計，然后公司的需求對接人員在給我下達需求時，真的就只是給我下達了這幾個字，讓我重新出一個設計試試。
以我的職業直覺，感覺這個需求是不夠細化的，于是我就多問了幾句，我問客戶是想要常規的藍色調的還是別的？果然一問，客戶說不希望再用常規的藍色的，希望新的設計要用他們的品牌色綠色，剛聽到這幾個字的時候，我以為這次我把握住需求了，在收集參考圖的時候，我發現常見的綠色大屏有深色的和淺色的，根據自己以往的作圖習慣，我覺得深色會更加的受歡迎一些，我自以為是的朝著深色的方向去出圖，出到了一半的時候，我內心有些許的忐忑，我于是找了一深一淺的參考圖，讓同事跟客戶確認一下，客戶是想要深色的感覺，還是要淺色的感覺，這次溝通又給了我深深的一擊，客戶不按常理出牌，說希望按淺色的風格來出圖。
在出稿之前，通過自己反復的溝通確認，發現設計前的定調意識真的太重要了，要不是有出圖前一波三折的反復確認以及需求的細化，就不會有后來的一遍過稿。
不管我們設計什么色系的界面，都避不開用到灰色，在設計中用跟主視覺相符的灰，會使得界面更加的高級、協調與美觀，注意好了這個小細節，會給我們的設計加分不少。
下面是我日常體驗到的兩個界面，上面綜合管理平臺里面的灰色就沒有跟主色調藍色相呼應，灰色沒有向藍色傾斜，界面看起來就沒那么美觀；下面通義千問的灰色設計就非常的注重細節，灰色偏紫，整個界面看起來渾然天成，毫無違和，美感、檔次瞬間提升好幾個等級。
一個微小細節的在意，在無形中拉高了設計的高度，十個細節乃至更多細節的在意，就會帶來更多意想不到的結果。
總結：
以上就是我最近對色彩的一些頓悟、感受和學習收獲，在不斷的復盤總結中，我們總會收獲一些新的認知，通過這次色彩的復盤之旅，發現色彩對設計師真的太重要了，希望我的分享對大家有啟發，不足之處也歡迎大家留言交流。
本文由 @姝斐suphie 原創發布于人人都是產品經理。未經作者許可，禁止轉載
題圖來自 Unsplash，基于CC0協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(m.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
藍藍設計的小編 http://m.gyxygd.cn
