組件雖然是非常重要的內(nèi)容，但全局要素中并不是僅僅關(guān)注它就夠了，還需要關(guān)注關(guān)注項目中應(yīng)用的頁面類型。

不管有什么樣的需求還是功能，它們都是由具體的一些頁面類型組合而成。比如一個大型項目中包含了數(shù)十上百個表格頁面，必然會有一部分頁面包含比較特別的操作還是交互。

如果沒有制定過比較統(tǒng)一的布局或交互形式，往往越做到后面越割裂，無法形成統(tǒng)一的體驗。

所以，最理想的情況，就是設(shè)計師在交互制定過程中梳理會使用的頁面類型，以及統(tǒng)一它們的交互、布局框架，盡可能保證不同頁面交互的一致性。

下面，我們就分別介紹一些常見的頁面類型，和它們基本的交互特征。

2.3.1 表盤頁面 Dashboard Page

表盤頁面主要是用來容納數(shù)據(jù)圖表和一些快捷功能的綜合頁面，它的主要特點就是 “碎”。因為功能零碎的特性，導(dǎo)致頁面要置入很多組件模塊。

所以在表盤類頁面的搭建中，就是要應(yīng)對各種不確定的模塊組合。而應(yīng)對方式，就是提前確定出表盤頁面的布局模式，和一些固定的內(nèi)容模塊規(guī)格，讓它們可以根據(jù)需要有效拼裝。

首先是布局模式，多數(shù)情況下表盤頁面為了空間利用率會采用多列的模式進行布局，但因為視線的聚焦區(qū)域在中央，所以往往將權(quán)重高的模塊放左側(cè)，權(quán)重低的模塊放右側(cè)（和更左邊的導(dǎo)航呼應(yīng)）。這就導(dǎo)致左右兩側(cè)的比例是不對等的。

再加上，在前期規(guī)劃框架的階段，我們是不可能具體確定模塊高度的（要根據(jù)具體內(nèi)容決定），所以我們只能優(yōu)先確定模塊包含哪幾種柵格列數(shù)的規(guī)格。

也就是說，我們在這個階段中制定了這樣的模塊寬度，后面就只用它們進行不同表盤頁面的布局即可。

2.3.2 表格頁面 Table Page

表格頁面，主要是用來放置表格的頁面類型，它是多數(shù) B 端項目中最重要的頁面類型。

雖然表格本身可以理解成是一個高級組件，但頁面中并不會只包含表格一個模塊而已，以及表格的部分元素對頁面的結(jié)構(gòu)會起到非常大的影響，也可以提前拆分出來做規(guī)劃。

比如添加操作按鈕、篩選模塊、表格切換標(biāo)簽、選中操作欄、頁碼等，都是可以提前在需求中預(yù)判的框架元素，我們就可以提前進行處理。

當(dāng)然，前期的框架不可能完整滿足后續(xù)所有情況，所以基礎(chǔ)的框架結(jié)構(gòu)要有良好的 —— 擴展性，以滿足更多復(fù)雜的需求。

2.3.3 表單頁面 Form Page

表單頁面，是用來容納輸入、選項的頁面類型，一般用在編輯、創(chuàng)建等場景中。表單頁面一般包含整頁、步驟、浮層三種模式。

表單頁面的框架設(shè)置內(nèi)容相對較少，主要是提前確認(rèn)產(chǎn)品中要應(yīng)用哪幾種表單類型，以及適用的范圍。防止后續(xù)設(shè)計過程中，做到一個表單頁面就換種表現(xiàn)形式。

例如在有的整頁模式下，只有一兩個選項，而一些選項特別多的場景卻用了彈窗的模式，有的情況又啟用抽屜，操作體驗非常的不統(tǒng)一。

2.3.4 內(nèi)容頁面 Contant Page

內(nèi)容頁面，主要是用來查看詳情信息的頁面類型，和表單頁面類似，它也會包含多種顯示模式。

通常一個項目內(nèi)只建議使用兩種展示模式即可，如整頁和抽屜模式。同時，內(nèi)容頁面往往因為需要放置的內(nèi)容太多，是需要進行模塊拆分的，所以我們可以提前確定頁面的分區(qū)方式。

當(dāng)然，如果還有其它的可以提前確認(rèn)的上級操作模塊，也可以在這個階段確認(rèn)，如分頁控件、操作欄等。

