[email protected]_Lee：收到一封 Mail，其中提到幾個(gè)關(guān)于 設(shè)計(jì)流程 和 Prototype 的問題。UI 設(shè)計(jì)流程 ：Wireframe->低保真Prototyple->Mockup->高保真Prototyple，這樣的流程是對(duì)的嗎?今天來(lái)聊聊一個(gè)完整的 UI 設(shè)計(jì)流程應(yīng)該是怎樣的，收干貨!
根據(jù)上過(guò)課的學(xué)員響應(yīng)、以及自身經(jīng)驗(yàn)，目前業(yè)界的情況大多是 UI 設(shè)計(jì)師收到「開工啦」的通知，然后就從 Wireframe 開始下手。用戶怎么操作、有哪些功能、用戶和客戶的需求是什么往往靠 PM 簡(jiǎn)單口述。
Wireframe 為什么會(huì)長(zhǎng)這樣?在 Wireframe 之前還有哪些事要做?
全部都靠通靈。
所以執(zhí)行項(xiàng)目期間都在改來(lái)改去，撐到最后一天總是可以結(jié)案就解脫了嘛，再開始下個(gè)改來(lái)改去的輪回。
開發(fā)流程
基本上我自己在開發(fā)產(chǎn)品的流程大致上不會(huì)脫離這張圖太遠(yuǎn)。
User Story
Functional Map
Flow Chart
UI Flow
Wireframe
Mockup
Prototype
使用者要什么? > 從需求中整理出功能 > 用戶怎么操作這些功能? > 操作的過(guò)程需要哪些頁(yè)面? > 頁(yè)面要放什么內(nèi)容/組件?怎么被操作? > 使用者看到的頁(yè)面長(zhǎng)什么樣子?
各家有各家的作法，沒有標(biāo)準(zhǔn)或正確一定要這樣做的流程，但我在做自己的玩具時(shí)都會(huì)這樣干。
有 UX 團(tuán)隊(duì)的大公司會(huì)把上述流程拆的更細(xì)，還會(huì)做使用者研究之類;一人 UI/UX 通包的小型團(tuán)隊(duì)…這 7 項(xiàng)是最低一定要產(chǎn)出的文件，依個(gè)人想偷懶的慘痛經(jīng)驗(yàn)，再刪除精簡(jiǎn)化就會(huì)在執(zhí)行項(xiàng)目的過(guò)程中漏東漏西，之后補(bǔ)洞反而花更多時(shí)間和心力。
1. User Story
功能怎么來(lái)的?從「使用者要什么」或「客戶預(yù)期使用者想要什么」開始。依用戶的身份不同，想要的功能也會(huì)不同，完成的任務(wù)不一樣嘛。
比如「Blog」：
我是讀者，我要看到這位作者寫的所有文章。
我是作者，我要撰寫并發(fā)布文章。
我是平臺(tái)提供商，我要看到所有會(huì)員身份和繳費(fèi)狀態(tài)。
這三種身份對(duì)「Blog」這項(xiàng)產(chǎn)品的需求和預(yù)期完全不同。
2. Functional Map
寫了 User Story，才會(huì)知道有哪些大小功能要做。針對(duì)不同使用者的需求，從故事中挑出功能。使用者的身份不同往往影響他們能使用的功能，整理歸納出共通和差異處。
3. Flow Chart
當(dāng)開發(fā)者知道使用者想要什么、也有了功能，才有辦法思考「用戶怎么操作功能完成他的任務(wù)或達(dá)到目的」。
UI 設(shè)計(jì)師常說(shuō)：「配合用戶的習(xí)慣與行為來(lái)設(shè)計(jì)操作流程」。就是在這一階段規(guī)劃。如果跳過(guò) Flow Chart，只要產(chǎn)品功能復(fù)雜起來(lái)，你家的 RD 就會(huì)抱著頭哀嚎了。
4. UI Flow
知道用戶會(huì)怎么操作一項(xiàng)功能時(shí)，才有辦法規(guī)劃操作動(dòng)線。UI Flow 指的是頁(yè)面與頁(yè)面之間的操作流程，用戶想完成任務(wù)會(huì)經(jīng)過(guò)多少頁(yè)面之類。
有另一位讀者傳訊問道，為什么我之前的文章說(shuō)不要用圖片版的 UI Flow、要用文字版的呢?
首先，這是雞生蛋蛋生雞的問題。如果這個(gè)項(xiàng)目從零開始，把 Flow Chart 規(guī)劃完后接著做 UI Flow，這時(shí)候哪來(lái)的圖片版可以串 Flow?連 Wireframe 都還沒開始畫哩!
第二，當(dāng)你的產(chǎn)品頁(yè)面一多的時(shí)候…也不用太多，20頁(yè)，用圖片串出一個(gè) UI Flow ，這個(gè) Flow 圖表尺寸有多大張?誰(shuí)有那個(gè)心力在一張大圖上用手掌工具來(lái)回移動(dòng)看頁(yè)面走向?
第三，很多人做圖片版的 UI Flow 時(shí)，線條連接的是「頁(yè)面」和「頁(yè)面」，這時(shí)候你也只知道「喔～這一頁(yè)的下一頁(yè)會(huì)到這里」，但你完全不會(huì)知道為什么會(huì)到這一頁(yè)。要點(diǎn)哪里、或是發(fā)生什么事所以跑到這里來(lái)?猜猜看啊～
要靠猜猜看才會(huì)看懂的文件看它(寫它)干嘛?不要浪費(fèi)時(shí)間啊。
文字版的 UI Flow 我拿來(lái)當(dāng)「目錄」用，對(duì)照 Wireframe 的編號(hào)，找圖看細(xì)節(jié)的時(shí)候快。圖片版的 UI Flow 我會(huì)用在「優(yōu)化」舊產(chǎn)品的操作時(shí)使用，連接線會(huì)從「組件到頁(yè)面」，而不是「頁(yè)面到頁(yè)面」，并在圖片和線條旁邊寫上文字說(shuō)明，才會(huì)知道哪個(gè)步驟可以省略或修改得更易于使用。
5. Wireframe
有畫 Wireframe 不代表工程師就看得懂這要干嘛，光看臉皺成一團(tuán)的表情你也不知道他是踢到腳指還是吃到酸梅。文字說(shuō)明才是 Wireframe 的重點(diǎn)，包含觸發(fā)、回饋、狀態(tài)變化等等。