需求整理的現(xiàn)狀

寫這篇文章的初衷，是在實際工作中遇到 PRD & DRD 文檔，對于一些交互設(shè)計圖，會產(chǎn)生不理解，或者說在實際落地畫圖的時候會發(fā)現(xiàn)一些前后不一致的問題，解釋過于冗余，不清晰。在接觸新的業(yè)務(wù)時，很難把新理解的內(nèi)容從上至下的消化完整。所以希望通過這篇文章幫助剛接觸交互的同學(xué)更好地開展交互設(shè)計工作。

在傳統(tǒng)瀑布式需求分析流程中，我們設(shè)計師往往拿到的是已成型的信息架構(gòu)圖&產(chǎn)品結(jié)構(gòu)圖&關(guān)鍵業(yè)務(wù)流程圖，只是了解一下大概是什么類型的產(chǎn)品，很難發(fā)現(xiàn)企業(yè)產(chǎn)品中真正關(guān)鍵的流程價值點在哪里，或者說也不清楚后續(xù)發(fā)展的走向，只能卯足了勁去做圖做說明，整理完整。時間緊迫壓力大，又要照顧整個項目。往往決定產(chǎn)品成功與否的，是產(chǎn)品 20% 的主要功能（二八原則）。所以在面臨初期產(chǎn)品設(shè)計中，應(yīng)該將主要精力放在重要功能流程中。

目前，在互聯(lián)網(wǎng)產(chǎn)品中，敏捷開發(fā)是所有產(chǎn)品設(shè)計者最推崇的。原因在于，能夠?qū)I(yè)務(wù)、設(shè)計、開發(fā)更有前瞻性&敏捷性。

理解業(yè)務(wù)需求，是做好交互的首要條件

產(chǎn)品交互的成功一定是建立在業(yè)務(wù)需求提煉清晰的基礎(chǔ)上。業(yè)務(wù)需求的價值提煉，也是設(shè)計師需要參與完成的。業(yè)務(wù)需求是一個比較大的任務(wù)，來源可能是老板的要求，可能是產(chǎn)品提出的，也可能是用戶的反饋。通過業(yè)務(wù)需求，我們要分析出相關(guān)的業(yè)務(wù)目標(biāo)。有個偶然的機會，了解到彩色 UML 的設(shè)計方法，在具體實踐中，感覺這個方法能夠快速適應(yīng)任何業(yè)務(wù)流程，簡單方便，易懂，并能快速發(fā)現(xiàn)業(yè)務(wù)流程中的問題，加以修正完善。

彩色UML建模

有幸認(rèn)識王海鵬老師，他推薦了早年他翻譯的彩色 UML 建模一書，作者 Peter Coad，是將彩色和企業(yè)組件集成到建模技術(shù)之中的第一本書的主要作者，是世界上經(jīng)驗豐富的建模人員之一，他所創(chuàng)建的模型幾乎涉及到所有行業(yè)。

此書是第一本介紹用彩色來表達(dá)軟件設(shè)計的著作。作者用 4 種顏色來代表 4 種架構(gòu)型，給定一種顏色，你就知道這個類可能具有哪些屬性、鏈接、方法和交互。得到的彩色構(gòu)建塊能創(chuàng)建更好的模型，并獲得應(yīng)有的認(rèn)可。彩色和架構(gòu)型僅僅是開始。作者更進(jìn)一步將這些架構(gòu)型發(fā)展為 12 個類的領(lǐng)域無關(guān)組件。作者在過去 10 年中創(chuàng)建的每個模型，都遵循這個組件所表達(dá)的基本形狀和職責(zé)。

筆者利用彩色 UML 建模的設(shè)計方法，用于業(yè)務(wù)梳理工作，達(dá)到了意想不到的效果。以下為彩色 UML 建模基本概念（截取彩色 UML 建模書中的介紹）。

△ 《彩色UML建模書》第9頁

△ 《彩色UML建模書》第10頁

△ 事例會員注冊

交互設(shè)計中常用圖

1. 實體關(guān)系圖（又稱ER圖）

定義：ER 圖是用來描述現(xiàn)實世界中的實體關(guān)系模型，所謂實體是指客觀上或者邏輯上存在并且可以區(qū)分的人事物。

