做這行久了,常有老闆開口就說類似這樣的話:我要那種一直滑、東西會飛出來的網站。

我都會點點頭,心裡想的是,這跟走進餐廳跟老闆說「給我那種好吃的」差不多。好吃的有很多種,熱的冷的、鹹的甜的。飛出來的也有很多種,文字飛、圖片飛,還是整個網站準備起飛,順便把使用者的耐心一起帶走?

不過我聽得懂。翻成白話,就是「我希望人家一滑下去,就覺得有東西在發生」。

這個需求我站老闆那邊。我的偏見是:「有東西在發生」,不一定要靠東西在動。視差滾動拿來調節奏才有用,節奏看的是哪裡不動。前端工程師幾行 code 就能讓整頁元素飄起來,難的是決定哪一段要停住,讓人把眼睛擱在那裡喘口氣。

第二個偏見比較得罪人:內容沒有起伏的網站,別用視差。我自己也手癢過。「再加一個動畫就好」這個念頭很誘人,加完一個,通常又想加第二個。

每個動畫都想當主角,結果桌上全是在搶麥克風的人
每個動畫都想當主角,結果桌上全是在搶麥克風的人

動畫誰都會加,難的是讓它閉嘴

視差的原理很單純:背景走得慢,前景走得快,兩層的速度差讓平面的畫面有了一點縱深。這個手段很便宜,貴的是決定哪一段要把它關掉。

漫畫分格之間有一道空白,中間發生了什麼,全靠讀者自己腦補。空白留得準,一個人從窗邊走到門口,你會讀出一段時間。留得不準,就只是兩張圖貼在一起。

電影剪接也有一樣的難題。剪接師要決定在哪裡切,也要決定哪裡不切。鏡頭多撐一下,觀眾就從看劇情變成感受劇情。

回頭看網站。我常看到整頁元素同時搶著進場:標題從左邊衝進來,圖片從下面彈上來,數字在旁邊猛跳,連一顆小圖示都在原地轉圈。那畫面像一桌人同時開口講話,每個人都很有熱情,你一句都沒聽進去。

這種頁面的動畫,每一個都想當主角。主角一多,就沒有主角了。

所以我改稿時,第一刀通常是砍。先砍掉一半當起手式,這不是精確比例,只是手感。砍完再看,通常還要再砍,直到剩下的那幾個,剛好撐得起整頁的節奏。設計師聽到這句多半會心痛,因為被砍掉的,常常是自己最得意的那一個。

沒有情緒曲線,就別碰視差

很多人在網站「看起來有點平」的時候,才想到視差。內容沒什麼好說,那就加點動畫吧,好像撒一把蔥花,湯就有味道了。可惜視差會把內容原樣放大。內容有開頭有轉折,起伏會被推得更明顯。內容是一條直線,你得到的就是一條音量比較大的直線,而且滑得很順,順到你連哪裡無聊都來不及抱怨。

動手之前,我會先拿一張紙,畫情緒曲線。不用好看,一條上上下下的線就行。哪裡是鋪陳,哪裡是轉折,哪裡要讓人停下來盯著看,哪裡可以很快帶過。畫完你會發現,真正需要停的地方就兩三處,其他都是過場。過場的動畫大半都該拿掉,留兩三個就夠了。所以「砍一半」只是起手式,砍到最後,常常不只一半。

我自己的看法是,每一屏都該讓人多知道一點、多感覺一點。這一屏滑過去之後,使用者手上的東西,有沒有比上一屏多?沒有的話,那一屏就只是在占時間。

這時候我的手又開始癢了。看到一張照片,腦袋裡自動跳出「這張從右邊滑進來,帶點模糊」。我會對自己說:兄弟,這張圖有話要說嗎?沒有,你只是想玩。

我有個粗暴的測試:把動畫全部關掉,剩下一頁靜態的內容,故事還站得住嗎?站得住,動畫是加分。站不住,問題出在內容,動畫救不了。

不用飛,停一下就夠有戲了
不用飛,停一下就夠有戲了

老闆要的「有事發生」,其實不用飛

回到開頭那位老闆。他要的感覺,我覺得用停頓就能給。

一屏只放一句話,滑下去,換成下一句。滑到一張大圖,整個畫面只有它,旁邊留白留得很大方。一次只有一個焦點,視線就知道該往哪走。使用者會覺得有人在安排他看東西的順序,這就是「有事在發生」。

動畫只是其中一種做法,而且是最容易用過頭的那種。

有人會舉手反對

有人會說,展覽網站、新品發表頁,本來就靠動態吸引人,你叫它們安靜,等於叫跑車靠邊停。

這個反對我收下,這類網站動作確實比較多。不過我的猜測是,讓人記得住的,動得多,也停得乾脆。我想像一個新品頁:產品擺在畫面正中央,四周留白,滑一格,它轉半圈,然後停住,只留一行字。你會記得停住的那一下,中間那堆位移大概沒什麼印象。展覽網站也可以這樣玩,一排作品飄過去之後,有一屏只放一件,旁邊空得像在示範什麼叫付得起版面費。這只是我的想像,要拿去反駁我也行。

另外有兩個現實問題,順口提一下。一是手機。同一個頁面,在設計師的大螢幕上很順,到了老闆口袋裡那支用了好幾年的手機,可能卡得像在翻舊相簿。二是有些人看到畫面一直位移會頭暈,作業系統和瀏覽器都有「減少動態」的設定,就是為了他們。動畫少一點,這兩邊都輕鬆。

最後一屏,什麼都不動

想像有人一路滑到最底。

前面一直有東西在發生:標題落地,產品轉半圈,留白一屏接著一屏。到了最後一屏,全停了。背景是單色,沒有粒子,沒有跟著游標跑的光點,也沒有東西從角落偷偷探頭。

只有一句話,和一個按鈕。

那句話不長,是這間公司最想對你說的一件事。按鈕上寫「聊聊看」或「寄信給我們」就夠了。

手指在這裡自然停下來。你把那句話讀完,才決定按或不按。

我很少看到有人在這一屏加動畫。連最愛加動畫的設計師,大概也知道這時候該閉嘴。

不然你想想,按鈕要是突然從旁邊飛過來,還順便彈兩下,你還按得下去嗎?