2016 IxD Awards

2016 IxD Awards 決賽名單 – 跨越軟硬體的服務設計

2016  IxD Awards  決賽名單於11月29號公布了,獎項共分為 “連結 (Connecting)"、"創新 (Disrupting)"、"協助 (Empowering)"、"專注 (Engaging)"、"表達 (Expressing)" 與 “最佳化 (Optimizing)" 六個類別。觀看這次的決賽入圍名單,可以發現不少入圍項目並非侷限於單一硬體或軟體服務,而是為了解決某一種問題所提出的整體方案,這個方案可能跨越線上到線下、軟體到硬體,提供的是一個完整的服務設計理念。以下列舉幾項精彩入圍:

Continue reading

svg 動畫

After Effect 轉 svg 動畫 – 神奇的 bodymovin 插件

在製作網頁的過程中,以往遇到太複雜的動畫時我不會用 css 處理,而是直接轉成 gif 檔,但 gif 檔實在是超級大,如今在螢幕尺寸百家爭鳴的生態之下,更需準備多組大小才能讓動畫看起來銳利。對於這話題,Ivan Wei 寫過一篇文章 Android — 讓 apk 裡的切圖容量減少95%的好方法" 非常詳細的介紹如何運用 svg 處理圖樣 icon,現在我們面對 svg 動畫 而言又有甚麼方案呢? Continue reading

超級瑪莉3D世界的起承轉合 – 林田耕一的設計哲學

超級瑪莉從小到大陪我長大,每次有新版本出來都會迫不及待去買。最近看到了 一篇文章 說任天堂的遊戲設計師在最初設計馬力歐是在網格紙上設計的,近期也把這種方法開放給玩家用,玩家可以直接用《Super Mario Maker》 編輯自己的地圖。看到這種作法小時候剛拿到新遊戲的興奮感又回來了,也讓我非常好奇遊戲設計師到底是怎麼規劃和定位超級瑪莉的?

mario1

Continue reading

如何讓介面中的動畫設計較容易被實現?

animatio

一般而言設計師交接給工程師製作時,除了輸出的圖檔之外還會有一份設計文件,用來交代畫面上的間距、文字、顏色等等資訊,有很多文章都在講解如何寫一份好的設計文件,例如這一篇

隨者設計發展,動畫的重要性也逐漸受到重視,設計大舌頭也特別寫了一篇文章說明動畫效果的重要性: 2015 動畫效果會是介面設計的趨勢嗎?。然而動畫效果較不容易用設計文件說明。

通常設計師會透由原型(prototype)來表達動畫效果,運用像 After Effect、Framer.js、Origami 等等工具製作,但這些工具的產出大多是展示用途,工程師不太能夠直接拿來用, 於是工程師看完設計的動畫之後,還必須自己再用程式寫出那樣的效果。這樣的流程常常會有工程師看到原型後說動畫太複雜做不到,或需要花太多資源去做,以及做出的動畫效果跟原型展示不一致的情況發生。

Continue reading