蘭亭妙微UI設(shè)計公司：你會發(fā)現(xiàn)現(xiàn)在的移動端UI界面中極簡風(fēng)的設(shè)計越來越多了。極簡主義設(shè)計風(fēng)之所以能夠如此的受歡迎，很大程度是源自于它對于設(shè)計、開發(fā)的友好，它不僅讓APP的加載速度更快，讓APP對于不同屏幕的兼容性更加優(yōu)異。與此同時，越來越多的用戶也開始青睞極簡風(fēng)的設(shè)計，極簡風(fēng)的UI界面不僅漂亮，而且在可用性上也非常的突出：它易于導(dǎo)航，并且具備強(qiáng)大的視覺表現(xiàn)力。

1、一屏一個任務(wù)

降低用戶完成任務(wù)之時所需耗費的精力。

你為APP的每一屏都應(yīng)當(dāng)承載一個對用戶有用、有價值的交互或者任務(wù)，一次完成一個任務(wù)，且只能有一個任務(wù)，其中應(yīng)該不包含超過1次的行為召喚（CTA）。這樣的設(shè)計能讓用戶更輕松地學(xué)習(xí)，更便捷地使用，在設(shè)計上也更容易添加刪減以及構(gòu)建。

以Uber為例，Uber 清楚地知道用戶的目的是乘坐出租車，所以，應(yīng)用程序不會一次給用戶太多的信息，會根據(jù)地理信息自動檢測用戶的位置，而Uber 提供給用戶的每一個界面的交互都是單個的，用戶只需要選取位置，下單即可。

2、隱形的UI

內(nèi)容即是界面。

專注于內(nèi)容，并且盡量刪除不必要的元素，這樣可以縮短用戶集中注意力的時間，用戶將會更快地被引導(dǎo)到他們正在搜尋的內(nèi)容，而內(nèi)容本身正是一個隱形的界面。最典型的就是Google 地圖。在重新設(shè)計的時候，Google 地圖刪除了所有不必要的面板和按鈕，地圖本身就是最好的界面。

3、呼吸的空間

使用負(fù)空間讓重要的內(nèi)容吸引用戶的注意力。

留白，或者負(fù)空間，指的是頁面設(shè)計布局中的空白部分，或者空白元素，它們常常被忽略和忽視，雖然許多設(shè)計師認(rèn)為這樣的設(shè)計會浪費屏幕的空間，但是留白本身就是設(shè)計的基本元素之一。

留白可以提升可讀性和內(nèi)容的優(yōu)先級，在頁面布局中也發(fā)揮著重要的作用。因此，它可以合理地簡化UI并提升用戶體驗。

4、直觀的導(dǎo)航

導(dǎo)航應(yīng)該是每個APP當(dāng)中優(yōu)先級最高的組成部分。移動端APP中導(dǎo)航應(yīng)當(dāng)容易被發(fā)現(xiàn)，可訪問的，且盡可能少的占用屏幕空間。由于小屏幕的限制以及內(nèi)容優(yōu)先級的需要，移動端導(dǎo)航的可訪問性設(shè)計一直是一個挑戰(zhàn)。

標(biāo)簽欄和導(dǎo)航欄是非常適合用來展現(xiàn)較少的導(dǎo)航選項的，它們非常適合用來展示主要的導(dǎo)航選項，一個簡單的點擊就能流暢地切換到不同的頁面。

5、單手操作

讓你的設(shè)計兼容更大的屏幕。

關(guān)于用戶如何握持手機(jī)，下面的圖為你展現(xiàn)了最常見的三種模式：

通過觀察可以發(fā)現(xiàn)，85%的用戶使用單手握持他們的手機(jī)，下面的熱圖展示了從2007年一來，各種不同尺寸的iPhone 的拇指操作區(qū)域。毫無疑問，隨著屏幕尺寸的增加，拇指能夠觸及的區(qū)域的比例正在逐步降低。所以，移動端界面的用戶體驗設(shè)計應(yīng)當(dāng)進(jìn)行調(diào)整，嘗試讓你的APP 能夠在手機(jī)上面能夠單手操作，將導(dǎo)航置于用戶的拇指可以觸及的區(qū)域之內(nèi)。

6、讓APP運行快速

不要讓用戶等待內(nèi)容呈現(xiàn)

試圖讓程序的響應(yīng)速度提升起來。許多任務(wù)盡量在后臺跑起來，讓前臺的展現(xiàn)速度顯得很快。將一部分操作打包到后臺運行有兩個好處：讓一些等待和加載過程不再展現(xiàn)在用戶面前，并且可以讓許多操作在用戶請求之前就發(fā)生。一個很好的例子就是 Instagram 中上傳圖片，當(dāng)用戶選擇要共享的圖片之時，上傳就已經(jīng)開始。

