不少PM認為畫視覺稿是視覺設計師的事情，所以偷懶也不整理視覺需求給到對方，最后驗收發現缺少部分視覺稿，或者畫出的視覺稿和PM要求的差異很大。介紹我自己研究出來的快速交付視覺需求的方法論，絕對值得學一學。

只有當PM將所有的視覺需求一一交付給視覺設計師，才能保證視覺設計師全面了解PM的設計思想，以及不會漏做相應的線框圖。

一、需要交付的內容

剛入門的PM可能簡單的把所有原型一股腦丟給視覺設計師，可能連當前版本還是所有版本都不區分。也不會區分線框圖和交互圖。視覺設計師只能自己琢磨，以及主動來問你。

當你的PM經驗豐富了，至少會將視覺需求從所謂的原型(線框圖+交互+邏輯)中抽離出來，分離到每一個版本，并且按照性質分成以下部分：

• 新增的線框圖
• 優化的線框圖
• 原有線框圖新增的視覺控件
• 原有線框圖優化的視覺控件

至于刪除的部分，直接由PM和前端工程師溝通即可。

二、如何交付給視覺設計師

點擊線框圖，可跳轉到相應頁面查看詳細信息。部分線框圖之間有關系，使用線條表示。點擊網址直接查看演示。

我相信有不少PM畫過類似的原型視覺稿，然后給到視覺設計師。

通常的做法

在Axure中新建一個頁面，然后將需要做的線框圖以及控件，復制到這個頁面中。然后選擇并排序。最后用線段聯系關聯起來。

存在的問題

• 需要選擇你需要的線框圖全部或者部分內容比如某幾個控件。
• 既然是復制，那后續的原始線框圖如果修改，需要重新找出并復制一遍。
• 原型和視覺需求不在一個地方， 視覺設計師很難統一查看了解。
• 所需的制作時間其實挺多的。

三、如何快速生成視覺需求

之前我在文章《Axure原型加流程圖功能的高效結合》其實已經分享過一部分內容。而這篇文章我來全面完整的教大家如何快速生成視覺需求。

新建一個頁面

在Axure中新建一個頁面，命名為“輸出視覺稿”。用來存放需要設計的線框圖和控件。

新建頁面快照

將默認元件庫-標記元件中的頁面快照拖到該頁面中。建議位置放到(0,0)。

設置引用的頁面

雙擊該元件，設置引用的頁面。

感覺效果很丑，但是展示了引用頁面的所有內容。此時如果修改引用頁面的內容，這個頁面快照也會更新。

設置頁面快照屬性

我們需要調整一下設置，選中該元件，在右側的屬性最下面有個頁面快照屬性。

引用頁面

我們剛剛設置過，你也可以在這里修改。

適應比例

偏移量，是指你引用原始頁面中的區域位置，比如我的線框圖的起始位置，就是手機原型整體的位置都會設置為(0,0)，如下圖所示。當然也有部分PM習慣使用(20,20)，更有不少PM每個頁面中的位置是不一樣的。

縮放比，是指把原始頁面的所有內容縮放到你設定的頁面快照尺寸，默認是170×300。

通常情況下，你應該取消適用比例，縮放比設置為100%。

填充

默認是(5,5,5,5)，一般改成(0,0,0,0)即可。你會發現和原始頁面越來越像，就是感覺只是左上角的一部分。

修改頁面快照尺寸

修改成你定義的原型分辨率，我這邊都是375×647。詳見文章《為什么375×667是移動端原型的最佳分辨率》，至于如何設置原型分辨率詳見《如何在Axure中正確設置APP原型的尺寸》。

以上就是添加線框圖到“輸出視覺稿”的方法?？雌饋砗軓碗s，但是如果你的原型設計是規范的，或者看過我的浪子PRD所有教程，以上幾步真的很快，10秒足矣。

如果需要輸出部分視覺控件

有時候，我們需要在已有頁面中新增幾個控件，那么此時是不需要傳達整個頁面的需求，只需要畫相應的控件。最好視覺設計師也可以進入到原始頁面查看相關信息。

點擊動作，設置只顯示哪些控件即可。

假設，我們只需修改該頁面中的上導航的tab按鈕，那我們隱藏掉其他控件即可。

四、總結

這種呈現視覺需求，是有不少優勢的。點擊演示網址進行查看，點擊線框圖可跳轉到相應頁面查看詳細信息。

完美的將視覺需求和原型本身關聯起來，極大的降低了視覺設計師和前端工程師的理解門檻，以及高效率的實現需求。

另外其實PM產出的視覺需求，和視覺設計師最終輸出的視覺稿平鋪圖，其實是一脈相承的。

相關閱讀

Axure原型加流程圖功能的高效結合

為什么375×667是移動端原型的最佳分辨率

如何在Axure中正確設置APP原型的尺寸

全面通用的移動端產品規范V2.0

#專欄作家#

浪子，業務型PM，浪子PRD系列51prd.com，公眾號：langzisay。

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