前言

當(dāng)我在網(wǎng)上搜尋交互文檔規(guī)范時(shí)，可以搜到很多關(guān)于交互文檔的結(jié)構(gòu)搭建的文章，但始終沒(méi)有一份較為完整的案例 Demo 展示，主要是因?yàn)榇蠖鄶?shù)商業(yè)項(xiàng)目的交互文檔是涉密的，無(wú)法進(jìn)行分享。

相信大家和我一樣想要一睹交互文檔實(shí)戰(zhàn)案例的芳容，我本著在交互行業(yè)學(xué)習(xí)的精神，研究了飛書(shū)、釘釘、騰訊會(huì)議，構(gòu)建了這個(gè)《UEDART 云辦公 APP 交互案例》的虛擬項(xiàng)目，最終輸出在交互文檔中可以快速?gòu)?fù)用的框架與模塊。旨在通過(guò)符合實(shí)際的項(xiàng)目來(lái)進(jìn)行交互文檔整體構(gòu)建的闡述，讓大家通過(guò)案例的瀏覽，更為切實(shí)的了解到交互文檔的細(xì)節(jié)，從中得到一些有效的幫助。

序幕

以下預(yù)覽的整個(gè)交互文檔全部由 Axure 制作完成

UEDART 云辦公 APP 交互案例預(yù)覽： https://vip.uedart.com/works/CloudOffice/Complete/index.html

關(guān)于整個(gè)云辦公 APP 項(xiàng)目的需求分析、設(shè)計(jì)思路、業(yè)務(wù)流程圖、頁(yè)面流程圖、原型圖制作內(nèi)容已經(jīng)在《UEDART 云辦公 APP 交互案例》文檔中體現(xiàn)了，本文就不再做過(guò)多贅述。接下來(lái)主要講一講，通過(guò)本次交互案例的展示，如何利用 Axure 快速構(gòu)建 DRD 交互文檔，為我們后續(xù)的工作提供更加有效的幫助。

通過(guò)本文的闡述再結(jié)合《UEDART 云辦公 APP 交互案例》，雙管齊下，能夠讓大家更好地了解到整個(gè)交互文檔框架與實(shí)戰(zhàn)交互案例的全貌，深入各個(gè)環(huán)節(jié)挖掘細(xì)節(jié)知識(shí)。這樣會(huì)比單獨(dú)從一個(gè)角度切入更為的直觀和有效。與此同時(shí)，大家可以初步了解到如何從項(xiàng)目實(shí)踐中抽離共通性，有意識(shí)地將共通性進(jìn)行模塊化是提高效率的好方法。

希望本文能夠給大家傳播一些知識(shí)，也希望在和大家交流的過(guò)程中，我也能不斷地修正錯(cuò)誤汲取新知識(shí)，和大家一起成長(zhǎng)。

一、明確用戶(hù)對(duì)象

交互文檔給誰(shuí)看，定義文檔的用戶(hù)對(duì)象很關(guān)鍵。

根據(jù)文檔的用戶(hù)對(duì)象不同，制作的方式與精細(xì)度也會(huì)有不同的要求。

本次制作的交互文檔主要是針對(duì)工作環(huán)節(jié)中，用于落地開(kāi)發(fā)實(shí)現(xiàn)，輔助工作環(huán)節(jié)中的各個(gè)成員：產(chǎn)品經(jīng)理、視覺(jué)設(shè)計(jì)、開(kāi)發(fā)人員以及測(cè)試人員，了解產(chǎn)品交互的功能與流程細(xì)節(jié)需求，便于開(kāi)發(fā)對(duì)需求的理解與實(shí)現(xiàn)。

二、文檔制作場(chǎng)景化

2.1 我們產(chǎn)品設(shè)計(jì)中的5個(gè)常見(jiàn)場(chǎng)景

0-1 的產(chǎn)品設(shè)計(jì)：

完全 0-1 的產(chǎn)品，從頭梳理產(chǎn)品業(yè)務(wù)、場(chǎng)景與業(yè)務(wù)，對(duì)應(yīng)的業(yè)務(wù)與模塊需求特別多

全新業(yè)務(wù)線(xiàn)：

已有基礎(chǔ)流程與業(yè)務(wù)的沉淀，需要迭代全新業(yè)務(wù)線(xiàn)或大模塊，對(duì)應(yīng)的業(yè)務(wù)流程和功能

大版本迭代產(chǎn)品功能：

