今天蘭亭妙微UI設計公司，來講解 B 端產品界面的視覺風格，聊聊在整個行業當中視覺風格的變化與目前的現狀。以及給大家說說未來應該如何選擇自己產品的視覺風格～

我們會將整體分為行業初期，萌芽期、成長期、野蠻發展期、新階段 ，每一個階段給大家總結一個最為流行的風格，并分析這個風格出現的原因，方便大家進行理解。

一、行業初期-經典傳統風

我們把時間拉回到 2012 年。在那時，Ant Design 還沒有出現，也沒有什么 Element、Semi Design，行業當中最早的 B 端系統都是以客戶端的形式進行呈現。

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

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

而在早期，出現這些老舊風格主要有三個原因：

1.技術框架限制：因為當中成熟的前端框架較少，沒有太多技術棧提供給到開發進行使用，因此沒有精力將頁面做得漂亮

2.認知不足：設計師對于客戶端、網頁端的設計理解認知本身不夠，做得較為粗糙，比如當時的 Office 的界面設計也大致是如此的模樣

3.風格一致：早期 Windows 系統就是這樣的風格，與 Windows 一致更容易被大眾所接受，因此就很難進行創新

關于這類風格的產品，大家不要覺得這夸張，其實在目前依舊有很多產品會延續這個風格。比如 醫療類產品、工業生產類系統，對于他們而言，能用即可，不必糾結太多。

但隨著時間的推移，行業中對于 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 點原因：

1.因為新擬態風格整體所占面積較大，比較浪費空間。像是一個按鈕，都需要使用較大空間才能呈現。

2.需要大面積的留白，但是對于 B 端設計來說無法做到，因此很難進行使用。

3.同時很多用戶剛開始覺得好看，但隨著時間的推移，出現審美疲勞，因此就不太喜歡。

現在還會使用新擬態風格的界面設計越來越少，大多數只會在官網設計的局部進行使用，這樣可以轉換視覺感受，給到用戶更好的視覺沖擊～

五、新階段-灰白風

時間來到 2022-2024 年左右，你會發現很多產品都開始在這個時間節點進行更新。

像我們熟知的 飛書、有贊、微盟、ONES、Coding，再到 Ant Design 、Salesforce，你會發現非常多的產品都在進行界面風格上的迭代。

對于這個風格，我們愿意叫它為 灰白風。

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

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

在 2018年，飛書管理后臺的第一個版本，采取的就是沉穩側黑風，

在 2022 年，飛書的管理后臺開始改變為灰白風格

由于業務的疊加，2023 年時，在此基礎上增加了頂部導航的業務維度，最終形成了現在這樣的界面。

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

1.減少信息層級，給用戶減負：之前沉穩側黑風格，會發現頁面明顯進行大面積的分割，導致視覺感受出現較大差異?，F在只用灰色作為底，去區分主副信息這樣會更簡單的突出主要信息內容。

2.平臺型產品更容易嵌入：因為國內 B 端產品大多需要依附“釘釘、企微、飛書”三大平臺，因此使用灰白風能夠讓自己產品快速嵌入，不需要過多調整。如果你的產品是沉穩側黑風，那結果想都不敢想…

3.更容易進行適配：針對多產品的業務，也能夠使用同一套業務完整呈現才會更加合理。比如飛書的灰白風，在飛書的其他很多產品里面也會存在

轉載：人人都是產品經理

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

蘭亭妙微UI設計公司，本次分享主要的工具也都是 AI 相關，有工業和產品 3D 設計 AI 平臺 3flow，語音轉社交媒體圖片的 AI APP，面向 AI 創作者和開發者的在線社區 B150，專業的 AI 圖像生成與編輯平臺 APImage，Win95 風格 AI 創作者交流社區，以及榮獲黑客松大獎的 AI 編程配置的超強 Skill。

一、工業和產品 3D 設計 AI 平臺 3flow

鏈接：https://3flow-ai.com/

3Flow AI 是一個面向產品設計的 AI 工具，可以在瀏覽器里直接使用。它的核心能力是把「想法」快速變成設計圖，甚至直接生成 3D 模型，幫助設計師從靈感到初步原型的過程大幅提速。相比傳統設計軟件，它更偏向創意階段，讓你幾秒鐘就能看到一個產品雛形。

