@C7210: 這周的話題關(guān)于動效；我是個，怎么說，對動效的使用較為謹(jǐn)慎的，人。越是炫酷當(dāng)?shù)赖哪甏绞沁@樣；因為在我個人看來網(wǎng)上到處能看到的那些“動效典范”多數(shù)其實都很暈...一些主打這些元素的應(yīng)用真的拿到手里用起來就覺得視線無法聚焦，缺少讓人覺得安全穩(wěn)定的落腳點(diǎn)。當(dāng)然有好的一面，譬如有趣帶勁的印象、科技感等等，但我仍覺得得不償失。關(guān)鍵問題還是在于動效的使用動機(jī)是怎樣的，是否真正有意義，無論理性還是感性上的意義。本文內(nèi)容就是圍繞這樣的觀點(diǎn)，通過真實案例來講述的。正文了。
一年前，我開始與Yep!的創(chuàng)始人Roman及Alexander進(jìn)行合作。這是一款社交方面的應(yīng)用，旨在改變?nèi)藗兊摹跋嘤觥狈绞?，通過簡單的服務(wù)幫助用戶與那些想做相同事情的陌生人碰頭并一起做事。
舉個例子，比如你想找個有意思的人一起喝咖啡。通過Yep!，你可以找到附近那些在接下來一小時內(nèi)有相同愿望的用戶。選擇其中任何一位，和TA確認(rèn)細(xì)節(jié)，然后一起去喝咖啡。
自從iOS推出之后，我就被“有意義”的動效震撼到了。動效可以在用戶認(rèn)知當(dāng)中構(gòu)成一種漂亮的、非“計算機(jī)化”的溝通范式；如果得以正確的運(yùn)用，便可以代替通常需要大段文字才能闡述的含義。最簡單而經(jīng)典的例子就是內(nèi)容飛入垃圾桶的動效，無需多做解釋，用戶完全理解其中的含義。如今，過度擬物化的設(shè)計趨勢正在退去，但具有溝通意義的動效卻得以保留，只是在展示形式上未必要與現(xiàn)實當(dāng)中的物體產(chǎn)生過強(qiáng)的關(guān)聯(lián)性了。
Yep!項目中，在創(chuàng)建了一系列的線框稿與原型之后，我們得出結(jié)論，Yep!在視覺風(fēng)格上應(yīng)該相當(dāng)干凈，同時通過豐富且有意義的動效使產(chǎn)品功能及交互機(jī)制得到直觀的解釋，因為這些機(jī)制并非你能在目前市面上多數(shù)社交類應(yīng)用當(dāng)中能夠看到的，我們希望用戶能產(chǎn)生更好的理解。此外良好的動效也可以為應(yīng)用帶來生機(jī)和情感，這對于Yep!這款休閑社交類的產(chǎn)品來說非常重要。
當(dāng)然，從開發(fā)的角度來說，定制化的動效意味著很多額外的工作量，不過我們最終還是在MVP階段就加入了這些動效，因為我們認(rèn)為這對于Yep!這款產(chǎn)品來說非常重要。
Yep!的主用例當(dāng)中包含下面這樣的搜索流程：選擇一種活動(想要做的事) - 發(fā)送邀請 - 等待搜索結(jié)果(想做相同事情的其他用戶) - 查看搜索結(jié)果或無結(jié)果提示。其中每一個環(huán)節(jié)都是相互獨(dú)立的，而我們的目標(biāo)，就是通過動效使轉(zhuǎn)場過程看上去像是同一個界面在進(jìn)行流暢的“變形”，另外還必須確保用戶理解當(dāng)前的轉(zhuǎn)換具有怎樣的含義。
接下來一起看看我們在上述每個環(huán)節(jié)當(dāng)中所使用的方式吧。
主界面當(dāng)中供用戶選擇的各類活動是以彩色圓形圖標(biāo)的形式展示在界面上的，每個類型的活動都使用其各自的主題色。不同類型活動的子界面中，交互元素所用到的關(guān)鍵色都與該類型活動的顏色保持一致。
主界面加載進(jìn)來之后，七個活動分類圖標(biāo)沿著順時針方向依次呈現(xiàn)，其中“體育(Sport)”和“事項(Events)”這兩個類別當(dāng)中有各自的子項目。子項目也使用了相同的呈現(xiàn)方式。這里用到的視覺樣式及動效感覺很“糖果”，我們希望通過這種方式讓用戶覺得應(yīng)用是有生機(jī)的；把情感化元素帶到細(xì)節(jié)中，這很重要。
下圖展示的是主界面活動大類及體育子類的展示方式。
從這一步開始，我們就需要將轉(zhuǎn)場動效打造的“像是同一個界面在進(jìn)行流暢的變形”，使流程更平滑，更具自解釋性。
下面圖中所演示的轉(zhuǎn)場效果共包含以下幾個環(huán)節(jié)：
在上面的圖中，我們可以看到，用戶選擇了“就餐”，其他選項收縮淡出，“就餐”圖標(biāo)移位并變成地圖上的一個圖釘?！熬筒汀眻D標(biāo)的變化過程可以將前后兩個界面無縫的銜接起來，闡明了基于地理位置的篩選機(jī)制，表達(dá)出“在這個位置就餐”的明確概念。
在地圖界面中點(diǎn)擊“OK”按鈕，界面元素淡出，地圖整體向后退去，融入到雷達(dá)一樣的動效當(dāng)中；圓形掃描區(qū)域所代表的就是以用戶當(dāng)前位置為中心的50公里半徑范圍。
這一系列轉(zhuǎn)場動效可以使用戶覺得自己正在一個連貫的流程當(dāng)中行進(jìn)，沒有突兀的東西阻攔在其中。
過去的某些版本中，我們在即將發(fā)布意向的界面(選擇活動類型之后的界面)當(dāng)中使用了不同的設(shè)計，例如將你的照片、名字和其他信息展示出來，讓你知道其他人收到的信息就是長這個樣子的，差不多就是一種“所見即所得”的設(shè)計思路，讓用戶在張貼意向前知情。
不過這個設(shè)計方案在實際當(dāng)中并不理想。通過Mixpanel給到的數(shù)據(jù)，我們發(fā)現(xiàn)用戶會被這里的頭像照片、姓名等個人資料信息牽扯太多注意力。我們在這里失去了太多的用戶。
于是我們決定干掉所有與“張貼意向”這件事不相干的東西，也就是任何一個在這個環(huán)節(jié)中與用戶目標(biāo)不相干的干擾性因素。
這里最重要的事情就是確認(rèn)活動類型和地點(diǎn)，如果你需要，那么可以補(bǔ)充場所信息和其他描述。新的方案是行之有效的，這里的通過率從67%上升到了83%，更多的用戶會發(fā)布活動意向了。
匹配結(jié)果界面底部都有一個“Yep!”按鈕。點(diǎn)擊這個按鈕意味著向?qū)Ψ桨l(fā)送見面邀請。如果對方接受了邀請，那么雙方就可以直接聊天了。所以用戶既可以發(fā)送邀請也會收到邀請。
發(fā)送邀請時，我想實現(xiàn)一種動效，就是在點(diǎn)擊“Yep!”按鈕之后，一個巨大的“Yep!”氣泡從界面底部彈出并停留在界面中央；此時點(diǎn)擊氣泡，表示確認(rèn)發(fā)送，然后氣泡會消失于界面頂部，邀請發(fā)送完畢。這樣具有明確方向性的動效可以表達(dá)出一種“發(fā)送出去”的概念。
接收邀請(收到“Yep!”)的提醒動效和你在Facebook當(dāng)中收到聊天消息的樣子差不多，也就是在右上角彈出帶有消息氣泡的發(fā)送者頭像。此時你既可以點(diǎn)擊這個提示來查看邀請信息，也可以繼續(xù)橫向滑動消息列表來直接查看。
這個夏天，我們的改進(jìn)工作仍要繼續(xù)，安卓版本也會推出；接下來有機(jī)會我還會與大家分享更多關(guān)于Yep!的設(shè)計故事。
英文原文鏈接：https://medium.com/
譯文代表原作者觀點(diǎn)。歡迎發(fā)表評論，或到譯者微博進(jìn)一步交流探討。
最近忙瘋了。。。熬完這些日子，我會回來的～
66
作品
1120
粉絲
14
關(guān)注
分享能獲取更多贊？
大牛，別默默的看了，快登錄幫我點(diǎn)評一下吧！:)
登錄 立即注冊