超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

悄然流行的混合型視差網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)

2016-2-3    博博

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

如果你仔細(xì)觀察那些的使用了視差技術(shù)的網(wǎng)頁(yè),你會(huì)發(fā)現(xiàn)這些網(wǎng)站所采用的視差設(shè)計(jì)已經(jīng)似是而非了。這些網(wǎng)頁(yè)中的可動(dòng)元素非常之多,但是并非動(dòng)畫;配色風(fēng)格和視覺元素趨近于扁平風(fēng),并且借用了來(lái)自Material Design的物理隱喻,融合了許多微妙的交互細(xì)節(jié)。諸多時(shí)下流行的設(shè)計(jì)手法和新趨勢(shì)開始被打碎分解揉合到一起,形成了新的混合型視差滾動(dòng)網(wǎng)頁(yè)。

了解新趨勢(shì)

640.webp.jpg

Tour Primer

640.webp (1).jpg

El burro

新的混合型視差不同于以往,它不是屬性單一的視差滾動(dòng),它是諸多設(shè)計(jì)手法和技術(shù)有機(jī)而無(wú)縫地結(jié)合到一起的結(jié)果,它擁有移動(dòng)的背景和諸多可動(dòng)元素,和早期的視差滾動(dòng)非常像。

但是兩者之間還是有個(gè)明顯的差別,其中最明顯的差異是背景,隨著頁(yè)面的滾動(dòng),背景的色彩會(huì)隨之流轉(zhuǎn)變化,其中的網(wǎng)頁(yè)元素和視覺控件也會(huì)跟著移動(dòng),出入于網(wǎng)頁(yè)的焦點(diǎn)區(qū)域。

和之前的視差滾動(dòng)的技術(shù)不同的是,新的混合型視差頁(yè)面中的各種元素會(huì)更加流暢無(wú)縫,你不會(huì)看到圖層交互。在此之前,你會(huì)看到視差滾動(dòng)頁(yè)面中,某個(gè)圖片層會(huì)隨著滾動(dòng)“溜”到某個(gè)特定的位置。

基本元素

640.webp (2).jpg

SFCD

640.webp (3).jpg

New deal

這類混合型視差網(wǎng)頁(yè)有一些共通的元素,除了最基本的滾動(dòng)和視差效果之外,這些共有的設(shè)計(jì)手法或者設(shè)計(jì)元素構(gòu)也是構(gòu)成混合型視差效果不可或缺的部分。

·單頁(yè)設(shè)計(jì):為了最大限度地呈現(xiàn)出各種設(shè)計(jì)效果,這些網(wǎng)站通常會(huì)沿用之前的單頁(yè)設(shè)計(jì),有些網(wǎng)站會(huì)加入標(biāo)準(zhǔn)化的導(dǎo)航來(lái)引導(dǎo)用戶進(jìn)入其他的內(nèi)頁(yè)。

·大膽的版式:大膽的版式和有趣的字體也是廠家你的元素,一方面是強(qiáng)化視覺,另一方面會(huì)讓頁(yè)面的可讀性更好,更加新奇有趣。

·鮮艷的色彩:這些色彩通常都采用的扁平化的配色或者M(jìn)aterial Design 的配色。大膽,明亮,簡(jiǎn)單,尤其是背景的用色。

·多變的內(nèi)容類型:這類網(wǎng)站采用了單頁(yè)滾動(dòng)的基礎(chǔ)交互模式,圖片、文字、視頻、插畫等多種類型的媒體會(huì)交錯(cuò)出現(xiàn),其中各類元素交互性很強(qiáng),并且通常都伴隨著流暢而好玩的運(yùn)動(dòng)效果。

·連續(xù)的故事:很多網(wǎng)站會(huì)將故事作為不同類型的媒體和信息的主體脈絡(luò),用來(lái)穿針引線,勾連前后信息。視覺上,同樣也會(huì)有系統(tǒng)化的設(shè)計(jì)脈絡(luò),這樣能讓用戶對(duì)前后關(guān)系有明確的概念。

