學(xué)會良好溝通有助于完美設(shè)計
界面設(shè)計不只是一個學(xué)門,而且是一門結(jié)合設(shè)計、工程以及人體工程的藝術(shù)。大部分的界面設(shè)計都需要至少兩個人的合作:一個界面設(shè)計師、一個界面工程師(如果是設(shè)計網(wǎng)站可能叫做前端工程師、軟體則可能就是軟體設(shè)計師),這兩個人必須不停的彼此溝通,夠?qū)⒈舜说臉?gòu)想幾乎無縫的互相交換,才能設(shè)計出完美的界面作品。
對網(wǎng)站界面設(shè)計師而言,HTML5 與CSS3 的出現(xiàn)已經(jīng)可以取代許多以前只能由繪圖軟體才能畫出的效果,厲害一點的設(shè)計師會開始學(xué)習(xí)把HTML5 當(dāng)畫布、CSS3 當(dāng)畫筆來繪制界面,讓這些界面本身就是以Markup 語言??為基礎(chǔ)。有時候互相理解對方所使用的工具就是最好的溝通方法,同樣的一行HTML Code,在設(shè)計師眼中和在工程師眼中可能是完全不同的東西。
舉例來說:設(shè)計師們已經(jīng)很熟悉Photoshop 那種圖層似的概念(或是Illustrator 那種物件式的),當(dāng)他們看到HTML Code 的時候,幾乎都會把它們轉(zhuǎn)換成畫布上的圖層,設(shè)計師非常善用圖像化的方法來在腦海中想像自己將做出來的東西。而同樣的一段程式碼,對于注重邏輯以及資料關(guān)連性的工程師來說,可能看起來比較像是物件模型中的節(jié)點與資料的關(guān)系。
用雛形溝通
在整個設(shè)計的過程中,最大的困難就是溝通了。最基礎(chǔ)的溝通會從架構(gòu)與整體互動就開始,透過Paper Prototype 的方式,讓所有參與設(shè)計與實作的人都能了解整個界面的操作流程是什么。制作雛形可以快速的收斂大家的構(gòu)想,即使有不同的思考方式,但也可以得到相同的洞察與了解。
許多設(shè)計師在設(shè)計階段所提供的草圖是Photoshop 或Illustrator 檔案,但是這兩種檔案幾乎都是靜態(tài)的,或者是幾個不同狀態(tài)的截圖。舉例來說,如果設(shè)計的是一個多層次的下拉式選單,設(shè)計師可能提供四張圖分別是:選單關(guān)閉、打開選單、打開次選單和滑鼠移到選單上的畫面。也就是說當(dāng)草圖交到工程師手上的時候,他們必須自行想像選單關(guān)閉到打開中間需要什么樣的動畫,淡出(Fade In)嗎?還是往下滑出(Slide Down)呢?彈跳效果(Bounce)?還是設(shè)計師根本只是想要他突然出現(xiàn)?這些都需要更仔細(xì)的對話才能解釋清楚,或者干脆引入更具有互動效果的設(shè)計工具。
最簡單的雛形制作方法就是紙面原型的方式制作雛形,可以考慮使華人之光POP: Prototyping on Paper來快速制作能互動的雛形。另外,Infragistics也是一個很棒的原型工具可以制作出神奇的效果。
制作網(wǎng)站的時候,許多設(shè)計師可以透過簡單的HTML, CSS 以及Javascript 來表現(xiàn)他們的想法,但是制作App 的時候難度就提高了許多。無論如何,因為我們設(shè)計的就是整個互動的效果,偶爾還會加上一些物理性的特效(彈簧、伸縮、漸變等等),采用這些靜態(tài)的方法表示動態(tài)的圖像,代表著溝通總是會有落差。設(shè)計師們也許可以學(xué)習(xí)一些工具,像是前一陣子因為Facebook Home 火紅的Quantz Composer 就是個很容易就可以讓設(shè)計師做出互動效果的工具,或者其實采用Flash 做一點簡單的效果,有個簡單的漸變動畫讓工程師能理解那中間的過程(不是把Flash 當(dāng)做最后的作品,而是當(dāng)成一種Prototyping 與溝通的工具)。
- 目前還沒評論,等你發(fā)揮!