用 iPad 畫 Wireframe

用 iPad 畫 Wireframe最大好處是修改快速、製圖方便。紙本操作無法簡單實現「複製」、「復原」這兩個很常用的功能。若是想在 Wireframe 上加些色彩讓畫面分出區塊更易閱讀,紙本操作和使用 iPad 繪製的時間成本完全不是同個等級。畫 Wireframe 肯定會面臨多次修改的問題,使用紙本光是擦鉛筆線都累了,自從買了 iPad 後我就把創意發想階段轉移到 iPad 上執行。

目前 App Store 上有非常多可做繪圖筆記的應用程式,較具知名度的如 Paper、Adobe Ideas、Upad、Penultimate…等等。不過我測過最順手也最愛用的還是 Wacom 公司出的 Bamboo Paper - Notebook。以下講講為什麼吧。

Upad


雖然下筆反應靈敏,卻總有種「感覺怪怪的」體驗。加上它的線條筆劃和介面操作方式我不喜歡,線條一致的筆劃太死板、有粗細變化的又落差太大,寫字畫圖就是有種不對盤的感覺。這 App 自從付費買了之後我裝了刪、刪了又裝,然後就晾在那邊了。
App Store : Upad

Penultimate


筆畫線條感覺還 ok ,但沒有類似螢光筆之類的功能可以上底色。放大縮小時反應很頓常當機,擬真筆記本和工具列範圍太大、可操作區域相對縮小。筆記本目錄頁明明只需要 1 顆icon,卻占去一長直條的位置,點擊後的滑動又和現實生活不符。這 App 給我很多奇怪的操作體驗…
App Store : Penultimate

Adobe Ideas – Vector drawing and illustration


它是繪畫App,不是筆記App,取向不太一樣。我非常討厭螢光筆壓在鉛筆線上,很醜。雖然可以利用圖層解決這個問題,當目標是「快速記錄靈感」的時候顯得多此一舉。加上紙沒有筆記本橫條、操作有點複雜等等,並不推薦用它來畫 Wireframe,它的長處在向量製圖和對 ai、ps 的支援度。
App Store : Adobe Ideas – Vector drawing and illustration

Paper


繪畫 App +1,個人非常不推薦使用這套畫 Wireframe。在免費的情況下僅沾水筆尖可使用,同一筆畫有粗有細,會讓 Wireframe 份量感變沉重,有粗細變化的線條太過搶眼。這適合用於情感的傳達,不適合用在版面配置上。即使付費購買其它筆尖,Paper 任何筆尖都只有一個尺寸,Bamboo Paper 任何筆尖都有 3 種不同粗細,最粗的筆畫邊框、中等筆尖寫標題、最細的筆寫內文正好,沒有得選的時候就覺得好像少了些什麼。同時 Paper 的放大功能無法讓人畫出長條直線,也無法自行控制放大倍率,這在繪製 Wireframe 上造成很大的困擾。
App Store : Paper

Bamboo Paper - Notebook


只是畫 Wireframe ,太複雜的功能反而會使介面凌亂、占版面不利操作,我不需要也用不到。看重的部份在於筆觸滑順與下筆靈敏度。Bamboo Paper - Notebook 是我這 2 年來用過筆劃延遲時間最短、最貼近真實使用情境的 App。寫字的筆畫也是我覺得最漂亮利落的。這個 App 剛出我就裝了,一路用到現在。途中試著換工具想找看看有沒有更順手的,轉了一圈又回到它的懷抱。
App Store : Bamboo Paper - Notebook

個人使用習慣

我的 Wireframe 修改量非常大,為了確定各個元素都有被考量到、盡可能解決所有問題,隨便一個頁面起碼也會被我重畫個 3 到 5 次。在還沒買 iPad 之前,紙本常常被我擦到起毛,為了一個小元件的修改卻得重畫整個畫面浪費時間。買了 iPad 又裝了 Bamboo Paper - Notebook 後工作效率好很多,花在擦鉛筆線和整張重畫上的時間變少了。


出現靈感的時候分秒必爭啊!線條直不直根本不重要,能不能快速把想法記錄下來才是重點。畫一張這種 Wireframe 用不到 3 分鐘。


畫面其實都用同個顏色比較正式,不過這本來就是只給自己看的 Wireframe,我會用不同顏色標出區塊和圖片。這樣子塗鴉上色也不用 3 分鐘…


加上文字說明…在捷運上用 Bamboo Paper 亂撇很好用,iPad 很硬不會像紙本一樣軟軟的,就算因為晃動撇歪了還有復原可用。(這是記錄靈感用的,不是正式要交出去的 Wireframe。)

延伸閱讀:為什麼要畫3次 Wireframe?什麼是 Wireframe ?

其它


我用 Paper 和 Bamboo Paper - Notebook 分別畫了類似的版型。(沒付費買 Paper 的筆尖就只有沾水筆。)視覺都被很粗的線條搶去、注意力無法集中在版面配置上。慢慢畫線條粗細會比較接近,文思泉湧的時候要我慢慢畫好痛苦啊。(在繪畫上細線會被用在亮處、粗線會是陰影處,我不希望 Wireframe 給人有光影變畫的感覺,做設計又不是在畫素描。)


以前還會自己弄張 iPad 或 iPhone 的空白圖匯進 App 裡規劃,後來發現這太慢了速度不夠快,又增加誤觸的機會,就放棄不用。


最後,這是我愛用的觸控筆 wacom bamboo stylus ,前端橡皮頭已經畫破 3 顆了。台灣要買這玩意挺貴又麻煩,一怒之下在淘寶訂了 7 顆,含運 NT$278元,台灣的半價。淘寶筆尖的橡皮料比原廠硬一點,不過我習慣用硬一點的筆寫字畫圖,還塞了衛生紙進去讓筆尖更硬些,寫起來觸感很好。(和同學借用過 Adonit Jot 的觸控筆試寫,在我的 iPad 上製造幾條刮傷後立刻打入拒絕往來戶。)

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close