加強(qiáng)視覺層次效果的界面設(shè)計(jì)技巧分享【2】

?視覺層次在界面中非常重要,一切創(chuàng)新和趨勢(shì)都是建立在視覺原則基礎(chǔ)上的,這些規(guī)則才是做好設(shè)計(jì)的基石,今天我們繼續(xù)來探討,還有有哪些技巧是可以加強(qiáng)視覺層次的。

視覺層次在界面中非常重要,一切創(chuàng)新和趨勢(shì)都是建立在視覺原則基礎(chǔ)上的,這些規(guī)則才是做好設(shè)計(jì)的基石,今天我們繼續(xù)來探討,還有有哪些技巧是可以加強(qiáng)視覺層次的。

運(yùn)用分組建立層次

在設(shè)計(jì)中,相鄰的元素比分開較遠(yuǎn)的元素會(huì)更加吸引人注意,在做設(shè)計(jì)閱讀順序時(shí),利用設(shè)計(jì)分組是一個(gè)非常有效的方法,將不同信息進(jìn)行視覺間距分組。能提升用戶對(duì)于內(nèi)容上的理解。

如上圖slack的設(shè)計(jì),插畫引導(dǎo)圖和底部按鈕上面文字拉開了距離,使得內(nèi)容更聚焦。第二個(gè)界面的頂部頭像和下面的文字也是通過分組形成了對(duì)比。

stadium-live的產(chǎn)品設(shè)計(jì)上,登錄頁(yè)面按鈕為一組,頂部品牌LOGO和slogan一組,人物為一組,每組信息之間分組非常明確,互相都不會(huì)對(duì)對(duì)方視覺產(chǎn)生干擾,后面兩張頁(yè)面也是如此,頂部的導(dǎo)航,和下面表單信息,以及頭像和底部按鈕,通過分組處理,內(nèi)容更加符合用戶的視覺動(dòng)線。

在球員定制的處理上,最左邊那張圖,通過卡片和線條分組處理,從視覺上很清晰的看見排名;哪兩個(gè)球隊(duì)之間正在進(jìn)行比賽。

當(dāng)一組信息比較接近時(shí),證明他們是有關(guān)聯(lián)的,如果距離比較遠(yuǎn),這意味著這組信息和他們是不同的,簡(jiǎn)單來說,通過鄰近性原則創(chuàng)造這些關(guān)系,為信息帶來層次。

運(yùn)用空白建立視覺層次 

空白也是視覺設(shè)計(jì)元素,并不是留白就是空著,如果設(shè)計(jì)中留白運(yùn)用合理,可以幫助用戶理解很多信息,因此任何設(shè)計(jì)都需要通過適當(dāng)?shù)呢?fù)空間來傳遞信息。


如上圖我喜歡的一個(gè)應(yīng)用classpass設(shè)計(jì)非常極簡(jiǎn),頁(yè)面中大量運(yùn)用留白來凸顯內(nèi)容。

classpass的設(shè)計(jì)不會(huì)使用太多的視覺元素,而是運(yùn)用留白把內(nèi)容進(jìn)行分組,每個(gè)頁(yè)面的留白恰到好處,同時(shí)留白本身就是對(duì)信息進(jìn)行區(qū)分,所以頁(yè)面中減少了很多線條使用,會(huì)更加干凈有品質(zhì)感。

must是一款電影軟件,整體設(shè)計(jì)非常雜志風(fēng),頁(yè)面就是通過圖文處理,以及留白空間的處理,增加對(duì)比,基本產(chǎn)品使用過程中你不會(huì)感覺到視覺負(fù)擔(dān),元素之間的信息組織的非常清晰。

在電影展示頁(yè)面,信息的處理,以及打分設(shè)計(jì)上,多次運(yùn)用留白來處理信息層級(jí),在設(shè)計(jì)中,當(dāng)你元素周圍留白越多,它產(chǎn)生聚焦注意力的作用也越強(qiáng),如右邊的打分頁(yè)面,幾乎所有焦點(diǎn)都在這個(gè)彈窗上。

Artsy是一款藝術(shù)品電商網(wǎng)站,整個(gè)app的設(shè)計(jì)也充滿了藝術(shù)氣息,每次我設(shè)計(jì)找不到感覺時(shí)候就會(huì)去打開看看,里面的排版,還有設(shè)計(jì)的細(xì)節(jié)處理,都值得我學(xué)習(xí),但我喜歡的還是他對(duì)于板式和留白空間的處理。

在首頁(yè)設(shè)計(jì),我最喜歡他相框的設(shè)計(jì),就像欣賞美術(shù)館的一幅畫,頁(yè)面留白也非常大,襯線體和非襯線體的對(duì)比也運(yùn)用的非常好。

整個(gè)APP的設(shè)計(jì)被大量留白包圍,雖然現(xiàn)在流行各種質(zhì)感,光感,C4D的設(shè)計(jì),但是大量視覺元素會(huì)讓頁(yè)面過于飽和,如果沒有很好的視覺引導(dǎo),用戶會(huì)感到不知所措。這種簡(jiǎn)單的返璞歸真,也能讓人視覺不容易產(chǎn)生疲勞。

