Web產品的交互說明文檔應該怎么寫?
本文是作者的一篇隨筆,適合交互設計師閱讀,希望能給正在學習交互的朋友一些幫助。也希望朋友們,可以提出更多很好的建議。
經常與開發同學聊天,他們說有一個詳細的說明文檔可以幫助他們更準確的進行工時評估,還可以幫助他們提高工作效率,減少多余的思考時間。因此在這里分享一些制作交互說明文檔的經驗。
我先說說說交互原型包含哪些部分?
- 版本說明及更新說明
- 頁面流程圖
- 信息架構圖
- 業務流程圖
- 任務流程圖
- 線框圖和交互說明(這是我們今天主要說明的內容)。
下圖為原型
原型通常分為低保真原型和高保真原型,交互說明文檔則是對原型說明的部分。我們在看到交互原型的時候,很難看到原型后面的交互邏輯,即使原型的交互操作做的非常詳細,看原型的人還是不能很快知道全部的內容。我們把交互的所有操作全部羅列出來,可以讓查看的原型的人能很快的理解你的交互流程。
所以交互說明是原型中不可缺少的一部分。交互說明會讓原型看起來更專業,也讓開發同學更好的理解。下圖為交互說明的一個案例
有的交互設計師喜歡用動態效果來代替交互說明,這樣的方式會給開發同學照成一定的困擾。瀏覽原型的人需要逐一操作才能看見效果,一旦有某個地方沒有操作到,就可能會遺漏。
文字說明則可以讓開發同學清晰、快速地看到全部的動態說明,各種情況一目了然。
在時間允許的情況下,建議采用交互說明與動態效果相配合的方式,這樣也會相得益彰,更容易開發同學理解。
交互說明文檔應該說明哪些內容呢?
字段說明
字段說明包含字段長度、字符說明、取值范圍。
1. 字段長度主要包括字段的最大長度和最小長度。比如手機號碼字段最長為11位。
若字段的最大長度大于界面可顯示區域的寬度,則需說明超出區域的樣式。比如,最多應該顯示多少字數,超過時如何顯示,是否折行等。
2. 字符類型主要是指此字段的輸入類型。比如手機號碼為純數字,數據庫字符類型應為int(不需說明數據庫類型)。
3. 取值范圍主要指數據的取值范圍。比如,界面上出現下拉菜單,交互說明文檔需要說明下拉菜單的選項內容,否則會增加一定的溝通成本。
排序規則
排序規則主要包含列表的排序規則。
比如產品列表,默認的排序規則是根據時間降序排序。
狀態說明
狀態說明包含初始狀態、常見狀態和特殊狀態。
1. 初始狀態主要指顯示的文字、數據、選項最開始的狀態。用戶在新打開一個APP時,初始狀態是未登錄的;在登錄后,初始頭像是系統默認的;
2. 常見狀態主要指某一板塊的正常狀態。用戶對文章進行評論,有評論內容的界面則是常見狀態。
比如登錄入口,一般會出現2種狀態:未登錄狀態、登錄狀態。
3. 特殊狀態一般指非正常情況下的樣式、文案以及說明等。比如在刷新文章列表時,手機斷網加載失敗,這時就屬于特殊狀態;
操作說明
操作說明包含常見操作、特殊操作、誤操作、手勢操作。
常見操作主要指正常操作時得到的反饋狀態。比如一個按鈕,在鼠標移入和移出時不同的樣式。
特殊操作主要指一些極端情況下的操作。
反饋內容
反饋主要指用戶操作后得到的反饋動作,包含提示、跳轉、動畫等。提示主要指操作后,系統反饋給用戶的文字說明等。
設計師需要在原型上著名跳轉時是“原頁面刷新”還是“新頁面打開”。
此外,還需要注明在界面的不同位置以不同手勢操作時,會跳轉到哪里。
數據來源
數據來源主要指列表內數據來源的說明。告訴開發同學根據什么條件從數據庫里取數據。
非常感謝您的瀏覽,如果您有更好的建議,請在下方留言,謝謝。
本文由 @clone 原創發布于人人都是產品經理。未經許可,禁止轉載。
我擔心,當邏輯多的時候,界面會很亂!我的方法是在功能旁邊標注一二三,然后在專門說明的區域進行說明,查找對應的數字即可。另外會講交互和開發的分開來。
展現形式是上邊是整體原型,下邊是詳細的交互說明嗎?,可以發一個單獨的例子出來嗎?
誰能提供下畫這種交互圖的軟件
干貨
收起來,好好學習。
很贊!從開發測試角度!這些是非常有用和必備的信息!形式且不說,但凡在需求設計中思考并明確這些都會讓后面的環節事半功倍……
文章寫的意義不大,做過需求分析的都知道。
感覺像我們UI設計稿
告知用戶,用戶名不存在,可以引導用戶進行注冊。
學習了
怎么判斷用戶名不存在和用戶名不正確出現的提示呢?
用都這個備注是什么軟件?
axure
你是7.0還是8.0
我用7.0的找不到這種可以彎曲點線啊
7.0、8.0都有劃線的。。
我也是7.0,但沒找到這個線,在哪里啊 ??
干活,加油! ?? ??
干貨,大贊
很贊