2014年6月29日 星期日

Goolge 與動畫師合作的互動動畫技術

  在 Google I/O 2014 開發者大會上有個有趣的專案,他們找來迪尼的資深手繪動畫師 Glen Keane 合作,利用 Spotlight 技術,製作一部用手機看的 2D"互動動畫"。在發表會上分享了一年多來的合作過程,之中有許多有趣的互動。Glen Keane 親臨現場示範畫動畫給程式人看,最後播放了一段還沒有互動的動畫版本。



  Spotlight 是由 Google 和許多動畫師一起開發出來的互動動畫呈現技術,專門用於手機,概念是想把手機當作是個看出去虛擬動畫世界的窗戶,讓觀看者可以自由自在地探索動畫世界;實際上手機就是扮演著虛擬環境中的攝影機,藉由移動手機來改變觀看角度,所有動畫都是即時運算的 (real time),其實本質上更接近一款遊戲的架構,也與拍攝阿凡達時卡麥隆導演所拿的虛擬攝影機概念上十分類似。

Google Spotlight Stories 官方網站

  Google 程式設計師與動畫師們共同完成了兩部動畫:Wind Day、Buggy Night,這兩部動畫皆是 3D 動畫,使用模仿 2D 的質感,下面是實際在手機上互動觀看的影片:






  Google 程式設計師們與 Glen Keane 這次的挑戰是要做 2D 動畫,由於手機即時 3D 動畫(遊戲)所使用的是每秒 60 格, Glen Keane 得手繪每秒 60 格的動畫,有些部分還得畫多個視角的畫面,工作量十分龐大,Glen Keane 畫完之後交由程式人員將 2D 畫面放置到 3D 環境中,目前此專案還沒完成,所以發表會最後只播了無互動的版本,期待完成的作品,手上有 Android 手機的人,不仿也試試看前兩部有趣的小作品吧。

Google Play:Motorola Spotlight Player

2013年6月11日 星期二

極簡平面介面的故事 ( iOS 7 與 Windows 8 的設計交鋒)

  就在2013年6月11號的凌晨,iPhone的作業系統 iOS7 發表了!這次史無前例的改掉了萬年如一的介面設計。自從iPhone第一次上市以來,一路由1代演進到6代,功能越來越強大,但介面始終沒變過了6年,如今終於換了一個全新的設計風格,這樣的大改變究竟是好是壞呢?讓我們繼續探討下去。


iOS1~6 的仿實物質感風格 (Skeuomorphic Design)

  賈伯斯和他的得意手下 Scott Forstall(前行動產品開發主管),帶頭開始使用仿實物質感風格的設計語言(Skeuomorphic Design),並且設計了一套準則取名為 Aqua,就是"水"的意思,因為大量地使用像水一般的半透明、陰影、反光等效果,首次出現在 Mac OSX 系統,得到了廣大的歡迎,之後所有 Apple 產品的介面也都應用了這種設計風格,往後更是加入了更多種物體的質感。

  這種設計風格特色就是大量使用現實物體的質感,例如水滴、麻布、金屬髮絲紋...等等。在官方的軟體中更是卯足全力去模仿實際的物體,像是 iBooks 就有著和真實書櫃一般的介面,點進去後也有像書一般的操作畫面;備忘錄就像一般書店裡買到的記事本。

  由於這種效果大量地使用陰影、反光,使得畫面看起來格外閃亮,看起來討喜極了!大多數的民眾十分喜歡,由於是模仿實際的物品,所以更有一份熟悉感、安全感,用起來也十分開心。


Windows Aero 風格

  連微軟也在 Windows Vista 和 7 版本也發展出了類似的半透明設計介面,名叫 "Aero"。尤其是霧玻璃的效果吸引使用者的目光,這贏得了不少掌聲。這時候大概是這種精緻型的設計大放異彩的時代。