運(yùn)用氛圍建立層次 

每個(gè)紋理的運(yùn)用,有設(shè)計(jì)感的紋理從視覺感受上比簡(jiǎn)約主義更能吸引用戶注意力,但是背景紋理運(yùn)用不能為了設(shè)計(jì)而設(shè)計(jì),而是需要和產(chǎn)品內(nèi)容有關(guān)系。比如紋理和文字內(nèi)容,和信息是密切相關(guān)的。如上圖,是一款打車軟件,背景結(jié)合了打車的地圖,公路線路,用車場(chǎng)景;讓頁(yè)面對(duì)比和設(shè)計(jì)層次更加突出。

Jour這款產(chǎn)品在設(shè)計(jì)上,背景通過有層次的氛圍紋理和質(zhì)感,使得頁(yè)面氛圍感很強(qiáng),層次細(xì)節(jié)更加豐富,當(dāng)然在設(shè)計(jì)時(shí)候切忌對(duì)于設(shè)計(jì)氛圍過度運(yùn)用,那樣會(huì)讓用戶分散注意力。

其它場(chǎng)景上氛圍紋理的運(yùn)用,卡片上通過系列插畫的塑造,頁(yè)面雖然有很多插畫,但是頁(yè)面平衡感同樣被把握的很好。用的時(shí)候需要考慮用戶在不同界面看見的元素視覺感受是一致的。

氛圍除了圖形,其實(shí)色彩也是很重要一種方式,我很喜歡的ASANS的設(shè)計(jì),在背景上就是運(yùn)用了一些幾何圖形的肌理效果讓整個(gè)空間感更加豐富,這些幾何圖形豐富細(xì)節(jié)同時(shí)也讓整個(gè)內(nèi)容更加凸顯。

如上圖是里面一個(gè)注冊(cè)登錄場(chǎng)景,界面中,除了背景灰色底紋通過幾何圖形來烘托視覺層次,同時(shí)在插畫上也非常巧妙,用戶輸出時(shí),完成后,整個(gè)插畫到品牌圖形的連貫變化體驗(yàn)非常好。

Sift是一款新聞?lì)愰喿x產(chǎn)品,這類型產(chǎn)品設(shè)計(jì)一般就是文字排版,設(shè)計(jì)簡(jiǎn)約為主,但是sift運(yùn)用了一種大膽的設(shè)計(jì),背景氛圍上采用一些點(diǎn)線底紋的肌理效果,和內(nèi)容結(jié)合的平衡感把握的很不錯(cuò)。

Lugg是一款貨車APP有點(diǎn)像國(guó)內(nèi)的貨拉拉,整個(gè)設(shè)計(jì)氛圍感也非常強(qiáng),運(yùn)用的全插畫設(shè)計(jì),從引導(dǎo)頁(yè),到頁(yè)面核心功能設(shè)計(jì)都能看見完整插畫的運(yùn)用,是我目前見過運(yùn)用插畫氛圍作為主設(shè)計(jì)最好的產(chǎn)品。

感興趣的同學(xué)可以去美國(guó)蘋果商店去下載使用,頁(yè)面中增加氛圍是一種增加層次很好的方式,但是同樣需要注意好視覺平衡,不要本末倒置。

運(yùn)用字體對(duì)比建立層次

640.jpg

運(yùn)用襯線字體和非襯線字體對(duì)比是非常常用的方式,如上圖運(yùn)用了Adelle Sans字和Tiempos字體這兩款字體的對(duì)比讓頁(yè)面內(nèi)容結(jié)構(gòu)非常清晰

上圖官網(wǎng)的設(shè)計(jì),干凈的排版,通過字體大小,字型進(jìn)行對(duì)比,體現(xiàn)出視覺層次。

字體的選擇本身也是設(shè)計(jì)中很重要的因素,好的設(shè)計(jì)不僅能提升設(shè)計(jì)品質(zhì),同時(shí)也能讓頁(yè)面視覺層次更加分明。

總結(jié) 

回歸我們?cè)O(shè)計(jì)本質(zhì),其實(shí)我一直覺得設(shè)計(jì)就是一個(gè)翻譯官,我們的使命是讓用戶能更容易理解產(chǎn)品復(fù)雜或晦澀難懂的專業(yè)信息,同時(shí)我們能提前規(guī)避他們可能遇到的問題,而不僅僅是專注在界面美觀上,今天分享的這些提升設(shè)計(jì)層次的技巧,是為了讓頁(yè)面有更好的體驗(yàn),也希望大家能通過實(shí)踐去運(yùn)用的更好。


相關(guān)閱讀文章推薦:





原文來自微信公眾號(hào):我們的設(shè)計(jì)日記




每天更新,
全站高品質(zhì)素材免費(fèi)下載!