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

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

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

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

B 端产品经理如何快速成长？

产品与业务架构主要是将整个业务工作流进行分层，梳理，然后抽象出一个个需求，将业务需求与产品合情合理的映射起来，最终使业务数据在产品中流动，执行，记录，使用。

查看详情 >

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

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

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

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

1. 秩序美

“萬(wàn)事離不開(kāi)方法，世界離不開(kāi)秩序。”這句名言來(lái)自18世紀(jì)英國(guó)著名文學(xué)家斯威夫特，雖說(shuō)原意并非針對(duì)設(shè)計(jì)，卻在版式設(shè)計(jì)中同樣適用。

網(wǎng)格分割

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

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

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

2. 對(duì)稱(chēng)美

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

比例均衡

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

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

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

3. 韻律美

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

疏密留白

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

主次對(duì)比

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結(jié)語(yǔ)

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

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

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

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