正如包豪斯所倡導(dǎo)的“形式追隨功能”，B端設(shè)計(jì)正朝著多元化、智能化和人性化的方向發(fā)展。本文結(jié)合釘釘近10年的設(shè)計(jì)經(jīng)驗(yàn)，從版式設(shè)計(jì)的角度出發(fā)，探討如何通過秩序美、對稱美、韻律美等設(shè)計(jì)原則，提升B端產(chǎn)品的易用性和協(xié)同效率。

回溯互聯(lián)網(wǎng)的發(fā)展進(jìn)程，從桌面端的撥號上網(wǎng)，到5G移動互聯(lián)網(wǎng)，再至人工智能的助力，科技領(lǐng)域正在經(jīng)歷著翻天覆地的變革。未來的數(shù)字世界，在沉浸感、參與度、個性化等維度對體驗(yàn)會提出更進(jìn)階的要求；與此同時，B端企業(yè)對于高效、簡便、用戶友好的界面需求與日俱增。在2025年的當(dāng)下，B端設(shè)計(jì)師唯有持續(xù)學(xué)習(xí)，適應(yīng)新技術(shù)與新趨勢，緊密圍繞客戶的業(yè)務(wù)價值展開設(shè)計(jì)，進(jìn)一步注重實(shí)用性、包容性以及可定制化，方可為企業(yè)客戶塑造出卓越的產(chǎn)品與服務(wù)。

因此，我們結(jié)合釘釘近10年的B端產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn)，鑒于未來B端設(shè)計(jì)趨勢將展現(xiàn)出多元化、智能化和人性化的特質(zhì)，從B端產(chǎn)品個性化、風(fēng)格與質(zhì)感、界面版式、圖標(biāo)、動態(tài)交互等多維度設(shè)計(jì)展開深度研究，與大家一道探討B(tài)端設(shè)計(jì)的本質(zhì)和趨勢，期望在真正駕馭B端產(chǎn)品設(shè)計(jì)的這條道路上，帶來些許有益的啟迪。

上篇文章我們講述了B端產(chǎn)品的風(fēng)格&質(zhì)感趨勢，如何為企業(yè)塑造品牌形象、為個人用戶提供情感價值。

今天要給大家分享的是B端產(chǎn)品版式設(shè)計(jì)趨勢，助力企業(yè)產(chǎn)品提升易用性，進(jìn)而幫助企業(yè)員工更高效協(xié)同與工作，增強(qiáng)企業(yè)的整體業(yè)務(wù)效率和競爭力。

一、從藝術(shù)的歷史長河中捕捉版式之美

古今中外，我們不難察覺，但凡經(jīng)典且極具美感的設(shè)計(jì)，往往都離不開：重復(fù)秩序、節(jié)奏韻律、對稱均衡、虛實(shí)留白、主次對比等設(shè)計(jì)審美。譬如：在《寒江獨(dú)釣圖》中，憑借其絕妙的空間留白，我們能體悟到此處無物勝有物的妙境；又如達(dá)達(dá)主義時期，藝術(shù)家們依靠對排版的探索以及看似自由的布局，我們能洞察到視覺變化所產(chǎn)生的沖擊力；再如：包豪斯時期，設(shè)計(jì)師阿明·霍夫曼通過采用網(wǎng)格、非對稱、最低限度的排版對比，我們能感受到個體于統(tǒng)一中亦能增添差異和想象。

以史為鑒，于有限的版面空間之內(nèi)，將文字、圖像、色彩等視覺元素進(jìn)行有組織、有目的地編排整合，以實(shí)現(xiàn)信息的有效傳達(dá)和視覺上的識別，版式設(shè)計(jì)所帶來的美感，需要我們逐一捕捉：

1. 秩序美

“萬事離不開方法，世界離不開秩序?！边@句名言來自18世紀(jì)英國著名文學(xué)家斯威夫特，雖說原意并非針對設(shè)計(jì)，卻在版式設(shè)計(jì)中同樣適用。

網(wǎng)格分割

版式的秩序美源于空間劃分的合理性以及元素位置關(guān)系的秩序感，網(wǎng)格恰是這樣一種利器，在賦予秩序美感的同時，能夠切實(shí)增強(qiáng)版面信息的易讀性，讓設(shè)計(jì)條理分明，結(jié)構(gòu)合理，還能提升設(shè)計(jì)效率和統(tǒng)一標(biāo)準(zhǔn)。在傳統(tǒng)媒介諸如書籍、畫冊、雜志、包裝設(shè)計(jì)當(dāng)中，欄式網(wǎng)格得到了廣泛的運(yùn)用，譬如書籍設(shè)計(jì)里經(jīng)典且常見的 1:1.4 白銀分割法便源于此。

