ui原型設(shè)計工具有哪些？如何做好ui設(shè)計？

　　如果你想要從事UI設(shè)計方面的工作，那么首先要做的就是知道UI設(shè)計需要用到哪些軟件，然后學(xué)習(xí)這些軟件，學(xué)會了這些軟件在以后學(xué)習(xí)UI設(shè)計的時候就會方便很多，下面faceui的小編就給大家說說ui原型設(shè)計工具有哪些。

　　ui原型設(shè)計工具有哪些？

　　1. Axure PR

　　難度：★★★★

　　價格

　　l 標(biāo)準(zhǔn)版-$289一個注冊碼

　　l 專業(yè)版-$589一個注冊碼

　　Axure RP是美國Axure Software Solution公司旗艦產(chǎn)品，是一款專業(yè)的原型設(shè)計工具，讓負(fù)責(zé)定義需求和規(guī)格、設(shè)計功能和界面的專家能夠快速創(chuàng)建應(yīng)用軟件或Web網(wǎng)站的線框圖、流程圖、原型和規(guī)格說明文檔。這是一款非常專業(yè)的工具, 但是學(xué)習(xí)成本也非常高。如果你是一位專業(yè)的交互設(shè)計師，并且需要設(shè)計復(fù)雜是交互，你可以使用這款工具。

　　2. Mockplus

　　難度：★

　　價格：

　　l 基礎(chǔ)版-永久免費(fèi)

　　l 專業(yè)版-10RMB/月

　　Mockplus（摩客）是一款簡潔高效的原型圖設(shè)計工具，有別于Axure的繁復(fù)，Mockplus致力于快速創(chuàng)建原型。無論你是產(chǎn)品小白，還是大牛，摩客都能滿足你的需求。摩客的設(shè)計理念就是關(guān)注設(shè)計，而非工具。如果你時間有限，那你不能錯過摩客，因為幾乎不需要學(xué)習(xí)，你就可以上手這款工具。摩客提供了豐富的組件庫和圖標(biāo)庫，創(chuàng)建原型，你只需拖一拖。摩客發(fā)布2.1新版之后，交互也成為其一大亮點，她將交互設(shè)計可視化，只需要拖一拖鼠標(biāo)，即可完成交互的設(shè)計，所見所得，沒有復(fù)雜的參數(shù)，更無需編程。封裝好的一些系列交互組件，比如彈出面板、抽屜、內(nèi)容面板等，讓設(shè)計交互幾乎可以全程“無腦”操作。演示也很簡單，直接二位碼掃描即可，同時支持發(fā)布到云和導(dǎo)出演示包。

　　3. Balsamiq Mockups

　　難度：★

　　價格

　　l 單個注冊碼 - $89

　　l 多個注冊碼- $178 2個（量大從優(yōu)）

　　Balsamiq Mockups是一款快速創(chuàng)建原型的工具。這款原型工具具有獨特的手繪風(fēng)格。軟件的內(nèi)置組件，拖拽功能的支持為設(shè)計帶來了便利。該工具有桌面版本，同時也可以作為Google Drive, Confluence 和 JIRA的插件使用。

　　4. Justinmind

　　難度：★★★★★

　　價格:

　　l 試用期-30 天

　　l 專業(yè)版本- $29/月（包年$19/月)

　　是由西班牙JustinMind公司出品的原型制作工具，主要致力于高保真原型。它提供的功能有繪圖工具，拖放位置,大小,格式和導(dǎo)出/導(dǎo)入的小部件。你還可以自定義小組件，創(chuàng)建自定義組件庫，并進(jìn)行分類，提供豐富的動畫支持。如果你要創(chuàng)建復(fù)雜的高保真原型，可以嘗試這款工具。缺點就是需要一定的學(xué)習(xí)成本，程序啟動也比較慢。

　　5. InVision

　　難度：★★★

　　價格

　　l 免費(fèi)版- 一個項目

　　l 初級版 – 3 個項目 = $15/月

　　l 專業(yè)版 – 無項目限制 = $25/月

　　l 團(tuán)隊版 – 無項目限制, 5 個用戶 = $100/月

　　l 企業(yè)版 – 無項目限制, 高級功能

　　InVision是一款設(shè)計原型交互的工具。使用InVision可以很好的實現(xiàn)團(tuán)隊之間的協(xié)作，也便于收集反饋意見。它可以讓你將靜態(tài)的網(wǎng)頁，移動app設(shè)計圖快速的變成可以點擊，具有交互效果的動態(tài)原型。讓你的設(shè)計“活”起來。

　　6. UX Pin

