如何寫一個完整的交互說明文檔?

6 評論 10336 瀏覽 73 收藏 11 分鐘

編輯導語:交互說明文檔可以讓項目人員更加快速地理解設計規劃,進而推動后續項目的進行與落地。這也就要求交互說明文檔的撰寫需要清晰、明了、完整。本篇文章里,作者就如何書寫一份完整的交互說明文檔進行了總結,一起來看一下。

在0到1的產品開發流程中,項目經理經歷過需求階段,開完需求評審會議后就開始投入到原型的制作了。原型是公司內部的產品使用說明書,所以畫原型的時候,項目經理應該去思考如何能讓UI和技術人員更快速、準確的理解原型的交互說明?

所以今天就來和大家分享一下,如何制作出一份完整的交互說明?

一、交互說明是什么?

當產品經理把原型圖畫好時,旁邊都會寫上一些關于產品原型的一些規則或者是一些操作等等,這些都屬于交互說明。所以可以把交互說明簡單理解為是對產品原型的解釋、強調、補充。

在公司內部,會把交互說明當成一個簡單的、初步的產品使用說明書。我們可以把交互說明想象成一座橋,橋的一端站著項目經理,另一端站著UI設計師和程序員,通過橋的連接,能讓產品經理把產品操作規則、限制條件、變化形式等,準確的讓程序員和UI設計師了解,快速地投入到產品制作的工作中,設計出產品。

二、如何寫一份完整的交互說明文檔?

當我第一次寫交互說明的時候,我非常疑惑,到底交互說明要寫什么內容呢?

做了幾個項目之后,我的經驗告訴我:首先,把自己假設成一個用戶,當我在使用這個產品時,我希望這個產品能怎樣的簡化我的操作路徑?

其次,我角色從用戶變成產品經理,我希望讓用戶看到什么,使用什么功能?最后,我又從產品經理變成技術人員,這個功能到底可不可行?符不符合實際情況?根據這三種不同的身份,寫出產品的交互說明。

1. 步驟一:統一思維

為了讓文檔的視覺性更強,就需要做到一個統一。比如你的機模要統一,操作規則、字體大小行間距都需要統一,包括思維也要統一。

統一思維,就是要把用戶想象成豬,又笨又懶,不要認為用戶肯定不會做這個錯誤,所以不寫出來。要保證整個產品的嚴謹性,比如登錄頁面,如果你登錄不了,那到底是手機出錯,還是驗證碼出錯,你都需要告訴用戶,不然用戶云里霧里登錄得太麻煩,他就不登陸了,那你就失去了一個用戶。

所以在寫錯誤提醒說明的時候,只要說出錯誤的原因,也要給出解決的方法,讓用戶覺得你這個產品是人性化的,不會激起用戶的憤怒感,從而繼續使用產品。

2. 步驟二:明確每個要寫的部分——頁面、模塊、交互說明

我在工作中習慣把交互說明文檔分成三個部分,第一個部分是頁面,第二個部分是模塊,第三個模塊是交互說明。

首先,你需要把你構思的產品在文檔里畫出來,把產品的每一個頁面都畫到交互說明文檔來,放在頁面這個部分。

所有頁面兩種狀態種是進入即可看見的狀態,另一種是操作后狀態(隱藏狀態),只需要畫一種狀態即可,另一種狀態的變化規則要寫進交互說明。頁面需要整潔清晰,布局統一。不需要花里胡哨的顏色,只需要簡單的基礎色黑白灰等就行。我們不是UI,不需要為產品上色,只要能區別即可。

然后,把每一個會變化的、需要解釋說明的模塊,單獨拖到模塊這一部分。接下去的交互說明呢,就是根據一個個模塊來寫的。

第三部分的交互說明一定要寫得很詳細,千萬不要吝嗇文字,要寫清楚限制條件。

我剛入行的時候那時候只是產品助理,遇到過一個情況:有一個項目,由兩個產品經理負責,其中一個產品經理寫的交互說明寫得不夠細致,導致程序員沒有看懂。程序員就不斷地問項目經理,被項目經理痛罵,說他腦子不好使,程序員吃了癟。

再后來,程序員遇到自己看不懂的地方,就按照自己的想法來,搞得項目一拖再拖。兩個人都被人事批了一頓。

