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

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

來(lái)源：莫貝網(wǎng)

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

平面設(shè)計(jì)和 UI 設(shè)計(jì)最簡(jiǎn)單易懂的差別就是一個(gè)會(huì)動(dòng)、另一個(gè)不會(huì)動(dòng)。

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

舉例

同樣的一項(xiàng)產(chǎn)品，目標(biāo)族群不同，產(chǎn)品外觀也會(huì)不同；拿給不同的人使用，也會(huì)得到不同的結(jié)果。甚至連任務(wù)目標(biāo)（用戶(hù)想透過(guò)產(chǎn)品完成什么事）都會(huì)不一樣。

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

（圖片出處）

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

（取自電影 惡靈古堡3：大滅絕）

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

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

（以上來(lái)亂的請(qǐng)不要認(rèn)真，我一直覺(jué)得這幕非常有喜感…）

使用者的行為

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

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

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

「為什么 App 上要放 6pt 的中文字？」
「因?yàn)楫?huà)面這樣看起來(lái)比較精致啊～」

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

同樣都是計(jì)算器，一般人買(mǎi)賣(mài)東西算價(jià)錢(qián)、和工程型，兩者會(huì)相同嗎？就算是望遠(yuǎn)鏡，也分成看星星、打鳥(niǎo)、偷窺之類(lèi)很多方向啊。

接口的行為

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

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

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

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

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

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

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

系統(tǒng)的行為

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

區(qū)分平面設(shè)計(jì)師和 UI 設(shè)計(jì)師最簡(jiǎn)單的方法就是問(wèn)「數(shù)據(jù)怎么來(lái)？」

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

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

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

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

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

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

舉個(gè)更簡(jiǎn)單的例子…

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

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

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

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