在功能方面，3Flow AI 是非常突出的，生成速度非?？欤◣酌雰瘸鰣D）、支持從 2D 圖像一鍵轉成 3D 模型、可以對局部設計做修改（比如換材質、顏色），以及自動生成多種設計變體用于對比。整體上，它把「畫圖 + 建模 + 修改」的流程整合在一個工具里，減少反復切換軟件的成本。

3Flow AI 徹底降低了 3D 和工業設計的門檻，你不需要會復雜的 CAD 或 3D 建模，也能快速把想法變成可視化甚至可打印的模型。對于做產品、內容創作或創業的用戶來說，它可以顯著縮短從創意到驗證的時間，讓「想一個東西并做出來」變得更容易、更便宜。

二、語音轉社交媒體圖片的 AI APP

鏈接：https://thereframe.app/en

Reframe 能將你的語音筆記轉換成專業的 Instagram / LinkedIn / Facebook / X 上展示的輪播圖，當然這可以發到微博/小紅書/小綠書/朋友圈。你只需說出你的想法——AI 會自動構建框架、設計每個幻燈片，并保留你真實的語氣。無需任何設計技能。

簡單來說，Reframe 是一款專為創作者設計的 AI 社交媒體排版應用，它的核心理念是將用戶的「語音」直接轉化為具有專業設計感的輪播圖和文字貼文，幫助創作者在沒有專業團隊和設計師的情況下快速制作內容。

Reframe 核心優勢是「語音轉圖文」與「對話式編輯」。你只需錄制幾十秒的語音表達想法，內置 AI 就會自動編寫出高吸引力的文案，并生成帶排版的輪播圖草稿。你可以通過與 AI 聊天來微調文字內容，還能自由套用精美的預設模板、修改字體和顏色，最后支持一鍵導出為圖片或 PDF。

Reframe 極大降低了內容創作的門檻與時間成本，無論是在通勤路上還是靈光一現時，只需動動嘴就能把零碎的靈感瞬間變成高質量的社交傳播素材。它完美解救了不擅長寫文案和做排版的新手，讓每個人都能輕松像專業博主一樣高效產出爆款圖文，提升個人影響力。

三、面向 AI 創作者和開發者的在線社區

鏈接：https://b150.ai/

B150 是一款專為 AI 開發者、創作者和創業者打造的「專業社交網絡」與社區平臺。它致力于成為那些利用 AI 技術進行編程、設計、影視制作、游戲開發等領域的「實干家」們的聚集地，幫助他們將大膽的想法轉化為真實落地的項目。

B150 提供了以項目為驅動的在線社交體驗，AI 創作者不僅可以在信息流中展示自己的作品、獲取早期種子用戶和真實的反饋，還能在這里尋找志同道合的合作者。此外，它集成了 AI 工具及資源探索、AI 人才與工作機會招聘看板，以及專屬的工具折扣市場，全方位覆蓋從產品構思到發布落地的各種需求。

對于普通的 AI 愛好者和創作者而言，B150 提供了一個高濃度的專業學習和互助圈層。它打破了傳統社交媒體的雜音，讓你能專注于看別人是如何利用最新的 AI 工具來解決實際問題的。不僅能幫你少走彎路，還能讓你在發布自己的「副業」或項目時，快速找到第一批支持者，真正將「想法」變成「事業」。

四、專業的 AI 圖像生成與編輯平臺 APImage

鏈接：https://apimage.org/

APImage 是一款專業的 AI 圖像生成與編輯平臺，專為電商團隊、企業和創作者打造。它能夠將簡單的文字提示迅速轉化為高質量、可直接用于商業生產的視覺素材，如產品展示圖、生活方式插圖或品牌創意海報，只需幾秒鐘即可完成。

APImage 的核心優勢在于強大的「視覺一致性控制」及全面的編輯工具，不僅具備文本生圖、一鍵摳圖和局部重繪功能，最亮眼的是允許用戶建立專屬資產庫。這意味著您可以在不同場景中反復生成擁有完全相同人物面孔、產品細節或特定背景的圖片。此外，它還支持 API 接入和各類自動化工作流整合。

對普通用戶、電商小賣家和自媒體人而言，APImage 徹底打破了專業攝影和設計的門檻。無需租借影棚或聘請專業模特，僅靠打字就能穩定地產出成套的、風格統一的高端商業大片，并且它就是為這樣的場景而創造的。APImage 解決了傳統 AI 繪圖「每次結果都隨機、難以連貫」的痛點，讓個人也能輕松擁有專業級的視覺生產力。

