為快速設計絞盡腦汁?5款快速線框圖工具為你雪中送炭

来源:http://www.cnblogs.com/thomas2/archive/2017/08/24/7422240.html
-Advertisement-
Play Games

說起線框圖工具,你腦海中浮現的是什麼呢?老字型大小Axure RP?還是設計新寵Mockplus?如今,形形色色的線框圖工具可以說是唾手可得,當然,這是一件好事,但是另一方面呢,過多的選擇也的確容易造成設計師的選擇困難。尤其是現在的行業形勢,快速的產品迭代和開發節奏,越來越少的時間成本,快速設計的需求與... ...


說起線框圖工具,你腦海中浮現的是什麼呢?老字型大小Axure RP?還是設計新寵Mockplus?如今,形形色色的線框圖工具可以說是唾手可得,當然,這是一件好事,但是另一方面呢,過多的選擇也的確容易造成設計師的選擇困難。尤其是現在的行業形勢,快速的產品迭代和開發節奏,越來越少的時間成本,快速設計的需求與日俱增。一些過於精細的設計工具其實並不適應當今的設計趨勢。這裡,我精選出了5款專註於快速設計的線框圖工具,能幫助你實現真正意義上的快速設計。

1. Wireframe CC 

一款最輕量的框線圖工具,線框設計原來可以如此簡單!

 

平臺:Web-based

上手時間:低於10 mins

價格:基礎版-免費

           高級版-$99/月

保真度:低保真

 

Wireframe CC是一款線上線框圖繪製工具,它採用的是極簡風格,界面極其簡潔,甚至沒有典型繪圖應用程式的工具欄和圖標。你只需在畫布上移動滑鼠就可構建你想要的形狀。其最大的特點正是專註於最基本操作。目前支持網頁、手機橫屏和手機豎屏三種模式。

但Wireframe CC只適用於做最基礎的框線圖設計,無法進行任何的交互和動畫設計,功能比較有限。分享模式也是生成一個URL,比較單一。

Wireframe CC.png

 

2.  Mockplus

 一款讓你關註設計,而非工具本身的工具,致力於讓設計更快、更簡單!

平臺:Windows, Mac, Android, IOS

上手時間:5-10 mins

價格:普通-免費

           專業-118/年

保真度:中低保真

Mockplus致力於快速構建和迭代原型,為設計師提供簡潔高效的設計方式,能在最短時間里創造出最優的設計成果。看看它是如何實現快速設計的:

第一,Mockplus擁有200多個高度封裝的交互組件,3000個矢量圖標,以及大量可供直接使用的模板、例子項目以及模板頁面,並且支持在Sketch中直接導出MP文件,為快速設計提供了有效支持。

第二,Mockplus還是快速交互的不二選擇。只需使用封裝可見的交互組件,用滑鼠進行拖拽即可完成交互,不需要任何一行代碼或者參數的設置。Mockplus目前支持3種交互方式:頁面交互,組件交互和屬性交互。交互命令還可一鍵自動還原,貼切而周到。

第三,Mockplus擁有8種快速測試和演示方式,支持手機端、瀏覽器及桌面端的原型測試。線上預覽和離線演示都可輕鬆實現,不受終端和網路限制。

最後,Mockplus團隊推出了一系列別出心裁的設計,例如Microsoft Office風格的可視化格式刷,可快速進行批量複製,簡單直觀。最新的3.2版本增加了格子功能,可輕鬆複製頁面佈局,並且可自定義屬性,非常人性化。Mockplus還支持腦圖設計模式,能快速完成項目的所有頁面構架,然後一件轉化為原型項目。

 MOCKPLUSFFFF.jpg

3. Balsamiq Mockups

一款基於Flash的快速線框圖工具,線框設計不再一籌莫展。

平臺:Windows, Mac, Web-bas

上手時間:15-20 mins

價格:$89

保真度:低保真

Balsamiq Mockups是一款備受青睞的線框圖工具,是2008由一個軟體工程師開發的,能幫助設計師更快地進行線框圖設計。

首先,Balsamiq擁有可以直接進行拖拽使用的元素,包括一些按鈕和列表,值得一提的是,這些元素都是手繪風格。設計師還可在編輯器里提前準備好需要使用的小部件。

此外,Balsamiq官方網站還提供了很多模板,包括桌面App、移動端App以及網站模板等。可供點擊下載,使用起來快速便捷。

其次,Balsamiq獨一無二的手寫設計在如今的機械化設計中顯得十分別緻,能讓設計師體會一種在空白屏幕里進行手繪設計的獨特體驗。加上其種類繁多且風格獨特的UI庫,能為設計師提供最便捷的服務。

但Balsamiq並不是一款適合做超大型項目的工具,雖然它也可以用於做一些設計,但想要加入一些比較深入的動態效果就比較局限,當然,這和他們的設計初衷也不相一致,Balsamiq就是專註於簡潔粗略的線框圖設計而非原型。

 Balsamiq Mockups.png

