來(lái)源：熊子川
我一直篤信不知道HTML和CSS的體驗(yàn)設(shè)計(jì)師是連磚頭和鋼筋都沒(méi)有摸過(guò)的建筑師，因此在以往的十幾個(gè)項(xiàng)目里雖然總是進(jìn)行策略層的設(shè)計(jì)，但也不忘記鍛煉自己HTML和CSS能力，只有手夠臟才能成為一位好的設(shè)計(jì)師。
最近的討論里，我們總在糾結(jié)于設(shè)計(jì)師和開發(fā)人員無(wú)法相處的話題，其實(shí)答案很簡(jiǎn)單──當(dāng)你沒(méi)有我的生活體驗(yàn)，你如何讓我理解你。在開發(fā)人員那個(gè)充滿邏輯、過(guò)程、抽象、定義的世界里，到底哪個(gè)部分是曾涉足，決定了你是不是一個(gè)足夠理解開發(fā)人員的設(shè)計(jì)師。
于是，我嘗試用一個(gè)設(shè)計(jì)師的語(yǔ)言講前端技術(shù)──計(jì)算機(jī)是如何將你的設(shè)計(jì)轉(zhuǎn)化成計(jì)算機(jī)語(yǔ)言的。
設(shè)計(jì)會(huì)轉(zhuǎn)化成計(jì)算機(jī)能懂的各種元素
你在用Photoshop制作界面時(shí)，會(huì)使用層的概念給例如輸入框、按鈕、下拉等元素進(jìn)行分拆，這些存在于PSD文檔中的元素到了瀏覽器那里，會(huì)被前端工程師變成一個(gè)個(gè)標(biāo)準(zhǔn)的元素，這些元素的組合就形成了DOM結(jié)構(gòu)（Document Object Model），瀏覽器通過(guò)讀取DOM結(jié)構(gòu)生成最后的頁(yè)面。
HTML負(fù)責(zé)骨架CSS負(fù)責(zé)裝飾
這些元素的定義由HTML完成，長(zhǎng)什么樣子，由CSS完成，下面這個(gè)例子里，沒(méi)有經(jīng)過(guò)CSS修飾的DOM結(jié)構(gòu)只剩下HTML構(gòu)成的“骨架”，而加上CSS修飾以后就會(huì)變成設(shè)計(jì)師想要的效果。
你的設(shè)計(jì)就是這樣被使用HTML和CSS變成一個(gè)瀏覽器可以讀取的頁(yè)面的，如果你注意到上面的下拉菜單，作為一個(gè)設(shè)計(jì)師你可能不喜歡這種風(fēng)格，想變成下面這樣的風(fēng)格：
這就會(huì)使CSS渲染很麻煩，因?yàn)镃SS的原料只有那么多種布料和裝飾，你設(shè)計(jì)的東西超過(guò)了CSS能夠提供的效果，就會(huì)增加開發(fā)過(guò)程。但隨著前端技術(shù)的發(fā)展，也不是完全不可能，可是瀏覽器又拖了后腿，各個(gè)版本和“品牌”支持的CSS渲染效果都不一樣，他們要花大量的時(shí)間讓它們所有的表現(xiàn)保持一致，你倒是很輕松的使用你mac上的PS做效果。你知道為啥你的程序員背后抱怨你了嗎？
JavaScript幫助你可以更加豐富地操作這些元素
這樣你就可以生成一個(gè)靜態(tài)的頁(yè)面了，在以前，這就足夠了，通過(guò)一個(gè)靜態(tài)頁(yè)面就可以跟后臺(tái)進(jìn)行交互；但現(xiàn)在，前端的交互行為越來(lái)越豐富，很多交互都放在前臺(tái)進(jìn)行，而不需要到后臺(tái)去。
這就像你買個(gè)包子，你問(wèn)服務(wù)員有沒(méi)有白菜的，服務(wù)員直接告訴你沒(méi)有，她不用跑到廚房去問(wèn)廚師。前臺(tái)交互當(dāng)然不像買包子這樣簡(jiǎn)單，有很多細(xì)節(jié)的交互行為都是由JavaScript完成──這就是JavaScript的意義──它幫助你更好地操作這些元素，根據(jù)需要改變他們的樣式、位置、內(nèi)容、以及增刪。
下面這個(gè)例子是一個(gè)常見(jiàn)的回到頁(yè)首交互細(xì)節(jié)，整個(gè)交互過(guò)程（在線演示在這里）是：
1、在第一頁(yè)下拉；
2、慢慢浮現(xiàn)出一個(gè)按鈕；
3、點(diǎn)擊按鈕回到頁(yè)首；
4、按鈕慢慢消失。
這個(gè)交互就不是HTML和CSS能夠完成的了，當(dāng)然也不是Photoshop能完成的，細(xì)致的設(shè)計(jì)師會(huì)在文檔里寫清楚這個(gè)部分的交互行為，或者使用Axure做一個(gè)原型，但是如果掌握一點(diǎn)點(diǎn)前端技術(shù)，你完全可以把這個(gè)效果寫出來(lái)，前端代碼是與程序員溝通最天然的工具，同時(shí)在Agile UX的環(huán)境里我們鼓勵(lì)設(shè)計(jì)師和前端開發(fā)人員結(jié)對(duì)，一起把這個(gè)交互效果表達(dá)出來(lái)。
在以前，學(xué)習(xí)這些知識(shí)確實(shí)很難，但是前端技術(shù)的發(fā)展使得我們現(xiàn)在可以只掌握一些基礎(chǔ)就能寫出流暢的前端代碼，這就是各種前端框架的興起，比如HTML和CSS的Less、960.gs等，JavaScript里的jQuery、YUI、Prototype，此外，有越來(lái)越多整合的框架將HTML、CSS和JavaScript整合在一起，使設(shè)計(jì)師可以輕松的使用制作高保真原型，例如Twitter推出的Bootstrap以及Zurb的Foundation。
這些框架的存在就是把一些前端交互的現(xiàn)有模式用代碼包裝起來(lái)，就跟你在包子店點(diǎn)包子要3號(hào)套餐一樣，不需要再跟人說(shuō)要什么餡喝什么粥，就說(shuō)“3號(hào)”搞定。這些模式包括：彈出對(duì)話框（Dialog）、標(biāo)簽頁(yè)（Tabs）、下拉（Dropdown）、表單（Forms）、提醒（Tooltips）、警告（Alert）、翻滾（Scroll）、收放（Collapse）、走馬燈（Carousel）、按鈕（Button）、自動(dòng)補(bǔ)全（Auto Complete）等等，你只需要寫一點(diǎn)點(diǎn)代碼就可以叫到包子，對(duì)不起，完成一個(gè)交互場(chǎng)景的設(shè)計(jì)。
學(xué)習(xí)一點(diǎn)點(diǎn)jQuery
jQuery是很多框架的JavaScript基礎(chǔ)框架，比如Bootstrap的JavaScript語(yǔ)法和jQuery基本一致，學(xué)習(xí)一點(diǎn)點(diǎn)jQuery基礎(chǔ)幫助你更好地使用這些。
你需要理解三種基本類型的jQuery元素，對(duì)象（objective）、事件（event）、和方法（method），三種元素的關(guān)系是：
找到某個(gè)對(duì)象，當(dāng)發(fā)生特定事件時(shí)，找到對(duì)自己或另一個(gè)元素做某個(gè)方法；
在這兩個(gè)場(chǎng)景中，都要找對(duì)象、判定某個(gè)特定事件、做方法；那么我們來(lái)看看如何分別做這三件事：
找到一個(gè)對(duì)象的格式為$(“objective”)，括號(hào)里面可以是document也可以是DOM結(jié)構(gòu)中某一個(gè)指定的元素。例如當(dāng)定義$(document)時(shí)指未來(lái)操作的對(duì)象是整個(gè)文檔；當(dāng)定義$(“#division”)時(shí)指未來(lái)操作的對(duì)象是一個(gè)ID叫作division的元素；當(dāng)定義$(this)時(shí)指未來(lái)操作的對(duì)象就是當(dāng)前操作的對(duì)象。
某個(gè)特定事件的格式為event(function(){})，這里的xxx可以是點(diǎn)擊（click）、加載完畢（ready）、鼠標(biāo)懸浮（hover）等等，大括號(hào)里將填入的是要對(duì)自己或另一個(gè)元素做的方法；和之前找到對(duì)象結(jié)合起來(lái)就變成：$(document).ready(function(){……})，意思是當(dāng)文檔加載完畢后執(zhí)行……。
再看執(zhí)行某個(gè)方法，對(duì)某個(gè)元素執(zhí)行方法的格式為.method(……)，根據(jù)方法的不同，括號(hào)里的參數(shù)格式不同。比如說(shuō)要表達(dá)添加一個(gè)新的class名可以寫成.addClass(“newClassName”)；和之前兩個(gè)動(dòng)作結(jié)合起來(lái)就變成：
1 2 3 4 | view plaincopy to clipboardprint?$(document).ready( function(){$("#").addClass("newClassName")} ); |
意思是當(dāng)文檔準(zhǔn)備好時(shí)，找到一個(gè)id叫division的元素，給它加一個(gè)class名。
還可以使這個(gè)過(guò)程變得更復(fù)雜，例如下面的代碼：
1 2 3 4 5 6 7 | view plaincopy to clipboardprint?$(document).ready( function(){ $("button#hello").click( function(){$("body").append("Hello!")} ) ) |
這個(gè)的意思是，當(dāng)文檔準(zhǔn)備好時(shí)，找到一個(gè)id叫hello的按鈕元素，并當(dāng)點(diǎn)擊這個(gè)元素的時(shí)候，在body下添加一個(gè)Hello!的字樣。
jQuery中一些有用的方法和事件
在完成高保真原型時(shí)，我們大部分情況需要的交互行為往往是：點(diǎn)擊/懸停一個(gè)頁(yè)面元素，關(guān)閉/打開/彈出/改變另一個(gè)元素樣式/改變內(nèi)容等等。只需要掌握jQuery中基礎(chǔ)的兩個(gè)觸發(fā)事件click()和hover()，以及addClass()、removeClass()、show()、hide()、append()、text()、attr()六個(gè)基礎(chǔ)方法，就可以搭配jQuery已有框架完成各種交互特效。
我們來(lái)嘗試完成一個(gè)點(diǎn)擊某個(gè)按鈕出現(xiàn)一個(gè)隱藏圖層的代碼：
首先寫HTML，我們需要一個(gè)按鈕和一個(gè)隱藏的文字域：
1 2 3 | view plaincopy to clipboardprint?<button id="open">Open a textpad</button> <textarea id="textpad" style="display:none"></textarea> |
這里省略了CSS渲染的過(guò)程，我們來(lái)寫一段點(diǎn)擊按鈕打開文字域的代碼，先不著急寫代碼，先想想我們要做什么，我們要做下面幾件事情：
1、等待文檔讀取完畢；
2、尋找到這個(gè)按鈕；
3、點(diǎn)擊它；
4、找到這個(gè)隱藏的文字域；
5、把它顯示出來(lái)；
于是我們開始寫程序，第一步等待文檔讀取完畢：
1 2 | view plaincopy to clipboardprint?$(document).ready(function(){}) |
第二步尋找這個(gè)按鈕：
1 2 3 4 5 | view plaincopy to clipboardprint?$(document).ready(function(){ $("#open") } ) |
第三步點(diǎn)擊它：
1 2 3 4 5 | view plaincopy to clipboardprint?$(document).ready(function(){ $(#open).click(function(){}) } ) |
第四步找到目標(biāo)的那個(gè)隱藏文字域：
1 2 3 4 5 6 7 | view plaincopy to clipboardprint?$(document).ready(function(){ $("#open").click(function(){ $("#textpad") }) } ) |
第五步將它顯示出來(lái)：
1 2 3 4 5 6 7 | view plaincopy to clipboardprint?$(document).ready(function(){ $("#open").click(function(){ $("#textpad").show(); }) } ) |
jQuery提供了很多特效的控件幫助你在細(xì)節(jié)上設(shè)計(jì)你的交互行為，比如在代碼中加入fadeIn()：
1 2 3 4 5 6 7 | view plaincopy to clipboardprint?$(document).ready(function(){ $("#open").click(function(){ $("#textpad").fadeIn("slow"); }) } ) |
jQuery以及其他一些框架擁有大量的行為效果插件，可以通過(guò)閱讀API來(lái)了解各種方法的使用規(guī)則，基本思路跟上面這個(gè)簡(jiǎn)單的例子是一致的。
你需要做什么
前端技術(shù)是交互設(shè)計(jì)之外一門相當(dāng)精深的領(lǐng)域，不可能通過(guò)一篇簡(jiǎn)單的博客就能覆蓋到全部，這篇博客的目的是至少當(dāng)你有機(jī)會(huì)和前端開發(fā)人員一起合作的時(shí)候，適當(dāng)一點(diǎn)前端技術(shù)知識(shí)可以幫助你更好的與前端開發(fā)人員進(jìn)行溝通。
很多交互細(xì)節(jié)不是文字或圖片能夠解釋清楚的，雖然使用Axure可以或多或少解決這個(gè)問(wèn)題，但是Axure的存在有時(shí)阻礙了和開發(fā)人員的溝通，因?yàn)檫@不是個(gè)兩種角色都能使用的技能，那么既然現(xiàn)在的前端技術(shù)已經(jīng)大大發(fā)展，為何不嘗試學(xué)習(xí)一些前端技術(shù)，將自己的想法用代碼的形式表現(xiàn)出來(lái)。
這只是拋磚引玉的文章，希望越來(lái)越多的交互設(shè)計(jì)師能夠花一些時(shí)間學(xué)習(xí)一些前端技術(shù)，下面提供的鏈接是一些我經(jīng)常使用的框架和工具。
前端框架
jQuery – 流行框架也是博客使用的框架；
Bootstrap – Twitter出品的框架，包含精美的整套UI解決方面，全面支持Less，各種交互模式插件完整；
Foundation – Zurb出品的前端框架，各種交互控件完整，UI不如Bootstrap精細(xì)；
1140 Css Grid – 配合Responsive Design的CSS框架，優(yōu)于960.gs；
實(shí)用工具
JSFiddle – 很好用的在線HTML+CSS+JS編輯器，支持jQuery和Bootstrap框架；
Pears – 很好用的基礎(chǔ)交互模式HTML和CSS模板。
聯(lián)系客服
