您現在所在位置： 主頁(yè) > 口碑營(yíng)銷(xiāo)
b端產(chǎn)品交互設計要點(diǎn)（如何制定B端項目全局框架）
更新時(shí)間：2026-05-05 02:10:41
這陣子想了想關(guān)于交互知識的端點(diǎn)何B端分(fen)享，還是產(chǎn)品應該要拓展成一整個(gè)系列的內容，包含各類(lèi)組件、交互控件和行為的設計解(jie)析。
基于我的制定分享習慣，我會(huì )盡量避免使用太過(guò)理論還是項目空泛的方式進(jìn)行講解，而是全??局聚焦具體的實(shí)戰場(chǎng)景，幫助大家理(╯°□°）╯︵ ┻━┻解如何做出合理的框架交互決策。
一、端點(diǎn)何B端交互的產(chǎn)品全局框架┐(′ー｀)┌是什么
交互設計本質(zhì)上就是設計產(chǎn)品的使用方式的過(guò)程，賬號怎么填寫(xiě)，交互表單怎么導出，設計數據怎么篩選，制定列表怎??么排序等等……針對每個(gè)功(/ω＼)能的項目使用方式，都可以花很長(cháng)的全局時(shí)間去考慮其??合理性。一個(gè)??項目的交互，就是這個(gè)項目所有功能使用方式的(de)總和。
那設計師如何開(kāi)始項目的交互設計？直接進(jìn)入細節，開(kāi)始跟著(zhù)原型制定輸入框的狀態(tài)，下拉菜單的展開(kāi)??邏輯嗎？
這樣肯定是不行的，項目的交互內容又多又雜，設計師會(huì )很快陷入這些細枝末節中疲于奔命。頭疼醫頭腳疼醫ヽ(′▽?zhuān)?/腳，容易造成項目細節缺乏統一性，前后矛盾，體驗割裂。
所以，理解項目交互設計的正確思路，就要知道在項目中有哪些交互內容，它們對應的層級和設計對象??是??什么。
在這里，我把需要設計的交互對象拆分成(cheng)4個(gè)種類(lèi)，它們從大(da)到小依次為：
全局框架：項目的主要模塊排版和布局，產(chǎn)品使用的主要依據和步驟
功能流程：需要較多操作步驟才可以完成的一個(gè)完整ヽ(′?｀)ノ的用戶(hù)使用目標
組(zu)件操作：一些復雜(′?_?`)模塊、業(yè)務(wù)組件的完整操作方法和狀(zhuang)態(tài)
控件使用ヽ(′▽?zhuān)?ノ：基礎控件元素的操作方法和狀態(tài)
比如大家都用過(guò) Adobe 的軟件，應該會(huì )有個(gè)感覺(jué)，就是熟悉了其中一款后用下一個(gè)，立馬就能上手，完成一些最基本的操作。而如果不是 Adobe 系列的軟件，用起來(lái)感覺(jué)就感覺(jué)非常別扭，往往要從頭開(kāi)始學(xué)起，比如對標 PS 的 Affinity Photo、Pixelmator。
為什么會(huì )出現這樣的(de)反差？就是因為 Adobe 盡可能統一了自己生態(tài)內的軟件全局框架，操作方式，讓全家桶用戶(hù)可以用最快的方法適應不同的軟件。
包括頂(′?ω?`)部的屬性欄，左側的工具欄，中間的標簽欄、創(chuàng )作區域，右側的不同工作窗口排列形式。
除了主要界面(′_｀)的布局框架外，還包含一些二級窗口的框架結構也是統一和固定的。比如打開(kāi) PS 內的首選項設置和屬性設置??窗口，和其它幾個(gè)軟件的屬性設置窗口幾乎一致。
而在 Affinity 中，軟件首選項設置就沒(méi)有使用左側導航，而是類(lèi)似 Mac 通用設置的快速入口分層模式，用慣了 Ad(′?｀)obe 再換這個(gè)就會(huì )有股說(shuō)不出的別扭。
可能有同學(xué)有疑問(wèn)，Photoshop 并不是只有這幾種窗口，其它窗口不就樣式和上面這類(lèi)不一樣嘛？那是因為窗口的框架肯定是要考慮功能和場(chǎng)景的，即使使用了多種窗口類(lèi)型，那也是有規律的應用在操作方式相近的場(chǎng)景中。
再回想一下 PhotoShop 的基??本操作流程，就是在創(chuàng )建文件以后，通過(guò)左側工具添加圖層元素到中間畫(huà)布區域進(jìn)行排版，再在右側屬性欄中調節畫(huà)布對象的圖層順序、屬性。
Phot(???)oShop 作為平面領(lǐng)域中的獨角獸，直接影響了絕大多數同類(lèi)設計軟件的框架結構和布局方法。因為絕大多數設計師學(xué)習設計的入門(mén)軟件都(′▽?zhuān)?是 PS，想要讓用戶(hù)更快上手自己的軟件，那就應該順著(zhù)他們已經(jīng)習慣的方式來(lái)。
所以，從 Sketch 開(kāi)始，它的框架和操作流程都和 PhotoShop 高度相似，再之后的(de) Adobe XD、Figma、即時(shí)設計等，都應用了幾乎相同的全局框ヽ(′?｀)ノ架，所以你只要掌握其中一個(gè)就能立馬熟悉其它軟件的使用。
而當實(shí)際功能和 UI 設計軟件高度相似的其它幾個(gè) “辦公應用” 結構框架不同時(shí)，上手就變得異??常的困難和別??扭。比如 Axure、Keynote、Pow(′▽?zhuān)?)erPoint，先學(xué)了設計軟件再去學(xué)這幾個(gè)軟件的同學(xué)一定深有感觸。
而其它行業(yè)的軟件，如果沒(méi)有一個(gè)具備絕對主導性的產(chǎn)品作為標桿??，那么每家公司的產(chǎn)品框架就各不相同。(???)比如 3D 建模軟件中的 C4D、Bl??ender、犀牛，視頻剪輯工具中的(′?_?`) Pr、Finalcut、ヽ(′?｀)ノ達芬奇，??你就是熟練ヾ(＾-＾)ノ掌握其中一款，對專(zhuān)業(yè)術(shù)語(yǔ)和必要功能邏輯了如指掌，也需要通過(guò)基本??教學(xué)才能掌握其它同類(lèi)軟件。
這就是框架帶來(lái)的作用(╯‵□′)╯，它是軟件使用方式和操作流程的主要依據，其它細節的交互和操作都是附著(zhù)于全局框架下的子集內容。之所以交互設計要從全局框架??開(kāi)始，原因就是設計師要：
先確定產(chǎn)品整體操作的方式，再去考慮按鈕和表單那些細節的處理。
二、B端產(chǎn)品的全局框架拆解
雖然前面舉例的都是軟件案例，但只要仔細留意，你們就會(huì )發(fā)現網(wǎng)頁(yè)端管理系統的操作框架和一般軟件別無(wú)二致。只不過(guò)相比較五花八門(mén)(′?_?`)的專(zhuān)業(yè)軟件來(lái)說(shuō)，B 端管理系統的操作框架模式經(jīng)過(guò)了長(cháng)期的演化(╬ ò﹏ó)形成了固定的幾種套路。所以網(wǎng)上找到的管理界面案例，看起來(lái)只是圍繞幾個(gè)固定的布局翻來(lái)覆去的改顏色和圖標。
雖然它們看起來(lái)都很像，但依舊包含很多交互細節是(shi)需(xu)要設計師留意和制定的，不是簡(jiǎn)單照搬就能設計出符合項目需要的全局框架。
所以，交互的全局框架到底怎么設計？
它不是一個(gè)個(gè)體，而是一個(gè)由多個(gè)組件、頁(yè)面類(lèi)型、適配方式組成的合集概念。想要有效制定，就需要先了解合集中包含的要素有哪些，以及它們的基本特點(diǎn)。
1. 全局框架中的組件
在??全局框架的范疇中，包含的組件模塊類(lèi)??型可以分成兩個(gè)大類(lèi)，全局組件?和浮層元素。
全局組件是指在項目??多數頁(yè)面中都會(huì )(′▽?zhuān)?存在并進(jìn)??行交互的組件，功能往往和當前頁(yè)面沒(méi)有??直接聯(lián)系，比如路徑跳轉、色彩切換、快捷操作等。
而包含ヽ(′ー｀)ノ的浮層元素，本質(zhì)上也是全局組件，只是它們的共性是不會(huì )默認展示，需要被特定條件觸發(fā)才能被感知。比如斷網(wǎng)提示、刪除確認、側邊抽屜等都是全局化的浮層要素，也是需要在前期做好規劃的內容。
下面(mian)就針對這個(gè)兩種(zhong)類(lèi)型的組件一一展開(kāi)解釋。
（1）全局(′?｀)組件
a. 導航欄
導航欄不僅僅是 B 端管(′ω｀*)理系統，也是網(wǎng)站設計中最重要的組件。優(yōu)秀的導航欄可以清晰的展(zhan)示項目的頁(yè)面層級結構，幫助用戶(hù)高效的訪(fǎng)問(wèn)目標頁(yè)面。全局框架制定的一步，就是根據項目的具體情況，選擇合適的導航類(lèi)型。
導航欄主要使用上方、左側、混合型三種布局形式：
上方導航：適合選ヽ(′ー｀)ノ項內(nei)容較少，預留更多橫向空間內容區域。
左側導航：適合選項、層級較多的情況，方便折疊和上下滾動(dòng)。
混合導航：適合需要有效區分不同功能區塊的場(chǎng)景。
確定(′▽?zhuān)?導航欄的類(lèi)型，還需要確定導航的操作邏輯，包含幾級菜單，默認、展開(kāi)、選中、關(guān)閉的交互。
b. 頂部欄
除了導航外，另一個(gè)基本必備的組件，就是頂部欄，除了放最基(╯‵□′)╯礎的用戶(hù)和設置選項外，它的角色定位(wei)要根據需求決定，最常見(jiàn)的包含下方幾種：
標題欄：主要用來(lái)展示頁(yè)面標題、副標題，或者面包屑控件。
工具欄：包含比較多的操作要素，如搜索、新增、邀請、消息管理等。
菜單欄：包含較多針對(′；ω；`)當前頁(yè)面/模塊的菜單選項和內容切換操作。
當然，以上幾種情況并不是絕對的。設計師需要根據項目的實(shí)際需求出發(fā)，去梳(′ω｀)理項目包含哪些全局控件或操作，然后再(′_ゝ`)決定如??何分配到導(dao)航或者頂部菜單上，而不是先定(ding)義菜單的類(lèi)型再( ?° ?? ?°)往里面填內容和字段。
c. 頁(yè)面標簽欄
頁(yè)面標簽欄是一個(gè)類(lèi)似瀏覽器標簽欄的組件，用來(lái)展示和關(guān)閉當前項目?jì)却蜷_(kāi)的頁(yè)面。
標簽欄的使用在遠古時(shí)期的 B 端項目應用非常普遍，因為已經(jīng)入土的 IE 瀏覽在那個(gè)年代是沒(méi)有頁(yè)面標簽功能??的，導致開(kāi)啟多個(gè)頁(yè)面的切換非常麻煩。
隨著(zhù)瀏覽器(qi)標簽的普及，它已經(jīng)不適用于多數 B 端項目，但依舊有一小部(′_｀)分項目是需要結合它的優(yōu)勢才可以(yi)更好的提(╬ ò﹏ó)升操作效率。
在一些需要持續打開(kāi)和來(lái)回切換頁(yè)面( ?° ?? ?°)的項目，如客服系統、財務(wù)審核、合同審批，因為打開(kāi)新頁(yè)面僅僅需要加載內容區域而不是全局，沒(méi)有新建窗口后??的空白頁(yè)面加載過(guò)程，就能帶來(lái)更好的體驗。
d. 內容模(′▽?zhuān)?塊
內(nei)容模塊是用來(lái)容納和顯示頁(yè)面相關(guān)內容的模塊，這是個(gè)被很多人忽略的組件類(lèi)型，包含模塊標題欄和操作區域。
一個(gè)成熟的 B 端項目會(huì )統一制定內容模塊的組件結構，保證大量頁(yè)面???和模塊之間樣式的統一性。比如下面的模塊案例。
如果只是簡(jiǎn)單做個(gè)標題再統一間距參數，那么這個(gè)組件也(ye)就沒(méi)必要在這里提了，因為這僅僅是設計問(wèn)題而不是交互問(wèn)題。內容模塊的制定是為了盡可能考慮各種內容場(chǎng)景，并進(jìn)行統一處理。
例如要應用一級分頁(yè)標簽、多層級分頁(yè)標簽、操作按鈕、內容折疊等?？紤]的越全，后面處理起來(lái)越工整，否則就像下方淘寶賣(mài)家端千牛的案例一樣，損害用戶(hù)的體驗和操作效率。
內容模塊是很難在初期一口氣全部定完，不僅需要產(chǎn)品經(jīng)理前期給出詳盡的需求和產(chǎn)品原型，還依賴(lài)設計師自身的經(jīng)驗判斷。
所以(yi)，它的制定流程是在前期先根據掌握的信息(?????)制定出??最初的版本，然后在完成后續的頁(yè)面中逐漸進(jìn)行補充、優(yōu)化并替換。
版權聲明：本???文內容由互聯(lián)網(wǎng)用(yong)戶(hù)自發(fā)貢獻，該文觀(guān)點(diǎn)僅代表作者本人。本站僅提供信息存儲空間服務(wù)，不擁有所有權，不承擔相關(guān)法律責任。如發(fā)現本站有涉嫌抄襲侵權/違法違規的內容， 請發(fā)送郵件至 [email protected] 舉報，一經(jīng)查實(shí)，??本站將立刻刪除。
