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