平面設(shè)計師和UI設(shè)計師有哪3個不同點(diǎn)?

2015-10-13    用心設(shè)計

藍(lán)藍(lán)設(shè)計m.sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里

來源:莫貝網(wǎng)

UI 是「用戶接口」,UI 設(shè)計指的是「設(shè)計用戶接口這回事」。設(shè)計接口不是只有出張美美的圖就結(jié)束,這樣和平面設(shè)計沒有差別,也正是為什么 RD 會說「你用平面設(shè)計的思維在做 UI」。

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

淡入淡出、往左邊飛、往右邊翻頁之類的動態(tài)效果。這就是「會動」了?動態(tài)效果不過是平面設(shè)計師眼里的「會動」,和 UI 設(shè)計師、RD 眼里的「會動」完全是兩回事,UI 設(shè)計的「會動」特指「行為」,包含用戶的行為、接口的行為、系統(tǒng)的行為。

舉例

同樣的一項產(chǎn)品,目標(biāo)族群不同,產(chǎn)品外觀也會不同;拿給不同的人使用,也會得到不同的結(jié)果。甚至連任務(wù)目標(biāo)(用戶想透過產(chǎn)品完成什么事)都會不一樣。

比如這款給嬰幼兒訓(xùn)練抓握力、色彩、形狀、推理能力用的積木。

ak20151002

(圖片出處)

到了這部電影里,積木變成「證明喪尸有基本推理思考能力的手段」,而不是訓(xùn)練他的道具。

ak20151002-2

(取自電影 惡靈古堡3:大滅絕)

即使行為相同,使用情境完全不同,操作的目的或動機(jī)也完全不一樣。

別忘了下一秒積木就被嘗試錯誤的喪尸給拆了,所以設(shè)計給喪尸用和給嬰兒用的是不是應(yīng)該要不太一樣?起碼要堅固一點(diǎn)吧…

(以上來亂的請不要認(rèn)真,我一直覺得這幕非常有喜感…)

使用者的行為

使用者是誰?會怎么操作?在什么情境下操作?操作的任務(wù)與目的?

不同使用者有不同的操作習(xí)慣、不同的情境、基于不同的動機(jī)下進(jìn)行相似的產(chǎn)品操作步驟,所以在設(shè)計一款產(chǎn)品前,UI 設(shè)計師會先搞懂目標(biāo)族群。這一點(diǎn)在許多平面設(shè)計師上也能看到他們會進(jìn)行類似的詢問…宣傳嬰幼兒產(chǎn)品的海報總不能和賣運(yùn)動用品的 DM 用同樣顏色吧。

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

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

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

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

接口的行為

引導(dǎo)用戶操作并完成任務(wù)的手段

接口常常和互動相提并論,用戶會透過操作接口、依據(jù)接口的引導(dǎo)完成任務(wù)。鼠標(biāo)移上去要變色、動態(tài)效果、進(jìn)度條、Alert 等等,都屬于界面的行為。

平面設(shè)計不會有鼠標(biāo)移上去跳選單出來,或是操作錯誤冒出提示訊息,更不會有下載文件的情況。所以他們很習(xí)慣無視「提示使用者」、「引導(dǎo)操作」這兩大接口設(shè)計的重點(diǎn)。

接口除了互動之外,還包含「信息架構(gòu)」,也就是分類、標(biāo)簽、導(dǎo)覽、搜尋。這 4 項在視覺設(shè)計上占的比例不大,吃的是用戶的思考邏輯:用戶要透過什么方式找到他想要的信息?信息架構(gòu)在整理內(nèi)容(圖文影音),用用戶能理解的思考邏輯把內(nèi)容組織化。

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

要如何在短時間內(nèi)引導(dǎo)使用者取得他想要的內(nèi)容是接口設(shè)計思考的重點(diǎn),絕對不是那層皮畫得美不美。

許多平面設(shè)計師抱持舊有習(xí)慣,無視信息架構(gòu)的存在,認(rèn)為這是 RD 或 PM 的工作范圍與自己無關(guān),設(shè)計師只要產(chǎn)出美美的圖、顧好視覺設(shè)計就好,其他如項目流程或 RD 辦不辦得到能不能實(shí)現(xiàn)這個設(shè)計的可行性管它去死。

系統(tǒng)的行為

程序與數(shù)據(jù)的運(yùn)作邏輯

區(qū)分平面設(shè)計師和 UI 設(shè)計師最簡單的方法就是問「數(shù)據(jù)怎么來?」

我超愛問這個問題,呆在現(xiàn)場的不知道怎么回答的還有意識到自己在做 UI,會翻白眼的都是半途轉(zhuǎn)行跑去做 UI 又不太想學(xué)的資深平面設(shè)計師(或是狀況外的菜鳥),他們不覺得「資料」在自己要考慮的工作范圍內(nèi),非常大氣地?zé)o視「信息架構(gòu)」的存在。(這里的資深指的不 是能力,只是在這行「坐」得比較久。)

以目前臺灣的接口設(shè)計非常狹隘地限定在 App 和 Web 上,這兩者常常需要和工程師合作,就得考慮數(shù)據(jù)源的問題。平面設(shè)計師不需要接觸信息架構(gòu),保留這種工作習(xí)慣在設(shè)計 UI,被問到「數(shù)據(jù)怎么來?」就翻白眼心里 OS 關(guān)我屁事也是很正常的心態(tài)。

為什么 UI 設(shè)計師需要知道數(shù)據(jù)源?舉個簡單的例子…

使用者行為:逛網(wǎng)拍打發(fā)時間。
接口行為:顯示商品列表。
系統(tǒng)行為:抓取商品資料。

使用者做了某項操作但 App 沒有任何反應(yīng),會不會覺得 App 壞了?假如數(shù)據(jù)非內(nèi)建需要從網(wǎng)絡(luò)下載,從網(wǎng)絡(luò)抓取數(shù)據(jù)的同時需不需要提示用戶「系統(tǒng)現(xiàn)在正在執(zhí)行某事」?提示使用者 App 正常運(yùn)作中,只是動作比較慢。

那 UI 設(shè)計師是不是需要知道圖片是內(nèi)建還是從網(wǎng)絡(luò)抓取?假如 icon 是內(nèi)建的、商品圖片要透過網(wǎng)絡(luò)下載,商品圖片讀取中的狀態(tài)是不是要跟使用者講一聲免得他以為壞了?

舉個更簡單的例子…

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

UI 設(shè)計師第一個要考慮的問題:為什么要用華康少女體?
第二個該思考的就是系統(tǒng)行為:iOS 內(nèi)建華康少女體嗎?

當(dāng)平面設(shè)計師(或 PM、Planner)不管數(shù)據(jù)源系統(tǒng)行為功能可行性什么的,「我覺得這樣比較好看啊」、「這樣畫面比較美」就變成 RD 爆青筋的那根稻草。

不要用平面設(shè)計師的思維在做 UI 好嗎?

日歷

鏈接

個人資料

存檔