2015-5-25 用心設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
每一個(gè)扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)
你知道如何講述用戶故事么？你是通過(guò)什么方式知道的？你確定你不是湊合應(yīng)付一下？
去年我在寫一篇關(guān)于如何把不同的經(jīng)驗(yàn)匯集在一個(gè)軟件項(xiàng)目中的文章。我將它稱為：我們?nèi)?何共同工作。我對(duì)設(shè)計(jì)和技術(shù)方面的那些專業(yè)知識(shí)是我們的客戶端必要的特別感興趣。這個(gè)思想的萌芽被我放在記事本的維恩圖中，與我的其他想法一同放在我的大 綱中。這個(gè)圖是很常見(jiàn)的那種圖：“你的專業(yè)知識(shí)”這個(gè)圓圈與“我們的專業(yè)知識(shí)”這個(gè)圓圈有部分重疊。這個(gè)點(diǎn)子是為了探討兩個(gè)圓圈重疊的部分-我們?cè)鯓舆\(yùn)用 數(shù)字營(yíng)銷的專業(yè)知識(shí)按照流程建立一個(gè)獲取和組織客戶知識(shí)的平臺(tái)。但缺少了些東西。去年年底時(shí)，這些想法和記錄都被其他事物所淹沒(méi)，直到最近我才又開(kāi)始思考 起來(lái)。
就像我們經(jīng)常在年初做的那樣，我們經(jīng)常質(zhì)疑一些假想，組織一下語(yǔ)言和優(yōu)化一些流程。這時(shí)我回顧之前的筆記，立刻意識(shí)到在維恩圖中遺漏了什么。任何項(xiàng) 目都是利用各種知識(shí)綜合而成的，信息的交換和新事物的派生完全是合作的結(jié)果，但起到最關(guān)鍵作用的還是我們平臺(tái)的目標(biāo)用戶。我的第一個(gè)維恩圖里包含著一個(gè)基 本公式：客戶知識(shí) + 產(chǎn)品設(shè)計(jì)人員知識(shí) = 有用的東西，但這并不完全正確，更好的表達(dá)應(yīng)該是：客戶知識(shí) + 使用者知識(shí) + 產(chǎn)品設(shè)計(jì)人員知 識(shí) = 有用的東西。使用者的知識(shí)是客戶經(jīng)驗(yàn)和我們?cè)O(shè)計(jì)者經(jīng)驗(yàn)的橋梁。維恩圖還需要一個(gè)圓圈才是完整的！
問(wèn)題已經(jīng)明確，你如何了解用戶的知識(shí)？產(chǎn)品設(shè)計(jì)者和客戶溝通合作很容易，但讓使用者也加入進(jìn)來(lái)就很復(fù)雜了。有兩種方式可以確保在保持合作不變得復(fù)雜的情況下你能準(zhǔn)確的代表使用者：
1. 確保你很清楚使用者是什么樣的人。通過(guò)與他們交流，利用你從交流中獲得的信息建立用戶角色。
2. 觀察使用產(chǎn)品的過(guò)程。這意味著要做用戶可用性研究，利用在使用過(guò)程中獲得的信息更好的去理解如何為真實(shí)的使用者去設(shè)計(jì)產(chǎn)品。
以上都不是什么新奇的方法，如果你是我們的老讀者，你就會(huì)非常熟悉它們；你可能已經(jīng)實(shí)踐過(guò)上面提到過(guò)的方法。一旦你已經(jīng)獲取了使用者知識(shí)，你知道怎么去利用它么？
如果沒(méi)有使用者知識(shí)，我們傾向于通過(guò)分析去梳理信息架構(gòu)和用戶界面設(shè)計(jì)，以我們自己認(rèn)為有意義的方式和想傳達(dá)的信息來(lái)確定結(jié)構(gòu)，但是這樣的方式并不 總是對(duì)我們的用戶有意義。為了避免我們分析的局限性，我們需要在規(guī)劃程序時(shí)引入敘述故事。具體來(lái)說(shuō)我們需要以需求 > 體驗(yàn) > 結(jié)果順序的 敘事為基礎(chǔ)仔細(xì)考慮每一個(gè)設(shè)計(jì)決策點(diǎn)。用戶的需求是什么？我們的解決方案要?jiǎng)?chuàng)造哪種體驗(yàn)？我們的方案能奏效么？
我們需要一種方法將使用者知識(shí)引入設(shè)計(jì)過(guò)程中，這樣我們才能更加明白用戶需求，創(chuàng)造更好的用戶體驗(yàn)，帶來(lái)令人滿意的結(jié)果。
用戶訪談和可用性研究的原始數(shù)據(jù)當(dāng)然很有價(jià)值，但處理這些數(shù)據(jù)還需要四個(gè)步驟，形成一個(gè)鏈條逐步加深理解，讓你的每一點(diǎn)設(shè)計(jì)都趨于成熟。讓我們現(xiàn)在就來(lái)回顧一下這四點(diǎn)。
用戶故事
用戶故事是一個(gè)用來(lái)確認(rèn)用戶和用戶的需求的簡(jiǎn)短的描述，把你的用戶角色提煉出來(lái)。因?yàn)橛脩艚巧话愣急容^常規(guī)，你可能需要用幾個(gè)用戶故事來(lái)組成一個(gè)豐富的用戶角色。這里有一個(gè)假設(shè)的工業(yè)零件數(shù)據(jù)庫(kù)的用戶故事。
“作為一個(gè)工業(yè)設(shè)備管理員，凱西非常盡責(zé)的保持生產(chǎn)系統(tǒng)的正常運(yùn)轉(zhuǎn)，包括保持設(shè)備的功能正常。她需要快速掌握維修信息和設(shè)備的零件庫(kù)存情況?！?
注意這個(gè)用戶故事中包含了她是誰(shuí)，她有什么需求以及她為什么有這樣的需求。
在設(shè)計(jì)相同的網(wǎng)站時(shí)另一個(gè)用戶故事的例子也能滿足我們第一個(gè)用戶的需求：
“杰克是一個(gè)小型園林綠化公司的老板，他的需求是能夠訂購(gòu)替換零件并且能夠安全的自己替換零件?！?
第二個(gè)例子使用了與第一個(gè)例子相同的結(jié)構(gòu)，但代表著完全不同的用戶。一個(gè)工業(yè)零件數(shù)據(jù)庫(kù)可能有一大堆使用者，各式各樣的需求。用戶故事用來(lái)記錄用戶 需求的差異。我參與的項(xiàng)目經(jīng)常是這樣的，哪怕是做一個(gè)利基設(shè)備供應(yīng)的數(shù)據(jù)庫(kù)也要用好幾個(gè)用戶故事來(lái)塑造用戶角色。最近的一個(gè)項(xiàng)目中我們?cè)O(shè)定了6個(gè)有些不同 的用戶角色，這意味著至少需要20個(gè)用戶故事，好在這些故事都很短。
用戶場(chǎng)景
對(duì)于如何理解和使用一個(gè)系統(tǒng)，用戶場(chǎng)景通過(guò)細(xì)節(jié)豐富用戶故事。跟用戶故事差不多，你也要按照設(shè)想為你的用戶角色設(shè)計(jì)一些不同的場(chǎng)景。你設(shè)計(jì)的場(chǎng)景要表現(xiàn)出用戶的目標(biāo)，可能涉及到的知識(shí)以及用戶交互體驗(yàn)的細(xì)節(jié)。
下面是一個(gè)用情場(chǎng)景的例子，還是關(guān)于工業(yè)零件網(wǎng)站的：
“杰瑞自從10年前高中畢業(yè)之后就幫助爹管理馬薩諸塞州西部的一個(gè)通用設(shè)備商店。杰瑞的父親去年就徹底退休了，讓杰瑞主管商店。他們家唯一的一臺(tái)木 片切割機(jī)已經(jīng)壞了，這臺(tái)機(jī)器是在杰瑞還在上學(xué)時(shí)買的，杰瑞想找到這臺(tái)機(jī)器的操作手冊(cè)，好在網(wǎng)上了解一下設(shè)備制造商和設(shè)備的型號(hào)。他在網(wǎng)上搜索到不少這臺(tái)切 割機(jī)的信息，他選擇了第一條瀏覽，并且在切割機(jī)結(jié)果頁(yè)面中發(fā)現(xiàn)了一個(gè)用戶手冊(cè)的PDF文件下載鏈接。他閱讀了PDF找到了一張液壓泵以及操作桿部件號(hào)的圖 片，但是這個(gè)頁(yè)面沒(méi)有顯示他可以訂購(gòu)這個(gè)部件。他想在網(wǎng)上聯(lián)系廠家弄清楚怎么訂購(gòu)這個(gè)零件。杰瑞的老顧客，本地的鄉(xiāng)村俱樂(lè)部?jī)芍芮熬拖虢邮诌@臺(tái)切割機(jī) 了。”
注意這個(gè)用戶場(chǎng)景交代了哪些背景信息，他的需求的上下聯(lián)系，并且盡量描述由于他知識(shí)局限性在整個(gè)過(guò)程中產(chǎn)生的困難。
使用案例
使用案例是一個(gè)長(zhǎng)長(zhǎng)的列表，列出了用戶在完成一件事情的每個(gè)步驟。它起始于任何能促使用戶與系統(tǒng)交互的事件服務(wù)，然后詳細(xì)的描述他們需要操作的每一個(gè)步驟，無(wú)論他們是成功實(shí)現(xiàn)目的還是沒(méi)有成功。以此說(shuō)明用戶是如何到達(dá)那的。
下面這個(gè)例子是以前面杰瑞的案例為基礎(chǔ)的：
杰瑞的切割機(jī)壞掉了，他：
1.找到用戶手冊(cè)，確定機(jī)器的名稱和型號(hào)；
2.在google的搜索框中輸入機(jī)器名稱和型號(hào)；
3.按回車；
4.顯示搜索結(jié)果后，瀏覽頁(yè)面上的機(jī)器名稱和型號(hào)；
5.沒(méi)有找到結(jié)果，修改；
6.在搜索框輸入機(jī)器名稱；
7.按回車；
8.顯示搜索結(jié)果，瀏覽頁(yè)面；
9.找到了機(jī)器目錄；
10.點(diǎn)擊超鏈接；
11.制造商網(wǎng)站加載出切割機(jī)的詳情頁(yè)面；
12.在頁(yè)面上尋找機(jī)器型號(hào)；
13.找到用戶手冊(cè)的鏈接；
14.下載PDF文件；
15.打開(kāi)PDF文件然后查找機(jī)器型號(hào)，發(fā)現(xiàn)在手冊(cè)中這個(gè)型號(hào)可能有三款機(jī)器；
16.瀏覽PDF他覺(jué)得需要維修相關(guān)的內(nèi)容；
17.在液壓泵示意圖中找到零件編號(hào)列表；
18.試圖復(fù)制粘貼內(nèi)容，沒(méi)成功，發(fā)現(xiàn)文字是在圖片中的；
19.在紙上把零件編號(hào)記下來(lái)；
20.回到制造商網(wǎng)站上；
21.在制造商網(wǎng)站的搜索框中輸入零件編號(hào)；
22.點(diǎn)擊“前往”按鈕；
23.搜索結(jié)果頁(yè)面是空的，沒(méi)有結(jié)果；
24.在導(dǎo)航中尋找制造商的聯(lián)系方式；
25.點(diǎn)擊“聯(lián)系我們”；
26.加載出聯(lián)系我們頁(yè)面后，瀏覽頁(yè)面表格，填寫相關(guān)信息；
7.點(diǎn)擊“提交”按鈕；
這個(gè)詳細(xì)的例子體現(xiàn)了好多個(gè)可以優(yōu)化的體驗(yàn)點(diǎn)。以這個(gè)例子作為指導(dǎo)，對(duì)優(yōu)化切割機(jī)詳情頁(yè)提供了參考，例如讓設(shè)備型號(hào)顯示更明顯，豐富相關(guān)型號(hào)的資源，包括網(wǎng)頁(yè)內(nèi)容搜索和聯(lián)系方式登記表。這種用例也可以通過(guò)可用性測(cè)試來(lái)發(fā)現(xiàn)或驗(yàn)證
用戶流
最后，用戶流是一種用來(lái)描述用戶是如何面對(duì)你網(wǎng)站內(nèi)容的有組織的可視化文檔，以及用戶訪問(wèn)網(wǎng)站時(shí)與網(wǎng)站的一系列交互順序。通過(guò)采用更直接地信息架構(gòu)和用戶界面的設(shè)計(jì)決策呈現(xiàn)出你的故事，場(chǎng)景和案例。
下面是一張例圖，展示了用戶登錄一個(gè)指定活動(dòng)的計(jì)劃登陸頁(yè)的所有可能的路徑。（注意：線下或流量來(lái)源還應(yīng)該包含搜索）：
下面是一個(gè)用戶到達(dá)你網(wǎng)站之后可能的訪問(wèn)路徑展示圖：
通過(guò)這些初級(jí)的流程圖變成細(xì)節(jié)更豐富的線框圖和原型圖。在流程圖中從一個(gè)點(diǎn)到另一個(gè)點(diǎn)的清晰描述要比羅列出所有的點(diǎn)更重要。一旦流程圖已出，你最好趁熱打鐵開(kāi)始畫原型，而不要徘徊猶豫患得患失。
做有用的事
從用戶故事開(kāi)始，然后到用戶場(chǎng)景，再到詳細(xì)的用戶用例，到最后在用戶流中提現(xiàn)所有信息。這個(gè)過(guò)程是從用戶研究到產(chǎn)品設(shè)計(jì)之間的一座橋梁。它讓你通過(guò) 用戶訪談、可用性研究收集來(lái)的信息能夠被更科學(xué)的處理和更好的與用戶體驗(yàn)設(shè)計(jì)結(jié)合成為可能，因此你最后能夠做出一些有用的東西。記住，這是一個(gè)可循環(huán)的持 續(xù)性工作模式，不是一次性的工作，一旦你開(kāi)始了，就要一遍一遍的做。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sillybuy.com