如何在APP原型上寫需求?

5 評論 10182 瀏覽 167 收藏 11 分鐘

你有沒有過這樣的經(jīng)歷——辛辛苦苦寫了半天的文檔, 結(jié)果開發(fā)一眼沒看,做需求的時候又把文檔里的內(nèi)容問了一遍?如果你也有這樣的經(jīng)歷,那么在APP原型上寫需求,或許能幫你解決這個問題。

為什么要把需求直接寫在原型上?

  • 沒有開發(fā)愿意看臃雜的需求文檔,包括直接寫在原型上的。
  • 便捷高效(詳細(xì)的word文檔會讓文檔撰寫變得異常耗時,稍有改動,更新文檔簡直要命;而且漢語博大精深,文案越多產(chǎn)生的歧義越多,親身體驗(yàn))
  • 方便版本迭代

如何在APP原型上寫需求?

首先將APP經(jīng)常需要寫需求的對象羅列出來,并分析其屬性,精煉出書寫字段模板。直接上圖:

以下是本人認(rèn)為APP常遇到需要“寫需求的點(diǎn)”:

  1. 功能的邏輯
  2. 功能的規(guī)則
  3. 按鈕
  4. 文本框
  5. 文本標(biāo)簽
  6. 特殊面板
  7. 版本的迭代

(上圖中并沒有對“面板”的介紹,因?yàn)槊姘鍖懽鞣绞礁粹o類似,但面板中的元件比按鈕要復(fù)雜,所以本人將其單獨(dú)列出)

本人將就以上幾類“對象”如何和諧地寫在原型上做詳細(xì)說明。在此之前,需要介紹一下Axure的“說明”功能。

Axure9.0版本說明功能更加豐富、美觀,展示上更加顯眼。它允許我們提前設(shè)置好說明字段,我們寫需求的時候可以跟著標(biāo)簽文案思考,減少漏寫需求。見下圖:

大家可以根據(jù)需求添加,這個是我常使用的字段集。

1. 文本框

文本框主要用途是鍵入內(nèi)容,常用的書寫字段有以下3種:

(1)基本說明

  • 字段類型:文本
  • 長度規(guī)則:11位;超過xx位省略處理
  • 是否必填:是
  • 校驗(yàn)規(guī)則:為空校驗(yàn)、有效性校驗(yàn)

(2)交互說明

  • 點(diǎn)擊獲取光標(biāo),調(diào)取鍵盤、顯示清除圖標(biāo);
  • 失去光標(biāo),收回鍵盤,隱藏清除圖標(biāo)等

(3)特殊情況

  • 獲取光標(biāo)時調(diào)用什么鍵盤類型、向上推動頁面方便鍵入
  • 文本框是否記錄上次使用的號碼

2. 按鈕

本人定義的按鈕——可以點(diǎn)擊的單個對象(復(fù)雜的面板可放在面部一欄撰寫):按鈕、鏈接文字、圖標(biāo)等。按鈕主要是和用戶產(chǎn)生交互的,若只展示文案,請采用標(biāo)簽文本撰寫。

按鈕的交互結(jié)果會有很多形式,常見的有以下幾種:

  • 頁面跳轉(zhuǎn)
  • xx對象被選中
  • xx文本改變
  • 彈出彈框
  • 彈出toast氣泡
  • 操作完成發(fā)送短信、推送、通知等

故此,按鈕需求書寫,本人總結(jié)的書寫需求的字段如下:

  • 狀態(tài)說明:詳細(xì)列舉按鈕可能的變化:按鈕文案、顏色、可點(diǎn)擊性變化等。這里請不要寫入任何交互需求
  • 交互說明:詳細(xì)列舉各狀態(tài)(未登錄時、非會員用戶等)下,點(diǎn)擊按鈕的交互,以及對應(yīng)的結(jié)果(成功、失敗、跳轉(zhuǎn)頁面等)。
  • 操作提醒:列舉各種操作結(jié)果對應(yīng)的toast提示語
  • 特殊說明:對特殊信息、規(guī)則進(jìn)行補(bǔ)充。比如“上文提到的新用戶定義“、”計(jì)算公式“等
  • 通知:操作完成后如果觸發(fā)短信通知、或者推送消息,可在此標(biāo)簽下數(shù)撰寫。該點(diǎn)是產(chǎn)品們常常遺漏的點(diǎn)

3. 文本標(biāo)簽

文本標(biāo)簽作用是展示信息。由于用戶身份、狀態(tài)的改變或者按鈕交互,會導(dǎo)致標(biāo)簽的文本改變,有的甚至是樣式的改變。

故此,本人總結(jié)的書寫需求字段如下

  • 長度規(guī)則:字?jǐn)?shù)限制、x行顯示多余省略等
  • 狀態(tài)說明:文本標(biāo)簽在不同條件下可以呈現(xiàn)不同的狀態(tài)
  • 特殊說明:根據(jù)實(shí)際情況補(bǔ)充細(xì)節(jié),沒有的話則無需注明

4. 面板

關(guān)于面板,我們最熟知的就是”動態(tài)面板“,本人定義的面板是APP頁面的某一版塊,通常包含很多元素。面板通常是在繪制頁面完成后已經(jīng)顯現(xiàn)出來——繪制原型的時候已經(jīng)對各個版塊命名了。常見的面板有兩類:

  1. 列表:例如”人人都是產(chǎn)品經(jīng)理APP“——學(xué)院面板里分類的各個版塊(免費(fèi)課程、熱門課程)。
  2. 功能區(qū):隨著用戶身份、時間段等因素的不同,整塊內(nèi)容都會發(fā)生變化。例如:支付寶——福滿全球。

