一肆良、初見
動效顧名思義就是動畫效果惹恃。網(wǎng)頁中為什么需要動效呢巫糙？簡單來說就是為了有趣。
如果把網(wǎng)頁和用戶的關(guān)系比做正在戀愛的情侶乏悄，很顯然網(wǎng)頁的 UI 是顏值檩小，而動效在我看來則是情侶之間的小浪漫负蚊〖易保可能和顏值比起來伤极，浪漫似乎并不是那么的重要，但是如果感情中沒有了浪漫庸疾，是不是會覺得少了點什么呢届慈？
初次和女神見面的時候金顿，我們總是會精心的打扮揍拆，但是如果我們能順便帶上自己的幽默感嫂拴，是不是會更加讓女神心動呢筒狠？在網(wǎng)站的初期我們都會特別的關(guān)注視覺窟蓝，與此同時如果還能加上一點細致的動效則會更加的吸引人。
起點國際第一版登錄頁面的視覺設(shè)計非常好看套耕，夜空高清的大圖給人一種大氣沉穩(wěn)的感覺冯袍。但是老板說這并不能直觀的表達出咱們是和書打交道的網(wǎng)站康愤。作為國內(nèi) IP 源頭，我們希望用戶能夠在第一眼就知道我們是干什么的检激，我們的優(yōu)勢是什么，此時不斷循環(huán)滾動的書封動效在這里就發(fā)揮了它極大的作用齿穗。
動效是一種網(wǎng)頁和用戶之間的浪漫。這種浪漫可以沒有腮出，但有一定是為了讓用戶更爽胚嘲。而用戶爽了就自然愿意為你的產(chǎn)品買單馋劈。如果我的這個假設(shè)成立，那么動效就變成了一道愛情題械姻。和所有愛情問題一樣机断，模仿一定是最簡單的捷徑欢揖。多向老司機學(xué)習(xí)把妹技巧和動效創(chuàng)意她混，下次在自己的實戰(zhàn)當中就可以用到坤按。
二、動效應(yīng)有品味
有的妹子喜歡小鮮肉谢鹊，有的妹子偏愛大叔佃扼。作為浪漫制造者压昼，我們必定要提前弄清楚妹子的口味窍霞。Apple 作為國際化一線公司選擇了如下的動效風(fēng)格但金。
第一次看到這個效果整體給我的感覺像是一個舒緩而沉穩(wěn)的大叔。而大叔給人的印象通常都會是安全感似枕。安全感同時意味著 Apple 的產(chǎn)品信得過，值得大家購買年柠，而這正是 Apple 的套路凿歼。
簡單來說動效的速度反應(yīng)著一個網(wǎng)頁的氣質(zhì)和品味，快的動效相對來說會顯得活潑可愛冗恨，慢一點的動效則會顯得更加沉穩(wěn)大氣答憔。
起點國際是一個面向海外的在線閱讀平臺，我們希望能給讀者帶來最全面派近、最精準攀唯、最高效更新及最便捷的體驗。但是和 Apple 這個成熟大叔比起來渴丸，我們只能算做一個小鮮肉土童。如果一個小鮮肉裝成熟難免會給人油膩的感覺。所以起點國際的動效整體感覺是輕快愉悅的。你不會在整體上看到太多復(fù)雜的效果就谜。但是你動一動虹统，點一點就會發(fā)現(xiàn)我們給你藏下的玫瑰涧窒。
小編推薦
學(xué)習(xí)交流前端方面的技術(shù)握础，打算深入了解這個行業(yè)的朋友定枷，可以加下小編的前端學(xué)習(xí)裙330336289岖妄，邀請碼寂靜惊搏，不管你是小白還是大牛亚茬，小編我都歡迎梢夯，不定期更新最新的教程和學(xué)習(xí)方法勤篮，包括小編自己整理的一份2018最新的前端資料和0基礎(chǔ)入門教程，歡迎初學(xué)和進階中的小伙伴。每天晚上20:00都有大咖開直播給大家分享前端學(xué)習(xí)知識和路線方法喘鸟，歡迎小伙伴可以加入交流。
三爬迟、動效應(yīng)保有距離
在剛開始追女孩子的時候，我們往往更希望妹子們能夠看到我們的真誠和真心。如果一來你就送女孩珍珠和項鏈埃叭，我相信大多數(shù)女孩還是容易被嚇到的，而那些沒有被嚇跑的女孩，你后面要送什么搪哪？
所以前期我更推薦小而美的東西，這樣既不會顯得太突兀痴奏，也比較能夠讓人接受。當然也不是說咱們不能玩兒點大的械馆，在這節(jié)奏匆忙的互聯(lián)網(wǎng)時代，大家什么妖魔鬼怪沒有見過簿晓，但這得是在彼此建立足夠多的信任之后才可以挑戰(zhàn)的事情。
好比平時循規(guī)蹈矩的程序員男友，天還沒亮就拉著女朋友的手，也不管妹子的起床氣和疑問直接載到山頂。當太陽出來的那一刻我相信女孩會被融化拒课。但如果這個男友換成就見過一次面的朋友劝堪⊥缒簦可能大多數(shù)人心里還是拒絕的紊搪。
這也是起點國際初期并沒有選擇加入太多酷炫的動效的原因。當然還有一個原因是為了和大家快點見面磨总，我們把需要花時間和精力研究的酷炫效果留在了后續(xù)的迭代當中嗦明。畢竟先讓大家看到我們，我們才有機會給大家展現(xiàn)我們其他方面的優(yōu)點蚪燕。太急于展現(xiàn)自己娶牌，反而會顯得不尊重對方，保持人與人之間應(yīng)有的距離馆纳，才能讓彼此關(guān)系更長久诗良。而這也說明動效是一件和浪漫一樣需要花時間和心思才能完成的事情。
四鲁驶、動效應(yīng)貼心
請客的男生滿天飛鉴裹，入座的時候主動為女生搬椅子的帥哥卻沒有幾個。既然我們大家都做得一樣钥弯，那么女生在選擇的時候就只能看顏值了径荔。所以細節(jié)此時就顯得特別重要了。初次見面你送女生一支玫瑰脆霎，出門隨身揣一包紙巾总处，或者在就餐的時候把女生喜歡吃的菜安排在她的容易夾到的位置。這些細節(jié)都是能夠給你加分的項目睛蛛。
起點國際的頁面承載著非常豐富的內(nèi)容鹦马，但這同時意味著咱們的頁面會相對較長胧谈，當用戶想回到頂部的時候還得拖動滾動條，這明顯比較的麻煩荸频。我們的做法就是在頁面滾動到超過一屏的時候顯示一個返回頂部的按鈕菱肖，點擊之后頁面滾回到頂部按鈕消失。按鈕出現(xiàn)和消失旭从，都是采用和頁面滾動一致的滑動效果稳强，既起到提醒用戶這里有一個按鈕的功能，又不會讓這個按鈕出現(xiàn)的時候顯得太過生硬遇绞。
酷炫的動效當然可以吸引人键袱，但是我們往往容易進入為了酷炫而酷炫的坑，反而忽略掉細節(jié)摹闽。我們通常會在按鈕 hover 的時候給到一個動效，也能把這個效果做得很贊褐健。但是按鈕可不止「:hover」這一種狀態(tài)付鹿，「:active」、「:visited」蚜迅、「:disabled」舵匾、「:focus」這些也同樣是我們需要考慮的細節(jié)。
有的人可能會覺得考慮到這么的極致是不是一件值得的事谁不。我們喜歡一個人的時候坐梯，不會考慮做這些事情是不是值得的，即使明知道對方可能并不一定會看到刹帕。但是吵血，如果對方看到了呢？這是什么偷溺？這就叫貼心蹋辅。貼心這種東西，有的時候我們感覺不到挫掏，但是只要對方感受到了就會放大其它所有的好侦另。而這也是網(wǎng)頁中的動效重要的地方。我們?yōu)閯e人考慮的越多尉共，別人自然也會記住我們的好褒傅，這是再簡單不過的道理了。
五袄友、動效應(yīng)特別
老司機的套路千千萬殿托，我們可以學(xué)習(xí)的可不止一種。這里我拿網(wǎng)頁中常見的下拉菜單舉例杠河。我們要做的事也很簡單碌尔，就是用戶在點擊按鈕之前讓下拉菜單不可見 ( display:none ) 浇辜，移入按鈕可點區(qū)域的時候顯示 ( display:block ) ，這樣我們功能的需求就實現(xiàn)了唾戚×螅可是這還不夠，女朋友讓你去倒杯水叹坦，你就傻傻的給她倒了一杯水放到了她的面前熊镣。這樣并不會讓妹子開心，因為這樣一點也不浪漫募书。
女生讓你倒杯水有可能是大姨媽來了不好意思告訴你绪囱，此刻你應(yīng)該拿出平時準備好的姜茶給她泡上。待姜茶稍微涼下來之后莹捡，你再端過去鬼吵，抱住她喂她。還要假裝這茶有點燙篮赢，給她吹一吹齿椅，關(guān)心的說：「寶貝，小心燙启泣』两牛」這看似戲劇化的倒水，雖然給人感覺有點作寥茫，但這相對來說會比較的浪漫遣蚀。
我們的下拉菜單又何嘗不能浪漫？在顯示下拉的時候加一點透明度纱耻，是不是就柔和了芭梯？讓下拉出現(xiàn)的時候再有一個上下的偏移，這樣是不是就豐富了膝迎？再大膽一點我們讓子元素出來的時候有一個先后順序的延遲粥帚，這樣是不是就更有層次了？如果想要更酷炫限次，甚至可以考慮一些 3D 的效果芒涡。
CSS 強大的地方在于我們對幾乎所有的DOM屬性都有操作的能力。時間卖漫，透明度费尽，大小，位置羊始，顏色旱幼，速度，甚至是 3D 等等我們都是可以嘗試的突委。甚至組合控制不同的屬性柏卤，還會出現(xiàn)意想不到的效果冬三。
別人送花，你也送花缘缚，這怎么能體現(xiàn)出自己的優(yōu)勢勾笆？要讓女神在眾多追求中看到自己，就不要送花桥滨，我們送口紅窝爪，這樣會不會顯得自己很特別，很有品味齐媒？
當然這種特別的嘗試都是需要符合接下來要講的用戶預(yù)期的蒲每。你女朋友可能真的只是口渴這么簡單，你給她搞這么一出浪漫喻括，那明顯就是戲演過了邀杏。女神可能喜歡的是少女粉色號的口紅，你卻送了一只姨媽紅双妨，這就弄巧成拙了淮阐。
六、動效應(yīng)符合預(yù)期
你和你的女朋友在繁華的街道逛街刁品，突然你華麗轉(zhuǎn)身，對著你的女朋友唱起了《Marry Me》浩姥，然后單膝下跪挑随，從胸口掏出了一個精致的盒子。此時你們周圍已經(jīng)圍滿了人勒叠，你的女朋友也激動得眼睛有些濕潤兜挨。你打開盒子，里面什么都沒有「Tada眯分！ 愚人節(jié)快樂拌汇！」我想此刻你女朋友心中一定有一萬匹羊駝狂奔。
再轉(zhuǎn)回到我們網(wǎng)頁的場景當中弊决，相信很多人和我一樣噪舀，本來打算下載一個起點國際的閱讀 APP，好不容易進入到了一個下載的界面飘诗，超大的下載按鈕讓我看到了希望与倡，我點了下去。哐當昆稿！一個有聲的全屏視頻廣告炸了出來纺座。我急忙關(guān)掉。然后再點一次下載下來一個安裝文件溉潭。好不容易安裝好打開一開净响，XX是一個流氓軟件少欺。
以上兩個都是屬于不符合用戶預(yù)期的行為，這很容易引起用戶的不適馋贤，甚至是反感赞别。因為說得嚴重一點，這其實叫做欺騙掸掸。讓人喜歡你很難氯庆，但讓人討厭你是輕而易舉的事。一旦用戶感覺自己上當了扰付，你之前所有的努力就都有可能白費堤撵。
如何將這種效果衍生到我們的網(wǎng)頁中呢？起點國際在很多鼠標交互的地方羽莺，都統(tǒng)一采用的是鼠標移入的時候添加陰影实昨，按下的時候變小的方式。設(shè)想一下桌上放了一塊 QQ糖我們準備用手去捏它盐固。當我們手移過去的時候會擋住光荒给，所以會看到陰影，捏下去的時候刁卜，因為用了勁所以糖被捏扁了志电。這是不是比較符合我們對按下這個動作的預(yù)期？冰冷的網(wǎng)頁應(yīng)盡量用動效去貼近我們的生活蛔趴，降低用戶的理解成本挑辆，減少用戶在你頁面效果上的遲疑。而這也是擬物為什么始終是培養(yǎng)用戶習(xí)慣的首選設(shè)計風(fēng)格的原因孝情。
當然這只是萬千場景中的一種鱼蝉，根據(jù)我們預(yù)設(shè)的場景不同，我們的動效也需要相應(yīng)的調(diào)整箫荡。你也可以設(shè)想我們鼠標點擊的過程是一個在平靜湖面扔石頭的場景魁亦，當鼠標按下，按鈕出現(xiàn)一個逐漸擴散的陰影羔挡，以模擬湖面漣漪的效果洁奈。這也是非常不錯的一個選擇。
七婉弹、動效應(yīng)始終如一
這個比較像我們和女朋友聊天睬魂。前一秒你們詩詞歌賦人生哲學(xué)聊得正嗨。突然你話鋒急轉(zhuǎn)聊起了昨天來你家的某個親戚很讓人討厭镀赌。這種聊天方式我相信沒有幾個人能夠招架的住氯哮。話題和話題之間應(yīng)該有一種起承轉(zhuǎn)合的聯(lián)系，這樣才不容易把天聊死，這在我們動效當中也是同樣的道理喉钢。
點擊按鈕和彈出彈窗這兩個動作其實本身是沒有太大聯(lián)系的姆打。我們點擊按鈕可以觸發(fā)的事件太多了，彈出彈窗只是其中一種而已肠虽。但我們的需求又是如此幔戏。所以我們建議用動效去拉近它們之間的關(guān)系。人與人相處有一個類似的道理税课，我重復(fù)你的動作就是為了和你拉近關(guān)系闲延。女神給你眨了一下眼睛，你自然會想到趕緊給女神也拋個媚眼韩玩。路人給了你一個微笑垒玲，你自然也是會回敬一個微笑。重復(fù)讓原本陌生的兩個人有了聯(lián)系找颓，也可以讓兩個沒有關(guān)系的操作有聯(lián)系合愈。
之前我解釋過起點國際對于按下這個動作的處理方式是鼠標按下變小移開變大，延續(xù)到彈窗我們讓彈窗順著按鈕變大击狮。因為彈窗出來的時候是由小變大佛析，那么關(guān)閉的時候自然就想到由大變小。這樣我們的動效就只有由大到小彪蓬，和由小到大一種交互形式寸莫，用戶的認知成本也大大降低。并且重復(fù)是一個可以節(jié)約開發(fā)成本的事档冬，一舉兩得何樂而不為呢储狭？
從一開始我們幾乎不知道怎么做動效到后來知識儲備越來越多，我們總是會希望能夠小小的炫耀一下捣郊。但是我們知識的來源往往是不同的網(wǎng)站或者不同的大神。我們把他們的優(yōu)勢統(tǒng)統(tǒng)的拿過來放到我們的網(wǎng)站中慈参，就容易在我們自己的網(wǎng)頁上出現(xiàn)百花爭艷的狀態(tài)呛牲。局部看美極了，但整體用起來總是覺得怪怪的驮配∧锢混搭可能很驚艷但很難高級。
重復(fù)可以達到統(tǒng)一整體風(fēng)格的目的壮锻，如果有的地方不能做到重復(fù)琐旁，我們也盡量應(yīng)采用速度一致或風(fēng)格相近的動效，以求達到整體的一致性猜绣。而這種一致性帶來的舒適感灰殴，可能比酷炫帶來的驚喜，更容易留住我們的用戶掰邢。
八牺陶、動效不應(yīng)制造麻煩
當我們和女朋友準備出門的時候伟阔，女生往往都會精心的打扮一下￡欤「親愛的你看我是穿這條粉色裙子好呢皱炉？還是這條藍色的裙子好呢？」通常這樣的問題狮鸭，對于一個完全不懂打扮的 “程序猿” 來說簡直就是噩夢合搅。你說選粉色吧「不行，這個顏色太嫩了歧蕉，不適合我灾部。」你說選藍色吧「這個顏色和我的皮膚不搭廊谓∈嶂恚」然后你們就在這個問題上不斷的重復(fù)，輪回蒸痹。最后你女朋友會在生氣的妥協(xié)當中陪你出門春弥，可是這一切你也無能為力。
在我們的網(wǎng)頁中如果同一時間給用戶的選擇越多叠荠，用戶一個都不想選的幾率就越大匿沛。所以我們要做的是在交互上盡量減少選擇，在動效上弱化選擇給用戶帶來的恐慌榛鼎。
起點國際首頁 Banner 上的按鈕默認是不顯示的逃呼，用戶鼠標移入到 Banner 區(qū)域，我們認為用戶有了切屏的意愿者娱，此時再顯示我們的按鈕抡笼，并且按鈕出現(xiàn)的時候我們用動效讓右側(cè)按鈕比左側(cè)按鈕先出現(xiàn)。這樣即契合我們第六點講到的符合用戶預(yù)期黄鳍，也避免了視覺上同時出現(xiàn)的選擇給用戶帶來的焦慮感推姻。完美！
在一起
我們花那么多的時間框沟，相識藏古，相知，中間絞盡腦汁的彼此套路忍燥，最終目的都是希望對方感受到我們的用心然后和我們在一起拧晕。透過動效，我們希望用戶也能夠感受到我們的真誠與善意梅垄，不求能與用戶天長地久厂捞，只求用戶能在我們這個書的城堡中有一場浪漫的旅程。
關(guān)注小編，在這里蔫敲，我們分享程序員相關(guān)技術(shù)饲嗽，職場生活，行業(yè)熱點資訊奈嘿。不定期還會分享IT趣文和趣圖貌虾。這里屬于我們程序員自己的生活，工作和娛樂空間
