2013年的10個線框圖和介面原型工具
建立一個網站或者應用不僅限於決定放什麼在主頁上或者用什麼圖片匹配網站的主題。為了吸引使用者並且和擁有使用者友好的介面,視覺設計是必不可少的。因此,專案開發者必須要先把設計視覺化,看看它是如何和使用者互動的。那麼,這需要很強的創造力,專案經理,web設計師和開發者就需要線框和原型工具來構建他們構想的網站地圖(sitemap)和應用流程圖。
考慮到現在已經是2013年了,有哪些最新的 原型和線框 工具可以幫助設計師和開發者使他們的工作流和設計更上一層樓呢?當然,技術是日新月異,所以確實有很多新工具出現-這裡就是其中一些佼佼者:
Solidify
ZURB公司的另一個產品, Solidify 允許使用者從模型,線框或者草圖建立可以點選的原型。通過它,可以對介面互動可以快速產生原型。而且,這些原型可以很容易的測試是否可以適用於平板,個人電腦或者手機。再稍微花點時間去完善它們,這些原型就可以讓測試人員早日參與其中,測試操作流程是否足夠簡單易懂,而且這種反饋不斷迭代,隨時進行。
PowerMockup
設計師期待的另一個工具是PowerMockup,它可以在PowerPoint裡用提供模板來建立線框圖。它提供一個模板(Stencil)庫,包含了任何應用和網站都會使用的各種各種的樣板(templates),例如選單,表單,文字框,按鈕和tab頁。這些樣板很容易使用,你只需要把他們拖拽到Powerpoint頁面就可以了。而且,使用者還可以在庫裡新增自己的模板。只需要在Powerpoint頁面選擇一個形狀,然後點選“新增到模板(Add Stencil)”tab頁,一個定製的模板就建立了。這些模板也可以共享給別人使用。
Antetype
Antetype 更適合那些有大持續性專案的開發者,因為它允許開發者構建自己的一些小工具。它的小工具庫擁有廣泛的小工具能夠容易地用在原型裡。而且,每個小工具都有一些自定義的和預設的狀態能夠單獨或者同時編輯。因此,使用者在編輯狀態的時候就不需要使用不同的副本了。Antetype無疑是有優勢的,因為它的小工具能夠適配到每個需要的專案中。
UXPin
UxPin 簡直就是專門為不擅長UX設計的人而編寫的。UXPin 公司裡面經驗豐富的UX設計人員提供了一系列完整實用的設計元素和模式,對新手有極大幫助。使用者設計優秀作品所需要的各種元素都包含在 UXPin 裡面了。他們擁有上傳UX和專案檔案的各種模板,例如 Project Canvas, Project Kick Off, Business Model Canvas, Personas 等等。同樣,使用者不需要頻繁地將他們的檔案來回地郵寄,因為全部東西都可以放在一起工作。UXPin 的目標是幫助專案經理為各種方案和裝置開發響應式的線框圖和UI原型。
QuirkTools
QuirkTools 使得製作網站更方便簡單。他們製作了可以讓使用者用來製作網站的WEB應用。他們有一個例子叫 Wires,可以用來建立適用於平板,智慧手機和桌面環境的框架圖。QuirkTools 的應用也允許開發者和同事或者客戶一同協作開發。他們的應用是優美的,可以高效地建立優秀的應用和網站的原型設計。
Wireframe.cc
Wireframe.cc 是一個非常輕巧的工具用來繪製線框圖。Wireframe.cc 不像其他工具一樣堆滿了各種圖示和按鈕,這讓使用者可以靜下心來將思路草圖繪製出來。此外,該工具提供了兩個模板供選擇,一個是瀏覽器視窗,另外一個是移動應用模板。移動應用版本提供水平和垂直的方向選擇。
Easel
Easel 是一個基於瀏覽器的設計工具,使用者可以非常容易的將他們的想法通過簡單的手法模擬和記錄下來。提供多種元件供使用,如按鈕、表格、文字框等等。也可以與 Twtter Bootstrap 庫結合並使用其中的圖示和元素。此外 Easel 讓使用者直接在瀏覽器上進行設計以確保跟最終結果保持一致。同時還提供了一些高階工具如 CSS3 和 Web 字型,無需來回切換瀏覽器和文字編輯器。
InVision
InVision 可以快速製作令人印象深刻的高階原型設計。使用該工具,使用者可連結他們的 UX 草圖、設計和框圖,並與團隊其他人員分享。設計者可在一個實際的演示中呈現他們的設計,可在瀏覽器中載入或者直接給移動裝置傳送簡訊。該工具同時可跟蹤團隊其他成員的進度。
Proto.io
Proto.io 為設計師準備的一個非常棒的觸控式螢幕部件設計工具。支援主流的移動觸控風格和手勢,例如滑動、輕觸、縮放、長按等等。此外 Proto.io 可整合動畫介面切換效果,諸如:褪色、移動、縮放、翻轉等。該工具很有趣,只需要數分鐘便可熟悉。
POP
Prototyping on Paper (POP) 可以輕鬆的製作 iPhone 應用介面原型。它提供了一個傳統制造高科技技術線框圖。在專門的軟體支援下,所有使用者必須自行在紙張和筆記本上繪製各種線框。然後通過攝像頭拍攝並匯入進來,POP 可自動捕獲使用者繪製的框圖並進行對比度和亮度的調整。接著使用者已經可以通過使用“連結點”連線示意圖來設計他們的故事板。以確保一切都是完美的,他們只需要點選“播放”對介面進行模擬即可。
使用這些工具可以讓原型圖和線框圖的繪製變得簡單。初學者也可以使用這些工具來設計自己的網站或應用程式。預計在2014 年會有更先進、更快、體積更小的工具。
相關文章
- 2013 年的 10 個線框圖和介面原型工具原型
- 原型設計——線框圖與原型的前世今生原型
- 20款優秀的移動產品原型和線框圖設計工具原型
- 11個完全免費的線框圖工具
- 給你靈感的23個優秀線框原型圖示例原型
- 為設計師準備的 10 個非常有用和高效的線框圖工具
- 10個用於設計網頁線框圖的優秀工具網頁
- 第五章 產品經理的線框圖和原型設計原型
- ? 圖解原型和原型鏈圖解原型
- 圖解原型和原型鏈圖解原型
- 24款線框圖相關工具及資源
- 常用的快速Web原型圖設計工具Web原型
- 3 個 Linux 上的 SSH 圖形介面工具Linux
- 2013年AMD處理器路線圖和環繞計算概念
- (Keras)基於深度學習SketchCode將線框原型圖轉換成HTML程式碼Keras深度學習原型HTML
- 2013移動開發工具盤點:最火原型設計工具移動開發原型
- 畫原型圖工具Axure RP 8 漢化版原型
- 設計師專屬:10款超實用且高效的線框設計工具
- 2024-05-10 js原型和原型鏈JS原型
- VNC連線圖形介面VNC
- 第 10 章 巨幕頁頭縮圖和警告框元件元件
- 原型和原型鏈的深入探索原型
- R語言中繪圖 設定圖例中隱藏圖例的框線R語言繪圖
- WireframeSketcher for Mac(獨立模型線框圖製作工具) v6.2.2註冊版Mac模型
- 原型和原型鏈原型
- 原型設計工具的分析原型
- ffmpeg 圖形化介面工具 traGtor
- 11 個用來建立圖形和圖表的 JavaScript 工具包JavaScript
- 如何理解JavaScript的原型和原型鏈?JavaScript原型
- 美圖秀秀美化圖片之【邊框】介面設計【重大更新】
- JS原型與原型鏈圖解JS原型圖解
- 兩個介面的連線
- 2013 年你應該關注的 10 個開源軟體
- Experience Design for mac(XD介面設計和原型互動工具)v57.1.12.2啟用版Mac原型
- 2013年社交網站圖譜–資訊圖網站
- 10個最佳的網站和App開發工具網站APP
- 10個優化程式碼的CSS和JavaScript工具優化CSSJavaScript
- JS原型和原型鏈JS原型