2025-4-14 杰睿
編輯導(dǎo)語(yǔ)：交互設(shè)計(jì)本質(zhì)上就是設(shè)計(jì)產(chǎn)品的使用方式的過程，“如何才能做出合理的B端交互決策”是很多人都在思考的問題。在這篇文章里，作者聚焦具體的實(shí)戰(zhàn)場(chǎng)景，分享了一些自己做B端交互設(shè)計(jì)的經(jīng)驗(yàn)，一起看看吧。
這陣子想了想關(guān)于交互知識(shí)的分享，還是應(yīng)該要拓展成一整個(gè)系列的內(nèi)容，包含各類組件、控件和行為的解析。
基于我的分享習(xí)慣，我會(huì)盡量避免使用太過理論還是空泛的方式進(jìn)行講解，而是聚焦具體的實(shí)戰(zhàn)場(chǎng)景，幫助大家理解如何做出合理的交互決策。
交互設(shè)計(jì)本質(zhì)上就是設(shè)計(jì)產(chǎn)品的使用方式的過程，賬號(hào)怎么填寫，表單怎么導(dǎo)出，數(shù)據(jù)怎么篩選，列表怎么排序等等……針對(duì)每個(gè)功能的使用方式，都可以花很長(zhǎng)的時(shí)間去考慮其合理性。一個(gè)項(xiàng)目的交互，就是這個(gè)項(xiàng)目所有功能使用方式的總和。
那設(shè)計(jì)師如何開始項(xiàng)目的交互設(shè)計(jì)？直接進(jìn)入細(xì)節(jié)，開始跟著原型制定輸入框的狀態(tài)，下拉菜單的展開邏輯嗎？
這樣肯定是不行的，項(xiàng)目的交互內(nèi)容又多又雜，設(shè)計(jì)師會(huì)很快陷入這些細(xì)枝末節(jié)中疲于奔命。頭疼醫(yī)頭腳疼醫(yī)腳，容易造成項(xiàng)目細(xì)節(jié)缺乏統(tǒng)一性，前后矛盾，體驗(yàn)割裂。
所以，理解項(xiàng)目交互設(shè)計(jì)的正確思路，就要知道在項(xiàng)目中有哪些交互內(nèi)容，它們對(duì)應(yīng)的層級(jí)和設(shè)計(jì)對(duì)象是什么。
在這里，我把需要設(shè)計(jì)的交互對(duì)象拆分成4個(gè)種類，它們從大到小依次為：
我們先圍繞在全局框架這個(gè)類型進(jìn)行解釋，什么是項(xiàng)目的主要模塊排版和布局，以及為什么全局框架可以決定產(chǎn)品的主要使用依據(jù)和步驟。
比如大家都用過 Adobe 的軟件，應(yīng)該會(huì)有個(gè)感覺，就是熟悉了其中一款后用下一個(gè)，立馬就能上手，完成一些最基本的操作。而如果不是 Adobe 系列的軟件，用起來感覺就感覺非常別扭，往往要從頭開始學(xué)起，比如對(duì)標(biāo) PS 的 Affinity Photo、Pixelmator。
為什么會(huì)出現(xiàn)這樣的反差？就是因?yàn)?Adobe 盡可能統(tǒng)一了自己生態(tài)內(nèi)的軟件全局框架，操作方式，讓全家桶用戶可以用最快的方法適應(yīng)不同的軟件。
包括頂部的屬性欄，左側(cè)的工具欄，中間的標(biāo)簽欄、創(chuàng)作區(qū)域，右側(cè)的不同工作窗口排列形式。
除了主要界面的布局框架外，還包含一些二級(jí)窗口的框架結(jié)構(gòu)也是統(tǒng)一和固定的。比如打開 PS 內(nèi)的首選項(xiàng)設(shè)置和屬性設(shè)置窗口，和其它幾個(gè)軟件的屬性設(shè)置窗口幾乎一致。
而在 Affinity 中，軟件首選項(xiàng)設(shè)置就沒有使用左側(cè)導(dǎo)航，而是類似 Mac 通用設(shè)置的快速入口分層模式，用慣了 Adobe 再換這個(gè)就會(huì)有股說不出的別扭。
可能有同學(xué)有疑問，Photoshop 并不是只有這幾種窗口，其它窗口不就樣式和上面這類不一樣嘛？那是因?yàn)榇翱诘目蚣芸隙ㄊ且紤]功能和場(chǎng)景的，即使使用了多種窗口類型，那也是有規(guī)律的應(yīng)用在操作方式相近的場(chǎng)景中。
再回想一下 PhotoShop 的基本操作流程，就是在創(chuàng)建文件以后，通過左側(cè)工具添加圖層元素到中間畫布區(qū)域進(jìn)行排版，再在右側(cè)屬性欄中調(diào)節(jié)畫布對(duì)象的圖層順序、屬性。
PhotoShop 作為平面領(lǐng)域中的獨(dú)角獸，直接影響了絕大多數(shù)同類設(shè)計(jì)軟件的框架結(jié)構(gòu)和布局方法。因?yàn)榻^大多數(shù)設(shè)計(jì)師學(xué)習(xí)設(shè)計(jì)的入門軟件都是 PS，想要讓用戶更快上手自己的軟件，那就應(yīng)該順著他們已經(jīng)習(xí)慣的方式來。
所以，從 Sketch 開始，它的框架和操作流程都和 PhotoShop 高度相似，再之后的 Adobe XD、Figma、即時(shí)設(shè)計(jì)等，都應(yīng)用了幾乎相同的全局框架，所以你只要掌握其中一個(gè)就能立馬熟悉其它軟件的使用。
而當(dāng)實(shí)際功能和 UI 設(shè)計(jì)軟件高度相似的其它幾個(gè) “辦公應(yīng)用” 結(jié)構(gòu)框架不同時(shí)，上手就變得異常的困難和別扭。比如 Axure、Keynote、PowerPoint，先學(xué)了設(shè)計(jì)軟件再去學(xué)這幾個(gè)軟件的同學(xué)一定深有感觸。
而其它行業(yè)的軟件，如果沒有一個(gè)具備絕對(duì)主導(dǎo)性的產(chǎn)品作為標(biāo)桿，那么每家公司的產(chǎn)品框架就各不相同。比如 3D 建模軟件中的 C4D、Blender、犀牛，視頻剪輯工具中的 Pr、Finalcut、達(dá)芬奇，你就是熟練掌握其中一款，對(duì)專業(yè)術(shù)語(yǔ)和必要功能邏輯了如指掌，也需要通過基本教學(xué)才能掌握其它同類軟件。
這就是框架帶來的作用，它是軟件使用方式和操作流程的主要依據(jù)，其它細(xì)節(jié)的交互和操作都是附著于全局框架下的子集內(nèi)容。之所以交互設(shè)計(jì)要從全局框架開始，原因就是設(shè)計(jì)師要：
先確定產(chǎn)品整體操作的方式，再去考慮按鈕和表單那些細(xì)節(jié)的處理。
雖然前面舉例的都是軟件案例，但只要仔細(xì)留意，你們就會(huì)發(fā)現(xiàn)網(wǎng)頁(yè)端管理系統(tǒng)的操作框架和一般軟件別無(wú)二致。只不過相比較五花八門的專業(yè)軟件來說，B 端管理系統(tǒng)的操作框架模式經(jīng)過了長(zhǎng)期的演化形成了固定的幾種套路。所以網(wǎng)上找到的管理界面案例，看起來只是圍繞幾個(gè)固定的布局翻來覆去的改顏色和圖標(biāo)。
雖然它們看起來都很像，但依舊包含很多交互細(xì)節(jié)是需要設(shè)計(jì)師留意和制定的，不是簡(jiǎn)單照搬就能設(shè)計(jì)出符合項(xiàng)目需要的全局框架。
所以，交互的全局框架到底怎么設(shè)計(jì)？
它不是一個(gè)個(gè)體，而是一個(gè)由多個(gè)組件、頁(yè)面類型、適配方式組成的合集概念。想要有效制定，就需要先了解合集中包含的要素有哪些，以及它們的基本特點(diǎn)。
在全局框架的范疇中，包含的組件模塊類型可以分成兩個(gè)大類，全局組件和浮層元素。
全局組件是指在項(xiàng)目多數(shù)頁(yè)面中都會(huì)存在并進(jìn)行交互的組件，功能往往和當(dāng)前頁(yè)面沒有直接聯(lián)系，比如路徑跳轉(zhuǎn)、色彩切換、快捷操作等。
而包含的浮層元素，本質(zhì)上也是全局組件，只是它們的共性是不會(huì)默認(rèn)展示，需要被特定條件觸發(fā)才能被感知。比如斷網(wǎng)提示、刪除確認(rèn)、側(cè)邊抽屜等都是全局化的浮層要素，也是需要在前期做好規(guī)劃的內(nèi)容。
下面就針對(duì)這個(gè)兩種類型的組件一一展開解釋。
（1）全局組件
a. 導(dǎo)航欄
導(dǎo)航欄不僅僅是 B 端管理系統(tǒng)，也是網(wǎng)站設(shè)計(jì)中最重要的組件。優(yōu)秀的導(dǎo)航欄可以清晰的展示項(xiàng)目的頁(yè)面層級(jí)結(jié)構(gòu)，幫助用戶高效的訪問目標(biāo)頁(yè)面。全局框架制定的一步，就是根據(jù)項(xiàng)目的具體情況，選擇合適的導(dǎo)航類型。
導(dǎo)航欄主要使用上方、左側(cè)、混合型三種布局形式：
確定導(dǎo)航欄的類型，還需要確定導(dǎo)航的操作邏輯，包含幾級(jí)菜單，默認(rèn)、展開、選中、關(guān)閉的交互。
b. 頂部欄
除了導(dǎo)航外，另一個(gè)基本必備的組件，就是頂部欄，除了放最基礎(chǔ)的用戶和設(shè)置選項(xiàng)外，它的角色定位要根據(jù)需求決定，最常見的包含下方幾種：
當(dāng)然，以上幾種情況并不是絕對(duì)的。設(shè)計(jì)師需要根據(jù)項(xiàng)目的實(shí)際需求出發(fā)，去梳理項(xiàng)目包含哪些全局控件或操作，然后再?zèng)Q定如何分配到導(dǎo)航或者頂部菜單上，而不是先定義菜單的類型再往里面填內(nèi)容和字段。
c. 頁(yè)面標(biāo)簽欄
頁(yè)面標(biāo)簽欄是一個(gè)類似瀏覽器標(biāo)簽欄的組件，用來展示和關(guān)閉當(dāng)前項(xiàng)目?jī)?nèi)打開的頁(yè)面。
標(biāo)簽欄的使用在遠(yuǎn)古時(shí)期的 B 端項(xiàng)目應(yīng)用非常普遍，因?yàn)橐呀?jīng)入土的 IE 瀏覽在那個(gè)年代是沒有頁(yè)面標(biāo)簽功能的，導(dǎo)致開啟多個(gè)頁(yè)面的切換非常麻煩。
隨著瀏覽器標(biāo)簽的普及，它已經(jīng)不適用于多數(shù) B 端項(xiàng)目，但依舊有一小部分項(xiàng)目是需要結(jié)合它的優(yōu)勢(shì)才可以更好的提升操作效率。
在一些需要持續(xù)打開和來回切換頁(yè)面的項(xiàng)目，如客服系統(tǒng)、財(cái)務(wù)審核、合同審批，因?yàn)榇蜷_新頁(yè)面僅僅需要加載內(nèi)容區(qū)域而不是全局，沒有新建窗口后的空白頁(yè)面加載過程，就能帶來更好的體驗(yàn)。
d. 內(nèi)容模塊
內(nèi)容模塊是用來容納和顯示頁(yè)面相關(guān)內(nèi)容的模塊，這是個(gè)被很多人忽略的組件類型，包含模塊標(biāo)題欄和操作區(qū)域。
一個(gè)成熟的 B 端項(xiàng)目會(huì)統(tǒng)一制定內(nèi)容模塊的組件結(jié)構(gòu)，保證大量頁(yè)面和模塊之間樣式的統(tǒng)一性。比如下面的模塊案例。
如果只是簡(jiǎn)單做個(gè)標(biāo)題再統(tǒng)一間距參數(shù)，那么這個(gè)組件也就沒必要在這里提了，因?yàn)檫@僅僅是設(shè)計(jì)問題而不是交互問題。內(nèi)容模塊的制定是為了盡可能考慮各種內(nèi)容場(chǎng)景，并進(jìn)行統(tǒng)一處理。
例如要應(yīng)用一級(jí)分頁(yè)標(biāo)簽、多層級(jí)分頁(yè)標(biāo)簽、操作按鈕、內(nèi)容折疊等?？紤]的越全，后面處理起來越工整，否則就像下方淘寶賣家端千牛的案例一樣，損害用戶的體驗(yàn)和操作效率。
內(nèi)容模塊是很難在初期一口氣全部定完，不僅需要產(chǎn)品經(jīng)理前期給出詳盡的需求和產(chǎn)品原型，還依賴設(shè)計(jì)師自身的經(jīng)驗(yàn)判斷。
所以，它的制定流程是在前期先根據(jù)掌握的信息制定出最初的版本，然后在完成后續(xù)的頁(yè)面中逐漸進(jìn)行補(bǔ)充、優(yōu)化并替換。
作者：酸梅干超人；
本文由 @超人的電話亭 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash ，基于 CC0 協(xié)議。
蘭亭妙微(www.alimai.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.alimai.net