用戶故事：網(wǎng)站建設(shè)UI設(shè)計(jì)的基石

在整體設(shè)計(jì)流程中，用戶故事可以說是點(diǎn)亮應(yīng)用絕對(duì)目標(biāo)的那一點(diǎn)星光。該片文章的作者將給我們講解為什么哪怕是小范圍的采用用戶故事也能給整體UI設(shè)計(jì)流程帶來巨大的好處。

“專業(yè)、務(wù)實(shí)、高效、創(chuàng)新、把客戶的事當(dāng)成自己的事”是我們每一個(gè)人一直以來堅(jiān)持追求的企業(yè)文化。 成都創(chuàng)新互聯(lián)是您可以信賴的網(wǎng)站建設(shè)服務(wù)商、專業(yè)的互聯(lián)網(wǎng)服務(wù)提供商! 專注于成都做網(wǎng)站、成都網(wǎng)站建設(shè)、軟件開發(fā)、設(shè)計(jì)服務(wù)業(yè)務(wù)。我們始終堅(jiān)持以客戶需求為導(dǎo)向，結(jié)合用戶體驗(yàn)與視覺傳達(dá)，提供有針對(duì)性的項(xiàng)目解決方案，提供專業(yè)性的建議，創(chuàng)新互聯(lián)建站將不斷地超越自我，追逐市場(chǎng)，引領(lǐng)市場(chǎng)！

一支設(shè)計(jì)團(tuán)隊(duì)坐下來討論為一家新客戶所設(shè)計(jì)的應(yīng)用的先進(jìn)輪模型情況。隨著團(tuán)隊(duì)成員不斷提出想法，我們發(fā)現(xiàn)大家對(duì)于這個(gè)應(yīng)用是什么？其功能應(yīng)該是什么樣有著截然不同的看法。后來，會(huì)議迅速變成了“誰對(duì)誰錯(cuò)”而不是“什么對(duì)什么錯(cuò)”的爭論。大家紛紛為自己的設(shè)計(jì)辯護(hù)，但沒有一個(gè)人站在用戶角度說話。聽著耳熟嗎？正是在這種時(shí)刻，我們迫切需要描繪用戶故事。

今時(shí)今日，很多UI/UX專業(yè)人士都開始意識(shí)到自己工作的環(huán)境進(jìn)入了Agile狀態(tài)。Agile開發(fā)（和設(shè)計(jì)）流程需要快速推進(jìn)，相應(yīng)地，我們也需要能夠?qū)崿F(xiàn)快速、高效協(xié)作的工具。這個(gè)聽起來像是個(gè)矛盾，但實(shí)際上確實(shí)有很多工具能夠幫助我們?cè)诓辉黾禹?xiàng)目時(shí)間的情況下有效合作。用戶故事就是針對(duì)“Agile法”的工具，在運(yùn)用到UI設(shè)計(jì)流程時(shí)，其能夠?yàn)楹罄m(xù)的設(shè)計(jì)階段提供堅(jiān)定的基石。簡約版的用戶故事操作起來幾乎不用時(shí)間，但卻能對(duì)項(xiàng)目按軌道運(yùn)行帶來奇跡般的效果。

我們的網(wǎng)站建設(shè)UI設(shè)計(jì)團(tuán)隊(duì)會(huì)在流程中運(yùn)用用戶故事，而在運(yùn)用過程中我們發(fā)現(xiàn)，用戶故事幫我們做到了三件事。

1.用戶故事可以讓產(chǎn)品以用戶為核心。

2.用戶故事可以促進(jìn)團(tuán)隊(duì)成員之間的合作。

3.用戶故事可以防止出現(xiàn)功能蔓延以及設(shè)計(jì)死胡同。

什么是用戶故事？

