摘要：為了更好得收納當(dāng)前的信息并且為其他工具騰出空間，我需要使用到下拉菜單。經(jīng)過幾次的討論，我們下定決心重新排列頂欄，移除了一些鏈接，實現(xiàn)了不支持多層次的下拉菜單。繼續(xù)這個例子，我們收到了大量的圍繞下拉菜單，并且重新考慮支持多層次菜單。

----最近在看新鮮出爐Bootstrap4,翻到了以前的一篇老文章，講述了Tweter工程師構(gòu)建Bootrap的初衷和過程。
以下翻譯自Bootstrap 創(chuàng)始人Mark Otto的博客 Building Twitter Bootstrap講訴了Bootstrap的創(chuàng)建歷程。

原文地址:http://alistapart.com/article/building-t...

一年半以前，一小部分Twitter的工程師準(zhǔn)備著手開發(fā)一個用于團隊內(nèi)部管理和分析工具，在圍繞這個工具早期開展的一些會議上，我們決定帶著一個更高的目標(biāo)去創(chuàng)建這樣一個能夠為Twitter任何一個員工使用的工具，甚至Twitter以為的人們。因此，我們打算建立一個系統(tǒng)能夠幫助像我們這樣的人在這個基礎(chǔ)上創(chuàng)建新的項目，所以Bootstrap就這樣構(gòu)建出來了。

我和Jacob Thornton創(chuàng)建的Bootstrap前端工具被用來幫助設(shè)計師和開發(fā)者快速高效地搭建網(wǎng)上應(yīng)用，我們的目標(biāo)是創(chuàng)建一個精致的、文檔規(guī)范的、由HTML、CSS、JavaScript構(gòu)建的具備靈活組件庫，人們能夠利用這個庫來構(gòu)建自己的應(yīng)用，或者在這個庫的基礎(chǔ)上進行創(chuàng)新。至今，Bootstrap已經(jīng)擴展到了幾十個組件，而且成為了Github上最受歡迎的項目，超過了13,000 的關(guān)注者以及2000個分支。

這里我將透露Bootstrap創(chuàng)建的原因、它是如何被創(chuàng)建的、以及它是如何演變?yōu)橐粋€設(shè)計系統(tǒng)的。

Twitter公司內(nèi)部早期的一些工具設(shè)計得不夠精致和人性化，以至于無法快速地進行開發(fā)并且重復(fù)使用，幾個團隊的成員都認(rèn)識到了這個問題，而且認(rèn)為這是一個對現(xiàn)在和未來項目的發(fā)展極佳的解決時機，認(rèn)識到這一點，我們通過早期的設(shè)計和合作形成了了一個大致的計劃。
站在一個更高的角度來看，我們的計劃大致是這樣的：

這個工具（Bootstrap）的一部分開發(fā)者與產(chǎn)品經(jīng)理以及潛在的用戶一起工作，來確定關(guān)鍵的功能和特征。

我通過與開發(fā)者一起工作來確定需求，然后在瀏覽器中實現(xiàn)它，創(chuàng)建可視化語言和尋求互動。在實現(xiàn)第一步之后，我們仔細(xì)討論了每一個組件和衡量了其他選項及實現(xiàn)方法，再開展下一步工作。

之后，我們開始朝著最初創(chuàng)建的這樣一個新的內(nèi)部工具來設(shè)計和編碼，這段時間里，我們快速地執(zhí)行、測試、迭代每個新特征。

最后，作為后續(xù)的工作，我把這個內(nèi)部工具集中相同的組件抽出來，把他們添加到共享代碼庫中（Bootstrap），提煉并且提供文檔，供其他項目使用。

這樣的方式意味著溝通是構(gòu)建Bootstrap的關(guān)鍵，大部分設(shè)計工作發(fā)生在編碼，

最終我們把這個經(jīng)驗總結(jié)成：設(shè)計師與開發(fā)者配對。與開發(fā)者的持續(xù)溝通啟發(fā)了Bootstrap，并且推動了Bootstrap一年后的持續(xù)發(fā)展。從構(gòu)思理念到簡易雛形的編碼以及跨學(xué)科的合作，這些使得Bootstrap在TWitter公司內(nèi)部成功地被使用。這個過程促進了Bootstrap的每一個特征的開發(fā)，隨著時間的推移，效果顯著。

這種方式構(gòu)建Bootstrap意味著溝通是關(guān)鍵，大部分設(shè)計發(fā)生在編碼中，當(dāng)完成Bootstrap的可交付版本的時候，盡可能地交換大家的意見變得非常有意義。這使得鼓勵開發(fā)簡潔的組件深入到一個優(yōu)秀開發(fā)者心里，但是視覺上的精良和期望是一個專業(yè)設(shè)計者的水準(zhǔn)。

讓我們看一看Bootstrap的一個例子：下拉菜單。為了更好得收納當(dāng)前的信息并且為其他工具騰出空間，我需要使用到下拉菜單。許多人都會在他們的應(yīng)用中用到下拉菜單，每一個人都有不同的實現(xiàn)、交互和視覺設(shè)計。那么我們將會如何使用它呢？有了上面的提綱之后，下面這些特征將會體現(xiàn)在Bootstrap中：

