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

打 開  VS 關(guān) 閉   

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

滿 VS 空   

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

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

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

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

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

對(duì) 稱 VS 不 對(duì) 稱   

在頁(yè)面中，通過(guò)對(duì)元素不對(duì)稱，會(huì)讓視覺焦點(diǎn)差異點(diǎn)突出來(lái)。

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

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

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

大 VS 小   

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

面 VS 線   

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

襯 線 字 體 VS 非 襯 線 字 體   

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

有 序  VS  混 亂   

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

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

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

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

質(zhì) 感  VS  扁 平   

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

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

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

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