創(chuàng)建設(shè)計(jì)系統(tǒng)，而不是頁(yè)面

很久很久之前，這些東西被稱為書(shū)。記得嗎？這些東西由枯樹(shù)的的果肉制成，又沉又笨重。書(shū)里面的東西被稱作頁(yè)。你翻閱它們，它們會(huì)割到你的手指。

糟糕的東西。我很高興這些書(shū)再也沒(méi)有它們鋒利的頁(yè)面了。

噢，等等......

我們標(biāo)頁(yè)碼的過(guò)去

頁(yè)面已經(jīng)和我們共存很久了，實(shí)際上是幾千年。第一本書(shū)是在約4000年前用厚厚的粘土板制作的，很快卷軸成了更好的替代品來(lái)寫(xiě)字。盡管閱讀技術(shù)已經(jīng)走了很長(zhǎng)一段路——從紙莎草紙到羊皮紙?jiān)俚狡窖b書(shū)再到像素，但頁(yè)面的概念至今仍然很強(qiáng)。

頁(yè)面這個(gè)隱喻從一開(kāi)始就融入了網(wǎng)絡(luò)的字典中。蒂姆·伯納斯·李發(fā)明了萬(wàn)維網(wǎng)，以便他和他在歐洲核子研究組織的同事以及其他學(xué)者能夠輕松的共享和連接他們的文檔世界。Web這種以文檔為基礎(chǔ)的學(xué)術(shù)起源解釋了為什么頁(yè)面已經(jīng)深深根植于網(wǎng)絡(luò)的詞匯表中。

所以呢？

正如我們將在本書(shū)中討論的那樣，事物的命名方式非常影響人們對(duì)其的理解和運(yùn)用。將網(wǎng)頁(yè)當(dāng)作頁(yè)面會(huì)對(duì)人們與網(wǎng)絡(luò)體驗(yàn)進(jìn)行交互產(chǎn)生真正的重大影響，也會(huì)影響我們?nèi)?chuàng)建web界面。

從一開(kāi)始，頁(yè)面隱喻就為用戶提供了一種熟悉的語(yǔ)言，可以用這種語(yǔ)言來(lái)瀏覽這個(gè)新穎的萬(wàn)維網(wǎng)。像加書(shū)簽和翻頁(yè)的概念幫助新的Web使用者用他們最習(xí)慣的習(xí)俗來(lái)探索和最終掌握這個(gè)全新的媒體。

對(duì)于Web用戶而言，該頁(yè)面（注：指的是chrome的該頁(yè)無(wú)法訪問(wèn)頁(yè)面）曾經(jīng)是（并且將繼續(xù)是）一個(gè)非常明顯和有用的隱喻。它還對(duì)如何創(chuàng)建Web體驗(yàn)產(chǎn)生深遠(yuǎn)影響。

在web的早期，一些希望登上網(wǎng)絡(luò)的公司只是為了把他們的紙質(zhì)材料放到他們的網(wǎng)站上而已。但即使是這些宣傳冊(cè)網(wǎng)站提供了一個(gè)非常一維的web可以提供的視角，對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，認(rèn)真思考之后還是很容易將瀏覽網(wǎng)頁(yè)作為紙質(zhì)頁(yè)面的數(shù)字化形式替代。

但是我們進(jìn)入這種新媒體已經(jīng)25年了，這種曾經(jīng)很必要的表現(xiàn)形式已經(jīng)過(guò)時(shí)了。不幸的是，頁(yè)面的隱喻還在深深的影響我們檢查和實(shí)行我們的web項(xiàng)目。這里有些例子我會(huì)時(shí)不時(shí)聽(tīng)到：
“我們將在這個(gè)10月推出一個(gè)5個(gè)頁(yè)面的網(wǎng)站......”
“Brad，做一個(gè)首頁(yè)需要多久？”
“我們要怎樣去重構(gòu)一個(gè)超過(guò)30000個(gè)頁(yè)面的大學(xué)網(wǎng)站？！”

所有上面的這些情況都犯了一個(gè)根本性的錯(cuò)誤，他們將頁(yè)面視為一個(gè)整體，孤立的，量化的東西。實(shí)際上web是流動(dòng)的，相互依賴與相互影響的。一旦我們接受了這個(gè)事實(shí)，頁(yè)面的概念就會(huì)快速的消失，（這個(gè)事實(shí)將）成為我們檢查和創(chuàng)建web體驗(yàn)的助力。