涉及多平臺(tái)、流程較多，對(duì)應(yīng)的迭代功能比較多

小版本迭代產(chǎn)品功能：

涉及流程少，迭代功能少，對(duì)應(yīng)的要求是快速響應(yīng)上線(xiàn)

2.2 如何讓整個(gè)文檔框架更為的靈活呢？

針對(duì)以上場(chǎng)景我將交互文檔框架拆分為：大、中、小三種形式，分別對(duì)應(yīng)產(chǎn)品設(shè)計(jì)的幾個(gè)常見(jiàn)場(chǎng)景

大型：0-1 的產(chǎn)品設(shè)計(jì)，迭代全新業(yè)務(wù)線(xiàn)

此會(huì)用 1 個(gè)完整的 UEDART 云辦公 APP 交互文檔案例來(lái)展示

UEDART 云辦公 APP 交互案例預(yù)覽： https://vip.uedart.com/works/CloudOffice/Complete/index.html

中型：大版本迭代產(chǎn)品功能

此大體結(jié)構(gòu)和“大型”差別不大，主要是刪減了一些基礎(chǔ)信息的內(nèi)容，流程和子業(yè)務(wù)的數(shù)量上的差異性

交互說(shuō)明框架（中型）預(yù)覽： https://vip.uedart.com/works/CloudOffice/mid/index.html

小型：小版本迭代產(chǎn)品功能

小版本，時(shí)間緊，功能較少，于是這邊簡(jiǎn)化為“頁(yè)面流”和原型圖展示

交互說(shuō)明框架（小型）預(yù)覽： https://vip.uedart.com/works/CloudOffice/little/index.html

三、提煉交互文檔特性

結(jié)合用戶(hù)對(duì)象和使用場(chǎng)景，提煉交互文檔的幾個(gè)特性

• 易于閱讀：方便流程中的各個(gè)對(duì)象的閱讀與理解，方便瀏覽與閱讀
• 靈活應(yīng)用：適配于各個(gè)產(chǎn)品設(shè)計(jì)的場(chǎng)景，提升效率
• 調(diào)整修改：在產(chǎn)品開(kāi)發(fā)進(jìn)程中進(jìn)行錯(cuò)誤點(diǎn)的調(diào)整或需求變更的標(biāo)記與注釋
• 版本迭代：要做好版本管理，方便更新迭代，不只是項(xiàng)目的迭代，整體交互文檔框架也需要不斷更新迭代使其更加符合我們實(shí)際的工作所需

為什么要提煉特性？

主要是讓制作有方向性，這一點(diǎn)很重要。

做一件事一定要明確為什么做，在項(xiàng)目之初已經(jīng)定義了本次項(xiàng)目的主要目的。在明確為什么做的基礎(chǔ)上，如何更有效地實(shí)現(xiàn)目標(biāo)，方向性很重要，它為接下去的項(xiàng)目制作提供了關(guān)鍵著陸點(diǎn)，在一系列的發(fā)問(wèn)與思考中不斷完善靠近最終目標(biāo)。接下來(lái)的制作思路將基于此特性，進(jìn)行制作方法的選型與整體交互文檔構(gòu)建的架構(gòu)。

四、制作思路

最初定義《UEDART 云辦公 APP 交互案例》的輸出為主，此案例按照大型的交互文檔框架進(jìn)行打造，讓大家能夠了解到交互文檔的全流程制作的全過(guò)程。

4.1 制作準(zhǔn)備與產(chǎn)出物

4.1.1. 制作方法論

我稱(chēng)之為五環(huán)制作法：提煉原則，確定方法，統(tǒng)一規(guī)范、拆分模塊、提升效率。

• 原則：基于交互文檔的四個(gè)特性，易于閱讀、靈活應(yīng)用、調(diào)整修改、版本迭代。
• 方法：利用 Axure+oss 原型托管的方式來(lái)實(shí)現(xiàn)整體文檔的架構(gòu)與部署。方便不同制作場(chǎng)景下的應(yīng)用、各成員的瀏覽閱讀、修改調(diào)整、版本迭代控制。
• 規(guī)范：基于統(tǒng)一的規(guī)則，方便保持元素的一致性，提升文檔細(xì)節(jié)美觀度和閱讀感。
• 模塊：文檔內(nèi)部形成標(biāo)準(zhǔn)件模塊化、流程模塊化、頁(yè)面模塊化、組件模塊化，方便復(fù)用與管理。
• 效率：采用了原有已經(jīng)制作好的 PRD 框架+手機(jī)組件作為基礎(chǔ)素材，方便提升的制作效率，與此同時(shí)規(guī)范性與模塊化也為后續(xù)的制作帶來(lái)了高效率性。

