鍍金池/ 教程/ 產(chǎn)品經(jīng)理/ 15個(gè)很有用的面向設(shè)計(jì)師的 UI 和 UX 設(shè)計(jì)工具及資源
5 個(gè)提示助你設(shè)計(jì)出精妙的 Apple Watch 應(yīng)用軟件
如何使用安卓密鑰庫(kù)存儲(chǔ)密碼和其他敏感信息
從 HDFS 中使用分布式的 MAP REDUCE JOB 寫入 CASSANDRA
現(xiàn)代 Javascript 工具漫游指南
理解 Cassandra 壓縮儲(chǔ)存的作用
不懂 JavaScript?那你就不是一個(gè) Web 開發(fā)者
如何開發(fā)一個(gè)簡(jiǎn)單的 Android Wear 應(yīng)用程序
Angular 與 React 的比拼
谷歌加入 OpenStack 基金會(huì)的 4 個(gè)理由
15個(gè)很有用的面向設(shè)計(jì)師的 UI 和 UX 設(shè)計(jì)工具及資源
DevTools 摘要: 處理?xiàng)l帶化數(shù)據(jù)時(shí)給條帶化數(shù)據(jù)的一個(gè)新家
為什么是 Node.js ? 什么時(shí)候使用 Node.js ?
玩轉(zhuǎn) Dcoker:Hello World, 開發(fā)環(huán)境和你的應(yīng)用
運(yùn)行時(shí)的掛鉤 C 函數(shù)
在游戲開發(fā)中獲得成功
在 iOS 開發(fā)中使用 TWITTERKIT & DIGITS
使用 ionic 將數(shù)據(jù)保存到本地存儲(chǔ)中
20 個(gè)有用的 Angular.js 工具
如何成為一個(gè)超級(jí)軟件開發(fā)者
用 Go 語(yǔ)言來(lái)看 Android! 出發(fā), Android, 出發(fā)!

15個(gè)很有用的面向設(shè)計(jì)師的 UI 和 UX 設(shè)計(jì)工具及資源

文章翻譯:邵凱陽(yáng)
發(fā)表時(shí)間:2015 年 7 月 25 日
原文作者:Prat
文章分類:產(chǎn)品與設(shè)計(jì)

關(guān)于本文

伴隨著移動(dòng)打印和網(wǎng)絡(luò)設(shè)計(jì)的快速發(fā)展,以及客戶對(duì)用戶界面和用戶體驗(yàn)的越來(lái)越苛刻要求,對(duì)設(shè)計(jì)師的要求也越來(lái)越嚴(yán)格,一個(gè)好的設(shè)計(jì)工具必將成為一個(gè)優(yōu)秀設(shè)計(jì)師的一把利器。本文就主要介紹了現(xiàn)在在 UI 和 UX 設(shè)計(jì)領(lǐng)域比較有用的15款設(shè)計(jì)軟件,其中包含了對(duì)各個(gè)軟件的整體功能的總結(jié),以及各個(gè)軟件的官網(wǎng)鏈接。

文章內(nèi)容

今天,平面設(shè)計(jì)師在各個(gè)設(shè)計(jì)領(lǐng)域有多重的機(jī)會(huì)。以后,通過各種移動(dòng)打印和網(wǎng)絡(luò)設(shè)計(jì)過程,設(shè)計(jì)師將進(jìn)入 UI 和 UX 設(shè)計(jì)的世界。與其他創(chuàng)造性的事務(wù)不同,像標(biāo)志設(shè)計(jì)、2D/3D 動(dòng)漫、圖形信息、動(dòng)態(tài)圖像和其他,UI 和 UX 的設(shè)計(jì)是非常不同的。用戶界面 (UI) 設(shè)計(jì)是開發(fā)一個(gè)用于人機(jī)交互的前端界面的過程。然而用戶體驗(yàn) (UX) 設(shè)計(jì)涉及學(xué)習(xí)各方面的人機(jī)交互知識(shí),例如交互的可用性、交互的功能性、交互設(shè)計(jì)、信息架構(gòu)設(shè)計(jì)等。

