一份完整的交互說明包含什么?(上)

44 評論 59098 瀏覽 594 收藏 10 分鐘

從你的交互說明中,即可看出你的思考是否全面,邏輯是否清晰。那么你知道交互說明都需要寫些什么嗎?

最近,經常聽到剛剛入行的小伙伴問道:原型圖的注釋要寫些什么內容呀?交互說明怎么寫呀?我要怎么向開發人員解釋清楚需求呢?也有小伙伴說自己交付出去的文檔,總是丟三落四,惹來開發同學的投訴與抱怨…

上述情況,相信每個產品人/交互設計師都曾遇到過苦惱過。那么接下來,結合自己這幾年的經驗和踩過的坑,給大家詳細講述下交互說明該怎么寫,寫些什么。

一、交互說明是什么?

交互說明,簡單來說就是:原型圖邊上的注釋,對原型圖的解釋說明。

主要用于描述界面元素是什么?有什么限制條件?有幾種狀態?操作后有何反饋?以及元素的來龍去脈,從哪里來,到哪里去等。從交互說明中,即可看出你的思考是否全面,邏輯是否清晰。

一份好的交互說明,可以有效降低溝通成本,提高工作協同效率。講到這里,你可能還是有點懵,沒關系,我們詳細往下看。

二、交互說明怎么寫?

我們先整體看下交互說明包含哪些內容:

接下來,逐一詳細為大家講述。

1.限制條件

限制條件包括【范圍值】和【極限值】,是對元素基本屬性的描述。

(1)范圍值數據的取值范圍,即有哪些可選項。

如:在發布文章時,可選擇的類型有哪些;在選擇職位時,默認可選職位有哪些。

舉例:在選擇擅長菜系時,菜系的默認可選范圍。

(2)極限值即該元素最大限和最小限時如何展示,以及不滿足限制時如何解決。

在設計原型時,我們需要特別注意這點(因為真的真的是特別容易遺忘的一點),而且元素的最大限和最小限,對界面排版有一定影響,很可能因最大限信息顯示不全,而更改排版方式。

舉例1:列表中文章的標題,最大限制2行,超出后顯示省略號。

舉例2:文本框的極限值(大家在設計文本框時,需尤其注意,因為它的限制條件比較多)。

2.狀態

(1)默認狀態即默認內容,包括文案、選項、鍵盤、排序等。

舉例1:文本框的默認狀態(一般包括:文本框提示文案和默認鍵盤,為了方便解說,我把文本框和文本域統稱為文本框了哦)

舉例2:列表默認排序方式。涉及到列表,就要想起這句話:按什么排序?幾種常見的排序:按發布時間倒序/正序、按更新時間倒序/正序、按熱度正序等,需具體情況具體分析哦。

(2)正常狀態用戶正常使用時,會遇到的狀態。

比較常見的如登錄/未登錄狀態,認證審核狀態,訂單狀態等。

舉例:用戶申請身份認證涉及的狀態。

注意:一定不要忘記【未登錄狀態】哦!因為對于某些功能,當用戶不登錄時,會涉及顯示內容的變化及后臺權限邏輯的判斷。

(3)特殊狀態一些特殊場景才會出現的狀態。

包括無數據狀態、網絡加載狀態、網絡未連接、系統報錯等。雖然這些狀態不會經常出現,但是同樣會影響用戶的體驗。所以我們在做設計時,也要考慮全面。

舉例1:分享一個有趣的特殊狀態。(去哪兒APP的加載動畫,降低用戶等待時的焦慮感)

舉例2:網絡錯誤時

3.操作和反饋

當用戶執行某項操作后,需給予用戶及時的反饋。不管用戶是常見操作、錯誤操作還是一些極端特殊操作,都要做到“防呆“,防止用戶不知所措。

我想你肯定遇到過這樣的情況:當你在瀏覽器中點擊【下載按鈕】后,如果網絡狀況不太好,瀏覽器就沒有任何反饋,這時候是不是有些抓狂?會不斷嘗試再次點擊,結果下載了n多份。所以,想要給予用戶好的體驗,就要重視用戶操作后的反饋。幾種常見的操作和反饋如下:

(1)正常操作:在正常狀態下,用戶的操作流程(即來龍去脈,從哪兒來到哪兒去)。在用戶的操作過程中,需要及時給予用戶反饋,告知用戶發生了什么。

(2)錯誤操作:當用戶進行了一些錯誤操作時,需要給出一些糾正反饋。錯誤提示內容需包括:當前錯誤和糾正信息,即告知用戶當前發生了什么,接下來可以做什么。

舉例:一個評論框的操作和反饋(包括正常操作和錯誤操作)

(3)特殊操作:當用戶進行了一些極端的操作時,也需要給出反饋。

舉例:還記得幾年前的淘寶二樓么。當我一直往下拉時,會出現圖中這個提示。是不是讓人感覺很有趣~

4.其他