　　難度：★★★

　　價格:

　　l 基礎(chǔ)版- $ 19 /月

　　l 專業(yè)版 - $29/月

　　l 專業(yè)版+ - $49/月

　　UXPin是一款在線原型設(shè)計工具。你可以通過拖拽的方式快速創(chuàng)建原型，無需敲一行代碼。通過UXpin，你可以創(chuàng)建高保真原型，同時也支持從Sketch和Photoshop導(dǎo)入你的設(shè)計。

　　7. OmniGraffle

　　難度：★★★

　　價格:

　　Mac

　　l 標(biāo)準(zhǔn)版- $ 99.99/注冊碼

　　l 專業(yè)版 - $199.99/注冊碼

　　iOS

　　l 標(biāo)準(zhǔn)版- $ 49.99/注冊碼

　　l 專業(yè)版 - $99.98/注冊碼

　　OmniGraffle是由來自美國的The Omni Group制作的一款原型設(shè)計工具，這款工具只針對蘋果用戶，有OS X版和iOS 版。它曾獲得2002年的蘋果設(shè)計獎?？梢允褂盟焖倮L制線框圖、圖表、流程圖等。用Origami創(chuàng)建iPhone和iPad原型是比較好的選擇。

ui原型設(shè)計工具（圖片來自網(wǎng)絡(luò)）

　　8. Flinto

　　難度：★★★

　　價格:

　　l Flinto Lite（網(wǎng)頁版）- $ 20/月

　　l Flinto for Mac - $99/注冊碼

　　Flinto可以讓你快速的為web、移動app設(shè)計交互。通過拖拽，可以快速的為你的設(shè)計圖設(shè)置跳轉(zhuǎn)和動畫。Flinto提供了常用的轉(zhuǎn)場效果。如果你需要設(shè)計iOS app的交互演示效果，F(xiàn)linto是不錯的選擇。

　　如何做好ui設(shè)計？

　　一、交互方式模擬現(xiàn)實

　　模擬現(xiàn)實的交互方式會給人熟悉親切的感覺，用戶不需要學(xué)習(xí)，便能夠理解。UI設(shè)計中不乏這樣的例子。例如，當(dāng)某個按鈕按下去的時候，呈現(xiàn)比原來更深的顏色，這個就是模擬了現(xiàn)實中光影的效果，不同的高度，對于同一個物體，顏色肯定有所差別。有一個小的手電筒APP，就模擬了現(xiàn)實中的手電筒，所以用戶不必思考它怎么用，因為太熟悉了。用戶第一次接觸，不需要學(xué)習(xí)，毫無約束的使用的應(yīng)用，就是好的應(yīng)用。

　　二、界面設(shè)計簡潔，避免其他不必要的東西

　　界面設(shè)計跟平面設(shè)計有很大不同，平面設(shè)計可以隨自己的喜好或者是需要加入一些裝飾，特別是海報招貼的設(shè)計，需要有一些吸引眼球的內(nèi)容或者是色彩。但是界面對于用戶來說是工具，所以好用是工具所要具備的第一品質(zhì)，為了不干擾用戶，不要添加不必要的裝飾。為了使界面干凈，要適當(dāng)隱藏一些不重要的功能，但是用戶可以通過有效的方法找到這些功能。

　　三、圖標(biāo)的應(yīng)用

　?、俦M量使用通用的圖標(biāo)。用戶已經(jīng)習(xí)慣的圖標(biāo)，我們就不要去試圖更改，使用通用圖標(biāo)會讓用戶更容易使用，也更容易讓用戶對界面產(chǎn)生親切感。一個陌生的界面的接受程度遠(yuǎn)不如一個被大眾熟悉的界面。

　?、趫D標(biāo)的設(shè)計能夠體現(xiàn)所代表事物的特點。當(dāng)然，除了通用圖標(biāo)，我們也要設(shè)計能夠體現(xiàn)軟件特點的新圖標(biāo)。讓軟件有一定的個性和差異性。設(shè)計圖標(biāo)一定能夠代表事物的特點，讓用戶看到圖標(biāo)在不用文字解釋的情況下能夠理解它所代表的含義。這樣的設(shè)計使得軟件生動充滿了活力，提升用戶體驗。

　?、蹐D標(biāo)的設(shè)計不能太過復(fù)雜。雖說圖標(biāo)的設(shè)計能夠體現(xiàn)所代表事物的特點，但是設(shè)計不能太過復(fù)雜，要簡約。好的圖標(biāo)設(shè)計既要有特點，有親和力，又能讓界面很干凈。