從根本上說，用戶故事的用途是描述用戶通過使用軟件產(chǎn)品想要實(shí)現(xiàn)的任務(wù)。用戶故事起源于Agile和Scrum開發(fā)策略，但是對(duì)于設(shè)計(jì)師來說，用戶故事主要用來提醒用戶目標(biāo)以及對(duì)各個(gè)界面設(shè)計(jì)進(jìn)行整理和排序。

一個(gè)用戶故事就是簡單的一句話。可以用這句作為模板：“作為用戶我需要（基本用戶目標(biāo)）”。因?yàn)楣适露己芎喍潭矣嗅槍?duì)性，所以需要多個(gè)不同的故事來覆蓋所有可能的用戶案例。事實(shí)上，我們會(huì)想辦法把每個(gè)故事進(jìn)行細(xì)化。

舉個(gè)例子，一個(gè)用戶故事剛開始時(shí)是：

“作為用戶我需要?jiǎng)?chuàng)建一個(gè)新帳戶。”

但是新建帳戶的過程中又涉及到哪些步驟呢？用戶需要提供用戶名、密碼以及其他相關(guān)信息。其中每個(gè)操作都需要有相對(duì)應(yīng)的用戶故事，故事越具體，到后期對(duì)設(shè)計(jì)師和開發(fā)來說就會(huì)越方便。那么，“創(chuàng)建新帳戶”就可以進(jìn)一步細(xì)化為：

“作為用戶我需要輸入一個(gè)新用戶名?！?br/>“作為用戶我需要輸入密碼?！?br/>“作為用戶我需要再次輸入密碼進(jìn)行確認(rèn)?！?br/>“作為用戶我需要提交信息，創(chuàng)建帳戶。”

這樣繼續(xù)下去，較后就會(huì)得到一大長串用戶故事，其中大部分都需要加入到較終產(chǎn)品內(nèi)。

我們較近為Quiksilver服裝設(shè)計(jì)了一款iPad應(yīng)用，可以讓銷售其貨物的店鋪跟蹤當(dāng)前存活狀態(tài)，以便輕松下單訂新貨。就是這么一款看似非常簡單明了的應(yīng)用，我們想出了266個(gè)用戶故事（剛開始時(shí)）。你們都沒想到細(xì)節(jié)能夠細(xì)到這種程度吧！

以用戶為中心

作為設(shè)計(jì)師，我在先進(jìn)次和項(xiàng)目相關(guān)人員開會(huì)的時(shí)候就會(huì)開始考慮布局和配色方案。在聽他們說目標(biāo)以及了解終端用戶情況的同時(shí)，我就能想象出這款應(yīng)用應(yīng)該是什么樣的。但關(guān)鍵在于不能本末倒置——我們要先確定用戶故事，讓用戶故事道出設(shè)計(jì)，而不能倒過來搞。

在對(duì)應(yīng)用的所有用戶故事做完腦暴之后，我們會(huì)把故事放到Google的合作電子表格上，以便客戶在想到有其他用戶故事時(shí)隨時(shí)添加。在客戶和團(tuán)隊(duì)感覺已經(jīng)窮盡所有內(nèi)容之后，我們會(huì)給每個(gè)故事一個(gè)編號(hào)。這些編號(hào)到項(xiàng)目后期會(huì)派上大用場(chǎng)，我們會(huì)用編號(hào)作為一個(gè)簡明的標(biāo)簽來表示哪些故事需要在哪個(gè)時(shí)間段處理。

這個(gè)表格的功能不僅是提醒我們應(yīng)用的功能，還能讓我們?cè)谡麄€(gè)流程中與用戶緊密相聯(lián)。每個(gè)用戶故事都是針對(duì)于我們終端用戶的，以便始終照顧到他們的需求。這一點(diǎn)在一個(gè)有關(guān)約會(huì)應(yīng)用的項(xiàng)目中表現(xiàn)的尤其明顯。