一個(gè)首頁(yè)需要多久來(lái)創(chuàng)建？好吧，這取決于里面有什么內(nèi)容，對(duì)嗎？可能首頁(yè)僅僅由一個(gè)宣傳詞和一個(gè)背景圖組成，這意味著可以在午餐時(shí)間就能解決。或者它充滿了輪播圖，動(dòng)態(tài)表單，和一些第三方整合。那種情況下可能首頁(yè)需要幾個(gè)月去完成。

至于30000個(gè)頁(yè)面的大學(xué)首頁(yè)，可能聽(tīng)起來(lái)嚇人，“成千上萬(wàn)的頁(yè)面？！喔，聽(tīng)起來(lái)有挑戰(zhàn)性！”但實(shí)際上，那些個(gè)頁(yè)面可能就由三種內(nèi)容和兩種布局組成。

最后，一個(gè)項(xiàng)目級(jí)的工時(shí)花費(fèi)很大程度上取決于那些頁(yè)面包括的設(shè)計(jì)功能和組件（components），而不是頁(yè)面數(shù)量本身。

頁(yè)面的隱喻服務(wù)于它幫助用戶熟悉web的目的，同時(shí)給開(kāi)發(fā)者提供必要的過(guò)渡語(yǔ)言去創(chuàng)建一個(gè)全新的媒體。但是要?jiǎng)?chuàng)建一個(gè)體驗(yàn)好的界面就意味著要服務(wù)于大量的連接的設(shè)備，對(duì)我們來(lái)說(shuō)是時(shí)候在頁(yè)面的基礎(chǔ)上繼續(xù)演變了。

撕碎頁(yè)面

謝天謝地，web社區(qū)在建立規(guī)范和實(shí)踐來(lái)幫助我們有效的討論和創(chuàng)建web下了一番功夫。同時(shí)，在關(guān)于如何構(gòu)建成功的web體驗(yàn)中討論中有一個(gè)概念一直會(huì)被提到：“模塊化”（譯注：原文為modularity）

模塊化要遠(yuǎn)遠(yuǎn)早于網(wǎng)絡(luò)。工業(yè)革命時(shí)出現(xiàn)了可交換的部分，亨利·福特（譯注：福特汽車公司創(chuàng)始人）的流水線永遠(yuǎn)的改變了汽車的制造工藝。早期的汽車和零件都是獨(dú)立手工制作的，這就導(dǎo)致了很多安全和維修方面的噩夢(mèng)。福特將汽車分解成它的零件部分然后將裝配工藝模塊化。最后就像他們說(shuō)的那樣：更加統(tǒng)一，更加可靠，更加安全的汽車從工廠出來(lái)，然后在記錄的時(shí)間內(nèi)啟動(dòng)。

隨著機(jī)器時(shí)代之后是計(jì)算機(jī)時(shí)代，計(jì)算機(jī)科學(xué)家開(kāi)始實(shí)踐面向?qū)ο蟮某绦?，?chuàng)建重要的模塊化概念，就像關(guān)注點(diǎn)分離和單一對(duì)象原則。這個(gè)世界誕生了萬(wàn)維網(wǎng)，那么模塊化設(shè)計(jì)快速成為了web體系的設(shè)計(jì)原則也就不足為奇了。

這些概念緩慢而確定地進(jìn)入了web設(shè)計(jì)者的工作流程。在2000年代早期我們可以看到諸如YUI和jQuery UI等ui庫(kù)的引入為開(kāi)發(fā)者提供了一個(gè)模型和部件的小工具包，去為開(kāi)發(fā)者們創(chuàng)建一個(gè)更加一致的用戶界面。

模塊化存在了這么久了，為什么我們現(xiàn)在還要討論它呢？

簡(jiǎn)單地說(shuō)，模塊化比以前更加重要了?，F(xiàn)在我們整個(gè)行業(yè)都淹沒(méi)在大量設(shè)備，（不同的）視窗大小和在線的環(huán)境中。而且短期內(nèi)這種情況將不會(huì)改變。

混亂只會(huì)加速。連接設(shè)備的數(shù)量和多樣性（許多我們至今還未想到的）將會(huì)爆炸，使用這些龐雜的設(shè)備的人們也會(huì)爆炸。我們當(dāng)前的標(biāo)準(zhǔn)，工作流程，基礎(chǔ)設(shè)施將無(wú)法維持。當(dāng)前的設(shè)備的沖擊已經(jīng)將這種爆炸推至了一個(gè)臨界點(diǎn)，之后將無(wú)可抵擋。——未來(lái)友好宣言（The Future-Friendly manifesto譯注：是一個(gè)網(wǎng)站，但是目前已經(jīng)無(wú)法訪問(wèn)）

