AM HCI Design Process

2012.06.15 Active

范承宗(設計)說過程
-

UI視覺主題定調

由於我們的app主要功能是訊息的傳遞,決定選用的主題是紙飛機,所以打算整個app的UI都用紙的質感來表現,希望在數位科技的世界中能多一點溫暖平易近人的感覺。



-

偏執與堅持

在UI設計的部分,我們一開始就想堅持不使用任何現有素材,也不拿現有素材來改,希望100%所有視覺看見的每一顆按鈕、每一張背景、每一格動畫都是我們自己親手打造,在這樣的創作過程中,雖然需要耗費的時間比較長,但也因為這樣才讓我們能更自由自在地發揮和嘗試,每完成一顆元件、一個動畫時也非常過癮很有成就感。



-

數位軟體表現紙雕效果
我自己是從小到大都當學藝股長負責做教室裡壁報佈置的人,對於用紙張做紙雕還有一絲絲微薄的記憶,一開始也想過要不要像瘋子一樣UI全都用紙張做成真正的紙雕拍照處理,但想想實在太耗時耗力了,而且以前壁報的經驗是永遠都會不小心手笨剪錯割歪,也永遠都買不到理想顏色的紙張,所以還是用數位軟體來做出那樣的效果吧。



-

傳統紙雕參考資料收集
決定要用紙雕效果來表達之後,我就先去找了一些相關的書來參考,去找了書才發現,「紙雕」這件事還真是專業,有各式各樣的手法和風格跟效果。



-

參考書目:紙雕設計萬象篇 
這本「紙雕設計萬象篇」的風格很討喜可愛,觀察發現在單色紙張周圍會用筆稍微刷上一點點的漸層,增加立體感和豐富感,刷漸層這點在數位軟體中也可以效法。


裡面有許多物件的案例,這些物件的配色很棒,很吸引人目光卻又不會過度鮮豔,我覺得這樣的感覺如果做成UI的按鈕應該會蠻不錯的。



在後面一點的章節開始有完整的構圖案例,這些畫面也給我很多UI元件和背景之間整個配置的啟發,或許也可以在app中做出像這些案例所具有的豐富感和魅力。

在這些案例之外還有製作過程,從中可以學習到在真實紙雕的世界裡是如何分配元件和拆解一張圖的方式,這些也都是能夠用數位化的方式表達,也因為看了幾本書的拆解方式,讓之後在數位軟體中製作的時候省了不少時間更有效率。



-

參考書目:紙雕造形基礎 
這本「紙雕造形基礎」的技術比上一本更豐富更具有難度,以更立體的思維來製作每個元件,上一本比較多都是紙張彎曲,這一本用了許多折曲幾何形的方式構成,不過這個手法要以數位軟體表達複雜度變得更高了,我以數位軟體嘗試過,這本書教的方法在現實中同一片紙做成的,在photoshop得畫4~10個甚至更多圖層才能做得像,所以在UI上我就很少用到這本書的方式了。

這本書還有一個很不賴的地方是有紙雕作的立體字,由於我們的開機畫面等地方也需要作出文字,所以也是很有參考價值,像是立體字的光影效果、投射在背景的影子效果等等,一開始都是參考這本書的案例去模擬出來。

 

-

參考書目:紙雕動物物語 
這本「紙雕動物物語」不同於其他紙雕書,這本有把一隻紙雕動物的每一片元件都拆開的平面線稿圖,數位軟體中要做也是類似這樣子,用貝茲曲線拉線畫出一片一片色塊再進行處理。一方面裡面的動物都長得很傻笨我蠻喜歡的所以就借了。

 

-

參考書目:我的紙雕世界
這本「我的紙雕世界」裡面作品的手法跟前面幾本又不一樣了,前面幾本都是用一張一張堆疊做出層次感,這本有用單一張上面切割做出的特殊效果,像人物衣服的皺褶和馬的身體,這招後來我有用在我們UI的雲朵等東西上。


-

參考書目:周顯宗的摺紙教室 
這本「周顯宗的摺紙教室」裡面都是一個一個步驟的照片,想說紙飛機展開的動畫可以參考,我我有試圖follow他的教學摺恐龍但卡關失敗,我想我們紙飛機動畫得要先摺出來再去想動畫的動作要怎麼拆。



-

參考書目:紙飛機工廠 
我們小組曾經談論到也許之後可以讓使用者選擇紙飛機的樣式,於是我也就好奇地借了這本「紙飛機工廠」,本來想說紙飛機還不橫豎就長差不多,沒想到光是這本書裡面就有n種紙飛機的款式和教學,這本也是後期發展時可以參考的好書。


-

數位軟體模擬紙雕效果
對紙雕的手法和幾種風格有所瞭解之後,開始先以手繪草圖來構思畫面layout、元件設計、元件圖層拆解等等。



最初先不斷嘗試繪製調整出滿意的紙雕雲朵,做過很多嘗試之後終於try出一種滿意的效果,之後繪製其他的部分也就可以follow和複製雲朵上的紙雕效果。



-
結語
其他UI設計和動畫的部分請看之前其他篇的紀錄,這邊就不再重複囉。

這是我第一次參與App設計和UI,也是第一次和資工領域的成員合作,不得不說我們組的資工組員們真的太棒,我們不只是程式寫得差不多之後丟給UI設計去把按鈕美化弄漂亮而已,我們在整個過程中從怎麼操作和互動,到不知道能不能做出來的嘗試,都是設計和資工一起共同討論激盪出來的。

謝謝資工組員們每次當我提出想像中的效果時,第一時間不會用自己以往的經驗去判斷然後拒絕,他們第一時間總不會是拒絕,而是回答說:「這不知道耶我沒做過,好像也沒有印象有App是這樣,不過我們可以想想看怎麼弄,試試看或爬文問人看看能不能做出來。」他們開放而且樂意嘗試的態度讓我們合作得非常愉快和過癮,能和他們一起合作真是非常幸運的事,過程非常開心且充實。

Hsien-Hui Tang

Associate Professor, NTUST, Taipei, Taiwan

DITL