我的 UI/UX 設計入門方式

自從開了這個 BLOG 後,好多人都問我這些關於 UI/UX 設計的技術是從哪裡學到的。就台灣來講這個領域太新了,剛入行的時候只能夠自學,缺少很多資源,通通靠自己摸索,所以我希望能整理出一套系統性的 UI/UX 教育方式,但這需要花費大量的時間,靠下班後的空檔根本不夠,頂多寫寫 BLOG 讓大家加減看。目前我不想把 UI/UX 硬拆成兩塊,雖說這本來就是兩個不同的領域,但世界上所有的事物都是有關聯的,不能說我只想做這個其他連碰都不碰,很快就會陷入窠臼遇到瓶頸。大概是因為我喜歡規劃分析、但又不想放棄能做漂亮炫圖的機會吧。

反應與提示

8.jpg
在易用性原則裡,系統狀態的能見度、辨識而非記憶這兩點與「反應」有關。在操作 App 時,「反應」扮演著重要角色,它有著引導使用者至下一步的功能,幫助使用者理解目前狀況、繼續操作。在 iOS 上,常見的反應有數種:視覺、聽覺、觸覺。點擊某個按鈕,按鈕會變成被擊中凹下去的樣子,輸入正確會聽到叮叮的成功提示音,操作錯誤或失敗手機會震動並聽到嘟嘟的錯誤提示音等等。如果對於 App 的「反應」置之不理,使用者就無法知道自己操作的結果,對於自己的操作產生疑慮、逐漸失去對這個 App 的信賴度。

各種狀態與突發狀況

即使畫了非常精細的 UI FLOW、每一頁 Wireframe 旁也寫上詳盡的註解,但在專案後期 RD 仍是發現許多在前期規畫階段沒有被考慮進去的情況,這是為什麼呢?有一種可能性是漏了思考「各種狀態」和使用者的「突發狀況」。這會導致開發時程延後,因為訂定的規則不夠準確而再次召開討論會議確認細節。甚至發現此路不通但該功能已經做下去了無法修改進退兩難的情況。

Portrait 和 Landscape,談螢幕方向

直式螢幕稱為「Portrait」,橫式螢幕「Landscape」,頁面會依照橫直螢幕不同而改變形式的作法稱之為「Auto Orientation」。不管是 iPhone、iPad、還是 iPod,它們都是長方形的,一般情況下會直式使用,但某些情況就會轉成橫式更為合適,最明顯的例子就是遊戲類。什麼情況下會轉橫使用?橫式和直式的頁面樣子是否會不同?要怎麼調整呢?從 iOS 內建的 App 就可以發現數種切換模式與其代表的功能。

App 切圖檔案命名方式


一個 App 通常會有很多張切圖,不管是 iPhone 需要 1x、2x 圖檔,Android 需要至少 3 種 hdpi、xhdpi、xxhdpi。在龐大的切圖數量下如何讓負責套圖的 RD 快速找到所需圖檔,檔名的命令方式就需要雙方統一格式方便大家作業。

十大易用性原則

身為 RD 的你受過太多 UI 的氣嗎?老是發現邏輯不通需要打掉重練被延誤時程嗎?常被 UI 嫌念理工的沒有美感都不懂嗎?報仇的時間到了。這篇文雖然說是「十大易用性原則」,也可以說得上是:「教你如何捅 UI 」。RD 最擅長講理,就來跟 UI 講理!從易用性下手找 UI 麻煩,沒有幾位 UI 不中刀的…

什麼是 Wireframe ?


老實說我受夠某客戶和某設計公司老是把 Wireframe 喊做 Storyboard 了!每次聽到都要克制翻白眼的欲望。拜託不要開口閉口說「我們很重視 UI、我們很有經驗」,卻連基本名詞都講錯。這跟義大利跟維大力一樣、相差十萬八千里啊!