不管你喜不喜歡，多設(shè)備的宇宙已成現(xiàn)實(shí)。讓我們的網(wǎng)頁(yè)在少數(shù)的桌面瀏覽器中顯示得一致已經(jīng)是很難做到的了，但是我們現(xiàn)在的任務(wù)是要確保我們的網(wǎng)頁(yè)體驗(yàn)?zāi)茉诹钊祟^暈?zāi)垦５脑O(shè)備上看起來(lái)漂亮。（諸如智能手機(jī)，平板電腦，筆記本，臺(tái)式機(jī)，游戲主機(jī)等等）

為了在我們保持理智的時(shí)候?qū)崿F(xiàn)這些，我們絕對(duì)有必要退一步，將巨大的任務(wù)分解成更小的更便于管理的部分。

那正是大伙正在做的事情。模塊化的精神正在進(jìn)入web創(chuàng)造過(guò)程的各個(gè)方面，并對(duì)組織的策略，過(guò)程，內(nèi)容，設(shè)計(jì)和開(kāi)發(fā)產(chǎn)生了深遠(yuǎn)影響。

• 可管理的策略

每個(gè)機(jī)構(gòu)最終都意識(shí)到將他們的網(wǎng)站推倒重來(lái)并用3-8年替換成一個(gè)New-And-Shiny?式的網(wǎng)站不是（而且從來(lái)不是）一個(gè)最佳的解決方案。
（譯注：Google了一下也沒(méi)有找到這個(gè)所謂的“New-And-Shiny”，可能就是字面上的意思——新鮮有光澤的233）

辭舊而迎新，這無(wú)疑是個(gè)吸引人的展望。但即使是在啟動(dòng)會(huì)的慶祝紙片飛舞之前（譯注：腦補(bǔ)電影里面國(guó)外的慶功宴或者婚禮拋灑的五彩紙片），電話仍舊會(huì)打過(guò)來(lái)?！澳銊?dòng)了我的奶酪！”那些已經(jīng)花了很多年去學(xué)習(xí)以前的界面和功能的用戶真的是哭了。

當(dāng)大規(guī)模重構(gòu)啟動(dòng)而且將對(duì)用戶體驗(yàn)產(chǎn)生重要改變時(shí)，用戶會(huì)被Jared Spool提到的“獲取知識(shí)的神奇的自動(dòng)扶梯”（Magic Escalator of Acquired Knowledge）所絆倒。巨大的重構(gòu)對(duì)于系統(tǒng)來(lái)說(shuō)是一個(gè)震動(dòng)，新的沮喪的用戶必須花費(fèi)大量的時(shí)間和精力去重新學(xué)習(xí)經(jīng)驗(yàn)，以便慢慢爬上“獲取知識(shí)的扶梯”。

此外對(duì)于迷惘的用戶，龐大而單一的重構(gòu)并沒(méi)有g(shù)et到問(wèn)題的根本。沒(méi)有一個(gè)流程上的根本轉(zhuǎn)變，歷史勢(shì)必會(huì)重演。這就是為什么今天是New-And-Shiny?明天就變成了Old-And-Crusty?（譯注：從新鮮有光澤到老而暴躁2333）。當(dāng)公司推遲小的更新直到下一次大重構(gòu)，這種循環(huán)會(huì)一直重復(fù)。這個(gè)過(guò)程最終會(huì)麻痹公司自身而使用戶沮喪。

值得慶幸的是，即使大型的公司也在從小的初創(chuàng)公司身上尋找靈感，努力的進(jìn)行更快的發(fā)布。通過(guò)創(chuàng)建更小的可行的產(chǎn)品來(lái)向市場(chǎng)經(jīng)常迭代以提升用戶體驗(yàn)，這些公司能更好的解決用戶反饋并跟上瞬息萬(wàn)變的web環(huán)境。

擺脫 Ron Popeil式的想法，設(shè)置并忘記——重構(gòu)需要在組織架構(gòu)和工作流程中進(jìn)行小心翼翼的改變。這說(shuō)起來(lái)容易做起來(lái)難。

• 模塊化內(nèi)容：我在一個(gè)chunk團(tuán)隊(duì)中

