回覆列表
  • 1 # 目色設計

    回來這個問題之前,我們首先要了解一下平面設計師和UI設計的區別和聯絡

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

    平面設計和 UI 設計最簡單易懂的差別就是一個會動、另一個不會動。

    淡入淡出、往左邊飛、往右邊翻頁之類的動態效果。這就是「會動」了?動態效果不過是平面設計師眼裡的「會動」,和 UI 設計師、RD 眼裡的「會動」完全是兩回事,UI 設計的「會動」特指「行為」,包含使用者的行為、介面的行為、系統的行為。

    使用者的行為

    使用者是誰?會怎麼操作?在什麼情境下操作?操作的任務與目的?

    不同使用者有不同的操作習慣、不同的情境、基於不同的動機下進行相似的產品操作步驟,所以在設計一款產品前,UI 設計師會先搞懂目標族群。這一點在許多平面設計師上也能看到他們會進行類似的詢問…宣傳嬰幼兒產品的海報總不能和賣運動用品的 DM 用同樣顏色吧。

    但平面設計師不會考慮「使用者怎麼操作」這個問題,他們的平面成品在大部份情況下也不太會被操作,所以在成品上只看得到「視覺設計」。

    「為什麼 App 上要放 6pt 的中文字?」「因為畫面這樣看起來比較精緻啊~」

    若使用者是老年人呢?使用者在什麼情況下會使用這款 App ?如果是公交車或捷運上會晃動的地點呢?平面設計師不會考慮到使用者怎麼操作,他們理解需配合目標族群不同改變設計,但不太理解情境、操作的任務指的是什麼。(或者是他們理解,但覺得美美的畫面比使用者好不好用更重要。)

    同樣都是計算器,一般人買賣東西算價錢、和工程型,兩者會相同嗎?就算是望遠鏡,也分成看星星、打鳥、偷窺之類很多方向啊。

    介面的行為

    引導使用者操作並完成任務的手段

    介面常常和互動相提並論,使用者會透過操作介面、依據介面的引導完成任務。滑鼠移上去要變色、動態效果、進度條、Alert 等等,都屬於介面的行為。

    平面設計不會有滑鼠移上去跳選單出來,或是操作錯誤冒出提示訊息,更不會有下載檔案的情況。所以他們很習慣無視「提示使用者」、「引導操作」這兩大介面設計的重點。

    介面除了互動之外,還包含「資訊架構」,也就是分類、標籤、導覽、搜尋。這 4 項在視覺設計上佔的比例不大,吃的是使用者的思考邏輯:使用者要透過什麼方式找到他想要的資訊?資訊架構在整理內容(圖文影音),用使用者能理解的思考邏輯把內容組織化。

    不管是 App 或是 Web,表皮上構成的元素就是影音、圖片、文字等內容,視覺設計往往只考慮這些元素的排版、呈現樣式。所以就變成公家機關網站…該有的都有,但永遠找不到目標物。假如「那層皮」經過設計長的美美的,但內容沒有整理過,使用者還是大海撈針,猜不透啊猜不透。

    要如何在短時間內引導使用者取得他想要的內容是介面設計思考的重點,絕對不是那層皮畫得美不美。

    許多平面設計師抱持舊有習慣,無視資訊架構的存在,認為這是 RD 或 PM 的工作範圍與自己無關,設計師只要產出美美的圖、顧好視覺設計就好,其他如專案流程或 RD 辦不辦得到能不能實現這個設計的可行性管它去死。

    系統的行為

    程式與資料的運作邏輯

    區分平面設計師和 UI 設計師最簡單的方法就是問「資料怎麼來?」

    為什麼 UI 設計師需要知道資料來源?舉個簡單的例子…

    使用者行為:逛網拍打發時間。介面行為:顯示商品列表。系統行為:抓取商品資料。

    使用者做了某項操作但 App 沒有任何反應,會不會覺得 App 壞了?假如資料非內建需要從網路下載,從網路抓取資料的同時需不需要提示使用者「系統現在正在執行某事」?提示使用者 App 正常運作中,只是動作比較慢。

    那 UI 設計師是不是需要知道圖片是內建還是從網路抓取?假如 icon 是內建的、商品圖片要透過網路下載,商品圖片讀取中的狀態是不是要跟使用者講一聲免得他以為壞了?

    舉個更簡單的例子…

    在 iPhone App 使用「華康少女體」。

    UI 設計師第一個要考慮的問題:為什麼要用華康少女體?第二個該思考的就是系統行為:iOS 內建華康少女體嗎?

    當平面設計師(或 PM、Planner)不管資料來源系統行為功能可行性什麼的,「我覺得這樣比較好看啊」、「這樣畫面比較美」就變成 RD 爆青筋的那根稻草。

    所以在瞭解完平面設計和UI設計師的區別,多少也理解點為什麼招聘來的平面設計師做不了UI設計了吧

  • 中秋節和大豐收的關聯?
  • 人與動物能否和諧相處?