PART Vision｜2017全球UI交互設(shè)計(jì)趨勢(shì)（上）

時(shí)間：2023-10-16 03:18:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-16 03:18:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

PART Vision｜2017全球UI交互設(shè)計(jì)趨勢(shì)（上）：UI 的設(shè)計(jì)風(fēng)格每一年都在發(fā)生變化。就像是扁平化、手勢(shì)、微交互、卡片式成為過(guò)去兩年中的關(guān)鍵詞一樣?？傆幸恍┖玫脑O(shè)計(jì)總是想方設(shè)法吸引你，它們大批涌現(xiàn)，形成某種趨勢(shì)。在這些趨勢(shì)里面，有的會(huì)持續(xù)性地流行好幾年，也有一些，會(huì)被淘汰。幾乎每年年底，都會(huì)有一些網(wǎng)站，根據(jù)過(guò)去一年中 UI 設(shè)計(jì)風(fēng)格的更迭，來(lái)預(yù)測(cè)下一年的趨勢(shì)。

那就跟著PARTfolio君來(lái)迅速掃描2017年全球UI設(shè)計(jì)最新最全趨勢(shì)，對(duì)UI設(shè)計(jì)感興趣的設(shè)計(jì)師和未來(lái)設(shè)計(jì)師們千萬(wàn)別錯(cuò)過(guò)！

有沉浸感的全屏式設(shè)計(jì)
Immersive, full-screen video

Immersive 沉浸感，說(shuō)的是一種讓你猶如身臨其境的模擬真實(shí)的效果。就像最初的美術(shù)來(lái)自于對(duì)現(xiàn)實(shí)的模擬一樣，這種擬真的設(shè)計(jì)，至今仍然受用。因而我們能看到像這樣的網(wǎng)頁(yè)設(shè)計(jì)，它以全屏式的大幅圖像和視頻為主，以一種簡(jiǎn)單卻有效的方式，迅速把你帶入它所設(shè)定的情境之中。




Campos Coffee

這是一個(gè)不錯(cuò)的網(wǎng)頁(yè)設(shè)計(jì)的例子，來(lái)自 Campos Coffee，動(dòng)態(tài)的全屏設(shè)計(jì)簡(jiǎn)單卻蘊(yùn)含豐富的信息。


Dutch airline KLM's magazine iFly50

技術(shù)的發(fā)展給這種擬真化的表達(dá)提供了更多的選擇。與靜態(tài)的圖像不同，視頻有著更為強(qiáng)烈的“敘事性”。盡管圖像在長(zhǎng)久以來(lái)始終占據(jù) UI 和網(wǎng)頁(yè)設(shè)計(jì)的主流，不過(guò)，在 2017 年，也許全屏式的互動(dòng)視頻設(shè)計(jì)會(huì)更吸引你的眼球。

長(zhǎng)滾動(dòng)式設(shè)計(jì)
Long form content and scrolling

“滾動(dòng)”，并不算是一個(gè)新的設(shè)計(jì)趨勢(shì)。在過(guò)去的幾年內(nèi)，滾動(dòng)式的閱讀體驗(yàn)在小屏幕設(shè)備上的發(fā)展尤為突出。想想你手機(jī)上的 app，一定有很多采取的是這種滾動(dòng)式設(shè)計(jì)。


National Geographic

正如你所看到的這個(gè)國(guó)家地理的官方網(wǎng)站一樣，這種滾動(dòng)設(shè)計(jì)的好處非常直白：它提供給用戶(hù)一個(gè)更為流暢的瀏覽體驗(yàn)，以一個(gè)線性的方式，引導(dǎo)用戶(hù)在短時(shí)間內(nèi)不受打擾地閱讀到更多的內(nèi)容。

Riding the new silk road by New York Times

現(xiàn)在，“滾動(dòng)”從小屏幕越來(lái)越多地轉(zhuǎn)向大屏幕設(shè)計(jì)。也有很多的設(shè)計(jì)師在研究大屏幕上的“滾動(dòng)”機(jī)制如何處理，才能帶來(lái)更為卓越的使用感受。在 2017 年，這種長(zhǎng)條狀的滾動(dòng)式網(wǎng)頁(yè)設(shè)計(jì)也許將成為主流。

漸變色的運(yùn)用
Gradients and vivid colours

2013 年開(kāi)始盛行的扁平化設(shè)計(jì)中，強(qiáng)調(diào)簡(jiǎn)潔的功能界面區(qū)分，拋棄多余的元素。至今，這種設(shè)計(jì)風(fēng)格依然有著借鑒的價(jià)值。不過(guò)，隨著扁平化的流行，它的弊端也開(kāi)始顯現(xiàn)出來(lái)：一時(shí)之間幾乎是所有的平面設(shè)計(jì)都在強(qiáng)調(diào)扁平化，這使得它們趨于雷同，看上去毫無(wú)個(gè)性。想要在扁平化設(shè)計(jì)中，加點(diǎn)不一樣的元素讓它更為生動(dòng)，漸變色不失為一個(gè)好的選擇。