當(dāng)桌面web應(yīng)用主宰整個(gè)web的時(shí)候，發(fā)布web內(nèi)容是一項(xiàng)簡(jiǎn)單的工作。如今，狀況改變了?，F(xiàn)在，我們的內(nèi)容被大量的智能手機(jī)，非智能電話，上網(wǎng)本，筆記本，平板電腦，電子閱讀器，智能手表，電視，游戲機(jī)，數(shù)字標(biāo)牌，汽車觸控板等所占用。為了恰當(dāng)?shù)貞?yīng)對(duì)這種日益多樣化和數(shù)字的環(huán)境，我們需要徹底改變我們對(duì)內(nèi)容的認(rèn)知以及用于管理內(nèi)容的工具。

各個(gè)團(tuán)隊(duì)認(rèn)識(shí)到有必要?jiǎng)?chuàng)建模塊化的內(nèi)容，以更好地覆蓋他們的受眾，無(wú)論他們身在何處。內(nèi)容管理系統(tǒng)已經(jīng)超越了Web發(fā)布平臺(tái)的根基，逐漸發(fā)展成為可以優(yōu)雅地創(chuàng)建和維護(hù)模塊化內(nèi)容的工具。多年來(lái)，復(fù)雜的內(nèi)容管理系統(tǒng)以自定義解決方案的形式存在，例如NPR的COPE（“創(chuàng)建一次，到處發(fā)布”）平臺(tái)，而智能模塊化思想正在進(jìn)入主流內(nèi)容管理系統(tǒng)。

• 優(yōu)雅的代碼

正如我們前面所討論的，模塊化一直是計(jì)算機(jī)科學(xué)領(lǐng)域的主要原則。盡管該原則早在Web發(fā)明之前就已經(jīng)存在，但它花了一些時(shí)間才根植于Web開(kāi)發(fā)人員的思想和內(nèi)心。

盡管自1995年以來(lái)一直存在，但JavaScript（網(wǎng)絡(luò)的編程語(yǔ)言）首先必須忍受不斷增長(zhǎng)的痛苦，才能發(fā)展成為如今的有能力，受人尊敬的語(yǔ)言。如今，JavaScript已經(jīng)發(fā)展起來(lái)，開(kāi)發(fā)人員可以將這些久經(jīng)考驗(yàn)的計(jì)算機(jī)科學(xué)原理應(yīng)用于其Web開(kāi)發(fā)工作流程。結(jié)果，我們看到人們?cè)陂_(kāi)發(fā)復(fù)雜的JavaScript模式和體系結(jié)構(gòu)。

將模塊化編程原理應(yīng)用于JavaScript有點(diǎn)麻煩，因?yàn)镴avaScript本身就是一種編程語(yǔ)言。但是，面向?qū)ο蟮乃枷胍舱谌谌刖W(wǎng)絡(luò)的其他方面，包括CSS，即網(wǎng)絡(luò)的樣式語(yǔ)言。諸如OOCSS，SMACSS和BEM之類的方法已經(jīng)出現(xiàn)，以幫助Web設(shè)計(jì)人員創(chuàng)建和維護(hù)模塊化CSS架構(gòu)。

• 系統(tǒng)的UI設(shè)計(jì)

我們不是在設(shè)計(jì)頁(yè)面，而是在設(shè)計(jì)組件系統(tǒng)。 ——Stephen Hay

幾年前，Ethan Marcotte向我們介紹了響應(yīng)式Web設(shè)計(jì)的思想及其三個(gè)核心原則：流暢的網(wǎng)格，靈活的媒體和CSS媒體查詢。這三種成分為設(shè)計(jì)人員創(chuàng)建靈活地適應(yīng)任何屏幕尺寸的靈活布局提供了急需的基礎(chǔ)。也許更重要的是，響應(yīng)式設(shè)計(jì)使設(shè)計(jì)師對(duì)創(chuàng)建周到，適應(yīng)性強(qiáng)的多設(shè)備Web體驗(yàn)感到興奮。

正如設(shè)計(jì)人員很快發(fā)現(xiàn)的那樣，創(chuàng)建多設(shè)備Web體驗(yàn)所涉及的內(nèi)容遠(yuǎn)遠(yuǎn)超過(guò)創(chuàng)建多頁(yè)面的頁(yè)面。界面的每個(gè)部分都包含自己獨(dú)特的挑戰(zhàn)和機(jī)遇，以使其在許多屏幕尺寸和環(huán)境下都能美觀地工作。

