良好的溝通達成完美的設計

介面設計不只是一個學門，而且是一門結合設計、工程以及人因工程的藝術。大部分的介面設計都需要至少兩個人的合作：一個介面設計師、一個介面工程師（如果是設計網站可能叫做前端工程師、軟體則可能就是軟體設計師），這兩個人必須不停的彼此溝通，才能夠將彼此的構想幾乎無縫的互相交換，才能設計出完美的介面作品。

設計師、工程師要了解對方的思考方式

對網站介面設計師而言，HTML 5 與 CSS 3 的出現，已經可以取代許多以前只能由繪圖軟體才能畫出的效果，厲害一點的設計師會開始學習把 HTML 5 當畫布、CSS 3 當畫筆來繪製介面，讓這些介面本身就是以 Markup 語言為基礎。

有時候互相理解對方所使用的工具就是最好的溝通方法，同樣的一行 HTML Code，在設計師眼中和在工程師眼中可能是完全不同的東西。

舉例來說，設計師們已經很熟悉 Photoshop 那種圖層似的概念（或是 Illustrator 那種物件式的），當他們看到 HTML Code 的時候，幾乎都會把它們轉換成畫布上的圖層，設計師非常善用圖像化的方法來在腦海中想像自己將做出來的東西。而同樣的一段程式碼，對於注重邏輯以及資料關連性的工程師來說，可能看起來比較像是物件模型中的節點與資料的關係。

兩種思考方式都有各自的優點以及能夠靈活運用的地方，重點是能夠體會對方是怎麼思考的，尤其是在一起討論介面如何設計實作的時候，有時候也將對方的思考方式納入考慮，會更清楚的知道要如何溝通，甚至用對方的語言描述出自己想要達成的構想。

不要害怕彼此的專業領域，會是設計更成功的關鍵。

用雛形溝通，讓參與計畫的人都能看懂

在整個設計的過程中，最大的困難就是溝通了。最基礎的溝通會從架構與整體互動就開始，透過 Paper Prototype 的方式，讓所有參與設計與實作的人都能了解整個介面的操作流程是什麼。製作雛形可以快速的收斂大家的構想，即使有不同的思考方式，但也可以得到相同的洞察與了解。

許多設計師在設計階段所提供的草圖是 Photoshop 或 Illustrator 檔案，但是這兩種檔案幾乎都是靜態的，或者是幾個不同狀態的截圖。舉例來說，如果設計的是一個多層次的下拉式選單，設計師可能提供四張圖分別是：選單關閉、打開選單、打開次選單和滑鼠移到選單上的畫面。

也就是說當，草圖交到工程師手上的時候，他們必須自行想像選單關閉到打開中間需要什麼樣的動畫，淡出（Fade In）嗎？還是往下滑出（Slide Down）呢？彈跳效果（Bounce）？還是設計師根本只是想要他突然出現？這些都需要更仔細的對話才能解釋清楚，或者乾脆引入更具有互動效果的設計工具。

善用工具製作雛形，別讓溝通有了落差

最簡單的雛形製作方法就是 Storyboard，設計師就像拍電影一樣，幫每個場景畫下細節，然後在每個故事格子旁邊寫筆記，用繪圖或是任何一種方式表達出過場動畫需要的效果，再「面對面」的對工程師解釋他們想要的效果。

如果是採用 Paper Prototype 的方式製作雛形，可以考慮使用華人之光 POP: Prototyping on Paper 來快速製作能互動的雛形。另外，Infragistics 也是一個很棒的 Prototyping 工具可以製作出神奇的效果。

製作網站的時候，許多設計師可以透過簡單的 HTML、CSS 以及 Javascript 來表現他們的想法，但是製作 App 的時候難度就提高了許多。

無論如何，因為我們設計的就是整個互動的效果，偶爾還會加上一些物理性的特效（彈簧、伸縮、漸變等等），採用這些靜態的方法表示動態的圖像，代表著溝通總是會有落差。

設計師們也許可以學習一些工具，像是前一陣子因為 Facebook Home 火紅的 Quantz Composer 就是個很容易就可以讓設計師做出互動效果的工具，或者其實採用 Flash 做一點簡單的效果，有個簡單的漸變動畫讓工程師能理解那中間的過程（不是把 Flash 當做最後的作品，而是當成一種 Prototyping 與溝通的工具）。