2016-2017網站設計15大(dà)流行趨勢預測

1、垂直滾動
 

随着移動端流量一(yī / yì ／yí)而(ér)再再而(ér)三的(de)爆發，網頁設計開始越來(lái)越明顯地(dì / de)向着移動端傾斜，更加直接的(de)垂直滾動式的(de)頁面成爲(wéi / wèi)了(le／liǎo)大(dà)勢所趨。
幾年前，垂直滾動式的(de)頁面一(yī / yì ／yí)度流行過，當時(shí)許多人(rén)對于(yú)這(zhè)種“過于(yú)簡單”的(de)頁面設計手法并不(bù)看好，可是(shì)移動端扁平化風潮之(zhī)後，移動端正是(shì)上(shàng)位，垂直滾動頁面設計卷土重來(lái)，殺出(chū)了(le／liǎo)一(yī / yì ／yí)片天地(dì / de)。移動端上(shàng)，頁面滾動對于(yú)用戶而(ér)言是(shì)一(yī / yì ／yí)種直覺式的(de)交互，這(zhè)樣一(yī / yì ／yí)來(lái)，垂直滾動式的(de)頁面就(jiù)顯得更加自然直接了(le／liǎo)。

2、更多的(de)卡片式界面
 

卡片式界面設計是(shì) Material Design 啓發下逐步流行開的(de)設計手法，它最早出(chū)現于(yú)APP設計，随後在(zài)網頁設計中開始流行，甚至影響到(dào)許多平面設計作品。卡片式界面是(shì)一(yī / yì ／yí)種有趣又有用的(de)創舉，因爲(wéi / wèi)卡片的(de)存在(zài)可以(yǐ)更好地(dì / de)組織信息，還能讓用戶更清晰地(dì / de)交互。卡片式設計暗合了(le／liǎo)模塊化設計的(de)思想，從結構到(dào)視覺上(shàng)均是(shì)如此，這(zhè)也(yě)使得它輕松地(dì / de)成爲(wéi / wèi)了(le／liǎo)跨設備交互的(de)一(yī / yì ／yí)種載體，堆疊、移動、傳輸均可以(yǐ)有邏輯、清晰地(dì / de)完成。


3、不(bù)規則網格設計

4、混搭風格

5、視頻背景/視頻頁頭
 

視頻背景的(de)設計趨勢一(yī / yì ／yí)直在(zài)升溫。讓網頁浏覽擁有觀看電影一(yī / yì ／yí)樣的(de)用戶體驗，這(zhè)是(shì)設計師一(yī / yì ／yí)直期待的(de)事情，但是(shì)由于(yú)數字設備的(de)性能短闆，在(zài)很長的(de)一(yī / yì ／yí)段時(shí)間裏面，設計師沒法實現自己的(de)構想。但是(shì)現在(zài)不(bù)一(yī / yì ／yí)樣了(le／liǎo)，手機和(hé / huò)電腦的(de)處理能力已經相當不(bù)錯了(le／liǎo)，短視頻背景也(yě)可以(yǐ)在(zài)手機電腦上(shàng)流暢地(dì / de)播放。另外，智能電視的(de)普及，使得視頻的(de)運用有了(le／liǎo)更大(dà)的(de)空間，和(hé / huò)更多的(de)可能性。

6、動畫效果
 

和(hé / huò)視頻背景一(yī / yì ／yí)樣，動效也(yě)是(shì)目前的(de)熱門趨勢。視頻背景吃對帶寬的(de)要(yào / yāo)求更高，而(ér)小動效則是(shì)名副其實的(de)吃性能，還好對于(yú)目前的(de)數碼設備而(ér)言并不(bù)會有太大(dà)的(de)壓力。小動效可以(yǐ)在(zài)網頁的(de)各個(gè)角落出(chū)現，将用戶的(de)注意力有意識地(dì / de)吸引到(dào)特定的(de)地(dì / de)方，讓用戶流連，産生足夠的(de)驚喜，帶來(lái)愉悅的(de)體驗。
當然，動效設計中最重要(yào / yāo)的(de)因素，是(shì)動效設計的(de)目的(de)：爲(wéi / wèi)什麽要(yào / yāo)設計這(zhè)麽一(yī / yì ／yí)個(gè)動效，它真正的(de)目的(de)到(dào)底何在(zài)？

7、多層視差效果

8、專注于(yú)交互
 

同小動效關聯最緊密的(de)應該是(shì)交互。讓應用和(hé / huò)界面同用戶真正産生關聯的(de)是(shì)交互，它是(shì)溝通的(de)橋梁。真正優秀的(de)交互是(shì)潤物細無聲的(de)，它可以(yǐ)不(bù)明顯，可以(yǐ)很微妙，但是(shì)一(yī / yì ／yí)定要(yào / yāo)自然，并且爲(wéi / wèi)用戶産生效用。從最簡單的(de)提醒，到(dào)複雜而(ér)漂亮的(de)彈出(chū)框，從顯而(ér)易見的(de)操控界面，到(dào)微妙的(de)回彈微交互，交互設計界定了(le／liǎo)人(rén)和(hé / huò)機器之(zhī)間的(de)邏輯關系，将界面、動效、内容、操作串聯到(dào)一(yī / yì ／yí)起。現在(zài)設計師們更加注重統一(yī / yì ／yí)的(de)交互設計，也(yě)着迷于(yú)如何将微交互和(hé / huò)動效充分地(dì / de)結合到(dào)一(yī / yì ／yí)起，相信在(zài)新的(de)一(yī / yì ／yí)年裏，這(zhè)也(yě)是(shì)大(dà)家所關注的(de)重點。

