運動視差:輕鬆做出小螢幕的層次與空間感

By

February 25, 2013 介面設計 Comments

layers

在行動裝置上小小的平面螢幕裡面,無論是平面風格(Flat Design)還是仿真介面(Skeuomorphism), 我們是否能夠在手指滑動之間,跳脫出二維的空間,為使用者創造出額外的層次與空間感呢?也許以下影片能夠給你一些想法:

人們在判斷物體的空間關係時,有兩個主要的方式:雙眼視覺(Binocular Vision)以及運動視差(Motion Parallax):

雙眼視覺(Binocular Vision)想必大家一定都知道!就跟我們現在常常看的 3D 電影效果一樣,是因為兩隻眼睛在位置與角度上的不同,導致兩眼成像的結果有差異,因而產生的立體視覺感,但透過雙眼視覺所產生真實的立體與空間感,其實容易造成眼睛的負擔,不太適合運用於一般的使用介面中。

另外一項判斷深度與距離的法寶:運動視差(Motion Parallax),它是在雙眼視覺外,人們很直覺用來分辨物體遠近的方法,它主要是由於人類能透過視覺,感受到物體間在成像中不同的位移速度,所察覺到的深度感。

因為當物體或是我們自身在移動時,遠的東西在成像中會感覺位移比較少,近的東西則會感覺位移比較多。

如上面影片一樣,我們可以藉由不同定速移動的物體,來產生具有深度與空間感的假象,有趣的是,這樣的方式仍然可以保持平面的視覺感,而不會太過於擬真,它讓你產生有遠近的層次感,卻又不是連續的空間,早在超級任天堂的時代,就已經運用在許多精美的橫軸遊戲中!(如機器人大戰、越南大戰等。)

視差(Parallax)也應用在許多影片後製中,透過平面的圖片加上更進階的縮放、扭曲以及平移,就可以產生非常近似真實空間的效果:

因此我們可以藉由產生簡單的運動視差,增加層次與精緻感,在許多 APP 程式中就運用了這樣的簡單機制,如 PathExpedia过日子,在滑動時讓你有了驚豔的感覺:

Path

這也是為什麼固定不動的背景(如 Twitter,下圖)在捲動時會比跟著捲動式的背景更有深度與層次的感覺,因為會拉開前景與背景間的距離感,而隨著捲動而跟著改變位置的背景則會呈現比較一整體而平面的感覺。

Twitter

透過不同的捲動速度,我們可以營造出層次與空間感,但需要考量到顯示的資訊內容,層次感會增加視覺上的負擔,尤其是需要高度閱讀性的內容,例如文字,若是以圖片主的部份如 Facebook 使用者頁面的個人封面圖片,就很適合加上運動視差的效果。

 

延伸閱讀:

捕捉使用者注意力:適量的突現動態效果

釋放瀏覽空間:滑動隱藏術

螢幕加長讓介面設計更為小心

 

Image via Randy Son Of Robert, CC License.

你知道為什麼 Microsoft Windows 的選單列放置在視窗上,而 Apple Mac OS X 的選單列放在螢幕的最上方嗎?你知道為什麼 Mozill...
我們在使用一些工具的時候,常常會不小心做錯某些事,然後開始抱怨自己怎麼那麼笨、怎麼那麼不小心。其實很多時候,這些錯誤往往不是使用者的問題,許多的問題都可以透過一...
標籤系統自從在社群書籤網站 delicious.com(以前叫做 del.icio.us)採用了之後,身為一種強大的社群分類法,馬上就被各大網站所採用了。「標籤...
中國有一句成語叫做「白紙黑字」,白紙上寫了黑字,閱讀起來是再清楚也不過了。形容了明確的文字憑據,不容許抵賴或悔改。一直到現在,白紙依然是我們最常用到的紙張類型,...
設計使用者介面時常常會碰到需要讓使用者來決定下一步的時候,在電腦系統中最常見的就是「確認」以及「取消」按鈕。像是在作業系統中要刪除檔案時,系統會跳出以下的詢問視...
操作制約,指的是生物受到刺激後引發行為改變的一個過程。心理學家 B.F. Skinner 在操作制約的研究中,將受測的老鼠放置在有可以拉動的把手的小籠子裡,然後...
© 2013 Desiring Clicks. All Rights Reserved.
Top