我們?nèi)绾我灾艿降姆绞皆谳^小的屏幕上呈現(xiàn)主要導(dǎo)航（通常在大屏幕上顯示為水平列表）？燈箱，面包屑和輪播如何轉(zhuǎn)換為較小的視口和替代輸入類型？正是這些問(wèn)題促使我創(chuàng)建了This Is Responsive，這是響應(yīng)模式的展示，該模式演示了特定組件在響應(yīng)環(huán)境中的各種執(zhí)行方式。

盡管“This Is Responsive”成功地闡明了這些界面模式如何在屏幕尺寸和環(huán)境之間擴(kuò)展，但仍然需要設(shè)計(jì)師和開(kāi)發(fā)人員才能將這些模式付諸實(shí)踐。事實(shí)證明，這需要大量工作。

UI框架的理論與實(shí)踐

設(shè)計(jì)人員和開(kāi)發(fā)人員已經(jīng)被時(shí)間和資源所束縛，現(xiàn)在他們面臨的任務(wù)是使界面在任何環(huán)境下都能美觀和正常工作。這是一個(gè)很高的要求。

滿足不斷增長(zhǎng)的設(shè)備多樣性的需求，同時(shí)仍然明智地開(kāi)展項(xiàng)目，這產(chǎn)生了諸如Foundation by Zurb和Bootstrap的前端框架。這些用戶界面框架為設(shè)計(jì)人員提供了預(yù)組裝的HTML模式，CSS樣式和JavaScript的集合，以向交互式組件（如下拉菜單和輪播）添加功能。本質(zhì)上，這些框架是用于快速組裝界面的便捷工具套件。

這些框架最吸引人的方面之一是速度。諸如Bootstrap之類的框架使設(shè)計(jì)人員能夠迅速將想法付諸實(shí)踐，快速創(chuàng)建原型，并盡快啟動(dòng)站點(diǎn)。因?yàn)楣ぞ甙峁┑哪Ｊ揭呀?jīng)過(guò)跨瀏覽器測(cè)試，所以開(kāi)發(fā)人員可以將時(shí)間花在更重要的任務(wù)上，而不必費(fèi)心去測(cè)試一些古老版本的Internet Explorer。并且如果設(shè)計(jì)人員確實(shí)陷入困境，這些框架的社區(qū)可以提供有用的支持和建議。

對(duì)于自由職業(yè)者來(lái)說(shuō)，這種速度的提高可能意味著他們可以承擔(dān)一個(gè)或三個(gè)額外的項(xiàng)目，從而在一年中產(chǎn)生更大的財(cái)務(wù)穩(wěn)定性。在啟動(dòng)世界（Bootstrap無(wú)所不在的地方）中，最低限度可行的產(chǎn)品可以更快推出，從而為產(chǎn)品的可行性提供了更快的答案。

• 框架天堂的煩惱

就像現(xiàn)實(shí)世界一樣，Web項(xiàng)目的各種需求，目標(biāo)和愿望導(dǎo)致了各種各樣的解決方案。當(dāng)然，所有內(nèi)容都有時(shí)間和地點(diǎn)，設(shè)計(jì)人員和開(kāi)發(fā)人員需要敏銳的知識(shí)才能知道何時(shí)使用哪些工具。

前端框架是提供特定解決方案和特定外觀的工具。這些解決方案有助于加快開(kāi)發(fā)速度，但最終獲得的體驗(yàn)卻類似于那些科幻連身褲。當(dāng)每個(gè)人都使用相同的按鈕，網(wǎng)格，下拉菜單和組件時(shí)，自然就會(huì)開(kāi)始看起來(lái)相同。如果耐克，阿迪達(dá)斯，彪馬和銳步使用Bootstrap重新設(shè)計(jì)各自的站點(diǎn)，它們的外觀將基本相似。當(dāng)然，這不是這些品牌想要的。當(dāng)然，每個(gè)品牌都可以修改和擴(kuò)展默認(rèn)的外觀，但是過(guò)一會(huì)兒定制就意味著要與框架的給定結(jié)構(gòu)，樣式和功能作斗爭(zhēng)。