作用：促使你以最適合技術(shù)理解實現(xiàn)的方法，來規(guī)范的描述功能模塊的核心要素，其實就是數(shù)據(jù)庫的物理結(jié)構(gòu)。而這種描述是無二義的，最清晰傳達(dá) PM 的設(shè)計思想。

2. 功能結(jié)構(gòu)圖

功能結(jié)構(gòu)圖就是按照功能的從屬關(guān)系畫成的圖表，在該圖表中的每一個框都稱為一個功能模塊。功能模塊可以根據(jù)具體情況分得大一點或小一點，分解得最小功能模塊可以是一個程序中的每個處理過程，而較大的功能模塊則可能是完成某一個任務(wù)的一組程序。用通俗的話來說，功能結(jié)構(gòu)圖就是以功能模塊為類別，介紹模塊下各功能組成的圖表。

作用

• 梳理需求，以鳥瞰的方式對整個產(chǎn)品頁面中的功能結(jié)構(gòu)形成一個直觀的認(rèn)識。
• 思考并明確產(chǎn)品的功能模塊及其功能組成。

3. 信息結(jié)構(gòu)圖

信息架構(gòu)屬于用戶體驗的結(jié)構(gòu)層，是產(chǎn)品的骨架。一般是由產(chǎn)品經(jīng)理或者更高層的管理人員給出大框架。除非是大的產(chǎn)品迭代，否則不會大改。

作用

• 幫助 PM 梳理復(fù)雜內(nèi)容的信息組成，避免信息內(nèi)容在展示過程中出現(xiàn)遺漏、混亂、重復(fù)；
• 作為開發(fā)工程師建立數(shù)據(jù)庫的參考依據(jù)。

信息結(jié)構(gòu)圖構(gòu)成要素

• 導(dǎo)航：網(wǎng)頁訪問者的訪問途徑。
• 頻道：某一個同性質(zhì)的功能或內(nèi)容的共同載體，也可稱為功能或內(nèi)容的類別。
• 子頻道：某頻道下細(xì)分的另一類別。
• 頁面：單個或附屬某個頻道或分類下的界面。
• 模塊：頁面中多個元素組成的一個區(qū)域內(nèi)容，可以有一個或多個，也可以循環(huán)出現(xiàn)，如：文章列表。
• 模塊元素：模塊中的元素內(nèi)容，以文章列表舉例，文章標(biāo)題、文章摘要、文章發(fā)布時間，這些都是元素，都是組成模塊的內(nèi)容，同時他們也是可以循環(huán)出現(xiàn)的。元素的類型可以是：文字、圖片、鏈接等等。

4. 產(chǎn)品結(jié)構(gòu)圖

定義：產(chǎn)品結(jié)構(gòu)圖是綜合展示產(chǎn)品信息和功能邏輯的圖表，簡單說產(chǎn)品結(jié)構(gòu)圖就是產(chǎn)品原型的簡化表達(dá)。

作用：它能夠在前期的需求評審中或其他類似場景中作為產(chǎn)品原型的替代，因為產(chǎn)品結(jié)構(gòu)圖相較于產(chǎn)品原型，其實現(xiàn)成本低，能夠快速對產(chǎn)品功能結(jié)構(gòu)進(jìn)行增、刪、改操作，減少 PM 在這個過程中的實現(xiàn)成本。

5. 業(yè)務(wù)流程圖（泳道圖）

業(yè)務(wù)流程圖，不是操作流程圖也不是頁面流程圖。它是產(chǎn)品的整體業(yè)務(wù)流程，直接和業(yè)務(wù)掛鉤，可以說是產(chǎn)品的核心流程。

作用

通過業(yè)務(wù)流程圖，鉆研關(guān)鍵事件的流程，分析為什么要這么做，探索出更深層次的問題，從而對現(xiàn)有不合理的業(yè)務(wù)流程進(jìn)行重組優(yōu)化，進(jìn)而制定優(yōu)化方案，改進(jìn)現(xiàn)有流程；闡述在項目中各個角色是如何產(chǎn)生相關(guān)聯(lián)系的。

繪制規(guī)范/建議

