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

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

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

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

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

　?。?nbsp;新增的線框圖

　　． 優(yōu)化的線框圖

　?。?nbsp;原有線框圖新增的視覺(jué)控件

　?。?nbsp;原有線框圖優(yōu)化的視覺(jué)控件

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

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

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

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

　　通常的做法

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

　　存在的問(wèn)題

　　． 需要選擇你需要的線框圖全部或者部分內(nèi)容比如某幾個(gè)控件。

　?。?nbsp;既然是復(fù)制，那后續(xù)的原始線框圖如果修改，需要重新找出并復(fù)制一遍。

　　． 原型和視覺(jué)需求不在一個(gè)地方， 視覺(jué)設(shè)計(jì)師很難統(tǒng)一查看了解。

　?。?nbsp;所需的制作時(shí)間其實(shí)挺多的。

　　三、如何快速生成視覺(jué)需求

    這篇文章我來(lái)全面完整的教大家如何快速生成視覺(jué)需求。

　　新建一個(gè)頁(yè)面

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

　　新建頁(yè)面快照

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

　設(shè)置引用的頁(yè)面

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

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

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

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

引用頁(yè)面

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

　　適應(yīng)比例

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

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

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

填充

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

修改頁(yè)面快照尺寸

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

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

　　如果需要輸出部分視覺(jué)控件

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

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

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

四、總結(jié)

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

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

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

來(lái)源：人人都是產(chǎn)品經(jīng)理