您是否曾經嘗試過不按照說明組裝宜家家具?你知道會發生什麼事。您最終將獲得從未使用過的部件以及大量“額外”的螺絲和螺栓。結果呢?每當貓咪跳到桌子和書架上時,它們就會搖搖晃晃地翻倒。
就像 DIY 家具一樣,一個出色的網站需要一套說明才能使其正常運作。在設計、圖像甚至顏色出現之前,建立網站最明智的方法是根據網站地圖建立頁面模板的骨架來佈局頁面。這稱為“線框圖”。
有數十種網站線框圖和 GUI 原型工具可協助您奠定網站的基礎。以下是我們最喜歡的 10 個。
1.Balsamiq 模型
Balsamiq 模型
Balsamiq Mockups是最受歡迎的線框圖工具之一,它提供了有意的低保真體驗,原因有兩個:澳洲海外華人資料庫 首先,它將重點放在佈局和導航上,其次,它非常基本,您的客戶可以看看並知道實際設計尚未進入畫面。另一個很大的優點是他們活躍的線上社區,可以分享想法。
2. 熱格魯
熱格魯
HotGloo的重點是乾淨的 UI,具有簡單的拖放功能,可實現互動式、響應式線框圖。這是一款易於學習的網路和行動線框圖工具,可即時提供專案團隊協作。您也可以向客戶發送預覽連結。 HotGloo 以其客戶服務和支援而自豪。
3. 知更鳥
知更鳥
網路為基礎的Mockingbird線框圖工具有一個目標:成為「最簡單、最友善的線框圖工具」。建立簡潔的線框並從強大的 UI 元素中進行選擇。
4.Axure RP
艾克蘇爾
使用Axure,無需編碼即可為網站或行動應用程式建立線框圖。 Axure 的線上教學採用有趣的方法來教您如何使用他們的線框圖工具。
5. 素描
草圖
Sketch專為 Mac 和 iOS 用戶打造。 UI 與 Balsamiq 的低保真線框圖方法相差甚遠。事實上,Sketch 非常接近實際的網頁設計 - 這就是他們喜歡的方式。一旦您體驗到Apple 框架和 iCloud 整合 以及 Mac 和 iOS 裝置之間無縫運作的便利性,您也可能會這麼做。 Sketch 用於設計網站、應用程式介面或幾乎任何東西。
6.模擬流程
模擬流
如果 Sketch 太高保真,不適合您的口味,那麼您可能想嘗試Mockflow。雖然不像 Balsamiq 那麼低保真,但該公司相信透過簡單的拖放作業可以快速輕鬆地製作線框圖。沒有看到適合您的元素?試試他們的模型商店 來取得第三方設計元素。
7. 使用者體驗PIN
使用者體驗管理平台
UXPin作為線框圖工具的獨特之處在於,它從一開始就專注於可靠的 UX(使用者體驗)設計。它是由 UX 設計師創建的一套美觀的 UX 設計工具。作為一種現代工具,它經過完全配置,可以啟用各種斷點以適應不同的設備和螢幕尺寸,並允許動態響應線名。
8. 魯姆茲
盧姆茲
與 Mockingbird 一樣, Lumzy 是一款可輕鬆繪製線框圖的線上工具。他們透過提供工具內圖像編輯器從人群中脫穎而出。他們還提供專業版,允許在您自己的伺服器上託管——這對於有保密顧慮的人來說是一個主要優點。
9. 原型共享
原型共享
Protoshare是一款基於 Web 的工具,能夠在團隊成員和客戶之間建立、註解和共享互動式線框圖,是協作的理想選擇。在低保真環境下工作或建立一個功能類似於即時網站的線框。
10.主題演講或PowerPoint
微軟幻燈片軟體
對於簡單的模型,Keynote和PowerPoint能夠建立粗略的線框圖來幫助您進行操作。插入任何尺寸的照片、形狀和物件都很容易。如果您希望快速輕鬆地完成一些工作,這可能是您想要走的路線。
***
這樣你就得到了。網站線框圖的十個選項。透過使用這些工具之一,您將為自己的成功做好準備,並且您將不會拿著那袋「額外」的螺絲。