極簡平面風格崛起 Windows 8 (Metro)

  雖然仿實物質感的風格令大眾喜愛,但在介面設計師的領域中卻不是這麼回事,網路上處處可以看見不少文章都在批評這種設計風格。其實市場上很早就吹起了極簡平面設計的風,只是還沒那麼普及,常見於設計領域相關的事物中,但遲早會成為主流這是肯定的,只是沒有人想到居然是微軟帶頭起義!

  由於原本壟斷智慧型手機市場的微軟,短時間內整片江山被整座搬走,於是想要砍掉重練,打造全新的作業系統,當然也要有一個全新的觸控介面。當紅的實物質感風格是蘋果所創,所以跟在創始人後面走永遠無法超越,於是微軟下了一個豪賭,找來了一批全新的年輕設計師,想要打造一個全新、完全不同的設計語言。

  這群才華洋溢的設計師從地鐵裡,簡單、明確、清楚的號誌中取得了靈感,並且將這套設計風格命名為 Metro(地鐵),也創了一套專門搭配的字體 Segoe UI (就如同蘋果的御用字體 Myriad Pro 一樣)。之後因為版權問題而改名為 Windows 8 Style,但下文還是使用 Metro 來介紹。

  微軟的 Metro 風格完完全全地和蘋果 Aqua 背道而馳,設計準則中明確規定了:不可加上不必要的反光、不可加陰影,不使用圓角,不使用漸層,只用基本的色塊,一切極簡至上。說穿了就是徹底的減法。並且大膽的將標題字放到誇張大,看起來就像是一本風格前衛的雜誌。其中為人所讚揚的是左右滑動的操作方式,讓人知道原來用拇指左右滑動比上下捲動更方便,這之後也影響了許多手機介面設計,這次iOS7中也能到看一些足跡。

從前被笑稱是毫無美感的宅宅 Windows,現在搖身一變成為了前衛的型男。

  後來這種風格也應用到了 Windows 8 上頭,Windows 8 上的視窗都沒有陰影、也取消掉半透明的玻璃質感,一切都是簡單的色塊,重點全部聚焦在資訊上。所有東西看起來十分大器、清楚、簡潔。微軟就像是豪賭一般,完全和之前受大眾歡迎的設計風格唱反調,走出自己的一條路,而且應用在最多人使用的電腦上。


Metro 成功嗎?

  以個人的角度來說,我是十分肯定 Metro 的,微軟終於創立的自己的設計語言,而且比起舊有的設計風格來說,十分前衛俐落,所以我才買了 Windows Phone (哈!)。但大眾呢?其實 Windows Phone 和 Windows 8 販售了一段時間之後,大眾普遍的反應是不好的,多數人覺得不怎麼好看,我對此現象感到十分好奇,所以為此研究了一番,並且詢問了許多人。


Metro 的失敗:設計師與民眾的美感定義不同

  調查之後發現從事視覺藝術的工作者,普遍對 Metro 的評價沒那麼糟,但在其他大眾眼裡並不討喜。為何會這樣呢?因為 Metro 本身是一種徹底的減法,從事設計相關的人,對於視覺的加減法十分敏銳,現在生活中充斥著,太多的加法,每樣東西都在爭奇鬥艷,拼命的加上更多裝飾以博得關注,但所謂物極必反,近代的設計潮流推崇的是減法,捨去不必要的東西,只留下最單純直接的美感。所以 Metro 在多數的設計工作者眼裡,是不錯的設計。

  但一般大眾呢?很現實的,一般大眾的美感和設計師的美感價值觀並不一樣,多數人還是喜歡華麗精緻的外觀,習慣了刻意裝飾的按鈕。就如同一般人喜歡色彩鮮艷的照片,而設計師通常更喜歡黑白照片道理一樣。所以 Metro 在一般人眼裡總有些不自在,少了熟悉的物體質感,全部變成了冷冰冰的色塊,熟悉感沒了,沒了陰影和突起效果的按鈕,令人有種不安全、不踏實、沒有質感的感覺。

「總有種不踏實的感覺。」這是目前我從網路上看遍了一般人對 Windows 8 的使用感想後,覺得最為一針見血的。也是大眾對 Metro 的直接感覺。

這篇中談論的是介面設計風格的問題,Windows 8 的失敗還有更大部分是在於操作方面,但這就不是本文要比較的部分了。


