對于B端項目輔助頁面設(shè)計, 使用哪種交互方式讓產(chǎn)品頁面更好用？整體交互更統(tǒng)一呢？ 筆者將結(jié)合項目經(jīng)驗和相關(guān)知識進行整理總結(jié)，希望對你有所啟發(fā)。

B端設(shè)計的體驗升級不是打磨優(yōu)質(zhì)交互體驗,而是統(tǒng)一體驗。B端產(chǎn)品業(yè)務(wù)復(fù)雜用戶體驗注重效率，除了主頁面外還有很多輔助頁面幫助用戶完成功能操作，此時這些輔助頁面以什么樣的形式呈現(xiàn)顯得尤為重要。

目前有彈窗、側(cè)滑、跳轉(zhuǎn)新頁面三種展現(xiàn)方式供設(shè)計師與產(chǎn)品選擇，往往在有些時候認為三種展示方式選擇哪種都沒太大問題，但是基于Nielsen可用性十原則中“一致性和標(biāo)準”我們非常有必要將這三種展示方式清楚知道其定義及適用場景等各方面，以便于更好地服務(wù)于我們的頁面。

分享內(nèi)容

1. 彈窗
2. 抽屜
3. 跳轉(zhuǎn)頁面
4. 需求內(nèi)容合理規(guī)劃
5. 總結(jié)

一、彈窗

1. 定義

彈框是一種交互方式，用作提醒，做決定或者解決某個任務(wù)。彈框一般包含一個蒙版，一個主體及一個關(guān)閉入口，常見于網(wǎng)頁及移動端。其好處是讓用戶更聚焦，且不用離開當(dāng)前頁面，更快更容易完成任務(wù)。

彈窗分為模態(tài)與非模態(tài)兩種，非模態(tài)用于提醒用戶內(nèi)容，在這里我們針對打斷用戶操作的模態(tài)彈窗來研究。

2. 尺寸怎么定？及何時使用？

在討論彈窗尺寸如何確定之前，我們先對市面主流電腦分辨率統(tǒng)計進行調(diào)研。

定義彈窗高度：

我們以最小屏幕尺寸來定義，屏幕高度減去導(dǎo)航欄，菜單欄，內(nèi)容區(qū)域有620px的高度。彈窗的高度必須小于620px，對于頁面自適應(yīng)情況將上下安全距離固定，其中間區(qū)域自適應(yīng)。

定義彈窗寬度：

我們以1440屏幕寬度為例，定義柵格系統(tǒng)，在自定義內(nèi)容區(qū)，彈窗的寬度以柵格的數(shù)量來確定即n*列寬+（n-1)*間距寬度。

使用場景：

對話框是用于在不離開主路徑的情況下，提供用戶快速執(zhí)行簡單的操作、確認用戶信息或反饋提示的輔助窗口。（摘自fusion design）

總結(jié)歸納就是：

• 頁面內(nèi)容較輕，可快速回上級頁面
• 頁面相對獨立，可不參照上級頁面內(nèi)容
• 適合解決較為簡單一次性操作內(nèi)容

3. 不可被忽視的幾個彈框細節(jié)

• 盡量避免彈窗上疊加彈窗
• 彈出彈窗時鎖定背景頁面禁止跟隨彈窗滾動
• 原路返回，由哪個頁面彈出彈窗，關(guān)閉彈窗后顯示哪個頁面
• 新的交互方式有待我們共同探索

二、抽屜

1. 定義

抽屜是一種交互方式，當(dāng)需要一個附加面板來控制父級頁面內(nèi)容，這個抽屜在需要時呼出。

抽屜一般包含一個蒙版，一個主體及一個關(guān)閉入口，常見于網(wǎng)頁及移動端?？勺远x上下左右四個方向，一般右側(cè)最為常見。

側(cè)滑抽屜有較強的連貫性，適合與原頁面具有連貫結(jié)構(gòu)的內(nèi)容的展示。

2. 使用場景？

抽屜彈出的交互方式的操作成本和用戶使用心理負擔(dān)則小很多，比如「iOS人際交互指南」中的「Action Sheets」，「MaterialDesign」中的「BackDrop」，包括網(wǎng)頁端，Chrome瀏覽器中的添加標(biāo)簽的交互方式，還有Antdesign中AntdesignPro預(yù)覽更換顏色和主題，他們使用彈窗是完全可以的，但是出于上述目的，使用了類似側(cè)邊彈出的交互方式。

• 場景一：Dialog 組件并不滿足我們的需求, 表單很長, 或是你需要臨時展示一些文檔, Drawer 擁有和 Dialog 幾乎相同的 API, 在 UI 上帶來不一樣的體驗。
• 場景二：需要附加面板來控制父窗體，這個面板需要時呼出。
• 場景三：在當(dāng)前任務(wù)流中插入臨時任務(wù)，創(chuàng)建或預(yù)覽附加內(nèi)容，例如協(xié)議條款。

3. 使用注意

1. 抽屜頁面上可以更深一步操作彈出彈窗或再疊加一個抽屜
2. 彈出彈窗時鎖定背景頁面禁止跟隨彈窗滾動
3. 原路返回，由哪個頁面彈出彈窗，關(guān)閉彈窗后顯示哪個頁面
4. 避免中間彈窗跳轉(zhuǎn)抽屜彈窗的交互方式