重復(fù)規(guī)律

自然界中經(jīng)常會出現(xiàn)重復(fù)的事物，往往給人的感覺是非常具有秩序性和規(guī)律性的，他們重復(fù)的形式不限于形狀、尺寸、色彩、質(zhì)感、方向、空間等。在商業(yè)設(shè)計(jì)中，譬如品牌標(biāo)志、海報、插畫等大量使用了重復(fù)的手法，其能使設(shè)計(jì)產(chǎn)生安定、整齊以及隱性的視覺聯(lián)想，很好的為品牌塑造出讓人印象深刻的視覺符號，以及科技先進(jìn)的品牌調(diào)性。

2. 對稱美

對稱美學(xué)的運(yùn)用隨處可見，大至三維空間，小至二維平面。譬如生活里，人體的自然構(gòu)造呈現(xiàn)出對稱之態(tài)；繪畫藝術(shù)里，達(dá)芬奇的《夢娜麗莎》運(yùn)用軸對稱構(gòu)圖法，使得人物形象更具端莊和柔美；建筑領(lǐng)域里，對稱的造型結(jié)構(gòu)能夠營造出穩(wěn)定之感與莊嚴(yán)之態(tài)；而在攝影師的相機(jī)里，對稱的表現(xiàn)形式亦是一種極具藝術(shù)性的視覺傳達(dá)。

比例均衡

從理論層面來講，我們不難找到對稱的方法有很多：水平、垂直、中心、放射等對稱形式。于設(shè)計(jì)師而言，最為核心的還是要依據(jù)設(shè)計(jì)內(nèi)容和目標(biāo)受眾來選取恰當(dāng)?shù)膶ΨQ形式：譬如商務(wù)傳播適宜采用垂直對稱，以彰顯專業(yè)嚴(yán)謹(jǐn)；營銷廣告則可以嘗試放射對稱，從而增添吸引力和趣味性。此外，適度調(diào)整字體、顏色、線條粗細(xì)等比例能夠快速提升設(shè)計(jì)的精致程度，譬如局部文字錯位、色彩對比等，反倒能夠?yàn)閷ΨQ美學(xué)進(jìn)一步增添靈動之感。

結(jié)構(gòu)簡潔

對稱結(jié)構(gòu)通常具備簡潔性與明確性，因其基于一種鏡像模式，致使設(shè)計(jì)或物體的結(jié)構(gòu)易于被理解。譬如大眾汽車的標(biāo)志通過上下對稱的“V”和“W”組合，簡潔明晰地傳遞了品牌形象；又如迪奧的香水瓶身，左右對稱的設(shè)計(jì)，搭配簡潔的文案包裝，彰顯出品牌的優(yōu)雅與精致；再如蘋果應(yīng)用商店的圖標(biāo)，憑借中心對稱的特性，看上去整體又舒適，這種風(fēng)格也契合蘋果產(chǎn)品一貫追求簡約、易用的理念。

3. 韻律美

除了秩序美和對稱美，版式中還隱藏著一份獨(dú)特的韻律美：通過各元素組合排列衍生出如同音樂節(jié)奏般的停頓與變化，使畫面張弛有度，增添美感與意境。

疏密留白

“Less is more”。在版式設(shè)計(jì)中，巧妙地留白，旨在更好地襯托主題，留下想象的余地。故而，在排版時，并非做得越滿越豐富就越好。在電商發(fā)展前期，部分公司要求推廣海報上堆滿文字圖片信息，但實(shí)際上忽略了最為重要的一點(diǎn)：沒有給予用戶安全感，讓用戶產(chǎn)生產(chǎn)品品質(zhì)低劣的感受；反之，留白較多的版面，除了帶來更品質(zhì)、富有格調(diào)的感覺，同時能夠起到強(qiáng)調(diào)主題、快速理解的作用，也更有利于傳播。

主次對比

作為設(shè)計(jì)師總是被甲方要求“放大，再放大，全部都放大”，其言下之意是希望建立出好的主次層級關(guān)系，把用戶視線吸引到主要信息上。良好的對比關(guān)系通常離不開大小、虛實(shí)、色彩等對比，從而形成視覺沖擊。譬如：

