如何寫出清晰易懂的交互文檔?我整理了這份指南! - 優設網 - UISDC

如何寫出清晰易懂的交互文檔?我整理了這份指南!

2019/10/05 13262評論 8

云南体彩网在做交互文檔之前,我們先要明白什么是交互文檔、為什么要做以及做了給誰看。

什么是交互文檔

云南体彩网交互文檔,即交互設計說明文檔。英文 Design Requirement Document ,簡稱DRD。主要是用來承載設計思路、設計方案、信息架構、原型線框、交互說明等內容。

為什么需要交互文檔

有些人可能對文檔這種器械比較反感,尤其是從事工作不久的朋友。其實工作得越久,越會發現文檔的重要性,它可以贊助你理清思路,并記錄下來,便于回顧。

云南体彩网工作上而言,有一份規范的文檔可以讓你的設計更有說服力,也易于工作對接,提高彼此之間的溝通效率。

交互文檔給誰看的

交互文檔其實要說給誰看,其實具體情況具體分析。有的公司老板也要盯交互文檔,以及甲方爸爸、運營部分同事,都有查看的可能。

「產品經理」產品經理與交互設計師可能是溝通最多的人,產品經理主要在文檔中確認設計思路和業務流程,然后過一下頁面交互模塊。

云南体彩网「視覺設計」UI設計師通常最關注的是頁面交互模塊,有著產品思維和體驗思維的設計師也會仔細看一下設計思路和產品配景,以便于自己更了解產品業務邏輯和用戶心理。

云南体彩网「開發人員」前端的開發同事和UI設計師一樣,最關注頁面交互模塊,其他的作為提升會輔助了解。而后端開發人員關注更多的是業務邏輯、信息架構、操作流程等,這些都清晰了,他們能力輸出一份準確合格的開發文檔。

云南体彩网「測試人員」因為測試人員是把關產品上線的一群人,所以各個模塊、步調都應該去了解透徹,能力提出有效的bug。

如何撰寫交互文檔

本文主要論述以Axure軟件為撰寫工具,人人可以根據實際需求決定用什么軟件(Sketch、PPT、Word、PS、AI 等)。好比小需求可以用Sketch,快而高效。如果是要給甲方爸爸/大老板看的,使用PPT會讓他們更好理解。

通常,一個比較基礎、規范的交互文檔(DRD)由:文檔封面、更新日志、文檔圖例、設計配景/思路、業務流程、頁面交互、全局通用說明、廢紙簍八部分組成。當然,這不是絕對,你可以根據你的實際工作需要進行增減。

云南体彩网好比,如果是C端產品的話,用戶調研的結論、用戶畫像、用戶體驗地圖等等,都可以放進去給看的人一個參考。尤其是在如今這么關注用戶體驗、產品思維的一個大環境下,這些數據支撐很有力量。同時還可以贊助開發人員、界面設計人員培養產品思維、體驗思維,人人一起將產品變得更好。

其次,交互文檔的整潔與美觀也很有需要。相信在過去幾年不少人有遇到過這樣的產品經理(兼交互),他們會輸出一些有時連他們自己都看不太懂或者直接從其它競品截圖來的線框圖。當開發和界面設計的人提出質疑的時候還美其名曰線框不重要,重要的是里面的業務邏輯。。。其實用產品思維想,交互文檔就是交互設計師的產品,而看的人就是用戶,堅持良好的可讀性,可謂至關重要。

1. 文檔封面

交互文檔的封面如上圖,通常包含產品的名稱、Logo、版本號以及版本發布時間、所屬部分、對接負責人/對接人。

2. 更新日志

我們都知道,在產品的迭代的過程中,需求/功能是會賡續調劑的。而更新日志,就是為了迭代而生。它一般由修改日期、修改內容、修改人、版本號和備注組成。如果是新增的功能或模塊,建議是要加上鏈接可直接跳轉至新增內容的,如上圖。

云南体彩网版本號也是同理,都應加上對應的版本鏈接,便于查看者回溯之前的內容,與當前的新版本形成對比。這一點對開發人員來說很重要,其次對于新同事深入理解產品也能起到很大的贊助。

修改日期,通常是按時間倒序排列,查看起來會比較方便。

3. 文檔圖例

云南体彩网文檔圖例,顧名思義就是關于此文檔的一些輔助說明,目的是為了讓讀者更好地輿解文檔。如上圖的:操作/跳轉圖例、標簽圖例、流程圖例以及手勢操作圖例。

4. 設計配景/思路

設計配景,根據實際工作需要,放置一些關于思路整理、靈感來源的文檔。

