你是否有過(guò)這樣的經(jīng)歷:設(shè)計(jì)美觀(guān)、高效和可用的UI界面需要花費(fèi)很長(zhǎng)的時(shí)間,還需要來(lái)回多次的設(shè)計(jì)修改。很多小伙伴在初學(xué)UI設(shè)計(jì)時(shí),都會(huì)存在許多困惑,顯得特別迷茫。其實(shí)做UI設(shè)計(jì)是有章可循的,小編總結(jié)了一些實(shí)用的小技巧,這些技巧是新手小白進(jìn)階資深UI設(shè)計(jì)師必備的技能!
1. 用圖像引導(dǎo)用戶(hù)
美麗的圖像能夠在視覺(jué)上增強(qiáng)界面,但也可用于將注意力引導(dǎo)到頁(yè)面或屏幕中的特定位置。如果圖像上包含一個(gè)人,那用戶(hù)會(huì)下意識(shí)地跟隨那個(gè)人的視線(xiàn)。這為UI設(shè)計(jì)師提供一個(gè)機(jī)會(huì),可以利用這個(gè)特點(diǎn)將用戶(hù)注意力巧妙地引導(dǎo)到號(hào)召性用語(yǔ)或有用的信息上。
2. 巧妙地使用留白空間
UI設(shè)計(jì)人員希望在每個(gè)界面中塞入盡可能多的信息是一個(gè)常見(jiàn)的錯(cuò)誤。這可能會(huì)導(dǎo)致用戶(hù)視覺(jué)過(guò)載,并最終讓那些注意力被吸引到頁(yè)面或屏幕上太多不同區(qū)域的用戶(hù)不知所措。頁(yè)面上的元素需要一些空間來(lái)呼吸。如果你在一個(gè)小空間里塞滿(mǎn)了很多設(shè)計(jì)元素,那么它們就會(huì)相互抵消,沒(méi)有一個(gè)元素會(huì)脫穎而出。
3. 使用網(wǎng)格
很多UI設(shè)計(jì)師在剛開(kāi)始做設(shè)計(jì)的時(shí)候,不知道要把每一個(gè)元素放在頁(yè)面的哪個(gè)位置,才能讓它看起來(lái)好看。建議你可以使用網(wǎng)格來(lái)快速提高你的設(shè)計(jì)質(zhì)量。通過(guò)使用網(wǎng)格,你可以確保不同元素之間的間距相同,因此它們都可以一起創(chuàng)建一個(gè)有凝聚力的構(gòu)圖。
當(dāng)然,也有無(wú)網(wǎng)格設(shè)計(jì)。但就像在生活中一樣,你首先需要了解規(guī)則才能成功打破它們。因此,首先掌握網(wǎng)格系統(tǒng),然后再進(jìn)行打破網(wǎng)格的設(shè)計(jì)是一名UI設(shè)計(jì)師必經(jīng)的過(guò)程。
4. 巧用配色
掌握色彩理論及其在實(shí)際設(shè)計(jì)中的應(yīng)用需要大量的努力和多年的實(shí)踐。但對(duì)于剛?cè)腴T(mén)的UI設(shè)計(jì)師來(lái)說(shuō),我們必須多加練習(xí)。所以,一開(kāi)始在你的設(shè)計(jì)中只使用最少量的顏色。嘗試混合和搭配不同的顏色,會(huì)使你的設(shè)計(jì)看起來(lái)很漂亮。建議以70–30–10的比例使用顏色。這里70%的顏色將是你的背景顏色,例如白色。30%的顏色將是你的輔助顏色,例如黑色。10%的顏色將是你用來(lái)突出顯示設(shè)計(jì)中的按鈕和其他號(hào)召性用語(yǔ)元素的顏色。
你也可以嘗試僅使用2種顏色的組合。就像字體一樣,同樣的原則也適用于顏色的使用。首先掌握使用1或2種顏色,然后慢慢增加設(shè)計(jì)中的顏色數(shù)量。
5. 保持一致的視覺(jué)樣式
在進(jìn)行UI設(shè)計(jì)時(shí),要保持一致的視覺(jué)樣式。例如,同一個(gè)產(chǎn)品設(shè)計(jì)中的圖標(biāo),要確保它們具有相同的輪廓、填充、比重等。圖標(biāo)通過(guò)視覺(jué)手段為用戶(hù)提供必要的信息,所以務(wù)必要保證功能相同的圖標(biāo)元素一致,外觀(guān)視覺(jué)一致。
在團(tuán)隊(duì)中,保持團(tuán)隊(duì)項(xiàng)目的UI視覺(jué)一致性同樣非常重要。UI設(shè)計(jì)師不是獨(dú)立個(gè)體,更是團(tuán)隊(duì)中的一員。因此,建議使用具有團(tuán)隊(duì)組件資源庫(kù)的設(shè)計(jì)工具來(lái)開(kāi)展你的產(chǎn)品設(shè)計(jì)。
相關(guān)文章
關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程
掃一掃快速進(jìn)入
千鋒移動(dòng)端頁(yè)面
掃碼匿名提建議
直達(dá)CEO信箱