1 模擬丁香園的高保真原型

在一般的開發工作之前，我們通常會設計產品原型，大部分為axure繪制的線框圖作為產品的PRD文檔，供UI和開發進行前期工作，但是有的時候客戶、領導想在開發之前，看到產品的概貌，就必須做產品的高保真原型進行模擬，這時如果做出來的原型能運行在手機端，那再好不過，如圖1（注：上圖是仿照丁香園的家庭用藥，做的一個高保真原型，算是免費給丁香園打廣告，是不是考慮給我點廣告費？哈哈）。

原型制作軟件有挺多，不過個人使用之后，最后還是依然堅持使用Axure,優點頗多，也可能是先入為主，這個教程Axure也是必須軟件之一，適配為iphone5s

1、首選是制作高保真原型，如圖2：

圖2 高保真的原型圖

（注：高保真原型最好不要用太多內部框架嵌套，加載速度有點慢，還是用動態面板慢慢做，層級多了要有耐心）

iOS的屏幕尺寸目前是有限的幾種，原型尺寸要和其一致。比如iphone5s視網膜下像素為640*1136（The default full screen size of the iPhone 5 is 320 x 568 px (w x h).就是說320*568已經可以鋪滿全屏，不過，由于Axure導出的原型在iOS上處理status bar時有問題，需要在高度上減去status bar的高度20，就為320*548，所以保證原型的高寬為320和548,如圖3整體高度為548px：

圖3 高寬為320*548

2、F8進行生成設置，設置如下圖4：

圖4 配置設置

按照上圖，設置參數（注：不過閃屏頁面一直無法出現，這個問題我也沒得到解決，有解決的可以回復我）

