2019-1-10 用心設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
在整體設(shè)計(jì)流程中，用戶(hù)故事可以說(shuō)是點(diǎn)亮應(yīng)用絕對(duì)目標(biāo)的那一點(diǎn)星光。該片文章的作者將給我們講解為什么哪怕是小范圍的采用用戶(hù)故事也能給整體UI設(shè)計(jì)流程帶來(lái)巨大的好處。
一支設(shè)計(jì)團(tuán)隊(duì)坐下來(lái)討論為一家新客戶(hù)所設(shè)計(jì)的應(yīng)用的第一輪模型情況。隨著團(tuán)隊(duì)成員不斷提出想法，我們發(fā)現(xiàn)大家對(duì)于這個(gè)應(yīng)用是什么？其功能應(yīng)該是什么樣有著截然不同的看法。后來(lái)，會(huì)議迅速變成了“誰(shuí)對(duì)誰(shuí)錯(cuò)”而不是“什么對(duì)什么錯(cuò)”的爭(zhēng)論。大家紛紛為自己的設(shè)計(jì)辯護(hù)，但沒(méi)有一個(gè)人站在用戶(hù)角度說(shuō)話(huà)。聽(tīng)著耳熟嗎？正是在這種時(shí)刻，我們迫切需要描繪用戶(hù)故事。
今時(shí)今日，很多UI/UX專(zhuān)業(yè)人士都開(kāi)始意識(shí)到自己工作的環(huán)境進(jìn)入了Agile狀態(tài)。Agile開(kāi)發(fā)（和設(shè)計(jì)）流程需要快速推進(jìn)，相應(yīng)地，我們也需要能夠?qū)崿F(xiàn)快速、協(xié)作的工具。這個(gè)聽(tīng)起來(lái)像是個(gè)矛盾，但實(shí)際上確實(shí)有很多工具能夠幫助我們?cè)诓辉黾禹?xiàng)目時(shí)間的情況下有效合作。用戶(hù)故事就是針對(duì)“Agile法”的工具，在運(yùn)用到UI設(shè)計(jì)流程時(shí)，其能夠?yàn)楹罄m(xù)的設(shè)計(jì)階段提供堅(jiān)定的基石。簡(jiǎn)約版的用戶(hù)故事操作起來(lái)幾乎不用時(shí)間，但卻能對(duì)保證項(xiàng)目按軌道運(yùn)行帶來(lái)奇跡般的效果。
我們的UI設(shè)計(jì)團(tuán)隊(duì)會(huì)在流程中運(yùn)用用戶(hù)故事，而在運(yùn)用過(guò)程中我們發(fā)現(xiàn)，用戶(hù)故事幫我們做到了三件事。
1. 用戶(hù)故事可以讓產(chǎn)品以用戶(hù)為核心。
2. 用戶(hù)故事可以促進(jìn)團(tuán)隊(duì)成員之間的合作。
3. 用戶(hù)故事可以防止出現(xiàn)功能蔓延以及設(shè)計(jì)死胡同。
從根本上說(shuō)，用戶(hù)故事的用途是描述用戶(hù)通過(guò)使用軟件產(chǎn)品想要實(shí)現(xiàn)的任務(wù)。用戶(hù)故事起源于Agile和Scrum開(kāi)發(fā)策略，但是對(duì)于設(shè)計(jì)師來(lái)說(shuō)，用戶(hù)故事主要用來(lái)提醒用戶(hù)目標(biāo)以及對(duì)各個(gè)界面設(shè)計(jì)進(jìn)行整理和排序。
一個(gè)用戶(hù)故事就是簡(jiǎn)單的一句話(huà)。可以用這句作為模板：“作為用戶(hù)我需要（基本用戶(hù)目標(biāo)）”。因?yàn)楣适露己芎?jiǎn)短而且有針對(duì)性，所以需要多個(gè)不同的故事來(lái)覆蓋所有可能的用戶(hù)案例。事實(shí)上，我們會(huì)想辦法把每個(gè)故事進(jìn)行細(xì)化。
舉個(gè)例子，一個(gè)用戶(hù)故事剛開(kāi)始時(shí)是：
“作為用戶(hù)我需要?jiǎng)?chuàng)建一個(gè)新帳戶(hù)。”
但是新建帳戶(hù)的過(guò)程中又涉及到哪些步驟呢？用戶(hù)需要提供用戶(hù)名、密碼以及其他相關(guān)信息。其中每個(gè)操作都需要有相對(duì)應(yīng)的用戶(hù)故事，故事越具體，到后期對(duì)設(shè)計(jì)師和開(kāi)發(fā)來(lái)說(shuō)就會(huì)越方便。那么，“創(chuàng)建新帳戶(hù)”就可以進(jìn)一步細(xì)化為：
“作為用戶(hù)我需要輸入一個(gè)新用戶(hù)名。”
“作為用戶(hù)我需要輸入密碼。”
“作為用戶(hù)我需要再次輸入密碼進(jìn)行確認(rèn)。”
“作為用戶(hù)我需要提交信息，創(chuàng)建帳戶(hù)。”
這樣繼續(xù)下去，最后就會(huì)得到一大長(zhǎng)串用戶(hù)故事，其中大部分都需要加入到最終產(chǎn)品內(nèi)。
我們最近為Quiksilver服裝設(shè)計(jì)了一款iPad應(yīng)用，可以讓銷(xiāo)售其貨物的店鋪跟蹤當(dāng)前存活狀態(tài)，以便輕松下單訂新貨。就是這么一款看似非常簡(jiǎn)單明了的應(yīng)用，我們想出了266個(gè)用戶(hù)故事（剛開(kāi)始時(shí)）。你們都沒(méi)想到細(xì)節(jié)能夠細(xì)到這種程度吧！
作為設(shè)計(jì)師，我在第一次和項(xiàng)目相關(guān)人員開(kāi)會(huì)的時(shí)候就會(huì)開(kāi)始考慮布局和配色方案。在聽(tīng)他們說(shuō)目標(biāo)以及了解終端用戶(hù)情況的同時(shí)，我就能想象出這款應(yīng)用應(yīng)該是什么樣的。但關(guān)鍵在于不能本末倒置——我們要先確定用戶(hù)故事，讓用戶(hù)故事道出設(shè)計(jì)，而不能倒過(guò)來(lái)搞。
在對(duì)應(yīng)用的所有用戶(hù)故事做完腦暴之后，我們會(huì)把故事放到Google的合作電子表格上，以便客戶(hù)在想到有其他用戶(hù)故事時(shí)隨時(shí)添加。在客戶(hù)和團(tuán)隊(duì)感覺(jué)已經(jīng)窮盡所有內(nèi)容之后，我們會(huì)給每個(gè)故事一個(gè)編號(hào)。這些編號(hào)到項(xiàng)目后期會(huì)派上大用場(chǎng)，我們會(huì)用編號(hào)作為一個(gè)簡(jiǎn)明的標(biāo)簽來(lái)表示哪些故事需要在哪個(gè)時(shí)間段處理。
這個(gè)表格的功能不僅是提醒我們應(yīng)用的功能，還能讓我們?cè)谡麄€(gè)流程中與用戶(hù)緊密相聯(lián)。每個(gè)用戶(hù)故事都是針對(duì)于我們終端用戶(hù)的，以便保證始終照顧到他們的需求。這一點(diǎn)在一個(gè)有關(guān)約會(huì)應(yīng)用的項(xiàng)目中表現(xiàn)的尤其明顯。
關(guān)于這個(gè)應(yīng)用，我在給“用戶(hù)資料”頁(yè)面做線(xiàn)框圖的時(shí)候，最開(kāi)始以為需要添加一個(gè)“保存用戶(hù)”功能按鈕。但是，我不經(jīng)意瞟了一眼“用戶(hù)資料”部分，突然想起來(lái)用戶(hù)故事中的一個(gè)細(xì)節(jié)：“作為用戶(hù)我需要收藏其他用戶(hù)。”
把“保存”一詞改成“收藏”這個(gè)決定雖小但很關(guān)鍵，因?yàn)椤氨４妗庇脩?hù)聽(tīng)起來(lái)冷冰冰的，而“收藏”則契合了用戶(hù)有關(guān)約會(huì)的心態(tài)。設(shè)計(jì)師容易陷入到技術(shù)的陷阱中，特別是在對(duì)功能投入了大量時(shí)間之后。而用戶(hù)故事可以提醒我們時(shí)刻以用戶(hù)體驗(yàn)為核心，因?yàn)橛脩?hù)體驗(yàn)是最終決定應(yīng)用性格的東西。
UI設(shè)計(jì)通常涉及到的人不止一個(gè)。其中還可能包括客戶(hù)、設(shè)計(jì)師、程序員以及一大堆的其他職位工作人員，具體要取決于公司的規(guī)模大小。從很多方面說(shuō)，這就類(lèi)似于一隊(duì)人劃船。要贏得比賽，團(tuán)隊(duì)的每個(gè)成員都要以相同的速度朝著相同的方向一齊劃槳。這并不是說(shuō)所有人的意見(jiàn)都要始終統(tǒng)一，而是說(shuō)所有人都要有統(tǒng)一的目標(biāo)并且清楚自己在團(tuán)隊(duì)中的角色。
雖然我們?cè)贑itrusBits所采用的流程遠(yuǎn)算不上完美，但是我們卻發(fā)現(xiàn)用戶(hù)故事能夠保證船上的人勁都往一處使。以用戶(hù)故事為基準(zhǔn)做出決策讓我們得以明確定義出應(yīng)用的目標(biāo)。這樣一來(lái)就大大降低了團(tuán)隊(duì)合作時(shí)的障礙，因?yàn)槲覀冇煤?jiǎn)短、有針對(duì)性的詞句明確定義出了共同的目標(biāo)。
另外，用戶(hù)故事還能讓身處不同地理位置的團(tuán)隊(duì)更加輕松的合作。我們?cè)跒橐患遗f金山客戶(hù)開(kāi)發(fā)一款問(wèn)答類(lèi)應(yīng)用時(shí)，我們?cè)诤车貐^(qū)的團(tuán)隊(duì)會(huì)時(shí)不常的和客戶(hù)碰面討論應(yīng)用要求。他們寫(xiě)出了用戶(hù)故事（但并沒(méi)有在項(xiàng)目期間進(jìn)行其他修改）然后放到了Google Drive。而我們身處洛杉磯的團(tuán)隊(duì)則可以在畫(huà)線(xiàn)框圖的同時(shí)隨時(shí)參考用戶(hù)故事，并進(jìn)行必要的改動(dòng)。要不是有了這個(gè)步驟，這個(gè)項(xiàng)目所花費(fèi)的時(shí)間會(huì)長(zhǎng)的很多，而且還會(huì)需要通過(guò)大量漫長(zhǎng)的解釋工作來(lái)解決這些簡(jiǎn)短用戶(hù)故事幾分鐘就能解決的問(wèn)題。
“功能蔓延”是一個(gè)UI設(shè)計(jì)中常見(jiàn)的詞。它是指相關(guān)人員會(huì)不自覺(jué)地不斷增加新功能，擴(kuò)展項(xiàng)目范圍，這既包括硬件也包括軟件方面。
這幅漫畫(huà)完美地詮釋了功能蔓延。
當(dāng)然，在項(xiàng)目進(jìn)展期間我們是不反對(duì)更改要求的。但是，除非有明確的用戶(hù)故事告訴我們?cè)颍覀儠?huì)拒絕哪怕添加一個(gè)簡(jiǎn)單的文本框。我們之所以在這方面這么強(qiáng)硬，是因?yàn)橹翱吹竭^(guò)有的項(xiàng)目超出控制、丟掉中心最后無(wú)法實(shí)現(xiàn)最初設(shè)定的目標(biāo)。
舉個(gè)例子，不久之前，我們有個(gè)客戶(hù)忽略了用戶(hù)故事這回事。當(dāng)時(shí)我們正在給一家處理保密資產(chǎn)的公司搭建應(yīng)用，客戶(hù)想要做一款能夠管理員工之間通訊的應(yīng)用。主要的通訊手段是一個(gè)使用文字信息和圖片的公司內(nèi)部對(duì)話(huà)平臺(tái)（這一點(diǎn)我們都認(rèn)可了），這個(gè)我們記錄到了用戶(hù)故事里。后來(lái)，客戶(hù)又要求增加視頻、語(yǔ)音信息和位置分享。為了保持我們“靈活”的形象，我們想辦法把這些內(nèi)容加入了新的通訊系統(tǒng)，也因此擴(kuò)大了項(xiàng)目范圍，推遲了時(shí)限，在做完了全部工作之后我們卻發(fā)現(xiàn)添加的內(nèi)容其實(shí)對(duì)終端用戶(hù)沒(méi)用。
盡管新增的功能也很屌，但我們最開(kāi)始的初衷是做一款盡量簡(jiǎn)化通訊的應(yīng)用以便促進(jìn)團(tuán)隊(duì)建設(shè)和協(xié)作，不讓他變成一個(gè)公司內(nèi)部的Facebook。于是，我們又回到了用戶(hù)故事并重新提醒了客戶(hù)做應(yīng)用的初衷，最后成功組織了功能蔓延，回到了正軌。多方面的實(shí)驗(yàn)盡管能帶來(lái)很多很棒的成果，但是如果產(chǎn)品無(wú)法滿(mǎn)足根本要求，再精巧也沒(méi)意義。
通過(guò)這次教訓(xùn)，我們?cè)陂_(kāi)發(fā)Quicksilver這個(gè)針對(duì)B2B公司的銷(xiāo)售類(lèi)應(yīng)用時(shí)嚴(yán)格遵照用戶(hù)故事開(kāi)展流程。最后，最終產(chǎn)品一絲不茍地遵守了最初設(shè)計(jì)，這主要?dú)w功于我們?cè)谇捌诜e累了一套全面的用戶(hù)故事。以用戶(hù)故事為基石為后期節(jié)省了大量工作，同時(shí)也讓我們的工作更加有序、更加以用戶(hù)為中心。盡管產(chǎn)品的每次迭代都帶來(lái)了更多的用戶(hù)和客戶(hù)反饋，但產(chǎn)品理念的核心一直屹立不倒。
每個(gè)用戶(hù)故事對(duì)于設(shè)計(jì)團(tuán)隊(duì)和開(kāi)發(fā)團(tuán)隊(duì)來(lái)說(shuō)都有自己的一套意義。時(shí)刻思考技術(shù)限制雖然說(shuō)是好的，但是畢竟我們說(shuō)的是“用戶(hù)故事”，不是“開(kāi)發(fā)的故事”也不是“設(shè)計(jì)師的故事”。正因?yàn)槲覀兺ㄟ^(guò)用戶(hù)故事對(duì)用戶(hù)的觀點(diǎn)進(jìn)行了排序整理，我們才能更輕松地了解所面臨的問(wèn)題進(jìn)而創(chuàng)造出一款真正有用的最終產(chǎn)品。
藍(lán)設(shè)計(jì)( www.gyxygd.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.gyxygd.cn