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

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

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

Solidify

Solidify

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

  PowerMockup

PowerMockup

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

  Antetype

Antetype

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

  UXPin

UXPin

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

  QuirkTools

QuirkTools

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

  Wireframe.cc

Wireframe.cc

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

  Easel

Easel

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

  InVision

InVision

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

  Proto.io

Proto.io

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

  POP

Prototyping on Paper

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

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

  英文原文:10 Wireframing and Prototyping Tools for 2013


發佈了26 篇原創文章 · 獲贊 4 · 訪問量 6萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章