頁面的第 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,避開和一堆數值的大混戰,但該知道「為什麼要這樣做」的部份還是要懂。)

動態效果的通靈之路

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

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

UX 不是 Wireframe

哪來有畫 Wireframe 就是有做 UX 的錯覺?UX 不是 Wireframe,使用者體驗為什麼會是線框稿?當然不是啊!很多人以為有畫 Wireframe 就等於有做 UX 了,那整天抱著數據統計寫文件的 UX 設計師在幹嘛?會把有畫 Wireframe 當成有做 UX 的人,合作的 RD 同事通靈技能大概 LV99 點滿了。

Flow Chart 和 UI Flow

快一個月沒有發文了,忙著寫企劃案、做 Prototype、跑實驗生報告。最近要整理大量的 UI Flow,越整理腦袋越像醬糊。就來聊聊 UI FlowFlow Chart 吧。Flow 就是「流程」,UI Flow 是頁面流程,而 Flow Chart 是流程圖,兩者是完全不同的圖表。

手繪 Wireframe 小技巧
手繪 Wireframe 小技巧

群裡有人問起手繪 Wireframe 的工具和方法,我分享下個人經驗。不過現在很少這樣做了,都是鉛筆稿等級就進 Axure 製圖、幾乎沒用到麥克筆。

UI 設計師應該要會寫的文件

身為 UI 設計師,工作內容不是只有做 PSD 和切圖,只會這兩樣的叫美工。基本一位合格的UI設計師必須要具備撰寫文件的能力,文件最低限度需包含:企劃書、規格書、Wireframe、Mockup、切圖、標示文件、UI Kit、UI Pattern、Guideline。

nav 要包在 header 裡?

Html5 有很多新元素,最常用到的就是 nav、header、footer 這三個。不過對於 nav 該放在 header 裡、還是在 header 外,就我學習到、和老公教的是「看情況」。