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

只有當(dāng)PM將所有的視覺需求一一交付給視覺設(shè)計(jì)師，才能保證視覺設(shè)計(jì)師全面了解PM的設(shè)計(jì)思想，以及不會(huì)漏做相應(yīng)的線框圖。

一、需要交付的內(nèi)容

剛?cè)腴T的PM可能簡(jiǎn)單的把所有原型一股腦丟給視覺設(shè)計(jì)師，可能連當(dāng)前版本還是所有版本都不區(qū)分。也不會(huì)區(qū)分線框圖和交互圖。視覺設(shè)計(jì)師只能自己琢磨，以及主動(dòng)來問你。

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

• 新增的線框圖
• 優(yōu)化的線框圖
• 原有線框圖新增的視覺控件
• 原有線框圖優(yōu)化的視覺控件

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

二、如何交付給視覺設(shè)計(jì)師

點(diǎn)擊線框圖，可跳轉(zhuǎn)到相應(yīng)頁面查看詳細(xì)信息。部分線框圖之間有關(guān)系，使用線條表示。點(diǎn)擊網(wǎng)址直接查看演示。

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

通常的做法

在Axure中新建一個(gè)頁面，然后將需要做的線框圖以及控件，復(fù)制到這個(gè)頁面中。然后選擇并排序。最后用線段聯(lián)系關(guān)聯(lián)起來。

存在的問題

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

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

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

新建一個(gè)頁面

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

新建頁面快照

將默認(rèn)元件庫(kù)-標(biāo)記元件中的頁面快照拖到該頁面中。建議位置放到(0,0)。

設(shè)置引用的頁面

雙擊該元件，設(shè)置引用的頁面。

感覺效果很丑，但是展示了引用頁面的所有內(nèi)容。此時(shí)如果修改引用頁面的內(nèi)容，這個(gè)頁面快照也會(huì)更新。

設(shè)置頁面快照屬性

我們需要調(diào)整一下設(shè)置，選中該元件，在右側(cè)的屬性最下面有個(gè)頁面快照屬性。

引用頁面

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

適應(yīng)比例

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

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

通常情況下，你應(yīng)該取消適用比例，縮放比設(shè)置為100%。

填充

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

修改頁面快照尺寸

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

以上就是添加線框圖到“輸出視覺稿”的方法。看起來很復(fù)雜，但是如果你的原型設(shè)計(jì)是規(guī)范的，或者看過我的浪子PRD所有教程，以上幾步真的很快，10秒足矣。

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

有時(shí)候，我們需要在已有頁面中新增幾個(gè)控件，那么此時(shí)是不需要傳達(dá)整個(gè)頁面的需求，只需要畫相應(yīng)的控件。最好視覺設(shè)計(jì)師也可以進(jìn)入到原始頁面查看相關(guān)信息。

點(diǎn)擊動(dòng)作，設(shè)置只顯示哪些控件即可。

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

四、總結(jié)

這種呈現(xiàn)視覺需求，是有不少優(yōu)勢(shì)的。點(diǎn)擊演示網(wǎng)址進(jìn)行查看，點(diǎn)擊線框圖可跳轉(zhuǎn)到相應(yīng)頁面查看詳細(xì)信息。

完美的將視覺需求和原型本身關(guān)聯(lián)起來，極大的降低了視覺設(shè)計(jì)師和前端工程師的理解門檻，以及高效率的實(shí)現(xiàn)需求。

另外其實(shí)PM產(chǎn)出的視覺需求，和視覺設(shè)計(jì)師最終輸出的視覺稿平鋪圖，其實(shí)是一脈相承的。

相關(guān)閱讀

Axure原型加流程圖功能的高效結(jié)合

為什么375×667是移動(dòng)端原型的最佳分辨率

如何在Axure中正確設(shè)置APP原型的尺寸

全面通用的移動(dòng)端產(chǎn)品規(guī)范V2.0

#專欄作家#

浪子，業(yè)務(wù)型PM，浪子PRD系列51prd.com，公眾號(hào)：langzisay。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。