摘要：?jiǎn)栴A(yù)處理器的出現(xiàn)是否意味著開(kāi)發(fā)者社區(qū)對(duì)有所不滿你認(rèn)為有哪些地方需要改變定義了可以做什么，而其他人制造工具讓變得更好用。對(duì)于現(xiàn)在流行的預(yù)處理器，哪一個(gè)最好并沒(méi)有共識(shí)，但是是使用更加廣泛的一個(gè)。

  
非商業(yè)轉(zhuǎn)載請(qǐng)注明作譯者、出處，并保留本文的原始鏈接：http://www.ituring.com.cn/article/124049

Charles Wyke-Smith一直從事與線上應(yīng)用相關(guān)的媒體相關(guān)工作。1980年代，他與人在舊金山共同創(chuàng)辦了PRINTZ Electronic Design公司，當(dāng)時(shí)可是一家全部工作都使用計(jì)算機(jī)處理的設(shè)計(jì)工作室。另外，他曾在富國(guó)銀行、ESPN電子游戲擔(dān)任領(lǐng)導(dǎo)和顧問(wèn)工作，在Benefitfocus公司擔(dān)任過(guò)用戶體驗(yàn)總監(jiān)。2009年，他與人合辦了PeopleMatter公司，提供人力資源服務(wù)。目前，他是一家新的創(chuàng)業(yè)公司Bublish的CEO，這家公司提供圖書(shū)策劃等方面的服務(wù)。Charles是一位樂(lè)手和多本W(wǎng)eb開(kāi)發(fā)圖書(shū)的作者，除了好評(píng)如潮的 《CSS設(shè)計(jì)指南（第3版）》，他還出版過(guò)Codin" for the Web, Scriptin" with AJAX 和 Visual Stylin" with CSS3。

問(wèn)：《CSS設(shè)計(jì)指南》毫無(wú)疑問(wèn)是同類(lèi)書(shū)中的經(jīng)典，你有升級(jí)這本書(shū)的打算嗎？如果有新版的話，會(huì)增加什么內(nèi)容？

  
我很想繼續(xù)寫(xiě)新版的《CSS設(shè)計(jì)指南》——雖然我現(xiàn)在有很重要的工作任務(wù)，但是我一直都在堅(jiān)持做筆記，可以肯定，大概在明年的時(shí)候我會(huì)開(kāi)始寫(xiě)作下一個(gè)版本。下面是我將會(huì)加入到新版中的一部分內(nèi)容：
  
  
使用Bootstrap——這個(gè)CSS框架能為你節(jié)省很多時(shí)間，特別是可以讓識(shí)別頁(yè)面欄的響應(yīng)式網(wǎng)格更輕松地為不同屏幕尺寸設(shè)計(jì)頁(yè)面。Bootstrap還能提供大量的界面組件，比如廣告形式布局以及覆蓋窗口。
  
  
使用Less——預(yù)處理器會(huì)讓寫(xiě)CSS和管理CSS變得十分簡(jiǎn)單，可以參見(jiàn)我對(duì)后面問(wèn)題的回答。
  
  
使用jQuery——為了創(chuàng)造出更加復(fù)雜的用戶界面交互以及在頁(yè)面和服務(wù)器之間傳遞數(shù)據(jù)，把jQuery和CSS結(jié)合起來(lái)是是一種必備技能。

問(wèn)：在你的書(shū)中你曾經(jīng)說(shuō)過(guò)“曾經(jīng)的夢(mèng)想如今已成為現(xiàn)實(shí)”這些夢(mèng)想是什么？什么讓CSS3如此強(qiáng)大？對(duì)于設(shè)計(jì)師和程序員，這樣的改變意味著什么？

  
在CSS進(jìn)化過(guò)程中實(shí)現(xiàn)的夢(mèng)想究竟是什么？最重要的進(jìn)展莫過(guò)于CSS現(xiàn)在已經(jīng)可以提供完全把頁(yè)面（HTML）結(jié)構(gòu)和式樣（CSS）拆解開(kāi)來(lái)的功能。這種功能使得在響應(yīng)式設(shè)計(jì)的過(guò)程中，依賴(lài)于展示位置（比如不同尺寸的大小屏幕）的HTML可以使用不同的式樣。CSS3同時(shí)還提供了精致的HTML選擇功能。比如，現(xiàn)在可以把CSS定向到列表中的最后一項(xiàng)，所以就可以把元素精確地定位到頁(yè)面上，或者可以把多圖展示性地使用在一個(gè)元素的背景中，而不需要加入到HTML當(dāng)中。這就意味著內(nèi)容現(xiàn)在已經(jīng)是可以移植的，所以，展示在不同網(wǎng)站的HTML能夠以各不相同的風(fēng)格呈現(xiàn)出來(lái)。這是內(nèi)容聚合成功的關(guān)鍵。

問(wèn)：網(wǎng)頁(yè)設(shè)計(jì)的思維和編程的思維有什么區(qū)別？

  
設(shè)計(jì)是為一個(gè)問(wèn)題找到解決方案，而編程則是執(zhí)行那個(gè)設(shè)計(jì)，將其實(shí)現(xiàn)。

