SPARKFUL

Blog

Insights from the SPARKFUL x Fourdesire teams

視差設計:如何在狹小的手機畫面中製造「空間感」

Magic Hunguser-interface-design
name

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

也許以下影片能夠給你一些想法:

利用人眼視覺,創造遠近層次感 人們在判斷物體的空間關係時,有兩個主要的方式:「雙眼視覺」(Binocular Vision)以及「運動視差」(Motion Parallax)。

1. 「雙眼視覺」:

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

2. 「運動視差」:

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

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

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

視差也能用在影片後製裡,做出真實空間效果

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

「運動視差」在不同情況下的案例: 因此,我們可以藉由產生簡單的運動視差,增加層次與精緻感。在許多 App 中就運用了這樣的簡單機制,如 Path、Expedia、过日子,在滑動時讓你有了驚豔的感覺:

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

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


Image via blykst, CC License.

Magic Hung
Magic Hung
Technical Director
Technical Director @ Fourdesire. Create fun and crafts via programming.
divider
Related Posts
name

電影色彩學:這些經典電影如何運用「色彩」引導觀眾情緒

電影裡的弦外之音無論是電影、圖畫或任何形式的創作中,「色彩」都是非常基本且重要的元素。好的色彩運用可以讓人一眼看出創作者想表達的情緒。因此,如何恰當的運用色彩是一項相當重要的課題。平常在看電影的時候,除了關心劇情,也可以...Read more
name

藏於字句間的創作:產品中的在地化翻譯

產品辛苦開發了,但要吸引其他語言使用者的使用,並不是那麼簡單的一件事。即使產品已經在某個國家(例如台灣)有了足夠的使用者數量,也不是翻譯成日文,就會憑空冒出許多日本的使用者。網路是連結的,但社群不是許多人...Read more
name

為使用者撒下「麵包屑」

大家小時候應該都有看過或聽過《糖果屋》(收錄於格林童話)的故事吧?故事裡的小兄妹在森林裡面邊走邊撒下麵包屑,希望可以在迷路的時候沿著麵包屑回到家,結果麵包屑被森林裡的小動物吃掉,這對小兄妹也就在森林裡面...Read more