7、善用推送通知

在推送信息之前請三思。

每天用戶都會被無數(shù)無用的推送通知所轟炸，被分散注意力，這也使得通知常常會顯得頗為惱人。根據(jù)調(diào)研，超過70%的受訪者表示，令人煩躁的推送信息是促使他們卸載應(yīng)用的主要原因。

所以，要做好移動端設(shè)計，需要用好每一次的信息推送。不要為了吸引用戶而推送消息，這往往會適得其反。你需要將對于用戶有價值的信息推送出去，這樣才合適。

有效的移動端APP信息推送策略是采用多種類型的信息推送機(jī)制，推送通知，電子郵件，應(yīng)用內(nèi)通知，新聞Feed等。多樣化的信息推送通過合理的協(xié)調(diào)，創(chuàng)造良好的用戶體驗。

轉(zhuǎn)載自優(yōu)設(shè)網(wǎng)

蘭亭妙微（藍(lán)藍(lán)設(shè)計）www.payeee.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。

設(shè)計組件庫是提升設(shè)計效率和一致性的重要工具，但如何在頻繁迭代和動態(tài)調(diào)整中高效賦能業(yè)務(wù)設(shè)計交付，一直是行業(yè)面臨的挑戰(zhàn)。蘭亭妙微UI設(shè)計公司，分享了他們在設(shè)計組件庫建設(shè)中的新思考和實踐，供大家參考學(xué)習(xí)。

本文將分享我們對于“什么是好的設(shè)計組件”的看法，并給出一種搭建復(fù)雜組件的實用思路。我們還會從資產(chǎn)消費的角度，提供一些優(yōu)化建議。雖然過程中會涉及不少基于Figma軟件的操作細(xì)節(jié)，但核心思路就像一把“萬能鑰匙”，無論在哪個設(shè)計平臺都行之有效，希望這些內(nèi)容能給廣大設(shè)計師們帶來一些新的啟發(fā)。

蘭亭妙微（藍(lán)藍(lán)設(shè)計）www.payeee.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。

設(shè)計組件庫是提升設(shè)計效率和一致性的重要工具，但如何在頻繁迭代和動態(tài)調(diào)整中高效賦能業(yè)務(wù)設(shè)計交付，一直是行業(yè)面臨的挑戰(zhàn)。蘭亭妙微UI設(shè)計公司，分享了他們在設(shè)計組件庫建設(shè)中的新思考和實踐，供大家參考學(xué)習(xí)。

本文將分享我們對于“什么是好的設(shè)計組件”的看法，并給出一種搭建復(fù)雜組件的實用思路。我們還會從資產(chǎn)消費的角度，提供一些優(yōu)化建議。雖然過程中會涉及不少基于Figma軟件的操作細(xì)節(jié)，但核心思路就像一把“萬能鑰匙”，無論在哪個設(shè)計平臺都行之有效，希望這些內(nèi)容能給廣大設(shè)計師們帶來一些新的啟發(fā)。

01 “好的設(shè)計組件”在搜索設(shè)計場景中的定義

從網(wǎng)上搜索設(shè)計組件，我們能找到各種對外公開的設(shè)計組件庫，同樣還有不少或概括或詳細(xì)的文章，手把手教你“如何搭建一個好的設(shè)計組件庫”，但這些方法論很少探討面對C端組件頻繁增改、設(shè)計規(guī)范動態(tài)調(diào)整，如何高效賦能業(yè)務(wù)設(shè)計交付的相關(guān)內(nèi)容，但這恰恰是搜索業(yè)務(wù)面臨的關(guān)鍵問題。

搜索是一個“牽一發(fā)而動全身”的業(yè)務(wù)，每一個微小的設(shè)計細(xì)節(jié)都有可能影響各個業(yè)務(wù)的數(shù)據(jù)指標(biāo)，一個“好的設(shè)計組件庫”需要以一種潛移默化的方式讓設(shè)計師掌握設(shè)計規(guī)范，完成合規(guī)的設(shè)計，從這個角度而言它應(yīng)該比較「好懂」。

而作為服務(wù)于整個設(shè)計團(tuán)隊的公用設(shè)計組件庫，面對每月數(shù)以萬計的調(diào)用次數(shù)，它必須保障最基本的易用性，應(yīng)該非?！负糜谩?。

同時，面對頻繁迭代，“好的設(shè)計組件”還需要保持最快的更新速度，為各個橫向團(tuán)隊提供正確的樣式，從這個角度來說它還要「好維護(hù)」。

因此，「好懂、好用、好維護(hù)」是搜索設(shè)計語境下，對一個“好的設(shè)計組件”的定義。

接下來，我們將從這三個「好」入手，分享搜索設(shè)計組件庫在升級過程中的一些思考，希望能和大家共同探討。