除了外觀相似的問(wèn)題外，這些框架還可能給體驗(yàn)帶來(lái)不必要的膨脹?？蚣芴峁┝嗽S多預(yù)構(gòu)建的組件和功能，這真是太棒了，但是很大比例的設(shè)計(jì)人員和開(kāi)發(fā)人員不會(huì)采用框架的每個(gè)方面。不幸的是，用戶仍然必須下載框架未使用的CSS和JavaScript，這會(huì)導(dǎo)致頁(yè)面加載速度變慢并且令人沮喪。

另一方面，框架可能遠(yuǎn)遠(yuǎn)不夠用，導(dǎo)致開(kāi)發(fā)人員需要?jiǎng)?chuàng)建大量的自定義代碼來(lái)實(shí)現(xiàn)其項(xiàng)目目標(biāo)。在某個(gè)時(shí)候，跨越了一個(gè)門檻，使用框架的最初收益（即開(kāi)發(fā)速度）被修改，擴(kuò)展和修復(fù)框架所花費(fèi)的時(shí)間所抵消。

既然我們已經(jīng)將框架付諸實(shí)踐，那么退后一步并認(rèn)識(shí)到這些框架在概念上非常重要是很重要的。使用設(shè)計(jì)工具套件來(lái)提高一致性并加快開(kāi)發(fā)時(shí)間是一個(gè)好主意。在討論位于奧斯汀的網(wǎng)上商店P(guān)aravel對(duì)Microsoft主頁(yè)的重新設(shè)計(jì)時(shí)，開(kāi)發(fā)人員Dave Rupert強(qiáng)調(diào)了為客戶創(chuàng)建和交付設(shè)計(jì)系統(tǒng)的重要性。Dave明確指出，不一定要為每個(gè)客戶端使用Bootstrap，而是要為“每個(gè)客戶端創(chuàng)建微小的Bootstraps”。

這不只是關(guān)于使用設(shè)計(jì)系統(tǒng)，它是關(guān)于創(chuàng)造你的系統(tǒng)。

設(shè)計(jì)系統(tǒng)節(jié)省了時(shí)間

那么健壯的設(shè)計(jì)系統(tǒng)是什么樣的呢？他們采取什么形式？您如何創(chuàng)建，維護(hù)和實(shí)施它們？

好的設(shè)計(jì)系統(tǒng)的基礎(chǔ)是樣式指南，該指南記錄并組織設(shè)計(jì)材料，同時(shí)提供指南，用法和約束。

碰巧的是，樣式指南有很多風(fēng)格，包括關(guān)于品牌標(biāo)識(shí)，寫(xiě)作，語(yǔ)音和基調(diào)，代碼，設(shè)計(jì)語(yǔ)言和用戶界面模式的文檔。本書(shū)不會(huì)詳細(xì)介紹樣式指南的所有類別，但重要的是要仔細(xì)研究每種樣式指南，以更好地理解每種樣式指南如何影響其他樣式指南，以及網(wǎng)絡(luò)樣式指南如何適應(yīng)更大的生態(tài)系統(tǒng)。

......

• 代碼樣式指南

對(duì)于團(tuán)隊(duì)來(lái)說(shuō)，編寫(xiě)清晰，可伸縮，可維護(hù)的代碼至關(guān)重要。但是，如果沒(méi)有提高和強(qiáng)制執(zhí)行代碼一致性的方法，事情就很容易崩潰，并使每個(gè)開(kāi)發(fā)人員都無(wú)法自拔。

代碼樣式指南提供了有關(guān)團(tuán)隊(duì)?wèi)?yīng)如何使用其代碼的約定，模式和示例。這些準(zhǔn)則和約束有助于遏制瘋狂，使團(tuán)隊(duì)可以專注于共同完成出色的工作，而不是重構(gòu)一堆草率，不一致的代碼。

風(fēng)格指南的挑戰(zhàn)

到現(xiàn)在為止，創(chuàng)建設(shè)計(jì)系統(tǒng)的好處應(yīng)該已經(jīng)很清楚了，希望關(guān)于美好的愿景和精美的風(fēng)格指南在您的頭上飛舞。但是要達(dá)到風(fēng)格指導(dǎo)的必殺技，您必須首先克服該領(lǐng)域帶來(lái)的許多險(xiǎn)惡挑戰(zhàn)。

• 時(shí)間問(wèn)題

