一、即時點擊反饋：溫柔回應(yīng)每一次操作

高級感核心邏輯

設(shè)計小貼士

二、舒緩加載狀態(tài)：消解等待焦慮感

1. 骨架屏：提前勾勒內(nèi)容布局輪廓，如同告知用戶內(nèi)容正在籌備、即將呈現(xiàn)，消解未知感；
2. 真實進度條：拒絕虛假跳變進度，平穩(wěn)勻速推進，坦誠展示加載進程，用真誠感贏得用戶信任；
3. 輕量提示動效：微光流轉(zhuǎn)、輕柔脈沖、平緩滑動等極簡動效，低調(diào)傳遞 “正在加載中” 的信號，不喧賓奪主。

高級感核心邏輯

設(shè)計小貼士

三、適配懸浮狀態(tài)：分寸感拉滿的桌面交互

1. 柔和高亮變化：微調(diào)色彩明度、淡入細邊框、疊加柔和陰影，低調(diào)凸顯選中狀態(tài)，不刻意吸睛；
2. 精準(zhǔn)光標(biāo)適配：根據(jù)交互場景切換對應(yīng)光標(biāo)樣式，細節(jié)處體現(xiàn)專業(yè)度，避免光標(biāo)錯亂引發(fā)用戶困惑；
3. 微小形變位移：元素輕微上浮、小幅傾斜、微量平移，靈動細膩，杜絕大幅度跳動打亂頁面布局。

高級感核心邏輯

設(shè)計小貼士

四、邏輯化頁面過渡：流暢銜接操作路徑

1. 方向聯(lián)動滑出：導(dǎo)航欄從左側(cè)滑入、彈窗從底部升起，面板跳轉(zhuǎn)遵循視覺邏輯，不隨意切換方向；
2. 絲滑無卡頓滾動：頁面滾動平穩(wěn)順滑，無抖動、無突兀跳轉(zhuǎn)，手感流暢絲滑；
3. 場景化關(guān)聯(lián)過渡：點擊觸發(fā)的內(nèi)容從原操作位置延展出現(xiàn)，關(guān)閉后回歸原位，貼合現(xiàn)實物體運動邏輯，契合用戶潛意識認知。

高級感核心邏輯

設(shè)計小貼士

五、克制化成功反饋：低調(diào)收尾不刻意討好

1. 極簡對勾動效：靜態(tài)簡約對標(biāo)，無旋轉(zhuǎn)、無爆炸特效，利落宣告任務(wù)完成；
2. 高級感色彩漸變：選用低飽和雅致綠色作為成功標(biāo)識，摒棄刺眼熒光綠，低調(diào)有質(zhì)感；
3. 簡約文案提示：采用 “已保存”“設(shè)置完成” 等簡潔表述，告別幼稚化歡呼文案，尊重用戶心智；
4. 輕量音效點綴：適配場景加入輕柔提示音、清脆點擊聲，替代喧鬧的游戲勝利配樂，氛圍感恰到好處。

高級感核心邏輯

設(shè)計小貼士

微交互，遠比浮夸 UI 更決定產(chǎn)品質(zhì)感

產(chǎn)品高級感落地清單

1. 按鈕交互即時響應(yīng)，不延遲、無空白；
2. 加載體驗舒緩從容，消解用戶等待焦慮；
3. 懸浮效果低調(diào)引導(dǎo)，不搶視線、不打亂布局；
4. 頁面過渡貼合邏輯，流暢銜接用戶操作路徑；
5. 任務(wù)反饋簡約克制，沉穩(wěn)收尾不刻意浮夸。

哈嘍，這里是蘭亭妙微UI設(shè)計公司，今天分享的是「如何化解錯誤時刻」。

說到用戶體驗設(shè)計，大家首先想到的都是“正常場景”：注冊流程順暢、支付順利完成、輸入順利通過。但現(xiàn)實并非如此，用戶總會不小心犯錯誤，系統(tǒng)偶爾也會掉鏈子。但這些“問題時刻”往往最容易被忽略。要是產(chǎn)品沒法幫用戶解決問題，所有錯誤的后果都得用戶承擔(dān)，最后只會讓他們焦慮。換句話說，錯誤是用戶體驗的最大危機，也是削弱用戶對產(chǎn)品信任的關(guān)鍵節(jié)點。

相關(guān)干貨：

一、用“微設(shè)計”化解錯誤

這里的“微設(shè)計”比我們常說的“微交互”范圍更廣，包括文案、視覺元素，還有各種反饋設(shè)計。這些小細節(jié)看似不起眼，卻能精準(zhǔn)安撫用戶的出錯焦慮，幫他們重新找回掌控感。

微設(shè)計的三個核心要素：

1. 微交互：比如按鈕點擊時的震動反饋、輸入框?qū)崟r提示、自動聚焦到目標(biāo)區(qū)域等；
2. 微文本：簡短清晰的提示，例如 “至少輸入10個字”、“請檢查您的網(wǎng)絡(luò)連接”；
3. 微視覺：流暢的動畫、柔和的顏色、讓人放松的插畫。

在深入探討具體案例之前，讓我們先來探究一下用戶遇到錯誤的背景和原因。下面簡要總結(jié)了用戶出錯的類型、背后的心理，還有哪些場景容易出錯。

1. 兩種出錯類型：失誤VS錯誤

在用戶體驗理論中，錯誤分“失誤”和“錯誤”兩種，前者是用戶在執(zhí)行操作時無意識犯下的錯誤，后者是一開始就想錯了。

失誤：行為不當(dāng)

目標(biāo)是對的，但采取的行動有問題。例如不小心點錯了按鈕、著急打錯了字，大多是做熟悉的事時分心、沒留意造成的。

錯誤：判斷失誤

從一開始就誤解了情況。比如看到一個顯眼的按鈕，以為是自己要的功能，結(jié)果點擊后才發(fā)現(xiàn)不對。這種情況多是因為界面的信息混亂、層級不清晰，呈現(xiàn)的內(nèi)容含糊不清。

通常“失誤”發(fā)生在執(zhí)行階段，“錯誤”發(fā)生在規(guī)劃階段，但實際中兩者經(jīng)常一起出現(xiàn)。重點是搞清楚 “為什么會出錯”，并給出解決方案。

2. 出錯時的用戶心理

出錯不只是功能出問題，更會讓用戶慌張：“萬一沒法恢復(fù)怎么辦？”（恐懼）、“我無法控制這種情況”（無助），甚至 “可能我根本不會用這東西”（自責(zé)）。最糟的就是自責(zé)——用戶不怪產(chǎn)品怪自己，壓力越來越大，最后干脆關(guān)掉頁面、放棄使用。

所以設(shè)計師的任務(wù)很明確：別讓用戶背鍋，明確告訴他們“能補救”。先給情緒上的安慰：“沒關(guān)系，你可以再試一次。”

3. 增加焦慮的場景

有些時候，用戶的選擇壓力和出錯焦慮會被放大，心里越?jīng)]底，越不敢動。

操作不可逆：刪除文件、轉(zhuǎn)賬、重置數(shù)據(jù)等，一旦點錯就沒法恢復(fù)，讓人不敢操作。

操作反復(fù)失敗：連不上網(wǎng)、輸密碼總錯，越試越沮喪，甚至?xí)?“是不是只有我用不了？”

尤其是對準(zhǔn)確性要求高的場景，比如金融、商務(wù)、B2B工具，出錯體驗的設(shè)計更關(guān)鍵。有時候?qū)τ诔鲥e的恐懼，比錯誤本身更影響用戶行為。

支付/轉(zhuǎn)賬：錯誤導(dǎo)致資金損失的壓力以及造成損失的可能性。

傳輸/刪除關(guān)鍵數(shù)據(jù)：知道沒法恢復(fù)，更不敢操作。

表單反復(fù)驗證失敗：失敗的次數(shù)越多，就會越沮喪。

應(yīng)對錯誤的核心是“雙管齊下”：提前預(yù)防 (別讓錯誤發(fā)生) +及時恢復(fù) (錯了能輕松補救)。單獨用哪一個都不夠，需要根據(jù)場景靈活設(shè)計。

二、8個設(shè)計技巧，提前預(yù)防錯誤

1. 主動限制風(fēng)險操作

從根本上阻止可能出錯的情況，或者用視覺提示幫用戶識別風(fēng)險。比如禁用按鈕、提供有限的選項、防止重復(fù)點擊。某種程度上哪怕稍微限制一點用戶的自由，也比讓他們出錯好。