五、Win95 風格 AI 創作者交流社區

鏈接：https://www.ideaboard95.com/

IdeaBoard95 是一款主打復古風格的公開創意靈感看板網站。它的界面被精心設計成了經典的 Windows 95 操作系統風格，為獨立開發者、創作者和普通用戶提供了一個展示產品想法、尋找靈感以及進行社區交流的公共空間。

IdeaBoard95 將復古視覺與極簡交互結合，用戶可以使用 Google 賬號快捷登錄，在看板上發布有關 App、網站或 AI 的產品點子，也可以為別人的好主意點贊投票。盡管外表懷舊，但它底層具備優秀的現代用戶體驗，在電腦和手機端都能清晰瀏覽，并支持通過標簽快速篩選感興趣的內容。

IdeaBoard95 提供了一個輕量化、充滿趣味的「想法展示區」，它避免了零散的靈感在復雜的筆記工具中吃灰，并用這種沒有壓力的懷舊方式降低了分享的門檻。這讓每個人都能輕松地把腦海中的奇思妙想貼在「公屏」上，純粹地碰撞思維火花并驗證點子的可行性。

六、榮獲黑客松大獎的 AI 編程配置 Skill

鏈接：https://github.com/affaan-m/everything-claude-code

Everything Claude Code 是由 Anthropic 黑客松獲勝者開源的一款極具人氣的 AI 編程配置庫。它并非獨立軟件，而是專為 Claude Code、Cursor 等 AI 智能體打造的「性能增強與工具擴展包」。

這個 Skill 提供了一套開箱即用的精密架構，內置了大量專家級的 Agents、按需加載的 Skills 以及自動化規則。它全面支持多語言環境，并具備記憶持久化、持續學習和安全審查等高級功能。這些配置能有效優化大模型的 Token 消耗，讓 AI 像資深工程師一樣精準拆解并自主執行復雜任務。

哪怕你是純粹的新手小白，你也可以輕松使用它，因為它徹底免去了耗時費力的「AI 調教」過程。只需簡單引入這套經過實戰檢驗的配置，就能讓原本基礎的 AI 助手瞬間掌握數百種專業開發技能。它極大地降低了高效開發的門檻，讓沒有深厚技術積累的人，也能以幾倍的速度搭建出高質量的應用程序。

轉載：優設

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

在移動 UI 設計中，APP 導航是用戶觸達功能與內容的核心路徑，直接決定界面易用性、操作效率與整體體驗。蘭亭妙微設計在多年項目實戰中，總結出一套完整的導航設計方法論，兼顧產品邏輯、用戶習慣與視覺美感，確保每一款產品都清晰、高效、好用。

UI 設計師想要從 “執行層” 走向 “資深 / 專家層”，核心差距不在軟件操作，而在商業分析能力與全鏈路設計思維。蘭亭妙微設計結合一線互聯網職級標準，為設計師梳理可落地、可考核的能力進階框架，幫你從 “畫圖師” 升級為 “價值設計師”。

在用戶研究中，不知道你是否會有“不知道該如何獲取用戶需求”的情況，應該如何提問、如何設計提綱？是直接問用戶需要什么嗎？是直接問用戶對我們的現有方案有什么痛點嗎？是直接問用戶新方案好不好嗎？如何從用戶場景中洞察用戶需求？將會為大家講解用戶研究中的萬能鑰匙：用戶場景。

如何獲取用戶場景、如何通過用戶場景洞察需求、如何將用戶需求應用到產品/服務設計中，希望給大家帶來一些啟發～

一、為什么要到用戶場景中去？

首先，鏈接用戶需求和產品/服務設計的關鍵是“用戶價值和產品價值”，即通過準確的”用戶希望通過產品/服務實現的價值訴求”建立正確的“產品/服務自身想提供給用戶的價值主張”，產品/服務的一系列設計都是基于該價值主張開展，這樣的設計才是在各方面都滿足用戶需求的。

但是，用戶希望通過產品/服務實現的價值訴求并不是他能直接告訴我們的，尤其是在比較創新性、系統性的設計中，用戶直接表達的想要 XX 不一定是真實需求、而是假想的解決方案，

比如用戶常在調研中說“你這個按鈕再大一些”，我們可以無限制的放大按鈕嗎？用戶為什么希望更大一些？實際上的點擊場景是怎樣的？也許當我們進一步還原場景會發現除了放大按鈕，給按鈕換顏色、挪位置、固定區域都是可以的解決方案。