4.1.2 項(xiàng)目準(zhǔn)備

• 項(xiàng)目名稱(chēng)：UEDART 云辦公 APP1.0
• 項(xiàng)目調(diào)研：了解競(jìng)品、分析競(jìng)品、競(jìng)品結(jié)構(gòu)分析（主要針對(duì)飛書(shū)、釘釘）
• 項(xiàng)目安排：周期安排，利用業(yè)余晚上和周末的時(shí)間完成
• 制作工具：Axure9.0 版本、xmind8.0
• 項(xiàng)目啟動(dòng)：2020 年 12 月 1 日啟動(dòng)，
• 預(yù)計(jì)完成：2021 年 1 月 15 日
• 實(shí)際時(shí)間：2021 年 2 月 6 日

Tip：回溯項(xiàng)目整個(gè)的制作時(shí)間，2021 年 1 月穿插了很多其他事情，比之預(yù)期有所滯后，最終還算比較順利的在春節(jié)前完成了整個(gè)項(xiàng)目的制作與整理。

4.1.3 最終產(chǎn)出

• 腦圖：云辦公 APP、交互規(guī)則、非功能性需求
• 大型交互說(shuō)明框架：UEDART 云辦公 APP 交互案例
• 中型交互說(shuō)明框架：交互說(shuō)明框架_中型
• 小型交互說(shuō)明框架：交互說(shuō)明框架_小型
• 原型元素：原型元素規(guī)范

4.2 文檔結(jié)構(gòu)

4.2.1 瀏覽框架結(jié)構(gòu)

• 標(biāo)記 1：交互文檔標(biāo)題，包含項(xiàng)目名稱(chēng)+版本號(hào)
• 標(biāo)記 2：主模塊頻道切換，可根據(jù)需要自定義和調(diào)整排序
• 標(biāo)記 3：模塊內(nèi)，切換菜單，可根據(jù)需要自定義增加或減少
• 標(biāo)記 4：子菜單內(nèi)容展示，可根據(jù)需要自定義內(nèi)容頁(yè)內(nèi)容

Tip：整體框架封裝好自適應(yīng)結(jié)構(gòu)，方便筆記本與 pc 電腦的閱讀感，同時(shí)封裝好切換點(diǎn)擊動(dòng)效，整體瀏覽感就和平時(shí)瀏覽網(wǎng)站是一樣的效果，方便讀者閱讀。

4.2.2 交互文檔結(jié)構(gòu)

大結(jié)構(gòu)分為：基礎(chǔ)信息、交互說(shuō)明、原型頁(yè)面、回收站四個(gè)模塊。

部分內(nèi)容展示：

更新日志：

產(chǎn)品介紹：

設(shè)計(jì)思路：

通用規(guī)則：

非功能性需求說(shuō)明：

交互說(shuō)明目錄：

頁(yè)面流程圖：

4.3 文檔規(guī)范與模塊化

4.3.1 原型元素規(guī)范

在整體文檔制作開(kāi)始時(shí)，先制定好整個(gè)原型文檔的原型元素是一件很必要的事情，這為后續(xù)制作的規(guī)范統(tǒng)一性提供了堅(jiān)實(shí)的基礎(chǔ)，基于統(tǒng)一的規(guī)則，方便保持元素的一致性，提升文檔細(xì)節(jié)美觀度和閱讀感。

這樣能夠保證后續(xù)組件與頁(yè)面的元素統(tǒng)一，保持一致性的原則。

主要定義了品牌色、自定義灰度色系、頭像尺寸、字號(hào)、4px 間距。

4.3.2 組件規(guī)范

我們?cè)诠ぷ髦薪?jīng)常會(huì)用到一些固有的組件庫(kù)，比如 Ant 螞蟻出品的 axure 組件，很多同學(xué)可能就“拿來(lái)主義”直接應(yīng)用到自己的項(xiàng)目中，這確實(shí)也是一個(gè)比較容易也很省事的做法。

