頁面信息架構(gòu)模型設(shè)計與實踐

時間：2023-09-08 15:06:01 | 來源：網(wǎng)站運營

時間：2023-09-08 15:06:01 來源：網(wǎng)站運營

頁面信息架構(gòu)模型設(shè)計與實踐：

在現(xiàn)在產(chǎn)品設(shè)計中，除了頁面功能細(xì)節(jié)的設(shè)計外，頁面空間的操作設(shè)計以及頁面與頁面之間的路徑導(dǎo)航設(shè)計，對整個產(chǎn)品設(shè)計同樣起著重要的作用。

在用戶體驗五層產(chǎn)品設(shè)計中，結(jié)構(gòu)層的信息架構(gòu)是對基本功能、框架、布局等進(jìn)行概念設(shè)計。概念設(shè)計最終要體現(xiàn)在產(chǎn)品的頁面中，在完成需求分析后，在信息架構(gòu)概念設(shè)計基礎(chǔ)上，如何對頁面進(jìn)行信息架構(gòu)模型設(shè)計與運用至關(guān)重要。

一、什么是頁面信息架構(gòu)模型

頁面信息架構(gòu)模型包含頁面之間以及頁面內(nèi)的功能空間布局和導(dǎo)航路徑設(shè)計，確保每個功能有一個“空間”，并且從一處到另一處路線的導(dǎo)航充分高效的支持交互工作流程。

因此，頁面信息架構(gòu)模型是任何交互系統(tǒng)中用戶界面的基礎(chǔ)。

二、頁面信息架構(gòu)模型設(shè)計

頁面信息架構(gòu)模型需要基礎(chǔ)的信息架構(gòu)設(shè)計，信息架構(gòu)設(shè)計請查看《信息架構(gòu)-結(jié)構(gòu)層》。

1、頁面信息架構(gòu)模型基礎(chǔ)模塊

頁面信息架構(gòu)模型基礎(chǔ)模塊包含空間布局和導(dǎo)航路徑兩個方面。

常用的空間布局容器

頁面Page彈窗Dialog側(cè)邊欄Drawer常見的導(dǎo)航路徑頁面組件

Menu導(dǎo)航菜單Tabs標(biāo)簽頁Breadcrumb面包屑PageHeader頁頭Steps步驟條Affix固釘Anchor錨點...頁面間、頁面內(nèi)通過對空間布局和導(dǎo)航路徑的設(shè)計，從而完成頁面信息架構(gòu)模型的設(shè)計。




2、頁面信息架構(gòu)模型設(shè)計

頁面信息架構(gòu)模型設(shè)計包含頁面間信息架構(gòu)設(shè)計和頁面內(nèi)信息架構(gòu)設(shè)計。

頁面間信息架構(gòu)依據(jù)信息架構(gòu)以及業(yè)務(wù)流程，劃分好頁面，并做好頁面之間的跳轉(zhuǎn)路徑。




頁面內(nèi)信息架構(gòu)包含主框架頁面信息架構(gòu)設(shè)計和一般業(yè)務(wù)信息架構(gòu)設(shè)計。主框架頁面信息架構(gòu)設(shè)計需要包含所有基礎(chǔ)功能，巨細(xì)的功能可以設(shè)計新的頁面空間承載，主要在于整個功能布局和功能頁面路徑導(dǎo)航的設(shè)計。




例如：XX模塊頁面，包含2個子頁面，一個抽屜模態(tài)空間，一個彈窗模態(tài)空間的頁面信息架構(gòu)設(shè)計（JINGWHALE Sketch插件）如下：




主要包含4條空間布局和導(dǎo)航路徑：

XX模塊主頁面->子頁面1->彈窗模塊XX模塊主頁面->子頁面2->抽屜模塊->彈窗模塊XX模塊主頁面->抽屜模塊XX模塊主頁面->彈窗模塊


3、頁面信息架構(gòu)模型描述評估

當(dāng)頁面信息架構(gòu)模型設(shè)計出來后，可以使用以下 5 個用戶績效因素來評估概念模型的影響：

1、心理模型與理解力。如果你了解它，你就可以使用它！2、位置感知。如果你知道自己在哪，你就可以到達(dá)目的地！3、視覺搜索效率。如果你能找到自己所尋找的，你就可以完成目標(biāo)！4、操作（執(zhí)行動作）負(fù)荷。如果你的操作較少，花費的精力也就減少了！5、工作記憶負(fù)荷。如果你不需記住太多內(nèi)容，你就可以做到更多！

三、設(shè)計稿信息架構(gòu)展示

依據(jù)頁面信息架構(gòu)模型，使用項目設(shè)計系統(tǒng)規(guī)范進(jìn)行頁面設(shè)計，設(shè)計稿完成以后，展示整個模塊的頁面信息架構(gòu)。

例如：XX模塊頁面的設(shè)計稿頁面信息架構(gòu)展示如下：

---

JINGWHALE，致力于設(shè)計出最符合用戶體驗的產(chǎn)品。