介紹實用的UI製作工具 - iT 邦幫忙

用來繪製圖表，流程圖，組織結構圖以及插圖，也可以用來來組織頭腦中思考的資訊，繪製心智圖，是設計網頁前的工具之一，有個小小缺點，就是只能於執行在Mac OS X和iPad ... 2 介紹實用的UI製作工具 ui ui設計 ui工具 最實用軟體 meimel 2018-08-2809:49:39‧15826瀏覽 UI設計與一般平面設計不一樣，這篇文章要來介紹實用的UI製作工具，各種介紹跟分析，入門初學者尤其需要詳細閱讀，找到最適合自己的工具。

資料來源：http://gremlinworks.com.tw/ui-ux/ui-tools/ OmniGraffle 用來繪製圖表，流程圖，組織結構圖以及插圖，也可以用來來組織頭腦中思考的資訊，繪製心智圖，是設計網頁前的工具之一，有個小小缺點，就是只能於執行在MacOSX和iPad平台之上而已，可以輸出PDF，TIFF，PNG，JPEG，EPS，HTML圖像對映，SVG，VisioXML，Photoshop和BMP等一系列檔案格式。

OmniGraffle使用蘋果的XMLschema格式的plist儲存資料，其副檔名為.graffle。

DrawIO 免費線上圖表編輯工具，可直接連結GoogleDrive或是OneDrive等等雲端中，提供了很多類型的圖示，還能隨時隨地儲存您的編輯過程，而圖檔匯出格式支援多種類型格式，且支援中文顯示。

InVision 主要是製作可互動的prototype，容易操作，畫面簡潔美觀，可以透過Craft在sketch裡的插件來匯入你的圖稿，也可以直接上傳jpg、png、gif等影像來創建一個專案。

可以加入手勢以及簡單的轉場動畫跟捲軸滑動，方便與團隊合作或客戶討論，整合性非常高的工具。

可以加快前期溝通流程。

Principle 一款互動設計軟體。

相比Pixate更容易上手，介面類似Sketch等做圖軟體，思路有點像用Keynote做動畫，更「可視化」一些。

製作動畫門檻低，提供的動畫原型效果已經很足夠。

您不需要花非常多的時間。

再您的UI上加上一些動畫，能使原型看起來更真實，不過Windows系統一樣支援喔。

Axure高擬真的原型工具，能夠幫助您準確地展現高層次的細節和概念，適合於外部溝通，讓客戶瞭解網站的功能和操作流程，除了能相互連結之外，也提供許多豐富的互動設計。

AxureRP由AxureSoftwareSolutionInc.所開發完成，在美國深獲好評，您可以搜尋到非常多相關的文章，不管是AxureRP使用經驗分享或產品評價。

悠識以提供「網站使用者經驗(WebUserExperience)」服務為核心，為您尋找適當的工具軟體是最重要的服務之一，現在AxureRP也支援中文版了。

Balsamiq 手繪風格低保真原型，繪製Wireframe草圖的工具之一，簡易好操作，想像的到的流程、規劃、產品印象、相關的圖表與作業，幾乎都找得到符合的物件來做說明，可以很簡單的把你想表達的東西物像化適合呈現產品初期的概念。

而且能夠快速討論、調整，著重於核心框架層，而不是視覺部分。

好處是省時、高效；相對地，由於省略過多界面細節，較適合快速呈現自身想法或是內部溝通。

SketchPlugin Paddy 自動調整間距、邊距、對齊調整。

SketchToolbox 管理sketchplugin的工具。

您可以快速查詢、下載和安裝移除，非常方便。

目前已經推出ui介面（記得安裝移除之後要重新啟動sketch)。

Craft 由Invision推出的plugin，可以自動產生圖片、內容等，能夠一鍵上傳prototype，使你的工作流程更加連貫，功能強大，他不只也可以輸出視覺規範(比較偏向StyleGuid)，有些很酷的功能像是可以複製並排列物件，定義間距是多少，或是有時候需要找些範例圖來用，設計師可以節省時間在做這些繁瑣的事上。

AutoLayout 可集成到Sketch中，可定義和查看不同的iPhone/iPad尺寸，包括縱向/橫向。

自動排列每個UI元素，符合不同設備大小，您不需要重新排列在每一種螢幕尺寸上的內容，使用這個plugin可以快速得到所有螢幕尺寸上想要的效果。

RenameIt 您只要使用一些語法，就能夠快速重命名圖層，也可以使用系統內建的圖層命名方式。

建立有條理的圖層順序，能夠幫助您更快找到需要的元件。

配色 Material.io Material.io是Google提供的配色工具。

當你點擊任何一色彩時，右下的的Primary會提供給你適當的主要配色組合，另外點擊Secondary即為輔助色的配色組合，用於強調UI元件，左方畫面會即時呈現效果。

AdobeColorCC Adobe提供的線上配色工具。

