十大年度網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)欣賞
怎么樣才能讓網(wǎng)站看起來(lái)最潮最新？在適者生存的規(guī)則下，每一年都會(huì)篩選出哪些設(shè)計(jì)風(fēng)格是趨勢(shì)指向，哪些又是過(guò)時(shí)的。隨著2018年即將結(jié)束，我們現(xiàn)在可以看到什么才是2015年最成功網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)，這些被定義為年度設(shè)計(jì)風(fēng)格的趨勢(shì)將會(huì)強(qiáng)勢(shì)地延伸到新的一年。本期國(guó)外精品翻譯教程就同大家分享2015年十大網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)，一起來(lái)看看：
一、長(zhǎng)滾動(dòng)頁(yè)面
例子：Shadow
回顧2018！十大年度網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)欣賞
隨著智能手機(jī)的興起，移動(dòng)端瀏覽網(wǎng)頁(yè)的數(shù)量已超過(guò)傳統(tǒng)桌面端，2015年所看到的網(wǎng)頁(yè)都在向小屏幕靠攏（相對(duì)桌面顯示屏）。就如其他悉數(shù)在列的設(shè)計(jì)趨勢(shì)一樣，長(zhǎng)滾動(dòng)網(wǎng)頁(yè)在響應(yīng)設(shè)計(jì)使用方面正變得越來(lái)越常見(jiàn)，因?yàn)樾∑聊痪鸵馕吨L(zhǎng)滾動(dòng)。
在過(guò)去的設(shè)計(jì)觀念中，設(shè)計(jì)師都是不想讓內(nèi)容縮在一起，需要拉幾下才能看到全部?jī)?nèi)容，但新的研究表明用戶的習(xí)慣在改變，不再討厭拉滾動(dòng)條?，F(xiàn)在，設(shè)計(jì)師和用戶都意識(shí)到長(zhǎng)滾動(dòng)的價(jià)值所在：更高的創(chuàng)作自由度、更強(qiáng)的內(nèi)容故事性、更有效的交互應(yīng)用以及簡(jiǎn)易化的導(dǎo)航（如果網(wǎng)站足夠小的話）。
但是，長(zhǎng)滾動(dòng)也會(huì)帶來(lái)一些代價(jià)，比如SEO效果弱化、加載時(shí)間變長(zhǎng)等。由此看來(lái)，長(zhǎng)滾動(dòng)對(duì)于移動(dòng)端流量大或者頻繁更新內(nèi)容的網(wǎng)站的應(yīng)用效果最好，而對(duì)于注重如視頻等媒體的網(wǎng)站的效果就不是那么有效。
應(yīng)用技巧：
1.使用粘性導(dǎo)航菜單或者彈出選項(xiàng)菜單來(lái)提升導(dǎo)航效果。
2.長(zhǎng)滾動(dòng)和單頁(yè)面網(wǎng)站容易讓用戶不知所措，設(shè)置好重慶影視公司導(dǎo)航可以避免這種情況的出現(xiàn)。
3.利用視差效果和滾動(dòng)觸發(fā)動(dòng)畫等突出長(zhǎng)滾動(dòng)的優(yōu)勢(shì)所在。
二、卡片式布局
例子：Behance
回顧2015！十大年度網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)欣賞
圖02
隨著移動(dòng)設(shè)備的興起而帶來(lái)的實(shí)用性趨勢(shì)之一是卡片式布局?？ㄆ讲季值膬?yōu)點(diǎn)是以干凈和有組織的形式展現(xiàn)豐富的內(nèi)容。這樣的布局讓網(wǎng)站很好地適應(yīng)不同的瀏覽方式和不同類型的內(nèi)容，特別是有鏈接到外部網(wǎng)站的，用戶能直觀地知道點(diǎn)擊卡片內(nèi)容帶來(lái)的相關(guān)帖子。
卡片式布局可以將內(nèi)容很好地劃分為各個(gè)小部分，而每一個(gè)小部分都是瀏覽者想要知道的：題目、主要插圖、描述或者標(biāo)簽、帶有收藏評(píng)論等選項(xiàng)的控制面板。
卡片式布局有良好的響應(yīng)設(shè)計(jì)體驗(yàn)，因?yàn)樗鼈兊男泻土卸伎梢宰詣?dòng)重新排列，適應(yīng)不同的屏幕尺寸。
應(yīng)用技巧：
1.令整個(gè)卡片都可以點(diǎn)擊，而不只是圖像或者文字帶有鏈接。根據(jù)費(fèi)茨法則，重慶動(dòng)畫公司這會(huì)讓用戶更加容易和愿意點(diǎn)擊進(jìn)去。
2.采用卡片式布局時(shí)，添加動(dòng)畫效果，特別是懸停觸發(fā)效果。小按鈕顏色的變化或者整個(gè)卡片的改變，甚至旋轉(zhuǎn)或者轉(zhuǎn)動(dòng)效果，都可以讓人對(duì)高度機(jī)構(gòu)化的布局感到有活力，這樣新穎設(shè)計(jì)可以讓你的網(wǎng)站在其他卡片式布局網(wǎng)站脫穎而出。
3.卡片式布局的缺點(diǎn)在于卡片之間的空間，對(duì)于卡片間的間隙要清晰表示好，不要讓用戶去猜這些是干啥用的。
三、新版扁平化設(shè)計(jì)
例子：Toyota
回顧2015！十大年度網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)欣賞
圖03
在多年前，擬真設(shè)計(jì)曾經(jīng)是現(xiàn)代設(shè)計(jì)趨勢(shì)之一，而扁平化設(shè)計(jì)則是它的對(duì)立面。
然而，今天的扁平化設(shè)計(jì)已經(jīng)遠(yuǎn)遠(yuǎn)超出原來(lái)設(shè)計(jì)起源。經(jīng)過(guò)全新和微妙蛻變后的扁平化設(shè)計(jì)，提供了更多的機(jī)會(huì)來(lái)展示設(shè)計(jì)細(xì)節(jié)以及流行，Ryan Allen稱之為“扁平化設(shè)計(jì)2.0版本”：鮮亮色彩和高光效果、色彩漸變與下落式陰影、更加有深度的細(xì)節(jié)設(shè)計(jì)。
并且最重要的是，扁平化設(shè)計(jì)仍然保留其核心設(shè)計(jì)風(fēng)格。常見(jiàn)的簡(jiǎn)單細(xì)小的裝飾沒(méi)有丟掉?？ㄍɑ瘓D案、易讀性排版、鮮艷的顏色等設(shè)計(jì)風(fēng)格都一一保存，讓人一眼就能明白是扁平化設(shè)計(jì)。
應(yīng)用技巧：
1.幽靈按鈕只需簡(jiǎn)單的線條和透明背景，卻成為扁平化設(shè)計(jì)中的趨勢(shì)之一。重慶3d動(dòng)畫制作更加興慶的是，幽靈按鈕同樣可以用于扁平化設(shè)計(jì)以為的創(chuàng)作中：簡(jiǎn)單明了的樣式不會(huì)轉(zhuǎn)移用戶對(duì)漂亮背景的關(guān)注度，讓用戶的注意力都集中在最突出的圖片中去。
2.扁平化設(shè)計(jì)采用非常簡(jiǎn)單的圖案，可以讓網(wǎng)頁(yè)讓加載速度加快，這樣的設(shè)計(jì)特點(diǎn)可以讓響應(yīng)設(shè)計(jì)做得非常到位。
3.扁平化設(shè)計(jì)與極簡(jiǎn)設(shè)計(jì)趨勢(shì)的對(duì)比見(jiàn)本文第10條。兩者都同樣通過(guò)簡(jiǎn)化式設(shè)計(jì)，達(dá)到“少即多”的設(shè)計(jì)效果。
2強(qiáng)力動(dòng)畫效果、Hero圖片
四、強(qiáng)力動(dòng)畫效果
例子：Bugaboo
回顧2015！十大年度網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)欣賞
圖04
運(yùn)動(dòng)物體總能吸引到眼睛的注意，動(dòng)畫可以影響人第一眼看到的視覺(jué)效果。通過(guò)潛在的與諸如大小、顏色等傳統(tǒng)網(wǎng)頁(yè)設(shè)計(jì)方面的對(duì)比，動(dòng)畫效果比其他的媒介更能傳達(dá)某種元素或者信息。
動(dòng)畫同時(shí)也有顯示關(guān)聯(lián)性的功能。想象一下，一個(gè)窗口正在最小化，然后飛進(jìn)菜單中，這個(gè)動(dòng)畫首先讓人知道這樣的行為是存在的，然后用戶就知道能在哪里找到剛才的窗口。
如下所示UXPin采用無(wú)碼動(dòng)畫編織器的飛進(jìn)菜單，將這個(gè)原理完美演繹。
回顧2015！十大年度網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)欣賞
圖05
動(dòng)畫最基本的功能可以在沉悶的變化中凸顯出來(lái)。一個(gè)懸停動(dòng)畫比簡(jiǎn)單的顏色變化更能顯示出一個(gè)鏈接的可點(diǎn)擊性。
應(yīng)用技巧：
1.Web和App動(dòng)畫仍然可以遵循經(jīng)典的12條迪士尼動(dòng)畫設(shè)計(jì)原則。
2.長(zhǎng)滾動(dòng)網(wǎng)頁(yè)非常依賴于動(dòng)畫效果來(lái)創(chuàng)造平滑的滾動(dòng)效果。做得好的時(shí)候，由滾動(dòng)觸發(fā)的動(dòng)畫效果可以讓網(wǎng)站極具趣味，讓瀏覽者身臨其境。
3.設(shè)計(jì)好加載動(dòng)畫的好處多多。其中，它們就能告訴用戶大概等待的時(shí)間，并且能在等待過(guò)程中欣賞到漂亮的動(dòng)畫，而不會(huì)感到浪費(fèi)時(shí)間。
4.在背景中巧妙增加動(dòng)畫，可以激活整個(gè)頁(yè)面，讓畫面不再沉悶，但要注意不要做得太過(guò)。因?yàn)樘嗟谋尘皠?dòng)畫會(huì)分散用戶對(duì)主要內(nèi)容的注意力，更不用說(shuō)太多動(dòng)畫加載帶來(lái)長(zhǎng)時(shí)間等待。
