2019-7-3 ui設計分享達人
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
自從上一篇發文得到一些發表方向，以后決定以個人獨特的總結以及符合商業的思維邏輯來寫作設計拆解的相關文章教程，前期我還是按大類去詮釋我的整個想法，看看大家的反饋，如果理解門檻還是有很大障礙，我在后期的文章中會再將文章細化出來。
拆解分類
拆解1、視覺面積的影響
拆解2、明度對比的影響
拆解3、色彩的影響
拆解4、視覺位置的影響
拆解5、豐富層度的影響
拆解6、其他（浮層、常用點、角標、動效）
拆解1、視覺面積的影響
視覺面積越大層級越高，而且與比較層的面積倍數有關，參考層如果為1級，那比較層的等級是由和參考層的倍數有關，大一倍那就為2級，大兩倍那就是3級，依次類推。這是美術基礎中的近遠的關系，越靠近的視覺點越大，越靠遠的視覺點越遠，這樣也很容易知道，越近獲得關注越高，越遠越低。
界面舉例我們告一段落，這里再說一下比較常遇到的文字視覺面積，這塊很容易被忽略，其實文字也是具有視覺面積的，而且有不同的視覺大小。接下來我會將所有可能性都拆解出來。
同字號大小，不同粗細層度的影響/文字的邊寬形成的格式塔大小就是文字面積，但不一樣的是，文字是線性結構，所以他不是實面，而是虛面，所以它相對于實面來說還是低一個等級，再說回到粗細的層級比較，越粗的文字他是越靠近實面的，所以這就能判斷越粗的文字層級越高這個道理。
同粗細，同字號大小，一個是有文字底塊，一個沒有，這樣有文字底塊的視覺層級會比沒有文字底塊的視覺層級要高，因為有底塊相當于為實面，這樣就比沒有文字底塊的層級要高了
同粗細，不同字號大小，這個不難理解，這個不存在實面虛面的概念了，因為都是一樣的粗細，但是這個格式塔大小不一樣，也就是說，格式塔越大的層級越高，字號越大的層級越高。
拆解2、明度對比的影響
明度對比越高的視覺點會比明度對比低的視覺點視覺層級要高，這里其實也是美術基礎中的空間的視覺差，越遠的物體越模糊（對比小），越近的物體越清晰（對比大）。所以對比大的層級會比對比小的層級會高。（這里插一句，色相也是有明度的，不同的色相也是有不同明度解析，這個可以運用到電商banner的配色上）
下面來看看文字和背景不同對比度對視覺層級的影響。我們將統一文字大小和粗細，背景為白色。
拆解3、色彩的影響
有色的視覺點總會比無色的視覺點更吸引人，因為色彩也是美術的一類，給沒有色彩的視覺上色是提升視覺體驗的一步。
文字為例：同等大小同等粗細同等明度的字，有顏色的字體會有更大的關注點。
拆解4、視覺位置的影響
給界面一個橫軸和縱軸，從橫軸的左邊到右邊起視覺層級逐漸減弱，從縱軸的上到下邊視覺層級逐漸減弱。這是因為用戶閱讀習慣的問題，人們習慣從左上方開始往右邊閱讀，然后慢慢的往下讀取信息。
拆解5、豐富層度的影響
豐富層度越高的視覺層級越高，豐富層度越高的點信息量越大，越需要花時間停留。
文字為例：設計過的字體豐富層度會比默認字體高，所以有些需要強調的標題或者banner上的字體都是有精心設計過，為了拉開于界面的層級。
界面為例：界面首頁中的banner是豐富層度最高，其次是金剛區，再是標簽欄。
拆解6、其他
除了上訴的主要層級影響，還有其他一些特殊的影響，我這就說兩三個子吧。一個呢是給模塊直接加投影，硬生生的造成前后層級。還有角標的影響，在干凈的頁面中突然來個提示角標，例如微信有消息時的小角標。還一個就是用戶常用關鍵點，那個視覺層級整個產品中的最高層級，這個需要打破所有規則，這個是由用戶主動選擇的視覺層級點，例如電商軟件的搜索框，不管這個搜索框大小如何，層級怎么低都行，但對于用戶進來，第一個渴望的點就是這里，最后是動效的影響，每個動效就是一個互動，動的東西永遠比靜止的東西有活力更加吸引人。
圖片來源UIGREAT的作者JGM
總結
視覺層級的梳理可以很大幅度的提升視覺規范和用戶體驗，通過視覺層級的分析，可以從不同方面去詮釋復雜的頁面，也可以更好的去處理文本關系。
藍藍設計( www.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。