02 好懂：一種耦合設(shè)計規(guī)范的組件搭建方式

“萬丈高樓平地起”，我們先來說說如何從零開始構(gòu)建一個既符合設(shè)計規(guī)范又易于理解的設(shè)計組件。

首先，在搭建組件時，我們可以考慮采用多層嵌套的方式，即組件(Component)內(nèi)部嵌套變體(Instance)。這種方式不僅能省去組件搭建和修改過程中的重復(fù)操作，甚至還能在解綁組件時，通過選中內(nèi)部的子組件圖層進(jìn)行解綁，大大簡化了搭建和使用雙方的操作流程。

在多層嵌套的思路下，我們可以進(jìn)一步用“底層靈活、上層收斂”來指導(dǎo)組件的搭建。這意味著底層變體的形式足夠多樣，能夠支持大部分的狀態(tài)切換，而在上層組件搭建的過程中顯性地加強(qiáng)規(guī)范的指引(如規(guī)范中不允許使用的樣式不對外展示)，以降低超出規(guī)范設(shè)計的可能。

具體的搭建流程可以大致分為三步：場景收集和分析、搭建基本變體組、拓展高階變體組。

我們將通過視頻組件搭建的生動案例，具體介紹如何依據(jù)“底層靈活、上層收斂”原則來搭建組件庫，使得組件本身既足夠靈活，又能起到足夠的約束作用。

在著手搭建某類組件時，我們首先通過規(guī)范確認(rèn)和場景遍歷，廣泛收集各類變體。

隨后，從我們能想到的所有維度出發(fā)，對這些變體進(jìn)行細(xì)致定義。

這樣，我們就能得到一張詳盡描述組件變體性質(zhì)的表格。表格的第一列依次列出變體1、變體2、變體3等，而第一行則羅列出各種維度，如寬度、比例等。

通過這種方法，我們可以將原本零散、雜亂的組件變體描述，系統(tǒng)地歸納整理成一張清晰明了的表格。

表格通過不同維度來唯一確定一個變體，這些維度可大致分為兩個特性和一個共性。共性指的是所有變體在這一維度上均保持一致，常見特性則涵蓋了最常見的分類性質(zhì)，如寬度、高度、數(shù)量和優(yōu)先級等，而業(yè)務(wù)特性則與具體業(yè)務(wù)緊密相關(guān)。

在搭建組件時，我們可以遵循「共性-常見特性-業(yè)務(wù)特性」順序，這樣的順序有助于降低理解成本，因為最符合心智的分類被置于外層，同時底層的組件又保持了足夠的靈活性，便于切換各種變量。對于業(yè)務(wù)特性，我們可以根據(jù)實際情況靈活處理，既可以將其作為基本組件的延展，也可以不將其納入組件范疇。

以視頻組件為例，我們從表格中獲取的信息如下：

• 視頻尺寸及其組合是最符合用戶心智的變體選擇；
• 播放狀態(tài)是所有變體的共有性質(zhì)；
• 自動播放情況與業(yè)務(wù)相關(guān)，但不一定需要在組件庫中呈現(xiàn)；
• 高階組件僅涉及少部分尺寸的組件，應(yīng)在完成基本組件搭建后再進(jìn)行。

據(jù)此，我們可以輕松梳理出視頻組件搭建流程的優(yōu)先級：

1. 播放狀態(tài)作為共性，應(yīng)首先搭建；
2. 基本組件尺寸和組合是最符合用戶心智的變體選擇，應(yīng)緊隨其后；
3. 高階組件在完成基本組件搭建后再進(jìn)行。

值得注意的是，“封面槽位”是“播放狀態(tài)”中的一個圖層。根據(jù)“底層靈活、上層收斂”的原則，我們將其插入到搭建播放狀態(tài)之前。

因此，視頻組件的最終搭建流程為：

1. 封面槽位；
2. 播放狀態(tài)；
3. 基本組件尺寸和組合；
4. 高階組件。

完成對視頻組件搭建的分析，我們就可以有條不紊地開始搭建組件了。

先搭建基本組件視頻組件，再用基本組件搭建高階組件。

這一步驟雖然為大家所熟知，但仍需格外注意，如配置項的設(shè)置要力求合理，也可以融入設(shè)計規(guī)范和使用規(guī)范，同時還應(yīng)將一些搭建過程中的零散組件集中收納避免被調(diào)用。

關(guān)于這些具體的注意事項，我們將在后續(xù)部分進(jìn)行詳細(xì)闡述。

至此我們完成了組件搭建的基本流程，一個達(dá)到及格線的視頻組件就誕生了。

據(jù)統(tǒng)計，優(yōu)化后每次調(diào)用視頻組件將節(jié)省至少10步的點擊操作！

