在設計中，相鄰的元素比分開較遠的元素會更加吸引人注意，在做設計閱讀順序的時候，利用設計分組是一個非常有效的方法，將不同信息進行視覺間距分組，能提升用戶對于內容上的理解。
如上圖slack的設計，插畫引導圖和底部按鈕上面文字拉開了距離，使得內容更聚焦。第二個界面的頂部頭像和下面的文字也是通過分組形成了對比。
stadium-live的產品設計上，登錄頁面按鈕為一組，頂部品牌LOGO和slogan一組，人物為一組，每組信息之間分組非常清晰，每一組都不會對對方視覺互相干擾，間距非常合理，用戶閱讀從一組信息到另外一組信息也很清晰。
后面兩張頁面也是如此，頂部的導航，和下面表單信息，以及頭像和底部按鈕，通過分組處理，內容更加符合用戶的視覺動線。
在球員定制的處理上，最左邊那張圖，通過卡片和線條分組處理，從視覺上很清晰的看見排名，哪個球隊和哪個球隊之間比賽。
當一組信息比較接近，證明必須是有關聯(lián)的，如果距離比較遠，這意味著這組信息和他們是不同的，簡單來說，通過鄰近性，通過分組創(chuàng)造這些關系，為信息帶來層次。
二、運用空白建立層次
classpass的設計不會使用太多的視覺元素，而是運用留白把內容進行分組，每個頁面的留白恰到好處，同時留白本身就是對信息進行分組，所以頁面中減少了很多線條使用，頁面會更加干凈有品質感。
must是一款電影軟件，整體設計非常雜志感，頁面就是通過圖文處理，以及留白空間的處理，增加對比，基本產品體驗你不會感覺到視覺負擔，元素之間的信息組織的非常清晰。
在電影展示頁面，信息的處理，以及打分設計上，重復運用留白來處理信息層級，在設計中，當你元素周圍留白越多，它產品的注意力也越強，如右邊的打分頁面，幾乎所有焦點都在這個彈窗上。
artsy是一款藝術品電商網站，整個app的設計也充滿了藝術氣息，每次我設計找不到感覺時候就會去打開看看，里面的排版，還有設計的細節(jié)處理，都值得我學習，但我喜歡的還是他對于板式和留白空間的處理。
在首頁設計，我最喜歡他相框的設計，就像欣賞美術館的一幅畫，頁面留白也非常大，襯線體和非襯線體的對比也運用的非常好。
整個APP的設計被大量留白包圍，雖然現在流行各種質感，各種光感，C4D的設計，很多設計師認為設計越多越好，但是大量視覺元素會讓頁面過于飽和，如果沒有很好的視覺引導，用戶會感到不知所措。
三、運用氛圍建立層次
有設計感的紋理從視覺感受上比簡約主義更能吸引用戶注意力，但是背景紋理運用不能為了設計而設計，而是需要和產品內容有關系。比如紋理和文字內容，和信息是密切相關的。如上圖，是一款打車軟件，背景結合了打車的地圖，公路線路，用車場景，讓頁面對比和設計層次更加突出。
jour這款產品在設計上，背景通過有層次的氛圍紋理和質感，使得頁面氛圍感很強，層次細節(jié)更加豐富，當然在設計的時候切忌對于設計氛圍過度運用，那樣會讓用戶分散注意力。
其它場景上氛圍紋理的運用，卡片上通過系列插畫的塑造，頁面雖然有很多插畫，但是頁面平衡感同樣重要。需要考慮用戶在界面看見的和其它頁面視覺感受是一致的。
氛圍除了圖形，其實色彩也是很重要一種方式，我很喜歡的ASANS的設計，在背景上就是運用了一些幾何圖形的肌理效果讓整個空間感更加豐富，這些幾何圖形豐富細節(jié)同時也讓整個內容更加凸顯。
如上圖是他里面一個注冊登錄場景，在界面中，除了背景灰色底紋通過幾何圖形來烘托視覺層次，同時在插畫上也是非常巧妙，用戶輸出，完成后，整個插畫到品牌圖形的連貫變化體驗非常好。
Sift是一款新聞類閱讀產品，這類型產品設計一般就是文字排版，設計簡約為主，但是sift運用了一種大膽的設計，背景氛圍上采用一些點線底紋的肌理效果，和內容結合的很平衡。
Lugg是一款貨車APP有點像國內的貨拉拉，整個設計也氛圍感非常強，運用的全插畫設計，在頁面每個細節(jié)，從引導頁，讓頁面核心功能設計都能看見完整插畫的運用，我目前我看見運用插畫氛圍作為主設計最好的產品。
感興趣的同學可以去美國蘋果商店去下載使用，頁面中增加氛圍是一種增加層次很好的方式，但是同時需要主要好視覺平衡，不要做到本末倒置。
四、運用襯線字體和無襯線字體建立層次
字體對比，運用襯線字體和非襯線字體對比是非常常用的方式，如上圖運用了Adelle Sans字和Tiempos字體這兩款字體的對比讓頁面內容結構非常清晰。
上圖官網的設計，干凈的排版，通過字體大小，字型進行對比，體現出視覺層次。
字體的選擇本身也是設計中很重要的因素，好的設計不僅能提升設計品質，同時也能讓頁面視覺層次更加分明。
五、結語
回歸設計本質，其實我一直覺得設計這個工作就是一個翻譯官，我們的使命是讓用戶使用產品過程中更加易懂，同時我們能方便地解決他們的問題，而不僅僅是專注在界面美觀本身上，今天分享的這些提升設計層次的一些技巧，也是為了讓頁面有更好的體驗。
作者：叮當貓
轉載請注明：學UI網》這么好的設計排版技巧，不看虧了?。?a style="color:#428BCA;text-decoration-line:none;">
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( tweetduck.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司