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

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

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

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

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

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

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

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

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

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

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

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

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

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

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