2.3.5 列表頁面 List Page

列表頁面，和表格頁面類似，也是用來展示數(shù)據(jù)條目的頁面，只是數(shù)據(jù)量通常不會太大。比如展示員工列表、資訊列表等等，會比應(yīng)用純粹的表格瀏覽效率更高。

列表頁面通常包含了兩種形式，一種是普通上下排列的模式，另一種是多列的卡片模式。

上下排列的通常適用于資訊類型的列表，例如站內(nèi)消息、平臺新聞、服務(wù)列表等，需要有比較大的空間展示內(nèi)容文本信息。而這類形式中又因為展示內(nèi)容的權(quán)重不同，對每條數(shù)據(jù)的展示要求也不一樣。

多列卡片則適用于需要較高屏幕利用率的列表，并且每個卡片內(nèi)包含的字段相對零碎，更依賴數(shù)據(jù)封面圖的情況。如內(nèi)部員工、產(chǎn)品列表、知識庫列表等等。

所以，我們可以根據(jù)可能出現(xiàn)的列表形式進行判斷，設(shè)置好基礎(chǔ)的幾種不同的列表框架。

?

2.3.6 其它頁面 Other Page

以上是 B 端項目中最常見的五種頁面類型，會在一個項目中多次復(fù)用，但并不是說項目中僅有這 5 種頁面類型而已。

例如 OA 模塊中常用的任務(wù)看板頁面、日歷頁面、甘特頁面，Devop 模塊中的日志信息、代碼編輯、架構(gòu)頁面，CCTV 模塊（監(jiān)控）中的監(jiān)控視圖、設(shè)備編輯、線路管理等等，都是在對應(yīng)業(yè)務(wù)中才會用到的頁面類型，雖然它不像前面 5 類具有普遍性，但在相關(guān)業(yè)務(wù)環(huán)境下卻意義非凡。

所以，設(shè)計師要在前期的準(zhǔn)備中，去確定會出現(xiàn)哪些頁面的類型。把這些類型整理出來以后，再去做進一步的思考，每個頁面類型要應(yīng)對哪些場景，應(yīng)該提供幾種框架模式。

然后，才是動手把這些頁面的基本交互原型全部制作出來，并輸出相關(guān)文檔。

前期準(zhǔn)備得越充分，后面完成頁面設(shè)計的過程也就越順利，項目交互的統(tǒng)一性也就越高，用戶操作效率與體驗自然也會更好。

了解完以上的內(nèi)容，我們就通過實例來解釋框架交互內(nèi)容的如何進行輸出的。因為時間關(guān)系，我只按最低標(biāo)準(zhǔn)來做輸出，后面合訂版本會做進一步完善。

首先，確定頁面的整體的基本架構(gòu)，導(dǎo)航和頂部欄等核心欄目的分布與交互方法。

然后，再制定頁面的基本柵格應(yīng)用和響應(yīng)邏輯。

接下來，將前面提到的不同類型頁面的框架和使用場景進行羅列和介紹。

最后，再對沒有應(yīng)用在常見頁面出現(xiàn)的全局組件進行羅列與解釋即可。

全部內(nèi)容都整理好后，就可以在軟件畫布中把所有相關(guān)頁面信息進行排版，方便自己和其他同事查看，我們的任務(wù)就完成了！

作為初版肯定會存在很多問題，所以盡量在推進具體交互原型之前進行一次框架交互評審，和產(chǎn)品經(jīng)理、前端開發(fā)共同討論框架元素的合理性，完成最終的優(yōu)化。

最后，分享一點，全局框架的制定需要成為提升設(shè)計效率和操作效率的工具，而不是限制設(shè)計發(fā)揮的牢籠。這種工作類似開發(fā)中的架構(gòu)師，需要對未來的需求做出大量的分析，以及結(jié)合自己的經(jīng)驗去預(yù)判產(chǎn)品經(jīng)理的預(yù)判……

所以剛開始嘗試使用這種做法很容易碰壁，因為做出來的方案很難符合項目實際需求，缺乏充分的靈活性，這都是正常的現(xiàn)象。

只要堅持嘗試和總結(jié)，就可以在幾個項目之后完全掌握它們的訣竅，并從容應(yīng)用。

這次的系列文章我們之后還會再做一次校對和匯總。

我們下篇精校合訂版再賤~