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

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

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

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

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

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

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

2.用戶故事可以促進團隊成員之間的合作。

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

什么是用戶故事？

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

一個用戶故事就是簡單的一句話?？梢杂眠@句作為模板：“作為用戶我需要（基本用戶目標(biāo)）”。因為故事都很簡短而且有針對性，所以需要多個不同的故事來覆蓋所有可能的用戶案例。事實上，我們會想辦法把每個故事進行細化。

舉個例子，一個用戶故事剛開始時是：

“作為用戶我需要創(chuàng)建一個新帳戶。”

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

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

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

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

以用戶為中心

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

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

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

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

把“保存”一詞改成“收藏”這個決定雖小但很關(guān)鍵，因為“保存”用戶聽起來冷冰冰的，而“收藏”則契合了用戶有關(guān)約會的心態(tài)。設(shè)計師容易陷入到技術(shù)的陷阱中，特別是在對功能投入了大量時間之后。而用戶故事可以提醒我們時刻以用戶體驗為核心，因為用戶體驗是較終決定應(yīng)用性格的東西。

促進合作

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

雖然我們在CitrusBits所采用的流程遠算不上好，但是我們卻發(fā)現(xiàn)用戶故事能夠船上的人勁都往一處使。以用戶故事為基準(zhǔn)做出決策讓我們得以明確定義出應(yīng)用的目標(biāo)。這樣一來就大大降0了團隊合作時的障礙，因為我們用簡短、有針對性的詞句明確定義出了共同的目標(biāo)。

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

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

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

當(dāng)然，在項目進展期間我們是不反對更改要求的。但是，除非有明確的用戶故事告訴我們原因，我們會拒絕哪怕添加一個簡單的文本框。我們之所以在這方面這么強硬，是因為之前看到過有的項目超出控制、丟掉中心較后無法實現(xiàn)較初設(shè)定的目標(biāo)。

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

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

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

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

后續(xù):

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

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

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

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

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

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

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

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

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

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎ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)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)