03 好用：消費視角下的組件自檢

完成了一個基本組件的搭建后，我們可以轉(zhuǎn)換視角，從使用的角度來審視并檢查這個組件。

我們期望，從插入組件變體、切換組件配置，再到最后的解綁組件，整個流程都能縱享絲滑且穩(wěn)定可靠，確保業(yè)務(wù)設(shè)計師在使用過程中獲得最佳體驗。

我們可以一步步來審視組件的使用過程。

首先是插入組件，據(jù)觀察，通常有三種方式：

①在左側(cè)的資產(chǎn)面板(Assets)中直接找到對應(yīng)組件并插入；

②通過查閱設(shè)計規(guī)范，鎖定所需的變體后復(fù)制粘貼；

③選中一個不需要的組件，通過右側(cè)的“切換變體”面板(Swap instance)切換成所需的變體。

很明顯，在這個過程中依賴的是組件的精準(zhǔn)搜索和快速定位。

為了提升搜索精度，我們可以從組件命名入手，采用中、英、數(shù)字結(jié)合的方式，實現(xiàn)模糊匹配；也可以在發(fā)布時隱藏不希望被調(diào)用的組件，以減少無用的搜索結(jié)果。

如果組件是采用前文提到的“多層嵌套”方式搭建的，我們可以添加“Preferred”子組件，這樣在切換時會優(yōu)先展示這些子組件，這個功能在切換圖標(biāo)時尤為實用。

對于習(xí)慣邊查閱設(shè)計規(guī)范邊使用組件的設(shè)計師，我們增加了更多實際使用的正誤案例，這些案例直觀展示了組件變體的正確選擇和使用方式，進(jìn)一步降低了規(guī)范的理解成本，有效輔助設(shè)計決策。同時，我們專門維護(hù)了一個固定區(qū)域，用于平鋪展示所有組件變體。

為了確保能夠輕松點選，我們將變體放在最外層展示(即不在任何Frame、Group或Section中)。這樣能讓設(shè)計師一目了然地看到所有變體，從而快速選擇所需的組件。

在組件配置階段，有三項注意點能讓組件更加易用，即“重視組件的可視化效果、設(shè)置高效易用的配置項、貼心地保存修改”。

考慮到C端組件的多樣性和用戶的使用習(xí)慣，我們應(yīng)避免使用過于復(fù)雜的分組方式。相反，應(yīng)更注重組件的樣式展示，并盡量簡化組件的層級結(jié)構(gòu)。這樣，設(shè)計師在使用時能夠更直觀地看到組件的外觀，而無需深入復(fù)雜的層級去查找。

另外值得注意的是，F(xiàn)igma會默認(rèn)用組件集合中最左上角的組件生成預(yù)覽樣式，因此應(yīng)當(dāng)把視覺上最有代表性的變體放在左上角，這個效果在切換變體(Swap instance)時很重要，因為目前在該面板中沒法查看組件細(xì)節(jié)，只能靠縮略圖和名稱來推測是哪個組件。

其次對于配置項的設(shè)置也大有講究，業(yè)界有組件庫為了實現(xiàn)C2D2C，從源頭上將設(shè)計組件和前端組件的配置項打平，這是不錯的思路，但有可能會提升設(shè)計側(cè)的理解成本。

針對搜索業(yè)務(wù)的特殊語境，我們還是選擇了從「規(guī)范理解」角度去設(shè)置組件的配置項，將所有允許自定義的配置盡可能外露，并清晰地說明修改限制，如字?jǐn)?shù)限定、選項個數(shù)等，這樣能夠在使用的過程中強(qiáng)化業(yè)務(wù)設(shè)計師對規(guī)范的掌握。

另一個常常被忽視的關(guān)鍵點是選項和配置的排序問題。為了提高瀏覽和選擇的效率，建議對選項和選項之間，以及外層的不同配置項，都按照一定的邏輯順序進(jìn)行排序。

最后一點，我們稱之為“貼心地保存修改”機(jī)制，這個針對的是文字修改的場景。

在實際操作中，使用一個組件可能需要對多個配置項進(jìn)行修改。有時在修改完文字內(nèi)容后再去調(diào)整其他配置時，已修改的文字會被重置。這時文本屬性(text property)的設(shè)置就顯得尤為重要，它能夠記憶并保存修改過的文字內(nèi)容，從而免于重復(fù)輸入。

還有一些情況是，某個組件變體實際上并沒有與某個值相對應(yīng)的組件(盡管Figma機(jī)制允許選擇該值)，用戶切換后就會發(fā)現(xiàn)組件完全變了，只能撤回。

為了避免這類情況，建議使用另外的標(biāo)記來表明組件某個設(shè)置項是不可切換的。