蘋果官網(wǎng)的產(chǎn)品展示，通常會以大幅高清、精致的產(chǎn)品圖片作為主體，占據(jù)中心位置，全方位展示其外觀和特點(diǎn)，吸引用戶的注意力。而產(chǎn)品名稱、主要賣點(diǎn)和特色功能等信息則以較大、醒目的字體放置在圖片下方或旁邊，方便用戶快速了解產(chǎn)品的核心信息。至于產(chǎn)品參數(shù)、規(guī)格、購買鏈接等則以較小字號，簡潔地分布在頁面的下方或側(cè)邊欄，當(dāng)用戶對產(chǎn)品感興趣并想要進(jìn)一步了解時，可以自行查看，從而形成主次分明的信息層級，提升用戶體驗(yàn)。

進(jìn)入互聯(lián)網(wǎng)時代，手機(jī)和電腦早已成為人們?nèi)粘２浑x手的移動設(shè)備，與此同時，國內(nèi)外B端產(chǎn)品設(shè)計(jì)發(fā)展也越來越成熟，隨之涌現(xiàn)了一批專業(yè)而完善的設(shè)計(jì)系統(tǒng)，譬如來自：IBM（IBM Design Language）、谷歌（Material Design）、微軟（Fluent Design）、螞蟻（ant design）等，像秩序、對稱、韻律等版式審美也被沿用在其中。

從實(shí)戰(zhàn)案例中汲取版式設(shè)計(jì)趨勢

如Oliver ?Reichenstein所說：“排版的目的是優(yōu)化可讀性、訪問率以及可用性，保持和圖形的平衡關(guān)系?！??好的排版使用戶易于閱讀，而混亂的排版則使用戶失去繼續(xù)瀏覽的意愿。我們結(jié)合釘釘近10年的B端產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn)，通過大量研究優(yōu)秀的實(shí)戰(zhàn)案例，汲取出2025 B端版式設(shè)計(jì)趨勢核心為以下：

1. Bento設(shè)計(jì)

Bento原意是指日式的便當(dāng)盒，食物通過格子組合排列看上去既精致又有食欲，格外體現(xiàn)秩序的美感。早在2008年Android手機(jī)系統(tǒng)上就已開始應(yīng)用：信息類、控件類、混合類組件層出不窮；在2010年Windows Phone 7也引用了Metro設(shè)計(jì)語言，這些都可以視為如今Bento設(shè)計(jì)的靈感來源，直到被蘋果設(shè)計(jì)應(yīng)用后，便開始廣為人知的爆發(fā)。

Bento設(shè)計(jì)基于網(wǎng)格系統(tǒng)的布局，讓用戶更專注每個「Box」里的信息。在B端產(chǎn)品中，大量的后臺管理型場景正朝著這種設(shè)計(jì)布局邁進(jìn)，譬如：釘釘?shù)囊舜罟芾砗笈_，通過強(qiáng)調(diào)信息的層次分明，結(jié)合模塊化、清晰化的特點(diǎn)，為后臺系統(tǒng)帶來了前所未有的整潔與秩序，同時還易于管理，讓復(fù)雜的后臺操作也變得井井有條起來。

此外，在釘釘其他場域場景中使用Bento設(shè)計(jì)的案列也比比皆是，譬如：釘釘「首頁加號」、「更多」、「AI助理」、「釘釘官網(wǎng)」等。

2. 圓角卡片化設(shè)計(jì)

隨著設(shè)計(jì)風(fēng)格不斷演變，傳統(tǒng)的方角卡片逐漸被取代，代之以更加柔和的圓角，其帶來一種友好、現(xiàn)代、溫暖的感覺。譬如釘釘?shù)摹竻f(xié)作」、「工作臺」、「通訊錄」、「我的」等核心頁面都逐漸卡片化，使界面中的信息呈現(xiàn)出更加集中、清晰、有序的美感。

3. 極簡設(shè)計(jì)

多年來，極簡主義一直是主導(dǎo)的設(shè)計(jì)趨勢，極其強(qiáng)調(diào)留白的韻律之美。不同的是：近年開始，在簡約的基礎(chǔ)上，設(shè)計(jì)師嘗試融入大膽色彩、大型字體以及吸引注意力的驚喜元素等，以形成兼具干凈與張力的風(fēng)格。此外，極簡設(shè)計(jì)還更加注重與交互深度結(jié)合，屏幕中的每一個元素都必須具有明確的功能或目的，用以引導(dǎo)用戶的視線和焦點(diǎn)，使形式服從于功能，讓信息的傳遞更高效。

