起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識PM如何快速完成并交付視覺需求？
不少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產出的視覺需求，和視覺設計師最終輸出的視覺稿平鋪圖，其實是一脈相承的。
相關閱讀
#專欄作家#
浪子，業務型PM，浪子PRD系列51prd.com，公眾號：langzisay。
本文原創發布于人人都是產品經理。未經許可，禁止轉載。
好專業啊，膜拜啊膜拜，這兩天一直在學你的文章，感覺可以當我的教程了
謝謝夸獎?？梢远嗫纯磆ttp://51prd.com/上面的內容。
我們公司的做法是直接在給UI同學的任務里寫下要做的頁面的名字。然后UI同學拿著這個名字到原型圖堆里去把要找出來。
相比樓主的辦法壞處是樓主的辦法更節約UI找原型圖和理解頁面交互的時間，好處是PM節約了做輸出視覺稿的時間。
樓主的辦法更贊，總的來說更節約團隊的時間。:)
嗯嗯，能理解這篇文章如何運用到pm實際工作中。
那我就欣慰了，好多讀者根本不理解為什么。
哈哈。站在團隊角度為整個團隊考慮工作效率的同學才會明白樓主的苦心。
值得學習 ??
作者的LOWFI質量只能給5分（滿分10），產品經理雖然側重于產品邏輯與商業模式，但是這么一副小學生版的lowfi真的慘不忍睹，所以建議那些初級產品經理在考慮邏輯的情況下，再適當增加一點美感，至少讓視覺看著不難受。
產品經理也是需要審美的~~
邏輯清晰，內容整潔就夠了。至于“美感”，PM要會審美但并不一定要會“創作”美，不然還要設計師這個崗位干啥？合并算了。
連PM和UI的職責和重心，都沒區分清楚。
PM去做UI的事情，只能說不合格。
作為設計師I，看到這種線框圖已經很滿足了…
hi，挺想知道你如何評價通過上文的線框圖、以及線框圖平鋪來表示需要ui輸出哪些視覺稿的工作方法？
@ivan
我現在的環境全部都是在SK上完成的。我們的文檔版本管理是通過文件名細分每一個模塊，比如33A10，就是3.3版本A模塊10頁面。比起axure，顯得邏輯上差很多。其實個人不是很喜歡Sketch做原型。看了你這種方法做移動端，覺得挺好（web界面太大，平鋪查看不方便），用快照來做產品的工作量并沒有增加多少，挺適合產品迭代。
上面線框圖的呈現，布局合理，控件我能識別出，算是滿足我需求的線框圖了。當然有些外包公司給客戶交流，用這樣的確實不是很有格調。如果能不影響效率情況下更好看當然好。 對于控件復用高的產品，比如后臺，我上家公司axure文檔使用的所有組件是我單獨設計的，產品調用就可以了，如果產品有比較好的視覺能力，甚至直接可以給研發。案例可以參考sap的axure規范文檔。
@ivan，感謝評價。
貌似搜不到sap的axure規范文檔，求你的微信。
或者加我的nuanai88。
我很想問，Axure 的規范文檔是不是在Axure 里點擊生成Word Specification 文檔后生成的那個Word Specification 文檔呀?
算吧，這個功能很少有人去用的。
如果要用，請規范的設計線框圖和交互，詳見http://51prd.com/demo.html中的原型寫法。
??
贊一個！
好文，值得學習