2017年最值得關(guān)注的7個網(wǎng)頁設(shè)計(jì)趨勢

0 評論 17154 瀏覽 27 收藏 11 分鐘

新年新趨勢,對于設(shè)計(jì)趨勢我們似乎永遠(yuǎn)都聊不完。雖然我們無法確知2017年會有怎樣的變化,但是我們可以通過2016年整個設(shè)計(jì)圈的演進(jìn),來窺見未來可能會越來越火熱的設(shè)計(jì)趨勢。

因?yàn)橐暯呛皖I(lǐng)域的差異,各家對于設(shè)計(jì)趨勢的看法各不相同,不過總體上并沒有沖突,從優(yōu)設(shè)近期的幾篇設(shè)計(jì)趨勢文章中就能看出來。UI設(shè)計(jì)趨勢的轉(zhuǎn)變,很大程度上會受到用戶交互習(xí)慣、設(shè)計(jì)語言和數(shù)碼設(shè)備的影響,《趨勢丨8個你需要知道的2017年UI設(shè)計(jì)流行趨勢》這篇文章能讓你更加明白這個道理;而從事電商行業(yè)的小婷姐則更多是從行業(yè)發(fā)展和從業(yè)經(jīng)驗(yàn)的角度來分享2017年電商設(shè)計(jì)的變化趨勢:《電商|入行5年,我寫文百篇后總結(jié)了這8條趨勢分析》;至于相對寬泛的用戶體驗(yàn)設(shè)計(jì),所探討的話題也相對更加抽象,但是依然很重要,有興趣可以看看這篇優(yōu)設(shè)重譯之后的《2017年即將流行的9大UX設(shè)計(jì)趨勢》,相信你能有所收獲。

當(dāng)然,今天我們要聊的是在網(wǎng)頁設(shè)計(jì)領(lǐng)域在2017年可能會出現(xiàn)的設(shè)計(jì)趨勢,也許并不完全精準(zhǔn),但是相信你會在接下來的一年中,越來越多地看到這些設(shè)計(jì)手法。

1、越來越多的襯線體

digital-goodness

quanta

除開我們所熟知的Helvetica,占據(jù)我們屏幕首頁的各種非襯線體字體還有很多。在過去幾年中,高清大圖的流行和跨平臺設(shè)計(jì)大行其道,這兩種客觀需求之下讓設(shè)計(jì)師慣于將加粗、易讀的非襯線體和大圖結(jié)合起來使用。

但是隨著高清屏幕的流行與普及,非襯線字體一家獨(dú)大的局面將會發(fā)生改變。

細(xì)節(jié)豐富,充滿裝飾性的非襯線體字體在現(xiàn)如今的屏幕上,已經(jīng)不存在識別度的問題了,可讀性強(qiáng)了很多。在如今高像素密度的屏幕上,擁有不同美學(xué)特征的非襯線體字體的全部特色,都能完整地呈現(xiàn)出來。

2、深色系配色

hamburger

reputation

在過去的一年當(dāng)中,大量的網(wǎng)站采用了白色和淺色的背景,采用深色背景設(shè)計(jì)的網(wǎng)站相對較少。

可是看多了也膩味。有一部分網(wǎng)站已經(jīng)開始倒轉(zhuǎn)整個配色,開始在自家的網(wǎng)站上探索深色系配色的美學(xué)。在配色上采用深色為主的設(shè)計(jì),最需要注意的就是其中色彩的對比度和內(nèi)容的可讀性,只要把握好其中的關(guān)節(jié),能夠很好的吸引訪客的注意力。

隨著深色系配色而來的,還有越來越多的單色配色方案,更極端一些的,干脆就只在純色的深色背景上搭配照片。這樣的配色手法乍一看很單調(diào),但是深色背景下,流行色會顯得更加突出,也更容易鼓勵訪客與網(wǎng)站進(jìn)行互動。

3、中性、自然的配色方案

villes

pvalentine

如果你一直關(guān)心流行色或者優(yōu)設(shè)的話,你肯定會知道潘通最新發(fā)布的2017 年流行色——草木綠,這一自然氣息濃郁的色彩被大家稱為“新中性色”。

在未來的一年當(dāng)中,將會出現(xiàn)越來越多充滿自然特色的配色方案,而其中許多配色方案會選擇使用草木綠來搭配。

4、幾何元素

anthe

hive-boxx

從矩形到三角形,從方形到圓形,幾何圖形已經(jīng)越來越多地出現(xiàn)在網(wǎng)頁設(shè)計(jì)當(dāng)中。好的設(shè)計(jì)不會讓這些幾何圖形在整體中過于突兀,而是盡量融入,為用戶提供視覺引導(dǎo),強(qiáng)化交互體驗(yàn),提供行動召喚,或者讓整個視覺更加有趣。

