Akanelee ：一間公司要營(yíng)運(yùn)絕對(duì)不是靠某個(gè)人腦充血帶頭往前沖，各部門(mén)間有許多事情需要相互配合。UI/UX 是最近很紅的話題，已經(jīng)到人人說(shuō)得一口好使用者的程度。講歸講，要在軟件開(kāi)發(fā)的什么階段導(dǎo)入 UX 呢？本文從我的角度來(lái)說(shuō)明 UX 如何改善開(kāi)發(fā)流程。

作者是位中國(guó)臺(tái)灣設(shè)計(jì)師，分享的文章都非常棒：
《中國(guó)臺(tái)灣設(shè)計(jì)師吐槽：我們的UI到底怎么了？》
《找工作必備！教你一眼識(shí)穿招聘公司有木有坑》

就我所觀察到與理解的，一套軟件開(kāi)發(fā)流程通常長(zhǎng)這樣：和客戶抬杠 > 討價(jià)還價(jià) > 寫(xiě)規(guī)格書(shū) > 簽約 > Mockup修改 > Mockup修改 > Mockup修改 > 定版并切圖給RD > 加新功能 > 加新功能 > 補(bǔ)切圖 > RD 快翻桌了 > 寫(xiě)完大半可以先測(cè)看看 > 加新功能 > 時(shí)間來(lái)不及修 Bug 了先推出去再說(shuō) > ..... > 結(jié)案 > （背后罵翻撩板磚）

• 1.約 95% 客戶看不懂 UI Flow，每次產(chǎn)出都沒(méi)人挑毛病。
• 2.約 90% 客戶修改 Wireframe 為的是加新功能、不是哪邊怪怪的。
• 3.約 85% 客戶在開(kāi)發(fā)前期很會(huì)畫(huà)餅，等 Mockup 做好就開(kāi)始喂公子吃丙。
• 4.約 80% 客戶不懂裝懂，覺(jué)得他說(shuō)了算，10萬(wàn)也可以架個(gè)Facebook。
• 5.約 75% 客戶會(huì)在 Code 都快寫(xiě)完要送測(cè)了才說(shuō)頁(yè)面有問(wèn)題要改。
• 6.約 99% 客戶在簽約后就看不懂中英文，覺(jué)得規(guī)格書(shū)是拿來(lái)吃不是拿來(lái)看的。

這個(gè)項(xiàng)目花多久時(shí)間在修改上？

PM 一定有經(jīng)驗(yàn)，明明抓了不少預(yù)留時(shí)間為什么到最后還是不夠用趕得要命，草草結(jié)案。雖說(shuō)客戶大爺都被慣得很驕，覺(jué)得加新功能和喝白開(kāi)水一樣免費(fèi)簡(jiǎn)單，但有更多時(shí)候是來(lái)回修改吃掉大部份的時(shí)間。相信許多業(yè)界人士都知道：「如果開(kāi)發(fā)前的設(shè)計(jì)時(shí)間時(shí)間花的不夠，開(kāi)發(fā)成本會(huì)增加三倍以上！」是啦，知道歸知道，把 Wireframe 交給 PM 或 BD 規(guī)劃...這叫有就好求心安吧？非專業(yè)人士設(shè)計(jì)出來(lái)的 Wireframe 你為什么覺(jué)得不會(huì)出問(wèn)題？

我會(huì)嚴(yán)格遵守 Functional Map > UI Flow > Wireframe > Mockup 這個(gè)作業(yè)流程，就是為了能把來(lái)回修改的次數(shù)降到最低。

延伸閱讀：

初學(xué)者的 Functional Map
初學(xué)者的 UI Flow
什么是 Wireframe ?

這三個(gè)階段產(chǎn)出的成果都要交給 SA、RD 確認(rèn)，尤其是 UI Flow 和 Wireframe ，這關(guān)系到他們串接各個(gè)頁(yè)面的邏輯。如果牽扯到會(huì)員系統(tǒng)、購(gòu)物車等更要注意 Flow 的完整和簡(jiǎn)潔，一個(gè)不小心有可能會(huì)變成很惡心的黏滑蛞蝓，拖泥帶水還附贈(zèng)抓不完的蟲(chóng)。在這三階段來(lái)回修改的成本遠(yuǎn)遠(yuǎn)小于 RD 開(kāi)始寫(xiě) Code 后發(fā)現(xiàn)問(wèn)題。就跟蛀牙一樣，初期治療頂多洗個(gè)牙小補(bǔ)一下，忍痛硬拖久了根管治療或是打掉重練裝假牙...這會(huì)比較省時(shí)省力省錢(qián)嗎？

專業(yè) UX 的重要性