在用戶界面 (UI) 設(shè)計(jì)方面,平面設(shè)計(jì)師能夠?qū)⒆约旱膭?chuàng)造性想法注入到一個(gè)項(xiàng)目中去。它涉及到使用各種視覺元素,例如顏色、符號(hào)、過渡效果、圖像等。通常情況下,UI 和 UX 的設(shè)計(jì)師是以團(tuán)隊(duì)的方式來(lái)定義和開發(fā)界面特性以及它的功能性和提供用戶與應(yīng)用程序或網(wǎng)站之間的通信模型。當(dāng)然,還有系統(tǒng)工程師、信息技術(shù)專業(yè)工作者和其他設(shè)計(jì)者都對(duì)設(shè)計(jì)流程作出了貢獻(xiàn)。

那么,對(duì)用戶界面和用戶體驗(yàn)發(fā)展至關(guān)重要的諸多方面是什么?我已經(jīng)列出了其中一些:

  • 創(chuàng)建網(wǎng)站線框圖。
  • 定義的交互模式。
  • 開發(fā)導(dǎo)航地圖。
  • 創(chuàng)建圖形的版面編排。
  • 測(cè)試功能。
  • 引導(dǎo)用戶測(cè)試。

設(shè)計(jì)師使用各種工具 和資源來(lái)使任務(wù)很好的完成。有一系列的測(cè)試、原型設(shè)計(jì)、仿真和其他促進(jìn) UI 和 UX 設(shè)計(jì)過程的工具。我已將這些能夠?qū)υO(shè)計(jì)者的發(fā)展提供幫助的在線工具和資源編輯成了一個(gè)列表。好了,那就來(lái)看看下面列表中為設(shè)計(jì)師設(shè)計(jì)的15款 UI 和 UX 設(shè)計(jì)軟件。

1) Proto.io

http://wiki.jikexueyuan.com/project/wiki-journal-201507-1/images/tools-resources-02.png" alt="02" />

Proto.io 是一個(gè)用于應(yīng)用程序開發(fā)的原型設(shè)計(jì)工具。它收集了大量的 UI 庫(kù),以及交互式 UI 組件來(lái)實(shí)現(xiàn)材料設(shè)計(jì)功能。該工具還提供一些其他的特性,例如顏色調(diào)整、篩選器、多文件上傳等功能。當(dāng)設(shè)計(jì)團(tuán)隊(duì)工作時(shí),Proto.io 與 DropBox 還可一起同步為設(shè)計(jì)人員提供實(shí)時(shí)在線協(xié)作功能。

2) Pidoco

http://wiki.jikexueyuan.com/project/wiki-journal-201507-1/images/tools-resources-03.png" alt="03" />

Pidoco 是一個(gè)用于 web、移動(dòng)和企業(yè)應(yīng)用程序開發(fā)的現(xiàn)代原型應(yīng)用程序。它提供了基于云計(jì)算的開發(fā)線框圖,移動(dòng)模擬、實(shí)物模型和 UX 原型平臺(tái)。應(yīng)用程序提供內(nèi)置模板便于快速進(jìn)行原型設(shè)計(jì),以及提供實(shí)時(shí)協(xié)作功能。使用 Pidoco,你可以開發(fā)交互式原型以及實(shí)時(shí)移動(dòng)模擬運(yùn)行 iOS 和 Android 設(shè)備。

也可以參看: 對(duì)想要掙錢的設(shè)計(jì)師的5條建議

3) InVision

http://wiki.jikexueyuan.com/project/wiki-journal-201507-1/images/tools-resources-04.png" alt="04" />

InVision 是一個(gè)將靜態(tài)設(shè)計(jì)轉(zhuǎn)換為具有交互式原型設(shè)計(jì)功能的有力工具,例如可以動(dòng)畫、手勢(shì)和轉(zhuǎn)換場(chǎng)景的實(shí)現(xiàn)。該工具提供一個(gè)基于云計(jì)算的平臺(tái),允許在開發(fā)移動(dòng)和企業(yè)應(yīng)用程序時(shí)進(jìn)行實(shí)時(shí)協(xié)作。InVision 也支持為蘋果手表和 Android 穿戴開發(fā)原型。

4) UserTesting

http://wiki.jikexueyuan.com/project/wiki-journal-201507-1/images/tools-resources-05.png" alt="05" />