也許最大，最不可避免的挑戰(zhàn)是樣式指南的創(chuàng)建非常耗時(shí)。我不認(rèn)識(shí)你，但我每天都不上班，不停地?fù)u晃拇指，想知道如何處理我的時(shí)間。我從未見(jiàn)過(guò)一個(gè)沒(méi)有壓力的人，這個(gè)壓力自然導(dǎo)致他專注于主要的Web項(xiàng)目。不幸的是，即使團(tuán)隊(duì)致力于此事業(yè)，積極的時(shí)間表和有限的預(yù)算也會(huì)減慢制作樣式指南所需的精力。

• 維護(hù)與管理

即使分配了時(shí)間和金錢來(lái)建立樣式指南，但如果這些寶貴的工具沒(méi)有給予他們充分發(fā)揮其真正潛力所需的重點(diǎn)，它們也常常會(huì)死在藤蔓上。

維護(hù)和管理策略對(duì)于樣式指南的成功至關(guān)重要。樣式指南將丟入垃圾箱（在所有這些PSD和線框旁邊），并且在沒(méi)有適當(dāng)?shù)牟呗詠?lái)管理，維護(hù)和執(zhí)行它們的情況下被丟棄。

• 風(fēng)格指南結(jié)構(gòu)

為了使樣式指南對(duì)組織中的每個(gè)人都是有用的資源，他們應(yīng)該清楚地傳達(dá)自己的含義和重要性。樣式指南應(yīng)有吸引力，引人注目，可見(jiàn)，清晰且易于使用。如上所述，他們應(yīng)該意識(shí)到，將有大量的觀眾在觀看它們，因此，其目標(biāo)應(yīng)該是盡可能多地歡迎和有用。

尋找界面設(shè)計(jì)方法

為了使我們能夠?yàn)檫@種折衷的網(wǎng)絡(luò)環(huán)境創(chuàng)造體驗(yàn)，我們必須超越自網(wǎng)絡(luò)誕生以來(lái)一直伴隨著我們的頁(yè)面隱喻。值得慶幸的是，組織在Web創(chuàng)建過(guò)程的各個(gè)方面都擁護(hù)模塊化，從而帶來(lái)了更智能的工作和更可持續(xù)的系統(tǒng)。

隨著設(shè)備，瀏覽器和環(huán)境的數(shù)量以驚人的速度持續(xù)增長(zhǎng)，創(chuàng)建周到的，精心設(shè)計(jì)的界面設(shè)計(jì)系統(tǒng)的需求比以往任何時(shí)候都更加明顯。

（所以讓我們）進(jìn)入原子設(shè)計(jì)。

小結(jié)：本章前面主要表達(dá)了我們需要打破固有的頁(yè)面思想，建立組件化，模塊化的前端開(kāi)發(fā)思路，后面講到了一些設(shè)計(jì)師的設(shè)計(jì)思想（由于不是一個(gè)前端人員的主要關(guān)注點(diǎn)，所以大部分我都省略了），這些思想已經(jīng)在多年后的今天得以充分在產(chǎn)品開(kāi)發(fā)中運(yùn)用。最后講到了雖然市面上有很多流行的ui庫(kù)，但是我們也需要設(shè)計(jì)適合自己公司的ui庫(kù)。我個(gè)人認(rèn)為如果做c端項(xiàng)目的話是需要一套風(fēng)格鮮明獨(dú)特的原創(chuàng)ui庫(kù)的，如果只是做一些后臺(tái)管理系統(tǒng)或者其他并不是面向大量用戶的產(chǎn)品，使用現(xiàn)有的成熟的ui庫(kù)是很好的選擇。正如文中所說(shuō)，開(kāi)發(fā)自己的ui庫(kù)需要時(shí)間成本，需要考慮兼容性，需要嚴(yán)格測(cè)試，需要考慮易用性等等，對(duì)于小團(tuán)隊(duì)，特別是沒(méi)有什么中大型公共框架開(kāi)發(fā)經(jīng)驗(yàn)的團(tuán)隊(duì)來(lái)說(shuō)很難。

再及：翻譯到正文才發(fā)現(xiàn)每一章還是很長(zhǎng)的，加之下半年深陷加班泥潭，以我的翻譯水平和時(shí)間精力還是節(jié)選重要內(nèi)容翻譯出來(lái)比較合適吧

又及：文中提到了一個(gè)用戶體驗(yàn)相關(guān)的網(wǎng)站值得關(guān)注 https://www.uie.com/（需要梯子）

下一章 【譯】原子設(shè)計(jì)2——原子設(shè)計(jì)方法論(節(jié)選)
譯文目錄在這里： http://www.itdecent.cn/nb/47456777