運用分組建立層次 

在設計中，相鄰的元素比分開較遠的元素會更加吸引人注意，在做設計閱讀順序時，利用設計分組是一個非常有效的方法，將不同信息進行視覺間距分組。能提升用戶對于內容上的理解。

▲如上圖slack的設計，插畫引導圖和底部按鈕上面文字拉開了距離，使得內容更聚焦。第二個界面的頂部頭像和下面的文字也是通過分組形成了對比。

▲stadium-live的產(chǎn)品設計上，登錄頁面按鈕為一組，頂部品牌LOGO和slogan一組，人物為一組，每組信息之間分組非常明確，互相都不會對對方視覺產(chǎn)生干擾，后面兩張頁面也是如此，頂部的導航，和下面表單信息，以及頭像和底部按鈕，通過分組處理，內容更加符合用戶的視覺動線。

▲在球員定制的處理上，最右邊那張圖，通過卡片和線條分組處理，從視覺上很清晰的看見排名；哪兩個球隊之間正在進行比賽。

▲當一組信息比較接近時，證明他們是有關聯(lián)的，如果距離比較遠，這意味著這組信息和他們是不同的，簡單來說，通過鄰近性原則創(chuàng)造這些關系，為信息帶來層次。

運用空白建立視覺層次 

空白也是視覺設計元素，并不是留白就是空著，如果設計中留白運用合理，可以幫助用戶理解很多信息，因此任何設計都需要通過適當?shù)呢摽臻g來傳遞信息。

▲classpass的設計不會使用太多的視覺元素，而是運用留白把內容進行分組，每個頁面的留白恰到好處，同時留白本身就是對信息進行區(qū)分，所以頁面中減少了很多線條使用，會更加干凈有品質感。

▲must是一款電影軟件，整體設計非常雜志風，頁面就是通過圖文處理，以及留白空間的處理，增加對比，基本產(chǎn)品使用過程中你不會感覺到視覺負擔，元素之間的信息組織的非常清晰。

▲在電影展示頁面，信息的處理，以及打分設計上，多次運用留白來處理信息層級，在設計中，當你元素周圍留白越多，它產(chǎn)生聚焦注意力的作用也越強，如右邊的打分頁面，幾乎所有焦點都在這個彈窗上。

網(wǎng)站名稱：網(wǎng)站建設中的設計小技巧增加你的設計層次感
分享URL：http://www.js-pz168.com/news40/221040.html

網(wǎng)站建設、網(wǎng)絡推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡營銷seo公司；服務項目有網(wǎng)站建設等

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)