04 好維護(hù)：持續(xù)監(jiān)測，不斷迭代

完成了組件的搭建和檢查，接下來讓我們聚焦于組件的日常維護(hù)。

這一環(huán)節(jié)可以從兩個維度展開，一是依托中臺的日常數(shù)據(jù)監(jiān)控進(jìn)行維護(hù)，二是通過團(tuán)隊內(nèi)部的緊密協(xié)同機(jī)制來保障。后者更多側(cè)重協(xié)作流程和機(jī)制上的建設(shè)，在本文中我們不做更多展開，重點討論前者。

數(shù)據(jù)監(jiān)控的方式主要依托Figma中的組件數(shù)據(jù)看板(查看路徑：View libraries-Analytics)，看板中展示了各個組件的調(diào)用數(shù)和解綁數(shù)數(shù)據(jù)，這些數(shù)據(jù)不直接反映組件的優(yōu)劣，但如果我們觀測到某個組件解綁率偏高，我們會考慮直接把它作為模板而不是創(chuàng)建成組件。

總結(jié)

以上是百度搜索設(shè)計團(tuán)隊在設(shè)計組件庫升級過程中的心得分享，包括搜索業(yè)務(wù)對于“好的設(shè)計組件”的訴求，以及一些搭建和優(yōu)化組件的實用思路，核心是探討如何從組件庫建設(shè)的角度入手，成功助力團(tuán)隊提升設(shè)計資產(chǎn)消費效率。

當(dāng)前我們已經(jīng)完成設(shè)計資產(chǎn)工程化的前序環(huán)節(jié)，我們對設(shè)計資產(chǎn)的升級和探索并沒有結(jié)束，未來我們將持續(xù)探索設(shè)計系統(tǒng)工具化的形態(tài)、與AI大模型結(jié)合的機(jī)會，通過豐富消費途徑，實現(xiàn)在業(yè)務(wù)交付的不同階段下全方位提效。

這部分內(nèi)容后續(xù)有機(jī)會也將會和大家見面，請大家期待！

轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理

蘭亭妙微（藍(lán)藍(lán)設(shè)計）www.payeee.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。

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

高級感核心邏輯

設(shè)計小貼士

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

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

高級感核心邏輯

設(shè)計小貼士

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

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

高級感核心邏輯

設(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)實物體運動邏輯，契合用戶潛意識認(rèn)知。

高級感核心邏輯

設(shè)計小貼士

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

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

高級感核心邏輯

設(shè)計小貼士

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

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

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

因此今天蘭亭妙微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)的原因，方便大家進(jìn)行理解。

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

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

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

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

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

1. 技術(shù)框架限制：因為當(dāng)中成熟的前端框架較少，沒有太多技術(shù)棧提供給到開發(fā)進(jìn)行使用，因此沒有精力將頁面做得漂亮
2. 認(rèn)知不足：設(shè)計師對于客戶端、網(wǎng)頁端的設(shè)計理解認(rèn)知本身不夠，做得較為粗糙，比如當(dāng)時的 Office 的界面設(shè)計也大致是如此的模樣
3. 風(fēng)格一致：早期 Windows 系統(tǒng)就是這樣的風(fēng)格，與 Windows 一致更容易被大眾所接受，因此就很難進(jìn)行創(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ū)塊劃分，將整個頁面進(jìn)行規(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)品來進(jìn)行迭代和優(yōu)化。同樣 Ant Design 它們也推出了自己的 Ant Design Pro 來演示使用設(shè)計系統(tǒng)過后，能夠搭建出什么樣的產(chǎn)品。

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

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

你會發(fā)現(xiàn)它們在整體的設(shè)計上都會更加重視頁面的分塊顏色的區(qū)隔，整體頁面的識別效率。同時這段時間爆發(fā)出來非常多的 B 端產(chǎn)品，隨后國內(nèi)都會按照側(cè)邊黑色導(dǎo)航的樣式進(jìn)行進(jìn)一步設(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)品都開始進(jìn)行跟進(jìn)，比如 智能家居的產(chǎn)品、金融類產(chǎn)品都有所涉及，甚至很多 B 端產(chǎn)品也勇敢嘗試，但大多數(shù)設(shè)計師設(shè)計完過后，整體評價都不算太高。

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

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

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

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

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

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

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

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

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

在 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. 減少信息層級，給用戶減負(fù)：之前沉穩(wěn)側(cè)黑風(fēng)格，會發(fā)現(xiàn)頁面明顯進(jì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. 更容易進(jìn)行適配：針對多產(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è)

蘭亭妙微（藍(lán)藍(lán)設(shè)計）www.payeee.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è)計公司，跟大家分享登錄頁的 12 種設(shè)計切入點，相信總有一款會入甲方爸爸的心。