4.Pencil Project

一款專註於製作圖表和GUI原型設計的線框圖工具。

平臺:Windows, Linux, Mac

上手時間:10-15 mins

價格:免費

保真度:低保真

Pencil Project可以說是一款明星工具,它曾在2008年獲得過Mozilla 的“Best New Add-On”獎項。Pencil Project是基於火狐瀏覽器上的圖形工具,但它也可以在Linux和Windows系統中作為一個獨立的運用程式。

Pencil Project支持草圖繪製,還可製作圖形化的原型繪製,甚至可以像Balsamiq Mockups具有手繪風格。支持連接器,可以用於在圖中將“形狀”鏈接在一起,甚至流程圖形狀的合集也可以用於繪圖。

此外,pencil Project還支持圖形元素的鏈接,可以將某元素鏈接到同一文檔的特定頁面,有助於設計師在創建運用程式或網站模型時定義UI流程。

但如果你不是火狐的用戶,Pencil Project對你的吸引力也許會大大減弱。如果你恰好是,那麼pencil Project非你莫屬。

Pencil Project.png

5. Fliud UI

一款專註於製作手機軟體模型的工具,值得嘗試。

平臺:Web-based

上手時間:20-25 mins

價格:個人- $8.25/月

           高級版- $19.08/月

           團隊版- $41.58/月

保真度:高保真

Fliud UI是一款基於網頁端的線框圖設計工具,與其他的大部分線框圖工具不同,Fliud UI支持添加手勢,並且具有動畫效果,可以製作高保真的線框圖。

Fliud UI有16個用於iOS,Android,Windows8的用戶界面庫,其中包含超過2000個可定製的小部件和圖標,可以直接從這些內置庫里拖拽元素創建頁面,簡潔高效。FluidUI還提供團隊的實時協作,可用於用戶測試的視頻環聊,進行設備上的測試和互動式預覽,團隊共用非常便捷。

 

Fliud UI.png 

以上是我總結出的5款真正意義上能夠實現快速設計的線框圖工具。儘管每款工具各具特色,也各有不足,但總體上都能滿足你進行快速線框圖設計的需要。在這裡,我也分享一下我個人的喜好和選擇,能進行快速的線框圖製作是首要條件,這5款工具基本難分伯仲,但在設計過程中,我們往往會要求更多,譬如設計靈感的查找,多樣的快速演示和分享方式,力求最低的學習成本,比較深入的交互和動效,以及更多的人性化設置,通過自己的親身經歷,Mockplus是其中最能滿足設計過程中各種需求的佼佼者,也是我極力推薦的一款工具,值得用心一試。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前端(轉換): var param = XXXXXXXXXXXXXXXXXX; param = decodeURIComponent(param,true); param = encodeURI(param, "UTF-8"); $.post('<%=request.getContextPath() ...
  • 這篇博文有關css的權重問題,我個人認為這是css知識中很重要的一個知識點。因為在開發的過程能中我們會經常遇到這種問題,特別是如果你使用框架的時候,有些框架的某些標簽有一些預設的樣式。所以我們可以通過增加權重的方式來使我們所寫的樣式有效。既然說到權重那就必然要說起權重的等級以及權重值。 css的權重 ...
  • 1、jQuery基礎 Jquery它是一個庫(框架),要想使用它,必須先引入! jquery-1.8.3.js:一般用於學習階段。 jquery-1.8.3.min.js:用於項目使用階段 官網下載後,複製到當前WEB項目的js文件夾下,如下: 引入代碼:<script type="text/jav ...
  • [1]圖形變換 [2]矩陣變換 [3]全局陰影 [4]全局透明 [5]圖形合成 [6]裁剪區域 [7]圖像繪製 [8]使用圖像數據 [9]模式 [10]非零環繞 [11]交互 ...
  • Node.js之使用Buffer類處理二進位數據 Buffer類可以在處理TCP流或文件流時處理二進位數據,該類用來創建一個專門存放二進位數據的緩存區。 1. 創建Buffer對象 1.1 直接創建: bur = new BUffer(123) //123 為bur緩存區長度 1.2 初始化緩存區內 ...
  • 前端JS電商放大鏡效果: ...
  • 1.DRY——(Don't repeat yourself )儘量減少改動時要編輯的地方是代碼可維護的最大要素之一。 2.實例: 以上CSS樣式是對一個button進行樣式的定義,存在以下幾個問題: (1)當我們想讓按鈕更大時,可以改變font-size 屬性,通過改變字體來讓按鈕變大,但是相應的, ...
  • NSString *testvalue = @"back0 0x10Value"; if([testvalue rangeOfString:@"ck"].location !=NSNotFound) { NSLog(@"存在"); }else { NSLog(@"不存在"); } // ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...