試用:Flinto for Mac
試用:Flinto for Mac

Prototype 工具滿山滿谷一直生,昨天 App Store 新上架一款叫做「Flinto 」的 Prototype 工具。抱持著 你花錢買這工具是想解決什麼問題?沒有?你買它幹嘛? 的心情,本來想裝死,但應台灣設計師 Teresa 要求,我試玩了下寫心得分享,要不要掏 NT2,990 元出來見人見智了。

怎麼和 RD 配合製作 UI Animation

昨天貼的動態效果通靈文在粉絲團釣出幾位 RD 分享經驗。在講怎麼和 RD 配合製作 UI Animation 前,先來看 Rplus Chen 推薦的這篇勸世文 Stop Gratuitous UI Animation ,這篇文在呼籲大家不要為了炫而炫,少用莫名奇妙的動態特效

(本文為個人筆記,我都用 Hype3 直接產出 Prototype 和 JS,避開和一堆數值的大混戰,但該知道「為什麼要這樣做」的部份還是要懂。)

動態效果的通靈之路

課堂上我出了一項練習,在講完 Wireframe 怎麼畫、包含哪些元素、說明文字怎麼寫後,拿了 Dribbble 上漂亮的 Mockup 當範例,請學員畫出 Wireframe。在台上看得出學員們滿不在乎以為小菜一碟的表情,但當我要求下拉選單、特效之類所有「輸入、運作、輸出」等邏輯條件都要寫成說明文字後,台下表情從傻眼變成惶恐,一副大難臨頭死了要怎麼寫的臉。(從台上看大家的表情變化超有趣。)

現在很流行「動態效果」啊,好多教學教你用 AE 做動畫。是啦動效好炫好漂亮,弄個 Demo 影片交給 RD,完全沒想過 「輸入、運作、輸出」 等條件,是要 RD 看著影片照抄練滿通靈 Lv.99 嗎?

用 Hype3 做 Prototype:基礎過場


動態效果、轉場動畫對UI的戲份越來越重…其實一直都很重只是大多用在遊戲上,功能型 App 運用這種技巧最近越吃越兇,且製作真正能裝在手機、拿在手上操作的擬真 Prototype 對不會寫 Code 的設計師來說有難度。我找到好用的方式可以解決這個問題:Hype3+Frameless

這篇是最簡單的過場設定、最偷吃步、不需要技術,只要會寫簡報 PTT 或是 Keynote 就做的出來,所以連 Planner 和 PM 也保證上手無問題。

從 Yep! 中學習 Animation

又是看了某篇文章,然後有感而發寫了分析筆記。UI 和資訊業一樣瞬息萬變,眨眼就從擬物風進化到扁平+動態特效,總覺得自己追的挺辛苦的。推薦設計師們都訂一下 Medium 的 RSS,常常有好文章可以讀,英文跟我一樣破爛可以靠 Google 的整頁翻譯(遮臉)。感謝優設網的 子木 常翻譯好文章(有時候我也會扔英文文章壓搾他)。