編輯導語：之前學習了B端UI組件（文本、按鈕、下拉菜單、輸入框、翻頁控制、表格、表單、會話框）的交互規(guī)范；今天這篇文章是B端交互規(guī)范最后一篇：B端交互的典型頁面，我們一起來學習一下。

一、業(yè)務主框架界面

需求場景：

• 符合常規(guī)行業(yè)內(nèi)容分布邏輯；
• 具備通用性；

1. 內(nèi)容布局

業(yè)務可是界面基礎布局模式分為上下布局，上部為導航條、下部為內(nèi)容區(qū)：

頂部導航欄分區(qū)：

LOGO區(qū)域，防止LOGO圖標與標題：

一級導航：

無子級內(nèi)容，導航僅顯示標題，如有子級內(nèi)容展示，則顯示對應圖標：

子級內(nèi)容根據(jù)需要展開：

子級分類項較多：

子級分類項較少：

基礎操作項：

全局分類數(shù)據(jù)切換對內(nèi)容區(qū)數(shù)據(jù)進行整體更新，如內(nèi)容區(qū)為全局數(shù)據(jù)時，分類數(shù)據(jù)切換按鈕不可用，顯示所有：

其他按鈕點擊展開對應下拉界面，或執(zhí)行對應操作。

用戶私有信息、偏好設置展開：

內(nèi)容區(qū)分為三個區(qū)域：左側(cè)邊導航、分類導航、內(nèi)容展示，內(nèi)容展示界面正常顯示寬度不得小于1366px-左側(cè)導航展開寬度（左側(cè)邊導航寬度參見UI詩句涉及規(guī)范）：

左側(cè)邊導航，用于展示從一級導航入口進入后的相關模塊目錄信息：

左側(cè)邊導航根據(jù)業(yè)務需要最多分兩級，在有子級時，父級目錄僅支持展開、折疊：

分類導航，用于基于某類關聯(lián)數(shù)據(jù)的導航歸集（規(guī)定寬度要求參見UI視覺設計規(guī)范）：

導航樹布局：

內(nèi)容展示：根據(jù)業(yè)務需要進行像一個內(nèi)容展示。

內(nèi)容區(qū)需要展示左側(cè)邊、分類導航：

左側(cè)邊、分類導航均展示：

不顯示左側(cè)邊導航：

不顯示分類導航，進現(xiàn)實左側(cè)邊導航：

無任何側(cè)邊導航：

瀏覽器寬度不足以保證內(nèi)容的正常顯示時，頁面區(qū)應當出現(xiàn)橫線滾動條：

2. 交互行為

1）一級導航菜單點擊無子級下拉菜單時，點擊后內(nèi)容區(qū)加載對應模塊信息，對應導航目錄處于選中狀態(tài)：

2）一級導航菜單有子菜單時，點擊后展開子菜單浮層，點擊子菜單對應目錄項入口或者點擊導航欄其他區(qū)域，對應菜單浮層折疊，對應一級菜單項選中：

3）鼠標移入左側(cè)邊導航欄，側(cè)邊欄自動懸浮向右展開，鼠標移除左側(cè)邊范圍，則自動向左隱藏：

4）鼠標點擊父節(jié)點，展開對應子級：

5）當左側(cè)導航內(nèi)容過長時，滾定鼠標滾輪，進行滾屏顯示。

6）分類導航支持側(cè)邊展開與隱藏控制：

7）點擊分類導航相應分類項時，在內(nèi)容區(qū)加載顯示對應內(nèi)容，如點擊有外部鏈接標志的導航項，則跳轉(zhuǎn)到對應分類導航：

8）當分類導航展開、折疊時，內(nèi)容區(qū)根據(jù)分類導航展開折疊進行內(nèi)容橫向?qū)挾茸詣诱{(diào)整。

分類導航展開時，內(nèi)容展示區(qū)域?qū)挾认蛴铱s?。?/p>

分類導航折疊時，內(nèi)容展示區(qū)寬度向左增大：

二、工具軟件框架

1.? 需求場景

• 軟件主要作為小型的工具軟件的使用。
• 功能模塊相對較少。

2. 內(nèi)容布局

整體布局模式與集成軟件框架保持一致：

頂部導航欄不顯示導航目錄項。

3. 交互行為

與集成業(yè)務框架相同。