9、更漂亮的(de)字體排版
 

簡約直觀的(de)界面已經微漂亮的(de)字體排版留足了(le／liǎo)空間。尺寸巨大(dà)，風格化的(de)字體标題和(hé / huò)LOGO依然占據着歐美網頁設計的(de)主流，國(guó)内也(yě)有更多的(de)設計師開始選擇這(zhè)樣的(de)設計。漂亮的(de)字體排版設計不(bù)僅會更加視覺化，而(ér)且可以(yǐ)爲(wéi / wèi)其他(tā)的(de)元素留下更多的(de)發揮空間。字體排版設計有一(yī / yì ／yí)個(gè)問題特别值得注意，字體排版要(yào / yāo)兼顧設計的(de)趣味性和(hé / huò)内容的(de)可讀性，優秀的(de)設計不(bù)僅設計思路優秀，而(ér)且特别注重字體的(de)搭配。

10、插畫和(hé / huò)塗鴉
 

插畫和(hé / huò)塗鴉往往能讓網頁顯得妙趣橫生，将奇思妙想注入其中。插畫的(de)類型很多，風格多樣，大(dà)到(dào)整頁的(de)背景，小到(dào)頁角的(de)圖标，都可以(yǐ)是(shì)插畫。插畫和(hé / huò)塗鴉最美妙之(zhī)處在(zài)于(yú)，它會賦予網頁以(yǐ)性格，讓它更加個(gè)性化。也(yě)正是(shì)這(zhè)種個(gè)性化，往往能同用戶産生共鳴，而(ér)這(zhè)也(yě)是(shì)它走向流行的(de)重要(yào / yāo)基礎。

11、大(dà)膽明亮的(de)色彩
 

複古一(yī / yì ／yí)直都在(zài)流行。而(ér)複古色的(de)流行，很明顯是(shì)近幾年回潮的(de)幾種流行元素之(zhī)一(yī / yì ／yí)。Material Design和(hé / huò)扁平化的(de)流行，給予了(le／liǎo)80年代風的(de)大(dà)膽、明亮的(de)色彩以(yǐ)全新的(de)舞台。在(zài)過去的(de)2015年當中，單色的(de)網站設計中，這(zhè)些明亮的(de)色彩已經得到(dào)了(le／liǎo)驗證，用戶并沒有抵觸。而(ér)在(zài)2016年裏面，這(zhè)些色彩可能會重現80年代的(de)氛圍。

12、更多的(de)圖标和(hé / huò)标識
 

圖标從來(lái)都是(shì)重頭戲，炫技用圖标，做網頁設計、UI設計、平面設計也(yě)都需要(yào / yāo)各式各樣的(de)圖标來(lái)做支撐。越來(lái)越多的(de)UIKit 開始加入圖标，而(ér)圖标合集也(yě)開始将各大(dà)圖标設計項目整合進來(lái)，打包下載，甚至制作成獨立的(de)圖标工具。得益于(yú)SVG的(de)格式優勢，許多超大(dà)圖标也(yě)可以(yǐ)以(yǐ)更小的(de)體積運用到(dào)網頁和(hé / huò)UI中。

13、現實和(hé / huò)想象之(zhī)間的(de)邊界逐步模糊
 

網站一(yī / yì ／yí)定要(yào / yāo)設計成現實的(de)，或者全是(shì)動畫的(de)麽？在(zài)網頁設計這(zhè)個(gè)事情上(shàng)，現實和(hé / huò)想象之(zhī)間的(de)邊界會越來(lái)越模糊，現實的(de)素材和(hé / huò)想象的(de)元素會在(zài)一(yī / yì ／yí)個(gè)界面中糅合，以(yǐ)一(yī / yì ／yí)種更富有張力的(de)方式呈現出(chū)來(lái)。其實這(zhè)種現實和(hé / huò)虛拟的(de)内容整合式的(de)呈現，會賦予網頁更加個(gè)性化的(de)浏覽體驗，對于(yú)設計師而(ér)言，這(zhè)種手法的(de)設計空間更大(dà)。

14、幻燈片式網頁設計
 

網站的(de)輪播圖并不(bù)是(shì)什麽新鮮的(de)東西，但是(shì)如果将它擴展到(dào)整個(gè)屏幕，就(jiù)會形成類似幻燈片一(yī / yì ／yí)樣的(de)頁面。每個(gè)占據整個(gè)屏幕的(de)幻燈片可以(yǐ)承載不(bù)同的(de)内容，不(bù)一(yī / yì ／yí)樣的(de)設計，可以(yǐ)制作成滾動式的(de)頁面，也(yě)可以(yǐ)加入延時(shí)動效。用戶可以(yǐ)左右滑動切換幻燈片，這(zhè)是(shì)一(yī / yì ／yí)種接近物理現實的(de)交互體驗。和(hé / huò)許多設計趨勢一(yī / yì ／yí)樣，這(zhè)樣的(de)網頁設計更加簡約、直覺。

15、大(dà)量的(de)空間留白