左右哪一張圖的重點更突出？
上圖所表達的視覺層級淺顯易懂，處理好這些層級關系需要從理解內容和需求，到如何處理信息層次這幾個方面去考慮。對于設計師來說，在心里建立起層級的這樣一個框架概念可以使設計變得更有理有據。無論是內容型的頁面，還是工具型軟件等，都需要處理內容的主次關系，引導用戶的視覺焦點，調整頁面的節奏感，降低用戶的理解成本，減少用戶的視覺疲勞。
記得以前有過這么一個說法，當你設計陷入迷茫區的時候，可以瞇著眼睛去看你的設計稿，也許在霧化的視野中會感受到一些前后的層次關系。這里所說的瞇著眼睛看設計稿的方法，也就是最簡單最直接判斷層級的偏方。
那么要如何建立視覺層級關系呢？主要有以下幾種表現方式：
大小 · 距離 · 內容形式 · 色彩
大小： 往往能最直觀的體現出層級的差距
距離： 人眼對距離臨近的信息更容易先去關注。舒適、平和的行距節奏可以幫助文字刺激讀者的研究，并激發他的思考。
能看出上下兩幅圖的視線流有什么不同嗎？
內容形式：這里指的就是帶節奏感適當的帶有變化的內容展示。
舉一個栗子：我們現在總能看到碎片化這個概念，用戶的時間越來越碎片化，內容也越來越碎片化，個性化。用戶缺乏耐心去看完一整篇長文，適當的插圖、加大段落的間隔、從頁面上都調整了整個頁面的節奏感，避免大段的文字而造成用戶的視覺疲勞和煩躁，人眼一般會先關注圖然后是文字。
色彩：如果飽和度，對比度，明度這些色彩存在明顯差異對比，就會形成一個明顯的層級，所以人會不自覺地先關注色彩鮮艷或者色彩偏重的事物。
當這些規則應用到具體設計中去時，經常會出現多種規則混搭使用的情況。
以下拿我們滬江問答的產品來做個示例：
這是滬江問答類的一個產品，通過左右兩圖的對比，明顯可以看出右圖的側重點。通過放大，加粗字號，變化顏色，來增加需要強調部分的重量感，達到信息層級區分的目的，有助于我們一眼看到突出的重點，從而減少了閱讀成本。
通過控制圖片的大小，文字的大小對比，夸張的留白間距，來做出雜志的感覺，同時更能聚焦想表達的內容
這些規則的實現需要通過以上介紹的這些方法：可以弱化及抽象不需要突出的元素的圖形，顏色，把需要突出的重點展示的信息放大，又或者調整元素之間的位置關系等等…除此之外，要針對具體情況進行分析，結合需求的目的提煉出頁面中需要突出的是什么信息。
來分享一個完整的案例：這是一個對當前應用市場下載頁面的改版，想嘗試通過視覺展現來提高App的下載率，突出產品的重點特性，使用更抽象化，卡通的風格來展現出活潑明快親切的感覺，從而對 CCtalk 產生友好的第一印象，提升下載率。
競品調研開始這個頁面之前，我們去看了其他產品的市場圖，較大部分是千篇一律的真實界面截圖形式，在短時間瀏覽時很難體驗到真實使用場景，更別說從截圖中抓取什么重點信息或留下印象了。
如何在幾秒的快速瀏覽過程中一眼讓用戶get到重點是我們本次改版的目標。
從文案入手開始設計需求方給到了5組文案：
根據第一組文案所延展出來的關鍵詞，文案所表達出的是一種鏈接，包容，隨時隨地都能接觸到自己喜歡的名師，接觸到自己想要的課程的這樣一種感覺，承載鏈接匯聚這些名師，課程，各語種的平臺的主體還是小cc機器人形象，打造CC的品牌，放在下載頁第一頁的地理位置也較為符合。
在你腦中立馬浮現的是不是右圖畫面中的印象？
如果是的話，那就對啦!
（上圖為第一版）完成后總覺得整個頁面看上去有些散亂，小元素過多，重點不夠聚焦。之所以樓主會這么糾結于這些小元素的處理，可能是因為一開始就沒有想到處理層級關系的概念。
這個時候可以用到之前說的前面這些方法的結合，通過大小對比，景深前后的色彩，控制距離，弱化其它不必要的元素，來達到拉開視覺層級，使得頁面簡潔有重點。同樣的層級關系的處理方式，也適用于剩下的其它頁面，讓我們來看一下優化信息層級前后的對比圖：
雖然這個項目本身很簡單，但是在看起來簡潔簡單的背后，如何提煉出關鍵的點，處理層級關系還是非常重要的，對于任何頁面來說，如果想同時表現的東西太多，反而什么都顯得不重要了。我們做設計時心里要有主次關系的這把秤，不要為了過度的形式感把最重要的東西掩蓋掉了（其實這一點樓主也是有待加強的= =）
寫在最后
我們在做設計的過程中時常會遇到這樣的情況：需求內容過多，需求方又希望能在一屏內展示，盡可能地壓縮空間。個人是不贊同這樣的，產品和內容都要有主次，不會因為你排的擠一點，內容多放一點，用戶就會多看一眼；而是通過精彩的內容，舒適的閱讀感，流暢的體驗來留住用戶的。