·高清大圖:現(xiàn)在設(shè)計(jì)師們?cè)絹?lái)越喜歡在首頁(yè)上使用高清的大圖來(lái)營(yíng)造視覺上的沖擊力和氛圍了。

·滾動(dòng)說(shuō)明:對(duì)于新事物,用戶通常需要適當(dāng)?shù)囊龑?dǎo)才能明白交互和使用的方式,所以恰如其分的說(shuō)明是很有必要的。通常網(wǎng)站會(huì)用一些簡(jiǎn)單的滾動(dòng)或者方向性的圖標(biāo)和元素來(lái)引導(dǎo)用戶。

·簡(jiǎn)單精煉的語(yǔ)言:由于背景是動(dòng)態(tài)的,復(fù)雜的文字在這種情況下無(wú)法確保識(shí)別度,所以設(shè)計(jì)師更傾向于使用簡(jiǎn)單且具備一定引導(dǎo)性的文字。

選擇合適的運(yùn)動(dòng)方式

640.webp (4).jpg

Sway

混合型視差網(wǎng)頁(yè)的設(shè)計(jì)核心還是可動(dòng)的元素。但是設(shè)計(jì)師需要把握好網(wǎng)頁(yè)中不同元素的運(yùn)動(dòng)和交互的微妙平衡。大幅度的、過多的運(yùn)動(dòng)會(huì)喧賓奪主,對(duì)于部分用戶會(huì)造成眩暈的效果,真正平衡的運(yùn)動(dòng)效果是微妙而自然的。

當(dāng)然,這種設(shè)計(jì)是有竅門的:為每一個(gè)元素的運(yùn)動(dòng)設(shè)定一個(gè)固定運(yùn)動(dòng)時(shí)間區(qū)間就好了。很簡(jiǎn)單吧?

640.webp (5).jpg

Dolox

所以,你真正需要做的事情是,盡量不要讓這些獨(dú)自運(yùn)動(dòng)的視覺元素在用戶滾動(dòng)頁(yè)面的時(shí)候到處亂跑。同時(shí),網(wǎng)站右下角的手型圖標(biāo)會(huì)提醒用戶向下滾動(dòng)。

當(dāng)你開始向下滾動(dòng)的時(shí)候,運(yùn)動(dòng)中的元素會(huì)停止,當(dāng)你停止?jié)L動(dòng)的那一刻,這些簡(jiǎn)單而微妙的運(yùn)動(dòng)又開始了。這個(gè)過程中,用戶會(huì)體驗(yàn)到一種微妙的掌控感,而非眩暈,這一點(diǎn)很重要。

走向成熟

640.webp (6).jpg

Publicis

640.webp (7).jpg

True Trend

這種混合型視差設(shè)計(jì)是怎么開始流行的?

HTML5技術(shù)的成熟是最基礎(chǔ)的條件。各種設(shè)計(jì)趨勢(shì)的自然演進(jìn),在此交匯,使得這種設(shè)計(jì)成為了可能性。扁平化設(shè)計(jì)和Material Design 的大范圍普及,自然而然地將色彩、樣式和隱喻注入其中,使得它成為了一個(gè)擁有多種變量、無(wú)限可能性的多元方程。

其實(shí)當(dāng)你回首當(dāng)初的那些設(shè)計(jì)趨勢(shì)的時(shí)候,會(huì)發(fā)現(xiàn)它們也同樣經(jīng)歷了這一的過程,各種思路、風(fēng)格、流派隨著大眾的審美和需求而自然演進(jìn),逐步成熟的技術(shù)是粘合劑,融合發(fā)酵之后,逐步形成不可抵擋的潮流。

 

藍(lán)藍(lán)設(shè)計(jì)
m.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

 

分享本文至:

日歷

鏈接

個(gè)人資料

存檔