編者按：動(dòng)效設(shè)計(jì)可以說(shuō)是目前UI設(shè)計(jì)圈當(dāng)中最火的趨勢(shì)了，這次設(shè)計(jì)師Eugene Rudyy在Medium分享了他參與設(shè)計(jì)新版Yep!的經(jīng)歷，這次他講的不是怎么設(shè)計(jì)才好看，而是怎樣用動(dòng)效來(lái)替代語(yǔ)言來(lái)告訴用戶(hù)APP的運(yùn)作機(jī)制。脫去華麗的外衣，動(dòng)效原來(lái)還能如此精彩！

Yep!是什么

一年前開(kāi)始，我開(kāi)始通Yep!的創(chuàng)始人Roman與Alexander一同工作，他們?cè)噲D讓Yep！改變大家的生活。這是一款幫助人們相遇和聯(lián)系的APP，他們希望Yep！所提供的服務(wù)能夠讓大家更輕松的約會(huì)碰頭，更愉悅高效地做自己喜歡的事情。

比如當(dāng)你打算同某個(gè)有相同愛(ài)好的人一起和咖啡，那么你可以借助Yep！來(lái)查看這個(gè)時(shí)段內(nèi)周?chē)袥](méi)有相同需求的人。之后你可以借助Yep！和他商討細(xì)節(jié)，約定地點(diǎn)，然后朋友，享受接下來(lái)愉悅的時(shí)光。

為了完成這款A(yù)PP，我和兩位創(chuàng)始人在見(jiàn)面后接下來(lái)的幾個(gè)月當(dāng)中，要測(cè)試大量的新功能和特性，其中很多想法是前所未有的，這也是這款A(yù)PP所獨(dú)特的所在。現(xiàn)在Yep！可以在蘋(píng)果的AppStore中免費(fèi)下載。

意義非凡的動(dòng)效

在iOS剛剛問(wèn)世的時(shí)候，那些精致而有意義的動(dòng)效給我留下了極為深刻的印象。動(dòng)效的存在，溝通著不同的界面和功能，在交互上起到了重要的承接作用，最重要的是，它會(huì)潛移默化地為用戶(hù)傳遞信息，構(gòu)建模式，淡化硬件設(shè)備無(wú)機(jī)的一面。這些動(dòng)效無(wú)需復(fù)雜的文字說(shuō)明，就能告訴用戶(hù)接下來(lái)要做什么。當(dāng)你刪除文件的時(shí)候，文件投入垃圾桶的動(dòng)效就傳遞給用戶(hù)“刪除”的含義。這些，就是機(jī)器的“人性”所在。

隨著UI設(shè)計(jì)扁平化的風(fēng)潮，蘋(píng)果早期所主導(dǎo)的“蘋(píng)果式擬物化”（Skeuomorphism）正逐漸消失在大家的視野里，當(dāng)時(shí)那些精致而直觀的動(dòng)效也被扁平化的動(dòng)效設(shè)計(jì)所替代。相比早期的設(shè)計(jì)，偏平化的語(yǔ)境性下動(dòng)效有了更多的可能性。

在設(shè)計(jì)之初，我們開(kāi)始構(gòu)建Yep!的線框圖和原型的時(shí)候就清醒地意識(shí)到，Yep！必須和其他普通的社交APP不一樣，它需要簡(jiǎn)約的視覺(jué)設(shè)計(jì)，并且通過(guò)交互和動(dòng)效來(lái)告訴用戶(hù)它的運(yùn)作機(jī)制。這樣的設(shè)定有兩個(gè)優(yōu)勢(shì)：1、動(dòng)效可以更為生動(dòng)地告訴用戶(hù)發(fā)生了什么；2、動(dòng)效可以更加生動(dòng)，更有益于情感的傳遞和程序的使用。當(dāng)然，這樣的設(shè)計(jì)也就意味著開(kāi)發(fā)成本會(huì)更加高昂，但是最終我們還是認(rèn)為這些投入是值得的。

在Yep！中，用戶(hù)操作的基本流程是這樣的：選擇活動(dòng)->發(fā)出請(qǐng)求->等待搜索結(jié)果->查看結(jié)果（尋找匹配）。發(fā)出請(qǐng)求之后，在之后的一個(gè)小時(shí)內(nèi)，系統(tǒng)會(huì)持續(xù)尋找匹配的其他用戶(hù)。各個(gè)階段有不同的界面，但是借助動(dòng)效的銜接，用戶(hù)會(huì)感覺(jué)這是一個(gè)界面在不停地轉(zhuǎn)變，非常自然。這樣的設(shè)計(jì)在iOS平臺(tái)上可以非常輕松的實(shí)現(xiàn)，也符合它的設(shè)計(jì)規(guī)范。

選擇活動(dòng)

在yep！的活動(dòng)選擇界面中，帶著圓形邊界的圖標(biāo)錯(cuò)落地分布在界面上，不同的活動(dòng)有著不同的色彩。

當(dāng)程序啟動(dòng)的時(shí)候，活動(dòng)圖標(biāo)會(huì)依照順時(shí)針的順序出現(xiàn)在屏幕上，而Sport和Events還有二級(jí)菜單，而二級(jí)菜單的出現(xiàn)方式與主菜單完全一致。整個(gè)APP的配色使用的是糖果色，配上活潑的動(dòng)效，可以讓用戶(hù)感覺(jué)更加愉悅。

配置請(qǐng)求

在這里出現(xiàn)了第一次界面切換，我們?cè)O(shè)計(jì)的動(dòng)效會(huì)讓用戶(hù)感覺(jué)到流暢，并且讓他們明白到底發(fā)生了什么。