面板不但可以只是展示使用,還可以作為一個對象,進(jìn)行各種各樣的交互:點(diǎn)擊、滑動。故此,本人寫作時,把面板與按鈕分出來單獨(dú)書寫,開發(fā)閱讀起來會更直觀。書寫字段有以下幾種:

  • 展示規(guī)則:
  • 交互說明:
  • 操作提醒:
  • 特殊說明:

(它跟按鈕的書寫字段類似,跟按鈕區(qū)分出來,是因?yàn)橛袝r面板的展示規(guī)則書寫會比按鈕的復(fù)雜;很多時候,我們需要把面板的不同狀態(tài)都給畫出來,給開發(fā)查看,而按鈕不需要。)

5,如何在一個頁面上展示多個不同的面板?

大家都知道使用Axure的動態(tài)面板,但是該怎么展現(xiàn)出來呢,本人字設(shè)計(jì)了一個需求撰寫表格,方便應(yīng)對這種情況:

Axure上的交互動作可以設(shè)置多種不同的情形,開發(fā)需要查看時,可點(diǎn)擊查看不同的狀態(tài);避免我們在一個頁面復(fù)制多個圖片,使文檔變得復(fù)雜。

6. 如何便捷地進(jìn)行版本迭代?

當(dāng)前版本的需求高亮顯示,往期的需求變化繼續(xù)保留,色塊置灰。

7. 功能邏輯和功能規(guī)則

功能邏輯很多時候不需要使用到流程圖,功能邏輯多數(shù)情況可以通過頁面層級展示出來。功能邏輯非同業(yè)務(wù)邏輯。本人建議在規(guī)劃功能點(diǎn)的時候一定要畫功能邏輯圖,避免設(shè)計(jì)功能時有遺漏,在書寫需求的時候,可以根據(jù)復(fù)雜程度選擇是否展示(一般不需要)。

功能邏輯由于跟頁面跳轉(zhuǎn)掛鉤,請學(xué)好Axure基本交互,這個是產(chǎn)品經(jīng)理的基本要求。本人會再出一期在Axure使用中基礎(chǔ)但是很便捷的技巧合集。

功能規(guī)則可在該功能頁面——需求撰寫表格里分條列述,這些都是規(guī)劃功能時需要考慮周全的,在寫需求的時候沒什么好說的。

需求書寫位置要求

針對上面提到的7個點(diǎn),請制定自己的書寫習(xí)慣:是寫在需求列表上,還是寫在“說明”彈框里。定下來后,需求評審的時候跟開發(fā)介紹查看需求的規(guī)則,整個文檔請嚴(yán)格按照規(guī)則書寫,避免開發(fā)一臉懵逼。由于彈框相對于表格比較隱蔽,本人將復(fù)雜的“需要寫需求的點(diǎn)”放在表格里,如下:

  • 需求表格里:面板、按鈕、規(guī)則、其他(一次性展示的功能模塊:彈框)
  • 說明彈框里:文本標(biāo)簽、文本輸入框

其它補(bǔ)充

把需求寫完整和清晰,是每個產(chǎn)品經(jīng)理的職責(zé),不單單是把需求寫出來了而已。想到哪寫到哪,經(jīng)常會遺漏,而且維護(hù)起來自己都找不到在哪。

1.?建議將自己在項(xiàng)目中經(jīng)常忘記、被開發(fā)吐槽的點(diǎn)列舉出來。

本人的需求表格第一行就是常忘記的點(diǎn),先把它錄入進(jìn)去,設(shè)置好常用的參數(shù),遇到特殊情況可直接進(jìn)行修改,沒有特殊情況,可直接按照預(yù)設(shè)需求進(jìn)行開發(fā)。

2. 將常用的模塊或者交互規(guī)則寫在全局說明里。

比如手機(jī)文本框的基本參數(shù)和交互、獲取驗(yàn)證碼按鈕的狀態(tài)說明 交互說明 等。

3. 保證大的前提不變的情況下,請根據(jù)實(shí)際情況調(diào)整

寫作的目的是為了讓需求簡單易懂、美觀,文檔搞得越復(fù)雜,開發(fā)心情越糟糕,在適當(dāng)?shù)臅r間點(diǎn)和合適的位置列出需求說明,可以讓開發(fā)同學(xué)不那么煩躁。

這些只是一些個人總結(jié),如果照搬照抄可能會讓你的需求寫起來四不像。

最后,還是希望能幫到你!

 

本文由 @最多只能7個字 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于CC0協(xié)議。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 我覺得主要是先解決開發(fā)嫌太長不想看,及按隨意做出Bug抱怨需求不明確的問題

    來自福建 回復(fù)
    1. 一針見血

      來自廣東 回復(fù)
  2. 原型寫畫面設(shè)計(jì)書的整體框架可以補(bǔ)充一下,說明這種方式我這邊也有在用,還是不錯的!

    來自遼寧 回復(fù)
  3. 作者老師寫的好多好棒!看了你的文章,補(bǔ)全了我很多個思維漏洞。提個建議:希望能有一些圖,比如說“面板”的類型有什么。這樣可能會讓我等小白更加簡潔明了~

    來自北京 回復(fù)
    1. 已經(jīng)更新上去了

      回復(fù)