AM HCI Design Process

CON+ 獲得 SDN 國際服務設計大賽學生組 Winner
More

2012.05.24 Class Review

今天是倒數最後一周,Demo秀前的最後一次上課,今天主要是各組將目前的進度跟大家分享。
-
這是我們的UI flow,UI flow除了在概念階段能讓我們釐清功能與操作之外,在後面執行過程與分工合作上更是扮演著非常重要的角色,是每個成員在合作過程中溝通上一個很重要的依據。



這是目前初步以photoshop模擬的各主要頁面的完稿。

設計成員針對開機動畫的設計,先以photoshop將畫面構圖給精準完稿之後,再進一步思考動態效果的呈現方式。為了讓人看見的時候能夠眼睛為之一亮,只是短短2秒半的動畫,我們盡力去追求讓它能有精緻又Q彈的效果,因此我們將元件拆得非常細,光是雲就拆了10個圖層並分別設置動畫,掉著字的線條隨之墜落也是一條一條分開設定動畫,設計成員其處女座極度偏執龜毛的個性在2秒半不過一眨眼的時間之中發揮得淋漓盡致。




飛機在空中飛行的部分,設計成員和資工成員先針對之前討論過的做法去嘗試。



為了旋轉的時候能夠有立體變化的效果,設計成員嘗試了兩種方式,第一種是折一架小飛機,放在酒瓶上以錄影方式旋轉一圈,再利用軟體逐步等速截圖,截圖出來再一張一張丟進photoshop貼材質和調整,最後再進AE設定和調整。



第二種方式是將其中三個重要角度的紙飛機圖片直接以AE設定和調整。



兩種方式做出的動態效果如下:





最後兩種效果都不夠完美滑順,所以決定兩種都放棄不用了,和資工成員討論後,先以單張靜態圖片移動的方式,是目前時間內我們能夠達到感受最好的效果,日後有時間的話我們將再嘗試以3D的方式繪製再到AE貼材質,會旋轉改變透視雖然只是不到一秒的瞬間,但是能夠帶來的精緻感受一定非常吸引人。