不給退訂的東森購物電子報
不給退訂的東森購物電子報

2017.07.31 更新:可以退訂了,多了一個「取消訂閱」的選項。

我被東森購物電子報整到已經有種「在這裡購物是我的錯」的感覺了。不想讓人退訂電子報就說啊!做這種浪費大家時間的設計…

自學 UI/UX 各階段心路分享
自學 UI/UX 各階段心路分享

收到很多剛踏入 UI/UX 這個領域的學生或設計師傳訊,他們迷惘,並且擔心自己的未來…我又不是神怎麼會知道你的未來是什麼?只能分享自己自學 UI/UX 各階段的心路歷程供參考了。

先瞭解使用者操作,還是先畫 Wireframe?
先瞭解使用者操作,還是先畫 Wireframe?

設計 UI 的思考順序各位覺得該是什麼樣子的呢?

  1. 先出 Wireframe,再來想使用者會怎麼操作。
  2. 先確認使用者會怎麼使用產品功能,再來思考 Wireframe 怎麼畫。
習慣用 Photoshop 畫 Mockup 的理由
習慣用 Photoshop 畫 Mockup 的理由

繪製 Mockup 的工具,目前戰最兇的應該就是 PS 和 Sketch 吧,在課堂上有學員問了這個問題。我自己是 Photoshop 派的,會推薦初學者學習的也絕對是 Photoshop。

UI 設計師看 Auto Layout
UI 設計師看 Auto Layout

我買了 Simon Ng 寫的 iOS 9 App程式設計實力超進化實戰攻略 (Beginning iOS 9 Programming with Swift) ,學習怎麼用 Xcode 和 Swift 做 App。

這本書非常推薦設計師和完全不懂程式的初學者購買,前幾章都在講 Xcode 的 GUI 操作和實例,跟著範例自己做個會動的頁面出來很有成就感,能學到很多。

UI/UX 工作的職責劃分
UI/UX 工作的職責劃分

網路上對於 UI 和 UX 的謬談 這篇留言數量頗多,其中一則留言我另開這篇文來回答。

這張圖是 Dan Saffer 畫的,指的是 UX 包含那些範圍,可以看到並沒有「UI」的圓圈。

頁面的第 6 種狀態:極限狀態

文件這回事我一直有種「永遠寫不完」的感覺,尤其是 Wireframe,把 Wireframe 當成幾個框框幾個圈圈加幾條線就搞定的文件,這樣的難度和隨手畫個井字遊戲有什麼不同?只要會畫圈圈叉叉直線橫線就能畫 Wireframe?

[翻譯] 如何修正壞 UI 一文中有提到 5 種狀態。事實上我覺得 Z 大提出的第 6 種狀態也該被納入考量。

  • 理想狀態(Ideal State)
  • 空白狀態(Empty State)
  • 極限狀態(Maximum State)«« 第 6 種狀態
  • 錯誤狀態(Error State)
  • 局部資料狀態(Partial State)
  • 載入中狀態(Loading State)

每個頁面在 Wireframe 階段都必須考慮這 6 種狀態,好,那狀態考慮完了也設計好了,要怎麼和專案成員溝通,確保他們都知道該頁面在各種狀態下的變化?

無緣的 HTC VIVE,選錯活動平台
無緣的 HTC VIVE,選錯活動平台

(這是 WTF 文)

在 FB 上看到有朋友分享這個畫面,於是進了活動報名頁面 ,竟然不是 KKTIX、活動通或是玩體驗,是個新建的小平台,HTC 這麼大間,還以為會找較知名的活動平台合作,好,這不重要,重要的是我得新建立一個帳號。

UI 設計師容易忽略的現實

「這樣做比較漂亮啊!」
「這樣做比較美啊!」
「使用者喜歡這樣子啊!」

就我觀察到的狀況,設計師是群非常容易忽略現實的生物,僅次於 PM,好歹 PM 勉強還有「專案管理」、「抓時程」的概念,許多設計師連什麼是專案都不懂。

(設計師指 UI 設計師,我懶得打這麼多字。)

Daily UI,100天的挑戰
Daily UI,100天的挑戰

應該是從這位設計師開始的,他很努力地做了 100 Days UI 的網站。挑戰連續 100 天的 UI 設計,圖面水準品質都很高。於是有了 Daily UI 的網站。

不要用平面設計的思維做 UI
不要用平面設計的思維做 UI

UI 是「使用者介面」,UI 設計指的是「設計使用者介面這回事」。設計介面不是只有出張美美的圖就結束,這樣和平面設計沒有差別,也正是為什麼 RD 會說「你用平面設計的思維在做 UI」。

怎麼和 RD 配合製作 UI Animation

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

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