2016年網(wǎng)站設(shè)計(jì)趨勢(shì)匯總 |
|
自從iOS7發(fā)布以來，網(wǎng)絡(luò)設(shè)計(jì)世界主導(dǎo)的現(xiàn)代極簡(jiǎn)主義的改進(jìn)之外，還有一些前瞻性的變化 - 其他人并不是那么有利。 這里有一些趨勢(shì)將使互聯(lián)網(wǎng)遭受暴風(fēng)雨，而其他一些趨勢(shì)將僅僅是繼續(xù)當(dāng)前的進(jìn)化過程： |
1、扁平化設(shè)計(jì)
2010年平面設(shè)計(jì)的一個(gè)主要趨勢(shì) - 在這里留下來，但沒有一些明顯的改進(jìn)。
雖然平面設(shè)計(jì)似乎是一個(gè)相對(duì)較新的時(shí)尚，但是當(dāng)瑞士風(fēng)格成立時(shí)，您可以將其起源追溯到20世紀(jì)40年代和50年代。
像大多數(shù)設(shè)計(jì)趨勢(shì)一樣，平面風(fēng)格僅僅是一種舊設(shè)計(jì)趨勢(shì)的再現(xiàn)，它們具有一些相同的特征：極簡(jiǎn)極簡(jiǎn)，網(wǎng)格布局，圣襯線字體，以及沒有任何三維元素，如陰影和漸變。
正如Ryan Allen所說，平面設(shè)計(jì)正在演變成被稱為Flat 2.0的。換句話說，它是平面設(shè)計(jì)，但更好。
要更清楚地了解兩者之間的確切差異，只需查看上面的圖像。在左側(cè)，您可以看到完全沒有任何三維元素的設(shè)計(jì)。另一方面，右側(cè)的設(shè)計(jì)包含亮點(diǎn)，漸變陰影和陰影。
根據(jù)UX設(shè)計(jì)平臺(tái)UXPin，平面設(shè)計(jì)的新版本和改進(jìn)版使用了以下引人注目的元素，同時(shí)仍然主要是扁平化的：
- 長(zhǎng)陰影
- 明亮的色調(diào)
- 無襯線字體
- 按鈕
- 極簡(jiǎn)主義
2、功能簡(jiǎn)約
跟隨其當(dāng)前進(jìn)化軌跡的另一個(gè)趨勢(shì)是功能極簡(jiǎn)主義。 由于消除了將用戶從網(wǎng)頁的主要內(nèi)容分散的元素，簡(jiǎn)約和優(yōu)雅，極簡(jiǎn)主義將繼續(xù)主導(dǎo)網(wǎng)絡(luò)。
雖然看起來這個(gè)趨勢(shì)應(yīng)該使設(shè)計(jì)人員變得更容易，但實(shí)際上也是如此。 由于極簡(jiǎn)主義吸引了更多的關(guān)注頁面上的幾個(gè)對(duì)象 - 無論是三個(gè)，兩個(gè)還是一個(gè)主要的元素 - 這些必須以極為謹(jǐn)慎和審慎的方式來選擇。
3、獨(dú)創(chuàng)性
根據(jù)目前用定制產(chǎn)品代替大量生產(chǎn)的東西的趨勢(shì)，諸如手繪元素的原創(chuàng)作品可能會(huì)增加人氣。
那些將自定義插圖與詳細(xì)動(dòng)畫結(jié)合在一起的網(wǎng)站，最有可能跟隨那些希望將自己與數(shù)千個(gè)提供類似用戶體驗(yàn)的其他網(wǎng)站區(qū)分開來的人。
4、集裝箱式設(shè)計(jì)
在2016年，我們可能會(huì)看到更多由Pinterest和Google+等網(wǎng)站流行的卡片UI模式。 這種基于網(wǎng)格設(shè)計(jì)的和諧功能非常適合一個(gè)支持功能極簡(jiǎn)主義和優(yōu)雅的網(wǎng)絡(luò)世界。
在上面的例子中。 攝影雜志“Contrastly”使用這種網(wǎng)格圖案來實(shí)現(xiàn)直觀的用戶界面，用戶立即檢測(cè)到信息的視覺層次結(jié)構(gòu)（最新信息位于頂部，而每個(gè)連續(xù)的行以新穎的順序下降）。
使用這種設(shè)計(jì)的主要優(yōu)點(diǎn)之一是能夠以邏輯和易于理解的格式呈現(xiàn)自包含的信息。 在缺點(diǎn)上，如果沒有做到這一點(diǎn)，這個(gè)設(shè)計(jì)可能看起來很混亂，并且像Facebook或Pinterest那樣出現(xiàn)太多風(fēng)險(xiǎn)。
5、具有戲劇氣質(zhì)的排版
除了可讀性之外，排版是另一種設(shè)計(jì)選擇，它自己傳達(dá)信息。
這種排版的一些特征包括：
極大或非常小的排版
- 排版疊加在圖像上
- 以非常規(guī)方式使用的排版
- 設(shè)計(jì)您自己的排版，以反映您的品牌
- 結(jié)合上述技術(shù)（例如：非常小和大的排版）
6、增加互動(dòng)性
為了為用戶提供更加身臨其境的體驗(yàn)，互動(dòng)將繼續(xù)表征旨在吸引和吸引訪問者的網(wǎng)站，從他們登陸頁面到他們離開或購(gòu)買的那一刻。
互動(dòng)和沉浸式網(wǎng)站中的一些功能包括：
卡UI模式
微觀互動(dòng)（用戶和網(wǎng)站之間的小型互動(dòng)，加起來創(chuàng)造整體體驗(yàn)，如填寫表單）
長(zhǎng)滾動(dòng)
視差滾動(dòng)
點(diǎn)擊并滑動(dòng)
動(dòng)畫和視頻
平穩(wěn)過渡
7、創(chuàng)新動(dòng)畫
Flash的消亡并沒有導(dǎo)致動(dòng)畫的消失; 恰恰相反，CSS動(dòng)畫越來越受歡迎，為網(wǎng)絡(luò)開發(fā)人員和設(shè)計(jì)師開辟了一個(gè)全新的可能性世界
2016年使用最多的動(dòng)畫將繼續(xù)包括：
載入動(dòng)畫
- 用于顯示隱藏菜單的動(dòng)畫
- 幻燈片
- 微妙的動(dòng)作
- 運(yùn)動(dòng)由鼠標(biāo)移動(dòng)激活
8、大膽使用顏色
使用充滿活力，大膽的色彩不僅在日益普及，而且在所謂的專業(yè)場(chǎng)所也變得越來越接受。 這種趨勢(shì)特別適用于平面設(shè)計(jì)原則，因?yàn)樗柚沽藰O簡(jiǎn)網(wǎng)站的顯示過于無聊和簡(jiǎn)單化。
繼續(xù)主導(dǎo)網(wǎng)頁設(shè)計(jì)世界的幾個(gè)趨勢(shì)包括：
單色方案
- 鼓勵(lì)使用重音色
- 顏色根據(jù)卡片布局進(jìn)行修改
- 當(dāng)光標(biāo)懸停在元素上時(shí)，顏色會(huì)改變
9、英雄標(biāo)題
在2016年的另一個(gè)趨勢(shì)是使用大型高清英雄圖像，從一開始就抓住你的注意力。 這些通常顯示為英雄頭，通過使用驚人的攝影結(jié)合文本，圖像滑塊，動(dòng)畫或視頻沉浸訪客。
10、講故事和互動(dòng)
將精心設(shè)計(jì)的網(wǎng)站與異常網(wǎng)站分開的其中之一是促進(jìn)與用戶交互的方式。
在上面的例子中，“奴隸制足跡”網(wǎng)站不僅僅是提供了一個(gè)平滑的用戶體驗(yàn)，使訪問者感覺像一個(gè)故事中的人物。 這不僅允許增加交互性 - 使用指導(dǎo)性問卷作為使訪問者的網(wǎng)站而不是組織的原因的手段 - 它還實(shí)現(xiàn)講故事，這是一種強(qiáng)有力的技術(shù)，多次顯示，吸引觀眾，而不是脫節(jié)的信息 缺乏敘述。
11、長(zhǎng)滾動(dòng)
雖然有些人不太喜歡長(zhǎng)期的滾動(dòng)趨勢(shì)，但似乎在未來的一年中，我們將繼續(xù)看到更多的這種趨勢(shì)。
這種策略的主要優(yōu)點(diǎn)之一是，它與較長(zhǎng)時(shí)間的用戶相比，在同一數(shù)量的信息分散在多個(gè)頁面上的網(wǎng)站相比。
以上面的例子為例。 通過使用漫長(zhǎng)的滾動(dòng)功能，作者能夠在屏幕上以讀者自己的速度講述一個(gè)無縫自然的豐富故事。
對(duì)網(wǎng)站設(shè)計(jì)有興趣的朋友歡迎關(guān)注：力英網(wǎng)站設(shè)計(jì)公司