例如訂酒店時，對于有住宿天數(shù)要求的酒店，預(yù)定的天數(shù)少于住宿天數(shù)時，無法進行預(yù)訂；類似的還有“信息沒填完時，登錄按鈕是置灰的”、“加載時不能點按鈕，避免重復(fù)操作”，都是這個道理。

2. 自動補全&智能建議

在搜索框、輸入框里加入自動補全或關(guān)鍵詞建議，不需要讓用戶記住全部信息，輸入又快又準(zhǔn)。尤其在輸入地址或者比較復(fù)雜的內(nèi)容時，這種方法能大大提高效率。

例如在輸入地址時，搜索詞會高亮顯示，并且會可能提供清晰的搜索建議：想搜的是地鐵、公交還是某家店鋪，方便用戶減輕記憶負擔(dān)，快速做出選擇；在移動設(shè)備中，鍵盤的局限性導(dǎo)致打字失誤的情況頻繁發(fā)生，飛書的錯別字自動修正提示，能夠很好地提高輸入速度和準(zhǔn)確性。

3. 將常用選項設(shè)為默認

對于需要重復(fù)做的操作，可以把常用的選項設(shè)為默認，幫助用戶少費心。但默認選項不一定永遠是對的，如果存在錯誤的可能性，得讓用戶能檢查修改，不然反而會“誘導(dǎo)錯誤”。

例如在外賣軟件中，可以把常用地址加上默認標(biāo)識，省去了再次添加收貨地址的麻煩。但當(dāng)默認地址和當(dāng)前的位置差很遠，超出配送范圍時，購物車中的商品會呈置灰狀態(tài)無法進行購買。

4. 保持內(nèi)容暫存

用戶進行多步驟任務(wù)時 (比如注冊)，萬一不小心退出了再進來，保持之前填的內(nèi)容還在。這樣不需要用戶重新填，也不會忘記已經(jīng)完成了哪些步驟，減少失誤的發(fā)生。

編輯文章時，內(nèi)容可以自動保存到草稿箱中。哪怕退出登錄過兩天再進入，草稿箱里的內(nèi)容都還在，對于用戶來說也是一種很貼心的體驗。

5. 固定顯示已選內(nèi)容

對于需要記住很多選擇的流程(比如訂酒店)，把選好的日期、人數(shù)、篩選條件固定在屏幕頂部，隨時能看。這種設(shè)計方法允許用戶在不依賴不準(zhǔn)確記憶的情況下再次確認信息，從而及早預(yù)防錯誤。

像Airbnb會把要去的地點、 入住時間和人數(shù)這些篩選條件固定在頁面的頂部，讓用戶可以持續(xù)查看當(dāng)前的預(yù)訂情況，這樣在找房子的時候會覺得更踏實。

6. 二次確認不可逆操作

對于刪除文件或重置數(shù)據(jù)這類不可逆的操作，一定要增加 “確認步驟”，進一步確認用戶的意圖。

一旦出錯無法恢復(fù)的操作可能會引發(fā)用戶的強烈焦慮，因此需要清晰傳達操作的影響，并通過問題和警告來確認操作，例如：“您確定要刪除xx？刪除后不可恢復(fù)，請謹(jǐn)慎操作。”

但注意不能濫用確認彈窗，過于頻繁的確認彈窗可能會讓用戶在不仔細看內(nèi)容的情況下，習(xí)慣性地點擊“確定”，增大出錯的風(fēng)險。只在重要且不可逆轉(zhuǎn)的操作中使用。

例如刪除文件時進行二次確認，同時告知刪除后文件的位置、刪除后文件是否可以找回等一系列內(nèi)容，讓用戶對于刪除的內(nèi)容有清晰的認知；對于確認后無法再修改的信息，也最好來個再次確認，讓用戶做到心里有數(shù)。

7. 提供實時反饋

對于表單輸入這類容易出錯的場景，好的使用體驗是在輸入時就“實時”提供反饋，而不是等所有信息都填完點擊提交之后再提示錯誤。

比如字符超了、密碼格式不對，立即用紅色文字、錯誤圖標(biāo)、邊框高亮、震動動效等形式反饋出來，減少重復(fù)輸入的麻煩。

例如發(fā)動態(tài)時，如果輸入的標(biāo)題字?jǐn)?shù)不符合要求，會在標(biāo)題處有一段反饋提示，提醒用戶輸入符合要求的標(biāo)題；填寫多個表單時，如果有多個表單未填寫，每個輸入框下面都會有錯誤反饋，而且每條錯誤反饋的內(nèi)容會根據(jù)不同字段而調(diào)整，而不是用“請?zhí)顚憙?nèi)容”這種模板化的反饋。

8. 先預(yù)覽再提交

對于操作后不好修改的場景中 (比如發(fā)表文章、發(fā)布視頻、視頻渲染)，可以先給用戶看 “最終效果預(yù)覽”。確認沒問題再提交，這樣用戶就能提前發(fā)現(xiàn)錯漏，心里也踏實。

例如在發(fā)布動態(tài)的時候上傳視頻封面后，在推薦列表、視頻動態(tài)中能提前預(yù)覽封面效果，有問題可以及時修改，省去了動態(tài)發(fā)布后再去修改的麻煩；視頻軟件中渲染一個視頻通常需要幾分鐘甚至幾十分鐘，通過提供“渲染預(yù)覽”可以快速檢查錯誤減少不必要的時間浪費。 

 三、5 個設(shè)計技巧，幫助用戶從錯誤中恢復(fù)

1. 通過撤銷操作減少損失

“撤銷”功能允許用戶立即挽回錯誤，增強掌控感，減輕錯誤帶來的負擔(dān)，例如刪錯內(nèi)容、發(fā)錯郵件后，點一下就能恢復(fù)。有了這個功能，用戶用著更放心，也敢大膽嘗試各種功能。

在花瓣中采集圖片后，會提供一個撤銷的功能，方便用戶快速撤銷采集有誤的圖片；在使用微信發(fā)消息、使用郵箱發(fā)郵件的時候，也都支持在發(fā)出去幾分鐘內(nèi)撤回，盡可能幫用戶挽回錯誤。

2. 說清錯誤發(fā)生的原因

如果錯誤不可避免，需要使用通俗易懂的提示文案告訴用戶哪里出現(xiàn)了錯誤，出現(xiàn)了什么樣的錯誤，而不是用一些模板化的或是含糊不清的提示文案，讓用戶感到困惑。

例如上圖中的登錄失敗提示，會明確告知什么地方出現(xiàn)了錯誤、出現(xiàn)多次錯誤后會有什么后果、如何操作能解決錯誤，這才是一個格式的錯誤提示；填寫新增地址信息時，如果手機號碼有問題，會明確提示“手機號有誤”，而不是只說 “輸入內(nèi)容有誤”。

3. 提供下一步操作

接著上一條，不僅要說清楚錯誤的原因，還要告訴用戶“該怎么做”，引導(dǎo)用戶立即采取行動。例如添加“重試”、“返回主頁” 按鈕，引導(dǎo)用戶回到正確的操作流程里。

如果訪問的頁面有問題，可以提供返回首頁或者聯(lián)系客服的入口，讓用戶可以繼續(xù)探索其他內(nèi)容；例如蘋果的Face ID連續(xù)5次識別失敗后，系統(tǒng)會鎖定面容ID功能，并提示輸入密碼驗證后才能重新啟用。

4. 自動聚焦錯誤選項

通過自動定位和聚焦錯誤輸入項來鼓勵快速更正。發(fā)現(xiàn)錯誤后，系統(tǒng)自動定位到出錯的輸入框，縮短錯誤從識別到更正的過程。尤其在那些表單特別多的后臺頁面中，這種錯誤定位的功能還是很有必要的。

5. 用視覺設(shè)計安撫情緒

利用情感化的視覺設(shè)計，例如柔和的色彩、插圖和動效等，提供了視覺上的舒適感，緩解用戶的焦慮和緊張。這不僅是簡單的錯誤反饋，還是展現(xiàn)品牌個性的好機會。

比如谷歌瀏覽器離線時經(jīng)典的“恐龍小游戲”，讓用戶等待網(wǎng)絡(luò)連接的同時進行有趣的游戲體驗，能讓用戶沒那么煩躁。

最后

總的來說，減少錯誤的根本策略是避免不必要的差異化，并遵循熟悉的界面、交互和設(shè)計慣例。這里的“熟悉”不僅是風(fēng)格問題，更是整個用戶體驗設(shè)計的通用標(biāo)準(zhǔn)。

當(dāng)然，再標(biāo)準(zhǔn)的設(shè)計也沒法完全杜絕錯誤的發(fā)生。這時候，貼心的微設(shè)計就派上用場了——幫助用戶快速發(fā)現(xiàn)錯誤、輕松改過來。