iOS7 也走向平面化設計風格

  早在這次發表的多個月前,就已經有小道消息傳出 iOS7 的介面設計會走向極簡平面化的風格,這讓不少人跌破眼鏡。但分析起蘋果公司的人事異動,就會看出端倪,從前推崇仿實物質感風格的兩個人:賈伯斯、Scott Forstall,前者過世了,後者跟團隊不合而離開,換上了Jonathan Ive來擔任首席設計師。他以前就在會議上提出對這種設計風格的不滿過,果然新官剛上任就馬上改掉了這種設計風格。


換上平面風格的理由

  Jonathan Ive 身為蘋果首席設計師的地位就如同設計界的教皇一樣,當然不是因為自己的喜好而改,他說明了採用平面風格的理由:由於早期大眾還不習慣智慧型手機的軟體,所以採用了仿實物的風格來引導大眾使用,像是書本的介面,大眾就能很清楚知道可以左右翻頁,但現在已經沒有這個問題了,大家很習慣現代手機軟體的操作方式。並說:「仿實物的設計比較經不起時代的考驗。」

  其實蘋果的軟體早在多年前就漸漸地走向平面風格,從各個版本的 iTunes 就可以看出端倪。


蘋果詮釋的平面介面風格

  今天我們終於看到了傳言已久的"平面化"設計界面,從圖像上看來,果然平面了很多,沒這麼閃亮了,有種簡單又繽紛的感覺。但也聽到不少人抱怨:「比較沒質感了。」 和完全極簡的 Windows 8 (Metro)來做對比,蘋果依然保留了漸層顏色、圓角、半透明、陰影,只是讓程度變小了。由於保留了這些特色,讓新介面不至於讓人感覺太陌生,多數人在第一眼看到的反應是驚奇的 (遠少於當初看到 Windows 8 的負面反應)。


總結

  這次 iOS7 的平面化介面由於還沒上市,所以不太確定未來的評價如何,但就單一個晚上的反應普遍是還不錯的。 Windows 8 (Metro) 之所以失敗,因為走得太遠了,減去了太多大眾所熟悉喜歡的東西,變得令人覺得冷漠、沒安全感。有了的前車之鑑,相信蘋果不會重蹈微軟的錯誤。雖然"精緻"還是大眾最喜歡的風格,但極簡化的設計是已大時代的潮流,究竟 iOS7 能否走出讓大眾都能接受的路呢?就待未來的評價去證明了。(但這次的風格是否有點像 Google 近期的設計風格呢?:p)

延伸閱讀:

2013年5月12日 星期日

Flash 常用程式碼快速產生工具



以往在 Flash ( ActionScript 3.0 ) 裡要增加一個按鈕

必須先寫上冗長的事件偵聽(addEventListener),再新增一個 function

之後才能開始寫按下後真正要做的事

如果想做精緻一點的互動元件、而且元件數量很多,這個過程就會變得十分繁瑣

於是這個 Flash 的方便小工具就誕生了

有以下功能:

  • 滑鼠點擊事件
  • 滑鼠移入事件
  • 滑鼠移出事件
  • ENTER_FRAME 迴圈事件
  • 鍵盤按下事件
  • TweenLite.to (需有TweenLite檔案)
  • 載入 SWF 檔
  • 滑鼠拖曳物件
  • Timer計時器
  • 選取多物件時,可以選擇是否要整合到同一個function裡 (Individual / All in one)
  • 產生符合場景大小的方形
  • 產生空白的影片元件 (多用於當作動態產生元件的 container)


(備註:所有程式碼都會產生在第一個圖層的第一影格)









安裝方法:

  1. 下載完檔案後,解壓縮,將 SWF 檔放到下方資料夾中:(Windows 7)

    C:\Users\你的使用者名稱\AppData\Local\Adobe\Flash CS6\zh_TW\Configuration\WindowSWF\

    ( AppData資料夾是隱藏的,進了使用者名稱資料夾後,路徑自己加上 \AppData 按 Enter 即可進去 )

  2. 重開 Flash
  3. 在Flash的工具列 --> 視窗 --> 其他面板 --> GrassTools