當我們洞察用戶背后更深層次的原因和訴求時，“用戶場景”就是最關鍵的介質：

1. 用戶場景是最容易獲取的、承載用戶訴求的表象內容，在研究過程中能通過很多研究方法直觀獲得，通過用戶場景我們能獲取用戶的行為習慣、消費特征、決策偏好等豐富的內容；
2. 產品方案設計的本質也是重新設計用戶的場景，是基于現有場景中的痛點和期待進行場景再造，因此回到用戶現有場景中就很關鍵。

二、什么是用戶場景？

先來看一段訪談對話～

Q：您周末的時候一般做什么事情？

A：我一般都在家里陪陪女兒和兒子。

Q：您能幫我們回憶下周末都會陪女兒和兒子做什么事情嗎？

A：一般我都會在周末給他們準備早午飯，還會做一些烘焙。

上面是我們要獲得的用戶場景嗎？并不是，我們需要的場景是：有豐富的細節、有生動的畫面感、有強烈的代入感的“還原性場景”，需要包括空間、時間 、人物、行為，像下面這種：

Q：您和孩子共享早午飯的時候是什么樣子呢？可以具體的描述一下當時的場景、越細致越好。

A：我家的廚房在一樓，一般都是西廚用的比較多，我起來之后會做一些西餐，牛奶、三明治，我喜歡邊做飯的時候邊聽音樂，享受其中。我女兒很喜歡“有儀式感”的早餐，所以每次我都在我家的吧臺鋪上一條桌布，把食物精致的擺在盤子里，還會放一束花，在樓上呼喚樓上“親愛的公主，下來用餐啦”，孩子就坐在高腳凳上有說有笑的吃，我還把每次做的飯都拍了照片單獨存了相冊（隨后與我們分享了手機里的照片，網紅早餐）

該場景是在地產項目中常見的空間使用場景，在不同的項目類型中我們所關注的場景類型也有所差異，一般可以區分為通用的生活場景和與該產品/服務強相關的場景，其中后者需要重點關注：

1. 生活場景：一般通過用戶《典型的一天》去了解家庭場景、獨處場景、社交休閑場景、工作場景、消費場景等；
2. 產品/服務場景：包括用戶購買時的決策場景和操作產品/接受服務的使用場景，具體研究的場景與項目類型有關。

三、如何獲取用戶場景？

可以通過深度訪談、陪同訪問、觀察法等多種方法結合獲取用戶場景：

1. 深度訪談

通過與受訪者一對一面談的形式，深入了解用戶的購買行為及邏輯、產品關注點及需求、產品使用場景等信息。

該方法有充足的時間與用戶深入交流，是最常用的方法，但該方法多是用戶通過回憶回答問題，會帶有一定主觀性，這時候就可以結合另外兩種方法進行；

2. 陪同訪問

在購買或實際使用階段陪同用戶進行，真實還原場景，直接觀察用戶的行為、情緒、與各觸點的接觸狀態等，結束后及時進行補問，了解其行為動因、消費、使用體驗感知等。比如跟隨用戶前往售樓處參與決策過程、讓用戶共享手機屏幕參與在電商平臺的挑選過程。

該方法能避免用戶回憶、在實際場景中了解用戶最直觀、真實的反應，在用戶和產品/服務接觸場景中需要盡量減少打擾、觀察和記錄問題，在該階段結束后再進行訪談。

3. 觀察法

通過在家中看、聽、親身體驗等行為找出現象作為確證，深入揭示客戶生活場景及產品使用習慣。比如觀察用戶家中廚房的布局、家電，詢問為什么買這些家電、一般哪些場景下用、為什么放在該位置、如何布局的動線等。

該方法更發揮研究員的主動性，需要在觀察中抓到關鍵信息（如此次研究重點關注的、該用戶與眾不同的信息等）去進行挖掘。

在應用以上方法獲取場景時，還需要關注訪談提綱的設計和工具的使用：

訪談提綱是按照一定順序去獲得場景，多采用“總分總”的結構：1）總-先整體回憶，不用描述細節，對整個過程有大致的了解，并記錄被訪者重點說的內容；2）分-每個環節詳細說，重視被訪者反復說的內容；3）總-對所有提到的內容進行總結、補充、評價；

其中“分”里的場景順序，根據項目類型可以：