這些細節(jié)，正是體驗設(shè)計師存在的價值，也是產(chǎn)品賦予用戶的最大信任。你還有哪些化解錯誤的小妙招呢？歡迎留言咱們一起聊聊～

轉(zhuǎn)載：優(yōu)設(shè)

蘭亭妙微（藍藍設(shè)計）www.rhtd16ji.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

因此今天蘭亭妙微UI設(shè)計公司，來講解 B 端產(chǎn)品界面的視覺風(fēng)格，聊聊在整個行業(yè)當(dāng)中視覺風(fēng)格的變化與目前的現(xiàn)狀。以及給大家說說未來應(yīng)該如何選擇自己產(chǎn)品的視覺風(fēng)格～

我們會將整體分為行業(yè)初期，萌芽期、成長期、野蠻發(fā)展期、新階段 ，每一個階段給大家總結(jié)一個最為流行的風(fēng)格，并分析這個風(fēng)格出現(xiàn)的原因，方便大家進行理解。

一、行業(yè)初期-經(jīng)典傳統(tǒng)風(fēng)

我們把時間拉回到 2012 年。在那時，Ant Design 還沒有出現(xiàn)，也沒有什么 Element、Semi Design，行業(yè)當(dāng)中最早的 B 端系統(tǒng)都是以客戶端的形式進行呈現(xiàn)。

整體風(fēng)格也非常老舊，像是那會兒的 Office、SAP、Salesforce，你可以看到都是他們青澀的模樣。

在經(jīng)典傳統(tǒng)的設(shè)計風(fēng)格當(dāng)中，會使用大面積的白色作為底色，同時在頁面中用灰色進行分割，使得整個頁面散亂搶眼，導(dǎo)致整體的視覺很難被大眾所接受，總體感覺信息較散，難以進行聚焦。

而在早期，出現(xiàn)這些老舊風(fēng)格主要有三個原因：

1. 技術(shù)框架限制：因為當(dāng)中成熟的前端框架較少，沒有太多技術(shù)棧提供給到開發(fā)進行使用，因此沒有精力將頁面做得漂亮
2. 認知不足：設(shè)計師對于客戶端、網(wǎng)頁端的設(shè)計理解認知本身不夠，做得較為粗糙，比如當(dāng)時的 Office 的界面設(shè)計也大致是如此的模樣
3. 風(fēng)格一致：早期 Windows 系統(tǒng)就是這樣的風(fēng)格，與 Windows 一致更容易被大眾所接受，因此就很難進行創(chuàng)新

關(guān)于這類風(fēng)格的產(chǎn)品，大家不要覺得這夸張，其實在目前依舊有很多產(chǎn)品會延續(xù)這個風(fēng)格。比如 醫(yī)療類產(chǎn)品、工業(yè)生產(chǎn)類系統(tǒng)，對于他們而言，能用即可，不必糾結(jié)太多。

但隨著時間的推移，行業(yè)中對于 B 端設(shè)計的要求也在逐漸變高。

二、萌芽期-清爽整潔風(fēng)

我們將時間推移到 2015 年前后，隨著行業(yè)不斷發(fā)展，在國外 Fiori、Salesforce 的出現(xiàn)讓大家意識到，這類型的 B 端產(chǎn)品也是需要設(shè)計的。

因此國內(nèi)外的很多系統(tǒng)都是在這一時間面世，像是 Ant Design、Element 都相繼發(fā)布。

由于這些設(shè)計系統(tǒng)的誕生，你會發(fā)現(xiàn)大家對于整個 B 端設(shè)計有了一點自己的想法。

在設(shè)計上，會去考慮使用 區(qū)塊劃分，將整個頁面進行規(guī)整呈現(xiàn)。

比如 SAP 在使用了 Fiori 過后，就會使整個界面更干凈。

同樣非常老牌的 Salesforce 在 2015 年的時候。也帶來了相當(dāng)大的視覺變化。整體都能感受到，整個頁面會通過不斷的分層、顏色的劃分、通過黑白灰的方式去呈現(xiàn)頁面當(dāng)中的基本信息。

三、成長期-沉穩(wěn)側(cè)黑風(fēng)

我們的時間來到 2018 年前后，在這個時間節(jié)點，很多產(chǎn)品都推出了自己的設(shè)計系統(tǒng)，對于 B 端設(shè)計風(fēng)格而言，也會提出更高的要求。

比如 Teambition 產(chǎn)品當(dāng)中，它們提供了自己的設(shè)計系統(tǒng)的內(nèi)容去指導(dǎo)整個產(chǎn)品來進行迭代和優(yōu)化。同樣 Ant Design 它們也推出了自己的 Ant Design Pro 來演示使用設(shè)計系統(tǒng)過后，能夠搭建出什么樣的產(chǎn)品。

同樣，這個時段很多產(chǎn)品也開始進行自己產(chǎn)品的視覺優(yōu)化，這時候整體的風(fēng)格是以：黑色側(cè)邊導(dǎo)航為主，然后內(nèi)容形態(tài)進行延展。

比如像有贊、Coding、微盟、飛書，之前都是這樣的設(shè)計風(fēng)格來進行呈現(xiàn)。

你會發(fā)現(xiàn)它們在整體的設(shè)計上都會更加重視頁面的分塊顏色的區(qū)隔，整體頁面的識別效率。同時這段時間爆發(fā)出來非常多的 B 端產(chǎn)品，隨后國內(nèi)都會按照側(cè)邊黑色導(dǎo)航的樣式進行進一步設(shè)計，這一定程度上提高了國內(nèi) B 端設(shè)計的下限～

四、野蠻發(fā)展期-新擬態(tài)風(fēng)

我們隨后將時間推移到 2019 年后，在這時誕生了新擬態(tài)設(shè)計風(fēng)格。

它最早是烏克蘭設(shè)計師 Alexander Plyuto 在追波和 ins 發(fā)布的一副系列作品，隨后大家發(fā)現(xiàn)非常奇特，所以得到廣泛的關(guān)注。

新擬態(tài)的設(shè)計風(fēng)格是以立體效果與浮雕元素，呈現(xiàn)更為三維立體的效果，會給人一種奇特、夢幻的界面體驗。

隨后就會有很多產(chǎn)品都開始進行跟進，比如 智能家居的產(chǎn)品、金融類產(chǎn)品都有所涉及，甚至很多 B 端產(chǎn)品也勇敢嘗試，但大多數(shù)設(shè)計師設(shè)計完過后，整體評價都不算太高。

為什么沒有大規(guī)模的推行，我覺得有 3 點原因：

1. 因為新擬態(tài)風(fēng)格整體所占面積較大，比較浪費空間。像是一個按鈕，都需要使用較大空間才能呈現(xiàn)。
2. 需要大面積的留白，但是對于 B 端設(shè)計來說無法做到，因此很難進行使用。
3. 同時很多用戶剛開始覺得好看，但隨著時間的推移，出現(xiàn)審美疲勞，因此就不太喜歡。

現(xiàn)在還會使用新擬態(tài)風(fēng)格的界面設(shè)計越來越少，大多數(shù)只會在官網(wǎng)設(shè)計的局部進行使用，這樣可以轉(zhuǎn)換視覺感受，給到用戶更好的視覺沖擊～

五、新階段-灰白風(fēng)

時間來到 2022-2024 年左右，你會發(fā)現(xiàn)很多產(chǎn)品都開始在這個時間節(jié)點進行更新。

像我們熟知的 飛書、有贊、微盟、ONES、Coding，再到 Ant Design、Salesforce，你會發(fā)現(xiàn)非常多的產(chǎn)品都在進行界面風(fēng)格上的迭代。

對于這個風(fēng)格，我們愿意叫它為 灰白風(fēng)。

整體頁面是以 灰色和白色 進行的頁面劃分，在分布上灰色占據(jù)弱側(cè)信息，白色占據(jù)核心信息，進而形成對頁面內(nèi)容的劃分。

聊到這里，可能有部分同學(xué)不太理解，這里我們以飛書管理后臺的迭代作為示例，給大家進行講解。

在 2018 年，飛書管理后臺的第一個版本，采取的就是沉穩(wěn)側(cè)黑風(fēng)，

在 2022 年，飛書的管理后臺開始改變?yōu)榛野罪L(fēng)格

由于業(yè)務(wù)的疊加，2023 年時，在此基礎(chǔ)上增加了頂部導(dǎo)航的業(yè)務(wù)維度，最終形成了現(xiàn)在這樣的界面。