我個(gè)人比較習(xí)慣于把這些組件素材作為制作的基礎(chǔ)素材，在實(shí)際應(yīng)用中根據(jù)項(xiàng)目的業(yè)務(wù)所需，重塑組件。項(xiàng)目中的組件制作是一個(gè)循序漸進(jìn)的過(guò)程，不能一蹴而就，在我們制作過(guò)程中，拆分出來(lái)的通用模塊，就可以封裝為一個(gè)組件樣式，方便下一個(gè)流程或頁(yè)面的復(fù)用。

本次制作中我應(yīng)用了 UEDART 出品的手機(jī)端組件作為基地素材，進(jìn)而優(yōu)化成本次項(xiàng)目中的組件元素。

這套組件規(guī)范也是我參與制作的一個(gè)項(xiàng)目。

預(yù)覽地址： https://vip.uedart.com/demo/UEDART_003/index.html

4.3.3 模塊化思維

我們不止在制作文檔時(shí)需要模塊化這種思維，在設(shè)計(jì)產(chǎn)品與流程設(shè)計(jì)時(shí)也需要帶著這種思維，可以有效地將流程中公用的子業(yè)務(wù)流進(jìn)行串聯(lián)，避免重復(fù)子流程與重復(fù)的開(kāi)發(fā)工作。

4.4 調(diào)整與修改

4.4.1 文檔聯(lián)動(dòng)調(diào)整

框架頁(yè)面名稱(chēng)，采用函數(shù)制作，名稱(chēng)自動(dòng)按照頁(yè)面名稱(chēng)展示。

交互說(shuō)明目錄名稱(chēng)：采用引用制作，名稱(chēng)自動(dòng)識(shí)別頁(yè)面名稱(chēng)展示。

頁(yè)面流程的頁(yè)面與頁(yè)面名稱(chēng)：頁(yè)面采用引用自動(dòng)識(shí)別對(duì)應(yīng)原型展示，頁(yè)面名稱(chēng)采用引用自動(dòng)識(shí)別頁(yè)面名稱(chēng)展。

通過(guò)以上幾個(gè)小應(yīng)用可以做到方便后續(xù)修改時(shí)，不需要做過(guò)多的重復(fù)命名工作，只需修改左側(cè)樹(shù)結(jié)構(gòu)的頁(yè)面名稱(chēng)，所有相關(guān)頁(yè)面都會(huì)同步修改名稱(chēng)，而且當(dāng)我們需要在頁(yè)面名稱(chēng)上備注此頁(yè)面（修改）時(shí)，在其他環(huán)節(jié)也會(huì)展示，相當(dāng)方便。

不過(guò)在前面的制作時(shí)就要按方法執(zhí)行，避免后續(xù)為調(diào)整修改名稱(chēng)，工作量大且容易忽略，導(dǎo)致名稱(chēng)不對(duì)應(yīng)。

4.4.2 更新修改

當(dāng)文檔進(jìn)行修改或更新時(shí)要做哪些動(dòng)作：

1、更新日志添加

按照修改時(shí)間、屬性、描述、修改人進(jìn)行添加，當(dāng)同一天更新比較多時(shí)（修改了需求），此時(shí)可以按照調(diào)整模塊拆分成多條來(lái)添加

2、添加目錄與頁(yè)面?zhèn)渥?

在交互說(shuō)明對(duì)應(yīng)的流程目錄上添加更新備注，時(shí)間+更新

在頁(yè)面名稱(chēng)后加上（新增）或（修改）

3、添加頁(yè)面流程標(biāo)記

頁(yè)面流程中的標(biāo)記，根據(jù)所做的修改部分進(jìn)行標(biāo)記

為了方便大家在頁(yè)面流程中的標(biāo)記，我將標(biāo)記修改進(jìn)行了組件化：多頁(yè)面修改標(biāo)記、注釋調(diào)整標(biāo)記、單頁(yè)面局部標(biāo)記、刪除隱藏標(biāo)記

這邊我舉個(gè)例子，方便大家對(duì)標(biāo)記實(shí)操的理解。當(dāng)我修改了登錄頁(yè)面的一鍵登錄頁(yè)面和注釋描述時(shí)。

五、瀏覽閱讀

借助原型托管工具：這邊我采用了阿里云 oss 上傳。主要是考慮瀏覽速度的因素，藍(lán)湖大文檔的原型托管會(huì)卡。當(dāng)然你也可以選擇 Axhub 或藍(lán)湖以及其他托管平臺(tái)都可以實(shí)現(xiàn)將 Axure 生成的 html 進(jìn)行上傳。

文章來(lái)源：優(yōu)設(shè)   作者：時(shí)光若刻

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)