我們意識到我們使用了太多了導(dǎo)航鏈接以及固定頂欄的動作，可伸縮的、多層次的下拉菜單看起來是一個解決方案。

我們通過合作來確認(rèn)為什么需要這么多的鏈接和動作，以及為什么我們需要支持多層次。

經(jīng)過幾次的討論，我們下定決心重新排列頂欄，移除了一些鏈接，實現(xiàn)了不支持多層次的下拉菜單。那個時候，這樣做意味著需要額外的編碼，并且實現(xiàn)起來很復(fù)雜，我們想要避免這些。

接下來，我們?yōu)橄吕藛蔚模篽over寫了基本的Html和Css代碼，我們在代碼庫上優(yōu)化了視覺上的一些細(xì)節(jié)，并且抽象出來、編寫了文檔，加入到Bootstrap中。

在最后一步抽象至Bootstrap時，我們在動作的觸發(fā)上選擇了點擊而不是懸停，我們發(fā)現(xiàn)這有利于避免用戶產(chǎn)生困惑和無意識的點擊，提供一個更好的體驗。

大多數(shù)的組件和周圍的細(xì)節(jié)都是通過設(shè)計師和開發(fā)者配對來設(shè)計構(gòu)建的，通過合作，我們?yōu)槊恳粋€新的特征或者設(shè)計組件的思路逐漸成熟，經(jīng)過特征討論和回顧、實現(xiàn)、最后的抽象化和文檔化。這使得內(nèi)部工具的開發(fā)相當(dāng)?shù)亓鲿?，避免了特征的變動和代碼的膨脹，而且?guī)椭覀兣靼琢瞬粌H僅是如何在Bootstrap中去使用一個組件，而是為什么要使用它。

自然而然衍生出了新的特征并且融合到現(xiàn)有特征里，有些功能特征我們已經(jīng)需要修改或者移除，我們遵循同樣的步驟：構(gòu)思、審查、實現(xiàn)、文檔化。繼續(xù)這個例子，我們收到了大量的圍繞下拉菜單，并且重新考慮支持多層次菜單。只從網(wǎng)頁應(yīng)用越
像桌面應(yīng)用——同樣使用多層次下拉菜單，這讓我們覺得支持多層次變得很有意義。我們收回了早期的決定，但這個過程讓我我們保持坦率的、目的明確的、并且對我們客戶和他們的需求負(fù)責(zé)。

幾乎我們所有的特征都是通過這個流程開發(fā)的，導(dǎo)致我們所做的決定已經(jīng)超出了僅僅只是構(gòu)建這樣一個工具的范圍。我們與那些沒有接觸到我們的工作流程或者沒有深刻理解的人必須進行有效地溝通。

我們在忙于創(chuàng)建一個產(chǎn)品路線圖和決定一個項目的目標(biāo)的時候，我們會積極考慮其他人如何使用相同的組件。對組件的抽象化和文檔化串聯(lián)起了我們構(gòu)建Bootstrap的整個流程?？傮w來講，我們節(jié)省了時間和精力，更清楚地討論了添加（刪除）一些特征，并且使我們在未來能夠應(yīng)對更大的項目。

在最初的幾個星期的開發(fā)之后，我們開始考慮把這個動態(tài)文檔做成工具包指南風(fēng)格。我們通過Bootstarp工作中的溝通來達成我們的目標(biāo)，這也使得Bootstrap快速地成長并且每個人都能使用它。

創(chuàng)建指南型風(fēng)格的Boostrap的想法很自然地在我們的設(shè)計和開發(fā)過程中冒了出來。Bootstrap幫助我們用實例文檔化容器，而且他們本身支撐整個文檔，定義了真正的組件和模板。這也成了設(shè)計師的參照點，并且為每一個活的組件創(chuàng)建了文檔。
構(gòu)建指南型風(fēng)格的Bootstrap在早期就改變了Bootstrap的發(fā)展方向，它讓我們想去實現(xiàn)項目之外的東西。我們不想把自己限制在設(shè)計開發(fā)單個項目，我們有更大的目標(biāo)，我們沒有把自己定位成只是想從這個工具中收益，我們的目標(biāo)不僅僅是在Twitter使用，而是能夠被任何的設(shè)計者和開發(fā)者使用。任何人都能克隆和下載源代碼，

靈活的文檔促使我們不僅僅是分享整個框架，而是為所有想使用Bootstrap的人提供一個書面和交互式的文檔。允許任何人克隆和下載源代碼，使用Inspector或者在瀏覽器中查看源碼。
隨著工作的推進，“幫助牛b的人干牛b的事”成為了指導(dǎo)我們工作的準(zhǔn)則。這顯然與我們想幫助那些沒有理解過程和產(chǎn)品而進行設(shè)計開發(fā)的人做決定的目標(biāo)相吻合，無論是在哪個技術(shù)層級或者工作流程的人，人們打開這個文檔，就能夠使用Bootstrap快速構(gòu)建自己喜歡的東西。
--(未完待續(xù))