我一直篤信不知道HTML和CSS的體驗設(shè)計師是連磚頭和鋼筋都沒有摸過的建筑師，因此在以往的十幾個項目里雖然總是進(jìn)行策略層的設(shè)計，但也不忘記鍛煉自己HTML和CSS能力，只有手夠臟才能成為一位好的設(shè)計師。
最近的討論里，我們總在糾結(jié)于設(shè)計師和開發(fā)人員無法相處的話題，其實答案很簡單──當(dāng)你沒有我的生活體驗，你如何讓我理解你。在開發(fā)人員那個充滿邏輯、過程、抽象、定義的世界里，到底哪個部分是曾涉足，決定了你是不是一個足夠理解開發(fā)人員的設(shè)計師。
于是，我嘗試用一個設(shè)計師的語言講前端技術(shù)──計算機(jī)是如何將你的設(shè)計轉(zhuǎn)化成計算機(jī)語言的。
你在用Photoshop制作界面時，會使用層的概念給例如輸入框、按鈕、下拉等元素進(jìn)行分拆，這些存在于PSD文檔中的元素到了瀏覽器那里，會被前端工程師變成一個個標(biāo)準(zhǔn)的元素，這些元素的組合就形成了DOM結(jié)構(gòu)(Document Object Model)，瀏覽器通過讀取DOM結(jié)構(gòu)生成最后的頁面。
這些元素的定義由HTML完成，長什么樣子，由CSS完成，下面這個例子里，沒有經(jīng)過CSS修飾的DOM結(jié)構(gòu)只剩下HTML構(gòu)成的“骨架”，而加上CSS修飾以后就會變成設(shè)計師想要的效果。
你的設(shè)計就是這樣被使用HTML和CSS變成一個瀏覽器可以讀取的頁面的，如果你注意到上面的下拉菜單，作為一個設(shè)計師你可能不喜歡這種風(fēng)格，想變成下面這樣的風(fēng)格：
這就會使CSS渲染很麻煩，因為CSS的原料只有那么多種布料和裝飾，你設(shè)計的東西超過了CSS能夠提供的效果，就會增加開發(fā)過程。但隨著前端技術(shù)的發(fā)展，也不是完全不可能，可是瀏覽器又拖了后腿，各個版本和“品牌”支持的CSS渲染效果都不一樣，他們要花大量的時間讓它們所有的表現(xiàn)保持一致，你倒是很輕松的使用你mac上的PS做效果。你知道為啥你的程序員背后抱怨你了嗎?
這樣你就可以生成一個靜態(tài)的頁面了，在以前，這就足夠了，通過一個靜態(tài)頁面就可以跟后臺進(jìn)行交互;但現(xiàn)在，前端的交互行為越來越豐富，很多交互都放在前臺進(jìn)行，而不需要到后臺去。
這就像你買個包子，你問服務(wù)員有沒有白菜的，服務(wù)員直接告訴你沒有，她不用跑到廚房去問廚師。前臺交互當(dāng)然不像買包子這樣簡單，有很多細(xì)節(jié)的交互行為都是由JavaScript完成──這就是JavaScript的意義──它幫助你更好地操作這些元素，根據(jù)需要改變他們的樣式、位置、內(nèi)容、以及增刪。
下面這個例子是一個常見的回到頁首交互細(xì)節(jié)，整個交互過程(在線演示在這里)是：
在第一頁下拉;
慢慢浮現(xiàn)出一個按鈕;
點擊按鈕回到頁首;
按鈕慢慢消失。
這個交互就不是HTML和CSS能夠完成的了，當(dāng)然也不是Photoshop能完成的，細(xì)致的設(shè)計師會在文檔里寫清楚這個部分的交互行為，或者使用Axure做一個原型，但是如果掌握一點點前端技術(shù)，你完全可以把這個效果寫出來，前端代碼是與程序員溝通最天然的工具，同時在Agile UX的環(huán)境里我們鼓勵設(shè)計師和前端開發(fā)人員結(jié)對，一起把這個交互效果表達(dá)出來。
在以前，學(xué)習(xí)這些知識確實很難，但是前端技術(shù)的發(fā)展使得我們現(xiàn)在可以只掌握一些基礎(chǔ)就能寫出流暢的前端代碼，這就是各種前端框架的興起，比如HTML和CSS的Less、960.gs等，JavaScript里的jQuery、YUI、Prototype，此外，有越來越多整合的框架將HTML、CSS和JavaScript整合在一起，使設(shè)計師可以輕松的使用制作高保真原型，例如Twitter推出的Bootstrap以及Zurb的Foundation。
這些框架的存在就是把一些前端交互的現(xiàn)有模式用代碼包裝起來，就跟你在包子店點包子要3號套餐一樣，不需要再跟人說要什么餡喝什么粥，就說“3號”搞定。這些模式包括：彈出對話框(Dialog)、標(biāo)簽頁(Tabs)、下拉(Dropdown)、表單(Forms)、提醒(Tooltips)、警告(Alert)、翻滾(Scroll)、收放(Collapse)、走馬燈(Carousel)、按鈕(Button)、自動補(bǔ)全(Auto Complete)等等，你只需要寫一點點代碼就可以叫到包子，對不起，完成一個交互場景的設(shè)計。
jQuery是很多框架的JavaScript基礎(chǔ)框架，比如Bootstrap的JavaScript語法和jQuery基本一致，學(xué)習(xí)一點點jQuery基礎(chǔ)幫助你更好地使用這些。
你需要理解三種基本類型的jQuery元素，對象(objective)、事件(event)、和方法(method)，三種元素的關(guān)系是：
找到某個對象，當(dāng)發(fā)生特定事件時，找到對自己或另一個元素做某個方法;
在這兩個場景中，都要找對象、判定某個特定事件、做方法;那么我們來看看如何分別做這三件事：
找到一個對象的格式為$(“objective”)，括號里面可以是document也可以是DOM結(jié)構(gòu)中某一個指定的元素。例如當(dāng)定義$(document)時指未來操作的對象是整個文檔;當(dāng)定義$(“#division”)時指未來操作的對象是一個ID叫作division的元素;當(dāng)定義$(this)時指未來操作的對象就是當(dāng)前操作的對象。
某個特定事件的格式為event(function(){})，這里的xxx可以是點擊(click)、加載完畢(ready)、鼠標(biāo)懸浮(hover)等等，大括號里將填入的是要對自己或另一個元素做的方法;和之前找到對象結(jié)合起來就變成：$(document).ready(function(){……})，意思是當(dāng)文檔加載完畢后執(zhí)行……。
再看執(zhí)行某個方法，對某個元素執(zhí)行方法的格式為.method(……)，根據(jù)方法的不同，括號里的參數(shù)格式不同。比如說要表達(dá)添加一個新的class名可以寫成.addClass(“newClassName”);和之前兩個動作結(jié)合起來就變成：
推薦閱讀
尼爾森：一季度全球互聯(lián)網(wǎng)廣告支出同比增12%
北京時間7月10日晚間消息，尼爾森的最新數(shù)據(jù)顯示，由于拉美和中東/非洲市場的強(qiáng)勁增長，第一季度全球互聯(lián)網(wǎng)廣告支出同比增長了12%。 第一季度，全球市場廣告支出同比增長3.1%。除雜志之外，其他每一種媒體渠道的廣告>>>詳細(xì)閱讀
本文標(biāo)題：<b>網(wǎng)站運(yùn)營：體驗設(shè)計師該學(xué)習(xí)的一點前端技術(shù)</b>
地址：http://www.sh-jijian.com/a/22/20120711/74718.html
網(wǎng)友點評
精彩導(dǎo)讀
科技快報
品牌展示