別忽略簡單的排版對齊,好設計從這裡開始……

一、像素單位

要講對齊那麼對於單位px的科普必不可少,作為一個優秀的設計師必須要練就一雙像素眼。

別忽略簡單的排版對齊,好設計從這裡開始……

一般我們常用的軟件如Photo shop新建的時候一定會有單位選項。

別忽略簡單的排版對齊,好設計從這裡開始……

一般常用單位是像素(px)和點(pt),那麼這兩個單位究竟有啥區別呢?

像素(pixel)

px ,像素英文pixel的簡寫。是屏幕上所顯示的最小單位,當作品主要供屏幕瀏覽,比如:banner、App界面、網頁時使用px作為單位可以精確的控制畫面顯示效果,但在不同分辨率的屏幕上像素的大小也會有差別。

別忽略簡單的排版對齊,好設計從這裡開始……

retina屏與非retina屏顯示對比

點(point)

pt ,點英文point的簡寫。pt一般適用於打印輸出,如word等辦公軟件。

簡單來說就是當作品用於屏幕瀏覽時使用px比較容易掌控細節,而當作品需要打印輸出時則pt比較適用。

二、界面設置與插件

工欲善其事必先利其器,對齊必備工具:網格。

界面設置

Ps屬性欄上有各種對齊按鈕,可以將按鈕、文字、圖形一鍵對齊。

別忽略簡單的排版對齊,好設計從這裡開始……

ctrl+K調出首選項可以設置網格參數,大大方便了用戶對齊界面元素。注:設置完需要在菜單欄的視圖-顯示中勾選上網格選項。

插件推薦

GuideGuide是一款網格插件,其實本質上是和ps自帶網格的功能是差不多的,它的強大之處就在於只要輸入一些數字,它就會利用PS裡面的輔助線自動的在你的文檔中劃分好網格。大大節約了時間。

別忽略簡單的排版對齊,好設計從這裡開始……

三、常用對齊形式

左對齊

左對齊在畫面上形成了一條隱形的線,使畫面更加精緻。並且大多數人習慣從左到右的閱讀順序,所以可以大大提高可讀性。

別忽略簡單的排版對齊,好設計從這裡開始……

別忽略簡單的排版對齊,好設計從這裡開始……

居中對齊

居中對齊是初學者常用的對齊方式,它會創建一種更正式、更穩重的外觀,通常會顯得中規中矩。少量文本可以居中對齊,對易讀性的影響不大,如果大量文本則不合適。會因為邊界的不清晰影響閱讀。

別忽略簡單的排版對齊,好設計從這裡開始……

別忽略簡單的排版對齊,好設計從這裡開始……

除了以上提到的兩種對齊方式,還有居右對齊、頂端對齊、底部對齊,感興趣的小夥伴可以自己瞭解下,這裡就不單獨說了。

四、實例分析

除了要有對齊的意識,如何利用對齊和字號大小對比來劃分層次對用戶進行視覺引導從而提高用戶體驗也是非常重要的。

此網頁登錄頁面有對齊,但是登錄頁面本身面積過於小,內容過於擁擠。層級對比也非常弱(還記得對比金句:如果不同就讓它們截然不同嗎?)以至於視線沒有落腳點。登錄和註冊分為兩個頁面過於繁雜。

別忽略簡單的排版對齊,好設計從這裡開始……

而Dribbble登錄頁,將所有功能都井然有序的安排在一個頁面中。

別忽略簡單的排版對齊,好設計從這裡開始……

主標題與副標題還有註冊提示居中對齊,需要輸入部分與推特登錄說明分列左對齊,巧妙地使用對齊將需要輸入的部分與說明的部分清晰的劃分出來。無形中提升了用戶體驗。

別忽略簡單的排版對齊,好設計從這裡開始……

蘋果官網登錄頁也是一樣的,擁有非常好的用戶體驗。

別忽略簡單的排版對齊,好設計從這裡開始……

所有有關聯的元素都清晰的排列在畫面上,整個層級關係也非常明顯

別忽略簡單的排版對齊,好設計從這裡開始……

這兩個網站登錄頁的層級劃分都非常明顯,輸入框—說明性文字—其它內容。

最後

說了這麼多,也舉了例子。大家有GET到對齊在用戶體驗中的重要地位嗎?優秀的設計師們之所以優秀就是因為他們在作品中運用了這些神奇的法則而讓他們的作品擁有了良好的用戶體驗。所以說多讀書多分析優秀作品為己所用才是最快捷的進步方式!


分享到:


相關文章: