動效是種浪漫

1、初見

動效顧名思義就是動畫效果。網頁中爲何須要動效呢？簡單來講就是爲了有趣。

若是把網頁和用戶的關係比作正在戀愛的情侶，很顯然網頁的 UI 是顏值，而動效在我看來則是情侶之間的小浪漫。可能和顏值比起來，浪漫彷佛並非那麼的重要，可是若是感情中沒有了浪漫，是否是會以爲少了點什麼呢？

初次和女神見面的時候，咱們老是會精心的打扮，可是若是咱們能順便帶上本身的幽默感，是否是會更加讓女神心動呢？在網站的初期咱們都會特別的關注視覺，與此同時若是還能加上一點細緻的動效則會更加的吸引人。

起點國際初版登陸頁面的視覺設計很是好看，夜空高清的大圖給人一種大氣沉穩的感受。可是老闆說這並不能直觀的表達出我們是和書打交道的網站。做爲國內 IP 源頭，咱們但願用戶可以在第一眼就知道咱們是幹什麼的，咱們的優點是什麼，此時不斷循環滾動的書封動效在這裏就發揮了它極大的做用。

動效是一種網頁和用戶之間的浪漫。這種浪漫能夠沒有，但有必定是爲了讓用戶更爽。而用戶爽了就天然願意爲你的產品買單。若是個人這個假設成立，那麼動效就變成了一道愛情題。和全部愛情問題同樣，模仿必定是最簡單的捷徑。多向老司機學習把妹技巧和動效創意，下次在本身的實戰當中就能夠用到。

2、動效應有品味

有的妹子喜歡小鮮肉，有的妹子偏心大叔。做爲浪漫製造者，咱們一定要提早弄清楚妹子的口味。Apple 做爲國際化一線公司選擇了以下的動效風格。

第一次看到這個效果總體給個人感受像是一個舒緩而沉穩的大叔。而大叔給人的印象一般都會是安全感。安全感同時意味着 Apple 的產品信得過，值得你們購買，而這正是 Apple 的套路。

簡單來講動效的速度反應着一個網頁的氣質和品味，快的動效相對來講會顯得活潑可愛，慢一點的動效則會顯得更加沉穩大氣。

起點國際是一個面向海外的在線閱讀平臺，咱們但願能給讀者帶來最全面、最精準、最高效更新及最便捷的體驗。可是和 Apple 這個成熟大叔比起來，咱們只能算作一個小鮮肉。若是一個小鮮肉裝成熟不免會給人油膩的感受。因此起點國際的動效總體感受是輕快愉悅的。你不會在總體上看到太多複雜的效果。可是你動一動，點一點就會發現咱們給你藏下的玫瑰。

3、動效應保有距離

在剛開始追女孩子的時候，咱們每每更但願妹子們可以看到咱們的真誠和真心。若是一來你就送女孩珍珠和項鍊，我相信大多數女孩仍是容易被嚇到的，而那些沒有被嚇跑的女孩，你後面要送什麼？

因此前期我更推薦小而美的東西，這樣既不會顯得太突兀，也比較可以讓人接受。固然也不是說我們不能玩兒點大的，在這節奏匆忙的互聯網時代，你們什麼妖魔鬼怪沒有見過，但這得是在彼此創建足夠多的信任以後才能夠挑戰的事情。

比如平時循規蹈矩的程序員男朋友，天還沒亮就拉着女友的手，也無論妹子的起牀氣和疑問直接載到山頂。當太陽出來的那一刻我相信女孩會被融化。但若是這個男朋友換成就見過一次面的朋友。可能大多數人內心仍是拒絕的。

這也是起點國際初期並無選擇加入太多酷炫的動效的緣由。固然還有一個緣由是爲了和你們快點見面，咱們把須要花時間和精力研究的酷炫效果留在了後續的迭代當中。畢竟先讓你們看到咱們，咱們纔有機會給你們展示咱們其餘方面的優勢。太急於展示本身，反而會顯得不尊重對方，保持人與人之間應有的距離，才能讓彼此關係更長久。而這也說明動效是一件和浪漫同樣須要花時間和心思才能完成的事情。

4、動效應貼心

請客的男生滿天飛，入座的時候主動爲女生搬椅子的帥哥卻沒有幾個。既然咱們你們都作得同樣，那麼女生在選擇的時候就只能看顏值了。因此細節此時就顯得特別重要了。初次見面你送女生一支玫瑰，出門隨身揣一包紙巾，或者在就餐的時候把女生喜歡吃的菜安排在她的容易夾到的位置。這些細節都是可以給你加分的項目。

