基礎(chǔ)知識,分享常用的對齊技巧

2023-12-11 17:17:07 來源/作者: / 己有:1人學(xué)習(xí)過

在對齊的方式里我們找到了規(guī)律,層級關(guān)系,框框框!

通過對其方式來區(qū)分內(nèi)容的層級關(guān)系,這就是隱形對齊框的作用。將信息層級通過這種方式羅列在用戶眼前。讓用戶最近視角展示產(chǎn)品的核心信息。提煉出用戶在場景中最為關(guān)注的訴求,解決用戶的問題。

基礎(chǔ)知識,分享常用的對齊技巧

對齊也是有層次的。有左對齊、右對齊、居中對齊。(都懂都懂,就是用不好)左對齊和右對齊主要是對屏幕內(nèi)容的規(guī)整性,居中對齊則是對內(nèi)容文本的劃分。

三、常用間距

基礎(chǔ)知識,分享常用的對齊技巧

將框框框融入到APP界面中,將主要的,用戶想找的內(nèi)容突出出來。

在設(shè)計中一般間距設(shè)定的大小單位10px,這樣更容易統(tǒng)一整個畫面的一致性。

基礎(chǔ)知識,分享常用的對齊技巧

在界面中常用間距來劃分內(nèi)容的層級關(guān)系,讓內(nèi)容與導(dǎo)航取分出來。

在導(dǎo)航上的左右間距是20px,而在內(nèi)容列表信息程序時左右間距調(diào)整到了30px。

通過這種方式區(qū)分了上下層級的關(guān)系。

那么在主文本信息中還將上下間距統(tǒng)一一致都設(shè)定為30px,使整個內(nèi)容的邊框看起來更為整體舒服。

我們常會設(shè)計到雙行文字的列表,QQ的設(shè)計是120px,隨著設(shè)備屏幕的變大,更加注重了頁面的留白。為了加強內(nèi)容的突出性。我在設(shè)計中高度設(shè)定為130px

基礎(chǔ)知識,分享常用的對齊技巧

再往深的走,界面中還會有其他的信息。如時間、消息氣泡等。它們的對齊模式會根據(jù)字號大小進行控制。

為了保證內(nèi)容閱讀的舒適性,字號大小不一致的文本我們還會用到居中對齊的方式(比如,上圖中的主標(biāo)題和時間的對齊方式),讓內(nèi)容顯得更為規(guī)整。

總之,以內(nèi)容為中心的設(shè)計能讓用戶快速找到想要的。使用正確的對齊和間距,能讓界面更為整齊,信息更為明確。

今天就到這里,休息休息,休息一大會兒,然后多看多分析,多交流。