好比用研申報、用戶畫像、競品分析申報、商業畫布等等。增強文檔的說服力,盡量讓每一個人都能理解到產品的戰略目標和業務邏輯。

因為我今年對接最久的是一個B端產品的項目,所以整理了一個產品畫像,僅供參考。

5. 業務流程

業務流程圖,不是操作流程圖也不是頁面流程圖。它是產品的整體業務流程,直接和業務掛鉤,可以說是產品的核心流程。

云南体彩网例如淘寶APP,買家購物由始至終的流程就是它的業務流程。通常用泳道圖的形式展示,多數情況下是由產品經理繪制。

云南体彩网以上是我所負責產品的核心業務的流程圖。因為是B端產品,涉及角色較多,針對3個代表性角色分別進行了繪制,僅供參考。(涉及到保密協議,所有關鍵詞都去掉了)

6. 頁面交互

信息架構

信息架構屬于用戶體驗的結構層,是產品的骨架。一般是由產品經理或者更高層的管理人員給出大框架。除非是大的產品迭代,否則不會大改。

權限說明

云南体彩网如果是C端產品,權限這一塊相對簡單,比較好整理的。B端產品涉及角色眾多,可能要零丁拎出來分析整理。以上僅供參考,人人具體情況具體分析。若是功能很單一的產品,交互文檔中也可省去這個模塊。

操作流程圖

產品操作流程圖就是通過圖形化的表達形式,論述產品在功能層面的邏輯和信息。它能夠更清晰、直觀地展示用戶在使用某個功能時,會發生的一系列操作和反饋的圖標。

云南体彩网注:不要將所有流程匯總在一個內外,或者展示在同一個頁面中,而應跟隨具體的操作或者功能模塊放置。時刻想著看文檔的人的感受,怎么易懂怎么來。

云南体彩网上圖是登錄、注冊和找回密碼的操作流程圖。僅供參考。模板源文件下載,后臺回復「交互」即可。

頁面線框圖

頁面線框圖,是通過圖形化的表達形式,論述產品在頁面層面的信息。包含:

「頁面題目」即每一個頁面的對應題目,一般就是導航欄題目

「頁面內容」以黑白為主,担保信息規整易讀

「交互說明」用標簽將其對應起來,包含交互邏輯、操作流程及反饋、元素狀態、字符限制、異常/特殊狀態、相關規則 等等

「主流程線」只需要畫出主流程線即可,千萬弗成太多太雜,時刻考慮讀者的感受

以上是注冊/登錄的線框圖和詳細的交互說明。將重點內容用紅色標記,可以讓查看者一目了然更好理解文檔。

7. 全局通用說明

全局通用說明,指整個產品可通用或者復用的元素。一般是邊做文檔邊整理出來的,方便自己或者接手該項目的設計師直接挪用。其次,對開發及時封裝可復用控件也是有參考價值的。

常用控件

云南体彩网常用控件類似UIKit,通常將極具復用價值的控制整理在一起,方便及時挪用。

復用界面

顧名思義就是全局可復用的一些內頁,好比選擇聯系人、自力搜索頁等。

時間規范

在做產品的第一步,就應該約定一個時間規范。否則各個端開發出來,你會發現iOS是斜杠的,Android是橫杠的,WEB是圓點的…真到了發現的時候再改,那真是彼此都是無比瓦解的。

缺省頁匯總

云南体彩网缺省頁一般包含加載失敗、加載中、網絡中斷和無數據的空頁面。為空頁可以依照模塊整理在一起,方便UI設計師最后一起設計缺省頁,堅持風格統一。

8. 廢紙簍

云南体彩网廢紙簍,被稱為是交互文檔的「后悔藥」。在需求賡續更改的情況下,改改改的過程中,請把你改過的稿子,放這里!!!因為很可能最后還是用的第一個方案…(此刻內心有點絕望)

總結

文檔、軟件只是工具,最重要的還是要落地、實行起來能力對產品有所贊助。所以在撰寫文檔的每時每刻,都應該站在「讀者」的角度思考,他們看的時候感受會是怎樣的,會覺得很難理解嗎?

除此之外,還需要有耐心,耐心給他們講解理解不透徹的地方。用一個朋友的話總結下:好的設計都是被虐出來的。(其實干哪一行不是呢…♀?重要的是:心態心態~)

本文旨在提供參考,并非絕對的規范,還望拋磚引玉,多多交流。

云南体彩网歡迎關注作者的微信公眾號:「宛蘇」

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.7daer.cn/interactive-document

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

您還沒有登錄

優設啟用更平安省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里