功能非常的齊全，除了進行配色也可以創建色票、匯入圖片選色，另外你也可以瀏覽已建立好的配色組合，於登入後皆能夠儲存於AdobeCreativeCloud資料庫。

資料來源：http://gremlinworks.com.tw/ui-ux/ui-tools/ 留言1 追蹤 檢舉 1則留言 0 ttt iT邦新手5級‧ 2018-09-0322:49:57 謝謝分享這麼多個編輯制作的軟体，很有參考價值！ 回應 檢舉 登入發表回應 我要留言 立即登入留言 相關文章 為什麼我們跳過Photoshop－37Signal談UI開發 【設計+切版30天實作】｜Day17-Bootstrap的環境建立 【設計+切版30天實作】｜Day20-Navigationbar-打破預設的navbar排版 Day19.UI設計軟體-Figma簡介與優勢 【設計+切版30天實作】｜Day21-PainPoints-怎麼切出標題底下的highlight裝飾? 【設計+切版30天實作】｜Day22-設計小廣告-背景上又有背景到底怎麼切！ 【設計+切版30天實作】｜Day23-Pros區塊-看似無邊框的三欄式卡片，到底要對準哪條欄位？ DungeonMizarka025 【設計+切版30天實作】｜Day24-Steps區塊-如何做出漸層背景？ 【設計+切版30天實作】｜Day25-Carousel區塊-把CarouselCaption和Indicators改成心目中理想的模樣 iT邦幫忙鐵人賽 參賽組數 1087組 團體組數 52組 累計文章數 20454篇 完賽人數 572人 鐵人賽最新文章 建立第一個單元測試(golang)-2(Day21) 更新網格交易機器人 STM32的開發生態，Cube、HAL庫、LL庫 閒聊STM32CubeMX和STM32CubeIDE 建立第一個單元測試(golang)-1(Day20) Day38-在AWSLambda中使用YOLO推估(Inference) Day37-在AWSLambda建立OpenCVLayer Day36-使用Container建立AmazonSageMaker端點 Day35-AmazonSageMaker簡介 今天來瞄一眼龍與雀的科技：知覺共享技術Body-sharing 前往鐵人賽 技術推廣專區 [Day2]抓取每日收盤價 [Day1]基本工具安裝 利用python取得永豐銀行API的Nonce 永豐金融API測試員 [Day03]tinyML開發板介紹 [Day01]在享受tinyML這道美食之前 [Day3]使用ta-lib製作指標 [Day4]函數打包與買進持有報酬率試算 計算API所需要的參數:HashID 計算API所需要的參數:IV 前往鐵人賽 熱門問題 請問這個錯在哪? 到底API設計的方向該往哪裡去？ AD五大角色轉移差異。

[已解決]請益，每一筆商品資料內的圖片，儲存在資料庫內方式 請問如何把網頁製作成手機APP? 資料庫的數值sum加總後，數值仍然會少算?! MYSQL：如何計算每筆數據的移動平均值？ 正航ERP跑傳票維護就轉圈圈久無反應... 急!傳值問題 3個網段互連問題 IT邦幫忙 站方公告 2021iThome鐵人賽精彩文章超過2萬篇，預計12月揭曉本屆獲勝鐵人 熱門tag 看更多 13th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 windows php python windowsserver linux c# 程式設計 資訊安全 css vue.js sql 分享 熱門回答 請問這個錯在哪? 到底API設計的方向該往哪裡去？ 急!傳值問題 請問如何把網頁製作成手機APP? 資料庫的數值sum加總後，數值仍然會少算?! 正航ERP跑傳票維護就轉圈圈久無反應... [已解決]請益，每一筆商品資料內的圖片，儲存在資料庫內方式 Adaptec5405Raid1E、5、5EE、6、10選擇性障礙 解析郵件附檔 如何在網站上只有內容做scroll而不會與header重疊? 熱門文章 更新網格交易機器人 【徵才/台北松山區】Linux/Winserver系統維運工程師 網路是怎樣連接的(十二)IP地址怎麼看 碩士課程一問 701CLIENT門禁系統卡片無效 Java開發WEB的好平台--Grails--(4)建立第一個Controller LINEDEVELOPERDAY2021—提升LIFF的開發體驗 如何建立WindowsUSB安裝隨身碟-適用Win10,WinServer2019 建立第一個單元測試(golang)-2(Day21) Oracle1Z0-082PracticeExam2021 一週點數排行 更多點數排行 海綿寶寶(antijava) raytracy(raytracy) ccenjor(ccenjor) Felix(redqi) Mao(TutelaryMao) rogeryao(rogeryao) ㊣浩瀚星空㊣(yoching) h198805041(h198805041) juck30808(juck30808) 一級屠豬士(hitomitanaka) × At 輸入對方的帳號或暱稱 Loading 找不到結果。

標記 {{result.label}} {{result.account}} 關閉