UI常用設計軟體,設計網頁有效率!

Gremlin Works >> UI/UX >> UI常用設計軟體,設計網頁有效率!
最後更新:

創造UI設計與一般平面設計不一樣,所需的軟體也不同。這篇文章要來介紹實用的UI製作工具,入門初學者尤其需要詳細閱讀,找到最適合自己的軟體。

介面設計

1. OmniGraffle

用來繪製圖表,流程圖,組織結構圖以及插圖,也可以用來來組織頭腦中思考的資訊,繪製心智圖,是設計網頁前的工具之一,有個小小缺點,就是只能於執行在Mac OS X和iPad平台之上而已,可以輸出PDF,TIFF,PNG,JPEG,EPS,HTML圖像對映,SVG,Visio XML,Photoshop和BMP等一系列檔案格式。OmniGraffle使用蘋果的XML schema格式的plist儲存資料,其副檔名為.graffle。

OmniGraffle website

OmniGraffle sitemap

2. Draw IO

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

Export setting for Draw.io

Draw.io project

Draw.io sitemap

3. InVision

主要是製作可互動的prototype,容易操作,畫面簡潔美觀,可以透過Craft在sketch裡的插件來匯入你的圖稿,也可以直接上傳jpg、png、gif等影像來創建一個專案。可以加入手勢以及簡單的轉場動畫跟捲軸滑動,方便與團隊合作或客戶討論,整合性非常高的工具。可以加快前期溝通流程。

Invision website

Invision prototyping tool

4. Principle

一款互動設計軟體。相比 Pixate 更容易上手,介面類似 Sketch 等做圖軟體,思路有點像用 Keynote 做動畫,更「可視化」一些。製作動畫門檻低,提供的動畫原型效果已經很足夠。您不需要花非常多的時間。再您的UI上加上一些動畫,能使原型看起來更真實,不過Windows系統一樣支援喔。

Principe prototyping website

5. Axure

高擬真的原型工具, 能夠幫助您準確地展現高層次的細節和概念,適合於外部溝通,讓客戶瞭解網站的功能和操作流程,除了能相互連結之外,也提供許多豐富的互動設計。Axure RP 由 Axure Software Solution Inc.所開發完成,在美國深獲好評,您可以搜尋到非常多相關的文章,不管是 Axure RP 使用經驗分享或產品評價。悠識以提供「網站使用者經驗 (Web User Experience)」服務為核心,為您尋找適當的工具軟體是最重要的服務之一,現在 Axure RP也支援中文版了。

Axure website

Basalmiq wireframe

6. Balsamiq

Demo Content手繪風格低保真原型,繪製Wireframe草圖的工具之一,簡易好操作,想像的到的流程、規劃、產品印象、相關的圖表與作業,幾乎都找得到符合的物件來做說明,可以很簡單的把你想表達的東西物像化適合呈現產品初期的概念。而且能夠快速討論、調整,著重於核心框架層,而不是視覺部分。好處是省時、高效;相對地,由於省略過多界面細節,較適合快速呈現自身想法或是內部溝通。

Basalmiq website

Basalmiq wireframe of Wikipedia

Basalmiq wireframe

Basalmiq components

配色

1. Material.io

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

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

Color Tool homepage

2. Adobe Color CC

Adobe提供的線上配色工具。

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

Adobe Color CC palette

Adobe Color suggestion of palette

建造一套屬於你的工具庫

新的工具不斷的推出市場,建造你的專屬資源庫,讓工作效率提升!以上是各種工具的介紹,當然還有更多豐富的資源等著你去挖掘。若你想專注於快速原型設計、強大的團隊合作工具、靈感發想工具和使用者體驗測試等。這些有利的資源發展累積了相當多實用的技巧和方法。

我們是 Gremlin Works

我們重視B2B企業品牌整體形象,提供完整的網路行銷佈局,包括網站建置、網頁設計、SEO、社群行銷、網紅行銷。

想要知道如何改善搜尋引擎排名?

想要戰勝你的競爭對手?

預約免費的競爭對手諮詢,我們將協助您對於品牌現況、網站設計、SEO、內容關鍵字,來分析競爭對手的行銷策略。

1. Coolors

Coolors 是一款快速的配色工具。

你可以找到熱門的配色方案,同樣可以從圖片中取色,提供轉存成URL, PDF, PNG, SCSS, SVGCOPIC等不同的格式

Coolors wbesite

2. uiGradients

越來越多網站加入漸層配色,適當的漸層色能提升網站的質感,通過CSS3的技術,可以不再使用圖片式的漸層背景,不會拖累網站效能,且放大後也不會模糊,而現在可以利用一些配色工具網站提供的服務,得到相當有用的配色程式碼。

Ui Gradients website

3. NIPPON COLORS

日本的傳統配色網站,提供CMYKRGBHEX250種精選色彩。

若網站需要比較古典風格,此網站是不錯的參考工具。

Nippon colors website
Poster of Jiu Zhen Nan
Poster of Jiu Zhen Nan
台北英僑商務協會

接軌英國與台灣會員是專案執行的目標,提供會員企業全方位的線上整合服務,並提升網路形象,創造會員服務價值。

Kymco's homepage template
Kymco homepage
DRIWAYS

全球線上叫車平台技術與服務整合,並透過行銷策略建立品牌網路知名度,成功提升品牌優質形象。

Poster of Jiu Zhen Nan
Poster of Jiu Zhen Nan
凱舟

我們掌握與其他淨水大品牌競爭關鍵要素,挖掘拓展歐美市場利基點。展現服務為導向的品牌網站,成功建立品牌信任感,並跨足國際市場。

品牌網路形象提升為專案核心,我們運用客製化網站服務技術,開發全球會員與訂房系統,有效整合飯店與飯店線上支援。

iONEX banner with man standing next to his scooter

我們優質的跨國行銷團隊已經成功幫助超過200間公司,包括光陽機車、舊振南、BENQ等等。想了解我們其他成功案例,或免費諮詢嗎?歡迎聯絡我們!

previous arrow
next arrow
Slider
B2B網路行銷公司
B2B網路行銷公司

我們重視B2B企業品牌整體形象,提供完整的行銷佈局。全方位的行銷服務包括網站建置、網頁設計、SEO、社群行銷、網紅行銷等,精準分配行銷預算,達到效益最大化。

我們重視B2B企業品牌整體形象,提供完整的行銷佈局。全方位的行銷服務包括網站建置、網頁設計、SEO、社群行銷、網紅行銷等,精準分配行銷預算,達到效益最大化。

Slider