為什么這類型的風(fēng)格會大受追捧，我覺得有以下幾個原因

1. 減少信息層級，給用戶減負：之前沉穩(wěn)側(cè)黑風(fēng)格，會發(fā)現(xiàn)頁面明顯進行大面積的分割，導(dǎo)致視覺感受出現(xiàn)較大差異。現(xiàn)在只用灰色作為底，去區(qū)分主副信息這樣會更簡單的突出主要信息內(nèi)容。
2. 平臺型產(chǎn)品更容易嵌入：因為國內(nèi) B 端產(chǎn)品大多需要依附“釘釘、企微、飛書”三大平臺，因此使用灰白風(fēng)能夠讓自己產(chǎn)品快速嵌入，不需要過多調(diào)整。如果你的產(chǎn)品是沉穩(wěn)側(cè)黑風(fēng)，那結(jié)果想都不敢想...
3. 更容易進行適配：針對多產(chǎn)品的業(yè)務(wù)，也能夠使用同一套業(yè)務(wù)完整呈現(xiàn)才會更加合理。比如飛書的灰白風(fēng)，在飛書的其他很多產(chǎn)品里面也會存在

關(guān)于設(shè)計風(fēng)格，我們這篇只是講解了過去的風(fēng)格內(nèi)容，下篇文章我們講解當(dāng)前整個 B 端產(chǎn)品的設(shè)計梳理，講解了更為重要的四種風(fēng)格。

轉(zhuǎn)載：優(yōu)設(shè)

蘭亭妙微（藍藍設(shè)計）www.rhtd16ji.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

一、前言

二、三大 AI 交互范式場景化落地應(yīng)用

（一）嵌入式交互：復(fù)雜表單智能填寫助手

1. 填充識別類：規(guī)則標(biāo)準(zhǔn)化信息，AI 自動識別提取并一鍵填入，搭配「AI 預(yù)填」標(biāo)簽狀態(tài)提示。如上傳商品包裝圖，自動識別品類、工藝、包裝規(guī)格等屬性自動錄入，替代手動打字，大幅節(jié)省填報時間。
2. 推薦優(yōu)化類：商品標(biāo)題、主圖等創(chuàng)意類內(nèi)容，AI 智能生成優(yōu)化方案，只推薦不強制預(yù)填，支持商家自主微調(diào)、手動確認錄入，兼顧智能推薦與個性化需求，縮短人工審核周期。

（二）伴隨式交互：全場景主動經(jīng)營診斷助手

1. 主動觸達，前置服務(wù)

   

   AI 助手全局入口以流光呼吸感動效 + 輪播詞條輕量化吸引關(guān)注，實時推送店鋪流量、經(jīng)營數(shù)據(jù)關(guān)鍵動態(tài)；商家停留任意業(yè)務(wù)頁面時，系統(tǒng)自動識別潛在經(jīng)營隱患，如主圖尺寸影響點擊率、看播時長下滑等，提前彈窗輕量提醒，不等商家提問便主動提供服務(wù)。

    

   覆蓋直播中控臺、數(shù)據(jù)診斷、店鋪運維、電商推廣等全場景，核心指標(biāo)直觀外露，優(yōu)化建議一鍵可查。
    
2. 連續(xù)洞察，可解可追溯

   

   AI 輸出數(shù)據(jù)結(jié)論與經(jīng)營建議時，同步展示推理邏輯、數(shù)據(jù)來源摘要，打造可解釋式 AI；并基于當(dāng)前場景預(yù)判商家后續(xù)需求，主動延伸經(jīng)營問題排查鏈路，從單點答疑升級為系統(tǒng)性問題解決方案，降低商家決策與信息獲取成本。
    

（三）托管式交互：低介入安心服務(wù)管家

1. 可視化配置，建立信任

    

   搭建直觀的策略配置面板 + 消費者端效果預(yù)覽，商家可按售前咨詢、售后退款、催單答疑等細分場景，自定義 AI 回復(fù)規(guī)則，配置即所見，讓抽象 AI 能力變得可控可預(yù)判，消解商家信任顧慮。

   

2. 狀態(tài)透明化，順滑人機接力

   

   全域?qū)崟r展示 AI / 人工接待狀態(tài)，會話列表智能分組、單人接待狀態(tài)動態(tài)更新；遇復(fù)雜訴求、用戶負面情緒等 AI 無法應(yīng)答場景，會話自動流轉(zhuǎn)至人工待處理隊列，高亮 + 音效雙重預(yù)警，提醒客服快速接管。

    

   人工接手后 AI 自動暫停接待，同步生成會話摘要，幫助客服快速厘清前因后果；客服可一鍵恢復(fù)托管，新會話也可自動重啟 AI 接待，形成高效人機協(xié)同閉環(huán)。同時在消費者端明確標(biāo)識 AI / 人工身份，保障服務(wù)感知連貫穩(wěn)定。
    

三、搭建全鏈路智能化感知體系

1. 視覺體系傳承適配：沿用百度成熟 AI 標(biāo)識與品牌主色，借用用戶既有認知，降低 AI 功能學(xué)習(xí)成本；針對 B 端界面信息密集的特性，在原有智能色彩基礎(chǔ)上降低飽和度視覺降噪，定制適配后臺操作場景的淺色組件庫。
2. 多維感官協(xié)同反饋：彌補淺色體系 AI 狀態(tài)辨識度不足，疊加專屬狀態(tài)動效、場景聲音提醒等多維感知方式，如 AI 智能接待掃光動畫、消息預(yù)警音效，讓商家在復(fù)雜界面中，快速感知 AI 運行狀態(tài)、任務(wù)進度，保障信息傳遞高效精準(zhǔn)。

四、設(shè)計核心：以商家提效為中心的價值賦能

一、配置密碼顯示 / 隱藏切換功能

二、設(shè)置規(guī)范無障礙專屬標(biāo)簽

三、前置展示密碼設(shè)置規(guī)則

1. Adobe：采用復(fù)選框清單式校驗，滿足一條規(guī)則對應(yīng)條目自動變綠、打上勾選標(biāo)記，實時可視化校驗；
2. Dropbox：以靜態(tài)列表完整羅列密碼要求，引導(dǎo)用戶逐條對照輸入。

四、實時密碼強度可視化校驗

1. 色彩進度條：以紅（弱）→黃（中）→綠（強）漸變配色，直觀區(qū)分密碼安全等級；
2. 規(guī)則清單逐項核驗：逐條標(biāo)注大小寫字母、數(shù)字、特殊字符、位數(shù)等要求，完成即標(biāo)記，清晰明了。

五、預(yù)留清晰的忘記密碼找回路徑

密碼框核心設(shè)計原則總結(jié)

1. 顯隱切換：提升密碼輸入準(zhǔn)確率，精簡表單流程；
2. 規(guī)范標(biāo)簽：適配無障礙訪問，避免用戶認知困惑；
3. 預(yù)顯規(guī)則：前置告知要求，規(guī)避重復(fù)操作失誤；
4. 實時校驗：可視化強度反饋，提升輸入設(shè)置效率；
5. 便捷找回：完善賬號恢復(fù)路徑，降低用戶使用門檻。

蘭亭妙微（藍藍設(shè)計）www.rhtd16ji.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

蘭亭妙微UI設(shè)計公司：互聯(lián)網(wǎng)時代，品牌的節(jié)日營銷是重要的傳播節(jié)點之一。

從520、七夕到中秋、圣誕、元旦、春節(jié)，用戶情緒在節(jié)日中被自然放大，也為品牌提供了集中觸達用戶、強化品牌認知的重要窗口。

在百度品牌營銷中，節(jié)日營銷已經(jīng)成為高頻且穩(wěn)定的投放節(jié)點。

品牌通過開屏、信息流、品專等多觸點場景，在短時間內(nèi)形成曝光，快速放大聲量。

隨著營銷環(huán)境的變化，用戶的注意力愈發(fā)稀缺，節(jié)日營銷的定義也在發(fā)生變化。

節(jié)日營銷從單一的品牌曝光、信息觸達，逐漸走向情緒溝通和心智的建立。

節(jié)日正在從一個傳播節(jié)點，轉(zhuǎn)變?yōu)槠放七M入用戶情緒的入口。

這也是我們重新思考品牌節(jié)日營銷設(shè)計的起點。

節(jié)日營銷設(shè)計為什么升級

當(dāng)前節(jié)日設(shè)計越來越多趨同，問題也開始顯現(xiàn)：

用戶看到了節(jié)日，卻沒有記住品牌。

中秋是月亮、圣誕是雪花、春節(jié)是紅色。這些符號足夠“像節(jié)日”，但不再夠打動人。

