HTML+CSS體驗設計師:前端技術和架構與工具

文章描述：HTML+CSS體驗設計師:前端技術和架構與工具。

我一直篤信不知道HTML和CSS的體驗設計師是連磚頭和鋼筋都沒有摸過的建築師，因此在以往的十幾個項目裡雖然總是進行策略層的設計，但也不忘記鍛煉自己HTML和CSS能力，只有手夠髒才能成為一位好的設計師。

最近的討論裡，我們總在糾結於設計師和開發人員無法相處的話題，其實答案很簡單──當你沒有我的生活體驗，你如何讓我理解你。在開發人員那個充滿邏輯、過程、抽象、定義的世界裡，到底哪個部分是曾涉足，決定了你是不是一個足夠理解開發人員的設計師。

於是，我嘗試用一個設計師的語言講前端技術──電腦是如何將你的設計轉化成電腦語言的。

設計會轉化成電腦能懂的各種元素

你在用Photoshop製作介面時，會使用層的概念給例如輸入框、按鈕、下拉等元素進行分拆，這些存在於PSD文檔中的元素到了瀏覽器那裡，會被前端工程師變成一個個標準的元素，這些元素的組合就形成了DOM結構（Document Object Model），瀏覽器通過讀取DOM結構產生最後的頁面。

HTML負責骨架CSS負責裝飾

這些元素的定義由HTML完成，長什麼樣子，由CSS完成，下面這個例子裡，沒有經過CSS修飾的DOM結構只剩下HTML構成的“骨架”，而加上CSS修飾以後就會變成設計師想要的效果。

你的設計就是這樣被使用HTML和CSS變成一個瀏覽器可以讀取的頁面的，如果你注意到上面的下拉式功能表，作為一個設計師你可能不喜歡這種風格，想變成下面這樣的風格：

這就會使CSS渲染很麻煩，因為CSS的原料只有那麼多種布料和裝飾，你設計的東西超過了CSS能夠提供的效果，就會增加開發過程。但隨著前端技術的發展，也不是完全不可能，可是瀏覽器又拖了後腿，各個版本和“品牌”支援的CSS渲染效果都不一樣，他們要花大量的時間讓它們所有的表現保持一致，你倒是很輕鬆的使用你mac上的PS做效果。你知道為啥你的程式員背後抱怨你了嗎？

JavaScript協助你可以更加豐富地操作這些元素

這樣你就可以產生一個靜態頁面了，在以前，這就足夠了，通過一個靜態頁面就可以跟後台進行互動；但現在，前端的互動行為越來越豐富，很多互動都放在前台進行，而不需要到後台去。

這就像你買個包子，你問服務員有沒有白菜的，服務員直接告訴你沒有，她不用跑到廚房去問廚師。前台互動當然不像買包子這樣簡單，有很多細節的互動行為都是由JavaScript完成──這就是JavaScript的意義──它協助你更好地操作這些元素，根據需要改變他們的樣式、位置、內容、以及增刪。

下面這個例子是一個常見的回到頁首互動細節，整個互動過程（線上示範在這裡）是：

1. 在第一頁下拉；
2. 慢慢浮現出一個按鈕；
3. 點擊按鈕回到頁首；
4. 按鈕慢慢消失。

這個互動就不是HTML和CSS能夠完成的了，當然也不是Photoshop能完成的，細緻的設計師會在文檔裡寫清楚這個部分的互動行為，或者使用Axure做一個原型，但是如果掌握一點點前端技術，你完全可以把這個效果寫出來，前端代碼是與程式員溝通最天然的工具，同時在Agile UX的環境裡我們鼓勵設計師和前端開發人員結對，一起把這個互動效果表達出來。

在以前，學習這些知識確實很難，但是前端技術的發展使得我們現在可以只掌握一些基礎就能寫出流暢的前端代碼，這就是各種前端架構的興起，比如HTML和CSS的Less、960.gs等，JavaScript裡的jQuery、YUI、Prototype，此外，有越來越多整合的架構將HTML、CSS和JavaScript整合在一起，使設計師可以輕鬆的使用製作高保真原型，例如Twitter推出的Bootstrap以及Zurb的Foundation。

這些架構的存在就是把一些前端互動的現有模式用程式碼封裝裝起來，就跟你在包子店點包子要3號套餐一樣，不需要再跟人說要什麼餡喝什麼粥，就說“3號”搞定。這些模式包括：彈出對話方塊（Dialog）、標籤頁（Tabs）、下拉（Dropdown）、表單（Forms）、提醒（Tooltips）、警告（Alert）、翻滾（Scroll）、收放（Collapse）、走馬燈（Carousel）、按鈕（Button）、自動補全（Auto Complete）等等，你只需要寫一點點代碼就可以叫到包子，對不起，完成一個互動情境的設計。

學習一點點jQuery

jQuery是很多架構的JavaScript基礎架構，比如Bootstrap的JavaScript文法和jQuery基本一致，學習一點點jQuery基礎協助你更好地使用這些。

你需要理解三種基本類型的jQuery元素，對象（objective）、事件（event）、和方法（method），三種元素的關係是：

找到某個對象，當發生特定事件時，找到對自己或另一個元素做某個方法；

在這兩個情境中，都要找對象、判定某個特定事件、做方法；那麼我們來看看如何分別做這三件事：