起點國際的頁面承載着很是豐富的內容，但這同時意味着我們的頁面會相對較長，當用戶想回到頂部的時候還得拖動滾動條，這明顯比較的麻煩。咱們的作法就是在頁面滾動到超過一屏的時候顯示一個返回頂部的按鈕，點擊以後頁面滾回到頂部按鈕消失。按鈕出現和消失，都是採用和頁面滾動一致的滑動效果，既起到提醒用戶這裏有一個按鈕的功能，又不會讓這個按鈕出現的時候顯得太過生硬。

酷炫的動效固然能夠吸引人，可是咱們每每容易進入爲了酷炫而酷炫的坑，反而忽略掉細節。咱們一般會在按鈕 hover 的時候給到一個動效，也能把這個效果作得很贊。可是按鈕可不止「:hover」這一種狀態，「:active」、「:visited」、「:disabled」、「:focus」這些也一樣是咱們須要考慮的細節。

有的人可能會以爲考慮到這麼的極致是否是一件值得的事。咱們喜歡一我的的時候，不會考慮作這些事情是否是值得的，即便明知道對方可能並不必定會看到。可是，若是對方看到了呢？這是什麼？這就叫貼心。貼心這種東西，有的時候咱們感受不到，可是隻要對方感覺到了就會放大其它全部的好。而這也是網頁中的動效重要的地方。咱們爲別人考慮的越多，別人天然也會記住咱們的好，這是再簡單不過的道理了。

5、動效應特別

老司機的套路千千萬，咱們能夠學習的可不止一種。這裏我拿網頁中常見的下拉菜單舉例。咱們要作的事也很簡單，就是用戶在點擊按鈕以前讓下拉菜單不可見 ( display:none ) ，移入按鈕可點區域的時候顯示 ( display:block ) ，這樣咱們功能的需求就實現了。但是這還不夠，女友讓你去倒杯水，你就傻傻的給她倒了一杯水放到了她的面前。這樣並不會讓妹子開心，由於這樣一點也不浪漫。

女生讓你倒杯水有多是大姨媽來了很差意思告訴你，此刻你應該拿出平時準備好的薑茶給她泡上。待薑茶稍微涼下來以後，你再端過去，抱住她喂她。還要僞裝這茶有點燙，給她吹一吹，關心的說：「寶貝，當心燙。」這看似戲劇化的倒水，雖然給人感受有點做，但這相對來講會比較的浪漫。

咱們的下拉菜單又未嘗不能浪漫？在顯示下拉的時候加一點透明度，是否是就柔和了？讓下拉出現的時候再有一個上下的偏移，這樣是否是就豐富了？再大膽一點咱們讓子元素出來的時候有一個前後順序的延遲，這樣是否是就更有層次了？若是想要更酷炫，甚至能夠考慮一些 3D 的效果。

CSS 強大的地方在於咱們對幾乎全部的DOM屬性都有操做的能力。時間，透明度，大小，位置，顏色，速度，甚至是 3D 等等咱們都是能夠嘗試的。甚至組合控制不一樣的屬性，還會出現意想不到的效果。

別人送花，你也送花，這怎麼能體現出本身的優點？要讓女神在衆多追求中看到本身，就不要送花，咱們送口紅，這樣會不會顯得本身很特別，頗有品味？

固然這種特別的嘗試都是須要符合接下來要講的用戶預期的。你女友可能真的只是口渴這麼簡單，你給她搞這麼一出浪漫，那明顯就是戲演過了。女神可能喜歡的是少女粉色號的口紅，你卻送了一隻姨媽紅，這就弄巧成拙了。

6、動效應符合預期

你和你的女友在繁華的街道逛街，忽然你華麗轉身，對着你的女友唱起了《Marry Me》，而後單膝下跪，從胸口掏出了一個精緻的盒子。此時大家周圍已經圍滿了人，你的女友也激動得眼睛有些溼潤。你打開盒子，裏面什麼都沒有「Tada！ 愚人節快樂！」我想此刻你女友心中必定有一萬匹羊駝狂奔。

再轉回到咱們網頁的場景當中，相信不少人和我同樣，原本打算下載一個起點國際的閱讀 APP，好不容易進入到了一個下載的界面，超大的下載按鈕讓我看到了但願，我點了下去。哐當！一個有聲的全屏視頻廣告炸了出來。我急忙關掉。而後再點一次下載下來一個安裝文件。好不容易安裝好打開一開，XX是一個流氓軟件。

以上兩個都是屬於不符合用戶預期的行爲，這很容易引發用戶的不適，甚至是反感。由於說得嚴重一點，這其實叫作欺騙。讓人喜歡你很難，但讓人討厭你是垂手可得的事。一旦用戶感受本身上當了，你以前全部的努力就都有可能白費。