　　四、色彩搭配的方式

　　相同的顏色，搭配的比例不同，搭配的位置不同，就會產(chǎn)生不一樣的感情色彩。不要超過3種顏色是所有色彩原則的基礎(chǔ)。

　?、俸诎谆覂?yōu)先。如果你沒有很好的配色，那就先選擇黑白灰吧，如果搭配得當(dāng)，黑白灰的設(shè)計看上去層次也是很豐富的。

　?、谠诤诎谆一A(chǔ)上添加一種色彩。如果你覺得黑白灰單調(diào)，可以在黑白灰的基礎(chǔ)上加入一種色彩，可以在大面積的黑白灰上面加入小面積的顏色。這樣的搭配高雅，又不失活力。

　　③使用同一色系進(jìn)行色彩搭配。如果使用色彩來搭配，那么一個頁面最好使用同一色系的顏色來進(jìn)行搭配，這樣就不會出現(xiàn)不協(xié)調(diào)的問題。

　　④可使用互補(bǔ)色進(jìn)行搭配。只要比例得當(dāng)，互補(bǔ)色的搭配一樣可以收獲很好的視覺效果。

　?、菔褂绵徑M(jìn)行色彩搭配。一種顏色的純度比較高的時候，另一種顏色純度低或名度低的，這樣搭配出的效果會比較好。以上只是一些基礎(chǔ)的色彩搭配，初學(xué)者，如果能做到以上幾點，相信界面設(shè)計也一定不會差。

　　五、使用的語言

　?、僬Z言使用的一致性。同一事物的說明要使用同一個詞語，否則會給用戶造成不必要的困擾。例如，如果你使用了“查找”，就不要在同樣的情況下使用“搜索”。

　?、谡Z言使用的準(zhǔn)確性。使用語言一定要準(zhǔn)確，不要產(chǎn)生歧義，不要讓用戶思考。

　?、壅Z言使用的通俗性。不要使用專業(yè)術(shù)語，是的用戶根本不理解語言的意思，要時刻記住，我們的軟件是給廣大用戶使用的，而不是給我們的專業(yè)技術(shù)人員使用的。

　?、苷Z言使用要體現(xiàn)出情感關(guān)懷。盡量不要使用“警告”“禁止”等不友好的語言，可以使用“溫馨提示”“請不要......”以及一些比較時尚的網(wǎng)絡(luò)用語?？傊?，語言上的使用，要給用戶親切、友好、輕松的感受。

ui原型設(shè)計工具（圖片來自網(wǎng)絡(luò)）

　　UI設(shè)計原則

　　1.簡易性

　　界面的簡潔是要讓用戶便于使用、便于了解產(chǎn)品，并能減少用戶發(fā)生錯誤選擇的可能性。

　　2.用戶語言

　　界面中要使用能反映用戶本身的語言，而不是游戲設(shè)計者的語言。

　　3.記憶負(fù)擔(dān)最小化

　　人腦不是電腦，在設(shè)計界面時必須要考慮人類大腦處理信息的限度。人類的短期記憶有限且極不穩(wěn)定，24小時內(nèi)存在約25%的遺忘率。所以對用戶來說，瀏覽信息要比記憶更容易。

　　4.一致性

　　它是每一個優(yōu)秀界面都具備的特點。界面的結(jié)構(gòu)必須清晰且一致，風(fēng)格必須與產(chǎn)品內(nèi)容相一致。

　　5.清楚

　　在視覺效果上便于理解和使用。

　　6.用戶的熟悉程度

　　用戶可通過已掌握的知識來使用界面，但不應(yīng)超出一般常識。

　　7.從用戶習(xí)慣考慮

　　想用戶所想，做用戶所做。用戶總是按照他們自己的方法理解和使用。

　　通過比較兩個不同世界(真實與虛擬)的事物，完成更好的設(shè)計。如：書籍對比竹簡。

　　8.排列

　　一個有序的界面能讓用戶輕松的使用。

　　9.安全性

　　用戶能自由的作出選擇，且所有選擇都是可逆的。在用戶作出危險的選擇時有信息介入系統(tǒng)的提示。

　　10.靈活性

　　簡單來說就是要讓用戶方便的使用，但不同于上述。即互動多重性，不局限于單一的工具(包括鼠標(biāo)、鍵盤或手柄、界面)。

　　ui原型設(shè)計工具有哪些？如何做好ui設(shè)計？讀完上面相信大家對ui原型設(shè)計工具有所了解了，如果你想知道這些工具的使用方法，可以向faceui咨詢，他們會讓你學(xué)會UI設(shè)計。