<li id="g3zqm"></li>
<pre id="nt0ba"></pre>
響應式是一種網頁前端技術，讓網頁可以根據分辨率、設備的變更，自動調整樣式和布局。
它的誕生起源于移動互聯網興起的熱潮，彼時智能手機訪問網站的需求激增，但多數網站的適配都是面向電腦端的大屏幕，僅有少數網站會額外開發符合移動端顯示需求的版本（自適應）。
響應式的提出，就是為了解決這種問題，通過建立一套約定好的設計、開發方法，用一套代碼自動適配臺式電腦、筆記本、平板、移動端等各種設備，提高網站的兼容性和開發效率。
而學習響應式，首先就要從瀏覽器開始說起。
瀏覽器是一個非常特殊的軟件，比如大家熟知的 Chrome、Safari、Eage 等，我們日常訪問的所有網頁，都需要通過瀏覽器加載并渲染出最終的樣式。
可以把網頁 HTML 文件理解成是一個程序，而瀏覽器就是運行這個程序的系統（環境），也就是說解析網頁依靠的是瀏覽器而不是 Windows、Mac、iOS、Android、Linux 等客戶端系統。
瀏覽器即系統中的系統（類似虛擬機)，不管在任何系統或設備上，只要安裝了瀏覽器，就可以用大體相同的規則、邏輯去加載、渲染出網頁。
但不同設備的屏幕有很大差異，網頁如何識別并匹配這些設備呢？
方法主要有兩種，第一種是瀏覽器會識別當前系統和設備，并提供接口讓網頁讀取。而部分網站會準備多種規格的網頁，根據獲取的設備類型推送對應的規格，這種做法叫做自適應模式。
通常自適應只區分桌面端和移動端兩種，較大的門戶、購物、工具類網站，普遍使用自適應模式。因為移動端訪問網頁的需求并不高，所以會對移動端版本做大量的精簡，降低開發、維護成本。
另一種方法，則是讀取瀏覽器視圖區域的分辨率。任何瀏覽器的界面，都包含功能區域和視圖區域兩個部分，功能區域提供相關的軟件菜單、操作按鈕，視圖區域則是顯示網頁界面的區域。隨著設備和屏幕分辨率的變化，瀏覽器的大小也會不同，網頁視圖區域也會跟著縮放。
網頁視圖注定小于整個瀏覽器的軟件窗口，而瀏覽器作為軟件，在系統中的尺寸不等于系統分辨率（或設備分辨率），一方面有系統的全局組件影響，另一方面窗口并不是非得全屏，用戶可以任意調整。
所以響應式網頁就是根據瀏覽器的視圖區域做適配，不管你是在電腦上縮放軟件窗口，還是在不同的設備、系統中打開，本質上都只是顯示區域大小的變更。而在瀏覽器的檢查選項中，模擬不同的設備其實就是縮放出一個指定的視圖窗口出來。
這種依賴關系延伸出一個新的知識點，即網頁顯示的分辨率，和顯示設備的屏幕分辨率，是兩套不同的體系。
這是因為硬件分辨率和系統渲染的分辨率是兩個概念，尤其在今天高分辨率屏幕普及的背景之下。比如我的 Macbook Pro14 寸筆記本，硬件分辨率是 3024 x 1964 (254 ppi)，但在系統的屏幕分辨率選擇中，默認的卻是 1512*982（即原來的 1/2）。
這是因為硬件分辨率太高了，1:1 渲染的話，那么大多數圖標、文字是無法被看清的，所以默認使用了 2x 的規格渲染。但這只是其中一個選項，在 HIDPI 技術的加持下，用戶還可以選擇別的分辨率，比如我會進一步調高到 1800*1169。
在 Windows 系統中同理，雖然有很多高分辨率的屏幕，但是用戶為了看清內容，會在系統中設置 120%、150% 的放大效果，等于為系統分辨率做出變更。
說到底，系統顯示分辨率的規格也是無窮無盡的。但是不管外部的轉換邏輯有多復雜，規格有多少，都和響應式網頁無關，它只需要認準瀏覽器的視圖區域分辨率即可。
所以了解線上案例的響應式布局規則，或者檢查已經開發好的響應式頁面，并不需要切換不同設備查看，只要拖拽縮放瀏覽器的大小（主要是寬度）即可獲得完整的響應效果。
最后總結起來，響應式網頁是面向瀏覽器視圖區域做適配的布局方法，而不是面向系統、屏幕分辨率的適配，這和自適應布局有本質的差異。
在 B 端領域，絕大多數項目都只部分兼容響應式，放棄移動端的適配，即使支持移動端也是使用自適應的混合模式。要面對這些復雜的場景，就月需要理解上面這些基礎的概念，否則設計師就無法真正滿足響應式項目的前期創建和后期交付需要。
轉載：優設
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微UI設計公司：你會發現現在的移動端UI界面中極簡風的設計越來越多了。極簡主義設計風之所以能夠如此的受歡迎，很大程度是源自于它對于設計、開發的友好，它不僅讓APP的加載速度更快，讓APP對于不同屏幕的兼容性更加優異。與此同時，越來越多的用戶也開始青睞極簡風的設計，極簡風的UI界面不僅漂亮，而且在可用性上也非常的突出：它易于導航，并且具備強大的視覺表現力。
降低用戶完成任務之時所需耗費的精力。
你為APP的每一屏都應當承載一個對用戶有用、有價值的交互或者任務，一次完成一個任務，且只能有一個任務，其中應該不包含超過1次的行為召喚（CTA）。這樣的設計能讓用戶更輕松地學習，更便捷地使用，在設計上也更容易添加刪減以及構建。
以Uber為例，Uber 清楚地知道用戶的目的是乘坐出租車，所以，應用程序不會一次給用戶太多的信息，會根據地理信息自動檢測用戶的位置，而Uber 提供給用戶的每一個界面的交互都是單個的，用戶只需要選取位置，下單即可。
內容即是界面。
專注于內容，并且盡量刪除不必要的元素，這樣可以縮短用戶集中注意力的時間，用戶將會更快地被引導到他們正在搜尋的內容，而內容本身正是一個隱形的界面。最典型的就是Google 地圖。在重新設計的時候，Google 地圖刪除了所有不必要的面板和按鈕，地圖本身就是最好的界面。
使用負空間讓重要的內容吸引用戶的注意力。
留白，或者負空間，指的是頁面設計布局中的空白部分，或者空白元素，它們常常被忽略和忽視，雖然許多設計師認為這樣的設計會浪費屏幕的空間，但是留白本身就是設計的基本元素之一。
留白可以提升可讀性和內容的優先級，在頁面布局中也發揮著重要的作用。因此，它可以合理地簡化UI并提升用戶體驗。
導航應該是每個APP當中優先級最高的組成部分。移動端APP中導航應當容易被發現，可訪問的，且盡可能少的占用屏幕空間。由于小屏幕的限制以及內容優先級的需要，移動端導航的可訪問性設計一直是一個挑戰。
標簽欄和導航欄是非常適合用來展現較少的導航選項的，它們非常適合用來展示主要的導航選項，一個簡單的點擊就能流暢地切換到不同的頁面。
讓你的設計兼容更大的屏幕。
關于用戶如何握持手機，下面的圖為你展現了最常見的三種模式：
通過觀察可以發現，85%的用戶使用單手握持他們的手機，下面的熱圖展示了從2007年一來，各種不同尺寸的iPhone 的拇指操作區域。毫無疑問，隨著屏幕尺寸的增加，拇指能夠觸及的區域的比例正在逐步降低。所以，移動端界面的用戶體驗設計應當進行調整，嘗試讓你的APP 能夠在手機上面能夠單手操作，將導航置于用戶的拇指可以觸及的區域之內。
不要讓用戶等待內容呈現
試圖讓程序的響應速度提升起來。許多任務盡量在后臺跑起來，讓前臺的展現速度顯得很快。將一部分操作打包到后臺運行有兩個好處：讓一些等待和加載過程不再展現在用戶面前，并且可以讓許多操作在用戶請求之前就發生。一個很好的例子就是 Instagram 中上傳圖片，當用戶選擇要共享的圖片之時，上傳就已經開始。
在推送信息之前請三思。
每天用戶都會被無數無用的推送通知所轟炸，被分散注意力，這也使得通知常常會顯得頗為惱人。根據調研，超過70%的受訪者表示，令人煩躁的推送信息是促使他們卸載應用的主要原因。
所以，要做好移動端設計，需要用好每一次的信息推送。不要為了吸引用戶而推送消息，這往往會適得其反。你需要將對于用戶有價值的信息推送出去，這樣才合適。
有效的移動端APP信息推送策略是采用多種類型的信息推送機制，推送通知，電子郵件，應用內通知，新聞Feed等。多樣化的信息推送通過合理的協調，創造良好的用戶體驗。
轉載自優設網
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
設計組件庫是提升設計效率和一致性的重要工具，但如何在頻繁迭代和動態調整中高效賦能業務設計交付，一直是行業面臨的挑戰。蘭亭妙微UI設計公司，分享了他們在設計組件庫建設中的新思考和實踐，供大家參考學習。
本文將分享我們對于“什么是好的設計組件”的看法，并給出一種搭建復雜組件的實用思路。我們還會從資產消費的角度，提供一些優化建議。雖然過程中會涉及不少基于Figma軟件的操作細節，但核心思路就像一把“萬能鑰匙”，無論在哪個設計平臺都行之有效，希望這些內容能給廣大設計師們帶來一些新的啟發。
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
設計組件庫是提升設計效率和一致性的重要工具，但如何在頻繁迭代和動態調整中高效賦能業務設計交付，一直是行業面臨的挑戰。蘭亭妙微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大模型結合的機會，通過豐富消費途徑，實現在業務交付的不同階段下全方位提效。
這部分內容后續有機會也將會和大家見面，請大家期待！
轉載：人人都是產品經理
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）m.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 端產品的設計梳理，講解了更為重要的四種風格。
轉載：優設
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
今天蘭亭妙微UI設計公司，跟大家分享登錄頁的 12 種設計切入點，相信總有一款會入甲方爸爸的心。
作為設計師，我們常常面臨一個窘境：要面對各式各樣客戶審美的挑剔，有時候被虐得都懷疑人生。
但找參考時，思維又容易被局限在常見的幾種形式里，我通過分析大量優秀的登錄頁，總結了 12 個高級的設計切入點，希望能為你打開新思路。
設計解析：
設計解析：
設計解析：
設計解析：
設計解析：
設計解析：
設計解析：
設計解析：
設計解析：
設計解析：
設計解析：
設計解析：
通過以上 12 個案例的系統性拆解，我們發現 B 端登錄頁的設計可以有如此豐富的切入點。
它絕不僅僅是擺放表單的簡單任務，而是一個融合了品牌戰略、用戶體驗、視覺營銷和技術表達的綜合性設計挑戰。
希望這 12 個切入點的詳細分析，能成為您應對登錄頁設計挑戰的靈感源泉和實用工具箱。
一個高級的設計，其最高境界是讓用戶感覺不到“設計”的存在，卻能高效、愉悅地完成目標，并對品牌留下積極而深刻的印象。
轉載：優設
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
哈嘍，這里是蘭亭妙微UI設計公司，今天分享的是「如何化解錯誤時刻」。
說到用戶體驗設計，大家首先想到的都是“正常場景”：注冊流程順暢、支付順利完成、輸入順利通過。但現實并非如此，用戶總會不小心犯錯誤，系統偶爾也會掉鏈子。但這些“問題時刻”往往最容易被忽略。要是產品沒法幫用戶解決問題，所有錯誤的后果都得用戶承擔，最后只會讓他們焦慮。換句話說，錯誤是用戶體驗的最大危機，也是削弱用戶對產品信任的關鍵節點。
相關干貨：
這里的“微設計”比我們常說的“微交互”范圍更廣，包括文案、視覺元素，還有各種反饋設計。這些小細節看似不起眼，卻能精準安撫用戶的出錯焦慮，幫他們重新找回掌控感。
微設計的三個核心要素：
在深入探討具體案例之前，讓我們先來探究一下用戶遇到錯誤的背景和原因。下面簡要總結了用戶出錯的類型、背后的心理，還有哪些場景容易出錯。
在用戶體驗理論中，錯誤分“失誤”和“錯誤”兩種，前者是用戶在執行操作時無意識犯下的錯誤，后者是一開始就想錯了。
失誤：行為不當
目標是對的，但采取的行動有問題。例如不小心點錯了按鈕、著急打錯了字，大多是做熟悉的事時分心、沒留意造成的。
錯誤：判斷失誤
從一開始就誤解了情況。比如看到一個顯眼的按鈕，以為是自己要的功能，結果點擊后才發現不對。這種情況多是因為界面的信息混亂、層級不清晰，呈現的內容含糊不清。
通常“失誤”發生在執行階段，“錯誤”發生在規劃階段，但實際中兩者經常一起出現。重點是搞清楚 “為什么會出錯”，并給出解決方案。
出錯不只是功能出問題，更會讓用戶慌張：“萬一沒法恢復怎么辦？”（恐懼）、“我無法控制這種情況”（無助），甚至 “可能我根本不會用這東西”（自責）。最糟的就是自責——用戶不怪產品怪自己，壓力越來越大，最后干脆關掉頁面、放棄使用。
所以設計師的任務很明確：別讓用戶背鍋，明確告訴他們“能補救”。先給情緒上的安慰：“沒關系，你可以再試一次。”
有些時候，用戶的選擇壓力和出錯焦慮會被放大，心里越沒底，越不敢動。
操作不可逆：刪除文件、轉賬、重置數據等，一旦點錯就沒法恢復，讓人不敢操作。
操作反復失敗：連不上網、輸密碼總錯，越試越沮喪，甚至會想 “是不是只有我用不了？”
尤其是對準確性要求高的場景，比如金融、商務、B2B工具，出錯體驗的設計更關鍵。有時候對于出錯的恐懼，比錯誤本身更影響用戶行為。
支付/轉賬：錯誤導致資金損失的壓力以及造成損失的可能性。
傳輸/刪除關鍵數據：知道沒法恢復，更不敢操作。
表單反復驗證失敗：失敗的次數越多，就會越沮喪。
應對錯誤的核心是“雙管齊下”：提前預防 (別讓錯誤發生) +及時恢復 (錯了能輕松補救)。單獨用哪一個都不夠，需要根據場景靈活設計。
從根本上阻止可能出錯的情況，或者用視覺提示幫用戶識別風險。比如禁用按鈕、提供有限的選項、防止重復點擊。某種程度上哪怕稍微限制一點用戶的自由，也比讓他們出錯好。
例如訂酒店時，對于有住宿天數要求的酒店，預定的天數少于住宿天數時，無法進行預訂；類似的還有“信息沒填完時，登錄按鈕是置灰的”、“加載時不能點按鈕，避免重復操作”，都是這個道理。
在搜索框、輸入框里加入自動補全或關鍵詞建議，不需要讓用戶記住全部信息，輸入又快又準。尤其在輸入地址或者比較復雜的內容時，這種方法能大大提高效率。
例如在輸入地址時，搜索詞會高亮顯示，并且會可能提供清晰的搜索建議：想搜的是地鐵、公交還是某家店鋪，方便用戶減輕記憶負擔，快速做出選擇；在移動設備中，鍵盤的局限性導致打字失誤的情況頻繁發生，飛書的錯別字自動修正提示，能夠很好地提高輸入速度和準確性。
對于需要重復做的操作，可以把常用的選項設為默認，幫助用戶少費心。但默認選項不一定永遠是對的，如果存在錯誤的可能性，得讓用戶能檢查修改，不然反而會“誘導錯誤”。
例如在外賣軟件中，可以把常用地址加上默認標識，省去了再次添加收貨地址的麻煩。但當默認地址和當前的位置差很遠，超出配送范圍時，購物車中的商品會呈置灰狀態無法進行購買。
用戶進行多步驟任務時 (比如注冊)，萬一不小心退出了再進來，保持之前填的內容還在。這樣不需要用戶重新填，也不會忘記已經完成了哪些步驟，減少失誤的發生。
編輯文章時，內容可以自動保存到草稿箱中。哪怕退出登錄過兩天再進入，草稿箱里的內容都還在，對于用戶來說也是一種很貼心的體驗。
對于需要記住很多選擇的流程(比如訂酒店)，把選好的日期、人數、篩選條件固定在屏幕頂部，隨時能看。這種設計方法允許用戶在不依賴不準確記憶的情況下再次確認信息，從而及早預防錯誤。
像Airbnb會把要去的地點、 入住時間和人數這些篩選條件固定在頁面的頂部，讓用戶可以持續查看當前的預訂情況，這樣在找房子的時候會覺得更踏實。
對于刪除文件或重置數據這類不可逆的操作，一定要增加 “確認步驟”，進一步確認用戶的意圖。
一旦出錯無法恢復的操作可能會引發用戶的強烈焦慮，因此需要清晰傳達操作的影響，并通過問題和警告來確認操作，例如：“您確定要刪除xx？刪除后不可恢復，請謹慎操作。”
但注意不能濫用確認彈窗，過于頻繁的確認彈窗可能會讓用戶在不仔細看內容的情況下，習慣性地點擊“確定”，增大出錯的風險。只在重要且不可逆轉的操作中使用。
例如刪除文件時進行二次確認，同時告知刪除后文件的位置、刪除后文件是否可以找回等一系列內容，讓用戶對于刪除的內容有清晰的認知；對于確認后無法再修改的信息，也最好來個再次確認，讓用戶做到心里有數。
對于表單輸入這類容易出錯的場景，好的使用體驗是在輸入時就“實時”提供反饋，而不是等所有信息都填完點擊提交之后再提示錯誤。
比如字符超了、密碼格式不對，立即用紅色文字、錯誤圖標、邊框高亮、震動動效等形式反饋出來，減少重復輸入的麻煩。
例如發動態時，如果輸入的標題字數不符合要求，會在標題處有一段反饋提示，提醒用戶輸入符合要求的標題；填寫多個表單時，如果有多個表單未填寫，每個輸入框下面都會有錯誤反饋，而且每條錯誤反饋的內容會根據不同字段而調整，而不是用“請填寫內容”這種模板化的反饋。
對于操作后不好修改的場景中 (比如發表文章、發布視頻、視頻渲染)，可以先給用戶看 “最終效果預覽”。確認沒問題再提交，這樣用戶就能提前發現錯漏，心里也踏實。
例如在發布動態的時候上傳視頻封面后，在推薦列表、視頻動態中能提前預覽封面效果，有問題可以及時修改，省去了動態發布后再去修改的麻煩；視頻軟件中渲染一個視頻通常需要幾分鐘甚至幾十分鐘，通過提供“渲染預覽”可以快速檢查錯誤減少不必要的時間浪費。
“撤銷”功能允許用戶立即挽回錯誤，增強掌控感，減輕錯誤帶來的負擔，例如刪錯內容、發錯郵件后，點一下就能恢復。有了這個功能，用戶用著更放心，也敢大膽嘗試各種功能。
在花瓣中采集圖片后，會提供一個撤銷的功能，方便用戶快速撤銷采集有誤的圖片；在使用微信發消息、使用郵箱發郵件的時候，也都支持在發出去幾分鐘內撤回，盡可能幫用戶挽回錯誤。
如果錯誤不可避免，需要使用通俗易懂的提示文案告訴用戶哪里出現了錯誤，出現了什么樣的錯誤，而不是用一些模板化的或是含糊不清的提示文案，讓用戶感到困惑。
例如上圖中的登錄失敗提示，會明確告知什么地方出現了錯誤、出現多次錯誤后會有什么后果、如何操作能解決錯誤，這才是一個格式的錯誤提示；填寫新增地址信息時，如果手機號碼有問題，會明確提示“手機號有誤”，而不是只說 “輸入內容有誤”。
接著上一條，不僅要說清楚錯誤的原因，還要告訴用戶“該怎么做”，引導用戶立即采取行動。例如添加“重試”、“返回主頁” 按鈕，引導用戶回到正確的操作流程里。
如果訪問的頁面有問題，可以提供返回首頁或者聯系客服的入口，讓用戶可以繼續探索其他內容；例如蘋果的Face ID連續5次識別失敗后，系統會鎖定面容ID功能，并提示輸入密碼驗證后才能重新啟用。
通過自動定位和聚焦錯誤輸入項來鼓勵快速更正。發現錯誤后，系統自動定位到出錯的輸入框，縮短錯誤從識別到更正的過程。尤其在那些表單特別多的后臺頁面中，這種錯誤定位的功能還是很有必要的。
利用情感化的視覺設計，例如柔和的色彩、插圖和動效等，提供了視覺上的舒適感，緩解用戶的焦慮和緊張。這不僅是簡單的錯誤反饋，還是展現品牌個性的好機會。
比如谷歌瀏覽器離線時經典的“恐龍小游戲”，讓用戶等待網絡連接的同時進行有趣的游戲體驗，能讓用戶沒那么煩躁。
總的來說，減少錯誤的根本策略是避免不必要的差異化，并遵循熟悉的界面、交互和設計慣例。這里的“熟悉”不僅是風格問題，更是整個用戶體驗設計的通用標準。
當然，再標準的設計也沒法完全杜絕錯誤的發生。這時候，貼心的微設計就派上用場了——幫助用戶快速發現錯誤、輕松改過來。
這些細節，正是體驗設計師存在的價值，也是產品賦予用戶的最大信任。你還有哪些化解錯誤的小妙招呢？歡迎留言咱們一起聊聊～
轉載：優設
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
藍藍設計的小編 http://m.hengshangtqd.cn