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è)計。