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

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

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

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

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

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

在界面中常用間距來劃分內(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

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

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

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

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