《CSS設計指南》做者Charles Wyke-Smith：技術的目的就是幫助用戶得到成功

非商業轉載請註明做譯者、出處，並保留本文的原始連接：http://www.ituring.com.cn/article/124049

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充滿熱情，我很享受設計網站和編寫用戶界面的過程。

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

---

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