旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實習/?A計劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 行業(yè)資訊 > UI設計師教你8個提高視覺層級的技巧

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

時間:2018-01-31來源:m.mwtacok.cn點擊量:作者:吳冬冬
時間:2018-01-31點擊量:作者:吳冬冬
大家都知道提高視覺層級,無非就幾個點,尺寸、對比、顏色、樣式、分組、對稱、相似等這些點,基本總結起來就是制造差異,通過差異點來突出我們想表達的信息,視覺層級它能引導我們去發(fā)現(xiàn)設計中重要的地方,忽略不重要的點。今天就結合一些案例來聊聊提升視覺層級在設計中是如何去運用對比來達到提升設計層級的。

improving-the-visual-hierarchy 01

 

打 開  VS 關 閉   

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

 

improving-the-visual-hierarchy 02

improving-the-visual-hierarchy 03

improving-the-visual-hierarchy 04

improving-the-visual-hierarchy 05

 

滿 VS 空   

一半內容滿一半內容少,形式對比,形成層級落差。

improving-the-visual-hierarchy 06

▲(上圖)左側圖片比較飽滿,右側文字采用正負形結合視覺稍顯空來突出頁面調性。

 

improving-the-visual-hierarchy 07

▲(上圖)左側空右側飽滿,對比強烈,讓用戶更懂關注在文字信息。

 

improving-the-visual-hierarchy 08

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

 

improving-the-visual-hierarchy 09

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

 

對 稱 VS 不 對 稱   

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

improving-the-visual-hierarchy 10

▲  偶爾在設計中運用這種不對稱設計手法反而能起到更好的效果

 

improving-the-visual-hierarchy 11

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

 

improving-the-visual-hierarchy 12

improving-the-visual-hierarchy 13

▲  非對稱在頁面中的運用

 

大 VS 小   

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

improving-the-visual-hierarchy 14

improving-the-visual-hierarchy 15

improving-the-visual-hierarchy 16

improving-the-visual-hierarchy 17

 

面 VS 線   

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

improving-the-visual-hierarchy 18

improving-the-visual-hierarchy 19

improving-the-visual-hierarchy 20

improving-the-visual-hierarchy 21

 

襯 線 字 體 VS 非 襯 線 字 體   

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

improving-the-visual-hierarchy 22


improving-the-visual-hierarchy 24

improving-the-visual-hierarchy 25

improving-the-visual-hierarchy 26

 

有 序  VS  混 亂   

有時候為了強調對比關系,在頁面文字處理中采用有序排版,對于物體排布采用混亂,通過有序和混亂對比強調畫面關系,最著名的例子可屬蘋果設計,大量采用這種有序VS混亂手法。

improving-the-visual-hierarchy 27

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

 

improving-the-visual-hierarchy 28

improving-the-visual-hierarchy 29

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

 

improving-the-visual-hierarchy 30

▲  文字有序,氛圍素材無序,對比強烈,裝飾效果強。

 

質 感  VS  扁 平   

質感的和扁平的,這個質感不一定是擬物設計,是有畫面感,有色彩重量的,通過對扁平對比來強調。

improving-the-visual-hierarchy 31

improving-the-visual-hierarchy 32

improving-the-visual-hierarchy 33

 

對 比 技 巧 技 法 的 運 用 總 結 

  • 打開 VS 關閉
  • 滿 VS 空
  • 對稱 VS 不對稱
  • 大 VS 小
  • 面 VS 線
  • Serif   VS   Sans-serif
  • 有序 VS 混亂
  • 質感 VS 扁平

 

原文地址:我們的設計日記(公眾號)
相關文章--《UI設計師教你如何學會包裝








 

預約申請免費試聽課

填寫下面表單即可預約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業(yè)?一地學習,可推薦就業(yè)!

?2007-2021/北京漫動者教育科技有限公司版權所有
備案號:京ICP備12034770號

?2007-2022/ m.mwtacok.cn 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號

網(wǎng)站地圖