1. 什么是SUS ？
SUS 全稱 System Usability Scale ，系統可用性量表。SUS最初是Brooke于1986年編制，可以科學地量化用戶體驗，用于完成一系列任務場景后，對產品或系統整體宏觀的感知可用性測量。
什么是B端產品經理？和C端產品經理有什么區別？
在互聯網領域中，人機之間的互動過程就是交互。交互也有一些可預測的、重復出現的規律，作者總結了其中常見的七種C端交互模式，可以提高大家的工作效率，分享給大家。
前段時間有個產品童鞋，他剛加我就問了一大串問題。
什么是模式（Pattern）？什么是模版（Template）？這兩個概念有什么區別？
作為一個熱心好學、樂于助人的產品仔，我當然和他暢聊了一個多小時，順便總結下聊天內容。
你是不是也經常在生活工作中，碰到類似“行為模式、設計模式、語言模式、文檔模版、表格模版”等名詞。
但又搞不清它們有什么區別，搞懂了又有什么用？
別急，我們花幾分鐘，先來嘮嘮什么是模式。
可預測、重復出現的現象或規律，通過歸納總結，就變成了某一種模式。
我們的生活中，就有許多模式的影子。
比如常見的商業模式、營銷模式、行為模式、數學模式、語言模式等。
舉個例子：
簡單說下行為模式，它分為了“習慣模式、消費模式、學習模式”等等。
苦逼打工仔普遍的消費模式，一般是工作日花錢少，到了周末都愛到商場逛街和購物。
但又有特例，我有個朋友就特別宅，他只喜歡在上班的時候，摸魚逛淘寶下單，簡直離譜~
掌握模式，有什么用？
當你掌握了模式的概念，并嘗試在生活中使用，相信你一定能感受到這 7 個好處。
我們試著再舉個例子，加深下對模式的理解，順便學學交互設計。
什么是交互？
簡單來說，交互指的是在互聯網領域中，人、機之間的一系列互動過程。
我還提煉了 3 種常見模式（簡單反饋、數據操作、業務判斷），比較粗糙湊合也能用。
現在試著再系統總結下，我常用的 7 種 C 端交互模式，主要有：導航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導模式。
學完就能用，趕緊卷起來~
有人就問了，還有更多交互模式嗎？
確實可以有，等我有時間再編幾個。。
話說回來，如果是一些特別復雜的業務規則，可能會涉及到 N 個交互模式的任意組合。
常見的導航模式有按鈕組合、標簽菜單、宮格布局、列表視圖等。
導航模式的主要作用是，告知用戶當前在網站的位置，以及接下來到哪些頁面，這有點像地圖 APP。
上面這張圖中，包含了幾種導航組件呢？
搜索，是各大電商 APP 常見的交互模式。
搜索模式允許用戶輸入關鍵詞，然后系統返回搜索結果。
打個比方，這有點像在 Navicat 中寫了一段 SQL 查詢。
SELECT id, name, age
FROM users
WHERE age > 18
這段 SQL 的作用是，查詢大于 18 歲的用戶信息，包含序號、名稱、年齡。
常見的反饋模式組件，涉及了對話框、吐司提示、氣泡提示等。
反饋模式用的比較多的場景是，告知用戶一些信息或提示，比如“輸入密碼錯了、展示訂單取消的注意事項”等。
輸入模式主要用于新數據創建，例如淘寶下單時，你新增了一個收貨地址。
打開美團叫個外賣，整個訂單創建流程，也是輸入模式。
有很多人可能會把輸入模式和編輯模式搞混。
區別它們的一個方法是，交互流程涉及新數據創建，還是改舊數據。
改數據的話，那就是編輯模式。
我們在看到一些干貨文章，或好用的小程序想要轉發給朋友，那就要用到分享模式。
分享模式可以很簡單，也可以往復雜了做，看產品階段去實現。
引導模式和反饋模式有點像，都是展示特定的內容。
那怎么分辨它們呢？
以設計師視角來看，反饋模式需要用戶觸發，系統被動顯示。
而要讓用戶特別關注的信息，那就是引導模式。
模式，即抽象的規律。——好夕雷
說了這么多概念和例子，你是不是對模式的認知更清晰了呢？
模式運用在產品領域，就有了這 7 種交互模式，分別是“導航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導模式”。
如果學會了模式，那么無論生活還是工作，相信你一定能輕松應對、事半功倍。
本文由 @好夕雷 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
關于動效節奏的問題，有什么好的方法可以提供？這算一個常見疑問，我總結收到的問題反饋，基本都是「動畫節奏應該怎么做呀」「做完的動效一卡一卡的感覺不流暢怎么整」，索性借著今天的契機，我整理了這樣一篇主題文章，分享我對于動效節奏的一點經驗與思考，僅代表個人觀點，歡迎交流探討～
在當今數字時代，動效設計已然成為了產品和服務中不可或缺的一部分。
無論是手機APP、網頁界面還是智能設備，動效設計或是引導用戶操作的微小提示，或是增強用戶體驗的交互反饋，又或是塑造品牌形象的視覺元素，它們都以其獨特的方式，為用戶帶來更加直觀、生動的互動體驗，因此流暢的觀感體驗很重要。
提到流暢度，那動效節奏的重要性不言而喻。
動效節奏，簡單來說是動態呈現中各個元素動作的速度和時長安排，它決定了動效的快慢、強弱、起伏和變化，從而影響著用戶的感知和情緒。
一個優秀的動效設計，不僅要考慮單個元素的動效表現，更要考慮整個界面的動效節奏，使界面動效更加自然、流暢，也更加符合用戶的心理預期，從而提升用戶體驗。
所以，想入門動效領域并深耕，我認為深入理解動效節奏是尤為重要的，學會如何運用動效節奏來提升用戶體驗，讓用戶在享受科技帶來便捷的同時，也能感受到藝術的魅力。
動效可以增強界面的可理解性，例如下圖中廣告推送，有一個手機圖標的旋轉動態示例，
以及多多視頻模塊中的上滑操作指引等，幫助用戶更好地理解界面功能和操作方式，從而更有效地去使用應用。
動效可以提升界面的可用性，例如上傳文件的操作，通過提供及時的反饋和指引，降低用戶的學習成本和操作難度。
動效還可以增加界面的吸引力，例如購物軟件中模擬實際鞋盒開箱的形式，展現鞋品，通過生動有趣的動效表現，提升用戶的使用欲望和滿意度。
提到動效設計，了解其背后的基本概念和原則，才是賦予動效靈魂和意義的關鍵。
這里要提到三個關鍵詞：
1）首先是時間
時間在動效設計中扮演著至關重要的角色。它決定了動畫的快慢、停頓和節奏，從而影響用戶的情感體驗。
例如，一個緩慢漸入的動畫可能傳達出優雅、穩重的感覺；
而一個迅速閃現的動畫則可能帶來刺激、緊張的感受。
2）其次是空間
空間是指動畫發生和存在的虛擬環境。在動效設計中，空間的布局、層次和透視關系都至關重要。
它們不僅影響動畫的可視性和可讀性，還影響用戶的認知和行為。
例如，合理的空間布局可以使用戶更容易理解和操作界面元素，而不合理的布局則可能導致用戶的困惑和誤操作。
3）最后是構圖
構圖是指動畫元素的排列組合和視覺平衡。
一個良好的構圖可以突出重點、引導視線，并營造出和諧、統一的視覺效果。
相反，一個糟糕的構圖可能會分散用戶的注意力，甚至引發視覺疲勞。
動效設計的目標不僅僅是實現技術上的可能性，更是為了創造出讓用戶愉悅、滿意且易于使用的體驗，在美感和技術要求之間尋找平衡點，是我認為需要不斷練習，積累總結經驗的。
在動效設計中，能讓靜態元素動起來形成生動流暢的動態效果，需要用到兩大元素：關鍵幀與動效節奏。
關鍵幀代表了在特定時間點上某個參數的值。在動效制作過程中，通過設置關鍵幀，可以控制對象在不同時間點的狀態，從而形成連續的動作。
關鍵幀就像是動效世界里的路標，它標記了在動效呈現中某些重要時刻物體的樣子。比如說，我想讓一個球跳起來，那我就得告訴電腦，在開始的時候球在地上，然后在某個瞬間球在空中最高點，最后又回到地面；這些重要的時刻就是關鍵幀。
關鍵幀之間的變化可以是線性的，也可以是曲線的，后者可以創造出更為自然和復雜的動態效果。
線性或曲線變化，統稱動效節奏，是指在一定時間內，通過一系列有規律的動效元素的組合和排列所產生的節奏感。
常見的四種動效節奏形式有 勻速、緩入、緩出、緩動。
1）勻速（Linear）
勻速運動指的是物體在動畫過程中速度保持不變的運動方式。這種節奏簡單直接，沒有加速或減速的過程。
上面的小球彈跳呈現的效果，就是勻速運動，有些機械，缺乏實際場景中的動感。
在AE中，默認的菱形關鍵幀之間就是勻速運動，例如生活中常見的時鐘，上圖中鐘表秒針旋轉是平穩、機械的，這就是一個典型的勻速運動。
2）緩入（Ease In）
緩入是指物體在動畫開始時速度較慢，隨著時間的推移逐漸加速到最大速度的運動方式。
一般元素離開畫面或者物體加速階段使用，例如上圖中摩托車駛出畫面的部分、進度條加載緩慢到快速的節奏等，它可以增加動畫的真實感和生動性。
在AE中，以圓球為例，從空中下落的過程，就可以使用緩入的加速曲線；
調出圖表編輯器，調節曲線弧度如圖「速度圖表」所示，使曲線開始時平緩，越靠近出點速度逐漸上升，完成加速運動，此時結尾有些生硬。
加一個小知識點：曲線調節有兩種形式，一種為速度圖表，一種為值圖表；
速度圖表顧名思義，看曲線的弧度，圖中球的開始入點曲線弧度較緩，結尾出點曲線斜度較大，則代表加速度節奏變化；
值圖表分別代表X，Y軸曲線變化，如圖中球的Y軸位置發生變化，因此對應綠色線條的曲度變化是球體的動效節奏變化，下落過程中加速，則區別于前半段的直線，入點平滑，出點更陡峭。
3）緩出（Ease Out）
緩出與緩入相反，是指物體在動畫結束時速度逐漸減慢直至停止的運動方式，如元素入畫、人物行走至停下等，它能給人一種平滑和自然的結束感，是先快后慢的減速運動。
同樣以圓球為例，球落地后反彈的過程，就可以使用緩出的減速曲線；
調出圖表編輯器，調節曲線弧度如圖「速度圖表」所示，使曲線結束時平緩，調節出點的手柄桿，完成減速運動。
4）緩動（Ease In Ease Out）
緩動是最接近真實世界物體運動規律的一種方式，適用于大多數動態場景，尤其是那些需要表現自然、流暢動作的畫面呈現。
緩動曲線結合了緩入和緩出的特點，物體在動畫開始時速度緩慢上升，中間達到最高速度，最后在結束時速度逐漸降低。
示例繼續完善小球的曲線節奏，我想讓它看起來更順滑、更有彈跳感覺，通過球的大小比例（縮放）的變化，增加模糊變化的細節，這樣球跳起來的動作就會像真實世界里那樣，既有起跳的沖勁，又有落地的緩沖，整個過程更加生動有趣。
在AE中，緩動曲線沒有具體的數值，多數時候需要結合不同場景表達，去嘗試不同的曲度形式，通過反復預覽檢驗，找到自己滿意、適合畫面感呈現的形式。
日常積累動效節奏，我會分析電影或MG動畫中的經典鏡頭，比如角色走路、跑步的動作呈現，元素的出入場變化，以及自然界中的運動現象，如樹葉飄落等。
多做分鏡腳本的拆分練習，多臨摹實踐，就可以逐漸掌握常見的運動規律，自己在做設計內容時，也可以更清晰知道怎樣的節奏更適合當下場景呈現。
總的來說，創造流暢體驗對于動效設計來說還是很重要的，而要實現這一目標，掌握并靈活運用好動效節奏則是必不可少的手段之一。
萬變不離其宗，多看、多思考、多練習，通過實踐去總結復盤規律、梳理SOP流程，整理出一套適合自己記憶、使用的方法論與行動標準，提高自己對動態的感知，以及節奏力的把控，也能有效提升工作效率。
「想不如做，知行合一」，想讓學到的知識和技巧，生長到自身，唯一要做的就是立馬行動！在做的過程中解決一個個卡點，迭代出更適合自己的方法。
作者：Shirley_雪
本文由 @Shirley_雪 原創發布于人人都是產品經理。未經作者許可，禁止轉載
題圖來自 Unsplash，基于CC0協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
在當今這個信息爆炸、競爭激烈的市場環境中，用戶體驗已成為企業核心競爭力的關鍵因素。在這一背景下，我們啟動了一項名為“簡單設計”的專項優化項目，旨在通過化繁為簡，重塑用戶體驗，提升B端產品的用戶滿意度和忠誠度。
在當今信息爆炸、競爭白熱化的市場大環境下，企業核心競爭力的內涵已悄然變遷，不再單純聚焦于產品或服務本身，而是將重心逐漸傾向于用戶體驗這一關鍵維度。
于招聘領域而言，B 端產品作為銜接招聘方與求職者的關鍵紐帶，其設計的合理性、操作的便捷性以及語義的明晰度，猶如三把密鑰，直接決定著用戶滿意度與忠誠度的高低。
今年，58招聘B端開啟了“簡單設計”專項優化的征程，作為項目主導設計師，我全程深度參與了從調研、剖析、設計至實施的各個環節，在這一過程中，深刻領悟到設計對于提升用戶體驗的非凡意義。
項目伊始，我們即對58招聘B端產品的現有用戶展開了全面且深入的調研行動。
我們深知，唯有精準洞悉用戶需求與痛點，方能打造出契合用戶期望的產品。
為此，設計團隊全員深入一線，置身于用戶的實際使用環境，與各行業用戶進行深度的面對面溝通。同時，我們運用多種調研方法，包括問卷調查、用戶訪談、數據分析等，多維度、全方位地搜集用戶信息。
在調研過程中，一系列影響用戶體驗的關鍵問題浮出水面。
其中，操作繁瑣成為用戶反饋最為突出的問題。眾多用戶抱怨，在使用B端產品時，完成諸如客戶認證、發布職位、篩選簡歷等簡單任務，往往需歷經多個復雜步驟。
這種繁復的操作流程，不僅耗費大量時間與精力，更易引發用戶的挫敗感和不滿情緒，宛如一道無形的屏障，拉遠了用戶與平臺的距離。
此外，語義晦澀難懂也是普遍存在的問題。
B端產品中的專業術語和復雜表述，對于非專業用戶而言，仿若天書，極大地增加了學習成本，甚至可能導致誤解和誤操作，嚴重損害了用戶體驗。
這些問題的根源，經深入分析，與傳統產品設計理念的局限、對用戶體驗的忽視以及用戶研究與溝通的不足密切相關。
基于此，我們決定從這三個層面入手，重塑設計思路，以提升用戶體驗。
在扎實調研的基礎上，我們對問題進行了抽絲剝繭般的分析。
我們深刻意識到，若要從根本上解決用戶問題，必須對設計理念進行大刀闊斧的革新。
首先，我們毅然摒棄傳統的以產品為核心的設計理念，轉而擁抱以用戶為中心的設計哲學。用戶作為產品的最終使用者，他們的需求和體驗是產品設計的靈魂所在。因此，我們將用戶需求與體驗置于首位，重新審視產品的功能布局、操作流程以及語義表達等各個維度。
其次，我們將用戶體驗的重視程度提升至前所未有的高度。用戶體驗，作為產品競爭力的核心要素，貫穿于設計的全過程。我們通過簡化操作流程、優化界面布局、明晰語義表述等手段，致力于提升用戶的操作效率和滿意度，打造流暢、高效的用戶交互體驗。
最后，我們強化了用戶研究與溝通機制。深知只有深入了解用戶需求與痛點，才能設計出符合用戶期望的產品。因此，在與用戶的每一次接觸中，我們都用心收集他們的意見和建議，為產品設計與優化注入源源不斷的智慧源泉。
基于對問題的深度剖析，我們開啟了具體的設計工作。
設計，作為解決問題的關鍵環節，需要我們充分施展設計師的專業素養與創新能力，以用戶為中心，對招聘B端產品進行全方位的重塑。
在操作流程優化方面，我們對現有流程進行了細致梳理和深度優化，大刀闊斧地去除了冗余步驟和環節，使操作流程如行云流水般簡潔明了。
例如，在發布職位這一關鍵功能上，我們簡化了信息填寫步驟，并貼心地提供模板和自動填充功能，極大地降低了用戶操作難度和時間成本，讓用戶在操作過程中感受到前所未有的便捷。
在語義表述清晰化上，我們對界面上的專業術語和復雜表述進行了精心簡化和優化，使其通俗易懂且易于記憶。同時，對重點文案和標題進行突出處理，便于用戶快速抓取關鍵信息，清晰知曉每一步操作的目的，輔助用戶迅速決策，從而進一步提升用戶體驗。
在界面布局精簡方面，我們對界面進行了精心雕琢，去除了繁雜的信息和多余的按鈕。通過合理的布局與色彩搭配，提高了界面的可讀性和美觀度，營造出簡潔大氣的視覺體驗。此外，增加搜索和篩選功能，使用戶能夠快速定位所需信息，進一步提升操作效率和滿意度。
在整個設計過程中，我們充分發揮設計師的專業能力和創新精神，運用多種先進的設計方法和工具，如用戶畫像、設計原型、用戶體驗測試等，確保設計方案的科學性和有效性。同時，與產品經理、開發人員等團隊成員緊密協作，形成強大的合力，共同推動項目順利前行。
設計完成后，項目進入實施階段。
我們深知，實施是設計落地生根的關鍵一步，需要團隊充分發揮協作精神和強大執行力，確保項目順利推進。
在實施過程中，我們采用敏捷開發方法，通過持續迭代和優化，不斷提升產品的功能和性能。定期收集和分析用戶反饋意見，及時對產品進行調整和改進。同時，加強與用戶的溝通，通過多樣化的用戶調研方式，積極捕捉用戶的每一個意見和建議，為產品的持續優化提供堅實支撐。
經過不懈努力，“簡單設計”專項已取得顯著成效。用戶操作效率和滿意度大幅攀升，產品留存率和口碑亦顯著改善。然而，我們明白，設計優化是一場永無止境的修行。隨著用戶需求的持續演變和技術的不斷革新，我們需持續探索與創新，以維持產品的競爭力和生命力。
展望未來，我們將堅定不移地秉持以用戶為中心的設計理念，持續優化產品功能和性能。同時，進一步加強用戶研究與溝通，通過持續收集和分析用戶信息與意見，不斷改進和優化產品設計。我們堅信，在全體設計師的共同努力下，58招聘B端產品將為用戶帶來更便捷、高效、愉悅的使用體驗，成為招聘領域的璀璨之星。
總之，“簡單設計”專項不僅是產品設計層面的優化與提升，更是對用戶需求深度洞察與積極回應的生動實踐。未來，我們將繼續堅守這一理念，為用戶創造更多價值與驚喜，同時不斷提升自身設計能力與創新力，為產品的持續優化與創新注入源源不斷的動力。
設計團隊：老李頭、王丹、溫正遠、崔秉鑒、趙德馨、陳浩然、劉靜頤、劉春明
本文由人人都是產品經理作者【58UXD】，原創/授權 發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基于 CC0 協議。
蘭亭妙微(www.syprn.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 協議。
蘭亭妙微(www.syprn.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 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
SUS 全稱 System Usability Scale ，系統可用性量表。SUS最初是Brooke于1986年編制，可以科學地量化用戶體驗，用于完成一系列任務場景后，對產品或系統整體宏觀的感知可用性測量。
翻譯過后可以得到下面的中文表，參與者在使用產品后對每個題目下面打鉤來對產品進行5點評分。（小伙伴們可自行保存）
SUS提供整體可用性評估度量，由10個題目組成，奇數項為正面陳述，偶數項為反面陳述。
第4，5，10三項構成的子量表為“有效性”（Effectiveness）&“易學性”（Learnability） ；第2，3，7，8四項構成的子量表為“使用效率”（Use Efficiency）&“可用性”（Usability）；第1，6，9三項構成子量表“滿意度”（Satisfaction）。
SUS適用范圍廣泛，產品新舊版本迭代之間對比，同類型競品之間對比，同一產品不同終端之間對比均可使用?？刹捎镁€上線下問卷調研的方式，簡單高效的采集真實用戶反饋。避免在初期過早的關注細節。
當收集好用戶問卷反饋過后，步驟如下：
1. 對于奇數序號的問題，將其得分減1；（比如第1題分數為4，得分為4-1=3分）
2. 對于偶數序號的問題，將其得分被5減去；（比如第2題分數為3，得分為5-3=2分）
3. 將所有問題最后的得分加在一起，然后乘以2.5；（每個題目的得分范圍記為0~4，最大值為40，SUS可用性得分的范圍在0~100，換算后乘以2.5）
4. 計算出的結果即為產品的SUS可用性得分。
Tips 注意事項：
1. 填寫之前不要進行總結或討論；
2. 應當要求用戶快速完成各個題目，不要過多思考；
3. 第二題和第六題對于參與者可能難以理解，需要解釋清楚；
4. 如果用戶因為某些原因無法完成其中某個題目，就視為用戶在該題上選擇了中間值。
SUS分數等級與百分等級的區別：
我將其翻譯過后得到中文表，可以大體上感知得出的SUS分數對應的用戶可接受范圍。
更加細化的SUS用戶感知，可參照SUS分數曲線分級范圍表：
注意到這里SUS分數等級與百分等級的區別。對照SUS分數曲線分級范圍表，如果你的SUS分數為68，說明你的產品比市面上50%的產品可用性要好。也就是說這個產品的用戶體驗算是合格了，表明需要進行較小的改進。50%中值點對應SUS分數68。（（59-41）/ （71-65）= 3 故中值點為65+10/3≈68 ，68分是均值，因此對應百分比是50%。）
1. 量表公開免費，題目簡單，只需參與者打分，實施便捷，操作簡單；
2. 適用范圍廣泛，產品初期測試驗證，競品分析，新舊版本對比等等；
3. 研究證明SUS在樣本量有限時，可以最快達到效果，可信度系數高；
4. 快速宏觀有效區分可用系統（產品）和不可用系統（產品），避免在初期過早的關注細節；
5. 當團隊內產生分歧時，SUS讓更多的人員參與代替少數意見領袖說了算的形式，定量不追求定性。
6. 小樣本量時依然呈現高度的內部一致性，產生真實可靠的反饋結果。
作者：設計師豆漿
鏈接：https://www.zcool.com.cn/article/ZMTI4NTgyMA==.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
在數字產品設計日新月異的今天，打造卓越用戶體驗已成為產品成功的關鍵。這篇文章精準解析了UX設計的六大核心支柱，從用戶研究到無障礙設計，為讀者提供了全面且實用的設計框架。
開啟用戶體驗設計探索之旅，首要任務是全面掌握其核心構成要素——這些是構筑絕佳用戶體驗的基石需求。事實上，在蘋果、微軟和谷歌等設計推動型科技巨頭中，這些因素的關鍵性是不言而喻的，甚至因此催生了專屬職業與角色的誕生。在這六大核心維度中，有一個更是脫穎而出，以至于一個全新的職能部門因此得以形成。接下來，讓我們深入剖析這些零部件如何共同定義卓然出色的用戶體驗設計版圖及行業切入點。
在深入分析用戶體驗設計的六大核心要素之前，我們需要先厘清其核心內涵。從本質上看，用戶體驗設計是一門創造愉悅且功能強大的體驗藝術，確保產品既具有效性又兼具高效性、易用性和用戶滿意度。它涵蓋了一個整體性的設計循環，通過不同維度的優化來最終實現這些目標?？梢园延脩趔w驗設計比喻成一把“統籌性的大傘”，其下輻射的每個要素都是推動卓越體驗構建的重要一環。本篇文章將沿著這把傘的思維體系，逐步探索這些不可或缺的構建模塊及其影響力。
用戶研究（亦稱 UX 研究）之所以能在設計領域占據重要地位，其原因顯而易見——它是產品設計的一大核心要素。隨著其價值的日益凸顯，越來越多的企業開始設立專門的用戶研究團隊。這一趨勢背后的驅動力是什么？源于對用戶洞察的深入理解直接決定了能否創造出卓越的產品體驗。在探索方案的過程中，用戶研究永遠都是優先級最高的起點。這個關鍵過程的核心在于定義所謂的“用戶”——通過全面梳理他們的使用體驗，挖掘其需求、期望與操作行為，從而描繪出清晰的用戶畫像。這正是用戶研究的精髓之所在。更具體地說，用戶研究是圍繞用戶的需求、目標、行為模式以及心理動機，所展開的系統化調研與分析。執行用戶研究有多種專業化方法工具，包括深入訪談、結構化調查、現場可視采樣以及定性和定量化的可用性評估測試，每一步都旨在深刻理解目標人群，優化體驗閉環。
交互設計是產品設計中的關鍵環節，此階段負責精細化用戶與系統之間的互動路徑與體驗設計。設計師需要梳理并規劃用戶操作觸發的系統響應——例如按鈕點擊后的動作反饋。從提示的生成到任務處理的閉環，每一個交互流程都經過精致打磨。對交互表現的設計需通過深度用戶研究與高頻次的可用性測試進行不斷優化，以確保全流程交互體驗既順暢又高效。
我的清單中提到的第三項是信息架構，這是在設計過程中理解內容與功能的關鍵環節。它的核心是對內容和功能進行科學的分類組織和標記，以確保產品的功能與結構清晰易懂，能夠有效地滿足不同用戶的認知需求。可以把信息架構理解為產品的結構藍圖，為用戶提供在界面元素間高效切換和操作的導引路徑。它的價值在于將內容與功能資源以邏輯和體系化的方式呈現。那么如何精準定義哪些要素歸屬于頂層導航、次級導航或細化導航？此時，一種名為“卡片分類法”（Card Sorting）的用戶體驗研究方法便派上了用場，它幫助設計師優化信息層級，制定更具洞察力和用戶思維的導航設計決策。
*卡片分類法：卡片分類法是一種用戶體驗研究方法，用于幫助設計師理解用戶如何組織和分類信息。參與者通過將內容項（如網站頁面或功能）進行排序和分組，提供了關于信息架構的見解。其主要步驟為：首先，每張卡片上寫一個內容項；其次，招募目標用戶；再次，用戶根據理解將卡片分組并命名；最后，識別共同的分類方式。此方法有助于優化網站和應用的導航結構，提高用戶體驗。
接下來重點分析用戶界面設計環節，也就是我們通常所提到的視覺設計，這是 UX 設計中至關重要的一環，主要關注產品的視覺展現層。UI 設計師的職責在于打造具有吸引力且直觀自然的視覺體驗。他們通過對色彩體系、排版字體、圖形視覺以及插畫風格的細膩打磨，為產品的整體視覺編碼賦予獨特且一致的品牌形象。
UX 寫作，亦稱微文案，是文案寫作領域下的一個細分學科，聚焦于數字產品中的文本設計。UX 寫作者的核心職責是優化數字界面中的文案，不僅要貼合用戶需求，還要顯著增強整體用戶體驗。他們善于運用精準而貼近用戶心智的表達方式，撰寫既通俗易懂又情感共鳴強的界面文案，從而最大化提升用戶的可讀性與互動效率。
最后，我們需要聚焦于可訪問性——這是確保所有用戶（包括有特殊需求的群體）都能高效且無障礙地使用產品的核心要素。作為設計從業者，共情能力是我們設計哲學的重要基石。但這種共情不僅局限于通用用戶，還要涵蓋那些需要特殊支持的用戶群體。在每一次 UI 語義和交互設計中，我們必須以可訪問性優先，確保無論用戶的能力如何，都能獲得最佳的可讀性和充分的視覺對比體驗，真正實現一視同仁的包容性設計。
作者：Abhi Chatterjee
譯者：李澤慧
審核：李澤慧
編輯：丁怡豪
本文由人人都是產品經理作者【TCC翻譯情報局】，原創/授權 發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基于 CC0 協議。
蘭亭妙微(www.syprn.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 協議。
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
在做產品設計的時候，UI界面更多是由設計師完成，產品僅是提供界面元素和布置，其他的由設計師發揮。但如果產品能了解更多設計相關的知識，在和設計師探討、分析時會更有針對性，也會讓產品的工作顯得更為專業。
在當今數字化時代，我們與各種移動應用、網頁和軟件界面打交道，圖標就像是這些界面的明星。它們小巧玲瓏、獨具特色，扮演著連接用戶與界面的重要角色。本文將帶您深入了解UI圖標的定義、作用以及在用戶界面中的重要性。
A. UI圖標的定義
UI圖標是指用簡潔明了的小型圖形符號來表示特定功能、操作或信息的設計元素。圖標通過簡單的形狀和圖像，向用戶傳遞信息和功能，并在界面中起到重要的導航和標識作用。
B. UI圖標的作用
C. UI圖標在用戶界面中的重要性
UI圖標在用戶界面設計中扮演著不可或缺的角色，其重要性體現在以下幾個方面：
UI圖標設計是用戶界面的重要組成部分，它們不僅可以幫助用戶更快地理解和使用應用程序或網站，還可以增強整體視覺效果。為了設計出高質量的UI圖標，設計師需要遵循一些基本原則和要素。
A. 獨特性和可識別性
設計具有獨特特征的圖標 UI圖標應該具有獨特的特征，使其能夠與其他圖標區分開來。設計師可以通過使用不同的形狀、顏色和風格來實現這一目標。同時，圖標的形狀和顏色也應該與應用程序或網站的主題和品牌形象相一致，以幫助用戶更快地識別和理解圖標的功能和意義。
避免與其他圖標混淆 為了避免UI圖標與其他圖標混淆，設計師應該確保圖標的形狀、顏色和風格與其他圖標有足夠的區別。如果圖標的形狀和顏色與其他圖標過于相似，用戶可能會難以區分它們的功能和意義，從而影響用戶的使用體驗。
B. 簡潔性和清晰性
追求簡潔的圖標設計 簡潔的圖標設計可以幫助用戶更快地理解和使用圖標。設計師應該盡可能地簡化圖標的形狀和顏色，避免使用過多的細節和復雜的形狀。簡潔的圖標設計還可以幫助應用程序或網站的整體視覺效果更加統一和和諧。
避免過度復雜化的細節 過度復雜化的細節可能會使圖標變得過于復雜和難以理解。設計師應該避免使用過多的細節和復雜的形狀，以確保圖標的簡潔性和清晰性。同時，設計師也應該確保圖標的形狀和顏色足夠明確，以便用戶能夠輕松地識別和理解圖標的功能和意義。
C. 一致性和統一性
維護整個UI界面的一致性風格 UI圖標應該與整個UI界面的風格保持一致。設計師應該確保圖標的形狀、顏色和風格與應用程序或網站的主題和品牌形象相一致。這樣可以幫助用戶更快地識別和理解圖標的功能和意義，同時也可以增強應用程序或網站的整體視覺效果。
使用相似的線條、顏色和風格 為了實現一致性和統一性，設計師應該使用相似的線條、顏色和風格來設計圖標。這樣可以使圖標與整個UI界面的風格保持一致，同時也可以使圖標的形狀和顏色更加和諧統一。
D. 可視化傳達
明確圖標所代表的含義和功能 為了確保用戶能夠輕松地理解和使用圖標，設計師應該確保圖標的形狀和顏色能夠明確地傳達
使用適當的形狀、符號和顏色傳達信息 為了確保圖標能夠明確地傳達信息，設計師應該使用適當的形狀、符號和顏色。
例如，一個圖標可能需要使用一個圓形作為基本形狀，同時使用一個代表性的符號來表示它的功能和意義。
同時，設計師也應該確保圖標的形狀和顏色與應用程序或網站的主題和品牌形象相一致，以幫助用戶更快地識別和理解圖標的功能和意義。
E. 可縮放性和適應性
使用矢量圖形實現圖標的可縮放性 為了確保圖標在不同屏幕和設備上的可用性，設計師應該使用矢量圖形來實現圖標的可縮放性。
矢量圖形是一種基于數學公式的圖形，它們可以在不失真的情況下進行任意大小的縮放。
這意味著：即使圖標被放大或縮小，它們的形狀和顏色也不會發生變化。
確保在不同屏幕和設備上的可用性 為了確保圖標在不同屏幕和設備上的可用性，設計師應該考慮圖標在不同分辨率和屏幕尺寸下的表現。
例如，設計師應該確保圖標的大小和形狀適合不同屏幕和設備的顯示。
同時，設計師也應該確保圖標的顏色在不同的屏幕和設備上都能夠保持一致，以幫助用戶更快地識別和理解圖標的功能和意義。
UI圖標設計需要遵循一定的流程和技巧，以確保圖標的高質量和可用性。
以下是一些常用的設計流程和技巧：
A. 需求分析和功能定義
在開始設計之前，設計師需要了解UI圖標的使用場景和目的。這可以幫助設計師確定圖標所代表的含義和功能，以確保圖標的準確性和可用性。
B. 創意和草圖階段
在進行創意和草圖階段，設計師應該進行創意思維和頭腦風暴，以產生出多種不同的設計方案。同時，設計師也應該從簡單的草圖開始構思圖標設計，以確保圖標的可行性和可實現性。
C. 細化和完善設計
在細化和完善設計階段，設計師應該使用矢量工具進行圖標設計，并重點關注細節和清晰度的提升。這可以幫助設計師創建出具有獨特特征的圖標，并確保圖標的可縮放性和適應性。
D. 反饋和優化
在反饋和優化階段，設計師應該向用戶和團隊收集反饋，并根據反饋進行圖標的優化和調整。這可以幫助設計師確保圖標的準確性和可用性，并根據用戶的需求和期望進行調整和優化。
UI圖標設計是一個重要的設計領域，它可以幫助用戶更快地理解和使用應用程序或網站。以下是一些成功的UI圖標設計案例和分析。
A. 探索成功的UI圖標設計案例
成功的UI圖標設計案例可以幫助設計師了解和學習一些設計最佳實踐和技巧。成功的圖標有很多以下只列舉兩個圖標設計案例：
B. 分析圖標設計背后的原理和決策
成功的UI圖標設計案例背后都有一些共同的原理和決策。
以下是一些分析圖標設計背后的原理和決策的方法：
A. 總結UI圖標設計的重要性和原則
UI圖標在用戶界面中扮演著重要的角色，它們不僅能夠傳達信息和功能，還能夠增強用戶體驗和界面的美感。以下是一些重要的UI圖標設計原則：
B. 鼓勵設計師繼續探索和發展圖標設計技能
圖標設計是一個不斷發展和演進的領域。鼓勵設計師們繼續學習、實踐和探索，通過不斷嘗試新的技術和方法，提升自己的設計能力。以下是一些建議：
UI圖標設計在用戶界面中起著重要的作用。通過掌握設計原則和實踐技巧，繼續學習和發展設計技能，我們將能夠創造出令人印象深刻的UI圖標作品，提升用戶體驗和界面美感。不斷探索和挑戰自己，成為一名卓越的圖標設計師！
本文由 @Esc 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash，基于 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
春節是一個很大的流量池，經過一年時間的勞累，人們有了更多的閑暇時光，這是企業也是內容創作者獲取流量的絕佳時機。
這個春節，我被各大產品的情感化設計萌化了，設計細節太貼心了，極大的增加了產品與用戶的粘性，各大廠都推出了既承載千年文化重量，又具備數字原生形態的新春物種，花樣可謂是百花齊放。
各大廠都紛紛從視覺、社交互動、內容創作展開想象，設計了豐富多彩的春節用戶體驗，下面讓我們來開開眼福，一睹他們的風采，同時也順便學習下，作為設計師的我們有哪些創意出發點？
春節，作為中國最重要的傳統節日，不僅承載著深厚的文化內涵，更是一場全民參與的消費盛宴和社交狂歡。在這個特殊的時期，人們的注意力高度集中，圍繞春節展開的各種活動，無論是線上還是線下，都呈現出爆發式的增長。
從電商數據來看，2025年全國網上年貨節期間，全國日均網上零售額同比增長6.2%，累計網絡零售額更是突破7000億元人民幣，同比去年增長9.8%，再創歷史新高。
抖音電商“春節不打烊，財神送福氣”活動中，全域日均支付GMV同比增長56.02%，直播日均支付GMV同比增長46.57%。
快手本地生活“新春團購節”GMV同比大漲117%，新線城市日均支付用戶數環比增長234%，這些驚人的數據，無一不彰顯著春節期間電商消費的強勁活力。
社交平臺上同樣熱鬧非凡。除夕及春晚期間微博活動用戶達2.97億，全站互動超3.1億次，4656萬用戶除夕贏得福運紅包，全國年味相關話題閱讀量破102億。
快手在2025年春節期間，平臺日活用戶規模創歷史新高，春節活動相關視頻總播放量超2000億，直播總觀看量高達150多億，“搖發財樹”紅包活動中，用戶一共搖了57億次紅包。
如此龐大的流量和用戶注意力，為品牌和商家提供了絕佳的展示舞臺。在這個信息爆炸的時代，誰能在春節期間成功吸引用戶的注意力，誰就能在市場競爭中搶占先機。
一個精心設計的廣告、一場別出心裁的互動活動，都有可能在這個流量高峰中迅速傳播，收獲海量的關注和曝光，實現品牌知名度的提升和產品銷量的增長。
下面就讓我們看看各大廠在春節期間都找到了哪些設計機會點？
設計思考：
設計思考：
設計思考：
設計思考：
設計思考：
登錄元夢之星和洪恩識字，感覺就像打開了一場煙花秀的視覺盛典，特別是洪恩識字，效果特別的炸裂，數字煙花秀做的特別吸睛。
這樣的動效視覺表現很好的與用戶產生了情感共鳴，拉近了彼此的距離，增加了節日的樂趣。
設計思考：
支付寶在春節期間推出了一款很驚艷的皮膚，畫面中仙氣飄飄，一改之前單調的純色背景，將有中國韻味的敦煌壁畫文化搬上了熒屏，增添了很多喜慶的氛圍和中國味，養顏又養心。
設計思考：
騰訊QQ在過年期間，推出了一個領Q幣的活動還挺有意思，小企鵝穿著厚厚的衣服，手中抱著一個福袋在奔跑，通過這樣的動效引導用戶去領金幣，非常的有意思。
設計思考：
Banner是很好進行情感化設計的窗口，也是打造春節氣氛的絕佳寶地，那么這個春節它也一定不會缺席。
設計思考：
今年的微信紅包，新增了一個隨機的拜年紅包功能，可以隨機的派送紅包金額，并且在紅包的封面上可以長按，說出你想跟對方說的寄語，這個小小功能的精進，讓發紅包這個事情也變得更加有溫度。
微信紅包，還有一個新的創新點，小小的紅包封面變成了產品的宣傳欄，比方說廣汽埃安的這個紅包封面，它既是拜年的寄語欄，又是絕佳的產品宣傳欄，配合動效，特別的酷。
設計思考：
百度地圖在這個春節心系百姓的民生問題，知道人們在這個節日有旅游、探親、出行的需求。
百度地圖開發了人口遷徙監測功能、交通擁堵實時監控功能，讓人們在出行時避開高峰路段，以及人口扎堆的旅游景點。
更有后方快車通過的提醒功能，當后方來了一輛很快的車時，百度地圖也會進行語音播報，提醒車主這時不能隨便變道。
當自己體驗到這個功能的時候，感覺到這不僅僅是簡單的功能了，更是一份對用戶的愛，以及對生命的敬畏。
設計思考：
過年期間，是重溫感情的好機會，朋友間彼此的問候還是很有必要的，那么如何問候，是簡單的文字，還是用更有創意的視頻畫面去表達呢？
發現我們考慮的，很多產品都已經幫我們想好了，比方說訊飛智作、剪映就推出了很多拜年視頻的模板供用戶自己去選擇加工使用。
很大程度提升了用戶制作視頻的效率，也很大程度提升了產品的粘性，為用戶多考慮一點，用戶對產品的依賴也會更多一點。
設計思考：
發現支付寶在與用戶社交互動這塊做的非常的好，每逢大的節日都會有與大眾互動的運營活動。
比方說元宵節的點福卡活動，萌萌的元宵，再配合微動效，以及引導用戶去點擊的手勢動效，無不是在號召用戶參與進來。
支付寶的五福活動，很有意思，入口的左右兩邊放置一個帥哥和靚妹在接紅包，畫面很有互動感，歡樂性十足，讓人也忍不住去參與集?？ǖ幕顒?。
春節是消費高峰期，人們有購置年貨、禮品等需求，此時也是各大品牌搞營銷活動的好機會。
設計思考：
設計思考：
酷我音樂在過年期間，把皮膚設計當成了一種增加會員的刺激手段，一旦成為會員就能享受跟普通用戶不一樣的頭像裝飾。
連音樂播放頁的皮膚也會有更多選擇，可以選擇年味十足的播放頁，這讓成為會員的人有一種偏愛的感覺，很不錯的促銷手段。
產品既能賺到錢，又能滿足一些用戶的需求，多好的共贏方式，擁有著健康的成長生態。
在阿里UCAN年度設計趨勢報告中，著重強調了設計在商業場景里對用戶行為的關鍵影響。在春節這一特殊時期，流量高峰帶來海量用戶，此時設計的價值尤為凸顯。
報告指出，隨著技術的發展，設計已從單純的視覺美化，轉變為提升用戶體驗和驅動商業增長的核心力量。
以春節紅包設計為例，具備按鈕動效的設計能極大吸引用戶注意力。從心理學角度來看，動態元素更容易刺激用戶的視覺神經，引發他們的好奇心和探索欲。
這與UCAN報告中提到的利用動態設計增強用戶交互體驗的理念高度契合。數據顯示，這種設計使紅包打開率提高了30%，直觀地體現了優秀設計在春節流量高峰下，對提升用戶參與度的顯著效果。
在電商頁面設計方面，UCAN報告強調簡潔直觀且富有創意的界面設計，能有效引導用戶行為。
春節期間，電商平臺流量劇增，那些依據這一理念設計的頁面，通過合理布局商品展示、運用鮮明的春節色彩元素，以及提供便捷的購物流程，成功吸引用戶點擊，提升了商品點擊率和購買轉化率 。
這不僅印證了報告中關于設計要貼合用戶心理和行為習慣的要點，也再次證明了在流量高峰時，優秀設計對商業轉化的巨大推動作用。
微信團隊發布《微信里的賽博年味兒》報告顯示，自制紅包封面玩法流行，春節期間微信里誕生了1億+款用戶創作紅包封面，約3.9億人收到此類自制封面紅包。
微信“送禮物”功能中，書籍品類送禮訂單量環比增長10000%+，收到禮物數目最多的省份前三甲是廣東省、山東省、浙江省。
看到這份趨勢報告，我驚呆了，挖掘一個符合用戶需求的產品功能，能帶動海量用戶的黏性和活躍，不得不說，微信自制紅包的這個功能開發的太好了。
作為設計師，以前只在意產品的視覺和皮膚，沒有站在一個多維的角度去看待一件事情以及背后的邏輯，發現寫作讓我思維更開闊，視角更全面，想事情想的更清楚，看問題看的更明白，感謝這一年來自己筆耕不輟，一直在精進的路上。
作者：姝斐suphie，公眾號：姝斐
本文由 @姝斐suphie 原創發布于人人都是產品經理。未經作者許可，禁止轉載
題圖來自作者提供
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
藍藍設計的小編 http://www.syprn.cn
