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

有對(duì)齊的意識(shí)，也進(jìn)行對(duì)齊，但為什么不夠高大上呢？設(shè)計(jì)出來的效果怪怪的……

一般設(shè)計(jì)師會(huì)這樣設(shè)計(jì)，大感覺上也沒有什么問題。（下圖）

其實(shí)對(duì)齊也是有規(guī)律的，善于發(fā)現(xiàn)設(shè)計(jì)中的聯(lián)系。

我們來看一下其他幾個(gè)用戶體驗(yàn)不錯(cuò)的輸入框設(shè)計(jì)，憑啥就這么舒服呢？和大家解構(gòu)一下它們的設(shè)計(jì)。

小米的登錄頁。

在小米的登錄頁設(shè)計(jì)中，主標(biāo)題與副標(biāo)題進(jìn)行了左對(duì)齊。

輸入框提示文字與輸入框基于中心線對(duì)齊，讓提示信息和輸入框看起來更為整體舒服。

內(nèi)容劃分明確，明確了哪些是需要輸入的，哪些只是描述。

蘋果的登錄頁

在蘋果的登錄頁面中更為講究，標(biāo)題和輸入框利用了不同對(duì)齊方式拉開了層次。

請(qǐng)登錄標(biāo)題和取消按鈕是左對(duì)齊的，而輸入框與提示文字則是居中對(duì)齊的。

將用戶的視線引入到了輸入框的上面，從而加強(qiáng)了提示文字與輸入框之間的關(guān)系，并用大間距拉開了標(biāo)題和內(nèi)文的層次。