動態效果的通靈之路

  • UI 設計
  • 更新:2025-01-26
  • 初版:2015-08-10

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

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

UI 入門班的 30 位學員應該徹底感受到什麼叫「通靈」了,相信他們不會再讓 RD 腦補操作,起碼會思考觸發條件。(這就是平面設計師和 UI 設計師在思考模式上最大的差別。)

如果依照現在大多數的動效教學,用 AE 產了個影片叫 RD 一模一樣照做,那和去 App Store 上下載 App 叫 RD 照抄一個有什麼不同?

「這個要啪一下翻轉,然後這個要咻~地跑到這邊,之後這個要啵~原地放大…」 你真的知道自己在講什麼嗎?(我好想拍下聽到設計師講這段話,負責寫 Code 的 RD 表情照片。)

動態效果明明有非常多種和 RD 合作的方式,最常見的卻是最後一項。

  1. 內建過場動畫、特效。
  2. 逐格動畫。
  3. Gif 或影片檔。
  4. 套用現成動態效果程式庫。
  5. 自己寫程式。
  6. 使用有開發者模式的動畫工具。
  7. 產出展示影片叫 RD 通靈。

如果連 Wireframe 「說明文字」要寫什麼內容都不知道,請各 PM 和 RD 勸退自家設計師不要跳下去搞動態特效。動態效果要通靈的部份比起普通的操作要多太多了啊!一個 App 沒有動態效果不會怎麼樣的。
.
.
.

對了,我很常聽到 PM 說他想透過動態效果讓使用者體驗更好。

你想用動態效果解決什麼問題?

想用動態效果解決使用者體驗設計不佳的問題?

可是使用者體驗不佳的問題根本不是出在動態效果啊!

產品在一開始規劃的策略面部分就有問題了,才會導致使用者體驗不佳,那為什麼預期加上動態效果就能導正錯誤規劃?

.
.
.

有人問什麼是通靈…大概就像是 「我不知道產品是什麼、也沒有文字,但我需要海報和 DM,你先出幾版讓我看看」 這樣子。

不知道設計卡在哪?

👉 第一次來?從這裡開始

下面這些文章,從不同角度整理那些容易被忽略的地方

wave
UI 設計需求變多了,為什麼工作卻更難找?
UI 設計需求變多了,為什麼工作卻更難找?

UI 設計師還有未來嗎?
AI 會不會把我們的飯碗端走?
市場變化、工具進化,這份工作會消失,還是轉型求生?
來聊聊 UI 設計的未來命運!

為什麼你的 UI 讓人找不到重點?看看你的衣櫃就知道
為什麼你的 UI 讓人找不到重點?看看你的衣櫃就知道

你的衣櫃是整齊分類,還是塞到找不到衣服?
其實,資訊架構(IA)就像收納術,分類對了,使用者就能輕鬆找到所需內容,UI 設計也是一樣的道理!

測試:你對線框圖的了解有多深?

Wireframe 不是美感設計,而是 UI 的骨架。
還沒定好結構就談視覺?
就像地基沒打好,直接裝潢一樣危險!

需求與功能的微妙差異,你真的了解嗎?
需求與功能的微妙差異,你真的了解嗎?

餓了只能吃飯?
當然不!
需求是「想被滿足」,功能則是「如何滿足」。
搞懂這個差異,才能設計出真正解決用戶問題的產品!

Akane Lee

Akane Lee

我是 Akane Lee,10 年 UI/UX 設計教學,帶過 1000+ 學員擺脫焦慮,找出人生方向。不只聊設計,也教你怎麼少繞遠路,摔坑也知道怎麼自己爬起來。

Comments

wave
comments powered by Disqus

Press ESC to close