1. 以流程為序：有明顯先后發生順序的場景，如購買場景（產生動機-獲取信息-篩選信息-現場選擇-對比-決定…）、看房場景（售樓處-沙盤講解-園區介紹-樣板間看房-簽約…），可結合《顧客旅程圖》《決策旅程圖》工具使用；
2. 以空間變換為序：和空間有較強關系的研究，可以空間為序，如地產項目需獲取的場景（臥室、廚房、客廳、衛生間、園區、周邊），可結合《戶型圖》《場景卡片》工具使用；
3. 以時間為序：對于生活形態、日常行為相關的生活場景研究，可以時間為序，如工作日和非工作日一天的軌跡（從起床到睡覺，什么時間去了哪里發生了什么…），可結合《典型的一天》工具使用；

對于較難描述的價值場景，可以通過示卡測試、情景假設、朋友圈探究的方式去激發用戶講述：

①示卡測試：主要包含關鍵詞測試與圖片測試兩種方法，在撰寫提綱時我們針對需要挖掘的價值場景提前準備示卡，在訪談時提出問題、出示卡片，讓用戶選擇、并通過案例或場景描述解釋為什么這樣選擇：

②情景假設：提出假設性問題，留給受訪者暢想的空間，鼓勵受訪者放飛想象

如用情景假設的方法挖掘客戶的理想度假狀態：

Q 拋開現實條件的束縛，如果給你兩天時間，您最理想的度假地點是哪里？你會怎么度過呢？請您暢想一下。

Q 如果給您兩周時間呢？

③朋友圈探究：通過瀏覽用戶朋友圈，觀察日常分享行為，以便更深入的了解用戶，總結其價值觀、在意點、需求取向等。比如是樂于分享的、關注熱點的、喜歡未知愛探索的等等。

四、如何洞察場景中的用戶需求？

在洞察場景時，首先需要對用戶群體進行分類，這里的群體分類要依據用戶對產品/服務/功能的使用差異進行區分，比如文旅地產開發項目中，我們結合用戶的生命周期和置業目的，可以區分為養老一族、家庭度假、享樂度假、投資客，地產公司實際在開發產品（含戶型/配套/服務的產品大概念）時也會考慮針對的主要群體，因此需要把同一類用戶的場景放在一起分析。

接下來的場景洞察也以該文旅地產開發項目為例：

1. 場景分類形成典型場景庫

從用戶訪談小結中抽取該類用戶的所有場景進行整合分類，結合地產維度可以為購房場景、居住場景、物業交流場景、社區交流場景等。

2. 分解場景關鍵內容洞察需求，以下圖的場景為例

首先標注場景關鍵內容，對場景中人、時間、地點、行為、互動、情緒感受、喜好偏好等內容標注；

其次分析背后原因，將自己代入角色中，分析這樣做的原因是什么，反映了具體什么人物特點；

再是去除具象標簽，將與個人相關的具體內容去掉，轉化為更高級別的需求；

3. 需求進一步提煉核心訴求

從場景中洞察的需求有時候會偏零散的，無法一步形成系統化建議，如果說場景是冰面以上的東西、需求是冰面以下的東西，那訴求是深海中的、是比需求更深層次的洞察，更有利于總結用戶的共性需要，將其作為設計原則、進行系統化設計和建議的提供。

看一些具體的需求-訴求的提煉案例，會發現這些訴求都可以作為產品/服務的設計原則，再應用到不同方面的具體設計中，比如戶型的、配套的、物業服務的、社區活動的等等：

寫在最后

米蘭·昆德拉說過：“無意義是生活的常態，但我們要試著去挖掘它，并且努力愛上它”，對于用戶場景的研究也是如此，看似沒什么特別的場景，其實隱藏了很多細節、用戶訴求的體現，通過對已有場景的洞察和研究，設計出更符合用戶需求和期望的新場景，希望我們都能在用戶場景中開出花～

轉載：優設

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

在蘭亭妙微設計的 UI 與交互項目中，懂交互的設計師才能做出真正好用、易用、用戶愛用的產品。只拼視覺不夠，用底層交互原理支撐設計，才能讓界面既好看又好用。

在蘭亭妙微多年 UI 設計項目中，文字排版是設計師與前端對接時高頻出問題的環節：視覺稿精致清晰，開發還原后卻錯位、擁擠、層級混亂，反復像素級微調浪費大量時間。

