學習 Framer

設計師 學習 Framer 第一章:前言與觀念

大約去年年中,我開始把 Framer 這套原型製作工具,導入 UI / UX 設計流程中。最主要是它能實現高擬真度,且可運用 Coding 做出許多設計變化(彈性大)。不過,也因為需要一些 Coding 的基礎知識,導致許多設計師不敢接觸,個人覺得有點可惜。所以在 " 設計師 學習 Framer " 這系列裡,我將會從設計師的角度跟大家分享一些學習心得,然後盡可能的把 Coding 這部分降到最低,以利大家學習。

Continue reading

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

animatio

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

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

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

Continue reading