3、生成原型文件，上傳到axureshare或者放置在EasyWebSevr的根目錄下，用本機IP替代電腦名稱，獲得完整路徑。(不清楚的點擊上期內容如何用EasyWebSvr搭建axure本地環境）

4、復制生成的html中原型鏈接，選擇without Sitemap,如圖5：

圖5 復制鏈接

5、在safari中粘貼鏈接，并打開，已經可以看到和屏幕寬度的界面，并添加到主屏幕，如圖6：。

圖6 添加到主屏幕

6、可以通過桌面的快捷icon，進入原型，這個時候已經適配了手機，躺著桌面的icon,絲毫不會讓人看得出是原型，下圖7：

圖7 test桌面icon快捷啟動

本文作者：某人某年； 轉載自：簡書

評估一位產品新人的原型時，發現對方竟然不知道Axure的很多實用技巧，導致很多效果都是用極其復雜或者笨拙的方式實現。Axure是產品經理的必備工具之一，熟練使用axure可以提高畫原型的效率。那axure的這些實用技巧，你都知道嗎？

為避免他人也有同樣的問題，對Axure常用技巧做總結如下：

（1）點擊某些按鈕，或者鼠標懸浮時，顯示某些隱藏的元件，元件被覆蓋，這是因為元件層級太低，顯示元件的用例注意勾選置于頂層（見紅框）。

（2）可以批量居中頁面，不需要每個頁面都去設置一下居中樣式。點擊Project，再點擊Page Style Editor，在彈出窗口中設置Page Align居中即可。

（3）彈窗類動態面板N多，聚在頁面中央，且一層層覆蓋在一起，想要改某個，需要挨個找。這類面板可以錯落有致的放置在主頁面右邊，在Pin to Browser設置位置居中即可。

（4）Tab切換，所有Tab設置為選項組，給每個Tab設置點擊選中事件，這樣每次只有一個可以選中，選中和懸浮的樣式可以在Interaction Styles里設置。

（5）不需要添加一橫線，通過隱藏/顯示事件，實現下圖“年費會員”的效果。每個菜單一個矩形框，隱藏左、上、右邊線，下邊線設置為白色，在Interaction Styles里設置下邊線選中或者懸浮樣式。

（6）實現點擊時顯示，再次點擊時隱藏，用Toggle即可實現。

（7）沒有鎖定背景框，移動時添亂。可以點擊工具欄Lock鎖定不需要移動的元件。

（8）可以用動態面板的Scrollbar屬性實現拖動滾動條來查看容器中的元素。

（9）頁面比較大時，將鼠標的光標放置在編輯窗口中，按住鍵盤的空格鍵，就能看到鼠標的光標會切換成手狀。然后就可以用來抓著畫面任意滑動，而且不會對任何的部件造成影響。

（10）經常會遇到幾個部件重疊的情況，如何選擇下層部件呢？可以在部件管理窗口中直接選擇想要的部件，另外可以選擇最上層的部件之后，稍等會再點擊一次，就會選中下一層的部件。若選擇再下一層的部件，做相同操作。

（11）需要在水平方向或者垂直方向上移動部件，可以按住shift鍵，拖動部件左右或者上下移動，這樣可以直接平移部件。

（12）按住Ctrl鍵，拖動部件，可以快速復制部件。按住Ctrl+shift鍵，拖動部件，就會復制了一個新的部件，并將新部件進行平移。

（13）按住Ctrl鍵之后，將鼠標放在部件的邊緣，就能夠旋轉部件了。

（14）生成HTML原型文件時，在“Logo”里可以添加logo和標題語，這樣在導出的原型中，左上角會顯示添加的logo和標題語。

（15）當幾個部件組成一塊大的元件時，可使用組合快捷鍵Ctrl+G，這樣的好處是可以很方便地移動，不需要每次都全部選中后才移動。

（16）鎖定部件快捷鍵Ctrl+K后，部件鎖定后，不能被移動和復制，可以避開不需要復制的部件，提高效率。

（17）如何實現列表整行的點擊效果呢？拖動熱點控件到列表的記錄中，覆蓋列表的一行記錄，然后設置熱點的點擊事件，就可實現整塊的點擊效果。

（18）Axure代替viso來做流程圖，它提供了畫流程圖的控件，連線選擇連接模式，選中控件，按住左鍵，拖到鼠標至下一個控件。

（19）重復比較多的地方請盡量使用母板，最好是非固定位置的母板。模板有三種類型：一種是固定位置的母版，一種是可以隨意移動位置的母版，還有一種是可以隨意移動并且母版元素可以拆解的母版。這三種可以根據需要設置，在模板右鍵鼠標—>拖放行為，進行選擇。

（20）如果是團隊協作，使用Project，會使整個項目效率顯著提高且減少出錯。

最后強調一點經常被大家忽略的問題，沒有及時為組件和動態面板命名，用時，才手忙腳亂的添加，增加了維護原型的時間成本，切記，養成隨時命名的好習慣。

Axure有些實用技巧是在使用過程中不斷摸索出來的，多畫原型，和他人多多交流，多看前輩的demo，可以在短期內提高自己。

本次總結只針對近期所見，axure還有大量的實用技巧，歡迎大家分享。

本文由 @柒柒是80后 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

言：當我在網上搜尋交互文檔規范時，可以搜到很多關于交互文檔的結構搭建的文章，但始終沒有一份較為完整的案例Demo展示，主要是因為大多數商業項目的交互文檔是涉密的，無法進行分享。

相信大家和我一樣想要一睹交互文檔實戰案例的芳容，我本著在交互行業學習的精神，研究了飛書、釘釘、騰訊會議，最終構建了這個《UEDART云辦公APP交互案例》的虛擬項目，最終輸出在交互文檔中可以快速復用的框架與模塊。旨在通過符合實際的項目來進行交互文檔整體構建的闡述，讓大家通過案例的瀏覽，更為切實的了解到交互文檔的細節，從中得到一些有效的幫助。

序幕

以下預覽的整個交互文檔全部由Axure制作完成

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

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

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

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

一、明確用戶對象

交互文檔給誰看，定義文檔的用戶對象很關鍵

根據文檔的用戶對象不同，制作的方式與精細度也會有不同的要求

本次制作的交互文檔主要是針對工作環節中，用于落地開發實現，輔助工作環節中的各個成員：產品經理、視覺設計、開發人員以及測試人員，了解產品交互的功能與流程細節需求，便于開發對需求的理解與實現。

二、文檔制作場景化

2.1 我們產品設計中的幾個常見場景

0-1的產品設計：

完全0-1的產品，從頭梳理產品業務、場景與業務，對應的業務與模塊需求特別多

全新業務線：

已有基礎流程與業務的沉淀，需要迭代全新業務線或大模塊，對應的業務流程和功能多

大版本迭代產品功能：

涉及多平臺、流程較多，對應的迭代功能比較多

小版本迭代產品功能：

涉及流程少，迭代功能少，對應的要求是快速響應上線

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

針對以上場景我將交互文檔框架拆分為：大、中、小三種形式，分別對應產品設計的幾個常見場景

大型：0-1的產品設計，迭代全新業務線

此會用1個完整的UEDART云辦公APP交互文檔案例來展示

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

中型：大版本迭代產品功能

此大體結構和“大型”差別不大，主要是刪減了一些基礎信息的內容，流程和子業務的數量上的差異性

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

小型：小版本迭代產品功能

小版本，時間緊，功能較少，于是這邊簡化為“頁面流”和原型圖展示

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

三、提煉交互文檔特性

結合用戶對象和使用場景，提煉交互文檔的幾個特性

易于閱讀：方便流程中的各個對象的閱讀與理解，方便瀏覽與閱讀

靈活應用：適配于各個產品設計的場景，提升效率

調整修改：在產品開發進程中進行錯誤點的調整或需求變更的標記與注釋

版本迭代：要做好版本管理，方便更新迭代，不只是項目的迭代，整體交互文檔框架也需要不斷更新迭代使其更加符合我們實際的工作所需

為什么要提煉特性？

主要是讓制作有方向性，這一點很重要。

做一件事一定要明確為什么做，在項目之初已經定義了本次項目的主要目的。在明確為什么做的基礎上，如何更有效地實現目標，方向性很重要，它為接下去的項目制作提供了關鍵著陸點，在一系列的發問與思考中不斷完善靠近最終目標。接下來的制作思路將基于此特性，進行制作方法的選型與整體交互文檔構建的架構

四、制作思路

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

4.1 制作準備與產出物

4.1.1 制作方法論

我稱之為五環制作法：提煉原則，確定方法，統一規范、拆分模塊、提升效率。

原則：基于交互文檔的四個特性，易于閱讀、靈活應用、調整修改、版本迭代。

方法：利用Axure+oss原型托管的方式來實現整體文檔的架構與部署。方便不同制作場景下的應用、各成員的瀏覽閱讀、修改調整、版本迭代控制。

規范：基于統一的規則，方便保持元素的一致性，提升文檔細節美觀度和閱讀感。

模塊：文檔內部形成標準件模塊化、流程模塊化、頁面模塊化、組件模塊化，方便復用與管理。

效率：采用了原有已經制作好的PRD框架+手機組件作為基礎素材，方便提升的制作效率，與此同時規范性與模塊化也為后續的制作帶來了高效率性。

4.1.2 項目準備

項目名稱：UEDART云辦公APP1.0

項目調研：了解競品、分析競品、競品結構分析（主要針對飛書、釘釘）

項目安排：周期安排，利用業余晚上和周末的時間完成

制作工具：Axure9.0版本、xmind8.0

項目啟動：2020年12月1日啟動，

預計完成：2021年1月15日

實際時間：2021年2月6日

Tip：回溯項目整個的制作時間，2021年1月穿插了很多其他事情，比之預期有所滯后，最終還算比較順利的在春節前完成了整個項目的制作與整理。

4.1.3 最終產出

腦圖：云辦公APP、交互規則、非功能性需求

大型交互說明框架：UEDART云辦公APP交互案例

中型交互說明框架：交互說明框架_中型

小型交互說明框架：交互說明框架_小型

原型元素：原型元素規范

4.2 文檔結構

4.2.1 瀏覽框架結構

標記1：交互文檔標題，包含項目名稱+版本號

標記2：主模塊頻道切換，可根據需要自定義和調整排序

標記3：模塊內，切換菜單，可根據需要自定義增加或減少

標記4：子菜單內容展示，可根據需要自定義內容頁內容

Tip：整體框架封裝好自適應結構，方便筆記本與pc電腦的閱讀感，同時封裝好切換點擊動效，整體瀏覽感就和平時瀏覽網站是一樣的效果，方便讀者閱讀

4.2.2 交互文檔結構

大結構分為：基礎信息、交互說明、原型頁面、回收站四個模塊

部分內容展示

更新日志

產品介紹

設計思路

通用規則

非功能性需求說明

交互說明目錄

頁面流程圖

4.3 文檔規范與模塊化

4.3.1 原型元素規范

在整體文檔制作開始時，先制定好整個原型文檔的原型元素是一件很必要的事情，這為后續制作的規范統一性提供了堅實的基礎，基于統一的規則，方便保持元素的一致性，提升文檔細節美觀度和閱讀感。

這樣能夠保證后續組件與頁面的元素統一，保持一致性的原則。

主要定義了品牌色、自定義灰度色系、頭像尺寸、字號、4px間距

4.3.2 組件規范

我們在工作中經常會用到一些固有的組件庫，比如Ant螞蟻出品的axure組件，很多同學可能就“拿來主義”直接應用到自己的項目中，這確實也是一個比較容易也很省事的做法。

我個人比較習慣于把這些組件素材作為制作的基礎素材，在實際應用中根據項目的業務所需，重塑組件。項目中的組件制作是一個循序漸進的過程，不能一蹴而就，在我們制作過程中，拆分出來的通用模塊，就可以封裝為一個組件樣式，方便下一個流程或頁面的復用。

本次制作中我應用了UEDART出品的手機端組件作為基地素材，進而優化成本次項目中的組件元素。

這套組件規范也是我參與制作的一個項目

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

4.3.3 模塊化思維

我們不止在制作文檔時需要模塊化這種思維，在設計產品與流程設計時也需要帶著這種思維，可以有效地將流程中公用的子業務流進行串聯，避免重復子流程與重復的開發工作。

4.4 調整與修改

4.4.1 文檔聯動調整

框架頁面名稱，采用函數制作，名稱自動按照頁面名稱展示

交互說明目錄名稱：采用引用制作，名稱自動識別頁面名稱展示

頁面流程的頁面與頁面名稱：頁面采用引用自動識別對應原型展示，頁面名稱采用引用自動識別頁面名稱展示

通過以上幾個小應用可以做到方便后續修改時，不需要做過多的重復命名工作，只需修改左側樹結構的頁面名稱，所有相關頁面都會同步修改名稱，而且當我們需要在頁面名稱上備注此頁面（修改）時，在其他環節也會展示，相當方便。

不過在前面的制作時就要按方法執行，避免后續為調整修改名稱，工作量大且容易忽略，導致名稱不對應。

4.4.2 更新修改

當文檔進行修改或更新時要做哪些動作

1.更新日志添加

按照修改時間、屬性、描述、修改人進行添加，當同一天更新比較多時（修改了需求），此時可以按照調整模塊拆分成多條來添加

2.添加目錄與頁面備注

在交互說明對應的流程目錄上添加更新備注，時間+更新

在頁面名稱后加上（新增）或（修改）

3.添加頁面流程標記

頁面流程中的標記，根據所做的修改部分進行標記

為了方便大家在頁面流程中的標記，我將標記修改進行了組件化：多頁面修改標記、注釋調整標記、單頁面局部標記、刪除隱藏標記

這邊我舉個例子，方便大家對標記實操的理解。當我修改了登錄頁面的一鍵登錄頁面和注釋描述時

五、瀏覽閱讀

借助原型托管工具：這邊我采用了阿里云oss上傳。主要是考慮瀏覽速度的因素，藍湖大文檔的原型托管會卡。當然你也可以選擇Axhub或藍湖以及其他托管平臺都可以實現將Axure生成的html進行上傳。

鏈接分享：通過分享的地址鏈接，其他成員可以通過連接打開進行項目的瀏覽。

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

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

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

原型元素規范預覽：https://vip.uedart.com/works/CloudOffice/element/index.html

UEDART手機端基礎組件預覽：https://vip.uedart.com/demo/UEDART_003/index.html

結語

本次關于Axure打造交互文檔的分享就到此結束了，希望能夠給大家帶來一些幫助。完整的案例可以在預覽地址里可以查看，歡迎大家與我交流，共同進步。謝謝！