除上述內容外,還有一些很重要的信息(放在其他里,是因為比較分散,不好匯總,并不是它不重要喲,這些往往是最容易遺忘的點)。

詳細的講解和一些注意事項,請期待拾月的下篇文章哦。

三、總結

以上,給大家介紹了交互說明中的【限制條件】、【狀態】、【操作和反饋】。在下篇文章中,我會給大家講述一些其他零碎但很重要的點,以及一些注意事項。大家敬請期待哦。

再啰嗦幾句,本文中列出的一些交互說明信息項僅供大家參考,還是需要具體問題具體分析。希望大家活學活用,建立屬于自己的交互checklist。在每次寫完文檔后,對照檢查一遍,有效防止遺漏哦(而且可以減少撕逼次數,提高你在開發人員心中的印象,哈哈哈~)

感謝耐心閱讀,希望本文對你有所幫助。

相關閱讀:

如果你對原型排版有疑惑,推薦閱讀: 什么樣的原型更受開發歡迎?

 

作者:拾月,4年產品交互設計經驗,個人公眾號:用戶體驗研究所(ID:PM_Cynthia)

本文由 @Cynthia拾月 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自 unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 總結的很棒,求一套完整的交互說明,1263343281@qq.com,謝謝

    來自廣東 回復
  2. 收到

    來自北京 回復
  3. 總結的超級好,不知道能不能求一整套的交互說明,240678331@qq.com,謝謝

    來自安徽 回復
    1. 非常好

      來自北京 回復
  4. 總結的很棒,求一套完整的交互說明,292744094@qq.com

    來自浙江 回復
  5. 總結的很棒,求一套完整的交互說明,1101271757@qq.com

    來自廣東 回復
  6. 總結的很棒,求一套完整的交互說明,1477542819@qq.com

    來自江蘇 回復
  7. 求整套的交互方案說明,跪求308354336@qq.com

    來自廣東 回復
  8. 求一套完整的文檔,萬分感謝!感激不盡!342542899@qq.com

    來自福建 回復
  9. 求整套的交互方案說明,跪求1351576136@qq.com

    來自北京 回復
  10. 干貨,期待更新~求一套完整的文檔,萬分感謝!感激不盡!905637829@qq.com

    來自廣東 回復
  11. 求一套完整的文檔,萬分感謝!感激不盡!1226859672@qq.com

    來自廣東 回復
  12. 求一套完整的文檔,萬分感謝!感激不盡!843599303@qq.com

    來自江蘇 回復
  13. 求一套完整的文檔,萬分感謝!感激不盡!402478510@qq.com

    來自湖北 回復
  14. 您好,想做UE,但公司沒有UE,可以分享整套的交互方案說明給我嗎,萬分感謝 我的郵箱2563327205@qq.com

    來自廣東 回復
  15. 求一套完整的文檔,萬分感謝745630680@qq.com

    來自安徽 回復
  16. 求一套完整的文檔,萬分感謝723529939@qq.com

    回復
  17. 求整套的交互方案說明,跪求510479209@qq.com

    來自北京 回復
  18. 有沒有整套的交互方案說明,跪求529016443@qq.com

    來自廣東 回復
  19. U

    回復
  20. 厲害了,厲害了,老厲害了,真心厲害了。

    來自重慶 回復
  21. (下)篇是什么內容呢?期待期待

    回復
    1. 可以看我的主頁哦。下篇文章已經更新

      回復
  22. 有沒有整套的交互方案說明,跪求643136432@qq.com

    來自浙江 回復
  23. 總結得很棒,比心

    來自廣東 回復
    1. 謝謝??

      回復
  24. 總結挺全的,基本面都有總結到。其實其他里面才是大有文章的,由于項目類型差異,很多的其他的里面的也是很重要的,并且很難系統梳理起來,比如我目前所在的物聯網項目,會特別注重連接和數據流,所以我往往也會在這里加上一個業務數據流。

    來自廣東 回復
    1. 對的呢。所以說,每個人需要結合自己的實際情況去總結??

      回復
  25. 直接在axure加交互說明?

    回復
    1. 對,在原型圖邊上加交互說明。

      回復
    2. 你好

      來自浙江 回復
  26. 辛苦哦

    來自上海 回復
  27. ??

    來自重慶 回復
  28. “請期待拾月的下篇文章哦?!币詾橐鹊绞虏虐l下篇,還想怎么隔這么久…哈哈 原來作者叫拾月,期待更新

    回復
    1. 哈哈哈哈,太可愛了你 :mrgreen: 。下周發 ??

      來自北京 回復
  29. 我想轉載耶,不知道可以不可以

    來自上海 回復
    1. :mrgreen: 如需轉載,請提前聯系我哦??梢栽谖业奈⑿殴娞栒业轿遥蛘呒游⑿牛篣niqueGY_1220

      來自北京 回復
  30. 干貨~手動比心~~ ?

    來自上海 回復
    1. ?? 嘻嘻,謝謝

      來自北京 回復