1、底部導航設計

 

      在手(shou)(shou)機上(shang)(shang)，底(di)部(bu)導(dao)航(hang)是普及(ji)率頗(po)為(wei)高(gao)的設(she)計，但(dan)(dan)是在網頁上(shang)(shang)就不算(suan)多見了(le)。雖然(ran)側(ce)邊欄和垂直導(dao)航(hang)基本上(shang)(shang)要脫離實驗性設(she)計的身份(fen)了(le)，但(dan)(dan)是底(di)部(bu)導(dao)航(hang)這(zhe)種“反(fan)習慣(guan)”的設(she)計，仍然(ran)算(suan)是激進(jin)的一種設(she)計手(shou)(shou)法(fa)。

 

      底部導航(hang)在網頁上是(shi)先鋒(feng)的設計，所(suo)以它(ta)不是(shi)兼(jian)容所(suo)有用(yong)戶的一(yi)種(zhong)設計策略。如果你做(zuo)的是(shi)一(yi)個強調(diao)設計、受眾接受性較強的網站，可以嘗試接入這一(yi)設計趨勢。

 

      如要使用(yong)底(di)部導航加持設計，那么你(ni)需要正確地(di)使用(yong)它：

 

      保持簡約，在不(bu)用(yong)(yong)向下滾動的頁面(mian)(mian)上(shang)使(shi)用(yong)(yong)上(shang)佳，少(shao)數頁面(mian)(mian)使(shi)用(yong)(yong)為好設(she)計(ji)的要醒目，不(bu)要讓用(yong)(yong)戶(hu)忽(hu)略它們

 

      如果頁面較長，使用(yong)懸浮(fu)固定(ding)的底部導航(hang)

 

       搭(da)配極(ji)簡風格(ge)的(de)設計(ji)框架，復雜的(de)網(wang)頁設計(ji)會讓(rang)用(yong)戶(hu)忽(hu)略(lve)底部導航加入一些額(e)外的(de)元素(su)來強化導航功能，確保用(yong)戶(hu)不(bu)會迷失(shi)。

 

 

Lapland

 

 

Rockwood

 

 

Hotdot

 

2、Box元素

 

      Box，盒子是一種(zhong)非常(chang)實(shi)用(yong)的(de)(de)頁面元(yuan)(yuan)素載體，在(zai)數(shu)字(zi)設計(ji)日趨多(duo)樣(yang)(yang)繁(fan)復(fu)的(de)(de)2017年(nian)，Box 元(yuan)(yuan)素簡直是設計(ji)師手(shou)里(li)的(de)(de)攻城利器。從(cong)功能上(shang)來說，它(ta)(ta)和(he)Material Design 中卡片的(de)(de)概念(nian)是高(gao)度相似的(de)(de)，但是它(ta)(ta)并(bing)沒有限(xian)制在(zai)這個風格當中。和(he)卡片一樣(yang)(yang)，Box 元(yuan)(yuan)素可以(yi)承載各種(zhong)各樣(yang)(yang)的(de)(de)內容，它(ta)(ta)非常(chang)符合今年(nian)設計(ji)師對于多(duo)樣(yang)(yang)性的(de)(de)需求。

 

      當(dang)你開(kai)始使用Box元素的時候，應(ying)該注意下面的問題： 

 

      使(shi)(shi)用(yong)Box 來創(chuang)建(jian)視(shi)(shi)覺焦點，比如下(xia)面的 Cedrick Lachot 這個網站使(shi)(shi)用(yong)Box 將(jiang)不(bu)同的元(yuan)素分層，類似下(xia)面的Feudi Di San Gregorio 這樣設計使(shi)(shi)用(yong)Box 來強化流程和視(shi)(shi)覺。Beoplay 的網站就使(shi)(shi)用(yong)堆疊的Box來創(chuang)建(jian)視(shi)(shi)覺路(lu)徑，每個Box中(zhong)承載不(bu)同的動(dong)畫，吸引(yin)用(yong)戶滾動(dong)瀏覽。

 

 

Cedrick Lachot

 

 

Feudi Di San Gregorio

 

 

Beoplay

 

3、豎線元(yuan)素(su)

 

      雖然用戶并不一定(ding)會時刻注(zhu)意到網頁背(bei)后的柵格系(xi)統，但(dan)是恰到好(hao)處的豎線元素，絕對能夠(gou)強化整個網頁的設計感。

 

      豎線元素主要還是起到(dao)裝飾(shi)性(xing)的(de)作用，和我們常(chang)見(jian)的(de)原型、矩形和橫線元素不(bu)同，豎線元素其(qi)實出(chu)現的(de)非常(chang)少(shao)，在很多時候能夠給整(zheng)個設計一種有趣(qu)、別具(ju)一格的(de)體驗。

 

      豎線元素無(wu)疑會讓網頁更加風格(ge)化，不(bu)過它(ta)的(de)侵略性并(bing)不(bu)強，所以，它(ta)的(de)應(ying)用范(fan)疇還是很(hen)廣(guang)的(de)：

 

      可以嘗試使用較細的豎線融(rong)入背景

 

      創建垂直豎線的圖像拼貼

 

       在(zai)主圖上(shang)使用豎(shu)線元(yuan)素創造視(shi)覺(jue)深度，強化層次(ci)使用豎(shu)線穿過圖片上(shang)的視(shi)覺(jue)焦點

 

      使(shi)用分(fen)(fen)屏(ping)式的(de)(de)設計，創(chuang)造出(chu)垂直分(fen)(fen)割的(de)(de)視覺體驗使(shi)用其他的(de)(de)小元(yuan)素縱向排列，在背景(jing)中使(shi)用

 

      讓元素在縱向上堆疊，而(er)不(bu)是常見的橫(heng)向排(pai)列。

 

 

Porche

 

 

Radio

 

 

7h34

      結語

 

      趨勢能夠(gou)流(liu)行多久？誰不知道，這是使(shi)用設計趨勢的風險所在。趨勢無疑是有時間限制的，但是在此刻，它是有價(jia)值和(he)意義的。