使用風(fēng)格指南驅(qū)動開發(fā)是一個可在前端開發(fā)中獲得大量牽引力的實踐——這背后的原因也是極有道理的。開發(fā)人員將在風(fēng)格指南中加入新的代碼或更新現(xiàn)有的代碼，從而有助于稍后集成到程序中的模塊化的用戶界面系統(tǒng)。但是為了實現(xiàn)模塊化UI系統(tǒng)，我們必須以模塊化的方式進(jìn)行設(shè)計。
模塊化設(shè)計鼓勵我們思考并且做到UI和UX模式化設(shè)計。例如，我們設(shè)計始于了解用戶界面系統(tǒng)結(jié)構(gòu)以及如何用它的組件來創(chuàng)建用戶流，而不是設(shè)計一系列的頁面或視圖只是使用戶完成任務(wù)。
在這篇文章中，我將說明UI設(shè)計模塊化的價值以及它是如何靈活、方便地驅(qū)動開發(fā)執(zhí)行應(yīng)用程序
的，從而幫助設(shè)計師和開發(fā)人員更有成效的合作。
UI中的模塊化設(shè)計
模塊化設(shè)計就是將一個設(shè)計分解成小部件（即模塊），并獨立地創(chuàng)建它們，然后將它們組合到更大的系統(tǒng)中。如果我們環(huán)顧周身，我們會發(fā)現(xiàn)許多模塊化設(shè)計的例子：汽車、電腦和家具都是模塊化的。由于它們的模塊特性，所以系統(tǒng)內(nèi)部是可以被交換、添加、刪除和重新構(gòu)建的。這對于消費者是有益的，因為他們可以得到定制系統(tǒng)以滿足自身的需求。你想要一個天窗，一個更強(qiáng)大的發(fā)動機(jī)，真皮座椅？是的！汽車的模塊化設(shè)計就需要自定義這些類型甚至更多。
另一個很好的例子是宜家家具。在下面的插圖中，你可以看到模塊化設(shè)計不僅在于書架的形狀（這使得它能夠在不同的方向上擺放，或者你可以在其開口添加插口），也在于家具本身的部件（大小不同的矩形，重復(fù)著同樣的樣式）。
宜家卡拉克斯書柜的設(shè)計是模塊化和定制式的一個很好的例子：模塊化部件被用于建造書柜，其他部分可以被插入以添加功能。
從制造角度來看，模塊化設(shè)計也是具有成本效益的。這方面重要的一點是，相比較一次性建立大型而復(fù)雜的成品，建立小而簡單的部件加以連接是更容易和更便宜的。此外，該解決方案可以被重復(fù)使用，最大限度地提高了生產(chǎn)力。
創(chuàng)建用戶界面設(shè)計的目標(biāo)是相似的。作為設(shè)計人員，我們想要創(chuàng)建一個結(jié)構(gòu)和操作都非常高效的用戶界面系統(tǒng)。當(dāng)我們找到問題的解決方案時，我們希望能夠在許多地方重復(fù)運用該解決方案。這不僅節(jié)省時間，而且還建立了一種模式，用戶可以通過一次性學(xué)習(xí)并應(yīng)用在其他領(lǐng)域。在某些情況下，我們也希望能夠自定義系統(tǒng)，而無需重新調(diào)整一切。
這就是模塊化帶給用戶界面設(shè)計的：它會建立一個靈活的、可擴(kuò)展的、節(jié)約成本效益的系統(tǒng)，而且也可定制，重復(fù)使用并且是一致的。
模塊化設(shè)計的例子
模塊化用戶界面設(shè)計的一些例子可以在響應(yīng)式網(wǎng)格，瓦片式設(shè)計和卡片式設(shè)計中見到。模塊被重復(fù)使用，以提供一個靈活的布局，很容易適應(yīng)各種不同的屏幕尺寸。此外，模塊作為容器組件，使我們能夠插入不同類型的內(nèi)容及功能，就好像可以被添加到宜家櫥柜的小插件一樣。
NASA uses Bootstrap’s grid todisplay a card layout.
The card design used in a masonry layouton Pinterest
這會相似么？
如果模塊化設(shè)計是關(guān)于系統(tǒng)設(shè)計的，UI系統(tǒng)主要包括相同的部件（按鈕、字體、圖標(biāo)、網(wǎng)格等），那么你可能會質(zhì)疑：
模塊化設(shè)計不都看起來一樣么？
它將如何影響品牌形象？
如何才能使產(chǎn)品的用戶界面是獨特的？
這些問題提出一個潛在的問題：產(chǎn)品設(shè)計創(chuàng)新和唯一體現(xiàn)在哪里？最近興起這場辯論（見“難以忍受的同質(zhì)化設(shè)計”和“抵御同質(zhì)化設(shè)計”），但我會說，視覺設(shè)計是我們首先看到的，所以會傾向性的認(rèn)為創(chuàng)新和獨特性在于設(shè)計的外觀。然而，視覺設(shè)計只是其中的一部分。產(chǎn)品的創(chuàng)新和獨特需要考慮都產(chǎn)品的全部：它提供的內(nèi)在價值以及給人們帶來的體驗，也包括它的外觀。
比如說椅子。它的需求就是一把椅子，但不是所有的椅子從設(shè)計外觀、感覺或功能都是一樣的。事實上，椅子設(shè)計一直是設(shè)計和材料方面的創(chuàng)新領(lǐng)域。同樣，UI也有自己的要求，使用已有的設(shè)計模式并不意味著犧牲創(chuàng)新和獨特性。
相反，創(chuàng)新和特異性同樣需要去解決客戶特殊的問題。模塊化設(shè)計的美在是它可以鼓勵我們用相互聯(lián)系的系統(tǒng)部件做解決方案，而不是為了尋求不同而以孤立的方式找到初始的方案。換言之，創(chuàng)新設(shè)計應(yīng)用到用戶界面控件中不會只是應(yīng)用程序中的某一個地方，而是滲透到整個系統(tǒng)，保持凝聚力和提高可用性。
風(fēng)格化開發(fā)的模塊性
從實施方面來看，風(fēng)格化的開發(fā)也很要模塊化的。首先，這一過程始于一個發(fā)現(xiàn)階段：了解需要解決的問題，收集需求并且通過設(shè)計方案來迭代設(shè)計。雖然設(shè)計解決方案通常展示為一個完整的包或功能，他們真正是記錄在風(fēng)格指南中許多部分的集合體。設(shè)計的某些部分可能是新的，但它們?nèi)詰?yīng)該被建立為模塊。重要的是使用樣式指南來判斷哪些模塊在UI系統(tǒng)中可以被重復(fù)使用或擴(kuò)展延伸以創(chuàng)建新的設(shè)計。
（要是沒有了風(fēng)格指南呢？不要煩惱！我會在下一節(jié)告訴你如何以模塊化的方式來設(shè)計，即便你沒有使用風(fēng)格指南。）
風(fēng)格化開發(fā)的下一步是抽象階段，基本上是將設(shè)計方案分解成更小的部分。在這一階段，設(shè)計師和開發(fā)人員一起工作以識別該設(shè)計中的元素和組件（即模塊），他們將會被使用、或擴(kuò)展、或創(chuàng)建實施。
圖解風(fēng)格化開發(fā)
抽象階段為下一步計劃提供了良好的溯源：實施及歸檔。在這個階段中，模塊在現(xiàn)有的模塊中被建立或被增強(qiáng)。在Web開發(fā)中，這意味著建立組件或定義應(yīng)用程序中某個元素的樣式。這是模塊化重要的方面，它可以幫助您在早期發(fā)現(xiàn)問題，防止系統(tǒng)其他部分不可預(yù)見的依賴關(guān)系。其結(jié)果是篩選出更加容易整合成整體的穩(wěn)定的部分。
關(guān)于風(fēng)格化開發(fā)的獨特之處是，實施過程中，文檔是需要參考的，而不再是事后的想法。這是可能的，因為當(dāng)樣式指南生成器被使用時，文檔成為一個活生生的樣式指南，不但可以提供框架還可為開發(fā)篩選。
風(fēng)格指南可以作為定義UI元素的框架（如標(biāo)題、列表、鏈接、輸入控件等）以及可以使用的組件庫（如導(dǎo)航系統(tǒng)、工具欄、搜索工具、網(wǎng)格表，等等）。這意味著開發(fā)不是每一次都要從零開始。相反，它是建立在用戶界面系統(tǒng)中現(xiàn)有的定義中，并有助于它。
它也是一個“沙盒”[sandbox]，因為它作為一個示范空間來建立并測試。他們被開發(fā)完后集成在應(yīng)用程序中。
風(fēng)格化開發(fā)的最后一步是集成階段，類似于模塊化設(shè)計中的裝配步驟。需要的UI元素或組件已被開發(fā)，并準(zhǔn)備集成到應(yīng)用程序中。還要完成配置和自定義它們。在集成過程中，風(fēng)格指南就像是用來指導(dǎo)組裝物理模塊的手冊。
我們已經(jīng)明確了模塊化設(shè)計和風(fēng)格化開發(fā)的基本概念，讓我們使用起來。
以模塊化的方式設(shè)計
想象一下：你已經(jīng)想出了一個用戶流程，將草圖和原型擺在一起來說明其相互作用，并且記錄每一個部分。偶然的，你的設(shè)計已經(jīng)遵循了風(fēng)格指南，這樣可能會讓你擁有很大的優(yōu)勢。（如果沒有，不要緊張！）退后一步并在一個高的層次開始映射設(shè)計方案的主要部分。這些部分可能是完成某些事情的節(jié)點。例如，結(jié)帳流程可以看起來像這樣：
圖解買單過程
注意！這些還不是模板。要到達(dá)那個目的，我們需要確定其中的UI元素，如：
結(jié)帳步驟指示器，
用于輸入信息的窗體元素，
產(chǎn)品在購物車中的表現(xiàn)，
其他人購買過相關(guān)產(chǎn)品的表現(xiàn)，
購買政策，
幫助文本，
消息和警告。
Mockup design of the cart page
Mockup design of the shipping page
Mockup design of the billing page
Some of the UIelements that persist in the design
堅持設(shè)計中的一些用戶界面元素
挖掘更深一點，我們也會發(fā)現(xiàn)風(fēng)格樣式和交互模式：
樣式：
用于表示的顏色：
錯誤提示、成功提示、警告提示及信息提示；
原發(fā)性和繼發(fā)性行為；
無效狀態(tài)、中狀態(tài)與禁用狀態(tài)；
鏈接與常規(guī)文本；
品牌；
用以表示不同類型內(nèi)容的排版：
分層信息的字號；
突出信息或提供附加信息的字體類型；
列表匯總信息；
圖像傳達(dá)的視覺意義和共同行動的快速參考。
交互類型：
顯示即將發(fā)生的步驟（禁用）；
顯示上一步驟（啟用，以便信息可以被編輯）；
顯示可編輯的摘要；
一旦用戶單擊了字段，則驗證信息；
提供幫助文本；
一旦選擇便更新購物車。
一旦設(shè)計被分解成這些小的部分，我們最終會得到我們的模塊。在這一方面，很容易看到，他們不僅適用于結(jié)帳過程，還適用于許多其他領(lǐng)域的應(yīng)用程序。有了模塊化的設(shè)計方法，這些模塊可以被創(chuàng)建，使他們能夠在這個特定的以及未來的設(shè)計中使用。
原子設(shè)計作為方法學(xué)是值得一提的，它可以加速模塊化設(shè)計過程。該方法利用化學(xué)作比喻，分析系統(tǒng)的不同部分以及它們之間的聯(lián)系。
我們從原子開始，系統(tǒng)中的最小模塊（在我們的例子中的按鈕、字體和圖案）。
該模塊復(fù)雜的增長，結(jié)合在一起形成分子，提供更多的功能（在我們的例子中的結(jié)帳步驟指示及相關(guān)產(chǎn)品模塊）。
然后，應(yīng)用程序中的分子集聚到一起形成有機(jī)體（在我們的例子中各種各樣的應(yīng)用程序）。
通過化學(xué)類比，下一個層次是模板化，它是一個預(yù)定義的結(jié)構(gòu)，在那里放置著生物體。
最后，通過模板編寫的網(wǎng)頁實例。
這里缺失的部分是記錄已確定模塊的途徑。這不僅是創(chuàng)建規(guī)范文檔以掌握模塊如何被建立的問題，或書寫捕捉高層次定義的指導(dǎo)方針，如品牌的顏色和字體的問題（這是典型的標(biāo)準(zhǔn)樣式指南）。相反，文檔需要更加復(fù)雜和富于熱情的，所以當(dāng)這些模塊變化時（你知道他們會！），文檔不會過時。這正是風(fēng)格指南填補(bǔ)空白的地方！
使用動態(tài)更新的風(fēng)格指南
動態(tài)更新的風(fēng)格指南在設(shè)計過程中是非常有用的，因為它提供下面這些東西：
工作的基線
每一次，風(fēng)格指南提供了視覺方向和你應(yīng)該使用創(chuàng)建設(shè)計的模塊，而不用從頭開始。
因為樣式指南是由實際代碼生成的，它反映了實現(xiàn)設(shè)計的最新和最好的版本。
設(shè)計方案文檔
解決特定UI和UX問題的方法用于以后的使用。
這有助于保持實施中的一致性，鼓勵您將任何新的解決方案用于當(dāng)前設(shè)計中的一部分。
您將開發(fā)用戶熟悉的模式，從而提高可用性。
易溝通
該指南通過用提供戶界面的最新代表來幫助交流（不同于過時很快的靜態(tài)模型）。
常見用戶界面語言的發(fā)展源于你必須要在其中為各種元素命名。這不僅需要要UI設(shè)計師之間合作，而且需要設(shè)計師和開發(fā)人員共同合作，當(dāng)你們溝通如何實施設(shè)計時這是很大的優(yōu)勢。
無論你已擁有一個風(fēng)格指南或是計劃創(chuàng)建一個，選擇自動化過程將是正確的方向，將以模塊化的方
式驅(qū)動設(shè)計過程。所以，如果你準(zhǔn)備購買一個風(fēng)格指南，那么我會建議以下資源：
“風(fēng)格指南工具的深入概述，”RobertHaritonov，SmashingMagazine
“模式庫概述”DavidHund，GitHub
“風(fēng)格指南發(fā)生器”，“SusanRobertson，AList Apart
不要太過極端
現(xiàn)在我們看如何通過調(diào)整設(shè)計過程去合并模塊，以及樣式指南的優(yōu)點，讓我們來探討一下你可能遇到的陷阱。
風(fēng)格指南不是取代設(shè)計工作
常聽管理人員說，一旦有了風(fēng)格指南，大部分的設(shè)計工作就已經(jīng)完成了。雖然是完成了許多重復(fù)和瑣碎的工作（如原型中一個按鈕的不同狀態(tài)），但考慮下：
新的功能需要不斷被建立，尋求一個涉及到設(shè)計決策的解決方案。
因此，是的，擁有一個風(fēng)格指南和風(fēng)格驅(qū)動的開發(fā)，會提高開發(fā)工作流程，但它并沒有把設(shè)計師跑出在外。有一個加快工作流程和促進(jìn)溝通的工具有利于設(shè)計師和開發(fā)人員。這種方法的偉大在于，
它給個性化UI設(shè)計大量的空間，從而提高用戶體驗——這是設(shè)計師角色的一部分。
不要極端地跟隨模板
在應(yīng)用程序中，我們應(yīng)該始終努力使用模板。例如，使用一致性的顏色和字號的可以很快地傳達(dá)出在UI中的用戶元素是聯(lián)系的。然而，避免使用一個模式只是因為它之前已經(jīng)實現(xiàn)了，而是因為用它可以解決手頭上的問題。
例如，如果你已經(jīng)建立了在屏幕頂部顯示的工具欄模板，這種模板將可以在大多數(shù)情況下使用，但有時會呈現(xiàn)一個上下文工具欄，更接近用戶行動，更有意義。所以，要去質(zhì)疑一個模板的重用是否是低成本開發(fā)用優(yōu)先于戶體驗的實現(xiàn)。
不要忽略設(shè)計迭代
這與上一點是有聯(lián)系的。當(dāng)嘗試新模板并尋找設(shè)計界面的方法時，不要忽略迭代和創(chuàng)新的價值，即使第一眼看他們沒有遵循風(fēng)格指南。風(fēng)格指南不應(yīng)該限制你的努力，以創(chuàng)造最佳的用戶體驗。確切地說，顧名思義，它應(yīng)該是一個指南，一個起點，幫助你通過挖掘以前的工作和經(jīng)驗來解決問題。設(shè)計階段的迭代要像以往一樣重要，激勵你改進(jìn)既定的模式。
維護(hù)
工作中涉及到的許多東西中，保持風(fēng)格指南是感覺負(fù)擔(dān)的最后一件事。為了克服這個問題，我發(fā)現(xiàn)以下做法很有幫助：
尋找一個易于安裝和易于定期交互的文檔系統(tǒng)
使文檔更新成為工作流程中的一部分，而不是事后想法的實施。隨時記錄！
建立指導(dǎo)方針，使每個人都很容易共享文檔。這將分配工作量并增加歸屬感。
模塊化設(shè)計以建立模塊
創(chuàng)建靈活的、一致的、易于定制的用戶界面系統(tǒng)，同時也具有可擴(kuò)展性和成本效益，不僅取決于它的建立過程，也取決于它是如何設(shè)計的。如果每個新的設(shè)計都是獨立創(chuàng)建的，忽略了既定的標(biāo)準(zhǔn)和模式，那么組件庫就變得沒有價值了。
另一方面，因為它很方便但也不是重用相同樣式和模式的千篇一律的界面。好設(shè)計的高效不是因為它的獨特性，而是因為它結(jié)合形式和功能創(chuàng)造了偉大的體驗。這個目標(biāo)應(yīng)該永遠(yuǎn)是最高級的，使用風(fēng)格化開發(fā)帶來模塊化設(shè)計和開發(fā)，應(yīng)該可以幫助你創(chuàng)建一個有凝聚力的用戶界面系統(tǒng)。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?——End——
原文地址：https://www.smashingmagazine.com/2016/06/designing-modular -ui-systems-via-style-guide-driven-development/
譯者：馬士博，UI設(shè)計師
聲明：本文由設(shè)計夾翻譯小組成員馬士博翻譯并整理，如需轉(zhuǎn)載，請申請授權(quán)并保留譯者全部信息，轉(zhuǎn)載合作請?zhí)砑游⑿牛簊ezign01。
