對(duì)網(wǎng)站界面設(shè)計(jì)師而言，HTML5 與CSS3 的出現(xiàn)已經(jīng)可以取代許多以前只能由繪圖軟體才能畫(huà)出的效果，厲害一點(diǎn)的設(shè)計(jì)師會(huì)開(kāi)始學(xué)習(xí)把HTML5 當(dāng)畫(huà)布、CSS3 當(dāng)畫(huà)筆來(lái)繪制界面，讓這些界面本身就是以Markup 語(yǔ)言??為基礎(chǔ)。有時(shí)候互相理解對(duì)方所使用的工具就是最好的溝通方法，同樣的一行HTML Code，在設(shè)計(jì)師眼中和在工程師眼中可能是完全不同的東西。

舉例來(lái)說(shuō)：設(shè)計(jì)師們已經(jīng)很熟悉Photoshop 那種圖層似的概念(或是Illustrator 那種物件式的)，當(dāng)他們看到HTML Code 的時(shí)候，幾乎都會(huì)把它們轉(zhuǎn)換成畫(huà)布上的圖層，設(shè)計(jì)師非常善用圖像化的方法來(lái)在腦海中想像自己將做出來(lái)的東西。而同樣的一段程式碼，對(duì)于注重邏輯以及資料關(guān)連性的工程師來(lái)說(shuō)，可能看起來(lái)比較像是物件模型中的節(jié)點(diǎn)與資料的關(guān)系。

　　用雛形溝通

在整個(gè)設(shè)計(jì)的過(guò)程中，最大的困難就是溝通了。最基礎(chǔ)的溝通會(huì)從架構(gòu)與整體互動(dòng)就開(kāi)始，透過(guò)Paper Prototype 的方式，讓所有參與設(shè)計(jì)與實(shí)作的人都能了解整個(gè)界面的操作流程是什么。制作雛形可以快速的收斂大家的構(gòu)想，即使有不同的思考方式，但也可以得到相同的洞察與了解。

許多設(shè)計(jì)師在設(shè)計(jì)階段所提供的草圖是Photoshop 或Illustrator 檔案，但是這兩種檔案幾乎都是靜態(tài)的，或者是幾個(gè)不同狀態(tài)的截圖。舉例來(lái)說(shuō)，如果設(shè)計(jì)的是一個(gè)多層次的下拉式選單，設(shè)計(jì)師可能提供四張圖分別是：選單關(guān)閉、打開(kāi)選單、打開(kāi)次選單和滑鼠移到選單上的畫(huà)面。也就是說(shuō)當(dāng)草圖交到工程師手上的時(shí)候，他們必須自行想像選單關(guān)閉到打開(kāi)中間需要什么樣的動(dòng)畫(huà)，淡出(Fade In)嗎?還是往下滑出(Slide Down)呢?彈跳效果(Bounce)?還是設(shè)計(jì)師根本只是想要他突然出現(xiàn)?這些都需要更仔細(xì)的對(duì)話才能解釋清楚，或者干脆引入更具有互動(dòng)效果的設(shè)計(jì)工具。

最簡(jiǎn)單的雛形制作方法就是紙面原型的方式制作雛形，可以考慮使華人之光POP: Prototyping on Paper來(lái)快速制作能互動(dòng)的雛形。另外，Infragistics也是一個(gè)很棒的原型工具可以制作出神奇的效果。

制作網(wǎng)站的時(shí)候，許多設(shè)計(jì)師可以透過(guò)簡(jiǎn)單的HTML, CSS 以及Javascript 來(lái)表現(xiàn)他們的想法，但是制作App 的時(shí)候難度就提高了許多。無(wú)論如何，因?yàn)槲覀冊(cè)O(shè)計(jì)的就是整個(gè)互動(dòng)的效果，偶爾還會(huì)加上一些物理性的特效(彈簧、伸縮、漸變等等)，采用這些靜態(tài)的方法表示動(dòng)態(tài)的圖像，代表著溝通總是會(huì)有落差。設(shè)計(jì)師們也許可以學(xué)習(xí)一些工具，像是前一陣子因?yàn)镕acebook Home 火紅的Quantz Composer 就是個(gè)很容易就可以讓設(shè)計(jì)師做出互動(dòng)效果的工具，或者其實(shí)采用Flash 做一點(diǎn)簡(jiǎn)單的效果，有個(gè)簡(jiǎn)單的漸變動(dòng)畫(huà)讓工程師能理解那中間的過(guò)程(不是把Flash 當(dāng)做最后的作品，而是當(dāng)成一種Prototyping 與溝通的工具)。