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