<li id="g3zqm"></li>
設計組件庫是提升設計效率和一致性的重要工具，但如何在頻繁迭代和動態調整中高效賦能業務設計交付，一直是行業面臨的挑戰。蘭亭妙微UI設計公司，分享了他們在設計組件庫建設中的新思考和實踐，供大家參考學習。
本文將分享我們對于“什么是好的設計組件”的看法，并給出一種搭建復雜組件的實用思路。我們還會從資產消費的角度，提供一些優化建議。雖然過程中會涉及不少基于Figma軟件的操作細節，但核心思路就像一把“萬能鑰匙”，無論在哪個設計平臺都行之有效，希望這些內容能給廣大設計師們帶來一些新的啟發。
從網上搜索設計組件，我們能找到各種對外公開的設計組件庫，同樣還有不少或概括或詳細的文章，手把手教你“如何搭建一個好的設計組件庫”，但這些方法論很少探討面對C端組件頻繁增改、設計規范動態調整，如何高效賦能業務設計交付的相關內容，但這恰恰是搜索業務面臨的關鍵問題。
搜索是一個“牽一發而動全身”的業務，每一個微小的設計細節都有可能影響各個業務的數據指標，一個“好的設計組件庫”需要以一種潛移默化的方式讓設計師掌握設計規范，完成合規的設計，從這個角度而言它應該比較「好懂」。
而作為服務于整個設計團隊的公用設計組件庫，面對每月數以萬計的調用次數，它必須保障最基本的易用性，應該非常「好用」。
同時，面對頻繁迭代，“好的設計組件”還需要保持最快的更新速度，為各個橫向團隊提供正確的樣式，從這個角度來說它還要「好維護」。
因此，「好懂、好用、好維護」是搜索設計語境下，對一個“好的設計組件”的定義。
接下來，我們將從這三個「好」入手，分享搜索設計組件庫在升級過程中的一些思考，希望能和大家共同探討。
“萬丈高樓平地起”，我們先來說說如何從零開始構建一個既符合設計規范又易于理解的設計組件。
首先，在搭建組件時，我們可以考慮采用多層嵌套的方式，即組件(Component)內部嵌套變體(Instance)。這種方式不僅能省去組件搭建和修改過程中的重復操作，甚至還能在解綁組件時，通過選中內部的子組件圖層進行解綁，大大簡化了搭建和使用雙方的操作流程。
在多層嵌套的思路下，我們可以進一步用“底層靈活、上層收斂”來指導組件的搭建。這意味著底層變體的形式足夠多樣，能夠支持大部分的狀態切換，而在上層組件搭建的過程中顯性地加強規范的指引(如規范中不允許使用的樣式不對外展示)，以降低超出規范設計的可能。
具體的搭建流程可以大致分為三步：場景收集和分析、搭建基本變體組、拓展高階變體組。
我們將通過視頻組件搭建的生動案例，具體介紹如何依據“底層靈活、上層收斂”原則來搭建組件庫，使得組件本身既足夠靈活，又能起到足夠的約束作用。
在著手搭建某類組件時，我們首先通過規范確認和場景遍歷，廣泛收集各類變體。
隨后，從我們能想到的所有維度出發，對這些變體進行細致定義。
這樣，我們就能得到一張詳盡描述組件變體性質的表格。表格的第一列依次列出變體1、變體2、變體3等，而第一行則羅列出各種維度，如寬度、比例等。
通過這種方法，我們可以將原本零散、雜亂的組件變體描述，系統地歸納整理成一張清晰明了的表格。
表格通過不同維度來唯一確定一個變體，這些維度可大致分為兩個特性和一個共性。共性指的是所有變體在這一維度上均保持一致，常見特性則涵蓋了最常見的分類性質，如寬度、高度、數量和優先級等，而業務特性則與具體業務緊密相關。
在搭建組件時，我們可以遵循「共性-常見特性-業務特性」順序，這樣的順序有助于降低理解成本，因為最符合心智的分類被置于外層，同時底層的組件又保持了足夠的靈活性，便于切換各種變量。對于業務特性，我們可以根據實際情況靈活處理，既可以將其作為基本組件的延展，也可以不將其納入組件范疇。
以視頻組件為例，我們從表格中獲取的信息如下：
據此，我們可以輕松梳理出視頻組件搭建流程的優先級：
值得注意的是，“封面槽位”是“播放狀態”中的一個圖層。根據“底層靈活、上層收斂”的原則，我們將其插入到搭建播放狀態之前。
因此，視頻組件的最終搭建流程為：
完成對視頻組件搭建的分析，我們就可以有條不紊地開始搭建組件了。
先搭建基本組件視頻組件，再用基本組件搭建高階組件。
這一步驟雖然為大家所熟知，但仍需格外注意，如配置項的設置要力求合理，也可以融入設計規范和使用規范，同時還應將一些搭建過程中的零散組件集中收納避免被調用。
關于這些具體的注意事項，我們將在后續部分進行詳細闡述。
至此我們完成了組件搭建的基本流程，一個達到及格線的視頻組件就誕生了。
據統計，優化后每次調用視頻組件將節省至少10步的點擊操作！
完成了一個基本組件的搭建后，我們可以轉換視角，從使用的角度來審視并檢查這個組件。
我們期望，從插入組件變體、切換組件配置，再到最后的解綁組件，整個流程都能縱享絲滑且穩定可靠，確保業務設計師在使用過程中獲得最佳體驗。
我們可以一步步來審視組件的使用過程。
首先是插入組件，據觀察，通常有三種方式：
①在左側的資產面板(Assets)中直接找到對應組件并插入；
②通過查閱設計規范，鎖定所需的變體后復制粘貼；
③選中一個不需要的組件，通過右側的“切換變體”面板(Swap instance)切換成所需的變體。
很明顯，在這個過程中依賴的是組件的精準搜索和快速定位。
為了提升搜索精度，我們可以從組件命名入手，采用中、英、數字結合的方式，實現模糊匹配；也可以在發布時隱藏不希望被調用的組件，以減少無用的搜索結果。
如果組件是采用前文提到的“多層嵌套”方式搭建的，我們可以添加“Preferred”子組件，這樣在切換時會優先展示這些子組件，這個功能在切換圖標時尤為實用。
對于習慣邊查閱設計規范邊使用組件的設計師，我們增加了更多實際使用的正誤案例，這些案例直觀展示了組件變體的正確選擇和使用方式，進一步降低了規范的理解成本，有效輔助設計決策。同時，我們專門維護了一個固定區域，用于平鋪展示所有組件變體。
為了確保能夠輕松點選，我們將變體放在最外層展示(即不在任何Frame、Group或Section中)。這樣能讓設計師一目了然地看到所有變體，從而快速選擇所需的組件。
在組件配置階段，有三項注意點能讓組件更加易用，即“重視組件的可視化效果、設置高效易用的配置項、貼心地保存修改”。
考慮到C端組件的多樣性和用戶的使用習慣，我們應避免使用過于復雜的分組方式。相反，應更注重組件的樣式展示，并盡量簡化組件的層級結構。這樣，設計師在使用時能夠更直觀地看到組件的外觀，而無需深入復雜的層級去查找。
另外值得注意的是，Figma會默認用組件集合中最左上角的組件生成預覽樣式，因此應當把視覺上最有代表性的變體放在左上角，這個效果在切換變體(Swap instance)時很重要，因為目前在該面板中沒法查看組件細節，只能靠縮略圖和名稱來推測是哪個組件。
其次對于配置項的設置也大有講究，業界有組件庫為了實現C2D2C，從源頭上將設計組件和前端組件的配置項打平，這是不錯的思路，但有可能會提升設計側的理解成本。
針對搜索業務的特殊語境，我們還是選擇了從「規范理解」角度去設置組件的配置項，將所有允許自定義的配置盡可能外露，并清晰地說明修改限制，如字數限定、選項個數等，這樣能夠在使用的過程中強化業務設計師對規范的掌握。
另一個常常被忽視的關鍵點是選項和配置的排序問題。為了提高瀏覽和選擇的效率，建議對選項和選項之間，以及外層的不同配置項，都按照一定的邏輯順序進行排序。
最后一點，我們稱之為“貼心地保存修改”機制，這個針對的是文字修改的場景。
在實際操作中，使用一個組件可能需要對多個配置項進行修改。有時在修改完文字內容后再去調整其他配置時，已修改的文字會被重置。這時文本屬性(text property)的設置就顯得尤為重要，它能夠記憶并保存修改過的文字內容，從而免于重復輸入。
還有一些情況是，某個組件變體實際上并沒有與某個值相對應的組件(盡管Figma機制允許選擇該值)，用戶切換后就會發現組件完全變了，只能撤回。
為了避免這類情況，建議使用另外的標記來表明組件某個設置項是不可切換的。
完成了組件的搭建和檢查，接下來讓我們聚焦于組件的日常維護。
這一環節可以從兩個維度展開，一是依托中臺的日常數據監控進行維護，二是通過團隊內部的緊密協同機制來保障。后者更多側重協作流程和機制上的建設，在本文中我們不做更多展開，重點討論前者。
數據監控的方式主要依托Figma中的組件數據看板(查看路徑：View libraries-Analytics)，看板中展示了各個組件的調用數和解綁數數據，這些數據不直接反映組件的優劣，但如果我們觀測到某個組件解綁率偏高，我們會考慮直接把它作為模板而不是創建成組件。
以上是百度搜索設計團隊在設計組件庫升級過程中的心得分享，包括搜索業務對于“好的設計組件”的訴求，以及一些搭建和優化組件的實用思路，核心是探討如何從組件庫建設的角度入手，成功助力團隊提升設計資產消費效率。
當前我們已經完成設計資產工程化的前序環節，我們對設計資產的升級和探索并沒有結束，未來我們將持續探索設計系統工具化的形態、與AI大模型結合的機會，通過豐富消費途徑，實現在業務交付的不同階段下全方位提效。
這部分內容后續有機會也將會和大家見面，請大家期待！
轉載：人人都是產品經理
蘭亭妙微（藍藍設計）www.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）www.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
因此今天蘭亭妙微UI設計公司，來講解 B 端產品界面的視覺風格，聊聊在整個行業當中視覺風格的變化與目前的現狀。以及給大家說說未來應該如何選擇自己產品的視覺風格～
我們會將整體分為行業初期，萌芽期、成長期、野蠻發展期、新階段 ，每一個階段給大家總結一個最為流行的風格，并分析這個風格出現的原因，方便大家進行理解。
我們把時間拉回到 2012 年。在那時，Ant Design 還沒有出現，也沒有什么 Element、Semi Design，行業當中最早的 B 端系統都是以客戶端的形式進行呈現。
整體風格也非常老舊，像是那會兒的 Office、SAP、Salesforce，你可以看到都是他們青澀的模樣。
在經典傳統的設計風格當中，會使用大面積的白色作為底色，同時在頁面中用灰色進行分割，使得整個頁面散亂搶眼，導致整體的視覺很難被大眾所接受，總體感覺信息較散，難以進行聚焦。
而在早期，出現這些老舊風格主要有三個原因：
關于這類風格的產品，大家不要覺得這夸張，其實在目前依舊有很多產品會延續這個風格。比如 醫療類產品、工業生產類系統，對于他們而言，能用即可，不必糾結太多。
但隨著時間的推移，行業中對于 B 端設計的要求也在逐漸變高。
我們將時間推移到 2015 年前后，隨著行業不斷發展，在國外 Fiori、Salesforce 的出現讓大家意識到，這類型的 B 端產品也是需要設計的。
因此國內外的很多系統都是在這一時間面世，像是 Ant Design、Element 都相繼發布。
由于這些設計系統的誕生，你會發現大家對于整個 B 端設計有了一點自己的想法。
在設計上，會去考慮使用 區塊劃分，將整個頁面進行規整呈現。
比如 SAP 在使用了 Fiori 過后，就會使整個界面更干凈。
同樣非常老牌的 Salesforce 在 2015 年的時候。也帶來了相當大的視覺變化。整體都能感受到，整個頁面會通過不斷的分層、顏色的劃分、通過黑白灰的方式去呈現頁面當中的基本信息。
我們的時間來到 2018 年前后，在這個時間節點，很多產品都推出了自己的設計系統，對于 B 端設計風格而言，也會提出更高的要求。
比如 Teambition 產品當中，它們提供了自己的設計系統的內容去指導整個產品來進行迭代和優化。同樣 Ant Design 它們也推出了自己的 Ant Design Pro 來演示使用設計系統過后，能夠搭建出什么樣的產品。
同樣，這個時段很多產品也開始進行自己產品的視覺優化，這時候整體的風格是以：黑色側邊導航為主，然后內容形態進行延展。
比如像有贊、Coding、微盟、飛書，之前都是這樣的設計風格來進行呈現。
你會發現它們在整體的設計上都會更加重視頁面的分塊顏色的區隔，整體頁面的識別效率。同時這段時間爆發出來非常多的 B 端產品，隨后國內都會按照側邊黑色導航的樣式進行進一步設計，這一定程度上提高了國內 B 端設計的下限～
我們隨后將時間推移到 2019 年后，在這時誕生了新擬態設計風格。
它最早是烏克蘭設計師 Alexander Plyuto 在追波和 ins 發布的一副系列作品，隨后大家發現非常奇特，所以得到廣泛的關注。
新擬態的設計風格是以立體效果與浮雕元素，呈現更為三維立體的效果，會給人一種奇特、夢幻的界面體驗。
隨后就會有很多產品都開始進行跟進，比如 智能家居的產品、金融類產品都有所涉及，甚至很多 B 端產品也勇敢嘗試，但大多數設計師設計完過后，整體評價都不算太高。
為什么沒有大規模的推行，我覺得有 3 點原因：
現在還會使用新擬態風格的界面設計越來越少，大多數只會在官網設計的局部進行使用，這樣可以轉換視覺感受，給到用戶更好的視覺沖擊～
時間來到 2022-2024 年左右，你會發現很多產品都開始在這個時間節點進行更新。
像我們熟知的 飛書、有贊、微盟、ONES、Coding，再到 Ant Design、Salesforce，你會發現非常多的產品都在進行界面風格上的迭代。
對于這個風格，我們愿意叫它為 灰白風。
整體頁面是以 灰色和白色 進行的頁面劃分，在分布上灰色占據弱側信息，白色占據核心信息，進而形成對頁面內容的劃分。
聊到這里，可能有部分同學不太理解，這里我們以飛書管理后臺的迭代作為示例，給大家進行講解。
在 2018 年，飛書管理后臺的第一個版本，采取的就是沉穩側黑風，
在 2022 年，飛書的管理后臺開始改變為灰白風格
由于業務的疊加，2023 年時，在此基礎上增加了頂部導航的業務維度，最終形成了現在這樣的界面。
為什么這類型的風格會大受追捧，我覺得有以下幾個原因
關于設計風格，我們這篇只是講解了過去的風格內容，下篇文章我們講解當前整個 B 端產品的設計梳理，講解了更為重要的四種風格。
轉載：優設
蘭亭妙微（藍藍設計）www.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
今天蘭亭妙微UI設計公司，跟大家分享登錄頁的 12 種設計切入點，相信總有一款會入甲方爸爸的心。
作為設計師，我們常常面臨一個窘境：要面對各式各樣客戶審美的挑剔，有時候被虐得都懷疑人生。
但找參考時，思維又容易被局限在常見的幾種形式里，我通過分析大量優秀的登錄頁，總結了 12 個高級的設計切入點，希望能為你打開新思路。
設計解析：
設計解析：
設計解析：
設計解析：
設計解析：
設計解析：
設計解析：
設計解析：
設計解析：
設計解析：
設計解析：
設計解析：
通過以上 12 個案例的系統性拆解，我們發現 B 端登錄頁的設計可以有如此豐富的切入點。
它絕不僅僅是擺放表單的簡單任務，而是一個融合了品牌戰略、用戶體驗、視覺營銷和技術表達的綜合性設計挑戰。
希望這 12 個切入點的詳細分析，能成為您應對登錄頁設計挑戰的靈感源泉和實用工具箱。
一個高級的設計，其最高境界是讓用戶感覺不到“設計”的存在，卻能高效、愉悅地完成目標，并對品牌留下積極而深刻的印象。
轉載：優設
蘭亭妙微（藍藍設計）www.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
哈嘍，這里是蘭亭妙微UI設計公司，今天分享的是「如何化解錯誤時刻」。
說到用戶體驗設計，大家首先想到的都是“正常場景”：注冊流程順暢、支付順利完成、輸入順利通過。但現實并非如此，用戶總會不小心犯錯誤，系統偶爾也會掉鏈子。但這些“問題時刻”往往最容易被忽略。要是產品沒法幫用戶解決問題，所有錯誤的后果都得用戶承擔，最后只會讓他們焦慮。換句話說，錯誤是用戶體驗的最大危機，也是削弱用戶對產品信任的關鍵節點。
相關干貨：
這里的“微設計”比我們常說的“微交互”范圍更廣，包括文案、視覺元素，還有各種反饋設計。這些小細節看似不起眼，卻能精準安撫用戶的出錯焦慮，幫他們重新找回掌控感。
微設計的三個核心要素：
在深入探討具體案例之前，讓我們先來探究一下用戶遇到錯誤的背景和原因。下面簡要總結了用戶出錯的類型、背后的心理，還有哪些場景容易出錯。
在用戶體驗理論中，錯誤分“失誤”和“錯誤”兩種，前者是用戶在執行操作時無意識犯下的錯誤，后者是一開始就想錯了。
失誤：行為不當
目標是對的，但采取的行動有問題。例如不小心點錯了按鈕、著急打錯了字，大多是做熟悉的事時分心、沒留意造成的。
錯誤：判斷失誤
從一開始就誤解了情況。比如看到一個顯眼的按鈕，以為是自己要的功能，結果點擊后才發現不對。這種情況多是因為界面的信息混亂、層級不清晰，呈現的內容含糊不清。
通常“失誤”發生在執行階段，“錯誤”發生在規劃階段，但實際中兩者經常一起出現。重點是搞清楚 “為什么會出錯”，并給出解決方案。
出錯不只是功能出問題，更會讓用戶慌張：“萬一沒法恢復怎么辦？”（恐懼）、“我無法控制這種情況”（無助），甚至 “可能我根本不會用這東西”（自責）。最糟的就是自責——用戶不怪產品怪自己，壓力越來越大，最后干脆關掉頁面、放棄使用。
所以設計師的任務很明確：別讓用戶背鍋，明確告訴他們“能補救”。先給情緒上的安慰：“沒關系，你可以再試一次。”
有些時候，用戶的選擇壓力和出錯焦慮會被放大，心里越沒底，越不敢動。
操作不可逆：刪除文件、轉賬、重置數據等，一旦點錯就沒法恢復，讓人不敢操作。
操作反復失敗：連不上網、輸密碼總錯，越試越沮喪，甚至會想 “是不是只有我用不了？”
尤其是對準確性要求高的場景，比如金融、商務、B2B工具，出錯體驗的設計更關鍵。有時候對于出錯的恐懼，比錯誤本身更影響用戶行為。
支付/轉賬：錯誤導致資金損失的壓力以及造成損失的可能性。
傳輸/刪除關鍵數據：知道沒法恢復，更不敢操作。
表單反復驗證失敗：失敗的次數越多，就會越沮喪。
應對錯誤的核心是“雙管齊下”：提前預防 (別讓錯誤發生) +及時恢復 (錯了能輕松補救)。單獨用哪一個都不夠，需要根據場景靈活設計。
從根本上阻止可能出錯的情況，或者用視覺提示幫用戶識別風險。比如禁用按鈕、提供有限的選項、防止重復點擊。某種程度上哪怕稍微限制一點用戶的自由，也比讓他們出錯好。
例如訂酒店時，對于有住宿天數要求的酒店，預定的天數少于住宿天數時，無法進行預訂；類似的還有“信息沒填完時，登錄按鈕是置灰的”、“加載時不能點按鈕，避免重復操作”，都是這個道理。
在搜索框、輸入框里加入自動補全或關鍵詞建議，不需要讓用戶記住全部信息，輸入又快又準。尤其在輸入地址或者比較復雜的內容時，這種方法能大大提高效率。
例如在輸入地址時，搜索詞會高亮顯示，并且會可能提供清晰的搜索建議：想搜的是地鐵、公交還是某家店鋪，方便用戶減輕記憶負擔，快速做出選擇；在移動設備中，鍵盤的局限性導致打字失誤的情況頻繁發生，飛書的錯別字自動修正提示，能夠很好地提高輸入速度和準確性。
對于需要重復做的操作，可以把常用的選項設為默認，幫助用戶少費心。但默認選項不一定永遠是對的，如果存在錯誤的可能性，得讓用戶能檢查修改，不然反而會“誘導錯誤”。
例如在外賣軟件中，可以把常用地址加上默認標識，省去了再次添加收貨地址的麻煩。但當默認地址和當前的位置差很遠，超出配送范圍時，購物車中的商品會呈置灰狀態無法進行購買。
用戶進行多步驟任務時 (比如注冊)，萬一不小心退出了再進來，保持之前填的內容還在。這樣不需要用戶重新填，也不會忘記已經完成了哪些步驟，減少失誤的發生。
編輯文章時，內容可以自動保存到草稿箱中。哪怕退出登錄過兩天再進入，草稿箱里的內容都還在，對于用戶來說也是一種很貼心的體驗。
對于需要記住很多選擇的流程(比如訂酒店)，把選好的日期、人數、篩選條件固定在屏幕頂部，隨時能看。這種設計方法允許用戶在不依賴不準確記憶的情況下再次確認信息，從而及早預防錯誤。
像Airbnb會把要去的地點、 入住時間和人數這些篩選條件固定在頁面的頂部，讓用戶可以持續查看當前的預訂情況，這樣在找房子的時候會覺得更踏實。
對于刪除文件或重置數據這類不可逆的操作，一定要增加 “確認步驟”，進一步確認用戶的意圖。
一旦出錯無法恢復的操作可能會引發用戶的強烈焦慮，因此需要清晰傳達操作的影響，并通過問題和警告來確認操作，例如：“您確定要刪除xx？刪除后不可恢復，請謹慎操作。”
但注意不能濫用確認彈窗，過于頻繁的確認彈窗可能會讓用戶在不仔細看內容的情況下，習慣性地點擊“確定”，增大出錯的風險。只在重要且不可逆轉的操作中使用。
例如刪除文件時進行二次確認，同時告知刪除后文件的位置、刪除后文件是否可以找回等一系列內容，讓用戶對于刪除的內容有清晰的認知；對于確認后無法再修改的信息，也最好來個再次確認，讓用戶做到心里有數。
對于表單輸入這類容易出錯的場景，好的使用體驗是在輸入時就“實時”提供反饋，而不是等所有信息都填完點擊提交之后再提示錯誤。
比如字符超了、密碼格式不對，立即用紅色文字、錯誤圖標、邊框高亮、震動動效等形式反饋出來，減少重復輸入的麻煩。
例如發動態時，如果輸入的標題字數不符合要求，會在標題處有一段反饋提示，提醒用戶輸入符合要求的標題；填寫多個表單時，如果有多個表單未填寫，每個輸入框下面都會有錯誤反饋，而且每條錯誤反饋的內容會根據不同字段而調整，而不是用“請填寫內容”這種模板化的反饋。
對于操作后不好修改的場景中 (比如發表文章、發布視頻、視頻渲染)，可以先給用戶看 “最終效果預覽”。確認沒問題再提交，這樣用戶就能提前發現錯漏，心里也踏實。
例如在發布動態的時候上傳視頻封面后，在推薦列表、視頻動態中能提前預覽封面效果，有問題可以及時修改，省去了動態發布后再去修改的麻煩；視頻軟件中渲染一個視頻通常需要幾分鐘甚至幾十分鐘，通過提供“渲染預覽”可以快速檢查錯誤減少不必要的時間浪費。
“撤銷”功能允許用戶立即挽回錯誤，增強掌控感，減輕錯誤帶來的負擔，例如刪錯內容、發錯郵件后，點一下就能恢復。有了這個功能，用戶用著更放心，也敢大膽嘗試各種功能。
在花瓣中采集圖片后，會提供一個撤銷的功能，方便用戶快速撤銷采集有誤的圖片；在使用微信發消息、使用郵箱發郵件的時候，也都支持在發出去幾分鐘內撤回，盡可能幫用戶挽回錯誤。
如果錯誤不可避免，需要使用通俗易懂的提示文案告訴用戶哪里出現了錯誤，出現了什么樣的錯誤，而不是用一些模板化的或是含糊不清的提示文案，讓用戶感到困惑。
例如上圖中的登錄失敗提示，會明確告知什么地方出現了錯誤、出現多次錯誤后會有什么后果、如何操作能解決錯誤，這才是一個格式的錯誤提示；填寫新增地址信息時，如果手機號碼有問題，會明確提示“手機號有誤”，而不是只說 “輸入內容有誤”。
接著上一條，不僅要說清楚錯誤的原因，還要告訴用戶“該怎么做”，引導用戶立即采取行動。例如添加“重試”、“返回主頁” 按鈕，引導用戶回到正確的操作流程里。
如果訪問的頁面有問題，可以提供返回首頁或者聯系客服的入口，讓用戶可以繼續探索其他內容；例如蘋果的Face ID連續5次識別失敗后，系統會鎖定面容ID功能，并提示輸入密碼驗證后才能重新啟用。
通過自動定位和聚焦錯誤輸入項來鼓勵快速更正。發現錯誤后，系統自動定位到出錯的輸入框，縮短錯誤從識別到更正的過程。尤其在那些表單特別多的后臺頁面中，這種錯誤定位的功能還是很有必要的。
利用情感化的視覺設計，例如柔和的色彩、插圖和動效等，提供了視覺上的舒適感，緩解用戶的焦慮和緊張。這不僅是簡單的錯誤反饋，還是展現品牌個性的好機會。
比如谷歌瀏覽器離線時經典的“恐龍小游戲”，讓用戶等待網絡連接的同時進行有趣的游戲體驗，能讓用戶沒那么煩躁。
總的來說，減少錯誤的根本策略是避免不必要的差異化，并遵循熟悉的界面、交互和設計慣例。這里的“熟悉”不僅是風格問題，更是整個用戶體驗設計的通用標準。
當然，再標準的設計也沒法完全杜絕錯誤的發生。這時候，貼心的微設計就派上用場了——幫助用戶快速發現錯誤、輕松改過來。
這些細節，正是體驗設計師存在的價值，也是產品賦予用戶的最大信任。你還有哪些化解錯誤的小妙招呢？歡迎留言咱們一起聊聊～
轉載：優設
蘭亭妙微（藍藍設計）www.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）www.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）www.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微UI設計公司：互聯網時代，品牌的節日營銷是重要的傳播節點之一。
從520、七夕到中秋、圣誕、元旦、春節，用戶情緒在節日中被自然放大，也為品牌提供了集中觸達用戶、強化品牌認知的重要窗口。
在百度品牌營銷中，節日營銷已經成為高頻且穩定的投放節點。
品牌通過開屏、信息流、品專等多觸點場景，在短時間內形成曝光，快速放大聲量。
隨著營銷環境的變化，用戶的注意力愈發稀缺，節日營銷的定義也在發生變化。
節日營銷從單一的品牌曝光、信息觸達，逐漸走向情緒溝通和心智的建立。
節日正在從一個傳播節點，轉變為品牌進入用戶情緒的入口。
這也是我們重新思考品牌節日營銷設計的起點。
節日營銷設計為什么升級
當前節日設計越來越多趨同，問題也開始顯現：
用戶看到了節日，卻沒有記住品牌。
中秋是月亮、圣誕是雪花、春節是紅色。這些符號足夠“像節日”，但不再夠打動人。
過去的節日營銷設計，本質是一種標準化程序化的換膚，
在已有樣式的基礎上替換為顏色、疊加元素、快速形成節日版本。
這種方式高效，但是有明顯的局限：
用戶看到，但沒有情緒共鳴；品牌出現，但是沒有留下記憶；
當品牌開始從「曝光」走向「心智」，
設計，不再只是做節日視覺設計，而是要承擔新的角色，
通過節日，幫助品牌與用戶建立一次情緒的鏈接。
設計的角色，正在發生變化
在品牌營銷體系中，設計的角色正在從“視覺執行”走向“情緒表達”。
過去，設計解決的是好不好看；現在，設計需要回答的是能不能被感知、能不能被記住、能不能觸發行動；
這種角色的變化本質來自兩個點：
1.用戶從接受信息到情緒共鳴，用戶不再被信息打動，而更容易被情緒打動；
2.品牌從曝光到轉化，品牌不僅需要被看到，更需要被記住、被選擇；
因此，設計的價值也在升級，從“表達節日”升級到“激活情緒”。
嘗試讓節日、文化、品牌營銷進行融合。通過設計，讓節日設計不僅被看見，而是被感受到被記住。
從節日元素，到節日情緒
在過去一年的實踐中，我們形成了一個清晰的設計路徑，
不再思考“用什么元素”，而是優先回答“表達什么情緒”，
整體設計流程我們拆分成四步：
1.文化分析，找情緒；
2.元素提煉，確定表達；
3.情感敘事，建立引導；
4.商業場景，承接轉化；
最終形成一套設計方法：先定義情緒，再選擇表達，最終通過場景完成轉化。
設計的不只是畫面，而是一段完整的情緒體驗。
下面圍繞中秋、圣誕、春節三個典型節日展開，
案例一｜中秋：讓月色承載情緒
在中秋節的設計中，我們先思考中秋的情緒是什么？
中秋節更偏向安靜與溫暖，它是一種關于思念和團圓的情緒。
在設計中，我們沒有強調元素的豐富性，而是讓月光成為畫面的核心情緒來源。
整張畫面被橙色的月色包裹，品牌禮盒作為視覺中心，燈籠與窗棱構建遠近景的空間層次，讓情緒在畫面中緩慢鋪開。
用戶感受到的，不只是節日，而是一種被傳遞的心意。
不是月亮本身，而是月光下的情緒。
案例二｜圣誕節：用星光建立引導
與中秋節這種傳統節日不同，圣誕節則是一種外放型的節日情緒，它的文化核心是驚喜和給予。
在眾多圣誕符號中，我們選擇了一個更具文化指向的元素：圣誕星（伯利恒之星）。
在圣誕文化中，這顆星象征著“指引與希望”——它引導人們找到方向，也成為光明與祝福的象征。
因此，圣誕星光不僅是裝飾元素，而是承載節日意義的核心符號。
基于這一語義，我們讓“星光”成為整個畫面的視覺起點與敘事線索。
畫面中，星光從上方落下，形成一條清晰的視覺路徑，最終聚焦品牌產品。
用戶的視線隨著星光的軌跡移動，從節日氛圍自然過渡到品牌信息。
深色的夜空與雪景構建靜謐的節日空間，而星光成為畫面中最有溫度的存在。
我們以星光為核心視覺線索，讓星光軌跡貫穿整個設計場景。
從開屏的星光破窗，到信息流的星軌延展，再到品專的星光匯聚，用戶在瀏覽過程中被星光自然引導，完成從視覺吸引到情感共鳴的轉化。
星光不只是點綴，而是連接節日與品牌的路徑。
案例三｜春節：讓節日流動起來
春節的復雜性，不在于元素的豐富，而在于情緒的多樣。
它既有熱鬧的年味，也有現實的消費動機，還有天然的互動氛圍。
因此我們不再堆疊符號，而是將春節拆分為三種情緒的表達。
基于春節用戶三類核心情緒，我們將方案聚焦為三個方向，表達春節文化溫度的流動，
年味：通過傳統節日元素構造氛圍，讓品牌自然進入節日語境；
好禮：強化商品表達，讓內容本身成為轉化入口；
趣味：結合生肖與互動玩法，提升參與和傳播；
通過傳統節日元素營造氛圍，幫助品牌營造節日氛圍和加深品牌記憶；
我們選取了福字、生肖、紅包等高認知度的春節元素，幫助品牌快速進入春節語境，快速建立春節氛圍，幫助品牌進入春節語境。
春節期間，用戶對送禮買禮品的接受程度是全年最高。
因此在「好禮」這個方向中，我們嘗試打破傳統按鈕形式，讓商品本身成為入口。
在開屏、信息流、品專、品牌百看中，品牌商品都可以以更直觀、更強勢曝光的樣式出現。
春節期間，用戶更愿意停留、互動，也更容易參與輕量玩法。
我們通過生肖IP的設計，并結合簡單的游戲化互動，讓品牌在春節期間不只是被看見，而是被“玩起來”。
最終讓春節不只是被看見，而是讓用戶感受到一種正在發生的熱鬧。
當節日設計開始有溫度
在過去一年品牌廣告打造了七夕、中秋、圣誕、元旦、馬年CNY等節日營銷包，
在節日營銷方案上線前后，我們從用戶、客戶、品牌資產三個維度進行了對比，結果呈現出清晰的增長趨勢：
節日營銷方案上線后，用戶對內容的關注度顯著提升，點擊率提升48%；
設計價值的前置，也帶來了客戶決策方式的變化，客戶樣式復購率提升71%；
設計資產復用率達到90%，多行業多節點快速適配，支撐節日營銷規模化擴展。
節日，從來不只是營銷節點，它是文化的縮影，是情緒的放大器，
更是品牌與用戶之間，最自然的一次鏈接機會。
當設計能夠闡述節日背后的文化語義，并用合適的方式將情緒傳遞出去，
品牌就不再只是出現，而是真正被用戶感知、記住，甚至產生鏈接。
未來，品牌營銷設計不再只是追求樣式的創新，
而是回到一個更本質的問題：
品牌，如何被用戶感受到。
而“有溫度”的設計正是這個問題的答案。
轉載：IXDC
蘭亭妙微（藍藍設計）www.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微UI設計公司:
時間：新店鋪支付模塊上線第二天，早上 10 點。
小A 正在工位上喝咖啡，客服群突然開始連環炸：
用戶A： “我付完錢了，訂單怎么還顯示’待支付’？”
用戶B： “我明明沒付成功，為什么錢被扣了？”
用戶C： “我取消了訂單，錢什么時候退給我？”
小A 趕緊打開后臺一看，傻眼了——
同一批訂單里，“待支付”“支付中”“已支付”“支付失敗”“已退款”五種狀態交叉打架，有的訂單同時出現在”待支付”列表和”已支付”列表里，還有幾筆訂單錢已經進了商戶賬戶、但訂單狀態還停在“支付中”。
她翻出前一天熬夜畫的支付鏈路時序圖，越看越冷汗：
小A 硬著頭皮撥通了老張的電話。
老張聽完小A 的描述，只回了一句：
“你這不是‘支付接口寫錯了’，是把支付當成了一個動作。它不是一個動作，是一條鏈路——而鏈路的地基，就是三件事。”
接著老張發來一段話，小A 把它存成了備忘：
做支付產品，要先分清三件事——
一、交易流：用戶 → 訂單；
二、資金流：錢 → 賬戶；
三、信息流：狀態 → 系統同步。
這三條流在理想情況下一一對應，但在真實生產環境里，它們永遠會錯位。你的產品工作，就是把這些錯位“兜回來”。
在正式拆關之前，先澄清兩個小A 一開始就搞混的認知——也是 90% 新手都會栽的坑：
很多人以為”接入微信支付”= 調一個 API。錯。一次完整的支付涉及 7 個系統 + 2 個異步回調 + N 個狀態流轉。后面關卡二會展開。
訂單篇講過訂單狀態機，但訂單狀態 ≠ 支付狀態。一個訂單”已支付”不代表錢真到賬了，可能只是”支付成功回調到了”。這兩個狀態機必須分開設計、雙軌管理。后面關卡三會展開。
支付結算整套完整拆解要過 7 道關卡，上下篇分開講：
上篇（本篇）· 地基三關 —— 錢怎么進來
第 1 關 · 支付方式全景 —— 用戶能用什么付錢
第 2 關 · 支付鏈路 —— 點“付款”之后發生了什么
第 3 關 · 支付狀態機 —— 錢到底在哪一步
下篇 · 進階四關 —— 錢怎么不出事
第 4 關 · 對賬 —— 財務最怕出事的環節
第 5 關 · 分賬 —— 多方分錢怎么分
第 6 關 · 退款 —— 錢怎么原路退回
第 7 關 · 異常資金池 —— 最后一道防線
上篇講完，你可以獨立設計一個“能把錢收進來”的支付系統；下篇講完，才能做到”錢進來之后不出事”。
小A 的第一個反問：“不就是微信、支付寶、銀行卡嗎？”
老張笑：“電商平臺的收銀臺里，平均要接 12-18 種支付方式。你要是只知道三種，寫出來的 PRD 就只能支撐一個最小 MVP。”
每一種支付方式的存在，都對應著某個特定場景下用戶最低阻力的選擇：
產品經理的第一課：不是選“最好的支付方式”，是覆蓋“用戶觸達時的最低阻力路徑”。
原則一：用戶畫像優先
品牌 X 的數據：
如果不接花唄，高客單商品轉化率會下降 15-20%。
原則二：費率與到賬時效平衡
原則三：接入成本要控制
每接一種支付方式 = 一套對接 + 一套回調 + 一套對賬 + 一套退款。不要盲目追求“支付方式最全”，要評估 ROI。
小A 的第二個反問：“不就是前端調個 API 嘛？”
老張說：“這也是你整天對不上賬的根因——你以為支付是一個動作，它其實是一條鏈路。”
從用戶點擊”立即支付”按鈕，到最終”錢到賬”，一筆支付要經過 7 個系統角色 × 2 次異步回調：
三個真實事故（品牌 X 上月發生）：
這三個事故的解法都寫在訂單篇下篇“支付三道防線”里——但真正在支付結算模塊里實現的，是這些：
防線一：被動回調 + 主動查詢雙保險
– 三方通知到 → 立即更新（最快路徑）
– 超過 30 秒沒通知 → 訂單系統主動反查一次
– 每 30 秒主動查詢，最多查 10 次（共 5 分鐘）
– 任一次成功即完成支付閉環
防線二：全鏈路冪等
– 支付單號（而非訂單號）作為冪等鍵
– 同一支付單號的任何操作（成功通知/失敗通知/查詢響應）都要冪等
– 重復請求的返回值必須和第一次請求一致
防線三：異常資金池
– 所有”錢進賬但找不到訂單”或”訂單已取消但錢到了”的交易，進入異常池
– 72 小時內必須處理完：原路退回 / 人工對賬 / 轉公司應付賬款
– 詳見關卡七
為什么用戶看到的是“支付中”而不是“支付成功”？
答：因為用戶點擊的一刻，錢還沒扣。扣款發生在第 8 步，那時用戶可能已經退出 App 了。
好的設計：
壞的設計（小A 第一版設計）：
小A 的第三個反問：“訂單狀態機不就夠了嗎？為什么還要單獨的支付狀態機？”
老張說：“訂單關心的是‘貨的進度’，支付關心的是‘錢的進度’。這兩件事在 80% 的時間里是同步的，但在 20% 的異常時刻會錯位——而恰恰是那 20% 決定了你的產品水平。”
一筆完整的支付，在產品設計上至少要覆蓋 8 種狀態：
+ 1 個兜底狀態：異常資金 — 第 7 關展開。
這是小A 在第一版 PRD 里漏掉的——她只設計了訂單狀態機，沒有獨立的支付狀態機，結果”訂單已支付”和”支付成功”混在一起，對賬時根本拆不清。
矩陣的價值：
小A 上月踩的坑——“已取消 + 已支付”組合（矩陣右下橙色加粗格）：
訂單被超時取消，但支付回調 30 分鐘后才到。結果訂單是”已取消”，支付是”已支付”。這筆錢就掛在了系統里，進入異常資金池。
解法（關卡七深度展開）：
鐵律一：訂單狀態由支付狀態驅動
很多新手 PRD 的錯誤寫法：
“用戶支付成功后，把訂單狀態改為’已支付’。”
這句話邏輯上沒問題，但在系統層面是反的。正確的是：
“支付狀態機從’支付中’流轉到’已支付’時，觸發訂單狀態機從’待支付’流轉到’已支付’。”
區別在于：支付狀態是因，訂單狀態是果。如果把它們耦合在一個狀態機里，就做不到獨立兜底。
鐵律二：所有狀態變更必須帶“來源”
字段設計：
payment_status_log:
– payment_id: 支付單號
– from_status: 變更前狀態
– to_status: 變更后狀態
– source: 變更來源（user / system / callback / reconcile / manual）
– operator: 操作人（用戶ID / 系統名 / 財務人員）
– timestamp: 變更時間
– remark: 備注（必填）
為什么必須帶來源？因為財務對賬、客訴排查、合規審計，三個場景都要追溯“是誰讓它變成這個狀態的”。
鐵律三：每個異常態都要有退出通道
支付狀態機里最容易出事的”死狀態”：
任何狀態都要有“進入規則 + 退出規則”，不能只有進入沒有退出。
場景：品牌 X 上線”組合支付”，允許用戶用”積分 + 微信”支付。
小A 第一版設計：
問題：積分成功了但微信支付失敗，訂單狀態已經是”已支付”但實際只支付了積分部分。
正確設計：
關鍵：組合支付必須有“部分支付”這個中間態，而不是每個支付通道成功就是”已支付”。
訂單篇問的是“訂單系統扎不扎實”和“抗不抗壓”，支付篇上篇先問一件事：地基穩不穩。能答對 3 題以上的，才好進下篇的對賬、分賬、退款、異常資金池。
1. 所有支付通道都有“被動回調 + 主動查詢”雙保險嗎？ 只靠被動回調=錢進賬但訂單沒更新
2. 所有支付接口都做了冪等嗎？ 用”支付單號”做冪等鍵，不是訂單號——重復回調必須識別出來
3. 訂單狀態機和支付狀態機是獨立的嗎？ 而不是一個字段 status 揉完訂單和支付
4. 支付方式的接入是按“用戶畫像 × 客單價 × 資金成本”選的嗎？ 還是上來先接個微信和支付寶了事
一句話總結上篇： 支付系統的地基，不是”接完三個通道就完事”，而是把一條鏈路、一張雙軌狀態機、一套兜底與冪等，都提前畫清楚。地基穩了，下篇才有資格談”能扛”。
蘭亭妙微（藍藍設計）www.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
藍藍設計的小編 http://www.hengshangtqd.cn