“基于組件的設計方法” 介紹
“基于組件的設計方法”(Component Based Design) 的概念大多會在比較龐大且復雜的項目中被提到。其實它也可以應用在規模比較小的項目和團隊中，不論項目大小,組件化的設計方法都是行之有效的。
首先,致敬Brad Frost,他曾寫過一本關于Atomic Design（網頁的原子設計模式）的書。在書中,他傳遞了一個理念: 不管是設計網頁還是app頁面,實際上我們都是在創造一個設計系統。
然而, Atomic Design這種對自然的隱喻會使客戶困惑。特別是抽象的命名也會讓人望而卻步。因此在吸取其他優秀設計師的想法的基礎上，我們定義了“基于組件的設計方法”。
基于組件的設計方法（Component Based Design）是什么?
本質上來說,“基于組件的設計方法”是 將用戶界面（UI）分解成一些命名清晰且更小,更容易管理的模塊 。這些模塊分為以下6個部分：
1. 一致性(Identity)
2. 元素(Elements)
3. 組件(Components)
4. 構成(Compositions)
5. 布局(Layout)
6. 頁面(Pages)
一致性(Identity)
6大部分中的首要的是一致性（Identity）。在這一層級中我們定義一個項目的核心品牌元素。 字體和排版、主色和輔助色 在這里都會被詳細規定好。定義之后,這些規則將會在整個項目中貫穿執行。
元素(Elements)
第二個部分規定了項目中重復使用的最小層級：元素。一些大家熟知元素有: 按鈕、鏈接、輸入框、下拉框等等。它們的樣式,包括各種狀態都是需要被定義好的,比如按鈕懸停、獲得焦點、禁用的狀態。 這里準則是: “ 一旦定義了（這些元素）,就要在整個項目中循環重復使用它們。 ”
組件(Components)
工作中主到次，第三個部分是組件（Components），當我們設計app或者web的時候,在頁面上最多的就是組件，一個組件至少需要幾個元素構成。譬如像卡片、導航欄都是一些常見的組件，不過組件并不一定非要模塊化。
當我們設計組件的時候,根據項目存在的不同的響應式尺寸,一開始就給出相對應的版本設計。通過使用這種方式,我們不需要為了確保它能在在智能手機正確顯示而回溯查看好幾周前所設計的頁面。響應式的目標需要事先經過客戶的同意,隨后才能開始組件設計。
構成(Compositions)
再放大一點，第四部分是構成（Compositions），它是由許多不同的組件組成的。它們定義了內部組件的運作方式。
下圖是一個簡單的單列布局。它只是定義了一些組件之間的空白處理,標題和內部的組件是如何被循環使用的。
布局(Layout)
第五個部分是布局（Layout）,這是一系列比較抽象的設計原則。下圖定義了一些空白、柵格和構成組件的元素數量。通過定義像這樣的規范,可以幫助其他設計師快速地進入一個項目,并且可以直接使用已有的樣式和設計規范。
頁面(Pages)
最后一個部分是項目中的實際頁面。每一個頁面包含了各種組件和構成的排列組合。
需要注意的是，所有的特例都是在頁面層級被定義的。比如市場部門提出說聯系人頁面的背景需要是藍色的,這時候我們就只在聯系人頁面執行這個需求。
一個簡單的“基于組件的設計方法”的例子：
假設我們要給一些活動售賣3種不同的門票。每一張門票的表現的形式需要相同,它只包含了數量有限的元素,即一個按鈕和幾段文本內容。這就意味著一張門票即為一個組件:門票組件。
現在,我們需要在首頁以一個簡單的三列布局來展示這3張門票的屬性。這就需要我們來設計門票構成規范。這個構成規范了各個門票組件的間距,以及一個標題。
項目上線后兩天,客戶要求添加已售罄的狀態在門票上。這意味著我們僅僅只需要更新門票組件然后就可以發給開發。非常方便！
設計軟件：Sketch
毫無疑問地,Sketch已經快速地成為了APP和UX設計首選應用。Sketch提供一些文字樣式,元件和畫板讓我們能更加快速地調整我們的組件化設計的工作流。我們已經設計了一套成熟的Sketch模版,它涵蓋了所有這些原則在里面。所以我們可以快速地開始一個項目。花更少的時間來定義所有你所需要的文字樣式可以省下很多時間。
結束語
簡而言之, “基于組件的設計方法”(Component Based Design)可以讓我們快速地設計一些頁面,從而可以更加容易地來維護和更新一些特性。 因為一切都已經被清楚地定義好了,所以即使是不同的設計師參與同一個項目也可以保持項目的一致性。
如果喜歡我們的文章，歡迎分享給你的朋友，同時也別忘了關注我們，我們將持續為你分享設計相關的文章，有任何建議，轉載或投稿歡迎來信: zovy123@qq.com :blush:
來自：http://mp.weixin.qq.com/s/Il_x6eCTbK-EyxyzX9K7tQ