Spotify

Spotify 的網(wǎng)站，就是一個(gè)極好的例子。它的主頁(yè)面把 2016 年最流行的粉色和藍(lán)色糅合，產(chǎn)生了雙色漸變，看起來(lái)十分絢麗。再往下拉，就變成了橙色的漸變色，顯得十分有夏天的感覺(jué)。


Spotify

雖然此前設(shè)計(jì)界對(duì)于 Instagram 的扁平化漸變色 logo 的設(shè)計(jì)褒貶不一，不過(guò)，它也意味著一種設(shè)計(jì)的趨勢(shì)：漸變色能讓設(shè)計(jì)看起來(lái)更活潑有趣，毫無(wú)疑問(wèn)，它是 2017 年的十大設(shè)計(jì)趨勢(shì)之一。

插畫(huà)的運(yùn)用
Illustrations

插畫(huà)可以讓設(shè)計(jì)具有“性格”，比起傳統(tǒng)的攝影，它是一種直觀的與用戶(hù)進(jìn)行情感交流的視覺(jué)語(yǔ)言。對(duì)于品牌來(lái)說(shuō)，沒(méi)有什么能比用插畫(huà)來(lái)塑造品牌形象、傳遞品牌性格還要簡(jiǎn)單有效的方式了。作為一種有趣的情感表達(dá)，插畫(huà)可以是量身定制的，因而它能幫助獲得用戶(hù)的信任，讓人感覺(jué)更為親切。

Dropbox

Dropbox 和 payplan 都是不錯(cuò)的例子，它們的首頁(yè)以簡(jiǎn)筆畫(huà)的形式很直觀地表達(dá)了產(chǎn)品的幾大功能，能夠幫助用戶(hù)快速理解。





payplan

此外，插畫(huà)的實(shí)現(xiàn)途徑并不唯一。它提供多種創(chuàng)意方向的選擇，不同的插畫(huà)也可以傳遞不同的情緒。比如簡(jiǎn)筆風(fēng)的手繪看上去單純可愛(ài)，精細(xì)繁復(fù)的筆觸可以產(chǎn)生一種“高級(jí)”質(zhì)感，當(dāng)插畫(huà)與攝影結(jié)合，則給人一種虛實(shí)難辨的奇幻感。

打破網(wǎng)格設(shè)計(jì)
Breaking the grid

對(duì)于大多數(shù)設(shè)計(jì)師而言，網(wǎng)格一直以來(lái)都是設(shè)計(jì)的基礎(chǔ)，它能夠保證一致性、平衡性和某種節(jié)奏。此外，一個(gè)用戶(hù)很熟悉的網(wǎng)格，也代表著一個(gè)不會(huì)出錯(cuò)的選擇，起碼用戶(hù)在看到這個(gè)設(shè)計(jì)的時(shí)候，可以不用指導(dǎo)地、下意識(shí)地去使用網(wǎng)站或者應(yīng)用程序。然而，網(wǎng)格也意味著限制。在一個(gè)有限的網(wǎng)格內(nèi)，富有才華的設(shè)計(jì)師，很難去完整地表現(xiàn)他的天馬行空。于是，有些設(shè)計(jì)師正在嘗試突破傳統(tǒng)的數(shù)字體驗(yàn)，打破網(wǎng)格。


Red Collar Digital

Red Collar Digital 的頁(yè)面以云為背景，前景是滾動(dòng)式的圖文內(nèi)容，沒(méi)有網(wǎng)格的限制，顯得清新且自由。


SERGEY MAKHNO Architects

無(wú)疑，這種無(wú)網(wǎng)格的創(chuàng)造性設(shè)計(jì)可以充分發(fā)揮設(shè)計(jì)師的奇思妙想，讓網(wǎng)頁(yè)看起來(lái)更加靈活自由。不過(guò)，這種設(shè)計(jì)搞不好也會(huì)導(dǎo)致一種缺乏秩序的混亂感。值得注意的是，無(wú)論是怎樣顛覆性的無(wú)網(wǎng)格設(shè)計(jì)，用戶(hù)的體驗(yàn)永遠(yuǎn)是第一位的，它的所有接口，都應(yīng)該是用戶(hù)友好型的。

更多UI設(shè)計(jì)相關(guān)信息or藝術(shù)留學(xué)的問(wèn)題，歡迎大家＋γχ：Partartedu

Part藝術(shù)設(shè)計(jì)專(zhuān)業(yè)社群現(xiàn)已開(kāi)通，快來(lái)＋γχ：partstudioSH，找到你志同道合的小伙伴吧！

更多院校專(zhuān)業(yè)干貨信息，關(guān)注良心藝術(shù)留學(xué)公眾號(hào)：partstudio

關(guān)注專(zhuān)欄PARTFOLIO，獲取藝術(shù)留學(xué)最良心專(zhuān)業(yè)院校干貨，最前沿靈感咨詢(xún)潮流解析