如果把網(wǎng)頁(yè)和用戶的關(guān)系比做正在戀愛(ài)的情侶，很顯然網(wǎng)頁(yè)的 UI 是顏值，而動(dòng)效在我看來(lái)則是情侶之間的
如果把網(wǎng)頁(yè)和用戶的關(guān)系比做正在戀愛(ài)的情侶，很顯然網(wǎng)頁(yè)的 UI 是顏值，而動(dòng)效在我看來(lái)則是情侶之間的小浪漫?？赡芎皖佒当绕饋?lái)，浪漫似乎并不是那么的重要，但是如果感情中沒(méi)有了浪漫，是不是會(huì)覺(jué)得少了點(diǎn)什么呢？
初次和女神見(jiàn)面的時(shí)候，我們總是會(huì)精心的打扮，但是如果我們能順便帶上自己的幽默感，是不是會(huì)更加讓女神心動(dòng)呢？在網(wǎng)站的初期我們都會(huì)特別的關(guān)注視覺(jué)，與此同時(shí)如果還能加上一點(diǎn)細(xì)致的動(dòng)效則會(huì)更加的吸引人。
創(chuàng)新互聯(lián)是一家網(wǎng)站設(shè)計(jì)公司，集創(chuàng)意、互聯(lián)網(wǎng)應(yīng)用、軟件技術(shù)為一體的創(chuàng)意網(wǎng)站建設(shè)服務(wù)商，主營(yíng)產(chǎn)品：響應(yīng)式網(wǎng)站開(kāi)發(fā)、品牌網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷推廣。我們專注企業(yè)品牌在網(wǎng)站中的整體樹(shù)立，網(wǎng)絡(luò)互動(dòng)的體驗(yàn)，以及在手機(jī)等移動(dòng)端的優(yōu)質(zhì)呈現(xiàn)。網(wǎng)站制作、成都做網(wǎng)站、移動(dòng)互聯(lián)產(chǎn)品、網(wǎng)絡(luò)運(yùn)營(yíng)、VI設(shè)計(jì)、云產(chǎn)品.運(yùn)維為核心業(yè)務(wù)。為用戶提供一站式解決方案，我們深知市場(chǎng)的競(jìng)爭(zhēng)激烈，認(rèn)真對(duì)待每位客戶，為客戶提供賞析悅目的作品，網(wǎng)站的價(jià)值服務(wù)。
起點(diǎn)國(guó)際第一版登錄頁(yè)面的視覺(jué)設(shè)計(jì)非常好看，夜空高清的大圖給人一種大氣沉穩(wěn)的感覺(jué)。但是老板說(shuō)這并不能直觀的表達(dá)出咱們是和書(shū)打交道的網(wǎng)站。作為國(guó)內(nèi) IP 源頭，我們希望用戶能夠在第一眼就知道我們是干什么的，我們的優(yōu)勢(shì)是什么，此時(shí)不斷循環(huán)滾動(dòng)的書(shū)封動(dòng)效在這里就發(fā)揮了它極大的作用。
動(dòng)效是一種網(wǎng)頁(yè)和用戶之間的浪漫。這種浪漫可以沒(méi)有，但有一定是為了讓用戶更爽。而用戶爽了就自然愿意為你的產(chǎn)品買(mǎi)單。如果我的這個(gè)假設(shè)成立，那么動(dòng)效就變成了一道愛(ài)情題。和所有愛(ài)情問(wèn)題一樣，模仿一定是最簡(jiǎn)單的捷徑。多向老司機(jī)學(xué)習(xí)把妹技巧和動(dòng)效創(chuàng)意，下次在自己的實(shí)戰(zhàn)當(dāng)中就可以用到。
有的妹子喜歡小鮮肉，有的妹子偏愛(ài)大叔。作為浪漫制造者，我們必定要提前弄清楚妹子的口味。Apple 作為國(guó)際化一線公司選擇了如下的動(dòng)效風(fēng)格。
第一次看到這個(gè)效果整體給我的感覺(jué)像是一個(gè)舒緩而沉穩(wěn)的大叔。而大叔給人的印象通常都會(huì)是安全感。安全感同時(shí)意味著 Apple 的產(chǎn)品信得過(guò)，值得大家購(gòu)買(mǎi)，而這正是 Apple 的套路。
簡(jiǎn)單來(lái)說(shuō)動(dòng)效的速度反應(yīng)著一個(gè)網(wǎng)頁(yè)的氣質(zhì)和品味，快的動(dòng)效相對(duì)來(lái)說(shuō)會(huì)顯得活潑可愛(ài)，慢一點(diǎn)的動(dòng)效則會(huì)顯得更加沉穩(wěn)大氣。
起點(diǎn)國(guó)際是一個(gè)面向海外的在線閱讀平臺(tái)，我們希望能給讀者帶來(lái)最全面、最精準(zhǔn)、最高效更新及最便捷的體驗(yàn)。但是和 Apple 這個(gè)成熟大叔比起來(lái)，我們只能算做一個(gè)小鮮肉。如果一個(gè)小鮮肉裝成熟難免會(huì)給人油膩的感覺(jué)。所以起點(diǎn)國(guó)際的動(dòng)效整體感覺(jué)是輕快愉悅的。你不會(huì)在整體上看到太多復(fù)雜的效果。但是你動(dòng)一動(dòng)，點(diǎn)一點(diǎn)就會(huì)發(fā)現(xiàn)我們給你藏下的玫瑰。
其實(shí)做為一個(gè)前端開(kāi)發(fā)者，有一個(gè)學(xué)習(xí)的氛圍跟一個(gè)交流圈子特別重要，這是一個(gè)我的前端交流群：330336289，邀請(qǐng)編號(hào)：寂靜。不管你是小白還是大牛歡迎入駐，大家一起交流學(xué)習(xí)
三、動(dòng)效應(yīng)保有距離
在剛開(kāi)始追女孩子的時(shí)候，我們往往更希望妹子們能夠看到我們的真誠(chéng)和真心。如果一來(lái)你就送女孩珍珠和項(xiàng)鏈，我相信大多數(shù)女孩還是容易被嚇到的，而那些沒(méi)有被嚇跑的女孩，你后面要送什么？
所以前期我更推薦小而美的東西，這樣既不會(huì)顯得太突兀，也比較能夠讓人接受。當(dāng)然也不是說(shuō)咱們不能玩兒點(diǎn)大的，在這節(jié)奏匆忙的互聯(lián)網(wǎng)時(shí)代，大家什么妖魔鬼怪沒(méi)有見(jiàn)過(guò)，但這得是在彼此建立足夠多的信任之后才可以挑戰(zhàn)的事情。
好比平時(shí)循規(guī)蹈矩的程序員男友，天還沒(méi)亮就拉著女朋友的手，也不管妹子的起床氣和疑問(wèn)直接載到山頂。當(dāng)太陽(yáng)出來(lái)的那一刻我相信女孩會(huì)被融化。但如果這個(gè)男友換成就見(jiàn)過(guò)一次面的朋友?？赡艽蠖鄶?shù)人心里還是拒絕的。
這也是起點(diǎn)國(guó)際初期并沒(méi)有選擇加入太多酷炫的動(dòng)效的原因。當(dāng)然還有一個(gè)原因是為了和大家快點(diǎn)見(jiàn)面，我們把需要花時(shí)間和精力研究的酷炫效果留在了后續(xù)的迭代當(dāng)中。畢竟先讓大家看到我們，我們才有機(jī)會(huì)給大家展現(xiàn)我們其他方面的優(yōu)點(diǎn)。太急于展現(xiàn)自己，反而會(huì)顯得不尊重對(duì)方，保持人與人之間應(yīng)有的距離，才能讓彼此關(guān)系更長(zhǎng)久。而這也說(shuō)明動(dòng)效是一件和浪漫一樣需要花時(shí)間和心思才能完成的事情。
請(qǐng)客的男生滿天飛，入座的時(shí)候主動(dòng)為女生搬椅子的帥哥卻沒(méi)有幾個(gè)。既然我們大家都做得一樣，那么女生在選擇的時(shí)候就只能看顏值了。所以細(xì)節(jié)此時(shí)就顯得特別重要了。初次見(jiàn)面你送女生一支玫瑰，出門(mén)隨身揣一包紙巾，或者在就餐的時(shí)候把女生喜歡吃的菜安排在她的容易夾到的位置。這些細(xì)節(jié)都是能夠給你加分的項(xiàng)目。
起點(diǎn)國(guó)際的頁(yè)面承載著非常豐富的內(nèi)容，但這同時(shí)意味著咱們的頁(yè)面會(huì)相對(duì)較長(zhǎng)，當(dāng)用戶想回到頂部的時(shí)候還得拖動(dòng)滾動(dòng)條，這明顯比較的麻煩。我們的做法就是在頁(yè)面滾動(dòng)到超過(guò)一屏的時(shí)候顯示一個(gè)返回頂部的按鈕，點(diǎn)擊之后頁(yè)面滾回到頂部按鈕消失。按鈕出現(xiàn)和消失，都是采用和頁(yè)面滾動(dòng)一致的滑動(dòng)效果，既起到提醒用戶這里有一個(gè)按鈕的功能，又不會(huì)讓這個(gè)按鈕出現(xiàn)的時(shí)候顯得太過(guò)生硬。
酷炫的動(dòng)效當(dāng)然可以吸引人，但是我們往往容易進(jìn)入為了酷炫而酷炫的坑，反而忽略掉細(xì)節(jié)。我們通常會(huì)在按鈕 hover 的時(shí)候給到一個(gè)動(dòng)效，也能把這個(gè)效果做得很贊。但是按鈕可不止「:hover」這一種狀態(tài)，「:active」、「:visited」、「:disabled」、「:focus」這些也同樣是我們需要考慮的細(xì)節(jié)。
有的人可能會(huì)覺(jué)得考慮到這么的極致是不是一件值得的事。我們喜歡一個(gè)人的時(shí)候，不會(huì)考慮做這些事情是不是值得的，即使明知道對(duì)方可能并不一定會(huì)看到。但是，如果對(duì)方看到了呢？這是什么？這就叫貼心。貼心這種東西，有的時(shí)候我們感覺(jué)不到，但是只要對(duì)方感受到了就會(huì)放大其它所有的好。而這也是網(wǎng)頁(yè)中的動(dòng)效重要的地方。我們?yōu)閯e人考慮的越多，別人自然也會(huì)記住我們的好，這是再簡(jiǎn)單不過(guò)的道理了。
老司機(jī)的套路千千萬(wàn)，我們可以學(xué)習(xí)的可不止一種。這里我拿網(wǎng)頁(yè)中常見(jiàn)的下拉菜單舉例。我們要做的事也很簡(jiǎn)單，就是用戶在點(diǎn)擊按鈕之前讓下拉菜單不可見(jiàn) ( display:none ) ，移入按鈕可點(diǎn)區(qū)域的時(shí)候顯示 ( display:block ) ，這樣我們功能的需求就實(shí)現(xiàn)了。可是這還不夠，女朋友讓你去倒杯水，你就傻傻的給她倒了一杯水放到了她的面前。這樣并不會(huì)讓妹子開(kāi)心，因?yàn)檫@樣一點(diǎn)也不浪漫。
女生讓你倒杯水有可能是大姨媽來(lái)了不好意思告訴你，此刻你應(yīng)該拿出平時(shí)準(zhǔn)備好的姜茶給她泡上。待姜茶稍微涼下來(lái)之后，你再端過(guò)去，抱住她喂她。還要假裝這茶有點(diǎn)燙，給她吹一吹，關(guān)心的說(shuō)：「寶貝，小心燙?！惯@看似戲劇化的倒水，雖然給人感覺(jué)有點(diǎn)作，但這相對(duì)來(lái)說(shuō)會(huì)比較的浪漫。
我們的下拉菜單又何嘗不能浪漫？在顯示下拉的時(shí)候加一點(diǎn)透明度，是不是就柔和了？讓下拉出現(xiàn)的時(shí)候再有一個(gè)上下的偏移，這樣是不是就豐富了？再大膽一點(diǎn)我們讓子元素出來(lái)的時(shí)候有一個(gè)先后順序的延遲，這樣是不是就更有層次了？如果想要更酷炫，甚至可以考慮一些 3D 的效果。
CSS 強(qiáng)大的地方在于我們對(duì)幾乎所有的DOM屬性都有操作的能力。時(shí)間，透明度，大小，位置，顏色，速度，甚至是 3D 等等我們都是可以嘗試的。甚至組合控制不同的屬性，還會(huì)出現(xiàn)意想不到的效果。
別人送花，你也送花，這怎么能體現(xiàn)出自己的優(yōu)勢(shì)？要讓女神在眾多追求中看到自己，就不要送花，我們送口紅，這樣會(huì)不會(huì)顯得自己很特別，很有品味？
當(dāng)然這種特別的嘗試都是需要符合接下來(lái)要講的用戶預(yù)期的。你女朋友可能真的只是口渴這么簡(jiǎn)單，你給她搞這么一出浪漫，那明顯就是戲演過(guò)了。女神可能喜歡的是少女粉色號(hào)的口紅，你卻送了一只姨媽紅，這就弄巧成拙了。
你和你的女朋友在繁華的街道逛街，突然你華麗轉(zhuǎn)身，對(duì)著你的女朋友唱起了《Marry Me》，然后單膝下跪，從胸口掏出了一個(gè)精致的盒子。此時(shí)你們周圍已經(jīng)圍滿了人，你的女朋友也激動(dòng)得眼睛有些濕潤(rùn)。你打開(kāi)盒子，里面什么都沒(méi)有「Tada！ 愚人節(jié)快樂(lè)！」我想此刻你女朋友心中一定有一萬(wàn)匹羊駝狂奔。
再轉(zhuǎn)回到我們網(wǎng)頁(yè)的場(chǎng)景當(dāng)中，相信很多人和我一樣，本來(lái)打算下載一個(gè)起點(diǎn)國(guó)際的閱讀 APP，好不容易進(jìn)入到了一個(gè)下載的界面，超大的下載按鈕讓我看到了希望，我點(diǎn)了下去。哐當(dāng)！一個(gè)有聲的全屏視頻廣告炸了出來(lái)。我急忙關(guān)掉。然后再點(diǎn)一次下載下來(lái)一個(gè)安裝文件。好不容易安裝好打開(kāi)一開(kāi)，XX是一個(gè)流氓軟件。
以上兩個(gè)都是屬于不符合用戶預(yù)期的行為，這很容易引起用戶的不適，甚至是反感。因?yàn)檎f(shuō)得嚴(yán)重一點(diǎn)，這其實(shí)叫做欺騙。讓人喜歡你很難，但讓人討厭你是輕而易舉的事。一旦用戶感覺(jué)自己上當(dāng)了，你之前所有的努力就都有可能白費(fèi)。
如何將這種效果衍生到我們的網(wǎng)頁(yè)中呢？起點(diǎn)國(guó)際在很多鼠標(biāo)交互的地方，都統(tǒng)一采用的是鼠標(biāo)移入的時(shí)候添加陰影，按下的時(shí)候變小的方式。設(shè)想一下桌上放了一塊 QQ糖我們準(zhǔn)備用手去捏它。當(dāng)我們手移過(guò)去的時(shí)候會(huì)擋住光，所以會(huì)看到陰影，捏下去的時(shí)候，因?yàn)橛昧藙潘蕴潜荒蟊饬?。這是不是比較符合我們對(duì)按下這個(gè)動(dòng)作的預(yù)期？冰冷的網(wǎng)頁(yè)應(yīng)盡量用動(dòng)效去貼近我們的生活，降低用戶的理解成本，減少用戶在你頁(yè)面效果上的遲疑。而這也是擬物為什么始終是培養(yǎng)用戶習(xí)慣的首選設(shè)計(jì)風(fēng)格的原因。
當(dāng)然這只是萬(wàn)千場(chǎng)景中的一種，根據(jù)我們預(yù)設(shè)的場(chǎng)景不同，我們的動(dòng)效也需要相應(yīng)的調(diào)整。你也可以設(shè)想我們鼠標(biāo)點(diǎn)擊的過(guò)程是一個(gè)在平靜湖面扔石頭的場(chǎng)景，當(dāng)鼠標(biāo)按下，按鈕出現(xiàn)一個(gè)逐漸擴(kuò)散的陰影，以模擬湖面漣漪的效果。這也是非常不錯(cuò)的一個(gè)選擇。
這個(gè)比較像我們和女朋友聊天。前一秒你們?cè)娫~歌賦人生哲學(xué)聊得正嗨。突然你話鋒急轉(zhuǎn)聊起了昨天來(lái)你家的某個(gè)親戚很讓人討厭。這種聊天方式我相信沒(méi)有幾個(gè)人能夠招架的住。話題和話題之間應(yīng)該有一種起承轉(zhuǎn)合的聯(lián)系，這樣才不容易把天聊死，這在我們動(dòng)效當(dāng)中也是同樣的道理。
點(diǎn)擊按鈕和彈出彈窗這兩個(gè)動(dòng)作其實(shí)本身是沒(méi)有太大聯(lián)系的。我們點(diǎn)擊按鈕可以觸發(fā)的事件太多了，彈出彈窗只是其中一種而已。但我們的需求又是如此。所以我們建議用動(dòng)效去拉近它們之間的關(guān)系。人與人相處有一個(gè)類似的道理，我重復(fù)你的動(dòng)作就是為了和你拉近關(guān)系。女神給你眨了一下眼睛，你自然會(huì)想到趕緊給女神也拋個(gè)媚眼。路人給了你一個(gè)微笑，你自然也是會(huì)回敬一個(gè)微笑。重復(fù)讓原本陌生的兩個(gè)人有了聯(lián)系，也可以讓兩個(gè)沒(méi)有關(guān)系的操作有聯(lián)系。
之前我解釋過(guò)起點(diǎn)國(guó)際對(duì)于按下這個(gè)動(dòng)作的處理方式是鼠標(biāo)按下變小移開(kāi)變大，延續(xù)到彈窗我們讓彈窗順著按鈕變大。因?yàn)閺棿俺鰜?lái)的時(shí)候是由小變大，那么關(guān)閉的時(shí)候自然就想到由大變小。這樣我們的動(dòng)效就只有由大到小，和由小到大一種交互形式，用戶的認(rèn)知成本也大大降低。并且重復(fù)是一個(gè)可以節(jié)約開(kāi)發(fā)成本的事，一舉兩得何樂(lè)而不為呢？
從一開(kāi)始我們幾乎不知道怎么做動(dòng)效到后來(lái)知識(shí)儲(chǔ)備越來(lái)越多，我們總是會(huì)希望能夠小小的炫耀一下。但是我們知識(shí)的來(lái)源往往是不同的網(wǎng)站或者不同的大神。我們把他們的優(yōu)勢(shì)統(tǒng)統(tǒng)的拿過(guò)來(lái)放到我們的網(wǎng)站中，就容易在我們自己的網(wǎng)頁(yè)上出現(xiàn)百花爭(zhēng)艷的狀態(tài)。局部看美極了，但整體用起來(lái)總是覺(jué)得怪怪的。混搭可能很驚艷但很難高級(jí)。
重復(fù)可以達(dá)到統(tǒng)一整體風(fēng)格的目的，如果有的地方不能做到重復(fù)，我們也盡量應(yīng)采用速度一致或風(fēng)格相近的動(dòng)效，以求達(dá)到整體的一致性。而這種一致性帶來(lái)的舒適感，可能比酷炫帶來(lái)的驚喜，更容易留住我們的用戶。
當(dāng)我們和女朋友準(zhǔn)備出門(mén)的時(shí)候，女生往往都會(huì)精心的打扮一下。「親愛(ài)的你看我是穿這條粉色裙子好呢？還是這條藍(lán)色的裙子好呢？」通常這樣的問(wèn)題，對(duì)于一個(gè)完全不懂打扮的 “程序猿” 來(lái)說(shuō)簡(jiǎn)直就是噩夢(mèng)。你說(shuō)選粉色吧「不行，這個(gè)顏色太嫩了，不適合我?！鼓阏f(shuō)選藍(lán)色吧「這個(gè)顏色和我的皮膚不搭?！谷缓竽銈兙驮谶@個(gè)問(wèn)題上不斷的重復(fù)，輪回。最后你女朋友會(huì)在生氣的妥協(xié)當(dāng)中陪你出門(mén)，可是這一切你也無(wú)能為力。
在我們的網(wǎng)頁(yè)中如果同一時(shí)間給用戶的選擇越多，用戶一個(gè)都不想選的幾率就越大。所以我們要做的是在交互上盡量減少選擇，在動(dòng)效上弱化選擇給用戶帶來(lái)的恐慌。
起點(diǎn)國(guó)際首頁(yè) Banner 上的按鈕默認(rèn)是不顯示的，用戶鼠標(biāo)移入到 Banner 區(qū)域，我們認(rèn)為用戶有了切屏的意愿，此時(shí)再顯示我們的按鈕，并且按鈕出現(xiàn)的時(shí)候我們用動(dòng)效讓右側(cè)按鈕比左側(cè)按鈕先出現(xiàn)。這樣即契合我們第六點(diǎn)講到的符合用戶預(yù)期，也避免了視覺(jué)上同時(shí)出現(xiàn)的選擇給用戶帶來(lái)的焦慮感。完美！
我們花那么多的時(shí)間，相識(shí)，相知，中間絞盡腦汁的彼此套路，最終目的都是希望對(duì)方感受到我們的用心然后和我們?cè)谝黄?。透過(guò)動(dòng)效，我們希望用戶也能夠感受到我們的真誠(chéng)與善意，不求能與用戶天長(zhǎng)地久，只求用戶能在我們這個(gè)書(shū)的城堡中有一場(chǎng)浪漫的旅程。
關(guān)注小編，在這里，我們分享程序員相關(guān)技術(shù)，職場(chǎng)生活，行業(yè)熱點(diǎn)資訊。不定期還會(huì)分享IT趣文和趣圖。這里屬于我們程序員自己的生活，工作和娛樂(lè)空間
重慶分公司
重慶分公司
