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