• 讓涉眾參與，不要閉門造車：與業(yè)務(wù)流程圖包含的各個參與角色代表適時確認(rèn)事情的原本流程。
• 恰當(dāng)?shù)膶哟畏纸?，不要將所有的環(huán)節(jié)都鋪到一張圖上。
• 逐漸深入，先抓枝干：切忌一開始就陷入細(xì)節(jié)。
• 流程一定有開始和結(jié)束：切忌交出來的流程圖，讓讀者問：流程的開始點是什么？用清晰的代表開始和結(jié)束的符號來完成第一步和最后一 步。
• 流程圖符號繪制排列順序：由上至下，由左至右。
• 同一流程圖符號大小宜相對一致。
• 編號：這是讓溝通效率更高的優(yōu)化措施。當(dāng)你有了編號系統(tǒng)，相當(dāng)于對你的流程圖都賦予了唯一識別身份證號。負(fù)責(zé)流程規(guī)則審核和優(yōu)化的部門能夠清楚在郵件里傳達(dá) H5.1 流程優(yōu)化，大家就更明確指的是什么。
• 路徑符號應(yīng)避免互相交叉。

6. 任務(wù)流程圖

任務(wù)流程圖就是通過圖形化的表達(dá)形式，闡述產(chǎn)品在功能層面的邏輯和信息。它能夠更清晰、直觀地展示用戶在使用某個功能時，會產(chǎn)生的一系列操作和反饋的圖標(biāo)。

作用：基于業(yè)務(wù)流程，進(jìn)行任務(wù)流程梳理，闡述角色和程序發(fā)生交互的流程，你如何進(jìn)行操作，系統(tǒng)如何進(jìn)行反饋。

任務(wù)流程與需求文檔中的業(yè)務(wù)流程并不一樣。雖然它們都是流程圖，但業(yè)務(wù)流程更偏向于業(yè)務(wù)限制、后臺邏輯等，并不過分注重用戶的操作邏輯。而任務(wù)流程則需要關(guān)注用戶如何操作、界面如何反饋等，從而引導(dǎo)用戶完成用戶目標(biāo)。

7. 頁面流程圖

定義：指電子產(chǎn)品具體所呈現(xiàn)的頁面跳轉(zhuǎn)流程圖。其承載了業(yè)務(wù)流程圖所包含的業(yè)務(wù)流轉(zhuǎn)信息。

作用：

• 交互設(shè)計/原型設(shè)計的底子，基本依據(jù)。
• 站在用戶視角，代表用戶所有可能的操作過程，頁面流程能快速發(fā)現(xiàn)體驗問題。
• 突出頁面元素與邏輯關(guān)系，提升原型設(shè)計的效率。

8. 線框圖/原型圖

定義：頁面的模塊、元素、人機交互的形式，利用線框描述的方法，將產(chǎn)品脫離皮膚狀態(tài)下更加具體跟生動的進(jìn)行表達(dá)。

作用：用例闡釋者，用來了解用例的用戶界面；系統(tǒng)分析員，用來了解用戶界面如何影響系統(tǒng)分析；設(shè)計員，用來了解用戶界面如何施加影響及它對系統(tǒng)「內(nèi)部」的要求；類測試人員，用來制定測試計劃活動。

構(gòu)成要素

• 頁面標(biāo)題：即每一個頁面的對應(yīng)標(biāo)題，一般就是導(dǎo)航欄標(biāo)題。
• 頁面內(nèi)容：以黑白為主，保證信息規(guī)整易讀。
• 交互說明：用標(biāo)簽將其對應(yīng)起來，包括交互邏輯、操作流程及反饋、元素狀態(tài)、字符限制、異常/特殊狀態(tài)、相關(guān)規(guī)則等等。
• 主流程線：只需要畫出主流程線即可，千萬不可太多太雜，時刻考慮讀者的感受。

9. 線框圖/原型圖交互說明的幾種類型

限制

包含范圍值、極限值等。

范圍值主要指數(shù)據(jù)的取值范圍。比如，當(dāng)你的界面上出現(xiàn)了下拉菜單、篩選按鈕、滑塊等控件時，你必須標(biāo)注清楚它們的選擇范圍，否則開發(fā)人員就不清楚該如何設(shè)定，如圖所示。

