parallax-twist-website-trend-1

如果你仔細觀察那些最新的使用了視差技術的網頁,你會發現這些網站所采用的視差設計已經似是而非了。這些網頁中的可動元素非常之多,但是并非動畫;配色風格和視覺元素趨近于扁平風,并且借用了來自Material Design的物理隱喻,融合了許多微妙的交互細節。諸多時下流行的設計手法和新趨勢開始被打碎分解揉合到一起,形成了新的混合型視差滾動網頁。

了解新趨勢

Tour Primer

El burro

新的混合型視差不同于以往,它不是屬性單一的視差滾動,它是諸多設計手法和技術有機而無縫地結合到一起的結果,它擁有移動的背景和諸多可動元素,和早期的視差滾動非常像。

但是兩者之間還是有個明顯的差別,其中最明顯的差異是背景,隨著頁面的滾動,背景的色彩會隨之流轉變化,其中的網頁元素和視覺控件也會跟著移動,出入于網頁的焦點區域。

和之前的視差滾動的技術不同的是,新的混合型視差頁面中的各種元素會更加流暢無縫,你不會看到圖層交互。在此之前,你會看到視差滾動頁面中,某個圖片層會隨著滾動“溜”到某個特定的位置。

基本元素

SFCD

New deal

這類混合型視差網頁有一些共通的元素,除了最基本的滾動和視差效果之外,這些共有的設計手法或者設計元素構也是構成混合型視差效果不可或缺的部分。

·單頁設計:為了最大限度地呈現出各種設計效果,這些網站通常會沿用之前的單頁設計,有些網站會加入標準化的導航來引導用戶進入其他的內頁。

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

·鮮艷的色彩:這些色彩通常都采用的扁平化的配色或者Material Design 的配色。大膽,明亮,簡單,尤其是背景的用色。

·多變的內容類型:這類網站采用了單頁滾動的基礎交互模式,圖片、文字、視頻、插畫等多種類型的媒體會交錯出現,其中各類元素交互性很強,并且通常都伴隨著流暢而好玩的運動效果。

·連續的故事:很多網站會將故事作為不同類型的媒體和信息的主體脈絡,用來穿針引線,勾連前后信息。視覺上,同樣也會有系統化的設計脈絡,這樣能讓用戶對前后關系有明確的概念。

·高清大圖:現在設計師們越來越喜歡在首頁上使用高清的大圖來營造視覺上的沖擊力和氛圍了。

·滾動說明:對于新事物,用戶通常需要適當的引導才能明白交互和使用的方式,所以恰如其分的說明是很有必要的。通常網站會用一些簡單的滾動或者方向性的圖標和元素來引導用戶。

·簡單精煉的語言:由于背景是動態的,復雜的文字在這種情況下無法確保識別度,所以設計師更傾向于使用簡單且具備一定引導性的文字。

選擇合適的運動方式

Sway

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

當然,這種設計是有竅門的:為每一個元素的運動設定一個固定運動時間區間就好了。很簡單吧?

Dolox

所以,你真正需要做的事情是,盡量不要讓這些獨自運動的視覺元素在用戶滾動頁面的時候到處亂跑。同時,網站右下角的手型圖標會提醒用戶向下滾動。

當你開始向下滾動的時候,運動中的元素會停止,當你停止滾動的那一刻,這些簡單而微妙的運動又開始了。這個過程中,用戶會體驗到一種微妙的掌控感,而非眩暈,這一點很重要。

走向成熟

Publicis

True Trend

這種混合型視差設計是怎么開始流行的?

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

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

【優設酷站22連發!】

  1. 免費圖庫+導航收集站:《酷站兩連發!高品質免費圖庫站+專注WEB/APP導航收集站》
  2. 音樂站+字體搜索:《酷站兩連發!幫你專心工作的音樂站+谷歌字體在線搜索神器》
  3. 漸變色+代碼比較:《酷站兩連發!漸變色方案全聚合網站+在線代碼比較神器》
  4. 配色+占位圖:《酷站兩連發!在線色彩搭配工具+快速生成占位圖片器》
  5. LOGO下載+字體下載《酷站兩連發!可商用的矢量LOGO下載+平面最愛的27款免費字體》
  6. 壓縮圖片+在線配色:《酷站兩連發!在線圖片壓縮神器+在線配色工具COLOURCO》
  7. CSS Hover動畫+寵物小精靈配色:《酷站兩連發!寵物小精靈專屬配色網站+CSS HOVER動畫收集站》
  8. 美女圖片+游戲配色:《酷站兩連發!游戲配色網站+免費美女素材特供網站》
  9. 在線配色+字體推薦:《酷站兩連發!在線配色神器+英文字體推薦網站》
  10. 追波作品變代碼+16進制顏色:《酷站兩連發!用代碼呈現DRIBBBLE作品+16進制顏色網站》
  11. 無縫紋理+多邊形背景:《酷站兩連發!專注無縫紋理素材站+多邊形背景生成器》

原文地址:designmodo
原文作者:Carrie Cousins
優設譯文:@陳子木

uisdc-hao

本文由優設網原創翻譯,請尊重版權和譯者成果,轉摘請附上優設鏈接,違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量109萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

點贊
收藏 1

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