網(wǎng)頁中幾何元素的設(shè)計(jì)要如何設(shè)計(jì)好呢?技巧在于,盡量采用簡單的設(shè)計(jì)。例如,你喜歡環(huán)狀的元素,那么你可以將它作為一個固定的元素,在整個設(shè)計(jì)中使用,它可以承載圖標(biāo),也可以用作團(tuán)隊(duì)成員頭像外框。

幾何元素的另外一種用法,是將多種圖形做成拼貼式的背景裝飾元素。幾何元素尺寸較小的時候,可以使用明亮的色彩,讓整個設(shè)計(jì)顯得更加繽紛有趣。如果幾何圖形尺寸較大,就不能這么用了,而是要通過著色讓他能和其他元素構(gòu)成對比,又不能太過于突兀,比如Hive Boxx 這個頁面的設(shè)計(jì)。

5、超大字體

beat-cycle

lonely-leap

有一些設(shè)計(jì)師已經(jīng)開始這樣做設(shè)計(jì)了,不過隨后你會在網(wǎng)頁設(shè)計(jì)中看到更多的超大字體的設(shè)計(jì)。字體尺寸拉大之后,搭配多樣的樣式、飛濺的色彩,這些尺寸超大的文字如今已經(jīng)變得越來越重要了。

超大字體流行背后的邏輯是頁面需要通過它們抓住用戶的注意力,每個設(shè)計(jì)師都需要讓特定的部分在整個設(shè)計(jì)中脫穎而出。擁擠的瀏覽器頁面中,要怎樣才能抓住用戶的注意力呢?肯定是強(qiáng)視覺化的內(nèi)容,這樣一來,超大字體的流行就解釋得通了。

6、虛擬現(xiàn)實(shí)

balloon-earth

bmw

對,虛擬現(xiàn)實(shí)是目前最火熱的趨勢,并且它已經(jīng)入侵到了網(wǎng)頁設(shè)計(jì)領(lǐng)域了。

許多設(shè)計(jì)師已經(jīng)開始在他們自己的網(wǎng)頁中嘗試設(shè)計(jì)類似虛擬現(xiàn)實(shí)的效果。從游戲到360度視頻,設(shè)計(jì)師試圖讓用戶無需VR眼鏡而擁有環(huán)繞的真實(shí)視野。雖然技術(shù)上和VR幾乎完全不沾邊,但是它同樣是追求真實(shí)的體驗(yàn)。

目前,這種設(shè)計(jì)還沒有完善的規(guī)則,許多類VR的網(wǎng)頁設(shè)計(jì)還是需要設(shè)計(jì)師動腦子想辦法來實(shí)現(xiàn),非??简?yàn)設(shè)計(jì)技巧。

7、新的導(dǎo)航模式

okinawa

yoke-image

如果你一直在關(guān)注新的設(shè)計(jì)趨勢,你會發(fā)現(xiàn)設(shè)計(jì)師一直在嘗試尋求不同的導(dǎo)航模式。當(dāng)然,截至目前,絕大多數(shù)的頁面依然還是將導(dǎo)航掛著頁面的頂部。

隨著不同的尺寸比例屏幕、不同的設(shè)備的出現(xiàn),新的導(dǎo)航模式擁有了存在的可能性。首先流行開來的是屏幕側(cè)邊導(dǎo)航設(shè)計(jì)和隱藏式的導(dǎo)航設(shè)計(jì)。

這種看似微小的變化,讓網(wǎng)站的瀏覽方式和體驗(yàn)出現(xiàn)了翻天覆地的變化:它們讓頁面變得更加時尚,可以兼容不同的屏幕需求,甚至讓整個網(wǎng)頁布局都能進(jìn)行全新的設(shè)計(jì)了。

隱藏式菜單設(shè)計(jì)并不是讓導(dǎo)航完全隱藏,而是讓整個屏幕都成了呼出菜單的控件,這樣的設(shè)計(jì)已經(jīng)被很多用戶所理解并熟知,它在移動端上的應(yīng)用已經(jīng)相當(dāng)?shù)膹V泛。

結(jié)語

今天所聊的這7個網(wǎng)頁設(shè)計(jì)趨勢,其實(shí)只是諸多趨勢中相對明顯的7個,如果你仔細(xì)觀察還能發(fā)現(xiàn)更多。

 

原文地址:designshack

原文作者:CARRIE COUSINS

譯者:@陳子木

譯文來自:優(yōu)設(shè)

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!