UX 最大的工作就是和使用者溝通、做測(cè)試、設(shè)計(jì)UI Flow、畫(huà) Wireframe、寫(xiě)文件。不過(guò)老板通常只會(huì)叫做 UX 的那個(gè)人不要管溝通測(cè)試、照指示畫(huà)方框就好。UI Flow 和 Wireframe 非常重要，足以讓開(kāi)發(fā)流程延長(zhǎng) 10 倍或是事半功倍?？上w認(rèn)到這點(diǎn)的人很少，比起洗牙就好、好像大多數(shù)人都比較愛(ài)根管治療似的。讓外行人（PM、BD）兼職 Wireframe 的結(jié)果就是產(chǎn)出一堆似是而非、整死 RD 、可行性很低的規(guī)劃。

一位好的 UX 能用簡(jiǎn)單的邏輯設(shè)計(jì)出方便操作的接口。這表示不只使用者易用、連 RD 都會(huì)覺(jué)得接口好刻、不用煩惱各式頁(yè)面和諸多狀態(tài)間的串接太復(fù)雜。越混亂難懂的邏輯就越容易產(chǎn)生 Bug，光抓蟲(chóng)就飽了哪有時(shí)間做出穩(wěn)定流暢的 App 呢？

舉個(gè)例子

以最簡(jiǎn)單、視覺(jué)元素最少的字級(jí)表 App 為例，功能幾乎只有1.預(yù)覽各種字型、2.各種字級(jí)下的模樣。

點(diǎn)右上角出現(xiàn)字型列表，卷動(dòng)畫(huà)面各種字級(jí)預(yù)覽。

App：RainFont

左右滑動(dòng)切換各種字型，上下卷動(dòng)放大縮小字級(jí)。點(diǎn)擊左下角 icon 出現(xiàn)字型列表。

從上方兩個(gè)例子很明顯看得出優(yōu)劣，功能幾乎相同的情況下，有沒(méi)有 UX 介入差異非常大。同樣都能達(dá)到客戶的需求，但操作體驗(yàn)、接口設(shè)計(jì)、未來(lái)擴(kuò)充性等等完全不同。

在簽約之前的需求訪談就要把 UX 加進(jìn)去！

通常進(jìn)行客戶訪談的與會(huì)人員可能有 PM、SA，在這個(gè)階段就請(qǐng)把 UX 也拉進(jìn)去，既然 UX 要負(fù)責(zé)處理整個(gè)接口設(shè)計(jì)，他一定會(huì)有非常多需要從客戶口中問(wèn)出來(lái)的情報(bào)，像是：這個(gè) App 是「炫」導(dǎo)向，還是「功能」導(dǎo)向？目標(biāo)族群是誰(shuí)？需要和什么樣的廣告或營(yíng)銷方式配合...等等

好的 UX 熟知各種 Guideline，遵守 Guideline 的好處是幾乎都有內(nèi)建元素可以利用，能讓 RD 省下許多力氣。有經(jīng)驗(yàn)的資深 UX 甚至可以在這個(gè)階段就能把客戶天馬行空的幻想擋下來(lái)或是換個(gè)雙方都能接受較省時(shí)省力的方式執(zhí)行，省得 RD 要花大把力氣在非必備的功能開(kāi)發(fā)上。

「不該只是使用者覺(jué)得好用，連 RD 都該覺(jué)得 Code 好寫(xiě)才稱得上是好設(shè)計(jì)！」

簡(jiǎn)單的接口不只用戶容易上手，通常邏輯也簡(jiǎn)單，邏輯簡(jiǎn)單表示 RD 也會(huì)輕松點(diǎn)、較不易出錯(cuò)，QA 也不用一測(cè)再測(cè)。時(shí)程壓力小、PM 也不會(huì)天天被客戶追殺。在開(kāi)發(fā)初期就把 UX 加入絕對(duì)能大幅減輕各部門(mén)的壓力，并讓項(xiàng)目執(zhí)行更為理想踏實(shí)，突發(fā)狀況和蟲(chóng)量也會(huì)減少許多。

解放 PM/BD

PM 和 BD 的專業(yè)不會(huì)是使用者體驗(yàn)，不要再逼他們?nèi)プ龀鏊麄儗I(yè)領(lǐng)域的事了，少林功夫加唱歌跳舞有沒(méi)有搞頭？既然對(duì)領(lǐng)高薪立委的要求只有不要打架、那為什么基層人員就得十八班武藝樣樣全能？這不合理啊，該給 UX 做的事就回歸專業(yè)吧。

1. 在需求訪談時(shí)加入 UX。
2. 遵守 Functional Map > UI Flow > Wireframe 開(kāi)發(fā)流程。
3. UX在每個(gè)階段的產(chǎn)出都要給相關(guān)人員確認(rèn)。
4. 不要讓 PM/BD 設(shè)計(jì)Flow、Wireframe，那是 UX 的工作。
5. 不要讓 SA/RD/PG 設(shè)計(jì)Flow、Wireframe，功能都會(huì)跑到第一層，變成公家機(jī)關(guān)網(wǎng)頁(yè)。

原文地址：blog.akanelee
作者：Akanelee

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量68萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：