找到一個對象的格式為$(“objective”)，括弧裡面可以是document也可以是DOM結構中某一個指定的元素。例如當定義$(document)時指未來操作的對象是整個文檔；當定義$(“#division”)時指未來操作的對象是一個ID叫作division的元素；當定義$(this)時指未來操作的對象就是當前操作的對象。

某個特定事件的格式為event(function(){})，這裡的xxx可以是點擊（click）、載入完畢（ready）、滑鼠懸浮（hover）等等，大括弧裡將填入的是要對自己或另一個元素做的方法；和之前找到對象結合起來就變成：$(document).ready(function(){……})，意思是當文檔載入完畢後執行……。

再看執行某個方法，對某個元素執行方法的格式為.method(……)，根據方法的不同，括弧裡的參數格式不同。比如說要表達添加一個新的class名可以寫成.addClass(“newClassName”)；和之前兩個動作結合起來就變成：

view plaincopy to clipboardprint?

1. $(document).ready(
2. function(){$("#").addClass("newClassName")}
3. );

意思是當文檔準備好時，找到一個id叫division的元素，給它加一個class名。

還可以使這個過程變得更複雜，例如下面的代碼：

view plaincopy to clipboardprint?

1. $(document).ready(
2. function(){
3. $("button#hello").click(
4. function(){$("body").append("Hello!")}
5. )
6. )

這個的意思是，當文檔準備好時，找到一個id叫hello的按鈕元素，併當點擊這個元素的時候，在body下添加一個Hello!的字樣。

jQuery中一些有用的方法和事件

在完成高保真原型時，我們大部分情況需要的互動行為往往是：點擊/懸停一個頁面元素，關閉/開啟/彈出/改變另一個元素樣式/改變內容等等。只需要掌握jQuery中基礎的兩個觸發事件click()和hover()，以及addClass()、removeClass()、show()、hide()、append()、text()、attr()六個基礎方法，就可以搭配jQuery已有架構完成各種互動特效。

我們來嘗試完成一個點擊某個按鈕出現一個隱藏圖層的代碼：

首先寫HTML，我們需要一個按鈕和一個隱藏的文字域：

view plaincopy to clipboardprint?

1. <buttonid="open">Open a textpadbutton>
2. <textareaid="textpad"style="display:none">textarea>

這裡省略了CSS渲染的過程，我們來寫一段點擊按鈕開啟文字域的代碼，先不著急寫代碼，先想想我們要做什麼，我們要做下面幾件事情：

1. 等待文檔讀取完畢；
2. 尋找到這個按鈕；
3. 點擊它；
4. 找到這個隱藏的文字域；
5. 把它顯示出來；

於是我們開始寫程式，第一步等待文檔讀取完畢：

view plaincopy to clipboardprint?

1. $(document).ready(function(){})

第二步尋找這個按鈕：

view plaincopy to clipboardprint?

1. $(document).ready(function(){
2. $("#open")
3. }
4. )

第三步點擊它：

view plaincopy to clipboardprint?

1. $(document).ready(function(){
2. $(#open).click(function(){})
3. }
4. )

第四步找到目標的那個隱藏文字域：

view plaincopy to clipboardprint?

1. $(document).ready(function(){
2. $("#open").click(function(){
3. $("#textpad")
4. })
5. }
6. )

第五步將它顯示出來：

view plaincopy to clipboardprint?

1. $(document).ready(function(){
2. $("#open").click(function(){
3. $("#textpad").show();
4. })
5. }
6. )

jQuery提供了很多特效的控制項協助你在細節上設計你的互動行為，比如在代碼中加入fadeIn()：

view plaincopy to clipboardprint?

1. $(document).ready(function(){
2. $("#open").click(function(){
3. $("#textpad").fadeIn("slow");
4. })
5. }
6. )

Open a textpad

jQuery以及其他一些架構擁有大量的行為效果外掛程式，可以通過閱讀API來瞭解各種方法的使用規則，基本思路跟上面這個簡單的例子是一致的。

你需要做什麼

前端技術是互動設計之外一門相當精深的領域，不可能通過一篇簡單的部落格就能覆蓋到全部，這篇部落格的目的是至少當你有機會和前端開發人員一起合作的時候，適當一點前端技術知識可以協助你更好的與前端開發人員進行溝通。

很多互動細節不是文字或圖片能夠解釋清楚的，雖然使用Axure可以或多或少解決這個問題，但是Axure的存在有時阻礙了和開發人員的溝通，因為這不是個兩種角色都能使用的技能，那麼既然現在的前端技術已經大大發展，為何不嘗試學習一些前端技術，將自己的想法用代碼的形式表現出來。

這隻是拋磚引玉的文章，希望越來越多的互動設計師能夠花一些時間學習一些前端技術，下面提供的連結是一些我經常使用的架構和工具。

前端架構

jQuery – 流行架構也是部落格使用的架構；

Bootstrap – Twitter出品的架構，包含精美的整套UI解決方面，全面支援Less，各種互動模式外掛程式完整；

Foundation – Zurb出品的前端架構，各種互動控制項完整，UI不如Bootstrap精細；

1140 Css Grid – 配合Responsive Design的CSS架構，優於960.gs；

工具 + 生產力

JSFiddle – 很好用的線上HTML+CSS+JS編輯器，支援jQuery和Bootstrap架構；
Pears – 很好用的基礎互動模式HTML和CSS模板。