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

----最近在看新鮮出爐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ā)一個(gè)用于團(tuán)隊(duì)內(nèi)部管理和分析工具，在圍繞這個(gè)工具早期開展的一些會(huì)議上，我們決定帶著一個(gè)更高的目標(biāo)去創(chuàng)建這樣一個(gè)能夠?yàn)門witter任何一個(gè)員工使用的工具，甚至Twitter以為的人們。因此，我們打算建立一個(gè)系統(tǒng)能夠幫助像我們這樣的人在這個(gè)基礎(chǔ)上創(chuàng)建新的項(xiàng)目，所以Bootstrap就這樣構(gòu)建出來了。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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