過去的節(jié)日營銷設(shè)計，本質(zhì)是一種標(biāo)準(zhǔn)化程序化的換膚，

在已有樣式的基礎(chǔ)上替換為顏色、疊加元素、快速形成節(jié)日版本。

這種方式高效，但是有明顯的局限：

用戶看到，但沒有情緒共鳴；品牌出現(xiàn)，但是沒有留下記憶；

當(dāng)品牌開始從「曝光」走向「心智」，

設(shè)計，不再只是做節(jié)日視覺設(shè)計，而是要承擔(dān)新的角色，

通過節(jié)日，幫助品牌與用戶建立一次情緒的鏈接。

設(shè)計的角色，正在發(fā)生變化

在品牌營銷體系中，設(shè)計的角色正在從“視覺執(zhí)行”走向“情緒表達”。

過去，設(shè)計解決的是好不好看；現(xiàn)在，設(shè)計需要回答的是能不能被感知、能不能被記住、能不能觸發(fā)行動；

這種角色的變化本質(zhì)來自兩個點：

1.用戶從接受信息到情緒共鳴，用戶不再被信息打動，而更容易被情緒打動；

2.品牌從曝光到轉(zhuǎn)化，品牌不僅需要被看到，更需要被記住、被選擇；

因此，設(shè)計的價值也在升級，從“表達節(jié)日”升級到“激活情緒”。

嘗試讓節(jié)日、文化、品牌營銷進行融合。通過設(shè)計，讓節(jié)日設(shè)計不僅被看見，而是被感受到被記住。

從節(jié)日元素，到節(jié)日情緒

在過去一年的實踐中，我們形成了一個清晰的設(shè)計路徑，

不再思考“用什么元素”，而是優(yōu)先回答“表達什么情緒”，

整體設(shè)計流程我們拆分成四步：

1.文化分析，找情緒；

2.元素提煉，確定表達；

3.情感敘事，建立引導(dǎo)；

4.商業(yè)場景，承接轉(zhuǎn)化；

最終形成一套設(shè)計方法：先定義情緒，再選擇表達，最終通過場景完成轉(zhuǎn)化。

設(shè)計的不只是畫面，而是一段完整的情緒體驗。

下面圍繞中秋、圣誕、春節(jié)三個典型節(jié)日展開，

案例一｜中秋：讓月色承載情緒

在中秋節(jié)的設(shè)計中，我們先思考中秋的情緒是什么？

中秋節(jié)更偏向安靜與溫暖，它是一種關(guān)于思念和團圓的情緒。

在設(shè)計中，我們沒有強調(diào)元素的豐富性，而是讓月光成為畫面的核心情緒來源。

整張畫面被橙色的月色包裹，品牌禮盒作為視覺中心，燈籠與窗棱構(gòu)建遠近景的空間層次，讓情緒在畫面中緩慢鋪開。

用戶感受到的，不只是節(jié)日，而是一種被傳遞的心意。

不是月亮本身，而是月光下的情緒。

案例二｜圣誕節(jié)：用星光建立引導(dǎo)

與中秋節(jié)這種傳統(tǒng)節(jié)日不同，圣誕節(jié)則是一種外放型的節(jié)日情緒，它的文化核心是驚喜和給予。

在眾多圣誕符號中，我們選擇了一個更具文化指向的元素：圣誕星（伯利恒之星）。

在圣誕文化中，這顆星象征著“指引與希望”——它引導(dǎo)人們找到方向，也成為光明與祝福的象征。

因此，圣誕星光不僅是裝飾元素，而是承載節(jié)日意義的核心符號。

基于這一語義，我們讓“星光”成為整個畫面的視覺起點與敘事線索。

畫面中，星光從上方落下，形成一條清晰的視覺路徑，最終聚焦品牌產(chǎn)品。

用戶的視線隨著星光的軌跡移動，從節(jié)日氛圍自然過渡到品牌信息。

深色的夜空與雪景構(gòu)建靜謐的節(jié)日空間，而星光成為畫面中最有溫度的存在。

我們以星光為核心視覺線索，讓星光軌跡貫穿整個設(shè)計場景。

從開屏的星光破窗，到信息流的星軌延展，再到品專的星光匯聚，用戶在瀏覽過程中被星光自然引導(dǎo)，完成從視覺吸引到情感共鳴的轉(zhuǎn)化。

星光不只是點綴，而是連接節(jié)日與品牌的路徑。

案例三｜春節(jié)：讓節(jié)日流動起來

春節(jié)的復(fù)雜性，不在于元素的豐富，而在于情緒的多樣。

它既有熱鬧的年味，也有現(xiàn)實的消費動機，還有天然的互動氛圍。

因此我們不再堆疊符號，而是將春節(jié)拆分為三種情緒的表達。

基于春節(jié)用戶三類核心情緒，我們將方案聚焦為三個方向，表達春節(jié)文化溫度的流動，

年味：通過傳統(tǒng)節(jié)日元素構(gòu)造氛圍，讓品牌自然進入節(jié)日語境；

好禮：強化商品表達，讓內(nèi)容本身成為轉(zhuǎn)化入口；

趣味：結(jié)合生肖與互動玩法，提升參與和傳播；

通過傳統(tǒng)節(jié)日元素營造氛圍，幫助品牌營造節(jié)日氛圍和加深品牌記憶；

我們選取了福字、生肖、紅包等高認知度的春節(jié)元素，幫助品牌快速進入春節(jié)語境，快速建立春節(jié)氛圍，幫助品牌進入春節(jié)語境。

春節(jié)期間，用戶對送禮買禮品的接受程度是全年最高。

因此在「好禮」這個方向中，我們嘗試打破傳統(tǒng)按鈕形式，讓商品本身成為入口。

在開屏、信息流、品專、品牌百看中，品牌商品都可以以更直觀、更強勢曝光的樣式出現(xiàn)。

春節(jié)期間，用戶更愿意停留、互動，也更容易參與輕量玩法。

我們通過生肖IP的設(shè)計，并結(jié)合簡單的游戲化互動，讓品牌在春節(jié)期間不只是被看見，而是被“玩起來”。

最終讓春節(jié)不只是被看見，而是讓用戶感受到一種正在發(fā)生的熱鬧。

當(dāng)節(jié)日設(shè)計開始有溫度

在過去一年品牌廣告打造了七夕、中秋、圣誕、元旦、馬年CNY等節(jié)日營銷包，

在節(jié)日營銷方案上線前后，我們從用戶、客戶、品牌資產(chǎn)三個維度進行了對比，結(jié)果呈現(xiàn)出清晰的增長趨勢：

• 節(jié)日營銷方案上線后，用戶對內(nèi)容的關(guān)注度顯著提升，點擊率提升48%；

• 設(shè)計價值的前置，也帶來了客戶決策方式的變化，客戶樣式復(fù)購率提升71%；

• 設(shè)計資產(chǎn)復(fù)用率達到90%，多行業(yè)多節(jié)點快速適配，支撐節(jié)日營銷規(guī)模化擴展。

節(jié)日，從來不只是營銷節(jié)點，它是文化的縮影，是情緒的放大器，

更是品牌與用戶之間，最自然的一次鏈接機會。

當(dāng)設(shè)計能夠闡述節(jié)日背后的文化語義，并用合適的方式將情緒傳遞出去，

品牌就不再只是出現(xiàn)，而是真正被用戶感知、記住，甚至產(chǎn)生鏈接。

未來，品牌營銷設(shè)計不再只是追求樣式的創(chuàng)新，

而是回到一個更本質(zhì)的問題：

品牌，如何被用戶感受到。

而“有溫度”的設(shè)計正是這個問題的答案。

轉(zhuǎn)載：IXDC

蘭亭妙微（藍藍設(shè)計）www.rhtd16ji.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

蘭亭妙微UI設(shè)計公司:

先看一個”付款報錯”的現(xiàn)場

時間：新店鋪支付模塊上線第二天，早上 10 點。

小A 正在工位上喝咖啡，客服群突然開始連環(huán)炸：

用戶A： “我付完錢了，訂單怎么還顯示’待支付’？”

用戶B： “我明明沒付成功，為什么錢被扣了？”

用戶C： “我取消了訂單，錢什么時候退給我？”

小A 趕緊打開后臺一看，傻眼了——

同一批訂單里，“待支付”“支付中”“已支付”“支付失敗”“已退款”五種狀態(tài)交叉打架，有的訂單同時出現(xiàn)在”待支付”列表和”已支付”列表里，還有幾筆訂單錢已經(jīng)進了商戶賬戶、但訂單狀態(tài)還停在“支付中”。