UserTesting 是一個(gè)現(xiàn)代的測(cè)試工具,用于在臺(tái)式機(jī)、平板電腦和移動(dòng)設(shè)備上測(cè)試網(wǎng)站、 應(yīng)用程序、原型等。該工具是一個(gè)用戶研究平臺(tái),可以讓你的目標(biāo)受眾測(cè)試您的網(wǎng)站或應(yīng)用程序。UserTesting 通過視頻、指標(biāo)、統(tǒng)計(jì)數(shù)據(jù)等形式從目標(biāo)受眾群體中收集有用的反饋。

也可以參看: 檢測(cè)你網(wǎng)站用戶體驗(yàn)設(shè)計(jì)的十大工具

5) PowerMockup

http://wiki.jikexueyuan.com/project/wiki-journal-201507-1/images/tools-resources-06.png" alt="06" />

PowerMockup 是一個(gè)專門為在 PowerPoint 中使用的強(qiáng)大的模型和線框工具。該應(yīng)用程序在 PowerPoint 形狀設(shè)計(jì)收集了廣泛的 UI 組件。這些元素可以在 PowerPoint 中創(chuàng)建各種移動(dòng)、網(wǎng)絡(luò)和桌面應(yīng)用程序的界面原型。PowerMockup 還提供了一些強(qiáng)大的協(xié)作和共享功能。

6) PickFu

http://wiki.jikexueyuan.com/project/wiki-journal-201507-1/images/tools-resources-07.png" alt="07" />

PickFu 是一個(gè)輪詢平臺(tái),可以幫助你找到方案設(shè)計(jì)和營(yíng)銷理念過程出現(xiàn)問題的解決方法。它是一個(gè)強(qiáng)大的工具,可以收到來(lái)自美國(guó)總部對(duì)于商標(biāo)、書籍封面、UI 模型等的各種設(shè)計(jì)思想的建議、意見和反饋。

7) Myna

http://wiki.jikexueyuan.com/project/wiki-journal-201507-1/images/tools-resources-08.png" alt="08" />

Myna 是一個(gè)強(qiáng)大的被圖形設(shè)計(jì)師和 web 開發(fā)人員使用的 A / B 測(cè)試或拆分測(cè)試工具。該工具對(duì)個(gè)別游客進(jìn)行檢查,并從不同的角度對(duì)您的工作提供有見地的反饋。您可以使用Myna 進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)、電子郵件設(shè)計(jì)、廣告設(shè)計(jì)、 UI 設(shè)計(jì)等。

也可以點(diǎn)擊: 面向網(wǎng)頁(yè)設(shè)計(jì)師的24小時(shí)免費(fèi)模型和線框圖工具

8) Ace UI

http://wiki.jikexueyuan.com/project/wiki-journal-201507-1/images/tools-resources-09.png" alt="09" />

Ace UI 是一個(gè)移動(dòng)的 UI 工具包,是專門為 iOS 8 移動(dòng)應(yīng)用程序開發(fā)設(shè)計(jì)的。它提供了大量的字體類型、圖標(biāo)、 PSD 模板和其他 UI 元素集合。此外,它還提供線框和原型工具包,可以進(jìn)行更高效的應(yīng)用程序開發(fā)。

9) Form

http://wiki.jikexueyuan.com/project/wiki-journal-201507-1/images/tools-resources-10.png" alt="10" />

Form 是一個(gè)很強(qiáng)的原型工具,允許您直接在設(shè)備上構(gòu)建和自定義本機(jī)原型。該工具提供了最新的材料設(shè)計(jì)組件,以及允許您構(gòu)建自定義組件。

10) MouseStats

http://wiki.jikexueyuan.com/project/wiki-journal-201507-1/images/tools-resources-11.png" alt="11" />

MouseStats 是一個(gè)很受歡迎的 UX 分析工具,它提供了各種現(xiàn)代監(jiān)測(cè)用戶與網(wǎng)站的交互功能。該工具提供各種服務(wù),如瀏覽會(huì)話視頻錄制、滾動(dòng)熱圖、統(tǒng)計(jì)數(shù)據(jù)、測(cè)量等。

11) POP

http://wiki.jikexueyuan.com/project/wiki-journal-201507-1/images/tools-resources-12.png" alt="12" />

POP 或紙上原型是個(gè)很酷的應(yīng)用程序用于將手工制作草圖和版面編排轉(zhuǎn)換為交互式原型。應(yīng)用程序在各種平臺(tái)和設(shè)備上都可以工作,以及與 DropBox 一起實(shí)現(xiàn)實(shí)時(shí)集成協(xié)作。