檔案下載:http://vealab.com/works/flashgrasstools/GrassTools.zip

2013年3月17日 星期日

PhotoGrid 相片編輯App (WindowsPhone)





第一次嘗試做手機 App,這是一個十分簡單又好用的相片軟體軟體

可以隨時隨地調整框線、顏色、花紋、濾鏡效果!

每個樣式都是精心挑選過的,所以怎麼做都好看。

但目前只有在 Windows Phone 上架,有 Windows Phone 的人可以下載來玩玩!

PhotoGrid 更多詳細介紹和下載

2011年9月9日 星期五

iPad Light Paint 3D



用iPad來畫3D的光影像不是我發明的,網路上已有非常多作品了。例如

原理很簡單,就是讓 iPad 播放文字由前到後的截面影片,同時緩緩移動,再配合相機長曝光即可。

有興趣的人可以 Youtube 搜尋:"iPad Light Paint"

不太清楚別人是怎麼做出那段截面影片的(可能是做26個2D截面影片),但現在有個 iPad app 直接可以幫你做

只要輸入文字,它就會產生一段截面的影片,十分方便!App示範影片

但幾乎都是文字,所以想說來嘗試看看真正的 3D 物件。



(Frustum:平截投影示意圖) 上圖引用於 http://paulbourke.net/miscellaneous/frustum/

利用用 3D 攝影機的 Near Clip Plane 和 Far Clip Plane 似乎可以達到。

 Near Clip Plane:是攝影機所能看到最近的距離,近於這個距離的東西就不會被算出來。

 Far Clip Plane :是攝影機所能看到最遠的距離,遠於這個距離的東西就不會被算出來。

所以直接 Key 上面這兩項的參數就可以有剖面的動畫了。



為了調整方便,用了兩個平面來代表最近和最遠。

這樣直接 Key 平面的位置就方便多了!

算出來的影片:(前2秒空白是去按快門的預留時間,曝光 10 秒)




有了影片之後,放到 iPad 上播放並緩緩移動,同時用長曝光攝影,就會得到3D的光影像了!



2011年8月17日 星期三

Nodify





一開始是在試作 Photoshop 中的色彩範圍選取功能,成功了之後,忽然想加上些圓圈看看,後來又把圓圈連線起來。

就成了常見的節點連線的畫面,有興趣的人可以搜尋 " Node Garden "。

這次將節點集中到某個色彩區域,點和線的顏色使用原本的圖片上的色彩,就形成了滿有趣的畫面。

使用的是 WPF(C#)





第二天為了實驗多一點效果,做了一個介面。後來想試試看串成連續的影片,於是加上了批次算圖的功能。

又自拍了一些影片來作測試,看起來還滿有趣的。



建議開 720P (線條比較清楚一些)

(有個小技巧的地方在於:每一張並不是全部重畫,與上一張相同範圍的點會留在原地,所以畫面比較不會一直亂跳動。)




2011年2月24日 星期四

VScanner 掃描、分割的好夥伴

一次奇妙的機會下去當一天的文書工讀生,大部分的工作是打字、核對資料和掃描發票。

發票一共有上百張,每一次都放入一張進掃描-->"預視"-->等待-->框選-->掃描-->等待-->下一張,這樣反覆交替。

就算一次把把多張一起掃,到繪圖軟體裡剪裁時,還是得一張一張剪,一張一張存,實在有點耗損青春。

於是這個 VScanner 的構想就浮現出來了。


「 VScanner 可以一次掃描所有東西之後,快速選取、直接自動分開儲存各個部分。」

用起來十分方便容易,比起一張一張掃描應該快上不少。

具體的操作看下面的影片就能了解了:




做文書工作的人,可能常常要掃描很多份證件之類的,這就會是個很方便的工具。


「什麼人做什麼樣的程式。」是我常常拿來開玩笑的一句話。

每次做完一個程式時,最後我都會多一個步驟叫做"貼心化",這個步驟有時候還更花時間

就待有緣人去體會了。


下載:

  VScanner 下載 (Vista & Window7)

  VScanner_xp 下載 (xp)