Web產(chǎn)品的交互說明文檔應(yīng)該怎么寫?

31 評論 51258 瀏覽 622 收藏 7 分鐘

本文是作者的一篇隨筆,適合交互設(shè)計(jì)師閱讀,希望能給正在學(xué)習(xí)交互的朋友一些幫助。也希望朋友們,可以提出更多很好的建議。

經(jīng)常與開發(fā)同學(xué)聊天,他們說有一個(gè)詳細(xì)的說明文檔可以幫助他們更準(zhǔn)確的進(jìn)行工時(shí)評估,還可以幫助他們提高工作效率,減少多余的思考時(shí)間。因此在這里分享一些制作交互說明文檔的經(jīng)驗(yàn)。

我先說說說交互原型包含哪些部分?

  • 版本說明及更新說明
  • 頁面流程圖
  • 信息架構(gòu)圖
  • 業(yè)務(wù)流程圖
  • 任務(wù)流程圖
  • 線框圖和交互說明(這是我們今天主要說明的內(nèi)容)。

下圖為原型

Web產(chǎn)品的交互說明文檔應(yīng)該怎么寫?

原型通常分為低保真原型和高保真原型,交互說明文檔則是對原型說明的部分。我們在看到交互原型的時(shí)候,很難看到原型后面的交互邏輯,即使原型的交互操作做的非常詳細(xì),看原型的人還是不能很快知道全部的內(nèi)容。我們把交互的所有操作全部羅列出來,可以讓查看的原型的人能很快的理解你的交互流程。

所以交互說明是原型中不可缺少的一部分。交互說明會讓原型看起來更專業(yè),也讓開發(fā)同學(xué)更好的理解。下圖為交互說明的一個(gè)案例

Web產(chǎn)品的交互說明文檔應(yīng)該怎么寫?

Web產(chǎn)品的交互說明文檔應(yīng)該怎么寫?

Web產(chǎn)品的交互說明文檔應(yīng)該怎么寫?

有的交互設(shè)計(jì)師喜歡用動(dòng)態(tài)效果來代替交互說明,這樣的方式會給開發(fā)同學(xué)照成一定的困擾。瀏覽原型的人需要逐一操作才能看見效果,一旦有某個(gè)地方?jīng)]有操作到,就可能會遺漏。

文字說明則可以讓開發(fā)同學(xué)清晰、快速地看到全部的動(dòng)態(tài)說明,各種情況一目了然。

在時(shí)間允許的情況下,建議采用交互說明與動(dòng)態(tài)效果相配合的方式,這樣也會相得益彰,更容易開發(fā)同學(xué)理解。

交互說明文檔應(yīng)該說明哪些內(nèi)容呢?

字段說明

字段說明包含字段長度、字符說明、取值范圍。

1. 字段長度主要包括字段的最大長度和最小長度。比如手機(jī)號碼字段最長為11位。

若字段的最大長度大于界面可顯示區(qū)域的寬度,則需說明超出區(qū)域的樣式。比如,最多應(yīng)該顯示多少字?jǐn)?shù),超過時(shí)如何顯示,是否折行等。

2. 字符類型主要是指此字段的輸入類型。比如手機(jī)號碼為純數(shù)字,數(shù)據(jù)庫字符類型應(yīng)為int(不需說明數(shù)據(jù)庫類型)。

3. 取值范圍主要指數(shù)據(jù)的取值范圍。比如,界面上出現(xiàn)下拉菜單,交互說明文檔需要說明下拉菜單的選項(xiàng)內(nèi)容,否則會增加一定的溝通成本。

排序規(guī)則

排序規(guī)則主要包含列表的排序規(guī)則。

比如產(chǎn)品列表,默認(rèn)的排序規(guī)則是根據(jù)時(shí)間降序排序。

Web產(chǎn)品的交互說明文檔應(yīng)該怎么寫?

狀態(tài)說明

狀態(tài)說明包含初始狀態(tài)、常見狀態(tài)和特殊狀態(tài)。

1. 初始狀態(tài)主要指顯示的文字、數(shù)據(jù)、選項(xiàng)最開始的狀態(tài)。用戶在新打開一個(gè)APP時(shí),初始狀態(tài)是未登錄的;在登錄后,初始頭像是系統(tǒng)默認(rèn)的;

