產品經理你的線框圖還可以這樣畫
2021-02-23 91產品導讀：產品經理離不開線框圖，就像程式設計師離不開代碼。
線框圖就像是某個建築的圖紙，不但包含了產品的主要功能，還同時包含了頁面邏輯，頁面布局，同時更反映出一個產品經理的思維邏輯。
所以對於一個產品經理來說能否畫好線框圖是評判一個產品經理硬性的指標之一。
PS:做個廣告，91運營用戶交流群持續招募中，有興趣的拉到底部加小編聯繫方式，至於加群有什麼好處呢？
每周九一風暴，實際案例實際分析
行業專場風暴，網際網路金融，電商，新媒體運營等專場
線下聚會交流
大咖分享交流
資源及人脈共享
其他的。。。。
91運營社群是基於網際網路運營的學習型組織，歡迎各行業網際網路運營達人加入我們大家庭，這裡小夥伴都很nice，勤奮好學，每天風暴不斷，未來我們將會有更多行業專場，如產品經理專場，網際網路金融專場，電商專場，新媒體運營專場等。
正文
產品經理離不開線框圖，就像程式設計師離不開代碼。
線框圖就像是某個建築的圖紙，不但包含了產品的主要功能，還同時包含了頁面邏輯，頁面布局，同時更反映出一個產品經理的思維邏輯。
所以對於一個產品經理來說能否畫好線框圖是評判一個產品經理硬性的指標之一。
下面介紹一下我畫線框圖的習慣，當然這個也因人而異啦：
關於線框圖，你該注意的幾點
1.確定邏輯! 確定邏輯! 確定邏輯!
重要的事情說三遍，因為在我看來一切繪畫的基礎都是在邏輯確認的前提下。我特別佩服那些可以邊畫圖邊構建邏輯的人，當然如果你沒有那個超能力，或者像我一樣笨的話。我建議你一定要寫流程圖。
可以是手畫也可以在電腦上畫，我個人比較喜歡徒手畫，這樣的好處就是方便修改，劣勢則是不方便在團隊中交流。
(手繪流程圖)
對於交流性沒那麼強的項目，我一般自己在A4紙上用手畫，而那些涉及到teamwork到工作，可以用Xmind 或者Mindmanager這樣更方便線上交流共享。(也有朋友推薦直接用Axure畫)
(某線上水果商場流程圖設計)
2.利用「三不原則」，畫出漂亮的線框圖
那麼產品經理究竟該用什麼工具來畫線框圖是最高效的。
我可以負責任地告訴你很多偉大的產品在初期都是通過簡單的手繪構造的，而且手繪是構建原型最快最高效的方法。因為很多時候，你的想法一閃而逝，或者某一個瞬間你的突然有了更好想法，手繪是快速抓住你一閃而過的靈感的最好辦法。
關於手繪的技巧，我提倡三「不」原則：
有了這三點的手繪圖，經過簡單的處理就可以放到PC進行後續的共享和討論。
預先善其事必先利其器，線框圖工具推薦
當然手繪只是最最開始的部分，完成了簡單的手繪，我們第二部要做的就是把它數位化，讓他在團隊之間可以交流共享。
談到在電腦上畫線框圖，自然離不開Axure，無論是在PC平臺還是Mac平臺，Axure 憑藉其強大的功能和簡單的上手操作，都有著不俗的表現。關於Axure，網上的文章也非常多，我就不再贅述。
這裡介紹大家一種個人認為還比較高效的工具。
Sketch＋Principle的組合
先放幾張我用sketch配合principle做的交互圖
(sketch線框圖設計)
(principle加動效設計)
關於sketch
sketch是簡單的矢量畫圖工具，配合Artboard這個神器線框圖自然不在話下。對於Sketch，即使是零PS基礎的朋友也很好上手，對於那些有PS經驗的同學，學習Sketch更是不費吹灰之力的在數個小時內完全掌握。
推薦這篇sketch新手啟蒙
關於Principle
而Principle，無疑是互動設計師和產品經理的新寵，簡單的交互操作，完美的匹配Sketch文件，配合Artboard的設計，簡直就是產品設計界的神器!!
關於Principle，推薦樂視UED的這篇【分分鐘製作Demo】Principle使用教程
寫在最後：
我不是一個工具控，但是我堅信配合工具的使用，能讓你的效率提升。關於做圖有人習慣用 Axure有人習慣用PS，關於動效：有人覺得origami蠻不錯的，有點代碼基礎的還會去嘗試Framer。
世上工具千千萬，他們幾乎都能實現相同的效果，何必有好壞高低之分呢，只要自己用的順手，不比什麼都強嘛~
最後earon祝各位都能在工作中找到一套自己用著最舒服的工具。
作者:Earon，微信公眾號：earonpm
據說，只有打賞的才是真粉絲哦，請小編喝杯咖啡吧，長按圖片，在彈出的對話界面選擇「識別圖中二維碼」。打賞完加小編微信（yunyingba)入91運營官方群，名額有限噢！
版權聲明：本文來源於網際網路，僅作分享學習之用，91運營負責整理推薦。文章僅代表原作者獨立觀點，不代表本微信公眾平臺運營者觀點與立場。如有版權問題，請聯繫91運營小編（微信號：yunyingba）協商解決，謝謝！
-
91運營網旗下垂直帳號，每日一乾貨，有深度，有幹度，有溫度。歡迎關注：
91產品：（微信號：chanpin91）
致力於為產品新人、產品經理等廣大產品愛好者打造一個全方位的學習交流平臺，分享產品設計、互動設計、產品運營幹貨。
91運營網：（微信號：yunying-91）
專注於網際網路產品運營幹貨，聚焦網際網路產品策劃，電子商務，網絡營銷，移動網際網路，融資創業等領域經驗分享。
相關焦點
-
怎樣畫線框圖才有意義
因此我們才需要更深入探討使用線框圖的原因及其價值所在。在現實中，一些缺少產品設計知識的公司可能會直接跳過線框圖階段，雖然這可以削減成本，但也會產生風險。遇到這種情況，設計師可以嘗試主動解釋為什麼要畫線框圖，它對我們的產品有什麼好處、怎樣節省開發成本…為什麼要畫線框圖？1. -
產品經理常用工具介紹
XMindXMind是一款商業思維導圖軟體，產品經理不僅可以用它繪製思維導圖，還可以繪製魚骨圖、二維圖、樹形圖、邏輯圖和組織結構圖，還可以很方便地在這些展示形式之間進行轉換。優點蠻多：支持隨處拖拽，雲儲存，不佔用硬碟空間，一鍵分享給你們的小夥伴，你甚至還可以導入百度的Doc文件.而其中最贊的功能莫過於百度腦圖支持多格式保存文件，你既可以到出成「.xmind」格式，也可以導出成「.mm」格式，也可以導出成「.km」格式.等，這樣導出的思路腦圖就可以在你的電腦客戶端完美進行在編輯了，如果你需要的話。 -
設計師基礎知識:你知道線框圖和原型有啥區別嗎
創建這種更加複雜的線框圖你就需要用UXPin了，它是專門用來製作線框圖和原型設計的工具了。互動式線框圖可能是用來向開發團隊和客戶最合適的演示工具了。當你碰上客戶的經典問題」如果我點擊這個按鈕會發什麼什麼」的時候，你所需要做的就是在互動式線框圖中按下那個按鈕。」就是這樣」，你只需要這樣回答。的確，這種方式令人印象深刻，引人入勝。 -
產品經理:流程圖你都會畫嗎?
流程圖是產品經理必不可少的技能之一，但流程圖你僅限於只會畫基本框圖和跨職能流程圖嗎？本文就來介紹下與產品經理相關的各種各樣的流程圖表現形式吧！一、流程圖分類UML有很多種，大體可以分類兩類：行為型的圖和結構型的圖。平時工作中的流程圖，只要能把事情清晰的表明，用何種流程圖表現形式，其實都無所謂。但是，作為一名產品經理，共有哪些種類的流程圖在工作中有可能會遇到或者用到，你是不是應該要了解一二呢？說不定哪天你就需要用到其中一種。二、行為型的圖說明：作為產品崗，行為型的圖我們要著重了解，甚至是活學活用。 -
互動設計中的線框圖Wireframe 你真的會做嗎?我們和你聊聊製作線框圖的常見誤區有哪些?
像前面舉例的那位同學，他在還沒有想好自己整個產品的架構的時候就急於去做比較抓人眼球的界面了，他對自己產品內部邏輯的把握就是非常不清晰的。有的同學可能會覺得，自己做項目主要的作用就是用來申請學校，或者僅僅是作為作品集裡的一個項目，只需要足夠抓人眼球，界面足夠豐富就好。這種想法UXD可以理解，大家都想快速地得到面試官和教授的注意。 -
產品經理必備的 10 款工具
MindManager是一款思維導圖軟體，能夠幫助你將想法和靈感以清晰的思維導圖的形式記錄下來，對產品經理梳理產品規劃以及產品流程非常有幫助。產品經理不管是撰寫產品文檔，記錄靈感思路，還是與團隊成員在線協作辦公，都可以在石墨文檔裡高效地完成。產品經理可以直接在石墨文檔裡撰寫產品需求文檔，整理用戶的產品使用反饋，更新bug修復與新功能實現情況等。此外，產品經理還可以邀請團隊成員在同一個文檔裡共同撰寫團隊工作日報和周報，也可以直接在文檔裡分配工作任務並一鍵更新任務完成情況。 -
10款線框圖和原型圖設計軟體
不管你設計網站也好，設計應用界面也好，都需要有出眾的視覺設計，從而吸引用戶。但在視覺稿輸出之前，比如首先要進行線框圖設計和原型圖設計，來規劃站點地圖和應用流程我們來盤點一下最好用的十款線框圖和原型圖設計軟體，提高你的設計效率SolidifyZURB旗下的一款產品, Solidify 允許用戶將草圖、模板、線框圖轉化為可點擊的原型圖。而且，很容易測試，節省時間。 -
線框圖-Wireframe
-
推薦丨產品經理最常用的13款工具
XMind是一款商業思維導圖軟體，產品經理不僅可以用它繪製思維導圖，還可以繪製魚骨圖、二維圖、樹形圖、邏輯圖和組織結構圖，還可以很方便地在這些展示形式之間進行轉換。MindManager是一款思維導圖軟體，能夠幫助你將想法和靈感以清晰的思維導圖的形式記錄下來，對產品經理梳理產品規劃非常有幫助。 -
大廠產品經理的9大效率工具 | mac篇
主要推薦下Sketch，Sketch是一個輕量級的專業原型設計工具，可以快速、高效的創建應用軟體、Web網站的線框圖、流程圖、原型以及相應的說明文檔。Sketch的最大特點是全局面板，Toolbox強大豐富的插件，與ps、Flinto保持高，從設計圖導入到sketch，再導入到Flinto做交互東校，簡化了設計流程，極大提高產品的原型效率。 -
線框圖設計很簡單?這些要點必須知道!
線框圖，也稱為頁面示意圖或屏幕藍圖，是展示網站或產品框架的視覺指南：線框圖的主要目標是向團隊和利益相關者展示產品將包含的頁面和組件，以及這些元素之間的相互作用。線框圖允許設計師快速創建產品的視覺表現，方便後期修改；幫助設計師向團隊展示應用程式具有的頁面元素和控制項，以及所有元素如何進行交互。 -
【史上最全】產品經理常用工具清單—上
Axure RP 能讓產品經理快速創建應用軟體和基於Web的的線框圖、流程圖、原型頁面、交互頁面和規格說明文檔。Axure RP也是目前產品經理群體中用得最廣泛的一款原型設計工具。2.Mockups：如果產品經理的主要工作內容是製作產品概念圖，表達產品設計概念、理念和基本布局，這種情況下不妨選擇Balsamiq Mockups。用Mockups製作出來的作品都是手繪風格的，比較適合用來畫線框圖及原型，但不適合做帶有交互性質的原型設計。 -
做UI設計時,先了解用戶操作習慣還是先畫線框圖?
做UI設計時，先了解用戶操作習慣還是先畫線框圖？我的答案會是「1」，先確認用戶會怎麼使用產品功能，再來思考Wireframe 怎麼畫。如果你有了功能，就直接開畫 Wireframe ，再拿 Wireframe 來確認用戶怎麼操作功能，恭喜，你會陷入無限漏圖補畫面的囧境。用戶怎麼操作功能這件事和視覺沒有絕對的關係，操作功能和用戶的邏輯比較有關。 -
產品經理:你能不能用div給我畫條龍?
事情是這樣的，前天上午產品經理說想要做一個心願牆，問我能不能行。我心想，這太容易了，但為了多摸一天魚，我說還是有點挑戰的。結果下午，產品經理和設計師就給我發來了設計參考他們說，心願牆的設計大致是這樣的，每個用戶的心願都是一個氣泡，而客戶的品牌是」龍「，我們希望在前端頁面裡用氣泡呈現一個龍形的設計，每個氣泡都會浮動，滑鼠移上去變大，點擊後展示心願詳情。 -
線框圖大全!一組超實用的優質線框圖模板
編者按：今天的線框圖包括兩個部分，網頁端和移動端。元素特別齊全，格式也從AI、PSD到Sketch都有。不可多得的線框圖大全，來收。 -
10個快速構建Wireframe線框圖的免費實用工具
本篇文章中我們總結了10個可以免費使用的線框圖工具，每一個都有自己的優點和用例。根據你的喜好，例如你更傾向基於瀏覽器的應用程式還是離線桌面應用程式；你手頭的項目有多大；需要與多少人合作和分享你的工作等方面的不同，你都可以在這10個免費的線框圖工具中找到最適合你的那一個。 -
做一個APP,從頭到尾產品經理需要做什麼?
，很多人想要從事產品，或者老闆自己創業要親自承擔產品一職，但他們對產品這個崗位的認識卻不明晰，有的以為是純粹的畫原型，有的是以為做項目管理跟蹤項目進度，有的是做競品分析給老闆看。可能有的人會說，這個時候還沒有線框圖，怎麼解釋啊。這個並不矛盾，早起的需求文檔是用來給交互看的（再次強調，創業型公司的產品可能會兼著交互），互動設計師再根據你的功能結構和流程梳來設計線框圖和高保真的原型圖。數據埋點：把後期需要查看的數據列成清單，比如說這個按鈕的點擊率，這個頁面的打開率等等，這個時候需要和運營多交流，對需要做埋點的地方理清楚。 -
產品經理的工具箱
那個時代，軟體需求規格說明書都是用Word寫的，我記得我曾經從網下下載到一整套軟體工程的Word文檔模板，如獲至寶阿。06年自己創業做網站的時候，也開始用Word描述產品原型。Word如果用來做企業軟體的需求描述和原型工具還是很不錯的，帶有全套的繪圖工具，繪製簡略的線框圖非常簡單。但是做網際網路產品，顯得不太合適：繪圖工具過於簡單，難以表現網際網路應用需要的細緻的界面設計；不方便做原型演示。 -
猝死整理 產品經理最全辦公工具清單!
2.Axure RP：Axure RP 是一個專業的快速原型設計工具，產品經理能夠快速創建應用軟體或Web網站的線框圖、流程圖、原型和規格說明文檔。 並且作為專業的原型設計工具，Axure RP能快速、高效的創建原型，同時支持多人協作設計和版本控制管理。Axure RP也是目前產品經理群體中用得最廣泛的一款原型設計工具。 -
白板隨手一畫,嗖嗖變成代碼
……你一邊聽著同事們七嘴八舌的建議，一邊就把原型圖在白板上畫了出來：「我們按這個來討論一下吧，時間不等人，後面還要UI設計、前端開發……」「差不多長這樣是吧？」前端開發小丁打斷了你的發言。手繪框圖，同步自動生成小丁用的，就是下面視頻中的方法，攝像頭實時拍攝白板上的草稿，就可以自動生成設計、開發好了的網頁。視頻中，產品經理在白板上勾勒原型草圖。