Web設計中對視差設計的誤區
視差設計作為一種非常流行的Web設計技術,被越來越多的網站所應用。而有些網站為了追隨潮流,彰顯時代氣息,在未真正理解什麼是視差設計的前提下就把它應用到網站設計上。這不僅影響使用者體驗,還會對使用者真正理解視差設計產生誤導。
英國設計師、創意總監Rob Palmer就此在Medium發表了一篇《 The Troublesome Misconception of Parallax in Web Design》他告訴大家,真正的視差設計並不是一些花俏的滾動特效和陰影,必須具備:觀察者檢視、背景檢視還需要有中間參照物。下面是對原文的摘譯:
最近瀏覽了一篇“視差效果最好的前40名網站”,發現裡面的觀點存在誤導性、並且有些應用程式也不屬於視差設計。
下面就Web設計中的視差設計技術發點牢騷,我們常常會在一些網站上看到一些流行的視差設計示例等內容,而其中很多示例並沒真正採用視差設計技術,這有可能是因為:
- 創造者(設計師、開發者、企業)可能並未真正理解視差是什麼,也可能是因為他們沒能力能夠很好地實行視差效果、也可能是因為……
- 一直宣傳使用視差特效的網站,因為網站上面運用了一些花俏的滾動特效就把它當做“視差滾動網站”;
- 使用者被這些花俏的效果和一些錯誤的文章所忽悠,誤以為他們正在體驗的就是視差特效。
目前,大量的網站會濫用各種特效,人們在瀏覽網站時,甚至會把這些特效看成是一種標準。
本文將對這些觀點進行糾正,對視差特效概念做出具體的闡述,並且告訴大家如何應用它們。
視差是什麼?
首先讓我們來明確“視差”的具體定義。
視差,就是位移或一個物體在不同的光線下檢視,所表現出來的位置區別。
這裡可以從兩方面來強調這個光線:首先是沿著不同的光線。視線需要一個初始參考點,並且從這頭到終點處能有一個清晰的視覺。其次需要強調的是“物體的明顯位置”。
物體的明顯位置,請大家記住這一點:這兩種線的結合才是視差與一些花俏的滾動特效的核心不同之處。
這句話告訴我們,要實現真正的視差,必須要有下面兩點:a)物體或位置聚焦;b)一個物體在一個給定移動空間必須有明顯的位置。本質上來講,建立一種深度知覺或立體觀測。
對於立體觀測,我們不會太深入地探討,我們會討論與之相關且有趣的話題,如光線和不正常的雙眼視覺,但從文章角度來看,無論人類的視覺如何,正常還是雙目視覺(binocular vision),都是有能力去檢視和使用立體觀測的。它允許人們制定兩個獨立的場景,人們的大腦可以在一個單獨的視覺場景中計算深度,人們試圖在Web設計中複製這樣的效果,而這就是視差特效。
下面來看一些示例,大家可以邊看邊判斷,它們是否是真正的視差網站。
www.nytimes.com/projects/2012/snow-fall/
http://journey.lifeofpimovie.com/
以上這些例子均摘自“一些令人驚訝的視差列表”等文章,事實上卻沒有一個與視差有關。為什麼這麼說,回到開頭關於視差的定義,物件(object)、兩條線的交集、如果沒有這兩者,誰都無法建立出視差特效。
真實示例
這是一幅毫無修飾和加工的圖形,以此來突顯視差特效。
當你向電腦螢幕傾斜時,你會看到更多的牆面,這是因為你與螢幕(物體)的距離要近於牆面(遠參考點)的距離,並且會覺得螢幕移動會更快些,因此,會給你帶來一些深度知覺。
關於這個例子的另一個有趣試驗方法是,如果你兩眼睜開,並且針對某個固定位置向右移,然後閉上你的右眼,你所看到的牆面將會變少。
由於我們的左眼以銳角的角度去檢視牆面周圍的物體,因此所看到的牆面會變少。同樣,如果你保持同樣的傾斜度,睜開右眼,閉上左眼,你會看到相同的牆面數。
上面所做的雙眼視差對真正理解視差特效也非常重要。
如何在網頁中真正實現視差特效?
在Web設計中,真正的視差是虛擬出現實生活中的立體視覺藝術,在前面已經指出,想要真正實現這種效果必不可少的兩大因素:物件和兩行線。這意味著網站必須具備:
- 觀看者或一個起始參考點
- 一個物件(參照物)
- 背景或距離參考點
- 一個動作或者是能夠觸發運動的某個東西
如果上面所列舉的網站從內容到使用者去改變初始參照物,它們可以實現真正的視差效果,同時,基於使用者觀看螢幕時的距離移動來操作遠方的參照物。這裡有一些瀏覽器示例,利用桌面相機追蹤使用者觀看螢幕的角度,並進行相應地顯示。
然而,這對於瀏覽一個網站來說,並不實際。所以,直到有關運動控制能夠成為常態,但這並不是真正可行的選擇。
物件
物件是支點,也是焦點。這正是上面那些網站所缺失的核心內容。建立兩個滾動面,相互以不同的速度進行移動是可以的,並且當使用者滾動時,給出一些不錯的效果。但無論怎樣,它都缺少一個核心因素,物件。前面的那個皮膚可以作為起始參照物,後邊的可以作為遠處的參照物。但為了達到預期的效果,我們需要新增一個物件。
物件可以移動,但在某種程度上,只會呈現出兩個皮膚的實際運動。當移動應用於物件時,才會讓人覺得自然。
請記住,我們建立視差特效需要試圖模擬立體感。當你想要把某個區域設計成視差時,需要考慮到運動的每個因素以及它們之間該如何過渡。
為了進一步增強視差效果,並且在Web上進行真實演示,Matthew Wagerfield和Claudio Guglieri建立 Parallax.js庫,它不僅讓人們真正的理解視差,而且還可以對智慧裝置的方向作出反應。在沒有陀螺儀或運動檢測硬體可用的時候,使用游標的位置來代替。
總結
設計師只有在理解某種樣式/效果的前提下,才能把他們應用到設計當中。視差設計是一種非常流行的Web設計技術,如果我們想把它應用到設計中來凸顯產品,那麼我們應該認真學習視差設計技術,並且花時間好好去理解它。
下面跟大家分享一些真正運用視差特效的網站,它們不僅把視差技術運用的淋漓盡致,而且也非常有創意。
http://discover.store.sony.com/be-moved/
http://www.spaceneedle.com/home/
http://graphicnovel-hybrid4.peugeot.com/
來自: Medium
相關文章
- 學習web前端誤區有哪些-好程式設計師Web前端程式設計師
- 2021年網站設計中的四個誤區網站
- 如何扭轉設計人員對FMEA的認知誤區?
- 網站設計和開發的誤區網站
- 好程式設計師web前端教程分享web中CSS絕對定位程式設計師Web前端CSS
- 測試用例設計的5大誤區
- 自學程式設計的 6 個致命誤區程式設計
- Rust 程式設計視訊教程對應講解內容-錯誤Rust程式設計
- 企業網站建設設計中常見的幾個誤區網站
- Akka 和 Storm 的設計差異ORM
- Cassandra與RDBMS的設計差別
- 被誤讀的設計模式設計模式
- 10個領域驅動設計應避免的誤區
- 容器雲平臺微服務架構設計的誤區微服務架構
- 漫畫 | 外行對程式設計師誤會有多深!程式設計師
- 跳出程式設計師思維:如何應對上手英文工具站的幾點誤區程式設計師
- GPU程式設計--CPU和GPU的設計區別GPU程式設計
- 系統設計與普通設計思考的區別
- Rust 程式設計視訊教程對應講解內容-傳播錯誤Rust程式設計
- web的一些設計Web
- 女性向設計中的“實用美”—《食物語》視覺包裝設計思路食物語視覺
- 錯誤碼設計思考
- [譯] UX 設計實踐:如何設計可掃描的 Web 介面UXWeb
- 如何比設計更懂設計-做好前端錯誤提示前端
- 程式設計中的自頂向下設計思想程式設計
- 場景設計中距離感的設計
- IBM對話設計指南:對話聊天框設計挑戰IBM
- 為什麼計算機對浮點型數字計算存在誤差計算機
- 碼農如何學設計 - Web UI 設計學習心得WebUI
- Java程式設計師需要注意的五大Docker誤區Java程式設計師Docker
- 教你避雷!網頁設計中常見的17個UI設計錯誤集錦(附贈設計技巧)網頁UI
- API的設計(1) - 錯誤處理API
- 中國程式設計師與美國程式設計師寫程式碼的區別分析程式設計師
- UI設計和平面設計區別是什麼?UI
- 【設計模式】漢堡中的設計模式——策略模式設計模式
- 更好的前端設計形式——設計者犯的常見錯誤及修改方法前端
- 好程式設計師Web前端分享無法忽視的JavaScript技巧程式設計師Web前端JavaScript
- Web設計流程優化:網頁效果圖設計新思路Web優化網頁
- Web應用的快取設計模式Web快取設計模式