如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

自從上一篇發(fā)文得到一些發(fā)表方向，以后決定以個(gè)人獨(dú)特的總結(jié)以及符合商業(yè)的思維邏輯來(lái)寫作設(shè)計(jì)拆解的相關(guān)文章教程，前期我還是按大類去詮釋我的整個(gè)想法，看看大家的反饋，如果理解門檻還是有很大障礙，我在后期的文章中會(huì)再將文章細(xì)化出來(lái)。

拆解分類

拆解1、視覺(jué)面積的影響

拆解2、明度對(duì)比的影響

拆解3、色彩的影響

拆解4、視覺(jué)位置的影響

拆解5、豐富層度的影響

拆解6、其他（浮層、常用點(diǎn)、角標(biāo)、動(dòng)效）

拆解1、視覺(jué)面積的影響

視覺(jué)面積越大層級(jí)越高，而且與比較層的面積倍數(shù)有關(guān)，參考層如果為1級(jí)，那比較層的等級(jí)是由和參考層的倍數(shù)有關(guān)，大一倍那就為2級(jí)，大兩倍那就是3級(jí)，依次類推。這是美術(shù)基礎(chǔ)中的近遠(yuǎn)的關(guān)系，越靠近的視覺(jué)點(diǎn)越大，越靠遠(yuǎn)的視覺(jué)點(diǎn)越遠(yuǎn)，這樣也很容易知道，越近獲得關(guān)注越高，越遠(yuǎn)越低。

界面舉例我們告一段落，這里再說(shuō)一下比較常遇到的文字視覺(jué)面積，這塊很容易被忽略，其實(shí)文字也是具有視覺(jué)面積的，而且有不同的視覺(jué)大小。接下來(lái)我會(huì)將所有可能性都拆解出來(lái)。

同字號(hào)大小，不同粗細(xì)層度的影響/文字的邊寬形成的格式塔大小就是文字面積，但不一樣的是，文字是線性結(jié)構(gòu)，所以他不是實(shí)面，而是虛面，所以它相對(duì)于實(shí)面來(lái)說(shuō)還是低一個(gè)等級(jí)，再說(shuō)回到粗細(xì)的層級(jí)比較，越粗的文字他是越靠近實(shí)面的，所以這就能判斷越粗的文字層級(jí)越高這個(gè)道理。

同粗細(xì)，同字號(hào)大小，一個(gè)是有文字底塊，一個(gè)沒(méi)有，這樣有文字底塊的視覺(jué)層級(jí)會(huì)比沒(méi)有文字底塊的視覺(jué)層級(jí)要高，因?yàn)橛械讐K相當(dāng)于為實(shí)面，這樣就比沒(méi)有文字底塊的層級(jí)要高了

同粗細(xì)，不同字號(hào)大小，這個(gè)不難理解，這個(gè)不存在實(shí)面虛面的概念了，因?yàn)槎际且粯拥拇旨?xì)，但是這個(gè)格式塔大小不一樣，也就是說(shuō)，格式塔越大的層級(jí)越高，字號(hào)越大的層級(jí)越高。

拆解2、明度對(duì)比的影響

明度對(duì)比越高的視覺(jué)點(diǎn)會(huì)比明度對(duì)比低的視覺(jué)點(diǎn)視覺(jué)層級(jí)要高，這里其實(shí)也是美術(shù)基礎(chǔ)中的空間的視覺(jué)差，越遠(yuǎn)的物體越模糊（對(duì)比?。?，越近的物體越清晰（對(duì)比大）。所以對(duì)比大的層級(jí)會(huì)比對(duì)比小的層級(jí)會(huì)高。（這里插一句，色相也是有明度的，不同的色相也是有不同明度解析，這個(gè)可以運(yùn)用到電商banner的配色上）

下面來(lái)看看文字和背景不同對(duì)比度對(duì)視覺(jué)層級(jí)的影響。我們將統(tǒng)一文字大小和粗細(xì)，背景為白色。

拆解3、色彩的影響 

有色的視覺(jué)點(diǎn)總會(huì)比無(wú)色的視覺(jué)點(diǎn)更吸引人，因?yàn)樯室彩敲佬g(shù)的一類，給沒(méi)有色彩的視覺(jué)上色是提升視覺(jué)體驗(yàn)的一步。

文字為例：同等大小同等粗細(xì)同等明度的字，有顏色的字體會(huì)有更大的關(guān)注點(diǎn)。

拆解4、視覺(jué)位置的影響

給界面一個(gè)橫軸和縱軸，從橫軸的左邊到右邊起視覺(jué)層級(jí)逐漸減弱，從縱軸的上到下邊視覺(jué)層級(jí)逐漸減弱。這是因?yàn)橛脩糸喿x習(xí)慣的問(wèn)題，人們習(xí)慣從左上方開始往右邊閱讀，然后慢慢的往下讀取信息。

拆解5、豐富層度的影響

豐富層度越高的視覺(jué)層級(jí)越高，豐富層度越高的點(diǎn)信息量越大，越需要花時(shí)間停留。

文字為例：設(shè)計(jì)過(guò)的字體豐富層度會(huì)比默認(rèn)字體高，所以有些需要強(qiáng)調(diào)的標(biāo)題或者banner上的字體都是有精心設(shè)計(jì)過(guò)，為了拉開于界面的層級(jí)。

界面為例：界面首頁(yè)中的banner是豐富層度最高，其次是金剛區(qū)，再是標(biāo)簽欄。

拆解6、其他

除了上訴的主要層級(jí)影響，還有其他一些特殊的影響，我這就說(shuō)兩三個(gè)子吧。一個(gè)呢是給模塊直接加投影，硬生生的造成前后層級(jí)。還有角標(biāo)的影響，在干凈的頁(yè)面中突然來(lái)個(gè)提示角標(biāo)，例如微信有消息時(shí)的小角標(biāo)。還一個(gè)就是用戶常用關(guān)鍵點(diǎn)，那個(gè)視覺(jué)層級(jí)整個(gè)產(chǎn)品中的最高層級(jí)，這個(gè)需要打破所有規(guī)則，這個(gè)是由用戶主動(dòng)選擇的視覺(jué)層級(jí)點(diǎn)，例如電商軟件的搜索框，不管這個(gè)搜索框大小如何，層級(jí)怎么低都行，但對(duì)于用戶進(jìn)來(lái)，第一個(gè)渴望的點(diǎn)就是這里，最后是動(dòng)效的影響，每個(gè)動(dòng)效就是一個(gè)互動(dòng)，動(dòng)的東西永遠(yuǎn)比靜止的東西有活力更加吸引人。

圖片來(lái)源UIGREAT的作者JGM

總結(jié)

視覺(jué)層級(jí)的梳理可以很大幅度的提升視覺(jué)規(guī)范和用戶體驗(yàn)，通過(guò)視覺(jué)層級(jí)的分析，可以從不同方面去詮釋復(fù)雜的頁(yè)面，也可以更好的去處理文本關(guān)系。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。