釘釘作為7億+用戶的企業(yè)級智能移動辦公平臺，提供了即時通訊、多組織協(xié)同、數(shù)字化管理、智能助理等多場景能力。

從個體用戶視角來看，時常會感受到界面復(fù)雜、信息密度高、理解成本高等問題。如何在保持產(chǎn)品能力豐富且易用的同時，打造簡約高效的界面，是設(shè)計(jì)師核心考慮的重點(diǎn)。譬如：在會議場景中，用戶可直接輸入投屏碼，即可一鍵共享電腦&手機(jī)上的內(nèi)容，再無接線煩惱，輕松簡單。

4. 響應(yīng)式設(shè)計(jì)

為了讓用戶在不同設(shè)備（如電腦/平板/手機(jī)等）上都能有一致且優(yōu)質(zhì)的體驗(yàn)，響應(yīng)式布局由然誕生。其能兼容各種屏幕尺寸和分辨率的設(shè)備，頁面元素都能合理展示：文字清晰可辨、圖片完整顯示、操作也便捷流暢，不會出現(xiàn)布局錯亂或內(nèi)容顯示不全的問題，同時減少開發(fā)和維護(hù)多版本工作量與資源投入問題。譬如：釘釘?shù)墓ぷ髋_，為了適配各端且保障好用戶一致性體驗(yàn)，在頁面設(shè)計(jì)和研發(fā)時，就充分考慮了這點(diǎn)。

5. 動態(tài)設(shè)計(jì)

隨著數(shù)字技術(shù)發(fā)展，通過元素的運(yùn)動和變化，動態(tài)排版能迅速抓住受眾的目光，有效提升內(nèi)容關(guān)注度。在B端品牌推廣或產(chǎn)品發(fā)布時，動態(tài)海報能將靜態(tài)視覺效果與微妙的循環(huán)動畫融合在一起，幫助企業(yè)品牌在飽和的數(shù)字環(huán)境中脫穎而出。在釘釘同樣也適用，譬如：「釘釘?shù)卿涰摗?，用戶首次登錄時，在有限時間內(nèi)，我們可以通過動態(tài)引導(dǎo)更直接有序的把釘釘產(chǎn)品價值透傳給用戶；再如：「釘釘含釘量」發(fā)布介紹，通過動態(tài)的閱讀順序和節(jié)奏變化，讓用戶更好的理解和吸收內(nèi)容。

6. 無障礙設(shè)計(jì)

面向企業(yè)或組織用戶的產(chǎn)品服務(wù)時，設(shè)計(jì)師需要充分考慮到所有用戶的能力和需求，包括有身體、感官或認(rèn)知障礙的用戶，確保能夠平等、方便、高效地使用。譬如：

• 按鈕和輸入框要保持足夠交互間距，避免擁擠，便于點(diǎn)擊和輸入；
• 文字確保與背景色彩對比度高，如黑底白字或白底黑字，方便視障用戶閱讀；
• 用色避免使用單一顏色區(qū)分信息：對于色盲或色弱用戶，應(yīng)結(jié)合形狀、圖標(biāo)或文字輔助區(qū)分。

與此同時，像釘釘這種面向全球化的B端產(chǎn)品，我們還需要提供多語言支持，方便不同語言背景的用戶使用。

結(jié)語

引用《簡約至上》中所言：創(chuàng)造簡單用戶體驗(yàn)的秘訣在于把復(fù)雜性轉(zhuǎn)移至恰當(dāng)?shù)牡胤健?/p>

設(shè)計(jì)的目的并非消除所有復(fù)雜性，而是將其置于最為合適的位置。

B端產(chǎn)品設(shè)計(jì)是一個復(fù)雜且極具挑戰(zhàn)的領(lǐng)域，深入洞悉B端用戶與業(yè)務(wù)場景，簡化信息架構(gòu)，塑造清晰、直觀的的界面版式能夠有力助推企業(yè)產(chǎn)品易用性大幅提升，進(jìn)而幫助企業(yè)員工更高效地完成協(xié)同與辦公，增強(qiáng)企業(yè)的整體業(yè)務(wù)效率和競爭力。

在未來的B端產(chǎn)品設(shè)計(jì)里，我們應(yīng)始終把用戶體驗(yàn)置于首位，持續(xù)探索并創(chuàng)新界面版式設(shè)計(jì)的方法與策略，為B端用戶締造更加友好、便捷的體驗(yàn)。