除了不斷提升產(chǎn)品的用戶體驗(yàn)之外简十，意想不到的彩蛋也可能會(huì)對(duì)人們對(duì)你品牌的感受或記憶印象深刻蛾坯。對(duì)于正在工作的產(chǎn)品也是如此-?獲得正確的的品牌基因历筝。用Jared M. Spool給我的話來(lái)解釋這個(gè)道理室谚，這句話一直在影響著我做設(shè)計(jì)的過(guò)程：
你期望你的酒店房間有基本的東西杀捻，比方衛(wèi)生紙，床單和毛巾颠通。你不會(huì)感謝這家酒店址晕，也不會(huì)因?yàn)檫@件事推薦你的朋友來(lái)這家酒店 - 但如果他們沒(méi)有滿足這些基本需求，你就會(huì)很煩惱顿锰。相同的谨垃，你可能會(huì)對(duì)登記入住時(shí)服務(wù)人員的熱烈歡迎，免費(fèi)洗浴用品等額外奢侈品或著墻上漂亮的藝術(shù)品感到滿足和感激......但是如果你沒(méi)有獲得這些額外的東西硼控，你也不一定會(huì)感到失望刘陶，因?yàn)槟悴](méi)有期望他們 - 但你可能更有可能退回或轉(zhuǎn)移到其他酒店。
滿足人們的基本期望會(huì)讓他們滿意牢撼，但是讓人感到愉悅是產(chǎn)品體驗(yàn)的更高追求易核。兩者都非常重要。
首先浪默，作為前提
為了本文的目的牡直，我先假設(shè)你已經(jīng)掌握了基本知識(shí)，你知道你的產(chǎn)品用戶需要什么纳决？它用起來(lái)簡(jiǎn)單嗎碰逸？存不存在bug？當(dāng)你可以肯定這些問(wèn)題之后阔加，就已經(jīng)準(zhǔn)備好專注于可以提升品牌體驗(yàn)的方法饵史，并且讓您的受眾滿意。
沒(méi)有任何方法是適合所有解決方案的解決方案
本文探討了一些可以嘗試提升數(shù)字品牌和網(wǎng)站以及產(chǎn)品體驗(yàn)的方法，并且給它們?cè)黾喻攘χ蹈炫纭＿@些額外的細(xì)節(jié)和彩蛋湃番，可以帶來(lái)更難忘的用戶體驗(yàn)。
動(dòng)效設(shè)計(jì)
隨著各類開(kāi)發(fā)工具的更新迭代吭露，我們可以用CSS動(dòng)畫(huà)和JavaScript來(lái)做非常多的事情吠撮。可能性幾乎是無(wú)限的讲竿！產(chǎn)品中的動(dòng)效也是非常常見(jiàn)的一種泥兰。關(guān)鍵也需要融入足夠多的動(dòng)畫(huà)細(xì)節(jié)，讓結(jié)果變得有趣题禀，充滿魅力值鞋诗，并保證不會(huì)去分散用戶的注意力。
在加載的時(shí)候嘗試對(duì)關(guān)鍵元素進(jìn)行動(dòng)畫(huà)處理迈嘹。簡(jiǎn)單的淡入淡出可以作為引入內(nèi)容的有效方式削彬，加上一些微妙的細(xì)節(jié)。在讓用戶注意關(guān)鍵元素的時(shí)候非常有用秀仲。保證時(shí)機(jī)融痛，加上一定的變化。在下面的例子中我們可以看到不同的元素是如何按順序和諧地移動(dòng)的; 橫向或者縱向啄育。嘗試不同的方式可以獲得更多逼真引人注目的流暢動(dòng)效酌心。
請(qǐng)注意拌消，上面和下面的大多數(shù)案例都是以不同方向“擦除”顏色的塊挑豌，構(gòu)建新頁(yè)面并顯示內(nèi)容。微妙地使用視差滾動(dòng)也很有趣墩崩。您還可以將動(dòng)畫(huà)與更具戲劇性的內(nèi)容配對(duì)氓英，比如說(shuō)視頻：
聘請(qǐng)外包或著全職的前端開(kāi)發(fā)人員來(lái)制作和微調(diào)這些額外的小細(xì)節(jié)并讓你的動(dòng)實(shí)現(xiàn)落地是一筆巨大的投資！
但是鹦筹，作為本文中反復(fù)出現(xiàn)的主題铝阐，我會(huì)嘗試提出簡(jiǎn)單，免費(fèi)或著更少預(yù)算的替代方案铐拐。在這種情況下徘键，動(dòng)畫(huà)，去看看由由Daniel Eden開(kāi)發(fā)的Animate.css遍蟋。她會(huì)讓你的的網(wǎng)站設(shè)置非常容易吹害。您只需按步驟進(jìn)行操作。用最少的努力虚青，你會(huì)創(chuàng)造出驚人的效果來(lái)它呀。
<p class=”animated fadeInLeft”>Hello</p>
例如，上面的內(nèi)容會(huì)使單詞“Hello”淡入，從左向右移動(dòng)纵穿。下面是幾個(gè)簡(jiǎn)單的例子下隧，需要幾分鐘的時(shí)間來(lái)完成：
如果您想要更多控制，可以關(guān)注譯者（Jadon7）后續(xù)關(guān)于CSS相關(guān)的文章谓媒∠海或者訪問(wèn)Awwwards，看看有什么創(chuàng)新的動(dòng)態(tài)效果篙耗。
對(duì)于它的價(jià)值：我個(gè)人在幾個(gè)月前才學(xué)會(huì)了CSS動(dòng)畫(huà)迫筑。如果你了解CSS代碼相關(guān)的知識(shí)，你可能不會(huì)覺(jué)得太困難宗弯，并且有大量資源可以幫助你脯燃。我的第一次嘗試是Club of the Waves? （下文）
視覺(jué)設(shè)計(jì)師的思考：當(dāng)你在考慮如何通過(guò)大量學(xué)習(xí)去而僅僅產(chǎn)出一個(gè)DEMO文件的時(shí)候，為什么不把精力投資在如何去實(shí)現(xiàn)落地這個(gè)想法上呢蒙保？我覺(jué)得設(shè)計(jì)師更應(yīng)該是一個(gè)愿意吧想法落地的人群辕棚，并且把他們的細(xì)節(jié)調(diào)整的深入人心。
小細(xì)節(jié)
除了細(xì)節(jié)豐富的頁(yè)面加載動(dòng)畫(huà)之外邓厕，像懸停狀態(tài)這樣簡(jiǎn)單的事情可以讓用戶感到愉快逝嚎。產(chǎn)品中的微交互和細(xì)節(jié)表現(xiàn)可以對(duì)用戶體驗(yàn)產(chǎn)生重大影響。只需一行CSS详恼，就可以通過(guò)從一種顏色淡入到另一種顏色补君，或者從一個(gè)位置到另一個(gè)位置平穩(wěn)地過(guò)度，而不是默認(rèn)的生硬的狀態(tài)更改昧互，使懸停狀態(tài)更“美觀”挽铁。下面是有和沒(méi)有簡(jiǎn)單的CSS轉(zhuǎn)換的按鈕懸停狀態(tài)：
transition: all .5s ease;
將上述代碼復(fù)制到你的CSS當(dāng)中，并且查看接下來(lái)會(huì)發(fā)生什么敞掘。然后嘗試使用不同的懸停狀態(tài)叽掘，比如顏色，寬度玖雁，高度更扁，填充和不透明度，瀏覽最終得到的結(jié)果赫冬。點(diǎn)擊鏈接查看更多效果和CSS動(dòng)畫(huà)浓镜。
不同的應(yīng)用案例
情感化元素不應(yīng)該去分散用戶的注意力; 例如，谷歌在平衡功能和情感化方面做得非常出色劲厌。而且他也因因?yàn)榇硕劽叛Γ麄儾粫r(shí)用一個(gè)“動(dòng)畫(huà)標(biāo)注”替代他們的標(biāo)志，并且僅僅展示一天脊僚。有時(shí)它是一個(gè)插圖相叁，有時(shí)是一個(gè)動(dòng)畫(huà)遵绰，甚至是一個(gè)簡(jiǎn)單的游戲！除了有趣之外增淹，情感化還有助于紀(jì)念周年紀(jì)念活動(dòng)或特殊節(jié)日椿访，有助于教育、娛樂(lè)或著通知搜索結(jié)果虑润。
谷歌其他的一些菜單：嘗試谷歌搜索：“ Do a barrel roll”成玫，看看會(huì)發(fā)生什么！或者搜索：“ Atari breakout ”拳喻，然后點(diǎn)擊圖片哭当。也可以嘗試：“ Anagram ”，“ Askew”冗澈，“ Zerg rush ”或“Flip a coin”钦勘。
品牌吉祥物
為了保持與品牌的樂(lè)趣，在合適的情況下嘗試讓品牌吉祥物做一些有趣的小動(dòng)作亚亲。讓他們充分的“活過(guò)來(lái)“
Freddie品牌的MailChimp是吉祥物的最佳例子之一彻采。他們通過(guò)豐富多彩的動(dòng)畫(huà)將Freddie整合到他們的產(chǎn)品中，比如下面的兩個(gè)捌归，用于發(fā)送電子郵件和安排活動(dòng)
從幾年前開(kāi)始肛响，在體驗(yàn)MailChimp產(chǎn)品的時(shí)候我最喜歡的功能之一。在登錄時(shí) - 不像您所期望的那樣簡(jiǎn)單地顯示標(biāo)志-?在每次訪問(wèn)時(shí)惜索，F(xiàn)reddie都會(huì)有一個(gè)包含不同信息的演講泡泡特笋。大多數(shù)情況下，都會(huì)讓交互變得更加有趣巾兆，有時(shí)會(huì)鏈接到有趣的外部?jī)?nèi)容或YouTube視頻猎物。我實(shí)際上很喜歡登錄并看到他們精心為我準(zhǔn)備的東西，而我告訴其他人我是多么高興能夠擁有這種有趣的產(chǎn)品體驗(yàn)臼寄。
關(guān)于MailChimp：對(duì)于這個(gè)品牌的吉祥物Freddie來(lái)說(shuō)霸奕，還有很多他的驚人之處溜宽。他有他自己的漫畫(huà)吉拳，并且也公開(kāi)露面，并且被制作成了非常多的周邊适揉。這所有一切促使她成為一個(gè)強(qiáng)大的品牌留攒！
讓沉悶的時(shí)間變得有趣
這是任何一個(gè)產(chǎn)品都需要考慮的部分 - 所有的內(nèi)容都需要時(shí)間來(lái)加載。這會(huì)讓用戶感到沮喪嫉嘀。用戶是不耐煩的炼邀。而設(shè)計(jì)應(yīng)該做一些事情減輕用戶等待的焦灼感，讓加載時(shí)間不那么令人沮喪剪侮。
Hipmunk就是一個(gè)非常好的例子拭宁。他們的品牌吉祥物是一個(gè)可愛(ài)的花栗鼠洛退。有了這個(gè)可愛(ài)的吉祥物，用戶會(huì)樂(lè)在其中杰标！他們的產(chǎn)品的性質(zhì)意味著你需要花費(fèi)大量時(shí)間去等待檢索結(jié)果 - 用在航班兵怯，酒店和汽車上。不同的產(chǎn)品搜索功能有不同的動(dòng)畫(huà)版本的吉祥物腔剂，比如下面的航班媒区。
顯然，除了給吉祥物一個(gè)加載動(dòng)畫(huà)之外掸犬，一個(gè)成熟的產(chǎn)品情感化的動(dòng)效并不僅限于此袜漩，他可能出現(xiàn)在logo上、ICON湾碎、插畫(huà)等等各種細(xì)節(jié)之上
迪斯尼和環(huán)球主題公園的等待線是一個(gè)很好的比喻宙攻。排隊(duì)可能長(zhǎng)達(dá)2個(gè)小時(shí)，但兩家公司都做了很棒的工作介褥，創(chuàng)造了一種環(huán)境粘优，即使是等待的一條線也變得非常有趣味。當(dāng)然呻顽，做這一切的目的就是為了讓等待沮喪的過(guò)程變得愉悅
如果你不是百萬(wàn)美元的創(chuàng)業(yè)公司雹顺，沒(méi)有一支龐大的產(chǎn)品團(tuán)隊(duì)，而且也沒(méi)有太多時(shí)間廊遍，或者你沒(méi)有一個(gè)職業(yè)的動(dòng)效設(shè)計(jì)師嬉愧，那么不用擔(dān)心。有很多很酷的喉前、免費(fèi)的GIF圖像庫(kù)没酣。試試這個(gè)，這個(gè)或這個(gè)卵迂。
復(fù)活節(jié)彩蛋
使用一些意想不到的功能作為彩蛋裕便。
接下來(lái)這些真的只是為了好玩！并非產(chǎn)品中的所有操作都需要提供功能见咒。只要在不分散用戶注意力的同時(shí)帶來(lái)愉悅感體驗(yàn)就可以偿衰。例如，在一個(gè)404頁(yè)面增加一些動(dòng)效也能帶來(lái)非常多好玩的驚喜
上面的第2到第5個(gè)手機(jī)屏幕顯示了來(lái)自同一應(yīng)用的另外兩個(gè)示例改览。一個(gè)常見(jiàn)的iOS交互是向下滑動(dòng)以重新加載下翎。看上面的左數(shù)第二個(gè)屏幕 - 當(dāng)你向下滑動(dòng) - 除了預(yù)期的加載圖標(biāo)之外還有一個(gè)意想不到的虛線...如果你不停地向下滑動(dòng)（這是一個(gè)非常異常的iOS交互）宝当，你最終會(huì)找到一只小蜜蜂（一只Swarm品牌的吉祥物）视事。
其他方式
本文僅探討一些方法可以讓你的品牌或產(chǎn)品獲??得更多生命力。除此之外你也可以嘗試：
· 丟棄陳舊無(wú)聊的設(shè)計(jì)稿庆揩。嘗試跟客戶去交流俐东，他們是人跌穗，而不是呆板的數(shù)據(jù)。每個(gè)人都會(huì)有他自己的個(gè)性虏辫。用你的嘗試瞻离，號(hào)召性行為等等來(lái)嘗試? 讓你的動(dòng)畫(huà)更加貼近真實(shí)需求，并且友善和實(shí)用乒裆。
· 有一個(gè)有趣套利，實(shí)用或簡(jiǎn)單有趣的404頁(yè)面。
· 使用非無(wú)聊的頭像或空狀態(tài)或者個(gè)人資料的圖片鹤耍，并且給他們添加一定的動(dòng)效
本文翻譯來(lái)自 Medium
原作者：Andrew Couldwell
著作權(quán)歸作者所有肉迫。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處稿黄。
阿里動(dòng)效設(shè)計(jì)師帶你了解更多動(dòng)效相關(guān)知識(shí)/軟件技能/公開(kāi)課程：
