交互設(shè)計(jì)師如何梳理業(yè)務(wù)需求?

2019-11-26    資深UI設(shè)計(jì)者

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

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

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

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

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

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

彩色UML建模

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

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

筆者利用彩色 UML 建模的設(shè)計(jì)方法,用于業(yè)務(wù)梳理工作,達(dá)到了意想不到的效果。以下為彩色 UML 建?;靖拍睿ń厝〔噬?UML 建模書(shū)中的介紹)。

△ 《彩色UML建模書(shū)》第9頁(yè)

△ 《彩色UML建模書(shū)》第10頁(yè)

△ 事例會(huì)員注冊(cè)

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

1. 實(shí)體關(guān)系圖(又稱(chēng)ER圖)

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

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

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

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

作用

  • 梳理需求,以鳥(niǎo)瞰的方式對(duì)整個(gè)產(chǎn)品頁(yè)面中的功能結(jié)構(gòu)形成一個(gè)直觀的認(rèn)識(shí)。
  • 思考并明確產(chǎn)品的功能模塊及其功能組成。
3. 信息結(jié)構(gòu)圖

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

作用

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

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

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

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

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

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

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

作用

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

繪制規(guī)范/建議

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

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

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

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

7. 頁(yè)面流程圖

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

作用:

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

8. 線(xiàn)框圖/原型圖

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

作用:用例闡釋者,用來(lái)了解用例的用戶(hù)界面;系統(tǒng)分析員,用來(lái)了解用戶(hù)界面如何影響系統(tǒng)分析;設(shè)計(jì)員,用來(lái)了解用戶(hù)界面如何施加影響及它對(duì)系統(tǒng)「內(nèi)部」的要求;類(lèi)測(cè)試人員,用來(lái)制定測(cè)試計(jì)劃活動(dòng)。

構(gòu)成要素

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

限制

包含范圍值、極限值等。

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

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

狀態(tài)

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

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

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

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

操作

包含常見(jiàn)操作、特殊操作、誤操作、手勢(shì)操作等。

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

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

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

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

「手勢(shì)操作」主要指用戶(hù)使用移動(dòng)產(chǎn)品時(shí)的操作方式。常見(jiàn)的有點(diǎn)擊雙擊、長(zhǎng)按、捏、伸、滑動(dòng)等等。

反饋

用戶(hù)操作后得到的反饋動(dòng)作,包含提示、跳轉(zhuǎn)、動(dòng)畫(huà)等。

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

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

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

文章來(lái)源:站酷

分享本文至:

日歷

鏈接

個(gè)人資料

存檔