作為設(shè)計師，我們常常面臨一個窘境：要面對各式各樣客戶審美的挑剔，有時候被虐得都懷疑人生。

但找參考時，思維又容易被局限在常見的幾種形式里，我通過分析大量優(yōu)秀的登錄頁，總結(jié)了 12 個高級的設(shè)計切入點，希望能為你打開新思路。

一、以純色背景+品牌符號為出發(fā)點的登錄頁設(shè)計

設(shè)計解析：

1. 形式：兩者都采用純色作為底色，底色配幾個跟系統(tǒng)主題相關(guān)的元素。
2. 色彩：上圖的配色冷靜、柔和，突出專業(yè)與寧靜；下圖則大膽使用高對比度色彩，充滿能量與動感。
3. 構(gòu)圖：兩者均采用經(jīng)典的左右分割構(gòu)圖，這是登錄頁最穩(wěn)健高效的布局之一。

二、以用戶畫像為出發(fā)點的登錄頁設(shè)計

設(shè)計解析：

1. 形式：兩個都采用了扁平插畫的表現(xiàn)形式，并且將產(chǎn)品的目標(biāo)用戶投射到頁面上，產(chǎn)生強(qiáng)烈的身份認(rèn)同感。
2. 色彩：上圖采用高飽和度漸變背景，色彩大膽、鮮明，傳遞出年輕、潮流的品牌性格；下圖色調(diào)冷靜，應(yīng)用場景比較普適。
3. 構(gòu)圖：兩者均采用穩(wěn)健的左右分割構(gòu)圖，它更像是一個價值宣言頁面，極大地降低了新用戶的認(rèn)知門檻，提升了注冊的意愿。

三、以場景沉浸為出發(fā)點的登錄頁設(shè)計

設(shè)計解析：

1. 形式：兩個都通過高質(zhì)量攝影圖來營造獨特氛圍；上圖傳遞大自然、自由等意象；下圖則傳遞溫馨、舒適、有溫度的服務(wù)感。
2. 色彩：兩者的色彩都源于背景圖片本身，登錄框的配色和背景融合的無比自然、舒適。
3. 構(gòu)圖：兩者均采用全屏背景+中心卡片的經(jīng)典構(gòu)圖，它通過真實的場景，繞過生硬的文字說明，直接與用戶進(jìn)行情感對話。

四、以人物放大展示的登錄頁設(shè)計

設(shè)計解析：

1. 形式：都使用了人物放大展示的表現(xiàn)手法，上圖通過多位兒童看書傳遞閱讀氛圍；下圖則通過虛擬角色傳遞潮流與個性。
2. 色彩：上圖使用高飽和度的童話色彩，營造溫馨、快樂的感受；下圖采用灰色調(diào)搭配霓虹黃綠漸變，營造酷炫、動感的氛圍。
3. 構(gòu)圖：兩者均采用左右分割構(gòu)圖，但側(cè)重點不同，上圖插畫重在營造氛圍和講述故事；下圖則重在角色與表單平衡，突出個性。

五、以簡約幾何造型的登錄頁設(shè)計

設(shè)計解析：

1. 形式： 均是幾何造型為主的表現(xiàn)手法，上圖采用冷紫漸變，傳遞出專業(yè)、穩(wěn)定；下圖采用暖黃漸變，散發(fā)出活力、樂觀。
2. 色彩： 色彩是這里唯一的變量，但效果截然不同，它完美驗證了色彩在塑造品牌感知和影響用戶情緒上的決定性作用。
3. 構(gòu)圖： 兩者都采用了清晰有力的左右分割構(gòu)圖，左側(cè)是強(qiáng)有力的品牌口號，右側(cè)是功能清晰的白底登錄框。

六、高對比的登錄頁設(shè)計

設(shè)計解析：

1. 形式：都使用了風(fēng)景攝影圖，且都內(nèi)嵌在一個異形容器里，打破了傳統(tǒng)的方形容器造型，比較新穎。
2. 色彩： 色彩運用非常克制且有目的性，左側(cè)功能區(qū)使用無彩色，這種強(qiáng)對比確保了功能區(qū)域的操作清晰。
3. 構(gòu)圖：采用了最經(jīng)典且不易出錯的左右分割構(gòu)圖，左側(cè)是純功能性的白色表單區(qū)域，右側(cè)是激發(fā)用戶情感的場景化背景圖。

七、以全屏插畫風(fēng)格的登錄頁設(shè)計

設(shè)計解析：

