剛剛過去的6月,網(wǎng)頁設(shè)計(jì)師們特別青睞這3種設(shè)計(jì)趨勢

2017-7-6    資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請點(diǎn)這里

如果要深究近期網(wǎng)頁設(shè)計(jì)趨勢的變化,這些變化更多是關(guān)于用戶模式,色彩和排版設(shè)計(jì)的。但是不論是其中哪種,都牽涉到一些微妙的設(shè)計(jì)技巧和復(fù)雜的影響因素,將它們納入6月的設(shè)計(jì)趨勢,似乎略有不足。在過去一個(gè)月所出現(xiàn)的新網(wǎng)頁設(shè)計(jì)作品當(dāng)中,最顯著的設(shè)計(jì)趨勢還是體現(xiàn)在一些設(shè)計(jì)元素上,風(fēng)格獨(dú)特的底部導(dǎo)航,自由隨性的Box元素,裝飾性極強(qiáng)的豎線元素。

近期如果你在糾結(jié)怎么設(shè)計(jì)網(wǎng)頁的話,這些設(shè)計(jì)趨勢可以用來看看~

1、底部導(dǎo)航設(shè)計(jì)

在手機(jī)上,底部導(dǎo)航是普及率頗為高的設(shè)計(jì),但是在網(wǎng)頁上就不算多見了。雖然側(cè)邊欄和垂直導(dǎo)航基本上要脫離實(shí)驗(yàn)性設(shè)計(jì)的身份了,但是底部導(dǎo)航這種“反習(xí)慣”的設(shè)計(jì),仍然算是激進(jìn)的一種設(shè)計(jì)手法。

底部導(dǎo)航在網(wǎng)頁上是先鋒的設(shè)計(jì),所以它不是兼容所有用戶的一種設(shè)計(jì)策略。如果你做的是一個(gè)強(qiáng)調(diào)設(shè)計(jì)、受眾接受性較強(qiáng)的網(wǎng)站,可以嘗試接入這一設(shè)計(jì)趨勢。

如要使用底部導(dǎo)航加持設(shè)計(jì),那么你需要正確地使用它:

  • 保持簡約,在不用向下滾動(dòng)的頁面上使用上佳,少數(shù)頁面使用為好
  • 設(shè)計(jì)的要醒目,不要讓用戶忽略它們
  • 如果頁面較長,使用懸浮固定的底部導(dǎo)航
  • 搭配極簡風(fēng)格的設(shè)計(jì)框架,復(fù)雜的網(wǎng)頁設(shè)計(jì)會讓用戶忽略底部導(dǎo)航
  • 加入一些額外的元素來強(qiáng)化導(dǎo)航功能,確保用戶不會迷失

Lapland

Rockwood

Hotdot

2、Box元素

Box,盒子是一種非常實(shí)用的頁面元素載體,在數(shù)字設(shè)計(jì)日趨多樣繁復(fù)的2017年,Box 元素簡直是設(shè)計(jì)師手里的攻城利器。從功能上來說,它和Material Design 中卡片的概念是高度相似的,但是它并沒有限制在這個(gè)風(fēng)格當(dāng)中。和卡片一樣,Box 元素可以承載各種各樣的內(nèi)容,它非常符合今年設(shè)計(jì)師對于多樣性的需求。

當(dāng)你開始使用Box元素的時(shí)候,應(yīng)該注意下面的問題:

  • 使用Box 來創(chuàng)建視覺焦點(diǎn),比如下面的 Cedrick Lachot 這個(gè)網(wǎng)站
  • 使用Box 將不同的元素分層,類似下面的Feudi Di San Gregorio 這樣設(shè)計(jì)
  • 使用Box 來強(qiáng)化流程和視覺。Beoplay 的網(wǎng)站就使用堆疊的Box來創(chuàng)建視覺路徑,每個(gè)Box中承載不同的動(dòng)畫,吸引用戶滾動(dòng)瀏覽

Cedrick Lachot

Feudi Di San Gregorio

Beoplay

3、豎線元素

雖然用戶并不一定會時(shí)刻注意到網(wǎng)頁背后的柵格系統(tǒng),但是恰到好處的豎線元素,絕對能夠強(qiáng)化整個(gè)網(wǎng)頁的設(shè)計(jì)感。

豎線元素主要還是起到裝飾性的作用,和我們常見的原型、矩形和橫線元素不同,豎線元素其實(shí)出現(xiàn)的非常少,在很多時(shí)候能夠給整個(gè)設(shè)計(jì)一種有趣、別具一格的體驗(yàn)。

豎線元素?zé)o疑會讓網(wǎng)頁更加風(fēng)格化,不過它的侵略性并不強(qiáng),所以,它的應(yīng)用范疇還是很廣的:

  • 可以嘗試使用較細(xì)的豎線融入背景
  • 創(chuàng)建垂直豎線的圖像拼貼
  • 在主圖上使用豎線元素創(chuàng)造視覺深度,強(qiáng)化層次
  • 使用豎線穿過圖片上的視覺焦點(diǎn)
  • 使用分屏式的設(shè)計(jì),創(chuàng)造出垂直分割的視覺體驗(yàn)
  • 使用其他的小元素縱向排列,在背景中使用
  • 讓元素在縱向上堆疊,而不是常見的橫向排列

Porche

Radio

7h34

結(jié)語

趨勢能夠流行多久?誰不知道,這是使用設(shè)計(jì)趨勢的風(fēng)險(xiǎn)所在。趨勢無疑是有時(shí)間限制的,但是在此刻,它是有價(jià)值和意義的。

藍(lán)藍(lán)設(shè)計(jì)m.sillybuy.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ù)


分享本文至:

日歷

鏈接

個(gè)人資料

存檔