中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

組件固然重要，但在交互設計中，頁面的布局和樣式統一更為重要，因此需要制定一個全局的框架，它是提升效率的一大法寶，但需要一定的經驗和想法才能夠更加熟練地完成。作者結合自己的經驗，分享了全局框架制定的步驟，希望對你有所啟發。

一、項目的頁面類型設定

組件雖然是非常重要的內容，但全局要素中并不是僅僅關注它就夠了，還需要關注關注項目中應用的頁面類型。

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

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

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

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

1. 表盤頁面 Dashboard Page

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

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

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

再加上，在前期規劃框架的階段，我們是不可能具體確定模塊高度的（要根據具體內容決定），所以我們只能優先確定模塊包含哪幾種柵格列數的規格。

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

2. 表格頁面 Table Page

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

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

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

當然，前期的框架不可能完整滿足后續所有情況，所以基礎的框架結構要有良好的 —— 擴展性，以滿足更多復雜的需求。

3. 表單頁面 Form Page

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

表單頁面的框架設置內容相對較少，主要是提前確認產品中要應用哪幾種表單類型，以及適用的范圍。防止后續設計過程中，做到一個表單頁面就換種表現形式。

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

4. 內容頁面 Contant Page

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

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

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

5. 列表頁面 List Page

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

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

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

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

所以，我們可以根據可能出現的列表形式進行判斷，設置好基礎的幾種不同的列表框架。

6. 其它頁面 Other Page

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

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

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

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

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

二、框架的設計實例

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

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

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

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

最后，再對沒有應用在常見頁面出現的全局組件進行羅列與解釋即可。

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

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

三、結尾

最后，分享一點，全局框架的制定需要成為提升設計效率和操作效率的工具，而不是限制設計發揮的牢籠。這種工作類似開發中的架構師，需要對未來的需求做出大量的分析，以及結合自己的經驗去預判產品經理的預判……

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

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