下面就是動(dòng)效所要呈現(xiàn)的流程：

1、在界面中選擇活動(dòng)
2、查看請(qǐng)求的內(nèi)容并準(zhǔn)備發(fā)布，添加地點(diǎn)和額外說(shuō)明
3、發(fā)布請(qǐng)求
4、Yep!開(kāi)始搜尋50公里內(nèi)的區(qū)域是否有相似請(qǐng)求
5、得到結(jié)果（在下一個(gè)動(dòng)畫(huà)中呈現(xiàn)）

在上面的動(dòng)畫(huà)中，用戶(hù)選擇了吃飯，圖標(biāo)上移在地圖上化作地標(biāo)，這個(gè)動(dòng)畫(huà)非常明確的告訴用戶(hù)這一活動(dòng)的類(lèi)型（吃飯）以及是在什么地方。當(dāng)你點(diǎn)擊OK之后，地圖標(biāo)記化作雷達(dá)，掃描周?chē)?0km內(nèi)的用戶(hù)，非常直觀，不多一句話(huà)。沒(méi)有多余的按鈕、請(qǐng)求和大大小小的按鈕和框圖，用戶(hù)只需要看著動(dòng)效，就明白發(fā)生了什么。

用戶(hù)體驗(yàn)的提升與錯(cuò)誤

在上一版的設(shè)計(jì)中，我們的設(shè)計(jì)并非如同現(xiàn)在一樣。當(dāng)用戶(hù)選擇活動(dòng)類(lèi)型之后的第二屏，顯示的是用戶(hù)的名字和照片等信息，當(dāng)你查看周?chē)ヅ溆脩?hù)的時(shí)候，也會(huì)打開(kāi)相似的界面，當(dāng)然你的信息也可以被他人看到。

這樣的設(shè)計(jì)讓第二屏有67%的通過(guò)率。但是，這樣的設(shè)計(jì)機(jī)制運(yùn)行起來(lái)并不好。許多用戶(hù)在第二屏出現(xiàn)這個(gè)階段就不愿意進(jìn)行下去了，許多用戶(hù)因此而流失，因?yàn)楣_(kāi)個(gè)人信息本就不符合這些用戶(hù)的需求，這個(gè)環(huán)節(jié)本就是失敗的。因此，我們將這些影響用戶(hù)的信息和環(huán)節(jié)都清理得干干凈凈。

修改之后，新版的第二屏的通過(guò)率本身就達(dá)到了83%，用戶(hù)只需要確定需求和地點(diǎn)，額外的選擇就是添加地點(diǎn)和說(shuō)明，隨后我們只會(huì)增加一個(gè)分享按鈕。從67%到83%，這是一個(gè)明顯的提升。我們?cè)噲D通過(guò)流程優(yōu)化，將這個(gè)數(shù)字再提高一點(diǎn)。

發(fā)送請(qǐng)求

配置好請(qǐng)求之后，獲取到匹配的用戶(hù)，每個(gè)用戶(hù)的底部就會(huì)有一個(gè)Yep！按鈕，點(diǎn)擊按鈕之后，就會(huì)向用戶(hù)發(fā)出約會(huì)請(qǐng)求。如同用戶(hù)接受了你的請(qǐng)求，那么就可以發(fā)起會(huì)話(huà)聊天了。當(dāng)然，請(qǐng)求是相互的，用戶(hù)可以發(fā)出也可以接收。

在這個(gè)環(huán)節(jié)，我決定設(shè)計(jì)一個(gè)動(dòng)效。當(dāng)用戶(hù)點(diǎn)擊Yep！按鈕之后，按鈕會(huì)從底部向上，這一動(dòng)作就非常簡(jiǎn)單的闡釋了“發(fā)送”的含義。氣泡運(yùn)動(dòng)到屏幕中間，并且告知用戶(hù)請(qǐng)求已經(jīng)發(fā)出，同時(shí)你可以點(diǎn)擊這個(gè)位置，取消發(fā)送，非常簡(jiǎn)單。

收獲需求

當(dāng)你收到Y(jié)ep！需求之后，就可以看到類(lèi)似Facebook的聊天界面，右上方有頭像和提示，用戶(hù)可以點(diǎn)擊這個(gè)地方來(lái)瀏覽信息，也可以左右滑動(dòng)查看，符合習(xí)慣也迎合需求。

開(kāi)發(fā)和設(shè)計(jì)工作仍然在繼續(xù)，今年的夏季和秋季我們會(huì)持續(xù)改進(jìn)這一APP，會(huì)發(fā)布Andorid的版本，我們會(huì)在設(shè)計(jì)和用戶(hù)體驗(yàn)上繼續(xù)提升改進(jìn)。如果你也喜歡動(dòng)效，不妨來(lái)看看。

APP是如何鳳凰涅磐的？下面的文章不容錯(cuò)過(guò)！

同樣是LBS，F(xiàn)ourSquare是這樣重設(shè)計(jì)的：
《涅磐重生！我們是如何重新設(shè)計(jì)FOURSQUARE的》

工具型APP Todoist的設(shè)計(jì)之道：
《UI設(shè)計(jì)實(shí)戰(zhàn)！知名時(shí)間管理軟件TODOIST的改版歷程》

從圖標(biāo)開(kāi)始重生，Spotify的重生之路：
《小圖標(biāo)大學(xué)問(wèn)！我是如何設(shè)計(jì)著名音樂(lè)軟件SPOTIFY里的圖標(biāo)》

原文地址：medium
優(yōu)設(shè)網(wǎng)翻譯：@陳子木
【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量78萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：