三、業(yè)務內(nèi)容頁面：基礎內(nèi)容展示頁

1. 需求場景

• 通用業(yè)務模塊內(nèi)容展示；
• 能有效說明該模塊的功能、展示對應關鍵信息。

2.內(nèi)容布局

1）通用業(yè)務模塊內(nèi)容分區(qū)，分為頂部TtileBar（首頁概覽在必要的情況下可以不顯示TitleBar）與內(nèi)容區(qū)：

2）TitleBar分為模塊標題與模塊頁面全局操作或附屬信息與關聯(lián)操作：

頁面標題居左顯示包含頁面標題、數(shù)據(jù)切換、模塊幫助、其他關聯(lián)備注信息：

頁面標題在有需要的情況下，為提升頁面的自由集成能力，頁面的面包屑的起始路徑點不能包含左側(cè)邊導航的信息：

模塊為除左側(cè)邊導航外第一級：

模塊為除左側(cè)邊導航外第二級：

頁面關聯(lián)居右顯示，包含“幫助鏈接”、“快捷操作”、“全頁刷新”按鈕等：

3）內(nèi)容區(qū)域分為備注描述、概要信息、分項頁簽、業(yè)務內(nèi)容：

描述/概要，描述文本在前，一般情況兩者顯示互斥：

僅有描述與提醒文本：

僅有概要信息：當有概要信息顯示時，根據(jù)業(yè)務需要在TitleBar右側(cè)提供對應概要信息折疊展開，關閉按鈕：

概要信息展開時：

概要信息折疊時：

四、基礎配置展示頁

1. 需求場景

• 通用業(yè)務配置展示；
• 能直接瀏覽配置并進行對應配置修改；

2. 內(nèi)容布局

配置頁面布局為上下分布，上部為Titlebar，下部為配置內(nèi)容區(qū)域：

Titlebar整體布局格式與基礎內(nèi)容展示頁相同

提醒&描述區(qū)域、分類頁簽與基礎內(nèi)容展示頁相同。

配置內(nèi)容中相應內(nèi)容，使用全頁表單進行配置展示與操作

五、詳情展示頁面：單條數(shù)據(jù)詳情頁

1. 需求場景

• 數(shù)據(jù)對象詳情
• 查看單個對象數(shù)據(jù)與對象關聯(lián)數(shù)據(jù)

2. 內(nèi)容布局

頁面分為頂部Titlebar、概要信息、分類展示頁簽與內(nèi)容展示區(qū)域：

TitleBar分為返回按鈕、標題區(qū)域與關聯(lián)操作區(qū)：

返回按鈕：返回到上一級頁面。

標題區(qū)：面包屑、詳情標題信息、幫助、補充標注：

面包屑路徑根據(jù)實際需要確定是否展示——

無面包屑：

有面包屑：

詳情標題分為主標題與備注信息。關聯(lián)幫助、對象補充標注信息均跟隨主標題進行展示：

詳情標題有備注：

詳情標題無備注：

詳情查詢?nèi)绻试S數(shù)據(jù)切換，則在詳情表土提供數(shù)據(jù)切換能力，對象切換作為表土的一部分，幫助：

詳情標題有面包屑：

詳情標題無面包屑

關聯(lián)操作，全頁刷新居右顯示，只讀對象，不具備操作權限，誤操作按鈕:

公共信息/描述/概要區(qū)域主要用于展示詳情對象整體的信息，諸如提示信息、概要描述信息等，概要信息常備展示模式常用于默認頁簽展示內(nèi)容較少，影響整體視覺效果時：

頁簽內(nèi)容根據(jù)實際需要進行展示，如果有分組數(shù)據(jù)，則根據(jù)業(yè)務特性對內(nèi)容進行歸類展示：

根據(jù)實際需要展示詳情面包屑

3. 交互行為

點擊表格或相關內(nèi)容項，跳轉(zhuǎn)到詳情頁，當前頁面列表查詢條件頁碼等需要附帶跳轉(zhuǎn)地址中。

點擊刷新按鈕，刷新整個詳情頁所有內(nèi)容數(shù)據(jù)：

點擊TitleBar“返回”到原來源頁面，如果源頁面為內(nèi)容展示頁面，返回時將附帶來源頁面查詢數(shù)據(jù)作為來源網(wǎng)頁參數(shù)，跳轉(zhuǎn)到對應來源頁面：

