基礎知識,分享常用的對齊技巧

2023-11-03 17:33:31 來源/作者: / 己有:2人學習過

基礎知識,分享常用的對齊技巧

二、解構分析

有對齊的意識,也進行對齊,但為什么不夠高大上呢?設計出來的效果怪怪的……

一般設計師會這樣設計,大感覺上也沒有什么問題。(下圖)

基礎知識,分享常用的對齊技巧

其實對齊也是有規(guī)律的,善于發(fā)現設計中的聯系。

我們來看一下其他幾個用戶體驗不錯的輸入框設計,憑啥就這么舒服呢?和大家解構一下它們的設計。

小米的登錄頁。

基礎知識,分享常用的對齊技巧

在小米的登錄頁設計中,主標題與副標題進行了左對齊。

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

內容劃分明確,明確了哪些是需要輸入的,哪些只是描述。

基礎知識,分享常用的對齊技巧

蘋果的登錄頁

基礎知識,分享常用的對齊技巧

在蘋果的登錄頁面中更為講究,標題和輸入框利用了不同對齊方式拉開了層次。

請登錄標題和取消按鈕是左對齊的,而輸入框與提示文字則是居中對齊的。

將用戶的視線引入到了輸入框的上面,從而加強了提示文字與輸入框之間的關系,并用大間距拉開了標題和內文的層次。

基礎知識,分享常用的對齊技巧

基礎知識,分享常用的對齊技巧