如何編輯交互設計說明書

11 評論 53750 瀏覽 380 收藏 11 分鐘

當你搜索并查閱了很多網上資料后,仍可能不會編輯交互設計說明書。那么究竟該怎么編輯交互設計說明書呢?在編輯的過程中又有哪些要點和注意事項呢?

目前很多公司會采用敏捷式開發流程,這時很多產品經理或交互設計師會直接在 Axure 等原型設計工具中制作 PRD 而非原型,并且還會出現 多人編輯一份文檔的情況。

下面簡單介紹交互設計說明書的基本寫法,也算是拋磚引玉吧,最后會給出完整的項目交互設計文檔供大家學習參考。

這里需要注意的是,有時使用原型工具導出的交互設計說明書會很混亂,沒有可讀性,比如,完全是機器按照你的原型站點導航樹結構導出的不符合業務邏輯的說明書,但當開發人員、UI 設計師或 PM 拿到這樣一份“交互設計說明書”時,真的看不懂。所以需要設計師根據實際的業務需求與業務對象有針對性地編輯一份交互設計說明書。

交互設計說明書的閱讀對象

交互設計文檔都是給誰看的?這個文檔會根據閱讀的對象做什么優化嗎?下面利用場景化模擬解釋交互設計說明文檔的使用場景。

交互設計說明書由交互設計師完成編輯、修訂、發布。

  • 交互設計師提交交互設計說明書給產品經理。
  • 交互設計師提交交互設計說明書給 UI 設計師。
  • 交互設計師提交交互設計說明書給研發人員。
  • 交互設計師提交交互設計說明書給測試人員。

在交互設計過程中,上述四個角色會不斷有所交集。所以,一旦編輯文檔,就需要對這幾個角色有針對性地解釋和閱讀優化。

1.產品經理場景

交互設計說明書的閱讀人員包括:產品人員、設計人員、研發人員、測試人員等,他們就是交互設計文檔的使用主角,產品經理在使用交互設計說明書的時候需要確認的方向是 :交互邏輯、功能架構、交互事件、界面頁面流轉與內容布局等。這里的產品經理代表產品經理及以上管理層。

關鍵點:為項目梳理清楚邏輯關系,文檔按照邏輯關系和功能架構分支等設置大綱講清楚項目、功能、組件、頁面流轉關系。

2.UI設計師場景

UI 設計師在使用交互設計說明書的時候,更多的是看你的說明文檔的具體頁面數量,因為這決定 UI 設計師出多少效果圖。另外,要看你的原型設計給 UI 設計師留了多少發揮空間,不能一開始就制作高保真原型。

關鍵點:例如,一個頁面有三個狀態,制作原型動態面板時加原型事件即可,但是設計的文檔需要將三個狀態都截圖標注好,頁面流轉標記是告訴 UI 設計師這里有三個頁面,而不是告訴 UI 設計師有三個狀態。

3.研發工程師場景

研發人員拿到交互設計說明書的時候就非常關心細節實現,關心有多 少個功能、多少個功能新特性、多少個頁面元素組件、多少個交互動效等, 但他不關心方案里一個輸入框里是用彩色還是黑白,因為他是具體功能的實現者。

提供給研發人員的文檔需要注意以下關鍵點 :明確表示出關于功能設計、頁面邏輯、組件交互等信息的細節,例如:一個頁面刷新,要分為觸發刷新事件、刷新加載中、刷新成功提示、刷新失敗提示。其中失敗提示又要分多種情況:網絡不佳、程序異常等。如果你沒有提出明確需求,責任就會在需求方,而不是程序部門。

4.測試與需求場景

測試是依靠需求說明書和交互設計說明書,進行測試用例與測試腳本的編寫,在交互設計說明文檔里需要說明白每一個功能的交互動作與事件,測試是抓細節的,所以需要配一些說明性文字解釋交互設計的思路與實現路徑,這樣測試人員就可根據設計思路設計出測試用例。當然,測試用例分多種類型,這里指的是功能測試與邏輯測試,一些性能測試等需要依靠程序使用的軟件、數據庫等技術性的接口文檔來定。