當進行頁面數(shù)據(jù)查看時，該對象已不存在或處于無法瀏覽的狀態(tài)，應彈出對應錯誤提示，讓用戶點擊確定返回至來源網(wǎng)頁（參數(shù)傳遞模式與點擊詳情返回按鈕相同）：

六、多條數(shù)據(jù)詳情頁

1. 需求場景

• 數(shù)據(jù)對象詳情；
• 支持在詳情頁面對多個對象詳情進行切換查看；

2. 內(nèi)容布局

頁面分為左右布局：

對象列表以來源表格當前頁列表對象，取關鍵數(shù)據(jù)展示對應列表數(shù)據(jù)。

詳情信息布局與單挑數(shù)據(jù)詳情頁保持一致，詳情標題不支持面包屑。

3. 交互行為

點擊左側(cè)列表對象，右側(cè)詳情內(nèi)容對應進行刷新。

當前頁面瀏覽詳情頁內(nèi)對應頁簽內(nèi)容時，點擊列表進行切換時，右側(cè)詳情頁保持顯示對應頁簽，內(nèi)容變更為切換后的對象數(shù)據(jù)。

當進行對象切換查看時，對象數(shù)據(jù)異常，導致數(shù)據(jù)無法正常加載，彈出對應提示信息，點擊確定后返回至來源網(wǎng)頁（相應參數(shù)繼承參考單條數(shù)據(jù)詳情頁）：

當數(shù)據(jù)正常獲取時，完成列表選中對象切換。

七、表單展示頁面：配置表單頁

1. 需求場景

• 全頁表單進行數(shù)據(jù)配置；
• 一般用于新建對象場景；
• 常用于內(nèi)容配置非常多，或者配置項占用空間極大的情況；
• 支持表單返回；

2. 內(nèi)容布局

頁面分為頂部TitleBar與配置區(qū)域：

頂部配置左邊返回表單標題，右側(cè)為關聯(lián)信息：

內(nèi)容區(qū)為布局參見全頁表單。

3. 交互行為

• 返回至來源頁面；
• 全頁表單填寫交互行為參見全頁表單章節(jié)；
• 提交成功后，跳轉(zhuǎn)目標頁面根據(jù)實際業(yè)務需求進行設計。

八、步驟配置頁

1. 需求場景

• 一般用于新建對象場景；
• 常用于內(nèi)容配置非常多，需要分為多個步驟進行操作；
• 支持表單返回。

2. 內(nèi)容布局

頁面分為頂部TitleBar與配置區(qū)域：

常規(guī)步驟設置，頂部配置左邊返回表單標題，右側(cè)為關聯(lián)信息：

復雜步驟設置，頂部配置左邊返回表單標題，右側(cè)為父級步驟信息：

內(nèi)容區(qū)布局參見常規(guī)步驟章節(jié)

3. 交互行為

• 返回值來源頁面；
• 步驟配置填寫交互行為參見常規(guī)步驟章節(jié)；
• 提交成功后，跳轉(zhuǎn)目標頁面根據(jù)實際業(yè)務需求進行設計。

九、公共頁面：通用登錄頁面

1. 需求場景

用戶需通過登錄頁面完成登錄后，進入軟件控制界面。

2. 內(nèi)容布局

界面基礎布局模式為上中下布局，上部為導航條、中部為內(nèi)容區(qū)、底部為補充信息區(qū)域（版權聲明，分辨率說明等）：

十、通用幫助中心導航界面

1. 需求場景

• 集成類軟件集成多個業(yè)務模塊，需要對不同業(yè)務進行分類提供幫助內(nèi)容；
• 用戶需通過幫助中心進行幫助文檔查詢。

2. 內(nèi)容布局

界面基礎布局模式為上部為導航條 +?搜索區(qū)、中部為目錄導航區(qū)域、底部為補充信息區(qū)域（版權聲明等）：

十一、通用幫助文檔界面

1. 需求場景

• 單個集成的幫助文檔查看；
• 用戶可以通過對應界面提供的結(jié)構(gòu)索引、搜索完成幫助內(nèi)容的快速查找、閱讀。

2. 內(nèi)容布局

界面基礎布局模式為上部為導航條 +?搜索區(qū)、中部為幫助內(nèi)容、底部為補充信息區(qū)域（版權聲明等）：

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

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