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

2024-01-16 17:32:17 來(lái)源/作者: / 己有:0人學(xué)習(xí)過(guò)

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

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

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

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

三、常用間距

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

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

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

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

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

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

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

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

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

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

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

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

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

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