1. 形式：都采用全屏插畫為核心視覺，上圖使用色彩鮮明的城市插畫，營造活力都市氛圍，下圖采用紫色調(diào)山林夜景，傳遞出神秘氣質(zhì)。
2. 色彩：色彩在這里是品牌情緒本身，這種設(shè)計強(qiáng)項在于通過視覺瞬間建立情感連接，讓登錄體驗超越功能層面，成為一種品牌體驗。
3. 構(gòu)圖：采用中心構(gòu)圖法，這種設(shè)計的視覺記憶點和品牌辨識度非常高，非常適合需要快速建立獨特品牌形象的創(chuàng)新型產(chǎn)品。

八、打破邊界方式的登錄頁設(shè)計

設(shè)計解析：

1. 形式：上下兩個案例都巧用了打破造型邊界的方式，每個頁面元素都特意打破傳統(tǒng)的容器邊界，給人布局靈動的感覺。
2. 色彩：色彩都使用了低飽和度的色彩，給人高級、穩(wěn)重、大氣的感覺。
3. 構(gòu)圖：采用了經(jīng)典的左右構(gòu)圖，打破邊界的圖形方向直指登錄表單，極大地引導(dǎo)了用戶完成注冊和登錄。

九、玻璃質(zhì)感的登錄頁設(shè)計

設(shè)計解析：

1. 形式：這是最常見的 B 端登錄頁表現(xiàn)方式，設(shè)計師都喜歡用這種玻璃質(zhì)感去表達(dá)產(chǎn)品內(nèi)涵。
2. 色彩：色彩使用比較干凈、輕盈，給人一種輕松、舒適的治愈感。
3. 構(gòu)圖：采用了經(jīng)典的左右構(gòu)圖，打破邊界的圖形方向直指登錄表單，極大引導(dǎo)了用戶完成注冊和登錄。

十、小范圍 2.5D 插畫的登錄頁設(shè)計

設(shè)計解析：

1. 形式：這是前幾年非常流行的 2.5D 插畫風(fēng)格，通過一些 2.5D 元素的簡單組合，精準(zhǔn)的傳遞平臺屬性。
2. 色彩：兩者都采用了藍(lán)色主色調(diào)，但表達(dá)了不同的情感;上圖的淺藍(lán)色更具科技感；下圖的深藍(lán)色則更顯沉穩(wěn)、莊重。
3. 構(gòu)圖：兩者均采用最經(jīng)典、易用的左右分割構(gòu)圖，確保功能表單區(qū)域的清晰可讀。

十一、強(qiáng)質(zhì)感的藍(lán)色科技登錄頁設(shè)計

設(shè)計解析：

1. 形式：兩個案例都運用具象的形式將抽象的業(yè)務(wù)進(jìn)行了很好的展示，科技感滿滿。
2. 色彩：主色調(diào)采用體現(xiàn)科技感的深藍(lán)/黑色，關(guān)鍵元素則使用亮藍(lán)色和橙色作為點綴，打破了深色的沉悶，創(chuàng)造了視覺焦點。
3. 構(gòu)圖：兩者都采用中心聚焦式構(gòu)圖，將最具科技感的可視化元素置于畫面中央，登錄框作為功能面板懸浮其上。

十二、以安全信任、金融科技為出發(fā)點的登錄頁設(shè)計

設(shè)計解析：

1. 形式：兩個案例都通過核心視覺符號高效傳達(dá)了產(chǎn)品屬性，質(zhì)感比較強(qiáng)烈。
2. 色彩：深藍(lán)色電路板背景營造出科技氛圍，金色則提升了頁面的品質(zhì)感，發(fā)光效果和懸浮質(zhì)感增強(qiáng)了元素的現(xiàn)代感和數(shù)字感。
3. 構(gòu)圖：左右構(gòu)圖營造出嚴(yán)謹(jǐn)、平衡、可信賴的感受，登錄面板位于黃金視覺區(qū)域，確保了功能優(yōu)先級。

總結(jié)

通過以上 12 個案例的系統(tǒng)性拆解，我們發(fā)現(xiàn) B 端登錄頁的設(shè)計可以有如此豐富的切入點。

它絕不僅僅是擺放表單的簡單任務(wù)，而是一個融合了品牌戰(zhàn)略、用戶體驗、視覺營銷和技術(shù)表達(dá)的綜合性設(shè)計挑戰(zhàn)。

希望這 12 個切入點的詳細(xì)分析，能成為您應(yīng)對登錄頁設(shè)計挑戰(zhàn)的靈感源泉和實用工具箱。

一個高級的設(shè)計，其最高境界是讓用戶感覺不到“設(shè)計”的存在，卻能高效、愉悅地完成目標(biāo)，并對品牌留下積極而深刻的印象。

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

蘭亭妙微（藍(lán)藍(lán)設(shè)計）www.payeee.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。

一、用戶群體差異：三大平臺的核心客群定位

• 木鳥民宿：00 后占比 59%，主打年輕群體場景化、個性化住宿需求；
• 途家民宿：00 后、80 后為小城民宿消費雙主力，各占 24%，側(cè)重家庭度假與深度體驗；
• 美團(tuán)民宿：95 后占比 48%，核心偏好高性價比、低價便捷住宿。