她翻出前一天熬夜畫的支付鏈路時序圖，越看越冷汗：

• 根本沒畫狀態(tài)機——訂單狀態(tài)和支付狀態(tài)揉在同一張表里，一個字段搞定一切；
• 只做了同步跳轉(zhuǎn)——支付結(jié)果全靠前端跳回來調(diào)一次接口，沒做異步回調(diào)；
• 沒做冪等——用戶多點幾次”確認支付”，就出現(xiàn)了重復(fù)扣款；
• 沒有主動查詢兜底——只要微信/支付寶的回調(diào)丟一次，訂單就永遠”支付中”。

小A 硬著頭皮撥通了老張的電話。

老張聽完小A 的描述，只回了一句：

“你這不是‘支付接口寫錯了’，是把支付當(dāng)成了一個動作。它不是一個動作，是一條鏈路——而鏈路的地基，就是三件事。”

接著老張發(fā)來一段話，小A 把它存成了備忘：

做支付產(chǎn)品，要先分清三件事——

一、交易流：用戶 → 訂單；

二、資金流：錢 → 賬戶；

三、信息流：狀態(tài) → 系統(tǒng)同步。

這三條流在理想情況下一一對應(yīng)，但在真實生產(chǎn)環(huán)境里，它們永遠會錯位。你的產(chǎn)品工作，就是把這些錯位“兜回來”。

先澄清兩個認知

在正式拆關(guān)之前，先澄清兩個小A 一開始就搞混的認知——也是 90% 新手都會栽的坑：

認知一：支付不是”一個接口”，是”一條鏈路”

很多人以為”接入微信支付”= 調(diào)一個 API。錯。一次完整的支付涉及 7 個系統(tǒng) + 2 個異步回調(diào) + N 個狀態(tài)流轉(zhuǎn)。后面關(guān)卡二會展開。

認知二：訂單狀態(tài)機 ≠ 支付狀態(tài)機

訂單篇講過訂單狀態(tài)機，但訂單狀態(tài) ≠ 支付狀態(tài)。一個訂單”已支付”不代表錢真到賬了，可能只是”支付成功回調(diào)到了”。這兩個狀態(tài)機必須分開設(shè)計、雙軌管理。后面關(guān)卡三會展開。

上篇拆 3 道關(guān) · 先把”地基”打穩(wěn)

支付結(jié)算整套完整拆解要過 7 道關(guān)卡，上下篇分開講：

上篇（本篇）· 地基三關(guān) —— 錢怎么進來

第 1 關(guān) · 支付方式全景 —— 用戶能用什么付錢

第 2 關(guān) · 支付鏈路 —— 點“付款”之后發(fā)生了什么

第 3 關(guān) · 支付狀態(tài)機 —— 錢到底在哪一步

下篇 · 進階四關(guān) —— 錢怎么不出事

第 4 關(guān) · 對賬 —— 財務(wù)最怕出事的環(huán)節(jié)

第 5 關(guān) · 分賬 —— 多方分錢怎么分

第 6 關(guān) · 退款 —— 錢怎么原路退回

第 7 關(guān) · 異常資金池 —— 最后一道防線

上篇講完，你可以獨立設(shè)計一個“能把錢收進來”的支付系統(tǒng)；下篇講完，才能做到”錢進來之后不出事”。

第一關(guān)：支付方式全景圖——用戶能用什么付錢

小A 的第一個反問：“不就是微信、支付寶、銀行卡嗎？”

老張笑：“電商平臺的收銀臺里，平均要接 12-18 種支付方式。你要是只知道三種，寫出來的 PRD 就只能支撐一個最小 MVP。”

為什么支付方式這么多

每一種支付方式的存在，都對應(yīng)著某個特定場景下用戶最低阻力的選擇：

• 用戶買 9.9 元的小商品 → 愿意用微信（免密）
• 用戶買 999 元的家電 → 愿意用花唄（分期）
• 用戶做跨境代購 → 只能用 PayPal 或境外卡
• 用戶在門店自提 → 愿意刷 POS（現(xiàn)場核銷）
• 企業(yè)采購 → 要求對公轉(zhuǎn)賬開發(fā)票

產(chǎn)品經(jīng)理的第一課：不是選“最好的支付方式”，是覆蓋“用戶觸達時的最低阻力路徑”。

按資金流向分類

每種支付方式的產(chǎn)品要點

產(chǎn)品決策：選支付方式的 3 個原則

原則一：用戶畫像優(yōu)先

品牌 X 的數(shù)據(jù)：

• 30 歲以下用戶 → 70% 用微信支付
• 40 歲以上用戶 → 50% 用支付寶
• 高客單（>1000 元）→ 35% 選花唄分期
• 跨境商品 → 必須接 PayPal 和境外卡

如果不接花唄，高客單商品轉(zhuǎn)化率會下降 15-20%。

原則二：費率與到賬時效平衡

原則三：接入成本要控制

每接一種支付方式 = 一套對接 + 一套回調(diào) + 一套對賬 + 一套退款。不要盲目追求“支付方式最全”，要評估 ROI。

第二關(guān)：支付鏈路——點”付款”之后發(fā)生了什么

小A 的第二個反問：“不就是前端調(diào)個 API 嘛？”

老張說：“這也是你整天對不上賬的根因——你以為支付是一個動作，它其實是一條鏈路。”

7 個系統(tǒng)跳數(shù)（完整時序圖）

從用戶點擊”立即支付”按鈕，到最終”錢到賬”，一筆支付要經(jīng)過 7 個系統(tǒng)角色 × 2 次異步回調(diào)：

7 個跳數(shù)的產(chǎn)品要點

為什么第 10 步最容易出事

三個真實事故（品牌 X 上月發(fā)生）：

1. 回調(diào)丟失（網(wǎng)絡(luò)抖動）：三方發(fā)了通知，訂單系統(tǒng)沒收到。訂單狀態(tài)還停在”支付中”，用戶付了錢訂單沒更新。
2. 回調(diào)延遲（支付系統(tǒng)擁堵）：訂單系統(tǒng)等了 35 分鐘才收到回調(diào)，但訂單已因支付超時自動取消，結(jié)果”錢后到賬”，變成異常資金。
3. 重復(fù)回調(diào)（三方重試策略）：三方 3 秒內(nèi)發(fā)了 3 次回調(diào)，訂單系統(tǒng)沒做冪等，把庫存扣了 3 次，用戶收到 3 條短信。

這三個事故的解法都寫在訂單篇下篇“支付三道防線”里——但真正在支付結(jié)算模塊里實現(xiàn)的，是這些：

支付鏈路兜底設(shè)計

防線一：被動回調(diào) + 主動查詢雙保險

– 三方通知到 → 立即更新（最快路徑）

– 超過 30 秒沒通知 → 訂單系統(tǒng)主動反查一次

– 每 30 秒主動查詢，最多查 10 次（共 5 分鐘）

– 任一次成功即完成支付閉環(huán)

防線二：全鏈路冪等

– 支付單號（而非訂單號）作為冪等鍵

– 同一支付單號的任何操作（成功通知/失敗通知/查詢響應(yīng)）都要冪等

– 重復(fù)請求的返回值必須和第一次請求一致

防線三：異常資金池

– 所有”錢進賬但找不到訂單”或”訂單已取消但錢到了”的交易，進入異常池

– 72 小時內(nèi)必須處理完：原路退回 / 人工對賬 / 轉(zhuǎn)公司應(yīng)付賬款

– 詳見關(guān)卡七

一個產(chǎn)品小心機

為什么用戶看到的是“支付中”而不是“支付成功”？

答：因為用戶點擊的一刻，錢還沒扣。扣款發(fā)生在第 8 步，那時用戶可能已經(jīng)退出 App 了。

好的設(shè)計：

• 用戶點擊 → 顯示“支付中”
• App 輪詢訂單系統(tǒng)（5 秒一次）
• 一旦訂單系統(tǒng)收到第 10 步回調(diào) → 推送給 App → 顯示“支付成功”

壞的設(shè)計（小A 第一版設(shè)計）：

• 用戶點擊 → 直接顯示“支付成功”（基于樂觀假設(shè)）
• 結(jié)果第 10 步回調(diào)失敗 → 訂單實際沒支付成功 → 用戶以為付款了但系統(tǒng)里是“待支付” → 客訴

第三關(guān)：支付狀態(tài)機——錢到底在哪一步

小A 的第三個反問：“訂單狀態(tài)機不就夠了嗎？為什么還要單獨的支付狀態(tài)機？”