問(wèn)：有很多種CSS預(yù)處理器，比如Sass和LESS，何時(shí)是使用這些工具的最佳時(shí)機(jī)？什么時(shí)候應(yīng)該使用純粹的CSS？

  
使用這些預(yù)處理器的合適時(shí)機(jī)就是現(xiàn)在！它們能為你節(jié)省一大把時(shí)間，讓你的代碼可讀性更強(qiáng)而且寫(xiě)起來(lái)也更快。預(yù)處理器讓你可以用更簡(jiǎn)潔的方式寫(xiě)CSS，而且可以讓選擇器和HTML的嵌套搭配，所以你能夠輕松看到內(nèi)部的進(jìn)程。你也可以為你的設(shè)計(jì)中經(jīng)常出現(xiàn)的顏色和類(lèi)定義變量，所以你可以為——比如說(shuō)框邊界，設(shè)置一個(gè)多帶帶的定義。從此你不需要為每個(gè)框鍵入式樣，你可以直接使用類(lèi)的名稱(chēng)。

問(wèn)：預(yù)處理器的出現(xiàn)是否意味著CSS開(kāi)發(fā)者社區(qū)對(duì)CSS有所不滿？你認(rèn)為CSS有哪些地方需要改變？

  
W3C定義了CSS3可以做什么，而其他人制造工具讓CSS變得更好用。對(duì)于現(xiàn)在流行的預(yù)處理器，哪一個(gè)最好并沒(méi)有共識(shí)，但是Less是使用更加廣泛的一個(gè)。我認(rèn)為不滿可以驅(qū)動(dòng)創(chuàng)新，很明顯，Less誕生于“讓寫(xiě)CSS變得更有效率”這個(gè)需求。未來(lái)很有可能Less的編碼風(fēng)格會(huì)變成寫(xiě)CSS的標(biāo)準(zhǔn)方式。

問(wèn)：對(duì)于已經(jīng)掌握CSS(3)，Sass，Bootstrap，CSS Sprites這些工具的資深前端程序員，你建議他們下一步在哪方面提升自己？

  
我對(duì)類(lèi)似的程序員和設(shè)計(jì)師的建議是，不要只關(guān)注你的技能，而是要從全局思考，關(guān)注用戶體驗(yàn)。諸如編程和平面設(shè)計(jì)這樣的技能雖然重要，但也只是達(dá)到你想傳達(dá)的體驗(yàn)的手段。比如說(shuō)，程序員創(chuàng)造的Web頁(yè)面總是試圖把所有可以提供的數(shù)據(jù)都展示給用戶，同時(shí)提供很多選項(xiàng)。這只是程序員在展示他的技能，而非幫助使用者。對(duì)于用戶來(lái)說(shuō)更好的方案，是把任務(wù)精心地分割成簡(jiǎn)單的步驟，僅僅展示過(guò)程中每一步需要的數(shù)據(jù)。
  
  
設(shè)計(jì)并不僅僅是視覺(jué)或者僅僅是編碼——設(shè)計(jì)是為了解決問(wèn)題。從這個(gè)角度上來(lái)說(shuō)，平面藝術(shù)家和程序員都是設(shè)計(jì)師。我希望所有從事Web相關(guān)工作的人都用這個(gè)方式思考。
  
  
在Web上，好的設(shè)計(jì)意味著讓用戶接觸到內(nèi)容，以及賦予他們和內(nèi)容交互的能力（做出選擇，輸入文本，播放視頻，等等）。我們應(yīng)該關(guān)注如何讓用戶達(dá)到目的——把任務(wù)和內(nèi)容放在第一位，創(chuàng)造清晰而直觀的工作流，提供可以指導(dǎo)用戶在任務(wù)中找到方向的導(dǎo)航。
  
  
設(shè)計(jì)師通常會(huì)從平面設(shè)計(jì)開(kāi)始，他們挑選顏色，選擇圖片，然后創(chuàng)造Photoshop頁(yè)面布局。程序員們通常想要從數(shù)據(jù)結(jié)構(gòu)建模和編寫(xiě)代碼開(kāi)始。但是更好的方法是從一張空白頁(yè)面開(kāi)始，首先應(yīng)該組織內(nèi)容以及通往內(nèi)容的控件，然后加入剛剛好的視覺(jué)效果用來(lái)展示內(nèi)容和元素之間的關(guān)系，最后，在品牌和風(fēng)格化的外表上層稍加裝飾。編程是在用戶和服務(wù)器之間挪動(dòng)內(nèi)容的工作，同時(shí)應(yīng)用控制進(jìn)程的規(guī)則，所以編程也是支撐用戶體驗(yàn)的工作。
  
  
換句話說(shuō)，從理解用戶開(kāi)始，同時(shí)創(chuàng)造出你認(rèn)為他們想要的體驗(yàn)。在紙上或者Balsamiq上畫(huà)出你的想法，然后找?guī)孜荒繕?biāo)使用者，在他們身上做測(cè)試。吸收他們的反饋，然后重新構(gòu)造、重新展示，直到達(dá)到你想要的效果。如果你能夠用這種方法溝通你的設(shè)計(jì)目的，而且使用者對(duì)他們所見(jiàn)很感興趣，那么你就可以開(kāi)始發(fā)展內(nèi)容了，然后再通過(guò)代碼和設(shè)計(jì)技巧用最以用戶為中心的方式來(lái)傳達(dá)內(nèi)容。利用你的技巧讓用戶達(dá)到目的，而非炫技。好的設(shè)計(jì)是不可見(jiàn)的——用戶不需要思考，而是馬上就理解了他們可以完成的任務(wù)，而且在完成任務(wù)的過(guò)程中，對(duì)他們需要傳遞的東西有著充分的控制。
  
  
技巧很重要，而且不斷的發(fā)展更新你的技巧也很重要，但是真正專(zhuān)業(yè)的程序員和設(shè)計(jì)師知道這些技巧的目的都是為了讓用戶獲得成功。