極限值主要指數(shù)據(jù)的顯示限制。比如，最多應(yīng)該顯示多少字?jǐn)?shù)，過時如何顯示，是否折行等，如圖所示。

狀態(tài)

包含默認(rèn)狀態(tài)、常見狀態(tài)、特殊狀態(tài)等。

「默認(rèn)狀態(tài)」主要指默認(rèn)顯示的文字、數(shù)據(jù)、選項等。這些內(nèi)容需要注明，否則開發(fā)人員可能難以意識到這是用戶填完的效果，還是默認(rèn)就有的。

「常見狀態(tài)」主要指針對某一個模塊，經(jīng)常遇到的一些狀態(tài)。這些狀態(tài)都需要在原型上表述出來。比如一個普通的積分模塊，一般會出現(xiàn) 3 種狀態(tài)：未登錄狀態(tài)、登錄后未簽到狀態(tài)、登錄后已簽到狀態(tài)，如圖所示。

「特殊狀態(tài)」一般指非正常情況下的樣式、文案、說明等，如圖所示：

操作

包含常見操作、特殊操作、誤操作、手勢操作等。

「常見操作」主要指正常操作時得到的反饋狀態(tài)。比如一個普通的翻頁控件，在經(jīng)過不同操作后會立即出現(xiàn)如下的狀態(tài)。

「特殊操作」主要指一些極端情況下的操作。一般，用戶不會這么操作，但是一旦遇到極端情況，還是要想好應(yīng)對措施，因為對于開發(fā)人員來說，不管是正常的還是極端的操作情況，他們都要去編寫對應(yīng)的代碼。如下圖，是填寫用戶信息的例子，當(dāng)不寫交互說明時，開放往往會遇到很多問題：如果已經(jīng)勾選了 2 個人，再勾選第 3 個人，怎么辦？如果勾選了「張XX」，下面區(qū)塊中會相應(yīng)地出現(xiàn)張XX的信息，那么這時候允許修改張XX的身份證信息嗎？假如允許的話，修改后「張XX」還保持勾選狀態(tài)嗎？表單提交后要新增一個被保險人信息嗎？若修改的是除身份證號碼以外的信息，「張XX」 還保持勾選狀態(tài)嗎？提交表單時是覆蓋原存儲信息嗎？若修改后出生日期、性別與身份證號碼不吻合怎么辦？等等。

面對各種復(fù)雜的情況，一方面要和開發(fā)人員積極探討，看看有沒有其他的解決方法可以簡化各種邏輯判斷；另一方面，在得出結(jié)論后，要把交互說明寫清楚，避免出現(xiàn)讓開發(fā)人員感到棘手的情況。

「誤操作」主要指當(dāng)用戶操作錯誤時的情況。不過我們在設(shè)計時要盡量避免有用戶犯錯的機會。如圖所示，提示中已告訴用戶「庫存5件」，如果這個時候用戶在「數(shù)量」一欄中輸入「6」會怎么樣呢？系統(tǒng)會自動幫用戶將其改為「5」省去用戶手動修正的操作。

「手勢操作」主要指用戶使用移動產(chǎn)品時的操作方式。常見的有點擊雙擊、長按、捏、伸、滑動等等。

反饋

用戶操作后得到的反饋動作，包含提示、跳轉(zhuǎn)、動畫等。

「提示」主要指操作后，系統(tǒng)反饋給用戶的文字說明等，如圖所示。

「跳轉(zhuǎn)」主要指點擊某個鏈接后，頁面跳轉(zhuǎn)到哪里。設(shè)計師需要在原型上注明跳轉(zhuǎn)時是「原頁面刷新」還是「新頁面打開」。如果是做手機應(yīng)用的話，需要注明跳轉(zhuǎn)時的轉(zhuǎn)場方式，如圖所示。

「動畫」主要指用戶操作后，系統(tǒng)通過動畫的方式反饋給用戶。動畫給人的感覺比較友好、趣味性較強，是非常常見的一種反饋形式。比如刪除某條信息，該信息以漸變消失的形式告訴用戶：這條信息已經(jīng)被刪除了。在移動應(yīng)用中，動畫反饋的形式更為常見。因此設(shè)計師一定要在原型上表述清楚動畫的形式，必要時可以制作 domo 動畫演示效果給開發(fā)人員。

文章來源：站酷