12) Gliffy

http://wiki.jikexueyuan.com/project/wiki-journal-201507-1/images/tools-resources-13.png" alt="13" />

Gliffy 是一款具有專業(yè)設(shè)計(jì)與在線協(xié)作功能的應(yīng)用程序。該工具允許您設(shè)計(jì)專業(yè)圖、 技術(shù)圖、線框圖、流程圖、網(wǎng)絡(luò)圖、站點(diǎn)地圖等。

13) Antetype

http://wiki.jikexueyuan.com/project/wiki-journal-201507-1/images/tools-resources-14.png" alt="14" />

Antetype是一款開發(fā)交互式用戶界面原型的應(yīng)用程序。該應(yīng)用程序提供超過 400 個(gè)主要平臺(tái)的預(yù)設(shè)計(jì)部件。它提供了一些特性功能,如動(dòng)態(tài)布局、 響應(yīng)設(shè)計(jì)的功能、屬性綁定、斷點(diǎn)、演示文稿模式、嵌套、注釋等。

Also Read: 10 Web Design Trends for 2015

14) Wirify

http://wiki.jikexueyuan.com/project/wiki-journal-201507-1/images/tools-resources-15.png" alt="15" />

Wirify 是一個(gè)強(qiáng)大的 UX 工具,通過一次點(diǎn)擊就可以實(shí)現(xiàn)從 web 網(wǎng)頁(yè)到線框圖的轉(zhuǎn)換。該工具允許您檢查各種網(wǎng)站的頁(yè)面結(jié)構(gòu)和布局。此外,你可以編輯你的線框圖,并將它們導(dǎo)出到其他的設(shè)計(jì)應(yīng)用程序,例如 BalsamiqOmnigraffle

15) Naview

http://wiki.jikexueyuan.com/project/wiki-journal-201507-1/images/tools-resources-16.png" alt="16" />

Naview 是一個(gè)強(qiáng)大的工具,用于設(shè)計(jì)導(dǎo)航原型和測(cè)試導(dǎo)航的可用性。使用 Naview,您可以預(yù)覽信息體系結(jié)構(gòu)和網(wǎng)站地圖。此外,該工具允許您開發(fā)下拉式菜單以及直接在瀏覽器中編輯導(dǎo)航結(jié)構(gòu)。

結(jié)論

在 web 世界中有三種圖形用戶界面被使用。他們是工具用戶界面、 桌面用戶界面和進(jìn)程用戶界面。用戶界面和用戶體驗(yàn)設(shè)計(jì)領(lǐng)域正日益受到更多關(guān)注,因?yàn)橛?jì)算機(jī)技術(shù)在各行業(yè)中越來(lái)越多的得到應(yīng)用。我們期待在不久的將來(lái)可以發(fā)布更多的開發(fā)網(wǎng)站的用戶界面和用戶體驗(yàn)的工具和資源。

現(xiàn)代的 UI 和 UX 工具擁有內(nèi)置的功能和特點(diǎn),在很大程度為設(shè)計(jì)師完成他們的項(xiàng)目提供了幫助。這些工具也帶來(lái)了一些創(chuàng)新成果,可以對(duì)用戶界面和用戶體驗(yàn)進(jìn)行可視化和功能方面的開發(fā)。

該列表包含了當(dāng)前對(duì)用戶界面和用戶體驗(yàn)設(shè)計(jì)有價(jià)值的工具和資源。如果你最喜歡的工具沒有被記錄在名單上,然后你可以明確的下面的評(píng)論區(qū)中提出。祝你好運(yùn)!

更多IT技術(shù)干貨: wiki.jikexueyuan.com
加入極客星球翻譯團(tuán)隊(duì): http://wiki.jikexueyuan.com/project/wiki-editors-guidelines/translators.html

版權(quán)聲明:
本譯文僅用于學(xué)習(xí)和交流目的。非商業(yè)轉(zhuǎn)載請(qǐng)注明譯者、出處,并保留文章在極客學(xué)院的完整鏈接
商業(yè)合作請(qǐng)聯(lián)系 wiki@jikexueyuan.com
原文地址:https://www.packtpub.com/books/content/persisting-data-local-storage-ionic