老張說：“訂單關(guān)心的是‘貨的進度’，支付關(guān)心的是‘錢的進度’。這兩件事在 80% 的時間里是同步的，但在 20% 的異常時刻會錯位——而恰恰是那 20% 決定了你的產(chǎn)品水平。”

支付狀態(tài)全集

一筆完整的支付，在產(chǎn)品設(shè)計上至少要覆蓋 8 種狀態(tài)：

8 種狀態(tài)說明

+ 1 個兜底狀態(tài)：異常資金 — 第 7 關(guān)展開。

訂單狀態(tài)機 × 支付狀態(tài)機：映射矩陣

這是小A 在第一版 PRD 里漏掉的——她只設(shè)計了訂單狀態(tài)機，沒有獨立的支付狀態(tài)機，結(jié)果”訂單已支付”和”支付成功”混在一起，對賬時根本拆不清。

矩陣的價值：

• 綠色（? 合法）：組合成立，不用管
• 紅色（— 非法）：組合不該發(fā)生，PRD 里必須明確”不可進入”
• 橙色（? 異常）：組合可能發(fā)生但不合理，是產(chǎn)品必須設(shè)計兜底的地方

小A 上月踩的坑——“已取消 + 已支付”組合（矩陣右下橙色加粗格）：

訂單被超時取消，但支付回調(diào) 30 分鐘后才到。結(jié)果訂單是”已取消”，支付是”已支付”。這筆錢就掛在了系統(tǒng)里，進入異常資金池。

解法（關(guān)卡七深度展開）：

1. 檢測到“訂單已取消 + 支付已到賬” → 立即進入異常池
2. 系統(tǒng)自動判斷：補單（讓訂單從“已取消”恢復(fù)為“已支付”）或原路退款
3. 72 小時內(nèi)必須閉環(huán)

支付狀態(tài)機的 3 條鐵律

鐵律一：訂單狀態(tài)由支付狀態(tài)驅(qū)動

很多新手 PRD 的錯誤寫法：

“用戶支付成功后，把訂單狀態(tài)改為’已支付’。”

這句話邏輯上沒問題，但在系統(tǒng)層面是反的。正確的是：

“支付狀態(tài)機從’支付中’流轉(zhuǎn)到’已支付’時，觸發(fā)訂單狀態(tài)機從’待支付’流轉(zhuǎn)到’已支付’。”

區(qū)別在于：支付狀態(tài)是因，訂單狀態(tài)是果。如果把它們耦合在一個狀態(tài)機里，就做不到獨立兜底。

鐵律二：所有狀態(tài)變更必須帶“來源”

字段設(shè)計：

payment_status_log:

– payment_id: 支付單號

– from_status: 變更前狀態(tài)

– to_status: 變更后狀態(tài)

– source: 變更來源（user / system / callback / reconcile / manual）

– operator: 操作人（用戶ID / 系統(tǒng)名 / 財務(wù)人員）

– timestamp: 變更時間

– remark: 備注（必填）

為什么必須帶來源？因為財務(wù)對賬、客訴排查、合規(guī)審計，三個場景都要追溯“是誰讓它變成這個狀態(tài)的”。

鐵律三：每個異常態(tài)都要有退出通道

支付狀態(tài)機里最容易出事的”死狀態(tài)”：

• 支付中 → 過了 1 小時還沒收到回調(diào)：要么主動查詢、要么超時關(guān)閉
• 部分支付 → 另一通道長時間未到賬：要么回滾已到賬部分、要么提示用戶繼續(xù)
• 異常資金 → 不能永久卡在這里，72 小時內(nèi)必須處理

任何狀態(tài)都要有“進入規(guī)則 + 退出規(guī)則”，不能只有進入沒有退出。

一個小A 踩過的典型坑

場景：品牌 X 上線”組合支付”，允許用戶用”積分 + 微信”支付。

小A 第一版設(shè)計：

• 積分扣減成功 → 訂單狀態(tài)“已支付”
• 微信支付再進行

問題：積分成功了但微信支付失敗，訂單狀態(tài)已經(jīng)是”已支付”但實際只支付了積分部分。

正確設(shè)計：

• 積分扣減成功 → 訂單狀態(tài)“部分支付”
• 微信支付成功 → 訂單狀態(tài)“已支付”
• 微信支付失敗 → 回滾積分扣減 → 訂單狀態(tài)“待支付”

關(guān)鍵：組合支付必須有“部分支付”這個中間態(tài)，而不是每個支付通道成功就是”已支付”。

自查清單：你的支付地基穩(wěn)不穩(wěn)

訂單篇問的是“訂單系統(tǒng)扎不扎實”和“抗不抗壓”，支付篇上篇先問一件事：地基穩(wěn)不穩(wěn)。能答對 3 題以上的，才好進下篇的對賬、分賬、退款、異常資金池。

支付地基（4 題）

1. 所有支付通道都有“被動回調(diào) + 主動查詢”雙保險嗎？ 只靠被動回調(diào)=錢進賬但訂單沒更新

2. 所有支付接口都做了冪等嗎？ 用”支付單號”做冪等鍵，不是訂單號——重復(fù)回調(diào)必須識別出來

3. 訂單狀態(tài)機和支付狀態(tài)機是獨立的嗎？ 而不是一個字段 status 揉完訂單和支付

4. 支付方式的接入是按“用戶畫像 × 客單價 × 資金成本”選的嗎？ 還是上來先接個微信和支付寶了事

總結(jié)：上篇 · 6 條支付地基認知

一句話總結(jié)上篇： 支付系統(tǒng)的地基，不是”接完三個通道就完事”，而是把一條鏈路、一張雙軌狀態(tài)機、一套兜底與冪等，都提前畫清楚。地基穩(wěn)了，下篇才有資格談”能扛”。

蘭亭妙微（藍藍設(shè)計）www.rhtd16ji.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

一、背景概述

插圖的使用已有 10,000 年的歷史。最早的圖畫之一是西班牙發(fā)現(xiàn)的手部輪廓圖，距今已有 66,000 多年歷史。隨著互聯(lián)網(wǎng)的出現(xiàn)，大約在 1997 年，插圖的使用逐漸增多，谷歌的每日涂鴉和紅牛能量飲料就是其中的典型例子，包括國內(nèi)的百度，它們都在將具有特殊意義的插圖融入產(chǎn)品中。

在過去插圖通常使用鉛筆、粉筆、鋼筆、蝕刻畫和顏料完成，但現(xiàn)在經(jīng)過技術(shù)的發(fā)展我們可以通過更智能的方式來呈現(xiàn)插圖；

一個好的插圖還可以更好地生動地傳達信息，我們?nèi)绾未_定最合適的插圖風(fēng)格？插圖怎么才能體現(xiàn)品牌感？怎么能引起用戶群體的共鳴？對于內(nèi)容，哪種類型的插圖最能強調(diào)產(chǎn)品特性，本篇內(nèi)容分享了相關(guān)的案例，并解析如何針對不同用戶群體確定產(chǎn)品插圖風(fēng)格；

1、當(dāng)代產(chǎn)品設(shè)計中插圖的戰(zhàn)略價值

品牌差異化

以互聯(lián)網(wǎng)產(chǎn)品為例，現(xiàn)在市場上隨便拿出來個產(chǎn)品都會有一堆競品出現(xiàn)，那如何在眾多產(chǎn)品中體現(xiàn)自己產(chǎn)品的特性呢，除了功能層的差距外，無非就是“看和用”這個方面了，我們以看為例，像Ant Design的「科技溫度」風(fēng)格、Discord的「夜光貼紙」風(fēng)格，都展現(xiàn)了產(chǎn)品的個性化，甚至說從插圖風(fēng)格就能get到產(chǎn)品是做什么行業(yè)的；

信息傳達

當(dāng)情況挺復(fù)雜的時候，要是全靠大段大段的文字去講清楚，用戶可能得費不少勁才能弄明白。這時候，要是有插圖來幫忙，往往就能直接把意思給展現(xiàn)出來，讓用戶能更快地抓住信息的核心意思，例如醫(yī)療類APP用插圖替代專業(yè)術(shù)語；

情感化連接量化

好的插圖不僅起到美化視覺信息傳達的作用，也能夠?qū)I(yè)務(wù)起到數(shù)據(jù)方面的提升，例如多鄰國的插圖表情，他們在2023年的調(diào)研數(shù)據(jù)上顯示ip系統(tǒng)提升用戶學(xué)習(xí)時長28%，Headspace冥想插圖動效減少用戶焦慮指數(shù)；

二、如何設(shè)計出好的插圖

2.1 受眾群體