問(wèn)：你曾在很多不同領(lǐng)域以不同角色工作過(guò)。你是一位設(shè)計(jì)師，咨詢師，一位程序員，甚至你曾在人力資源服務(wù)業(yè)和出版業(yè)工作。在這些工作的背后是否有一個(gè)共同的興趣支撐著你？這些角色之間的聯(lián)系是什么？

  
我每天工作的主題就是讓人們達(dá)到目的。有人可能在尋找金融服務(wù)，找工作，或者想要寫(xiě)一本書(shū)。如果說(shuō)我還算成功的話，那就是因?yàn)槲以O(shè)計(jì)線上產(chǎn)品的能力，在這些產(chǎn)品上人們可以很輕松很快捷地做到他們想做的事。我的技巧只是輔助我的工具，在其他任何語(yǔ)境下技巧的價(jià)值都微乎其微。我愛(ài)學(xué)習(xí)——如果你停止了學(xué)習(xí)并不停地重新發(fā)明自己，你將永遠(yuǎn)不會(huì)成功。教育對(duì)我來(lái)說(shuō)是需要窮盡一生，每天都要做的工作。

問(wèn)：電子書(shū)市場(chǎng)現(xiàn)在的發(fā)展?fàn)顩r怎么樣？你對(duì)未來(lái)的期待是什么？

  
電子書(shū)一直處在進(jìn)化的過(guò)程中——電子書(shū)越來(lái)越像Web（當(dāng)然，電子書(shū)其實(shí)就是一堆HTML），電子書(shū)和Web的發(fā)展歷程隨著時(shí)間的推進(jìn)，變得越來(lái)越像。紙質(zhì)書(shū)不會(huì)消失，就像是電視來(lái)了，但是廣播也沒(méi)有消失一樣。我所期待的電子書(shū)在未來(lái)會(huì)變得越來(lái)越具有交互性，而且作者會(huì)持續(xù)不斷地更新電子書(shū)，而不是像紙質(zhì)書(shū)一樣，出版了之后就不會(huì)再改變。

問(wèn)：作為Bublish的CEO，你們是如何解決圖書(shū)市場(chǎng)存在的問(wèn)題的？你以前的經(jīng)驗(yàn)和知識(shí)是如何幫助你完成現(xiàn)在的工作的？

  
今天的作者也是市場(chǎng)專(zhuān)員——他們直接把自己的作品放在亞馬遜和其他圖書(shū)零售站點(diǎn)上。他們中的大部分人都沒(méi)有出版社和代理商，他們必須要自己寫(xiě)作，也得自己做推廣。Bublish像這些“創(chuàng)業(yè)作者”提供寫(xiě)作和社會(huì)營(yíng)銷(xiāo)的經(jīng)驗(yàn)，幫助他們成功。我以前的角色和經(jīng)歷幫助我提出正確的問(wèn)題，這個(gè)問(wèn)題永遠(yuǎn)都是：我怎么讓這些人成功起來(lái)？了解答案的最好方法就是去問(wèn)他們自己，所以我需要做很多調(diào)查，努力走在市場(chǎng)的前面。如果你開(kāi)始這樣思考問(wèn)題，那么你從事的行業(yè)就不那么重要了——你只需要觀察和聆聽(tīng)，找到問(wèn)題，然后你就會(huì)發(fā)現(xiàn)存在的機(jī)會(huì)，然后設(shè)計(jì)解決方案來(lái)解決這些問(wèn)題。我也喜愛(ài)書(shū)——我是一位熱心的讀者，當(dāng)然，也是一位作者，所以我對(duì)Bublish充滿熱情，我很享受設(shè)計(jì)網(wǎng)站和編寫(xiě)用戶界面的過(guò)程。

最后，我要向我的中國(guó)讀者們問(wèn)好，感謝你們。得知我的書(shū)能在全世界范圍內(nèi)幫助別人讓我感到無(wú)比地高興！