如何將這種效果衍生到咱們的網頁中呢？起點國際在不少鼠標交互的地方，都統一採用的是鼠標移入的時候添加陰影，按下的時候變小的方式。設想一下桌上放了一塊 QQ糖咱們準備用手去捏它。當咱們手移過去的時候會擋住光，因此會看到陰影，捏下去的時候，由於用了勁因此糖被捏扁了。這是否是比較符合咱們對按下這個動做的預期？冰冷的網頁應儘可能用動效去貼近咱們的生活，下降用戶的理解成本，減小用戶在你頁面效果上的遲疑。而這也是擬物爲何始終是培養用戶習慣的首選設計風格的緣由。

固然這只是萬千場景中的一種，根據咱們預設的場景不一樣，咱們的動效也須要相應的調整。你也能夠設想咱們鼠標點擊的過程是一個在平靜湖面扔石頭的場景，當鼠標按下，按鈕出現一個逐漸擴散的陰影，以模擬湖面漣漪的效果。這也是很是不錯的一個選擇。

7、動效應始終如一

這個比較像咱們和女友聊天。前一秒大家詩詞歌賦人生哲學聊得正嗨。忽然你話鋒急轉聊起了昨天來你家的某個親戚很讓人討厭。這種聊天方式我相信沒有幾我的可以招架的住。話題和話題之間應該有一種起承轉合的聯繫，這樣纔不容易把天聊死，這在咱們動效當中也是一樣的道理。

點擊按鈕和彈出彈窗這兩個動做其實自己是沒有太大聯繫的。咱們點擊按鈕能夠觸發的事件太多了，彈出彈窗只是其中一種而已。但咱們的需求又是如此。因此咱們建議用動效去拉近它們之間的關係。人與人相處有一個相似的道理，我重複你的動做就是爲了和你拉近關係。女神給你眨了一下眼睛，你天然會想到趕忙給女神也拋個媚眼。路人給了你一個微笑，你天然也是會回敬一個微笑。重複讓本來陌生的兩我的有了聯繫，也可讓兩個沒有關係的操做有聯繫。

以前我解釋過起點國際對於按下這個動做的處理方式是鼠標按下變小移開變大，延續到彈窗咱們讓彈窗順着按鈕變大。由於彈窗出來的時候是由小變大，那麼關閉的時候天然就想到由大變小。這樣咱們的動效就只有由大到小，和由小到大一種交互形式，用戶的認知成本也大大下降。而且重複是一個能夠節約開發成本的事，一箭雙鵰何樂而不爲呢？

從一開始咱們幾乎不知道怎麼作動效到後來知識儲備愈來愈多，咱們老是會但願可以小小的炫耀一下。可是咱們知識的來源每每是不一樣的網站或者不一樣的大神。咱們把他們的優點通通的拿過來放到咱們的網站中，就容易在咱們本身的網頁上出現百花爭豔的狀態。局部看美極了，但總體用起來老是以爲怪怪的。混搭可能很驚豔但很難高級。

重複能夠達到統一總體風格的目的，若是有的地方不能作到重複，咱們也儘可能應採用速度一致或風格相近的動效，以求達到總體的一致性。而這種一致性帶來的溫馨感，可能比酷炫帶來的驚喜，更容易留住咱們的用戶。

8、動效不該製造麻煩

當咱們和女友準備出門的時候，女生每每都會精心的打扮一下。「親愛的你看我是穿這條粉色裙子好呢？仍是這條藍色的裙子好呢？」一般這樣的問題，對於一個徹底不懂打扮的 「程序猿」 來講簡直就是噩夢。你說選粉色吧「不行，這個顏色太嫩了，不適合我。」你說選藍色吧「這個顏色和個人皮膚不搭。」而後大家就在這個問題上不斷的重複，輪迴。最後你女友會在生氣的妥協當中陪你出門，但是這一切你也無能爲力。

在咱們的網頁中若是同一時間給用戶的選擇越多，用戶一個都不想選的概率就越大。因此咱們要作的是在交互上儘可能減小選擇，在動效上弱化選擇給用戶帶來的恐慌。

起點國際首頁 Banner 上的按鈕默認是不顯示的，用戶鼠標移入到 Banner 區域，咱們認爲用戶有了切屏的意願，此時再顯示咱們的按鈕，而且按鈕出現的時候咱們用動效讓右側按鈕比左側按鈕先出現。這樣即契合咱們第六點講到的符合用戶預期，也避免了視覺上同時出現的選擇給用戶帶來的焦慮感。完美！

在一塊兒

咱們花那麼多的時間，相識，相知，中間絞盡腦汁的彼此套路，最終目的都是但願對方感覺到咱們的用心而後和咱們在一塊兒。透過動效，咱們但願用戶也可以感覺到咱們的真誠與善意，不求能與用戶天長地久，只求用戶能在咱們這個書的城堡中有一場浪漫的旅程。

本文做者：Ziven27

歡迎轉載但請註明做者、出處和連接。