十大年度網頁設計趨勢欣賞
怎么樣才能讓網(wang)(wang)站(zhan)看起來最潮最新？在適者生存的(de)(de)規則下(xia)，每一(yi)年(nian)(nian)都會篩選出哪些設計風(feng)格是(shi)趨(qu)勢(shi)(shi)指向，哪些又(you)是(shi)過時的(de)(de)。隨著2018年(nian)(nian)即將結束(shu)，我們現在可以看到什(shen)么才是(shi)2015年(nian)(nian)最成功網(wang)(wang)頁設計趨(qu)勢(shi)(shi)，這(zhe)些被(bei)定義為年(nian)(nian)度(du)設計風(feng)格的(de)(de)趨(qu)勢(shi)(shi)將會強(qiang)勢(shi)(shi)地延伸(shen)到新的(de)(de)一(yi)年(nian)(nian)。本期國外精品翻譯教程就同(tong)大家(jia)分享2015年(nian)(nian)十大網(wang)(wang)頁設計趨(qu)勢(shi)(shi)，一(yi)起來看看：
一、長滾動頁面
例(li)子：Shadow
回顧(gu)2018！十大年度網頁設計趨勢欣賞
隨(sui)著智(zhi)能手機的(de)興起，移動(dong)端瀏(liu)覽網(wang)頁的(de)數量已超過傳統桌面(mian)(mian)端，2015年所看到的(de)網(wang)頁都在(zai)向小屏幕(mu)(mu)靠(kao)攏（相對桌面(mian)(mian)顯示屏）。就如其他悉(xi)數在(zai)列的(de)設(she)計(ji)(ji)趨勢一(yi)樣，長滾動(dong)網(wang)頁在(zai)響應設(she)計(ji)(ji)使用方面(mian)(mian)正變得越(yue)(yue)來(lai)越(yue)(yue)常見(jian)，因為小屏幕(mu)(mu)就意味著長滾動(dong)。
在(zai)(zai)過去的(de)(de)(de)(de)設(she)計(ji)觀念中(zhong)，設(she)計(ji)師(shi)都(dou)(dou)是不想讓內(nei)容縮(suo)在(zai)(zai)一起(qi)，需要拉(la)幾(ji)下才能看到全部內(nei)容，但(dan)新的(de)(de)(de)(de)研(yan)究表明用(yong)戶的(de)(de)(de)(de)習慣在(zai)(zai)改變，不再(zai)討厭拉(la)滾動條(tiao)。現在(zai)(zai)，設(she)計(ji)師(shi)和用(yong)戶都(dou)(dou)意(yi)識到長滾動的(de)(de)(de)(de)價值所(suo)在(zai)(zai)：更(geng)高(gao)的(de)(de)(de)(de)創作自由度(du)、更(geng)強(qiang)的(de)(de)(de)(de)內(nei)容故事性、更(geng)有效的(de)(de)(de)(de)交互應用(yong)以(yi)及(ji)簡易化的(de)(de)(de)(de)導航(hang)（如果網站(zhan)足(zu)夠小的(de)(de)(de)(de)話(hua)）。
但是，長(chang)滾動(dong)(dong)也(ye)會(hui)帶來一些代價，比(bi)如(ru)SEO效(xiao)果(guo)(guo)弱化、加載時(shi)間變長(chang)等。由此看來，長(chang)滾動(dong)(dong)對于(yu)(yu)移動(dong)(dong)端流量大(da)或者頻繁更新內容的(de)網(wang)站(zhan)的(de)應用效(xiao)果(guo)(guo)最好，而對于(yu)(yu)注重如(ru)視頻等媒體的(de)網(wang)站(zhan)的(de)效(xiao)果(guo)(guo)就不是那么有(you)效(xiao)。
應用技巧：
1.使用粘性導航菜單或者彈出選項菜單來提(ti)升導航效果(guo)。
2.長滾動和單頁面網站容易讓用戶不知所措，設置好重慶影視公司導航可以(yi)避免(mian)這種情況的出現。
3.利用視差(cha)效果和滾(gun)動(dong)觸發動(dong)畫等突出長滾(gun)動(dong)的優勢所在。
二、卡片式布局
例子(zi)：Behance
回顧2015！十大年度網頁設計趨(qu)勢欣賞
圖02
隨著移動設(she)備(bei)的(de)(de)興起而帶來的(de)(de)實用性趨勢之一是卡(ka)片(pian)式布(bu)(bu)局(ju)。卡(ka)片(pian)式布(bu)(bu)局(ju)的(de)(de)優(you)點(dian)是以干(gan)凈和(he)有(you)組織的(de)(de)形式展現豐富的(de)(de)內(nei)容。這樣的(de)(de)布(bu)(bu)局(ju)讓網站很好地適應不(bu)同的(de)(de)瀏覽(lan)方式和(he)不(bu)同類型的(de)(de)內(nei)容，特別是有(you)鏈接到外(wai)部(bu)網站的(de)(de)，用戶能直(zhi)觀地知(zhi)道點(dian)擊(ji)卡(ka)片(pian)內(nei)容帶來的(de)(de)相(xiang)關帖子。
卡片式布局可以將(jiang)內容(rong)很好地劃分為各(ge)個小部(bu)分，而每一個小部(bu)分都是瀏覽者想要(yao)知道的：題目、主(zhu)要(yao)插圖、描(miao)述或者標簽、帶有(you)收藏(zang)評論等選項的控(kong)制面板(ban)。
卡片式布局有(you)良好(hao)的響應設計體驗(yan)，因為它們的行和(he)列都可以自動重新排列，適應不同的屏幕尺寸。
應用技巧：
1.令整個卡片都可以點擊，而不只是圖像或者文字帶有鏈接。根據費茨法則，重慶動畫公司這會讓用戶更加(jia)容易(yi)和(he)愿意點擊進去。
2.采用卡片(pian)式布(bu)(bu)局(ju)時，添(tian)加動(dong)畫效果(guo)(guo)，特別是懸停觸發效果(guo)(guo)。小(xiao)按鈕(niu)顏色的變化或(huo)者整個卡片(pian)的改變，甚至旋轉或(huo)者轉動(dong)效果(guo)(guo)，都可以讓人對(dui)高(gao)度機(ji)構化的布(bu)(bu)局(ju)感到有活力，這樣新穎(ying)設計可以讓你的網站在其他卡片(pian)式布(bu)(bu)局(ju)網站脫穎(ying)而(er)出。
3.卡(ka)(ka)片式布局(ju)的缺點(dian)在于(yu)卡(ka)(ka)片之間的空(kong)間，對(dui)于(yu)卡(ka)(ka)片間的間隙要清(qing)晰表示好，不要讓用戶去猜這些是干啥用的。
三、新版扁平化設計
例(li)子(zi)：Toyota
回(hui)顧(gu)2015！十大年度網頁設計趨勢(shi)欣(xin)賞
圖03
在多年前，擬真設(she)計(ji)曾經是(shi)現代設(she)計(ji)趨勢之一，而扁平化設(she)計(ji)則是(shi)它的對立面。
然而，今天(tian)的(de)(de)扁(bian)平化設(she)(she)計(ji)已經遠遠超出原來設(she)(she)計(ji)起源。經過(guo)全新和微妙(miao)蛻變(bian)后(hou)的(de)(de)扁(bian)平化設(she)(she)計(ji)，提(ti)供了更多的(de)(de)機會來展示設(she)(she)計(ji)細(xi)節以及流行，Ryan Allen稱之為“扁(bian)平化設(she)(she)計(ji)2.0版本”：鮮亮色彩和高光效果、色彩漸變(bian)與下落式陰影、更加有(you)深(shen)度的(de)(de)細(xi)節設(she)(she)計(ji)。
并且(qie)最(zui)重要的是，扁(bian)平化(hua)(hua)設計(ji)仍然保留其核心設計(ji)風(feng)格。常見的簡單細小的裝飾沒有丟掉。卡(ka)通化(hua)(hua)圖案、易讀性排版、鮮艷的顏色等設計(ji)風(feng)格都一(yi)一(yi)保存，讓人(ren)一(yi)眼就能明白是扁(bian)平化(hua)(hua)設計(ji)。
應用技巧：
1.幽靈按鈕只需簡單的線條和透明背景，卻成為扁平化設計中的趨勢之一。重慶3d動畫制作更(geng)加興(xing)慶(qing)的(de)(de)是(shi)，幽(you)靈(ling)按(an)鈕(niu)同(tong)樣可(ke)以(yi)用于(yu)扁平化設計(ji)以(yi)為的(de)(de)創(chuang)作(zuo)中(zhong)：簡單(dan)明了的(de)(de)樣式(shi)不(bu)會轉(zhuan)移用戶對漂亮(liang)背景(jing)的(de)(de)關注(zhu)度，讓用戶的(de)(de)注(zhu)意(yi)力都集中(zhong)在最突出的(de)(de)圖片(pian)中(zhong)去。
2.扁平化設計采用非常簡單的圖案，可(ke)以(yi)讓網頁讓加(jia)載速度加(jia)快，這樣的設計特點(dian)可(ke)以(yi)讓響應(ying)設計做得非常到位(wei)。
3.扁平化(hua)設(she)(she)(she)計與極簡設(she)(she)(she)計趨勢(shi)的(de)對(dui)比見本文第10條(tiao)。兩者(zhe)都同樣通過簡化(hua)式設(she)(she)(she)計，達(da)到(dao)“少即多”的(de)設(she)(she)(she)計效果。
2強力動畫效果、Hero圖片
四(si)、強力動畫效果(guo)
例子：Bugaboo
回顧2015！十(shi)大年(nian)度(du)網頁(ye)設計(ji)趨勢欣(xin)賞
圖04
運(yun)動物體(ti)總能吸引(yin)到眼(yan)睛的注意(yi)，動畫(hua)(hua)可以影響人第一(yi)眼(yan)看到的視覺效(xiao)果。通過潛(qian)在的與諸如大小、顏色等(deng)傳統網(wang)頁設計方面(mian)的對比，動畫(hua)(hua)效(xiao)果比其(qi)他的媒(mei)介更能傳達某種(zhong)元素或者信(xin)息。
動(dong)畫同時也有顯示關聯性的(de)功能(neng)。想象一下，一個窗口正在最小化(hua)，然(ran)后飛(fei)進菜(cai)單中，這(zhe)個動(dong)畫首先讓人知道(dao)這(zhe)樣(yang)的(de)行(xing)為是存在的(de)，然(ran)后用(yong)戶就知道(dao)能(neng)在哪里找(zhao)到剛才的(de)窗口。
如下所示(shi)UXPin采用無碼動畫編織器的飛進(jin)菜單，將這個原(yuan)理完美演繹。
回顧2015！十(shi)大年度(du)網頁(ye)設計趨勢(shi)欣賞
圖05
動(dong)畫(hua)最基本(ben)的(de)功能(neng)(neng)可(ke)以在沉悶的(de)變化(hua)中(zhong)凸顯出來。一個懸停動(dong)畫(hua)比(bi)簡單的(de)顏色變化(hua)更能(neng)(neng)顯示出一個鏈接的(de)可(ke)點擊性。
應用技巧：
1.Web和(he)App動畫仍然可以遵(zun)循經典的(de)12條迪士(shi)尼(ni)動畫設(she)計原則。
2.長滾(gun)動(dong)網(wang)頁非常依(yi)賴于動(dong)畫(hua)效果來創造平(ping)滑的(de)滾(gun)動(dong)效果。做得好的(de)時候，由滾(gun)動(dong)觸發的(de)動(dong)畫(hua)效果可以讓網(wang)站極具趣味，讓瀏覽(lan)者身臨其境(jing)。
3.設計(ji)好加載動畫(hua)的(de)好處多多。其(qi)中，它們就能(neng)告訴用戶大概等待的(de)時(shi)間，并且能(neng)在等待過程(cheng)中欣賞到漂亮的(de)動畫(hua)，而(er)不會感到浪費(fei)時(shi)間。
4.在(zai)背景(jing)(jing)中(zhong)巧妙增(zeng)加(jia)動(dong)畫(hua)，可以激(ji)活整(zheng)個頁面，讓(rang)畫(hua)面不再沉悶，但要注意不要做得太(tai)過。因(yin)為(wei)太(tai)多(duo)的(de)背景(jing)(jing)動(dong)畫(hua)會分(fen)散用戶(hu)對主要內容的(de)注意力，更不用說太(tai)多(duo)動(dong)畫(hua)加(jia)載帶來長時間等待。
