想畫個wireframe線框圖線上工具也可以
今天在上使用者介面課程時，講師要我們產出一頁的首頁wireframe草圖作為網站設計的基礎
由於本人現職非網站企畫，沒有網站設計的需求，所以我的筆電裡沒有安裝Axure
加上畫在紙上不好present(我覺得畫草圖有紙筆是最好最快的工具XD)
在搜尋之後找到了這個簡單好用的線框圖線上工具Frame Box
功能簡介
Frame Box的介面滿簡單的，對於我這種初學者可以很快的上手
它只簡單的提供了幾個比較常用到的元素
包括區域方塊、文字、文字方塊、標題、連結、下拉式選單....
如下圖所示，基本上畫wireframe線框圖的基本元素應該都具備了
另外網站還滿貼心的提供兩種拉原件的模式
一種是Drag & Drop(拖拉)模式，把元件拉到旁邊的稿紙上就好了
另一種則是Enable & Click(點選)模式，就跟windows的操作方式一樣
點一下你需要什麼元件，在旁邊的稿紙點一下就會出現
如果你需要產生多個同樣元件，滑鼠一直點就可以出現，就不用還要圈選加ctrl+v XD
不過做元件的拖曳還是要切回拖拉模式XD
當然拖曳圈選、快速鍵複製元件這些功能也是能做到的!
當你選好一個元件點兩下就能開始編輯，不過你必須要登入才能有一些多的調整功能XD
但是文字方塊還是可以編輯文字就是了
而右邊的功能欄(如下圖)則可以讓你切換編輯與預覽模式、調整稿紙大小以及做一些基本資料的設定
當我們拉好了一個frame, 按下右邊功能欄的save frame就可以了
在這邊你也可以做一些基本的frame編輯，也可以建立專門的專案，不過沒辦法把既有的線框圖移到新建的專案裡就是了XD
功能簡單易用適合基礎用途使用者
這個工具的優勢是簡單、易用直覺，對於做簡單的wireframe是可以滿足需求的
不過要更多的需求(例如做動態的移動出現下拉式選單這種效果)可能就比較沒辦法了
另外要小心的是拖曳元件時如果把新的元件放到舊的元件上，但你又想拖曳舊元件時
你就必須要把新元件移開才能拖舊元件，這點可能是比較不友善一點ＸＤ
但對基本使用需求來說，還是個好用的工具!
張貼留言