2. 常見狀態(tài)主要指某一板塊的正常狀態(tài)。用戶對文章進(jìn)行評論,有評論內(nèi)容的界面則是常見狀態(tài)。

比如登錄入口,一般會出現(xiàn)2種狀態(tài):未登錄狀態(tài)、登錄狀態(tài)。

Web產(chǎn)品的交互說明文檔應(yīng)該怎么寫?

3. 特殊狀態(tài)一般指非正常情況下的樣式、文案以及說明等。比如在刷新文章列表時(shí),手機(jī)斷網(wǎng)加載失敗,這時(shí)就屬于特殊狀態(tài);

Web產(chǎn)品的交互說明文檔應(yīng)該怎么寫?

操作說明

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

常見操作主要指正常操作時(shí)得到的反饋狀態(tài)。比如一個(gè)按鈕,在鼠標(biāo)移入和移出時(shí)不同的樣式。

特殊操作主要指一些極端情況下的操作。

Web產(chǎn)品的交互說明文檔應(yīng)該怎么寫?

反饋內(nèi)容

反饋主要指用戶操作后得到的反饋動(dòng)作,包含提示、跳轉(zhuǎn)、動(dòng)畫等。提示主要指操作后,系統(tǒng)反饋給用戶的文字說明等。

設(shè)計(jì)師需要在原型上著名跳轉(zhuǎn)時(shí)是“原頁面刷新”還是“新頁面打開”。

此外,還需要注明在界面的不同位置以不同手勢操作時(shí),會跳轉(zhuǎn)到哪里。

Web產(chǎn)品的交互說明文檔應(yīng)該怎么寫?

數(shù)據(jù)來源

數(shù)據(jù)來源主要指列表內(nèi)數(shù)據(jù)來源的說明。告訴開發(fā)同學(xué)根據(jù)什么條件從數(shù)據(jù)庫里取數(shù)據(jù)。

Web產(chǎn)品的交互說明文檔應(yīng)該怎么寫?

非常感謝您的瀏覽,如果您有更好的建議,請?jiān)谙路搅粞?,謝謝。

 

本文由 @clone 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 我擔(dān)心,當(dāng)邏輯多的時(shí)候,界面會很亂!我的方法是在功能旁邊標(biāo)注一二三,然后在專門說明的區(qū)域進(jìn)行說明,查找對應(yīng)的數(shù)字即可。另外會講交互和開發(fā)的分開來。

    來自廣東 回復(fù)
  2. 展現(xiàn)形式是上邊是整體原型,下邊是詳細(xì)的交互說明嗎?,可以發(fā)一個(gè)單獨(dú)的例子出來嗎?

    來自北京 回復(fù)
  3. 誰能提供下畫這種交互圖的軟件

    回復(fù)
  4. 干貨

    來自北京 回復(fù)
  5. 收起來,好好學(xué)習(xí)。

    來自天津 回復(fù)
  6. 很贊!從開發(fā)測試角度!這些是非常有用和必備的信息!形式且不說,但凡在需求設(shè)計(jì)中思考并明確這些都會讓后面的環(huán)節(jié)事半功倍……

    回復(fù)
  7. 文章寫的意義不大,做過需求分析的都知道。

    回復(fù)
  8. 感覺像我們UI設(shè)計(jì)稿

    回復(fù)
  9. 告知用戶,用戶名不存在,可以引導(dǎo)用戶進(jìn)行注冊。

    回復(fù)
  10. 學(xué)習(xí)了

    來自湖北 回復(fù)
  11. 怎么判斷用戶名不存在和用戶名不正確出現(xiàn)的提示呢?

    來自廣東 回復(fù)
  12. 用都這個(gè)備注是什么軟件?

    來自上海 回復(fù)
    1. axure

      來自上海 回復(fù)
    2. 你是7.0還是8.0
      我用7.0的找不到這種可以彎曲點(diǎn)線啊

      來自上海 回復(fù)
    3. 7.0、8.0都有劃線的。。

      來自廣東 回復(fù)
    4. 我也是7.0,但沒找到這個(gè)線,在哪里啊 ??

      來自上海 回復(fù)
  13. 干活,加油! ?? ??

    來自遼寧 回復(fù)
  14. 干貨,大贊

    來自廣東 回復(fù)
  15. 很贊

    來自福建 回復(fù)