產(chǎn)品經(jīng)理離不開(kāi)線框圖，就像程序員離不開(kāi)代碼。

線框圖就像是某個(gè)建筑的圖紙，不但包含了產(chǎn)品的主要功能，還同時(shí)包含了頁(yè)面邏輯，頁(yè)面布局，同時(shí)更反映出一個(gè)產(chǎn)品經(jīng)理的思維邏輯。

所以對(duì)于一個(gè)產(chǎn)品經(jīng)理來(lái)說(shuō)能否畫(huà)好線框圖是評(píng)判一個(gè)產(chǎn)品經(jīng)理硬性的指標(biāo)之一。

下面介紹一下我畫(huà)線框圖的習(xí)慣，當(dāng)然這個(gè)也因人而異啦：

關(guān)于線框圖，你該注意的幾點(diǎn)

1.確定邏輯! 確定邏輯! 確定邏輯!

重要的事情說(shuō)三遍，因?yàn)樵谖铱磥?lái)一切繪畫(huà)的基礎(chǔ)都是在邏輯確認(rèn)的前提下。我特別佩服那些可以邊畫(huà)圖邊構(gòu)建邏輯的人，當(dāng)然如果你沒(méi)有那個(gè)超能力，或者像我一樣笨的話。我建議你一定要寫(xiě)流程圖。

可以是手畫(huà)也可以在電腦上畫(huà)，我個(gè)人比較喜歡徒手畫(huà)，這樣的好處就是方便修改，劣勢(shì)則是不方便在團(tuán)隊(duì)中交流。

(手繪流程圖)

對(duì)于交流性沒(méi)那么強(qiáng)的項(xiàng)目，我一般自己在A4紙上用手畫(huà)，而那些涉及到teamwork到工作，可以用Xmind 或者M(jìn)indmanager這樣更方便線上交流共享。(也有朋友推薦直接用Axure畫(huà))

(某線上水果商場(chǎng)流程圖設(shè)計(jì))

2.利用“三不原則”，畫(huà)出漂亮的線框圖

那么產(chǎn)品經(jīng)理究竟該用什么工具來(lái)畫(huà)線框圖是最高效的。

我可以負(fù)責(zé)任地告訴你很多偉大的產(chǎn)品在初期都是通過(guò)簡(jiǎn)單的手繪構(gòu)造的，而且手繪是構(gòu)建原型最快最高效的方法。因?yàn)楹芏鄷r(shí)候，你的想法一閃而逝，或者某一個(gè)瞬間你的突然有了更好想法，手繪是快速抓住你一閃而過(guò)的靈感的最好辦法。

關(guān)于手繪的技巧，我提倡三“不”原則：

• 不要苛求精確的尺寸，展現(xiàn)出你的想法即可
• 不要只是簡(jiǎn)單的拼湊，一定要加上必要的注釋和標(biāo)注
• 不要為了畫(huà)圖而畫(huà)圖，一定要把每個(gè)頁(yè)面對(duì)應(yīng)的邏輯理清楚

有了這三點(diǎn)的手繪圖，經(jīng)過(guò)簡(jiǎn)單的處理就可以放到PC進(jìn)行后續(xù)的共享和討論。

預(yù)先善其事必先利其器，線框圖工具推薦

當(dāng)然手繪只是最最開(kāi)始的部分，完成了簡(jiǎn)單的手繪，我們第二部要做的就是把它數(shù)字化，讓他在團(tuán)隊(duì)之間可以交流共享。

談到在電腦上畫(huà)線框圖，自然離不開(kāi)Axure，無(wú)論是在PC平臺(tái)還是Mac平臺(tái)，Axure 憑借其強(qiáng)大的功能和簡(jiǎn)單的上手操作，都有著不俗的表現(xiàn)。關(guān)于Axure，網(wǎng)上的文章也非常多，我就不再贅述。

這里介紹大家一種個(gè)人認(rèn)為還比較高效的工具。

Sketch＋Principle的組合

先放幾張我用sketch配合principle做的交互圖

(sketch線框圖設(shè)計(jì))

(principle加動(dòng)效設(shè)計(jì))

關(guān)于sketch

sketch是簡(jiǎn)單的矢量畫(huà)圖工具，配合Artboard這個(gè)神器線框圖自然不在話下。對(duì)于Sketch，即使是零PS基礎(chǔ)的朋友也很好上手，對(duì)于那些有PS經(jīng)驗(yàn)的同學(xué)，學(xué)習(xí)Sketch更是不費(fèi)吹灰之力的在數(shù)個(gè)小時(shí)內(nèi)完全掌握。

推薦這篇sketch新手啟蒙

關(guān)于Principle

而Principle，無(wú)疑是交互設(shè)計(jì)師和產(chǎn)品經(jīng)理的新寵，簡(jiǎn)單的交互操作，完美的匹配Sketch文件，配合Artboard的設(shè)計(jì)，簡(jiǎn)直就是產(chǎn)品設(shè)計(jì)界的神器!!

關(guān)于Principle，推薦樂(lè)視UED的這篇【分分鐘制作Demo】Principle使用教程

寫(xiě)在最后：

我不是一個(gè)工具控，但是我堅(jiān)信配合工具的使用，能讓你的效率提升。關(guān)于做圖有人習(xí)慣用 Axure有人習(xí)慣用PS，關(guān)于動(dòng)效：有人覺(jué)得origami蠻不錯(cuò)的，有點(diǎn)代碼基礎(chǔ)的還會(huì)去嘗試Framer。

世上工具千千萬(wàn)，他們幾乎都能實(shí)現(xiàn)相同的效果，何必有好壞高低之分呢，只要自己用的順手，不比什么都強(qiáng)嘛~

最后earon祝各位都能在工作中找到一套自己用著最舒服的工具。

#專(zhuān)欄作家#

Earon，微信公眾號(hào)：earonpm，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。愛(ài)碼字、喜歡嘗試新事物、產(chǎn)品路上剛起步的新人，關(guān)注移動(dòng)產(chǎn)品。懷謙卑之心，渴望交流之中共同成長(zhǎng)。

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