在創(chuàng)建美觀高效的UI時(shí),您需要花費(fèi)大量時(shí)間來拋光細(xì)節(jié)并在過程中不斷進(jìn)行調(diào)整,以使您的客戶,用戶和您自己感到滿意。因此很多UI設(shè)計(jì)師,在進(jìn)行UI設(shè)計(jì)時(shí),會(huì)使用些小技巧可以快速地改善界面設(shè)計(jì)的視覺效果和用戶體驗(yàn)。那么快速提升UI設(shè)計(jì)效果的小技巧有哪些?下文為您總結(jié)了14個(gè)常見的小技巧,希望可以幫助到有需求的人。
1、微調(diào)明度讓文本更顯輕盈
在長篇幅文本當(dāng)中,如果文本字體使用「常規(guī)」的粗細(xì),視覺上依然顯得有點(diǎn)過于重,可以通過微調(diào)它的色彩,選擇諸如#4F4F4F這樣的色彩,讓它對眼睛更加友好、舒適。
2、字號(hào)越小,行高越大
在文本排版當(dāng)中,字號(hào)和行高并不是等比縮放的,當(dāng)字號(hào)縮小的時(shí)候,行高不要等比例縮小,而是要把字號(hào)和行高的比例提高。同理,當(dāng)字號(hào)放大的時(shí)候,對應(yīng)的行高應(yīng)該比按比例放大之后的行高要小。
3、基于色調(diào)和飽和度來豐富配色
在很多設(shè)計(jì)當(dāng)中,你并沒有必要用很多不同的色相來豐富配色方案,基于一個(gè)基礎(chǔ)色,然后微調(diào)色彩的色調(diào)和飽和度,就可以快速搭配出合理且協(xié)調(diào)的視覺效果,增強(qiáng)整個(gè)設(shè)計(jì)的一致性。
4、突出最重要的元素
凸顯最重要的元素,讓視覺中心明顯。通過調(diào)整字體尺寸、字重、色彩以及和背景的對比度,可以讓這些元素顯得明顯。只需簡單的調(diào)整,即可達(dá)到良好的用戶體驗(yàn)。
5、確保圖標(biāo)樣式高度一致
在用戶界面中使用圖標(biāo)的時(shí)候,請使用一致的圖標(biāo),確保它們在大小尺寸、視覺風(fēng)格、筆觸粗細(xì)、填充樣式都一致,不要混搭。
6、始終讓行為召喚語句在最醒目的位置
這應(yīng)該是常識(shí)吧?不過在信息過多、或者摻雜過多意圖的頁面當(dāng)中,這種常識(shí)也常常被忽略。同樣的,通過色彩、大小和樣式對比,讓行為召喚語句盡可能凸顯。盡量不要總依賴圖標(biāo)這樣的元素,使用文本標(biāo)簽會(huì)更加顯著一些。
7、為表單報(bào)錯(cuò)信息提供視覺指引
在用戶填寫表單的時(shí)候,如果出錯(cuò),用戶可能不知道問題出現(xiàn)在哪里,通過明確的視覺指引,一方面告知用戶出錯(cuò)的情況,另一方面,讓用戶明白出錯(cuò)的原因,對于整個(gè)流程好處更明顯。
8、凸顯菜單中最常用的功能和操作
在設(shè)計(jì)程序菜單的時(shí)候,優(yōu)先級(jí)最高的功能和選項(xiàng)應(yīng)該高亮顯示,在屏幕上保持顯眼,比如「上傳圖片」等等。
9、從產(chǎn)品圖中提取背景色
基于你的核心產(chǎn)品圖片的色彩來取色,用于背景、文本和其他的的視覺元素,然后合理地分別給不同的元素賦予不同的視覺效果。而這其中,背景色的一致性能夠給整個(gè)視覺帶來最直接、最直觀的影響。
10、使用更大的可點(diǎn)擊區(qū)域
在給移動(dòng)端設(shè)計(jì)UI界面的時(shí)候,這些控件和可交互的元素要盡可能地大一點(diǎn),確保用戶的手指能夠準(zhǔn)確地點(diǎn)擊到所看到的元素。使用按鈕控件替代文本鏈接,結(jié)合指引性的圖標(biāo),并且確保尺寸足夠大。在iOS中,最小的按鈕尺寸為44×44pt,在Android當(dāng)中,為48×48dp。
11、確保淺色文本和圖片之間的對比度
淺色文本和淺色圖片之間的對比度可能會(huì)不足,這個(gè)時(shí)候,可以在文本底下增加一個(gè)深色的半透明疊加層,從而達(dá)到提升對比度的效果,并且這種設(shè)計(jì)的好處在于,當(dāng)你更換背景的時(shí)候,前景文本可以不用進(jìn)行調(diào)整。
12、一組超贊的標(biāo)題英文字體
這組字體是我在過往的設(shè)計(jì)項(xiàng)目當(dāng)中總結(jié)出來的,特別適合用來作為標(biāo)題來使用的字體。
13、一組很棒的正文英文字體
在長篇幅的文本當(dāng)中,使用這些久經(jīng)驗(yàn)證的字體,可以給用戶帶來極為突出的閱讀體驗(yàn)。
14、給進(jìn)度條增加更加清晰的信息指引
這可能是最不應(yīng)該精簡的組件了,盡可能在進(jìn)度條,尤其是下載進(jìn)度條當(dāng)中,提供更多的信息,比如下載的進(jìn)度和百分比,并不復(fù)雜,但是這卻是用戶最想獲得的信息。
上述就是關(guān)于快速提升UI設(shè)計(jì)效果的小技巧有哪些的全部內(nèi)容介紹,想了解更多關(guān)于UI設(shè)計(jì)的信息,請繼續(xù)關(guān)注中培偉業(yè)。