UI設(shè)計師教你8個提高視覺層級的技巧

打 開  VS 關(guān) 閉   

頁面中通過打開或關(guān)閉處理方法，對頁面中需要透出給用戶的信息，可以鋪開呈現(xiàn)出來，對于不那么重要信息可以收起來，通過展開和收起的對比，通過二級頁面跳轉(zhuǎn)或引導(dǎo)到其他操作，通過這種方式來強(qiáng)調(diào)頁面關(guān)系和節(jié)奏。

滿 VS 空   

一半內(nèi)容滿一半內(nèi)容少，形式對比，形成層級落差。

▲（上圖）左側(cè)圖片比較飽滿，右側(cè)文字采用正負(fù)形結(jié)合視覺稍顯空來突出頁面調(diào)性。

▲（上圖）左側(cè)空右側(cè)飽滿，對比強(qiáng)烈，讓用戶更懂關(guān)注在文字信息。

▲  同樣這個app在上面留白較多，內(nèi)容集中底部，頁面一分為二，上半部分空，下面滿，形成對比。

▲  酒杯比較滿，文字底部空，形成視覺沖擊整個畫面更加聚焦中心。

對 稱 VS 不 對 稱   

在頁面中，通過對元素不對稱，會讓視覺焦點差異點突出來。

▲  偶爾在設(shè)計中運(yùn)用這種不對稱設(shè)計手法反而能起到更好的效果

▲  這個頁面主要功能集中在左側(cè)第一個按鈕，和傳統(tǒng)的重要功能集中在中心不同，能形成產(chǎn)品差異點，同時營造視覺差異性。

▲  非對稱在頁面中的運(yùn)用

大 VS 小   

通過元素大和小對比，這種直接感官方式能讓我們更聚焦在大的圖形上面。

面 VS 線   

通過線和面之間對比，常用在按鈕和標(biāo)簽，或者區(qū)塊之間，面的按鈕重于線的按鈕，這個是設(shè)計中經(jīng)常運(yùn)用到的設(shè)計技法。

襯 線 字 體 VS 非 襯 線 字 體   

字體也是種對比，如Serif and Sans-serif的對比。

有 序  VS  混 亂   

有時候為了強(qiáng)調(diào)對比關(guān)系，在頁面文字處理中采用有序排版，對于物體排布采用混亂，通過有序和混亂對比強(qiáng)調(diào)畫面關(guān)系，最著名的例子可屬蘋果設(shè)計，大量采用這種有序VS混亂手法。

▲  文字居中是有序的，手機(jī)采用傾斜的營造一種對角線感覺，和文字有序排列形成呼應(yīng)。

▲  同樣上面兩圖文字部分采用的整齊左對齊方式，而一些手機(jī)，裝飾氛圍物品則錯別排布在頁面各個地方，形成對比。

▲  文字有序，氛圍素材無序，對比強(qiáng)烈，裝飾效果強(qiáng)。

質(zhì) 感  VS  扁 平   

質(zhì)感的和扁平的，這個質(zhì)感不一定是擬物設(shè)計，是有畫面感，有色彩重量的，通過對扁平對比來強(qiáng)調(diào)。

對 比 技 巧 技 法 的 運(yùn) 用 總 結(jié) 

• 打開 VS 關(guān)閉
• 滿 VS 空
• 對稱 VS 不對稱
• 大 VS 小
• 面 VS 線
• Serif   VS   Sans-serif
• 有序 VS 混亂
• 質(zhì)感 VS 扁平

原文地址：我們的設(shè)計日記（公眾號）
相關(guān)文章--《UI設(shè)計師教你如何學(xué)會包裝》