關(guān)于這個(gè)應(yīng)用，我在給“用戶資料”頁面做線框圖的時(shí)候，較開始以為需要添加一個(gè)“保存用戶”功能按鈕。但是，我不經(jīng)意瞟了一眼“用戶資料”部分，突然想起來用戶故事中的一個(gè)細(xì)節(jié)：“作為用戶我需要收藏其他用戶?！?/p>

把“保存”一詞改成“收藏”這個(gè)決定雖小但很關(guān)鍵，因?yàn)椤氨４妗庇脩袈犉饋砝浔?，而“收藏”則契合了用戶有關(guān)約會(huì)的心態(tài)。設(shè)計(jì)師容易陷入到技術(shù)的陷阱中，特別是在對(duì)功能投入了大量時(shí)間之后。而用戶故事可以提醒我們時(shí)刻以用戶體驗(yàn)為核心，因?yàn)橛脩趔w驗(yàn)是較終決定應(yīng)用性格的東西。

促進(jìn)合作

UI的設(shè)計(jì)通常涉及到的人不止一個(gè)。其中還可能包括客戶、設(shè)計(jì)師、程序員以及一大堆的其他職位工作人員，具體要取決于公司的規(guī)模大小。從很多方面說，這就類似于一隊(duì)人劃船。要贏得比賽，團(tuán)隊(duì)的每個(gè)成員都要以相同的速度朝著相同的方向一齊劃槳。這并不是說所有人的意見都要始終統(tǒng)一，而是說所有人都要有統(tǒng)一的目標(biāo)并且清楚自己在團(tuán)隊(duì)中的角色。

雖然我們?cè)贑itrusBits所采用的流程遠(yuǎn)算不上好，但是我們卻發(fā)現(xiàn)用戶故事能夠船上的人勁都往一處使。以用戶故事為基準(zhǔn)做出決策讓我們得以明確定義出應(yīng)用的目標(biāo)。這樣一來就大大降0了團(tuán)隊(duì)合作時(shí)的障礙，因?yàn)槲覀冇煤喍獭⒂嗅槍?duì)性的詞句明確定義出了共同的目標(biāo)。

另外，用戶故事還能讓身處不同地理位置的團(tuán)隊(duì)更加輕松的合作。我們?cè)跒橐患遗f金山客戶開發(fā)一款問答類應(yīng)用時(shí)，我們?cè)诤车貐^(qū)的團(tuán)隊(duì)會(huì)時(shí)不常的和客戶碰面討論應(yīng)用要求。他們寫出了用戶故事（但并沒有在項(xiàng)目期間進(jìn)行其他修改）然后放到了GoogleDrive。而我們身處洛杉磯的團(tuán)隊(duì)則可以在畫線框圖的同時(shí)隨時(shí)參考用戶故事，并進(jìn)行必要的改動(dòng)。要不是有了這個(gè)步驟，這個(gè)項(xiàng)目所花費(fèi)的時(shí)間會(huì)長的很多，而且還會(huì)需要通過大量漫長的解釋工作來解決這些簡短用戶故事幾分鐘就能解決的問題。

防止出現(xiàn)功能蔓延以及設(shè)計(jì)死胡同

“功能蔓延”是一個(gè)UI設(shè)計(jì)中常見的詞。它是指相關(guān)人員會(huì)不自覺地不斷增加新功能，擴(kuò)展項(xiàng)目范圍，這既包括硬件也包括軟件方面。

當(dāng)然，在項(xiàng)目進(jìn)展期間我們是不反對(duì)更改要求的。但是，除非有明確的用戶故事告訴我們?cè)?，我們?huì)拒絕哪怕添加一個(gè)簡單的文本框。我們之所以在這方面這么強(qiáng)硬，是因?yàn)橹翱吹竭^有的項(xiàng)目超出控制、丟掉中心較后無法實(shí)現(xiàn)較初設(shè)定的目標(biāo)。

