UI 是「使用者介面」,UI 設計指的是「設計使用者介面這回事」。設計介面不是只有出張美美的圖就結束,這樣和平面設計沒有差別,也正是為什麼 RD 會說「你用平面設計的思維在做 UI」。
平面設計和 UI 設計最簡單易懂的差別就是一個會動、另一個不會動。
淡入淡出、往左邊飛、往右邊翻頁之類的動態效果。這就是「會動」了?動態效果不過是平面設計師眼裡的「會動」,和 UI 設計師、RD 眼裡的「會動」完全是兩回事,UI 設計的「會動」特指「行為」,包含使用者的行為、介面的行為、系統的行為。
舉例
同樣的一項產品,目標族群不同,產品外觀也會不同;拿給不同的人使用,也會得到不同的結果。甚至連任務目標(使用者想透過產品完成什麼事)都會不一樣。
比如這款給嬰幼兒訓練抓握力、色彩、形狀、推理能力用的積木。
(圖片出處
)
到了這部電影裡,積木變成「證明喪屍有基本推理思考能力的手段」,而不是訓練他的道具。
(取自電影 惡靈古堡3:大滅絕)
即使行為相同,使用情境完全不同,操作的目的或動機也完全不一樣。
別忘了下一秒積木就被嘗試錯誤的喪屍給拆了,所以設計給喪屍用和給嬰兒用的是不是應該要不太一樣?起碼要堅固一點吧…
(以上來亂的請不要認真,我一直覺得這幕非常有喜感…)
使用者的行為
使用者是誰?會怎麼操作?在什麼情境下操作?操作的任務與目的?
不同使用者有不同的操作習慣、不同的情境、基於不同的動機下進行相似的產品操作步驟,所以在設計一款產品前,UI 設計師會先搞懂目標族群。這一點在許多平面設計師上也能看到他們會進行類似的詢問…宣傳嬰幼兒產品的海報總不能和賣運動用品的 DM 用同樣顏色吧。
但平面設計師不太會去考慮「使用者怎麼操作」這個問題,他們的平面成品在大部份情況下也不太會被操作,所以在成品上只看得到「視覺設計」。
「為什麼 App 上要放 6pt 的中文字?」
「因為畫面這樣看起來比較精緻啊~」
若使用者是老年人呢?使用者在什麼情況下會使用這款 App ?如果是公車或捷運上會晃動的地點呢?平面設計師不會考慮到使用者怎麼操作,他們理解需配合目標族群不同改變設計,但不太理解情境、操作的任務指的是什麼。(或者是他們理解,但覺得美美的畫面比使用者好不好用更重要。)
同樣都是計算機,一般人買賣東西算價錢、和工程型,兩者會相同嗎?就算是望遠鏡,也分成看星星、打鳥、偷窺之類很多方向啊。
介面的行為
引導使用者操作並完成任務的手段
介面常常和互動相提併論,使用者會透過操作介面、依據介面的引導完成任務。滑鼠移上去要變色、動態效果、進度條、Alert 等等,都屬於介面的行為。
平面設計不會有滑鼠移上去跳選單出來,或是操作錯誤冒出提示訊息,更不會有下載檔案的情況。所以他們很習慣無視「提示使用者」、「引導操作」這兩大介面設計的重點。
介面除了互動之外,還包含「資訊架構」,也就是分類、標籤、導覽、搜尋。這 4 項在視覺設計上佔的比例不大,吃的是使用者的思考邏輯:使用者要透過什麼方式找到他想要的資訊?資訊架構在整理內容(圖文影音),用使用者能理解的思考邏輯把內容組織化。
不管是 App 或是 Web,表皮上構成的元素就是影音、圖片、文字等內容,視覺設計往往只考慮這些元素的排版、呈現樣式。所以就變成公家機關網站…該有的都有,但永遠找不到目標物。假如「那層皮」經過設計長的美美的,但內容沒有整理過,使用者還是大海撈針,猜不透啊猜不透。
要如何在短時間內引導使用者取得他想要的內容是介面設計思考的重點,絕對不是那層皮畫得美不美。
許多設計師抱持舊有習慣,無視資訊架構的存在,認為這是 RD 或 PM 的工作範圍與自己無關,設計師只要產出美美的圖、顧好視覺設計就好,其他如專案流程或 RD 辦不辦得到能不能實現這個設計的可行性管它去死。
系統的行為
程式與資料的運作邏輯
區分平面設計師和 UI 設計師最簡單的方法就是問「資料怎麼來?」
我超愛問這個問題,呆在現場的不知道怎麼回答的還有意識到自己在做 UI,會翻白眼的都是半途轉行跑去做 UI 又不太想學的資深設計師(或是狀況外的菜鳥),他們不覺得「資料」在自己要考量的工作範圍內,非常大氣地無視「資訊架構」的存在。(這裡的資深指的不是能力,只是在這行「坐」得比較久。)
以目前台灣的介面設計非常狹隘地限定在 App 和 Web 上,這兩者常常需要和工程師合作,就得考慮資料來源的問題。平面設計不需要接觸資訊架構,如果保留這種思維到 UI 設計上,被問到「資料怎麼來?」就翻白眼心裡 OS 關我屁事也是很正常的心態。
為什麼 UI 設計師需要知道資料來源?舉個簡單的例子…
使用者行為:逛網拍打發時間。
介面行為:顯示商品列表。
系統行為:抓取商品資料。
使用者做了某項操作但 App 沒有任何反應,會不會覺得 App 壞了?假如資料非內建需要從網路下載,從網路抓取資料的同時需不需要提示使用者「系統現在正在執行某事」?提示使用者 App 正常運作中,只是動作比較慢。
那 UI 設計師是不是需要知道圖片是內建還是從網路抓取?假如 icon 是內建的、商品圖片要透過網路下載,商品圖片讀取中的狀態是不是要跟使用者講一聲免得他以為壞了?
舉個更簡單的例子…
在 iPhone App 使用「華康少女體」。
UI 設計師第一個要考慮的問題:為什麼要用華康少女體?
第二個該思考的就是系統行為:iOS 內建華康少女體嗎?
當設計師(或 PM、Planner)不管資料來源系統行為功能可行性什麼的,「我覺得這樣比較好看啊」、「這樣畫面比較美」就變成 RD 爆青筋的那根稻草。