三、頁面跳轉(zhuǎn)

1. 定義

常見的頁面跳轉(zhuǎn)方式有直接跳轉(zhuǎn)、左右跳轉(zhuǎn)、上下跳轉(zhuǎn)等，再設(shè)計時需要考慮好其中的關(guān)聯(lián)性，給出最符合用戶心理預(yù)期的過渡方式，從而做出最合適的設(shè)計。
頁面跳轉(zhuǎn)有兩種方式，調(diào)用轉(zhuǎn)發(fā)時頁面瀏覽器地址欄中的url不發(fā)生改變，重定向時頁面上瀏覽器地址欄中的url發(fā)生改變。

2. 使用場景？

場景一：當(dāng)頁面承載內(nèi)容過多或需要打開新一個網(wǎng)址鏈接

場景二：當(dāng)前頁面與即將操作的頁面毫無關(guān)聯(lián)

web頁面跳轉(zhuǎn)的方式

跳轉(zhuǎn)方式分這么幾種，直接跳轉(zhuǎn)、左右切換跳轉(zhuǎn)、上下跳轉(zhuǎn)、翻轉(zhuǎn)跳轉(zhuǎn)、聯(lián)動性跳轉(zhuǎn)、放大縮小跳轉(zhuǎn)（iOS微信公眾號浮窗）、搜索框跳轉(zhuǎn)。
其中直接跳轉(zhuǎn)是最原始最直接的跳轉(zhuǎn)方式，在web端很常見，實現(xiàn)難度和維護成本都很低。

3. 使用注意

• 跳轉(zhuǎn)新頁面時需要有較為明顯的返回上級頁面的按鈕
• 注意區(qū)分像彈窗的頁面，和像頁面的彈窗

四、需求內(nèi)容合理規(guī)劃

1. 謙虛踏實地學(xué)好業(yè)務(wù)

設(shè)計B端產(chǎn)品需要有細膩嚴謹?shù)男仕季S，要想設(shè)計出好用合適的頁面首先要吃透自己手中的設(shè)計工作的業(yè)務(wù)細節(jié)，向產(chǎn)品和研發(fā)同事詳細了解產(chǎn)品需求，理清每個功能的業(yè)務(wù)邏輯，甚至有必要時需要了解開發(fā)實現(xiàn)方式。

在確認需求的環(huán)節(jié)，能夠想象頁面展現(xiàn)方式能夠滿足需求方的業(yè)務(wù)邏輯又能同時兼顧用戶對頁面的理解。

2. 對頁面進行歸納分類

拿到原型后針對新增、編輯、詳情等頁面進行統(tǒng)攬，做到心中有數(shù)，若頁面很多且內(nèi)容較為復(fù)雜，可對頁面布局進行定義，根據(jù)事前定義好布局進行設(shè)計。

例如安防類的產(chǎn)品地圖使用頻次較多，因加載數(shù)據(jù)時間等問題，根據(jù)需求與前端人員討論采用何種方式進行設(shè)計既有較好的體驗又可便于開發(fā)人員設(shè)計布局。

3. 統(tǒng)一已有的交互規(guī)范

B端產(chǎn)品邏輯復(fù)雜，功能眾多，迭代頻繁，對于新加的功能考慮之前的類似頁面處理方式將可復(fù)用的組件規(guī)范復(fù)用，增強產(chǎn)品體驗一致性同時減少開發(fā)人員不必要的工作量，快速響應(yīng)需求完成迭代。

五、內(nèi)容小結(jié)

1. 知己 知彼

• 己：需要對每種樣式使用方式與注意事項有所了解
• 彼：對產(chǎn)品的業(yè)務(wù)需求有所認知，對研發(fā)實現(xiàn)方式有一定了解
  綜合考慮設(shè)計出好用又統(tǒng)一的頁面，避免不必要的重復(fù)性工作。

2. 體驗統(tǒng)一

對于頁面的展示采取哪種樣式有科學(xué)說服性解釋，注意交互體驗的一致性，也注意不要為了一致而一致，效率至上，滿足業(yè)務(wù)需求為第一位。

考慮好之間的關(guān)聯(lián)性，給出最符合用戶心理預(yù)期的過渡方式，就可以幫助我們找到最合適的設(shè)計。

3. 未來趨勢

網(wǎng)絡(luò)技術(shù)不斷在影響我們的工作生活，移動端也在引領(lǐng)著設(shè)計趨勢，多端追求體驗一致性，早已衍生出自適應(yīng)網(wǎng)頁設(shè)計(Responsive Web Design)的布局解決方案，因此網(wǎng)頁設(shè)計也日趨移動化。

可以想像將會有一大波移動上的體驗會搬到網(wǎng)頁設(shè)計上，如彈框中包含多個層級，透過左上角返回的交互體驗，更靈動及細膩的動畫效果等，相信還會出現(xiàn)更好用且易維護的展現(xiàn)方式。

視覺體驗上大屏的普及，全屏的頁面展示，都在追求簡約的設(shè)計，ui界面也變得越來越輕盈，我們拭目以待。

本文由@宋佳? 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash， 基于CC0協(xié)議