關鍵點:功能點、業務邏輯、界面元素、交互過程分解步驟。上面解釋了各角色使用交互設計說明文檔的場景及他們期待的真實需求,只有清楚地了解這些內容,才能有針對性地制作交互設計說明書。

交互設計說明書包含的內容

眾所周知,一份交互設計說明書最重要的當然是內容,下面介紹如何按照實際流程制作文檔。

1. 寫什么

很多新手在新建一份空白文檔后不知道具體寫什么內容,如前面所說,對一份交互設計說明書,你只需要把原型截圖或原型直接畫成一個文檔即可。其實交互文檔就是頁面文檔,所有的軟件頁面、狀態都分離出頁面進行展現,然后加入頁面流程和交互動作說明文字、箭頭指示線條等。

關鍵點:邏輯結構、頁面跳轉、交互狀態的文字說明,統一交互體驗動作,確保頁面組件的一致性。

示例如圖1所示,這是一個包含交互界面動作、邏輯步驟、頁面流轉、文案和注釋的實例。

1

圖1包括交互界面動作、邏輯步驟、頁面流轉、文案與注釋的實例

圖中的這個交互動作是將所有出現的界面靜態化地寫在文檔里進 行展示。如果你想直接展示動態交互,可以使用原型設計工具設計好交互 原型之后再截圖編輯文檔,在交付文檔時結合原型演示,這樣會更有效果。

2.怎么寫

一般的交互設計說明書的文檔結構如下 :

  • 文檔封皮與版本信息。
  • 目錄頁。
  • Log(日志)修訂記錄頁。
  • 交互行為邏輯圖 + 文字說明。
  • 頁面展開圖 + 邏輯 + 文字。
  • 詳細介紹其他單獨的交互動作。

(1)封皮和版本

圖2所示是交互設計說明書封皮和版本信息的示例。版本信息一般 包括版本、日期、參與人、變更內容簡要、備注。

2

圖2交互設計說明書版本信息格式

(2)目錄

這個無須多說,平時我們看的書基本上都有目錄,不過要記住,目錄 要合理分級,以分清主次。

(3)Log 更新記錄頁

這個頁面用來描述某次更新的信息簡介與頁碼導航等。圖3為交互 設計說明文檔的更新記錄頁的示例。

3

圖3交互設計說明書的更新日志

(4)交互行為邏輯圖 + 文字說明

圖4所示是某個應用商店的更新應用交互邏輯 + 文字說明圖例。

5

圖4交互設計說明書中的交互邏輯頁面流程

從圖中可以看出,這個說明文檔是把應用更新功能作為一頁,具 體包括其架構、交互、流程、邏輯、交互事件及文字解釋說明。

這個過程是針對產品經理和程序人員而言的,因為他們需要看明白交 互流程邏輯。

(5)頁面展開圖 + 邏輯 + 文字

圖5是頁面、元件、文案、邏輯、頁面狀態的展示。這部分是針對 視覺設計人員而言的,需要將所有的頁面都展開解釋一遍,公用部分可以單獨標記。

6

圖5交互設計說明書的頁面元素

(6)詳細解釋其他單獨的交互動作

此部分是對不在流程中單獨或獨立的交互動作進行補充說明。

 

本文節選自《交互設計那些事兒》一書

由阿西UED 編著,電子工業出版社出版

未經出版社書面授權,禁止轉載,違者追究法律責任。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 感謝分享,由于我們公司就我一個產品人員,所以找到一個合適的跟UI和研發直接交流的文檔很關鍵,您分享的剛好是我想要的。

    來自山東 回復
  2. ??

    來自上海 回復
  3. 不錯,特別適合像我一樣的人

    來自本機地址 回復
  4. 不錯誒~ ??

    來自本機地址 回復
  5. 求分享書

    回復
  6. 突然想給個打賞,哈哈??

    回復
  7. 最后會給出完整的項目交互設計文檔供大家學習參考。 版主 在哪里看這個啊 ??

    來自上海 回復
  8. 贊貼主

    回復
  9. 不錯

    回復