二、首頁設(shè)計：流量分發(fā)邏輯拆解

木鳥民宿：聚焦首屏，場景化精準(zhǔn)分流

• 核心模塊：搜索、預(yù)訂、二級導(dǎo)航、金剛區(qū)；
• 分發(fā)邏輯：明確需求 + 隱性需求雙軌并行。
   
  明確需求：支持城市、地標(biāo)、日期精準(zhǔn)查詢，滿足目標(biāo)清晰的用戶；
   
  隱性需求：通過周末出游、人氣好房、寵物友好等場景入口，激發(fā)潛在消費。

途家民宿：功能偏多，側(cè)重平臺變現(xiàn)與會員

• 明確需求模塊與木鳥一致，支持基礎(chǔ)預(yù)訂操作；
• 金剛區(qū)重點傾斜套餐推廣、會員體系，強(qiáng)平臺側(cè)變現(xiàn)導(dǎo)向。

美團(tuán)民宿：極簡展示，依賴主站流量

• 結(jié)構(gòu)單一、視覺簡潔，但屏幕利用效率偏低；
• 策略上依托美團(tuán)主站 “高頻帶低頻” 邏輯，酒旅變現(xiàn)壓力集中在美團(tuán)旅行主板塊，獨立 APP 僅承擔(dān)基礎(chǔ)預(yù)訂功能。

三、留存本質(zhì)：平臺戰(zhàn)略與首頁設(shè)計的深層關(guān)聯(lián)

1. 木鳥民宿：用戶與平臺需求平衡

    

   2020 年起連續(xù)盈利，80% 自有流量形成 “流量 - 訂單 - 擴(kuò)張” 閉環(huán)，靠場景化特色民宿筑牢產(chǎn)品力，兼顧體驗與增長。
    
2. 途家民宿：重平臺變現(xiàn)需求

    

   早年關(guān)停多城直營房源，疊加攜程商旅流量轉(zhuǎn)移、重心轉(zhuǎn)向跨境游，營收與現(xiàn)金流壓力加劇，不得不通過首頁強(qiáng)化套餐、會員等多元變現(xiàn)。
    
3. 美團(tuán)民宿：重用戶體驗、輕平臺運營

    

   依托本地生態(tài)與主站流量，獨立 APP 無需承擔(dān)強(qiáng)變現(xiàn)目標(biāo)，因此頁面極簡、聚焦用戶瀏覽體驗。
    

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

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

相關(guān)干貨：

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

這里的“微設(shè)計”比我們常說的“微交互”范圍更廣，包括文案、視覺元素，還有各種反饋設(shè)計。這些小細(xì)節(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ù)很明確：別讓用戶背鍋，明確告訴他們“能補(bǔ)救”。先給情緒上的安慰：“沒關(guān)系，你可以再試一次。”

3. 增加焦慮的場景

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

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

操作反復(fù)失?。哼B不上網(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ù) (錯了能輕松補(bǔ)救)。單獨用哪一個都不夠，需要根據(jù)場景靈活設(shè)計。

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

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

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

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

2. 自動補(bǔ)全&智能建議

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

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

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

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

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

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

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

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

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

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

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

6. 二次確認(rèn)不可逆操作

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

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

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

例如刪除文件時進(jìn)行二次確認(rèn)，同時告知刪除后文件的位置、刪除后文件是否可以找回等一系列內(nèi)容，讓用戶對于刪除的內(nèi)容有清晰的認(rèn)知；對于確認(rèn)后無法再修改的信息，也最好來個再次確認(rèn)，讓用戶做到心里有數(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ù)覽”。確認(rèn)沒問題再提交，這樣用戶就能提前發(fā)現(xiàn)錯漏，心里也踏實。

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

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

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

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

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

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

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

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

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

最后

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

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

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

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

蘭亭妙微（藍(lán)藍(lán)設(shè)計）www.payeee.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)化方案，只推薦不強(qiáng)制預(yù)填，支持商家自主微調(diào)、手動確認(rèn)錄入，兼顧智能推薦與個性化需求，縮短人工審核周期。

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

1. 主動觸達(dá)，前置服務(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ù)覽，商家可按售前咨詢、售后退款、催單答疑等細(xì)分場景，自定義 AI 回復(fù)規(guī)則，配置即所見，讓抽象 AI 能力變得可控可預(yù)判，消解商家信任顧慮。

   

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

   

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

    

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

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

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

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

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

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

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

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

四、實時密碼強(qiáng)度可視化校驗

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

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

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

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

蘭亭妙微（藍(lán)藍(lán)設(shè)計）www.payeee.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。