《CSS設計指南》作者Charles Wyke-Smith：技術的目的就是幫助使用者獲得成功（圖靈訪談）

Charles Wyke-Smith一直從事與線上應用相關的媒體相關工作。1980年代，他與人在舊金山共同創辦了PRINTZ Electronic Design公司，當時可是一家全部工作都使用計算機處理的設計工作室。另外，他曾在富國銀行、ESPN電子遊戲擔任領導和顧問工作，在Benefitfocus公司擔任過使用者體驗總監。2009年，他與人合辦了PeopleMatter公司，提供人力資源服務。目前，他是一家新的創業公司Bublish的CEO，這家公司提供圖書策劃等方面的服務。Charles是一位樂手和多本Web開發圖書的作者，除了好評如潮的 《CSS設計指南（第3版）》，他還出版過Codin' for the Web, Scriptin' with AJAX 和 Visual Stylin' with CSS3。

問：《CSS設計指南》毫無疑問是同類書中的經典，你有升級這本書的打算嗎？如果有新版的話，會增加什麼內容？

我很想繼續寫新版的《CSS設計指南》——雖然我現在有很重要的工作任務，但是我一直都在堅持做筆記，可以肯定，大概在明年的時候我會開始寫作下一個版本。下面是我將會加入到新版中的一部分內容：

使用Bootstrap——這個CSS框架能為你節省很多時間，特別是可以讓識別頁面欄的響應式網格更輕鬆地為不同螢幕尺寸設計頁面。Bootstrap還能提供大量的介面元件，比如廣告形式佈局以及覆蓋視窗。

使用Less——前處理器會讓寫CSS和管理CSS變得十分簡單，可以參見我對後面問題的回答。

使用jQuery——為了創造出更加複雜的使用者介面互動以及在頁面和伺服器之間傳遞資料，把jQuery和CSS結合起來是是一種必備技能。

問：在你的書中你曾經說過“曾經的夢想如今已成為現實”這些夢想是什麼？什麼讓CSS3如此強大？對於設計師和程式設計師，這樣的改變意味著什麼？

在CSS進化過程中實現的夢想究竟是什麼？最重要的進展莫過於CSS現在已經可以提供完全把頁面（HTML）結構和式樣（CSS）拆解開來的功能。這種功能使得在響應式設計的過程中，依賴於展示位置（比如不同尺寸的大小螢幕）的HTML可以使用不同的式樣。CSS3同時還提供了精緻的HTML選擇功能。比如，現在可以把CSS定向到列表中的最後一項，所以就可以把元素精確地定位到頁面上，或者可以把多圖展示性地使用在一個元素的背景中，而不需要加入到HTML當中。這就意味著內容現在已經是可以移植的，所以，展示在不同網站的HTML能夠以各不相同的風格呈現出來。這是內容聚合成功的關鍵。

問：網頁設計的思維和程式設計的思維有什麼區別？

設計是為一個問題找到解決方案，而程式設計則是執行那個設計，將其實現。

問：有很多種CSS前處理器，比如Sass和LESS，何時是使用這些工具的最佳時機？什麼時候應該使用純粹的CSS？

使用這些前處理器的合適時機就是現在！它們能為你節省一大把時間，讓你的程式碼可讀性更強而且寫起來也更快。前處理器讓你可以用更簡潔的方式寫CSS，而且可以讓選擇器和HTML的巢狀搭配，所以你能夠輕鬆看到內部的程式。你也可以為你的設計中經常出現的顏色和類定義變數，所以你可以為——比如說框邊界，設定一個單獨的定義。從此你不需要為每個框鍵入式樣，你可以直接使用類的名稱。

問：前處理器的出現是否意味著CSS開發者社群對CSS有所不滿？你認為CSS有哪些地方需要改變？

W3C定義了CSS3可以做什麼，而其他人制造工具讓CSS變得更好用。對於現在流行的前處理器，哪一個最好並沒有共識，但是Less是使用更加廣泛的一個。我認為不滿可以驅動創新，很明顯，Less誕生於“讓寫CSS變得更有效率”這個需求。未來很有可能Less的編碼風格會變成寫CSS的標準方式。

問：對於已經掌握CSS(3)，Sass，Bootstrap，CSS Sprites這些工具的資深前端程式設計師，你建議他們下一步在哪方面提升自己？

我對類似的程式設計師和設計師的建議是，不要只關注你的技能，而是要從全域性思考，關注使用者體驗。諸如程式設計和平面設計這樣的技能雖然重要，但也只是達到你想傳達的體驗的手段。比如說，程式設計師創造的Web頁面總是試圖把所有可以提供的資料都展示給使用者，同時提供很多選項。這只是程式設計師在展示他的技能，而非幫助使用者。對於使用者來說更好的方案，是把任務精心地分割成簡單的步驟，僅僅展示過程中每一步需要的資料。

