在我們做界面UI設(shè)計(jì)的時(shí)候怠缸，信息層級(jí)的重要性不言而喻樟蠕，信息的優(yōu)先級(jí)能更直觀地幫助產(chǎn)品達(dá)成業(yè)務(wù)目標(biāo)。本次我們將通過(guò)兩個(gè)實(shí)際案例來(lái)分析如何有效劃分視覺(jué)層級(jí)柬唯。想了解么认臊，不要遲疑了，跟著小編一起看看吧锄奢。
上下哪一張圖的重點(diǎn)更突出?
上圖所表達(dá)的視覺(jué)層級(jí)淺顯易懂失晴，處理好這些層級(jí)關(guān)系需要從理解內(nèi)容和需求，到如何處理信息層次這幾個(gè)方面去考慮拘央。對(duì)于設(shè)計(jì)師來(lái)說(shuō)涂屁，在心里建立起層級(jí)的這樣一個(gè)框架概念可以使設(shè)計(jì)變得更有理有據(jù)。無(wú)論是內(nèi)容型的頁(yè)面堪滨，還是工具型軟件等胯陋，都需要處理內(nèi)容的主次關(guān)系，引導(dǎo)用戶的視覺(jué)焦點(diǎn)，調(diào)整頁(yè)面的節(jié)奏感遏乔，降低用戶的理解成本义矛，減少用戶的視覺(jué)疲勞。
記得以前有過(guò)這么一個(gè)說(shuō)法盟萨，當(dāng)你設(shè)計(jì)陷入迷茫區(qū)的時(shí)候凉翻，可以瞇著眼睛去看你的設(shè)計(jì)稿，也許在霧化的視野中會(huì)感受到一些前后的層次關(guān)系捻激。這里所說(shuō)的瞇著眼睛看設(shè)計(jì)稿的方法制轰，也就是最簡(jiǎn)單最直接判斷層級(jí)的偏方。
那么要如何建立視覺(jué)層級(jí)關(guān)系呢?主要有以下幾種表現(xiàn)方式：
大小 · 距離 · 內(nèi)容形式 · 色彩
大邪贰： 往往能最直觀的體現(xiàn)出層級(jí)的差距
距離： 人眼對(duì)距離臨近的信息更容易先去關(guān)注垃杖。舒適、平和的行距節(jié)奏可以幫助文字刺激讀者的研究丈屹，并激發(fā)他的思考调俘。
能看出上下兩幅圖的視線流有什么不同嗎?
內(nèi)容形式：這里指的就是帶節(jié)奏感適當(dāng)?shù)膸в凶兓膬?nèi)容展示。
舉一個(gè)栗子：我們現(xiàn)在總能看到碎片化這個(gè)概念旺垒，用戶的時(shí)間越來(lái)越碎片化彩库，內(nèi)容也越來(lái)越碎片化，個(gè)性化先蒋。用戶缺乏耐心去看完一整篇長(zhǎng)文骇钦，適當(dāng)?shù)牟鍒D、加大段落的間隔竞漾、從頁(yè)面上都調(diào)整了整個(gè)頁(yè)面的節(jié)奏感眯搭，避免大段的文字而造成用戶的視覺(jué)疲勞和煩躁，人眼一般會(huì)先關(guān)注圖然后是文字业岁。
色彩：如果飽和度坦仍，對(duì)比度，明度這些色彩存在明顯差異對(duì)比叨襟，就會(huì)形成一個(gè)明顯的層級(jí)繁扎，所以人會(huì)不自覺(jué)地先關(guān)注色彩鮮艷或者色彩偏重的事物。
當(dāng)這些規(guī)則應(yīng)用到具體設(shè)計(jì)中去時(shí)糊闽，經(jīng)常會(huì)出現(xiàn)多種規(guī)則混搭使用的情況梳玫。
以下拿我們滬江問(wèn)答的產(chǎn)品來(lái)做個(gè)示例：
這是滬江問(wèn)答類的一個(gè)產(chǎn)品，通過(guò)左右兩圖的對(duì)比右犹，明顯可以看出右圖的側(cè)重點(diǎn)提澎。通過(guò)放大，加粗字號(hào)念链，變化顏色盼忌，來(lái)增加需要強(qiáng)調(diào)部分的重量感积糯，達(dá)到信息層級(jí)區(qū)分的目的，有助于我們一眼看到突出的重點(diǎn)谦纱，從而減少了閱讀成本看成。
通過(guò)控制圖片的大小，文字的大小對(duì)比跨嘉，夸張的留白間距川慌，來(lái)做出雜志的感覺(jué)，同時(shí)更能聚焦想表達(dá)的內(nèi)容
這些規(guī)則的實(shí)現(xiàn)需要通過(guò)以上介紹的這些方法：可以弱化及抽象不需要突出的元素的圖形祠乃，顏色梦重，把需要突出的重點(diǎn)展示的信息放大，又或者調(diào)整元素之間的位置關(guān)系等等…除此之外亮瓷，要針對(duì)具體情況進(jìn)行分析琴拧，結(jié)合需求的目的提煉出頁(yè)面中需要突出的是什么信息。
來(lái)分享一個(gè)完整的案例：
這是一個(gè)對(duì)當(dāng)前應(yīng)用市場(chǎng)下載頁(yè)面的改版嘱支，想嘗試通過(guò)視覺(jué)展現(xiàn)來(lái)提高App的下載率艾蓝，突出產(chǎn)品的重點(diǎn)特性，使用更抽象化斗塘，卡通的風(fēng)格來(lái)展現(xiàn)出活潑明快親切的感覺(jué)，從而對(duì)
CCtalk 產(chǎn)生友好的第一印象亮靴，提升下載率馍盟。
競(jìng)品調(diào)研
開(kāi)始這個(gè)頁(yè)面之前，我們?nèi)タ戳似渌a(chǎn)品的市場(chǎng)圖茧吊，較大部分是千篇一律的真實(shí)界面截圖形式贞岭，在短時(shí)間瀏覽時(shí)很難體驗(yàn)到真實(shí)使用場(chǎng)景，更別說(shuō)從截圖中抓取什么重點(diǎn)信息或留下印象了搓侄。
如何在幾秒的快速瀏覽過(guò)程中一眼讓用戶get到重點(diǎn)是我們本次改版的目標(biāo)瞄桨。
從文案入手開(kāi)始設(shè)計(jì)
需求方給到了5組文案：
根據(jù)第一組文案所延展出來(lái)的關(guān)鍵詞，文案所表達(dá)出的是一種鏈接讶踪，包容芯侥，隨時(shí)隨地都能接觸到自己喜歡的名師，接觸到自己想要的課程的這樣一種感覺(jué)乳讥，承載鏈接匯聚這些名師柱查，課程，各語(yǔ)種的平臺(tái)的主體還是小cc機(jī)器人形象云石，打造CC的品牌唉工，放在下載頁(yè)第一頁(yè)的地理位置也較為符合。
在你腦中立馬浮現(xiàn)的是不是右圖畫(huà)面中的印象?
如果是的話汹忠，那就對(duì)啦!
(上圖為第一版)完成后總覺(jué)得整個(gè)頁(yè)面看上去有些散亂淋硝，小元素過(guò)多雹熬，重點(diǎn)不夠聚焦。之所以樓主會(huì)這么糾結(jié)于這些小元素的處理谣膳，可能是因?yàn)橐婚_(kāi)始就沒(méi)有想到處理層級(jí)關(guān)系的概念竿报。
這個(gè)時(shí)候可以用到之前說(shuō)的前面這些方法的結(jié)合，通過(guò)大小對(duì)比参歹，景深前后的色彩仰楚，控制距離，弱化其它不必要的元素犬庇，來(lái)達(dá)到拉開(kāi)視覺(jué)層級(jí)僧界，使得頁(yè)面簡(jiǎn)潔有重點(diǎn)。同樣的層級(jí)關(guān)系的處理方式臭挽，也適用于剩下的其它頁(yè)面捂襟，讓我們來(lái)看一下優(yōu)化信息層級(jí)前后的對(duì)比圖：
雖然這個(gè)項(xiàng)目本身很簡(jiǎn)單，但是在看起來(lái)簡(jiǎn)潔簡(jiǎn)單的背后欢峰，如何提煉出關(guān)鍵的點(diǎn)葬荷，處理層級(jí)關(guān)系還是非常重要的，對(duì)于任何頁(yè)面來(lái)說(shuō)纽帖，如果想同時(shí)表現(xiàn)的東西太多宠漩，反而什么都顯得不重要了。我們做設(shè)計(jì)時(shí)心里要有主次關(guān)系的這把秤懊直，不要為了過(guò)度的形式感把最重要的東西掩蓋掉了
寫(xiě)在最后
我們?cè)谧鯱I設(shè)計(jì)的過(guò)程中時(shí)常會(huì)遇到這樣的情況：需求內(nèi)容過(guò)多扒吁，需求方又希望能在一屏內(nèi)展示室囊，盡可能地壓縮空間雕崩。個(gè)人是不贊同這樣的，產(chǎn)品和內(nèi)容都要有主次融撞，不會(huì)因?yàn)槟闩诺臄D一點(diǎn)盼铁，內(nèi)容多放一點(diǎn)，用戶就會(huì)多看一眼;而是通過(guò)精彩的內(nèi)容尝偎，舒適的閱讀感饶火，流暢的體驗(yàn)來(lái)留住用戶的。
資源地址: http://blog.silucg.com/UI/wy/6429.html(分享請(qǐng)保留)