可用性是衡量產品體驗與交互設計是否成功的核心指標。蘭亭妙微作為專業設計機構，在移動端與 PC 端產品設計中，始終以可學習性、靈活性、魯棒性為底層框架，將可用性原則落地到每一個交互細節，讓產品更易用、更好用、更耐用。

蘭亭妙微作為專業 UI/UX 設計服務機構，始終以標準化流程、專業化交付、全周期跟進為核心，確保每一個項目從需求到落地都嚴謹可控、體驗優質。本文為公司內部執行標準，同步對外公開，便于客戶與合作伙伴清晰了解我們的設計協作路徑。

B端系統軟件中表單的應用場景非常多，今天蘭亭妙微UI設計公司，就撈點干貨，說說B端產品表單如何設計，用戶體驗會更好。

從標題、輸入框、布局排版、數據展示四個方面，詳細介紹一下關于表單的體驗設計，目錄如下：

一、標簽是否加冒號

設計師A說：不加冒號，用戶不在意，而且占空間…..

設計師B說：要加冒號，加上可以更好的區分上下文，以及標簽和輸入框的關系…..

以上A/B設計師說的都有一定的道理，那到底加不加冒號呢？

遇到問題咱就先調研一波，看一下Win、Mac系統中是否有無冒號。

Win系統：最新版本不加冒號。

Mac系統：最新版本設計偏向C端化，不加冒號，13.0.1之前版本有冒號。

是不是感覺主流的設計是不加冒號呀？

稍等一下…那在具體B端系統中是有怎樣的應用場景呢？

以上場景中左右布局，單選/多選組件、標題加內容組件都不適合去掉冒號展示。

那到底加不加冒號呢？

可以先說一下答案，加不加冒號對用戶無影響，《Web 表單設計·創建高可用性的網頁表單》中，卡羅琳·賈雷特做過大量測試，最終證明沒有一名用戶留意表單冒號是否出現。

因此，得出以下建議：

• 如果你希望系統重表單使用更多的業務場景和對齊方式，請使用冒號
• 如果你當前已使用有冒號的表單，請保持使用冒號

如果你新建一個系統，使不使用冒號隨意一旦決定是否使用冒號，需要全部表單統一規則  

二、表單必填樣式

用戶填寫表單時，有必填項和選填項，如果表單中多數或全部是必填項，那是否還應該對其標記？

答案是肯定的，用戶遇到較多表單填寫項時，是需要通過必填標記來評估工作量。下面就介紹一下具體標記必填項的三種樣式。

① 頂部統一提示

填寫表單過長或填寫表單被打斷（移動端常見），就會增加用戶工作記憶和認知負荷，完成任務更加困難，從而降低了用戶體驗。

② 文字提示“必填”

有部分設計師認為紅色“*”會增加視覺噪音，并且重復的紅色“*”會帶來一些認知恐慌，便采用文字提示方式，但這種方式比較占用空間，文字內容過長，用戶壓力較大，用戶體驗降低，不建議使用。

③ 紅色星號“*”必填提示

雖然有設計師認為紅色“*”會增加視覺噪聲，帶來一些認知恐慌，但紅色“*”在互聯網中很常見，用戶熟知其意，已形成固定的視覺語言，并且空間較小，能與標簽文字足夠區分開，相比之下采用紅色“*”必填提示是非常值得推薦使用。

但是還有一個問題，就是紅色“*”的位置是在字段前還是字段后呢？

紅色“*”的具體位置有三種位置，如上圖做了詳細展示。

1. 標題左側：比較常見，用戶打眼一看就能區分出必填項，推薦使用；
2. 標題右側：比較常見，多配合無號碼使用；
3. 輸入框右側：現有系統較少使用，由于輸入框形式、長度不統一，會導致難以瀏覽和判斷，不推薦。是否可標記可選字段？

這不是強制性的，但標記可選字段非必填，確實減輕了用戶思考，提升用戶體驗。  

三、提示樣式

用戶最理想閱讀的標題文字數是7±2，當標題文字過長，或不足對輸入項準確說明時，要給出對應的提示文字，幫助用戶更好的輸入內容，常見樣式如下。

這三種樣式是遞進邏輯，根據不同的文字提示內容和難度，選擇不同的提示樣式。其中對于第二種樣式中，圖標提示的位置還有幾種方式，如下圖說明。

四、小結

本文事無巨細的說了一下表單中標題樣式問題，雖然很多是表單設計的一些較冷較小的內容，但也需要設計師沉下心來，打磨細節之處。

轉載：人人都是產品經理

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