舉個(gè)例子，不久之前，我們有個(gè)客戶忽略了用戶故事這回事。當(dāng)時(shí)我們正在給一家處理保密資產(chǎn)的公司搭建應(yīng)用，客戶想要做一款能夠管理員工之間通訊的應(yīng)用。主要的通訊手段是一個(gè)使用文字信息和圖片的公司內(nèi)部對(duì)話平臺(tái)（這一點(diǎn)我們都承認(rèn)了），這個(gè)我們記錄到了用戶故事里。后來，客戶又要求增加視頻、語音信息和位置分享。為了保持我們“靈活”的形象，我們想辦法把這些內(nèi)容加入了新的通訊系統(tǒng)，也因此擴(kuò)大了項(xiàng)目范圍，推遲了時(shí)限，在做完了全部工作之后我們卻發(fā)現(xiàn)添加的內(nèi)容其實(shí)對(duì)終端用戶沒用。

盡管新增的功能也很屌，但我們較開始的初衷是做一款盡量簡化通訊的應(yīng)用以便促進(jìn)團(tuán)隊(duì)建設(shè)和協(xié)作，不讓他變成一個(gè)公司內(nèi)部的Facebook。于是，我們又回到了用戶故事并重新提醒了客戶做應(yīng)用的初衷，較后成功組織了功能蔓延，回到了正軌。多方面的實(shí)驗(yàn)盡管能帶來很多很棒的成果，但是如果產(chǎn)品無法滿足根本要求，再精巧也沒意義。

產(chǎn)品從較初設(shè)計(jì)到較終成品變化非常小

每個(gè)用戶故事對(duì)于設(shè)計(jì)團(tuán)隊(duì)和開發(fā)團(tuán)隊(duì)來說都有自己的一套意義。時(shí)刻思考技術(shù)限制雖然說是好的，但是畢竟我們說的是“用戶故事”，不是“開發(fā)的故事”也不是“設(shè)計(jì)師的故事”。正因?yàn)槲覀兺ㄟ^用戶故事對(duì)用戶的觀點(diǎn)進(jìn)行了排序整理，我們才能更輕松地了解所面臨的問題進(jìn)而創(chuàng)造出一款真正有用的較終產(chǎn)品。

后續(xù):

下面是幾條大家做UI設(shè)計(jì)時(shí)思考用戶故事的提示：

在開始視覺設(shè)計(jì)之前確定出完整的一套用戶故事。抑制住自己直接跳入設(shè)計(jì)的沖動(dòng)可以節(jié)省時(shí)間，避免不必要的頭痛和無用功。對(duì)于每個(gè)用戶故事，看看是否能繼續(xù)細(xì)化成更具體的故事。

長篇大論適合于從宏觀角度概括所需功能，但是細(xì)枝末節(jié)的地方也不能忽略。在早期深入細(xì)節(jié)，從一開始就解決實(shí)用性問題。不要把設(shè)計(jì)元素放到?jīng)]有對(duì)應(yīng)用戶故事的界面上。

對(duì)每個(gè)元素的內(nèi)容和產(chǎn)生原因進(jìn)行記錄可以讓條理更清晰，在向開發(fā)團(tuán)隊(duì)移交時(shí)會(huì)更加順利。

【網(wǎng)站設(shè)計(jì)速成三部曲】

Step1：打好設(shè)計(jì)基礎(chǔ)是關(guān)鍵呦！
《從現(xiàn)實(shí)到網(wǎng)站！暖到心窩里的情感化設(shè)計(jì)》

Step2：進(jìn)階技巧！向高手模仿是捷徑！
《視覺盛宴！利用色彩沖突的網(wǎng)站設(shè)計(jì)》

Step3：直接開掛！不高級(jí)但一定正確！
《解讀：高級(jí)banner成就高大上的網(wǎng)站》

網(wǎng)站欄目：用戶故事：網(wǎng)站建設(shè)UI設(shè)計(jì)的基石
本文URL：http://bm7419.com/article18/eeoegp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、小程序開發(fā)、做網(wǎng)站、網(wǎng)站導(dǎo)航、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)