從此以后,每當我寫交互的時候,我常常反思:該怎么把交互說明寫得細致呢?如何一針見血地把要點表達出來?那就要從以下3個維度分析:

  1. 按鈕、圖標等操作以后出現的狀態變化。
  2. 刷新、加載(上劃下滑)、數字顯示等頁面規則。
  3. 錯誤提醒、彈窗等。

使用過微博的朋友應該了解,當你看到一篇你覺得寫的不錯的文章時,你給這篇文章點了個贊,它的愛心圖標就由空心的愛心變成了紅色愛心,并且愛心后面的數字也往上加一。如果超過100萬人點贊的話,就會一直顯示100萬+。這些按鈕的變化或者一些數字的顯示規則,都需要寫到交互說明里面。

你在刷抖音的時候,在刷新的時候,你有沒有想過它一次能加載幾條視頻?我就這么無聊,還真的去數了,但我不記得準確的數字了,好像是30個。如果你在寫加載規則的時候,也記得把加載出幾條內容也寫進規則里面。

我分析過36氪的賬號密碼登錄頁面,(除了賬號密碼登錄頁面還有驗證碼登陸頁面、一鍵登錄頁面)。

例如用戶再點擊這個區號時,頁面會跳出彈窗,這時候我們也得把彈窗的樣子畫出來,包括彈窗的一些操作規則也得說清楚。

如果用戶在輸入手機號,會獲取光標提示文字消失,尾部出現刪除的按鈕,這些規則是需要寫進交互說明的。

包括用戶將手機號格式輸入錯誤時,就是不等于11位開頭也不為1時,點擊按鈕出現的錯誤提示,請輸入正確的手機號。這個錯誤提示也是需要說明的。

分析一下以上操作時,最好把該頁面的全局說明、頁面說明、頁面權限、使用場景交代清楚。就是要把頁面進入的方式,跳轉到哪些頁面;是VIP才能使用的,還是普通用戶也能使用的;用戶是在什么樣的場景下會使用該頁面;等等關于頁面的都可以說。這樣可以讓UI在設計的時候更加個性化、人性化。

3. 步驟三:檢查

對一些隱藏狀態的規則,和錯誤提醒的設計一定要寫清楚限制條件。

比如返回鍵千萬不要忘記畫,既然能進入到這個頁面,就要能往回退到前一個頁面,要能進就能退。

同理,有成功就有失敗,你既然能夠操作成功,就有操作失敗的時候。比如你使用發布功能,如果字數超出限制,就不能發送成功,就會失敗,所以這些規則都得制定好。要睜大雙眼檢查自己可能會出錯的地方。

四字真言:增刪查改。對于缺少的內容,補充完整。

比如用戶在發表評論時,需要限制評論字數,但在交互說明中并沒有寫,你就需要補充上去,留下能表達出意思的說明即可。如果你從元件庫里拖出來的按鈕,你還解釋了一遍,說明這個解釋是不需要的,因為從元件庫庫里拖出來的按鈕,他已經有含義了,不需要你再去解釋一遍。

三、總結

產品經理在寫交互說明的時候,需要不斷地提出問題,思考:這個功能要為什么要這么放?它需要怎么變化?用戶希望產品是怎么樣的?

寫清楚操作內容、限制條件,但要拒絕流水賬式說明,另外當描述文字過長,看是自己在語言表達上存在問題,還是可能需要重新考慮是否是設計邏輯存在問題。

如果有一些核心功能、重點內容、復雜難懂的交互,可以在必要的情況下,需要先跟團隊強調交互說明的存在意義,推動大家去閱讀和反饋,才能對產品的發展起到真實有效的作用。如果交付文檔后,UI或者程序員實在有看不懂的地方,也要歡迎他們隨時來問,避免以后出現更復雜的問題。

 

本文由大呂不加班 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自Unsplash,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 學到了學到了~

    來自上海 回復
  2. HAO

    來自廣東 回復
  3. 很不錯

    回復
  4. 學到了 、雖然不經常畫原型

    來自浙江 回復
  5. 看完后對我寫原型又有了更深的理解

    來自湖北 回復
  6. 很有內容,學到了

    來自湖北 回復