在UI的設(shè)計(jì)過程中,有很多技巧并不需要很深厚的設(shè)計(jì)知識,但是它們能讓你的UI和網(wǎng)頁界面看起來有明顯的提升改進(jìn)設(shè)計(jì)這件事情經(jīng)驗(yàn)和技巧往往能讓人少走彎路。下面7條經(jīng)驗(yàn)應(yīng)該可以給大家一些幫助!
1. 按鈕色彩凸顯重要性
在給用戶提供多個選擇的時候,可以通過色彩所傳遞的情緒是積極還是消極的,來簡單快速地進(jìn)行設(shè)計(jì)。
實(shí)際上,紅色和綠色按鈕的色彩含義,已經(jīng)橫跨物理世界和數(shù)字設(shè)計(jì)領(lǐng)域,我們每天在很多實(shí)體產(chǎn)品上也能看到類似的設(shè)計(jì),包括交通上的紅綠燈,警告標(biāo)識,以及實(shí)體按鈕。
綠色表示通行,紅色表示禁止。如果用戶需要購買一個漏斗,你希望感興趣的用戶趕緊點(diǎn)擊,而不是取消。
另外,如果你的網(wǎng)站或者 APP 涉及到重要性不同的若干交互,除了按鈕都要標(biāo)識出相應(yīng)的文本標(biāo)簽內(nèi)容以外,還可以借助色彩填充與否來進(jìn)一步區(qū)分層級結(jié)構(gòu):
這是一個簡單的示例,有色彩填充的按鈕、幽靈按鈕(無色彩填充、有邊框)以及無邊框無填充按鈕來區(qū)分。
而在少數(shù)情況下,對于系統(tǒng)有重要影響的、破壞性的或者限制性的按鈕,也應(yīng)該突出顯示,但是可以使用紅色來進(jìn)行強(qiáng)調(diào)和警告。這個時候,相對的「非負(fù)面」的按鈕則被視作為重要性較低的操作:
簡而言之,實(shí)際上用戶用來區(qū)分按鈕的核心靠的是感知而非復(fù)雜邏輯判斷,設(shè)計(jì)的基本規(guī)則在上面,但是更重要的是要基于情緒和感知來進(jìn)行設(shè)計(jì)。
2. 用字重和明暗來區(qū)分層級
尤其是在構(gòu)建文本內(nèi)容的視覺層級的時候,可用到的屬性很多,只使用大小差異來構(gòu)建就顯得過于單一了。
在很多時候,可以借助色彩、字重、明暗來進(jìn)行區(qū)分。我們可以讓更重要的文本更大、字體更粗、色彩更加鮮明,或者使用更深的黑色來呈現(xiàn)。
綜合地使用這些屬性來構(gòu)建視覺層級。
3. 用留白來隔離元素
兩個元素互不相關(guān),如果想將它們分隔開來,使用分割線似乎是一件理所當(dāng)然的事情?當(dāng)然可以,但是這種方式真的是非常過時且笨拙的一種呈現(xiàn)方式。你需要的是更好、更優(yōu)雅、更貼合當(dāng)下的一種呈現(xiàn)方式。
不是簡單地使用分割線,而是使用留白,或者說負(fù)空間來間隔就可以了。分割線在很大程度上是丑陋且難以駕馭的視覺噪音,相對而言留白則好了很多。
多數(shù)情況下,刪除分隔線條是比較快速的方法,當(dāng)然更多的時候需要你適當(dāng)?shù)卣{(diào)整一下留白的大小。
使用分割線來分隔內(nèi)容,不僅會讓掃視頁面花費(fèi)更長的時間,而且增加的信息噪音會影響整體的層次結(jié)構(gòu)。
4. 用陰影替代邊框
想要凸顯一些元素,并不一定需要依靠描邊。使用陰影則可以起到同樣的效果,單獨(dú)使用則會顯得更加整潔。描邊+陰影則會顯得過于雜亂。
使用相對不那么具有侵略性的小陰影無疑讓效果更加輕松,看起來也不會突兀。
5. 用色條提升視覺調(diào)性
如果覺得內(nèi)容區(qū)塊過于單調(diào),可以根據(jù)你的目的來強(qiáng)化這一區(qū)塊的視覺屬性。在內(nèi)容區(qū)的一邊加上色條能夠在提升視覺屬性的同時,賦予這一區(qū)塊內(nèi)容以情緒。
色條可以是單色的,也可以是漸變的,這取決于你想傳達(dá)什么樣的視覺體驗(yàn)。這個色條還可以具備良好的功能性。當(dāng)然,這很大程度是用在相對比較素的頁面上的,如果頁面本身已經(jīng)很花哨了,就不太用得上。
比如使用紅色和綠色來標(biāo)識不同的狀態(tài),也可以用色條來標(biāo)識出被觸發(fā)的 Tab 或者控件。
6. 用背景色區(qū)分區(qū)塊
其實(shí),同樣是為了進(jìn)行區(qū)分內(nèi)容區(qū)塊和層級,這個方法同樣優(yōu)雅而快速,幾乎可以算是毫不費(fèi)力的一種設(shè)計(jì)技巧。
為了區(qū)分兩個不同區(qū)塊的元素,簡單地使用不同的背景來進(jìn)行區(qū)分也可以,本質(zhì)上,它采用的類似卡片式設(shè)計(jì)的思路――用不同的卡片來歸類內(nèi)容。
相對而言,使用有差異但是不那么顯著的不同色塊來作為背景,在保證整體整潔的同時,起到了區(qū)分的作用。
7. 「字」盡其用
誰不喜歡漂亮的字體呢?當(dāng)然都喜歡,但是字體的功用其實(shí)各不相同。從呈現(xiàn)正文的強(qiáng)可讀性文本,到裝飾性極強(qiáng)的視覺化字體,各種不同的字體需要應(yīng)對不同的功能。
簡單看看幾種不同類型的字體:
1. 襯線字體:Serif 本身就是襯線的意思,這樣的字體字符的末尾通常是會有小的裝飾性的襯線。襯線除了裝飾性以外,還能強(qiáng)化字體的可讀性。常見的襯線字體:Georgia,Times New Roman,Cambria。
2. 非襯線字體:也就是 Sans-Serif 字體,它相對而言更加現(xiàn)代,襯線被去掉之后,線條感更強(qiáng),更加干凈,也更加貼合數(shù)字時代的一些顯示需求。常見的非襯線字體:Helvetica,Montserrat,Gotham。
人們通常會認(rèn)為,襯線字體更加適宜長時間閱讀,它也更多地運(yùn)用在印刷品上。然而襯線字體的襯線和邊角大多更加銳利,在一定程度上會被視作為視覺噪音。在屏幕分辨率尚且達(dá)不到要求的時代,襯線字體的顯示問題很大。當(dāng)然,如今屏幕分辨率提高起來之后,這個問題幾乎不存在了,只是在小字號和低分辨率和小屏幕上,依然存在這個問題。
3. 手寫字體:手寫字體通常被認(rèn)為是手寫風(fēng)格的字體,在呈現(xiàn)的時候,常常會有連寫的筆畫,更貼近傳統(tǒng)的書寫字體所呈現(xiàn)出來的效果。手寫字體更加隨意和有趣。常見的手寫字體包括:Alex Brush,Great Vibes,Sofia。
4. 展示性字體:展示性字體是一個功能導(dǎo)向型的分類,通常指的是用來作為標(biāo)題展示、用于海報(bào)、徽章等地方的字體,它們表現(xiàn)力更強(qiáng),視覺特征更突出,直言不諱地說就是為了吸引用戶的注意力。常見的展示性字體包括:Algerian,Curlz,Gigi,Umbra。
在網(wǎng)頁設(shè)計(jì)中,絕大多數(shù)情況下都只會使用襯線字體和非襯線字體兩種,在英文網(wǎng)站當(dāng)中,通常會采用一種襯線字體+一種非襯線字體的搭配方式。注意,如果有不同粗細(xì)和字重的字體,使用同一字體族中字體為好。在中文當(dāng)中,開源且可以免費(fèi)商用的「思源黑體」和「思源宋體」是一個設(shè)計(jì)中非常常見的選擇。
在進(jìn)行視覺設(shè)計(jì)的時候,我堅(jiān)持使用2種字體,極少會使用3種字體,后者最多會在強(qiáng)調(diào)視覺的商業(yè)或者藝術(shù)性項(xiàng)目當(dāng)中使用,比如 Banner 和海報(bào)。
本文鏈接:
本文章“快速改善UI視覺體驗(yàn)的7個小技巧,果斷收藏!”已幫助 59 人
免責(zé)聲明:本信息由用戶發(fā)布,本站不承擔(dān)本信息引起的任何交易及知識產(chǎn)權(quán)侵權(quán)的法律責(zé)任!
本文由賦能網(wǎng) 整理發(fā)布。了解更多培訓(xùn)機(jī)構(gòu)》培訓(xùn)課程》學(xué)習(xí)資訊》課程優(yōu)惠》課程開班》學(xué)校地址等機(jī)構(gòu)信息,可以留下您的聯(lián)系方式,讓課程老師跟你詳細(xì)解答:
咨詢熱線:4008-569-579