久久夜色精品国产亚洲,亚洲精品无码MV在线观看

搜索

APP

起點(diǎn)課堂會(huì)員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會(huì)特權(quán)

個(gè)人IP打造特權(quán)

30+門(mén)專項(xiàng)技能課

1300+專題課程

12場(chǎng)職場(chǎng)軟技能直播

12場(chǎng)求職輔導(dǎo)直播

12場(chǎng)專業(yè)技能直播

會(huì)員專屬社群

榮耀標(biāo)識(shí)

發(fā)布

注冊(cè) | 登錄

B端UI交互界面——典型頁(yè)面布局

云桌面產(chǎn)品

2020-12-30

3 評(píng)論 29286 瀏覽 184 收藏

22 分鐘

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

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

需求場(chǎng)景：

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

1. 內(nèi)容布局

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

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

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

一級(jí)導(dǎo)航：

無(wú)子級(jí)內(nèi)容，導(dǎo)航僅顯示標(biāo)題，如有子級(jí)內(nèi)容展示，則顯示對(duì)應(yīng)圖標(biāo)：

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

子級(jí)分類項(xiàng)較多：

子級(jí)分類項(xiàng)較少：

基礎(chǔ)操作項(xiàng)：

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

其他按鈕點(diǎn)擊展開(kāi)對(duì)應(yīng)下拉界面，或執(zhí)行對(duì)應(yīng)操作。

用戶私有信息、偏好設(shè)置展開(kāi)：

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

左側(cè)邊導(dǎo)航，用于展示從一級(jí)導(dǎo)航入口進(jìn)入后的相關(guān)模塊目錄信息：

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

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

導(dǎo)航樹(shù)布局：

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

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

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

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

不顯示分類導(dǎo)航，進(jìn)現(xiàn)實(shí)左側(cè)邊導(dǎo)航：

無(wú)任何側(cè)邊導(dǎo)航：

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

2. 交互行為

1）一級(jí)導(dǎo)航菜單點(diǎn)擊無(wú)子級(jí)下拉菜單時(shí)，點(diǎn)擊后內(nèi)容區(qū)加載對(duì)應(yīng)模塊信息，對(duì)應(yīng)導(dǎo)航目錄處于選中狀態(tài)：

2）一級(jí)導(dǎo)航菜單有子菜單時(shí)，點(diǎn)擊后展開(kāi)子菜單浮層，點(diǎn)擊子菜單對(duì)應(yīng)目錄項(xiàng)入口或者點(diǎn)擊導(dǎo)航欄其他區(qū)域，對(duì)應(yīng)菜單浮層折疊，對(duì)應(yīng)一級(jí)菜單項(xiàng)選中：

3）鼠標(biāo)移入左側(cè)邊導(dǎo)航欄，側(cè)邊欄自動(dòng)懸浮向右展開(kāi)，鼠標(biāo)移除左側(cè)邊范圍，則自動(dòng)向左隱藏：

4）鼠標(biāo)點(diǎn)擊父節(jié)點(diǎn)，展開(kāi)對(duì)應(yīng)子級(jí)：

5）當(dāng)左側(cè)導(dǎo)航內(nèi)容過(guò)長(zhǎng)時(shí)，滾定鼠標(biāo)滾輪，進(jìn)行滾屏顯示。

6）分類導(dǎo)航支持側(cè)邊展開(kāi)與隱藏控制：

7）點(diǎn)擊分類導(dǎo)航相應(yīng)分類項(xiàng)時(shí)，在內(nèi)容區(qū)加載顯示對(duì)應(yīng)內(nèi)容，如點(diǎn)擊有外部鏈接標(biāo)志的導(dǎo)航項(xiàng)，則跳轉(zhuǎn)到對(duì)應(yīng)分類導(dǎo)航：

8）當(dāng)分類導(dǎo)航展開(kāi)、折疊時(shí)，內(nèi)容區(qū)根據(jù)分類導(dǎo)航展開(kāi)折疊進(jìn)行內(nèi)容橫向?qū)挾茸詣?dòng)調(diào)整。

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

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

二、工具軟件框架

1.? 需求場(chǎng)景

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

2. 內(nèi)容布局

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

頂部導(dǎo)航欄不顯示導(dǎo)航目錄項(xiàng)。

3. 交互行為

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

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

1. 需求場(chǎng)景

通用業(yè)務(wù)模塊內(nèi)容展示；
能有效說(shuō)明該模塊的功能、展示對(duì)應(yīng)關(guān)鍵信息。

2.內(nèi)容布局

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

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

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

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

模塊為除左側(cè)邊導(dǎo)航外第一級(jí)：

模塊為除左側(cè)邊導(dǎo)航外第二級(jí)：

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

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

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

僅有描述與提醒文本：

僅有概要信息：當(dāng)有概要信息顯示時(shí)，根據(jù)業(yè)務(wù)需要在TitleBar右側(cè)提供對(duì)應(yīng)概要信息折疊展開(kāi)，關(guān)閉按鈕：

概要信息展開(kāi)時(shí)：

概要信息折疊時(shí)：

四、基礎(chǔ)配置展示頁(yè)

1. 需求場(chǎng)景

通用業(yè)務(wù)配置展示；
能直接瀏覽配置并進(jìn)行對(duì)應(yīng)配置修改；

2. 內(nèi)容布局

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

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

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

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

五、詳情展示頁(yè)面：?jiǎn)螚l數(shù)據(jù)詳情頁(yè)

1. 需求場(chǎng)景

數(shù)據(jù)對(duì)象詳情
查看單個(gè)對(duì)象數(shù)據(jù)與對(duì)象關(guān)聯(lián)數(shù)據(jù)

2. 內(nèi)容布局

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

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

返回按鈕：返回到上一級(jí)頁(yè)面。

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

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

無(wú)面包屑：

有面包屑：

詳情標(biāo)題分為主標(biāo)題與備注信息。關(guān)聯(lián)幫助、對(duì)象補(bǔ)充標(biāo)注信息均跟隨主標(biāo)題進(jìn)行展示：

詳情標(biāo)題有備注：

詳情標(biāo)題無(wú)備注：

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

詳情標(biāo)題有面包屑：

詳情標(biāo)題無(wú)面包屑

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

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

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

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

3. 交互行為

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

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

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

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

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

1. 需求場(chǎng)景

數(shù)據(jù)對(duì)象詳情；
支持在詳情頁(yè)面對(duì)多個(gè)對(duì)象詳情進(jìn)行切換查看；

2. 內(nèi)容布局

頁(yè)面分為左右布局：

對(duì)象列表以來(lái)源表格當(dāng)前頁(yè)列表對(duì)象，取關(guān)鍵數(shù)據(jù)展示對(duì)應(yīng)列表數(shù)據(jù)。

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

3. 交互行為

點(diǎn)擊左側(cè)列表對(duì)象，右側(cè)詳情內(nèi)容對(duì)應(yīng)進(jìn)行刷新。

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

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