2013 年的 10 個線框圖和介面原型工具

發表於2013-04-03

英文原文:10 Wireframing and Prototyping Tools for 2013,編譯:oschina

建立一個網站或者應用不僅限於決定放什麼在主頁上或者用什麼圖片匹配網站的主題。為了吸引使用者並且和擁有使用者友好的介面,視覺設計是必不可少的。因此,專案開發者必須要先把設計視覺化,看看它是如何和使用者互動的。那麼,這需要很強的創造力,專案經理,web設計師和開發者就需要線框和原型工具來構建他們構想的網站地圖(sitemap)和應用流程圖。

考慮到現在已經是2013年了,有哪些最新的 原型和線框 工具可以幫助設計師和開發者使他們的工作流和設計更上一層樓呢?當然,技術是日新月異,所以確實有很多新工具出現-這裡就是其中一些佼佼者:

Solidify

2013 年的 10 個線框圖和介面原型工具

ZURB公司的另一個產品, Solidify 允許使用者從模型,線框或者草圖建立可以點選的原型。通過它,可以對介面互動可以快速產生原型。而且,這些原型可以很容易的測試是否可以適用於平板,個人電腦或者手機。再稍微花點時間去完善它們,這些原型就可以讓測試人員早日參與其中,測試操作流程是否足夠簡單易懂,而且這種反饋不斷迭代,隨時進行。

PowerMockup

2013 年的 10 個線框圖和介面原型工具

設計師期待的另一個工具是PowerMockup,它可以在PowerPoint裡用提供模板來建立線框圖。它提供一個模板(Stencil)庫,包含了任何應用和網站都會使用的各種各種的樣板(templates),例如選單,表單,文字框,按鈕和tab頁。這些樣板很容易使用,你只需要把他們拖拽到Powerpoint頁面就可以了。而且,使用者還可以在庫裡新增自己的模板。只需要在Powerpoint頁面選擇一個形狀,然後點選“新增到模板(Add Stencil)”tab頁,一個定製的模板就建立了。這些模板也可以共享給別人使用。

Antetype

2013 年的 10 個線框圖和介面原型工具

Antetype 更適合那些有大持續性專案的開發者,因為它允許開發者構建自己的一些小工具。它的小工具庫擁有廣泛的小工具能夠容易地用在原型裡。而且,每個小工具都有一些自定義的和預設的狀態能夠單獨或者同時編輯。因此,使用者在編輯狀態的時候就不需要使用不同的副本了。Antetype無疑是有優勢的,因為它的小工具能夠適配到每個需要的專案中。

UXPin

2013 年的 10 個線框圖和介面原型工具

UxPin 簡直就是專門為不擅長UX設計的人而編寫的。UXPin 公司裡面經驗豐富的UX設計人員提供了一系列完整實用的設計元素和模式,對新手有極大幫助。使用者設計優秀作品所需要的各種元素都包含在 UXPin 裡面了。他們擁有上傳UX和專案檔案的各種模板,例如 Project Canvas, Project Kick Off, Business Model Canvas, Personas 等等。同樣,使用者不需要頻繁地將他們的檔案來回地郵寄,因為全部東西都可以放在一起工作。UXPin 的目標是幫助專案經理為各種方案和裝置開發響應式的線框圖和UI原型。

QuirkTools

2013 年的 10 個線框圖和介面原型工具

QuirkTools 使得製作網站更方便簡單。他們製作了可以讓使用者用來製作網站的WEB應用。他們有一個例子叫 Wires,可以用來建立適用於平板,智慧手機和桌面環境的框架圖。QuirkTools 的應用也允許開發者和同事或者客戶一同協作開發。他們的應用是優美的,可以高效地建立優秀的應用和網站的原型設計。

Wireframe.cc

2013 年的 10 個線框圖和介面原型工具

Wireframe.cc 是一個非常輕巧的工具用來繪製線框圖。Wireframe.cc 不像其他工具一樣堆滿了各種圖示和按鈕,這讓使用者可以靜下心來將思路草圖繪製出來。此外,該工具提供了兩個模板供選擇,一個是瀏覽器視窗,另外一個是移動應用模板。移動應用版本提供水平和垂直的方向選擇。

Easel

2013 年的 10 個線框圖和介面原型工具

Easel 是一個基於瀏覽器的設計工具,使用者可以非常容易的將他們的想法通過簡單的手法模擬和記錄下來。提供多種元件供使用,如按鈕、表格、文字框等等。也可以與 Twtter Bootstrap 庫結合並使用其中的圖示和元素。此外 Easel 讓使用者直接在瀏覽器上進行設計以確保跟最終結果保持一致。同時還提供了一些高階工具如 CSS3 和 Web 字型,無需來回切換瀏覽器和文字編輯器。

InVision

2013 年的 10 個線框圖和介面原型工具

InVision 可以快速製作令人印象深刻的高階原型設計。使用該工具,使用者可連結他們的 UX 草圖、設計和框圖,並與團隊其他人員分享。設計者可在一個實際的演示中呈現他們的設計,可在瀏覽器中載入或者直接給移動裝置傳送簡訊。該工具同時可跟蹤團隊其他成員的進度。

Proto.io

2013 年的 10 個線框圖和介面原型工具

Proto.io 為設計師準備的一個非常棒的觸控式螢幕部件設計工具。支援主流的移動觸控風格和手勢,例如滑動、輕觸、縮放、長按等等。此外 Proto.io 可整合動畫介面切換效果,諸如:褪色、移動、縮放、翻轉等。該工具很有趣,只需要數分鐘便可熟悉。

POP

2013 年的 10 個線框圖和介面原型工具

Prototyping on Paper (POP) 可以輕鬆的製作 iPhone 應用介面原型。它提供了一個傳統制造高科技技術線框圖。在專門的軟體支援下,所有使用者必須自行在紙張和筆記本上繪製各種線框。然後通過攝像頭拍攝並匯入進來,POP 可自動捕獲使用者繪製的框圖並進行對比度和亮度的調整。接著使用者已經可以通過使用“連結點”連線示意圖來設計他們的故事板。以確保一切都是完美的,他們只需要點選“播放”對介面進行模擬即可。

使用這些工具可以讓原型圖和線框圖的繪製變得簡單。初學者也可以使用這些工具來設計自己的網站或應用程式。預計在2014 年會有更先進、更快、體積更小的工具。

相關文章