起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識PM如何快速完成并交付視覺需求？
不少PM認為畫視覺稿是視覺設(shè)計師的事情，所以偷懶也不整理視覺需求給到對方，最后驗收發(fā)現(xiàn)缺少部分視覺稿，或者畫出的視覺稿和PM要求的差異很大。介紹我自己研究出來的快速交付視覺需求的方法論，絕對值得學(xué)一學(xué)。
只有當(dāng)PM將所有的視覺需求一一交付給視覺設(shè)計師，才能保證視覺設(shè)計師全面了解PM的設(shè)計思想，以及不會漏做相應(yīng)的線框圖。
一、需要交付的內(nèi)容
剛?cè)腴T的PM可能簡單的把所有原型一股腦丟給視覺設(shè)計師，可能連當(dāng)前版本還是所有版本都不區(qū)分。也不會區(qū)分線框圖和交互圖。視覺設(shè)計師只能自己琢磨，以及主動來問你。
當(dāng)你的PM經(jīng)驗豐富了，至少會將視覺需求從所謂的原型(線框圖+交互+邏輯)中抽離出來，分離到每一個版本，并且按照性質(zhì)分成以下部分：
- 新增的線框圖
- 優(yōu)化的線框圖
- 原有線框圖新增的視覺控件
- 原有線框圖優(yōu)化的視覺控件
至于刪除的部分，直接由PM和前端工程師溝通即可。
二、如何交付給視覺設(shè)計師
點擊線框圖，可跳轉(zhuǎn)到相應(yīng)頁面查看詳細信息。部分線框圖之間有關(guān)系，使用線條表示。點擊網(wǎng)址直接查看演示。
我相信有不少PM畫過類似的原型視覺稿，然后給到視覺設(shè)計師。
通常的做法
在Axure中新建一個頁面，然后將需要做的線框圖以及控件，復(fù)制到這個頁面中。然后選擇并排序。最后用線段聯(lián)系關(guān)聯(lián)起來。
存在的問題
- 需要選擇你需要的線框圖全部或者部分內(nèi)容比如某幾個控件。
- 既然是復(fù)制，那后續(xù)的原始線框圖如果修改，需要重新找出并復(fù)制一遍。
- 原型和視覺需求不在一個地方， 視覺設(shè)計師很難統(tǒng)一查看了解。
- 所需的制作時間其實挺多的。
三、如何快速生成視覺需求
之前我在文章《Axure原型加流程圖功能的高效結(jié)合》其實已經(jīng)分享過一部分內(nèi)容。而這篇文章我來全面完整的教大家如何快速生成視覺需求。
新建一個頁面
在Axure中新建一個頁面，命名為“輸出視覺稿”。用來存放需要設(shè)計的線框圖和控件。
新建頁面快照
將默認元件庫-標(biāo)記元件中的頁面快照拖到該頁面中。建議位置放到(0,0)。
設(shè)置引用的頁面
雙擊該元件，設(shè)置引用的頁面。
感覺效果很丑，但是展示了引用頁面的所有內(nèi)容。此時如果修改引用頁面的內(nèi)容，這個頁面快照也會更新。
設(shè)置頁面快照屬性
我們需要調(diào)整一下設(shè)置，選中該元件，在右側(cè)的屬性最下面有個頁面快照屬性。
引用頁面
我們剛剛設(shè)置過，你也可以在這里修改。
適應(yīng)比例
偏移量，是指你引用原始頁面中的區(qū)域位置，比如我的線框圖的起始位置，就是手機原型整體的位置都會設(shè)置為(0,0)，如下圖所示。當(dāng)然也有部分PM習(xí)慣使用(20,20)，更有不少PM每個頁面中的位置是不一樣的。
縮放比，是指把原始頁面的所有內(nèi)容縮放到你設(shè)定的頁面快照尺寸，默認是170×300。
通常情況下，你應(yīng)該取消適用比例，縮放比設(shè)置為100%。
填充
默認是(5,5,5,5)，一般改成(0,0,0,0)即可。你會發(fā)現(xiàn)和原始頁面越來越像，就是感覺只是左上角的一部分。
修改頁面快照尺寸
修改成你定義的原型分辨率，我這邊都是375×647。詳見文章《為什么375×667是移動端原型的最佳分辨率》，至于如何設(shè)置原型分辨率詳見《如何在Axure中正確設(shè)置APP原型的尺寸》。
以上就是添加線框圖到“輸出視覺稿”的方法?？雌饋砗軓?fù)雜，但是如果你的原型設(shè)計是規(guī)范的，或者看過我的浪子PRD所有教程，以上幾步真的很快，10秒足矣。
如果需要輸出部分視覺控件
有時候，我們需要在已有頁面中新增幾個控件，那么此時是不需要傳達整個頁面的需求，只需要畫相應(yīng)的控件。最好視覺設(shè)計師也可以進入到原始頁面查看相關(guān)信息。
點擊動作，設(shè)置只顯示哪些控件即可。
假設(shè)，我們只需修改該頁面中的上導(dǎo)航的tab按鈕，那我們隱藏掉其他控件即可。
四、總結(jié)
這種呈現(xiàn)視覺需求，是有不少優(yōu)勢的。點擊演示網(wǎng)址進行查看，點擊線框圖可跳轉(zhuǎn)到相應(yīng)頁面查看詳細信息。
完美的將視覺需求和原型本身關(guān)聯(lián)起來，極大的降低了視覺設(shè)計師和前端工程師的理解門檻，以及高效率的實現(xiàn)需求。
另外其實PM產(chǎn)出的視覺需求，和視覺設(shè)計師最終輸出的視覺稿平鋪圖，其實是一脈相承的。
相關(guān)閱讀
#專欄作家#
浪子，業(yè)務(wù)型PM，浪子PRD系列51prd.com，公眾號：langzisay。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
好專業(yè)啊，膜拜啊膜拜，這兩天一直在學(xué)你的文章，感覺可以當(dāng)我的教程了
謝謝夸獎?？梢远嗫纯磆ttp://51prd.com/上面的內(nèi)容。
我們公司的做法是直接在給UI同學(xué)的任務(wù)里寫下要做的頁面的名字。然后UI同學(xué)拿著這個名字到原型圖堆里去把要找出來。
相比樓主的辦法壞處是樓主的辦法更節(jié)約UI找原型圖和理解頁面交互的時間，好處是PM節(jié)約了做輸出視覺稿的時間。
樓主的辦法更贊，總的來說更節(jié)約團隊的時間。:)
嗯嗯，能理解這篇文章如何運用到pm實際工作中。
那我就欣慰了，好多讀者根本不理解為什么。
哈哈。站在團隊角度為整個團隊考慮工作效率的同學(xué)才會明白樓主的苦心。
值得學(xué)習(xí) ??
作者的LOWFI質(zhì)量只能給5分（滿分10），產(chǎn)品經(jīng)理雖然側(cè)重于產(chǎn)品邏輯與商業(yè)模式，但是這么一副小學(xué)生版的lowfi真的慘不忍睹，所以建議那些初級產(chǎn)品經(jīng)理在考慮邏輯的情況下，再適當(dāng)增加一點美感，至少讓視覺看著不難受。
產(chǎn)品經(jīng)理也是需要審美的~~
邏輯清晰，內(nèi)容整潔就夠了。至于“美感”，PM要會審美但并不一定要會“創(chuàng)作”美，不然還要設(shè)計師這個崗位干啥？合并算了。
連PM和UI的職責(zé)和重心，都沒區(qū)分清楚。
PM去做UI的事情，只能說不合格。
作為設(shè)計師I，看到這種線框圖已經(jīng)很滿足了…
hi，挺想知道你如何評價通過上文的線框圖、以及線框圖平鋪來表示需要ui輸出哪些視覺稿的工作方法？
@ivan
我現(xiàn)在的環(huán)境全部都是在SK上完成的。我們的文檔版本管理是通過文件名細分每一個模塊，比如33A10，就是3.3版本A模塊10頁面。比起axure，顯得邏輯上差很多。其實個人不是很喜歡Sketch做原型?？戳四氵@種方法做移動端，覺得挺好（web界面太大，平鋪查看不方便），用快照來做產(chǎn)品的工作量并沒有增加多少，挺適合產(chǎn)品迭代。
上面線框圖的呈現(xiàn)，布局合理，控件我能識別出，算是滿足我需求的線框圖了。當(dāng)然有些外包公司給客戶交流，用這樣的確實不是很有格調(diào)。如果能不影響效率情況下更好看當(dāng)然好。 對于控件復(fù)用高的產(chǎn)品，比如后臺，我上家公司axure文檔使用的所有組件是我單獨設(shè)計的，產(chǎn)品調(diào)用就可以了，如果產(chǎn)品有比較好的視覺能力，甚至直接可以給研發(fā)。案例可以參考sap的axure規(guī)范文檔。
@ivan，感謝評價。
貌似搜不到sap的axure規(guī)范文檔，求你的微信。
或者加我的nuanai88。
我很想問，Axure 的規(guī)范文檔是不是在Axure 里點擊生成Word Specification 文檔后生成的那個Word Specification 文檔呀?
算吧，這個功能很少有人去用的。
如果要用，請規(guī)范的設(shè)計線框圖和交互，詳見http://51prd.com/demo.html中的原型寫法。
??
贊一個！
好文，值得學(xué)習(xí)