交互組件庫整理

02-03

剛申請了專欄，挺開心的，終於有個穩定的地方可以寫段子了。接著上次的交互標註規範，這次來整理下交互組件庫的內容。

這段時間隨著參與的項目增多，個人對於交互組件庫的感受和需求也是日益明朗和迫切。B端和C端的產品，都免不了設計大量的頁面來形成所需的業務邏輯。然而隨著項目體量的增大，早已不是一個人能從交互干到前端的時代了，很多都是以團隊的形式參與到項目中。Axure自帶的團隊文件功能已經能較好的解決多人協同工作時的文件傳輸更新等問題，但是每個設計人員的審美、布局愛好以及設計傾嚮往往存在不同，PM在把控需求實現的同時，還要馬不停蹄的把控頁面的設計、布局風格等，著實有些應接不暇。

參與設計的人員應該都明白，頁面中部分元素可以做到高復用性，例如：導航欄（頂部/側面）、企業LOGO等，這些內容不僅在一個項目中可以在多個頁面上進行復用，也有可能在多個項目內使用，所以一個基於業務的交互組件庫就顯得非常高效有用，並且最關鍵的是能夠很好的統一團隊內部的設計樣式。

根據項目經驗，基於上方的腦圖架構，我個人把交互組件庫分了三個層級。

Level 1，基礎元件。最基礎的交互組件庫，也可以理解為Axure內自帶的組件（如下圖）。用這些最基礎的元件，你能設計出各式的界面風格，優點是顆粒度細，可塑性高。缺點是不能解決高效和統一的團隊樣式。其中Axure 8.0的版本，增加了大量常用icon，實用性挺高的，也為基礎組件庫拓寬了適用面，這裡就不做過多的贅述。

另外可以針對業務做一些定製化的icon，或者將其他網站上的icon化為己用，所以到icon量比較大的後期，也需要將icon做進組件庫內，例如：

Level 2，類業務型元件。是根據已有系統的設計樣式，抽離出來的組件，帶有一定的業務需求，方便後續版本（或者類似業務系統）快速設計。由於我是B端產品做的較多，產品邏輯很複雜，普遍存在設計周期較長的問題，往往年末定計劃，就是來年一個系統要從Q1做到Q4，這樣長戰線的項目，對於產品樣式和業務邏輯的統一性要求很高，如果能有類似業務系統的組件直接供我拖拉拽就能到位，那肯定能事半功倍。

簡單來說，就是根據已有的（已設計的/已上線的/公司以往的）系統，對可復用的組件進行選擇，盡量做成高可用的組件樣式，製作成.rplib的組件格式，載入到Axure中，提供輔助作用。這裡針對level 2，類業務型元件再進行劃分，分為「全局化組件」、「通用化組件」以及「邊緣化組件」三大類。

一、全局化組件

全局化組件，包含「頁面尺寸&布局」，「公司企業LOGO」，「登錄頁面」，「底部footbar」等，這類組件拖出來可以快速幫你勾勒出所需界面的大致樣式。例如我需要設計一個web系統的內容頁面，1280px*720px，上下布局的樣式，同時有左側導航欄，我可以直接把常規的頁面布局拖出，合理劃分內容區，其中還有虛線提醒你一屏內容的展示區域，這樣相對來說會很高效。如下圖

全局化的組件，儘可能做多個樣式，頁面布局可以有上下布局，左右布局，或者其他，而底部footbar的樣式就更多，左對齊，居中，多鏈接等等。由於是類業務型組件，我這邊也只能講個大致分類，具體就不上圖了，畢竟很多都是根據業務定製的，不太方便。製作的原則是儘可能表現樣式為主，確保高還原性，該放LOGO的地方就用佔位符表示，該是下拉框Accordion的形式，也要畫明，方便團隊人員理解和使用。

二、通用化組件

通用化組件，這些組件相對來說就是Axure基礎元件的升級版，根據業務的需求，用Axure原生的元件做一定的組合後得出的組件。整理歸類後有以下幾大類別：「彈窗」，「表格」，「麵包屑」，「摺疊組件」，「載入」，「進度條」，「滑塊」，「時間選擇器」，「頁碼」，「搜索」，「過濾器」，「評分控制項」，「徽章」等。類別較多，每個pm根據項目內容不同，這些通用化組件的分類肯定會有所調整。

分類較多，拿「搜索」舉個例子，方便大家理解。如果有興趣的，也可以私信我詳聊。

「搜索」控制項很簡單，由輸入框，按鈕以及icon組成，icon可以是個圖標，也可以成為搜索的按鈕，按鈕可以放置在輸入框內部，也可以放置在輸入框外部（如下圖），組件提供更多的選擇，當然最終的樣式選擇歸根結底還是要跟從系統的整體風格走。

三、邊緣化組件

邊緣化組件，我這邊定義的是「toast信息提醒」、「404錯誤頁」、「系統空白頁」等。這些內容在系統正式上線被使用時，是對用戶體驗影響較大的一部分，例如用戶在輸入用戶名時屢次失敗，但是一直沒有失敗的原因提醒，這肯定會嚴重影響體驗。但是往往在設計過程中，我們對這些內容會先擱置，到系統優化時再去構思，其實這類信息，提供一套較完整的組件後，後期就可以一直的進行復用，因為錯誤信息往往逃不過這幾類，而toast彈窗信息提醒，內容也無外乎幾樣，認真做一套邊緣化組件，是可以快速達到一勞永逸的目的。

舉個例子（如下圖），關於輸入框的信息提示、錯誤信息提示：

Level 3，純業務型元件。終於說到最重要的一層，純業務型元件。顧名思義，大家都可以理解，用level 1的基礎元件，我們可以做出level 2的類業務型組件，通過level 2的各式組件拼裝，我們就能得到level 3的純業務型元件。level 3的元件定製化程度高，跟業務的貼合程度也是最高，往往針對一個系統，有其獨有的類型。例如表格，表格有表頭，有內容，可全選，可單體操作。但是純業務型元件，就是特製的表格，有超強的約束性和統一性，如下圖：

在實際組件的使用中，虛線或者紅線部分都是描述性的，可以直接刪除，具體的表格長寬高尺寸還是要進行微調的。level 3的純業務型元件，分類沒有特定的依據，不過原則大體類似：

把復用程度高的內容做成組件
製作時盡量高還原，高逼真度，高業務化
思考怎樣製作才能讓團隊人員更方便的去使用

-------------------------------------------------

這三層的分類，主要還是針對交互設計人員而言，目的是在日常設計中，更為快速的使用。每層內的分類，會根據不同的項目做微調，同時也需要不斷的跟進和優化組件庫。希望對大家有所幫助。

當然，比組件庫更高級的，還有組件規則庫。一個完整的組件規則庫，除了有特定的交互樣式，在Axure製作時能及時拖拉拽加以復用，還有相應的視覺設計，以及前端代碼的編寫，更像是一本詳盡的字典，對組件的樣式和描述都非常全面（如下圖）。

總的來說，組件庫是做給自己團隊快速復用的，組件規則庫，則是做給他人學習、沉澱或者檢索使用的，目的不同，各有優勢吧。看團隊最需要什麼，就去做什麼，才是有用的，另外有一點非常重要，跟目標系統契合的業務型交互組件庫的存在，能快速提高交互人員的生產效率，但組件庫並非一蹴而就的產物，應該是一邊做系統，一邊進行豐富的，最好有專門的人員來負責組件庫的更新和迭代，所謂磨刀不誤砍柴工，大約理就在這兒。