設計並不僅僅是視覺或者僅僅是編碼——設計是為了解決問題。從這個角度上來說，平面藝術家和程式設計師都是設計師。我希望所有從事Web相關工作的人都用這個方式思考。

在Web上，好的設計意味著讓使用者接觸到內容，以及賦予他們和內容互動的能力（做出選擇，輸入文字，播放視訊，等等）。我們應該關注如何讓使用者達到目的——把任務和內容放在第一位，創造清晰而直觀的工作流，提供可以指導使用者在任務中找到方向的導航。

設計師通常會從平面設計開始，他們挑選顏色，選擇圖片，然後創造Photoshop頁面佈局。程式設計師們通常想要從資料結構建模和編寫程式碼開始。但是更好的方法是從一張空白頁面開始，首先應該組織內容以及通往內容的控制元件，然後加入剛剛好的視覺效果用來展示內容和元素之間的關係，最後，在品牌和風格化的外表上層稍加裝飾。程式設計是在使用者和伺服器之間挪動內容的工作，同時應用控制程式的規則，所以程式設計也是支撐使用者體驗的工作。

換句話說，從理解使用者開始，同時創造出你認為他們想要的體驗。在紙上或者Balsamiq上畫出你的想法，然後找幾位目標使用者，在他們身上做測試。吸收他們的反饋，然後重新構造、重新展示，直到達到你想要的效果。如果你能夠用這種方法溝通你的設計目的，而且使用者對他們所見很感興趣，那麼你就可以開始發展內容了，然後再通過程式碼和設計技巧用最以使用者為中心的方式來傳達內容。利用你的技巧讓使用者達到目的，而非炫技。好的設計是不可見的——使用者不需要思考，而是馬上就理解了他們可以完成的任務，而且在完成任務的過程中，對他們需要傳遞的東西有著充分的控制。

技巧很重要，而且不斷的發展更新你的技巧也很重要，但是真正專業的程式設計師和設計師知道這些技巧的目的都是為了讓使用者獲得成功。

問：你曾在很多不同領域以不同角色工作過。你是一位設計師，諮詢師，一位程式設計師，甚至你曾在人力資源服務業和出版業工作。在這些工作的背後是否有一個共同的興趣支撐著你？這些角色之間的聯絡是什麼？

我每天工作的主題就是讓人們達到目的。有人可能在尋找金融服務，找工作，或者想要寫一本書。如果說我還算成功的話，那就是因為我設計線上產品的能力，在這些產品上人們可以很輕鬆很快捷地做到他們想做的事。我的技巧只是輔助我的工具，在其他任何語境下技巧的價值都微乎其微。我愛學習——如果你停止了學習並不停地重新發明自己，你將永遠不會成功。教育對我來說是需要窮盡一生，每天都要做的工作。

問：電子書市場現在的發展狀況怎麼樣？你對未來的期待是什麼？

電子書一直處在進化的過程中——電子書越來越像Web（當然，電子書其實就是一堆HTML），電子書和Web的發展歷程隨著時間的推進，變得越來越像。紙質書不會消失，就像是電視來了，但是廣播也沒有消失一樣。我所期待的電子書在未來會變得越來越具有互動性，而且作者會持續不斷地更新電子書，而不是像紙質書一樣，出版了之後就不會再改變。

問：作為Bublish的CEO，你們是如何解決圖書市場存在的問題的？你以前的經驗和知識是如何幫助你完成現在的工作的？

今天的作者也是市場專員——他們直接把自己的作品放在亞馬遜和其他圖書零售站點上。他們中的大部分人都沒有出版社和代理商，他們必須要自己寫作，也得自己做推廣。Bublish像這些“創業作者”提供寫作和社會營銷的經驗，幫助他們成功。我以前的角色和經歷幫助我提出正確的問題，這個問題永遠都是：我怎麼讓這些人成功起來？瞭解答案的最好方法就是去問他們自己，所以我需要做很多調查，努力走在市場的前面。如果你開始這樣思考問題，那麼你從事的行業就不那麼重要了——你只需要觀察和聆聽，找到問題，然後你就會發現存在的機會，然後設計解決方案來解決這些問題。我也喜愛書——我是一位熱心的讀者，當然，也是一位作者，所以我對Bublish充滿熱情，我很享受設計網站和編寫使用者介面的過程。

最後，我要向我的中國讀者們問好，感謝你們。得知我的書能在全世界範圍內幫助別人讓我感到無比地高興！

---

更多精彩，加入圖靈訪談微信！