不同的群體對于認知和喜好不同，首先就要明確是給誰做，每個產(chǎn)品都有自己用戶畫像，拿到用戶畫像去進行拆解設(shè)計目標(biāo)，例如年齡在18-25歲，這就決定了設(shè)計風(fēng)格偏年輕化，女性用戶群體占比70%，決定了色系不能使用過多的冷色系（產(chǎn)品主色如果不是按照群體來的，那當(dāng)我沒說），在例如是一線還是二線三線，職業(yè)分布如何，這些拆解出來后，方向不就確定了嗎，無非就是通過受眾群體做減法，減少無用的腦暴；

2.2 設(shè)計原則體系

搭建插圖系統(tǒng)和設(shè)計規(guī)范流程是一致的，都需要在最基礎(chǔ)的設(shè)計原則框架下完成，否則就脫離了基本的體驗；

信息傳達的精準(zhǔn)性

• 視覺降噪原則：構(gòu)圖簡單，突出核心表達信息，避免過渡裝飾干擾用戶

• 語言符號化：使用行業(yè)共識的符號做為基礎(chǔ)形象進行設(shè)計，降低認知成本以及適配國際化，例如網(wǎng)絡(luò)中斷使用wifi、球形網(wǎng)絡(luò)；

情感共鳴的層次化

• 場景關(guān)聯(lián)：除了基礎(chǔ)的插圖，在特定場景下的插圖也要預(yù)判用戶在當(dāng)前場景下的情緒變化，通過插圖來提升用戶情緒峰值，例如社區(qū)產(chǎn)品中，用戶成功發(fā)布一個帖子，給用戶反饋的插圖應(yīng)當(dāng)是開心、活躍讓用戶感受到產(chǎn)品的情緒價值；

• 動態(tài)情感曲線：在新手引導(dǎo)中通過每一步的交互流程來變化插圖表達的情緒，例如開始引導(dǎo)時突出表達信息，在一個流程結(jié)束時強化氛圍鼓勵用戶，用戶情緒進度期待→奮斗→高昂，促進用戶進一步操作；

品牌基因滲透

• 視覺原子構(gòu)建：提取品牌色彩、標(biāo)志性符號，形成基礎(chǔ)的插圖基因庫；

• 品牌故事元素貫穿全場景，例如茶顏悅色將古風(fēng)和現(xiàn)代插圖風(fēng)格結(jié)合，創(chuàng)造了獨特的品牌調(diào)性，并且每個插圖場景都在傳達品牌故事；

適配原則

• 多端一致性：能夠三端自適應(yīng)適配尺寸，在小尺寸屏幕下插圖的識別性是否會出現(xiàn)問題；

• 擴展性：在各大節(jié)日時插圖是否能夠結(jié)合當(dāng)前節(jié)日擴展，例如春節(jié)時插圖是否可以添加燈籠煙花相關(guān)元素；

2.3 風(fēng)格系統(tǒng)構(gòu)建

風(fēng)格定位

插圖風(fēng)格系統(tǒng)是品牌視覺語言的延伸，需通過基因提煉-規(guī)則制定-動態(tài)迭代的三層框架實現(xiàn)規(guī)模化應(yīng)用；提到喜茶能想到的是描邊黑白風(fēng)格插圖，茶顏悅色就能想到古風(fēng)，而提到飛書我們就能想到極簡具有規(guī)則的形狀插圖，這就是通過插圖風(fēng)格提升用戶對產(chǎn)品認知；

風(fēng)格系統(tǒng)四個緯度

前面每一步的分析都是為執(zhí)行輔助

三、插圖應(yīng)用場景

3.1 核心功能

通過視覺表達降低用戶認知負荷，引導(dǎo)用戶關(guān)注或操作核心功能；

新手引導(dǎo)

這個比較常見，很多產(chǎn)品在新功能或者復(fù)雜功能的時候會建立新手引導(dǎo)的流程，這時候使用單一的箭頭引導(dǎo)會比較單一，就需要添加一些插圖做為情緒化引導(dǎo)，提升用戶趣味性；

狀態(tài)可視化

在一些上傳、加載的場景其實也可以融入插圖來緩沖用戶焦慮，現(xiàn)在大多產(chǎn)品都是使用比較簡單的加載方式，實際上可以將品牌插圖融入進去；

3.2 品牌價值傳達層

將品牌DNA轉(zhuǎn)化為可感知的視覺敘事，建立情感化認知錨點

超級符號ip滲透

在登錄頁/加載頁/404頁等全鏈路重復(fù)品牌標(biāo)志性元素，提升用戶對品牌的記憶；

價值觀場景化表達

用插圖隱喻傳遞品牌主張（如環(huán)保產(chǎn)品用樹木生長插圖替代口號式文案）

節(jié)日儀式感表達

在特殊節(jié)日疊加一些裝飾元素，提升儀式感，上面有提到融入節(jié)日元素；

3.3 用戶體驗優(yōu)化層

解決體驗斷點，通過情感化設(shè)計提升用戶容忍度與愉悅感

負向場景安撫設(shè)計

出現(xiàn)bug的頁面通過插圖傳遞「可控感」，用修復(fù)工具插圖+明確解決步驟緩解用戶焦慮；

降低學(xué)習(xí)成本

在新功能上線時或者改版功能時，用插圖對比新舊流程差異，這個主要在b端場景使用會比較多

情感峰值制造

在用戶完成某項任務(wù)或完成某個階段流程時給用戶反饋出高成就感的插圖，例如keep的成就解鎖，學(xué)習(xí)軟件種每日學(xué)習(xí)打卡成功等；

四、案例分析

分析三個不同行業(yè)的插圖，來看看他們的插圖差異化

4.1 金融類APP的信任感構(gòu)建

首先看看金融類產(chǎn)品如何在專業(yè)與用戶情感傳遞之間進行平衡

符號系統(tǒng)化

顏色方面圍繞穩(wěn)重復(fù)合色（深藍+淺金），避免高飽和色彩帶來的廉價感；

場景克制表達

僅在低風(fēng)險場景（如教育科普頁）使用輕度擬人化角色，而核心功能涉及到數(shù)據(jù)方面的則使用抽象的數(shù)據(jù)的可視化插圖；

文化兼容

在出海的一些國家涉及到文化沖突，例如在中東區(qū)域就刪除了動物形象用植物和建筑符號代替；

4.2 社交產(chǎn)品的年輕化表達

小紅書通過潮流涂鴉的風(fēng)格建立z時代圈層共鳴，為用戶提供固定的模板，降低用戶創(chuàng)作成本，提升產(chǎn)品的品牌主張，同時能夠營造出社區(qū)統(tǒng)一的氛圍感。

視覺特點

以線稿為主，為用戶提供自由創(chuàng)意的涂鴉玩法。

五、未來趨勢

實時渲染的個性化插圖

動態(tài)生成：根據(jù)實時數(shù)據(jù)改變插圖元素，如不同的天氣、心率的高低、運動的步數(shù)等等；

天氣軟件中可以根據(jù)不同的天氣變化背景，當(dāng)然這個目前已經(jīng)廣泛應(yīng)用了，但未來也是不變的一個趨勢；

AI效率性插圖

可通過ai流程來制作統(tǒng)一的插圖風(fēng)格進行應(yīng)用，并且風(fēng)格的局限性相較于之前也更靈活了，在前幾年只能通過mj喂圖抽卡來生成統(tǒng)一的插圖，并且時間成本非常高；

在前兩年只能通過訓(xùn)練大模型的方式訓(xùn)練具有產(chǎn)品特點的模型，并且訓(xùn)練周期非常長，配置要求高，隨著現(xiàn)在的技術(shù)更新，線上出現(xiàn)了很多訓(xùn)練模型的方式，不在依賴本地配置，通過線上訓(xùn)練的lora模型，內(nèi)存比較小也方便調(diào)用，時間上相對之前大大提高；

一、為什么設(shè)計師必須懂用戶行為分析

二、用戶行為分析核心定義與價值

三、用戶行為分析四大核心優(yōu)勢

1. 客觀真實，規(guī)避主觀偏差

2. 群體大數(shù)據(jù)，兼具代表性與準(zhǔn)確性

• 代表性：大量用戶種草某帖子后均下單同款商品，可據(jù)此精準(zhǔn)推薦商品，兼顧用戶預(yù)期與商業(yè)轉(zhuǎn)化；
• 準(zhǔn)確性：后臺操作日志可精準(zhǔn)追溯員工倉庫補貨流程，無需主觀回憶核實。

3. 持續(xù)可追溯，適配產(chǎn)品長期迭代