產品經理你的線框圖還可以這樣畫

17 評論 37774 瀏覽 878 收藏 7 分鐘

產品經理離不開線框圖,就像程序員離不開代碼。

線框圖就像是某個建筑的圖紙,不但包含了產品的主要功能,還同時包含了頁面邏輯,頁面布局,同時更反映出一個產品經理的思維邏輯。

所以對于一個產品經理來說能否畫好線框圖是評判一個產品經理硬性的指標之一。

下面介紹一下我畫線框圖的習慣,當然這個也因人而異啦:

關于線框圖,你該注意的幾點

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

重要的事情說三遍,因為在我看來一切繪畫的基礎都是在邏輯確認的前提下。我特別佩服那些可以邊畫圖邊構建邏輯的人,當然如果你沒有那個超能力,或者像我一樣笨的話。我建議你一定要寫流程圖。

可以是手畫也可以在電腦上畫,我個人比較喜歡徒手畫,這樣的好處就是方便修改,劣勢則是不方便在團隊中交流。

1.pic

(手繪流程圖)

對于交流性沒那么強的項目,我一般自己在A4紙上用手畫,而那些涉及到teamwork到工作,可以用Xmind 或者Mindmanager這樣更方便線上交流共享。(也有朋友推薦直接用Axure畫)

無標題

(某線上水果商場流程圖設計)

2.利用“三不原則”,畫出漂亮的線框圖

那么產品經理究竟該用什么工具來畫線框圖是最高效的。

我可以負責任地告訴你很多偉大的產品在初期都是通過簡單的手繪構造的,而且手繪是構建原型最快最高效的方法。因為很多時候,你的想法一閃而逝,或者某一個瞬間你的突然有了更好想法,手繪是快速抓住你一閃而過的靈感的最好辦法。

手繪線框圖1

關于手繪的技巧,我提倡三“不”原則:

  • 不要苛求精確的尺寸,展現出你的想法即可
  • 不要只是簡單的拼湊,一定要加上必要的注釋和標注
  • 不要為了畫圖而畫圖,一定要把每個頁面對應的邏輯理清楚

有了這三點的手繪圖,經過簡單的處理就可以放到PC進行后續的共享和討論。

預先善其事必先利其器,線框圖工具推薦

當然手繪只是最最開始的部分,完成了簡單的手繪,我們第二部要做的就是把它數字化,讓他在團隊之間可以交流共享。

談到在電腦上畫線框圖,自然離不開Axure,無論是在PC平臺還是Mac平臺,Axure 憑借其強大的功能和簡單的上手操作,都有著不俗的表現。關于Axure,網上的文章也非常多,我就不再贅述。

這里介紹大家一種個人認為還比較高效的工具。

Sketch+Principle的組合

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

北斗學車2.0線框圖設計

(sketch線框圖設計)

屏幕快照 2016-03-10 下午9.48.37

(principle加動效設計)

關于sketch

sketch是簡單的矢量畫圖工具,配合Artboard這個神器線框圖自然不在話下。對于Sketch,即使是零PS基礎的朋友也很好上手,對于那些有PS經驗的同學,學習Sketch更是不費吹灰之力的在數個小時內完全掌握。

201408200609585033

推薦這篇sketch新手啟蒙

關于Principle

而Principle,無疑是交互設計師和產品經理的新寵,簡單的交互操作,完美的匹配Sketch文件,配合Artboard的設計,簡直就是產品設計界的神器!!

principle

關于Principle,推薦樂視UED的這篇【分分鐘制作Demo】Principle使用教程

寫在最后:

我不是一個工具控,但是我堅信配合工具的使用,能讓你的效率提升。關于做圖有人習慣用 Axure有人習慣用PS,關于動效:有人覺得origami蠻不錯的,有點代碼基礎的還會去嘗試Framer。

世上工具千千萬,他們幾乎都能實現相同的效果,何必有好壞高低之分呢,只要自己用的順手,不比什么都強嘛~

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

#專欄作家#

Earon,微信公眾號:earonpm,人人都是產品經理專欄作家。愛碼字、喜歡嘗試新事物、產品路上剛起步的新人,關注移動產品。懷謙卑之心,渴望交流之中共同成長。

本文原創發布于人人都是產品經理,未經許可,不得轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 大神,請問一下mac用哪個軟件方便做交互展示呢,我有點ps基礎 ,原型圖就習慣用AI做,但是就缺一個按鈕跳轉和交互展示的軟件;-)

    來自廣東 回復
  2. 實用主義,樓豬寫的好! ??

    來自北京 回復
  3. 已讀,看了才發現我居然一直沒有畫線框圖,偶爾會把自己想到的用筆標記登記起來,但是從來沒想過需要這么制作線框圖的,學到了,以后會注意的。謝謝分享

    來自廣東 回復
  4. earon老師的文章,讓我受益良多

    來自江蘇 回復
  5. ?? ??

    來自廣西 回復
  6. 有windows的版本嗎?

    來自湖南 回復
  7. 沒有windowsd版本嗎?
    、

    來自廣東 回復
  8. ?? ??

    來自江蘇 回復
  9. ?? :mrgreen:

    來自北京 回復