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