今天就與大家探討一些，在一款音樂應(yīng)用中的交互動(dòng)效，在設(shè)計(jì)落地中的思考與革新。

 

 

前言

這半年中從一名UI設(shè)計(jì)師轉(zhuǎn)型UX設(shè)計(jì)師，打破了一些固有的邊界，開拓了對(duì)業(yè)務(wù)的了解角度，我想這也許就是行業(yè)中設(shè)計(jì)師的發(fā)展形態(tài)。由于跟蹤的流程加長(zhǎng)，對(duì)于輸出的想法也更加細(xì)密，哪怕是很小的一些點(diǎn)，也能以小見大，得到收獲。

 

以前作為一名UI設(shè)計(jì)師對(duì)于業(yè)務(wù)的話語權(quán)很輕，在整個(gè)業(yè)務(wù)流程中的作用甚至多半時(shí)候是一個(gè)“緩沖帶”的角色，現(xiàn)在作為一名UX設(shè)計(jì)師會(huì)更接近業(yè)務(wù)，同產(chǎn)品討論，同研發(fā)探討。

我們?cè)O(shè)計(jì)輸出還是要服務(wù)用戶，不是一味的追求標(biāo)新立異，當(dāng)然美是最基礎(chǔ)的準(zhǔn)則，應(yīng)該從底層思考，讓自己的設(shè)計(jì)更加立住腳跟。

 

以前在做動(dòng)效設(shè)計(jì)邏輯會(huì)用很多“干擾因素”，致使落地的方向以及還原度都有較大的偏差，現(xiàn)在從立項(xiàng)，到設(shè)計(jì)輸出，以及最后的落地環(huán)節(jié)都可以緊密參與，這樣不僅能出于對(duì)業(yè)務(wù)目的更深度的了解，同時(shí)在與上下游的設(shè)計(jì)溝通中，輸出會(huì)更具信服力，理解研發(fā)的呈現(xiàn)邏輯，更加主動(dòng)的輸出優(yōu)質(zhì)的設(shè)計(jì)。

 

本文所有設(shè)計(jì)樣式源于一款名為resso的音樂應(yīng)用，想體驗(yàn)的同學(xué)可以科學(xué)上網(wǎng)下載體驗(yàn)，不過不下載也沒關(guān)系，這里分享的知識(shí)都是相通的。隨著這款應(yīng)用日活突破千萬，里面的交互動(dòng)效就會(huì)思考和深究的更多。那么今天就與大家探討一些，在一款音樂應(yīng)用中的交互動(dòng)效，在設(shè)計(jì)落地中的思考與革新。

 

知其所以然

設(shè)計(jì)師是屬于創(chuàng)造性的職業(yè)，整個(gè)職業(yè)生涯會(huì)分為三個(gè)階段：第一是技術(shù)層面，第二是藝術(shù)層面，第三是心術(shù)。一切好的產(chǎn)品都是具有人性的，我們不去拿一些飛機(jī)稿去研究它的炫酷性，而是由淺層常規(guī)的交互動(dòng)效，去探索這其中的奧秘，知其然知其所以然，這才是對(duì)于知識(shí)真誠(chéng)的態(tài)度。

 

業(yè)務(wù)中思考

對(duì)于界面中的交互動(dòng)效大家已經(jīng)接觸很多，對(duì)于制作，很多設(shè)計(jì)師也有了一些基礎(chǔ)的了解，我們能看到的也有很多關(guān)于聊動(dòng)效的文章和作品，但是在實(shí)際的工作中，這些知識(shí)如何能有效應(yīng)用，在推進(jìn)落地中，如何與研發(fā)溝通，以及在落地遇到困難時(shí)，又是怎樣出解決方案，作為一名動(dòng)效設(shè)計(jì)師都是不可避免的需要去深究。

 

 

頁面橫滑回退——用戶角度思考

大家對(duì)于一些應(yīng)用的右滑回退操作已習(xí)以為常，但是究其深度可并沒有表面上那么簡(jiǎn)單。

做這樣一個(gè)功能的目的也很簡(jiǎn)單，智能應(yīng)用下，用戶對(duì)簡(jiǎn)潔的操作愈加渴望，說白了，就是怎么操作方便怎么來。

 

 

首先做這樣一個(gè)功能，在一個(gè)界面中，用戶的觸發(fā)區(qū)域怎么定義，以我們常用的應(yīng)用為例，微信、支付寶采用的是邊緣可觸發(fā)，圖例001A位置區(qū)域，抖音、百度則采用的是頁面任意區(qū)域觸發(fā)，圖例001B位置區(qū)域。

 

為什么會(huì)有兩種觸發(fā)機(jī)制？如果頁面中帶有多重操作入口，邊緣可觸發(fā)精準(zhǔn)了用戶的操作。任意區(qū)域觸發(fā)便捷了操作，讓用戶操作更加自由。這兩種沒有絕對(duì)的好與壞，針對(duì)產(chǎn)品的屬性定位而去對(duì)應(yīng)配置。

 

 

第二點(diǎn)就是在實(shí)際的開發(fā)中，觀察到安卓和iOS的區(qū)別，我們不妨拿出身邊的手機(jī)打開任意一個(gè)應(yīng)用去觀察。在橫滑回退操作中，上一層級(jí)頁面與下級(jí)層級(jí)頁面的關(guān)系。

 

 

如圖例002中，當(dāng)B頁面回退的同時(shí)A頁面是出于靜態(tài)的還是在同步移動(dòng)的。其實(shí)我們可以去定義，iOS系統(tǒng)中是默認(rèn)的錯(cuò)層位移效果，然而安卓默認(rèn)是不會(huì)移動(dòng)的，就需要單獨(dú)增加，成本就會(huì)影響上線周期，所以對(duì)于這樣的雙端不一致，我們是可以理解與容納的，這也就呈現(xiàn)出上線后，雙端差異的原因。

 

 

如圖例002中，當(dāng)B頁面回退的同時(shí)A頁面是出于靜態(tài)的還是在同步移動(dòng)的。其實(shí)我們可以去定義，iOS系統(tǒng)中是默認(rèn)的錯(cuò)層位移效果，然而安卓默認(rèn)是不會(huì)移動(dòng)的，就需要單獨(dú)增加，成本就會(huì)影響上線周期，所以對(duì)于這樣的雙端不一致，我們是可以理解與容納的，這也就呈現(xiàn)出上線后，雙端差異的原因。

 

 

應(yīng)用全局搜索——多端實(shí)現(xiàn)差異

現(xiàn)在市場(chǎng)上成熟的應(yīng)用基本都會(huì)有一套自己的搜索組件系統(tǒng)，為了方便用戶在應(yīng)用能快速精準(zhǔn)的查找結(jié)果。但是搜索的組成并不是一個(gè)簡(jiǎn)單的搜索框這么簡(jiǎn)單，當(dāng)點(diǎn)擊搜索后，交互動(dòng)效是如何指引用戶的，這里牽扯到搜索頁面中相關(guān)搜索模塊，以及調(diào)用系統(tǒng)鍵盤。

 

 

這里的交互動(dòng)效設(shè)計(jì)中，為了讓用戶能夠注意到相關(guān)搜索模塊的內(nèi)容，我們做了一個(gè)與鍵盤同時(shí)升起的效果。

 

但是安卓和iOS對(duì)喚起鍵盤的可控程度不一，因?yàn)榘沧康逆I盤升起和降落的速度時(shí)間不可控，所以針對(duì)這種情況的處理，在安卓上去掉內(nèi)容部分跟隨鍵盤升起降落的動(dòng)畫，保留iOS的內(nèi)容隨鍵盤降落的動(dòng)畫。

 

 

無論是安卓還是iOS，系統(tǒng)自帶的應(yīng)用都能很好的處理此類的問題，有一些應(yīng)用安卓上為了減少內(nèi)容入場(chǎng)與鍵盤升起的錯(cuò)落感，采用的是橫滑的樣式入場(chǎng)。

 

 

在初始設(shè)計(jì)中我們忽略了安卓鍵盤喚起的問題，所以在設(shè)計(jì)落地中無法有效的推進(jìn)，最后我們?nèi)コ怂阉鲀?nèi)容跟隨鍵盤的動(dòng)作，讓用戶的注意力集中在頭部搜索輸入和鍵盤上，同時(shí)由于搜索內(nèi)容的動(dòng)效去除，也解決了低端機(jī)上無法滿足搜索內(nèi)容在行使動(dòng)效中有效描繪的問題。

 

 

用戶評(píng)論外顯——綜合比較最優(yōu)選

隨著應(yīng)用的用戶量上升，每一款應(yīng)用都會(huì)在社交社區(qū)模塊發(fā)力，為了讓用戶在這里能夠找到更多志同道合的人，所謂的擁有歸屬感，這也是對(duì)于用戶增量以及用戶留存的手段。

 

最初的交互動(dòng)效設(shè)計(jì)為了讓此部分更能引起用戶的關(guān)注，放大了此板塊的狀態(tài)轉(zhuǎn)換，評(píng)論詞條的更替樣式采用了向上輪換的效果，并且將詞條移動(dòng)的同時(shí)進(jìn)行了縮放，圖例中004，行成一種空間滾動(dòng)的感覺。

 

 

 

 

當(dāng)然這種效果如果在一個(gè)靜止的頁面中出現(xiàn)，無疑是非常吸引用戶的，然而忽略掉了一點(diǎn)在這樣的一個(gè)頁面中，處于動(dòng)態(tài)展示的并不止這一處，圖例中005A處與B處，這樣的展示，會(huì)對(duì)頁面中其他的動(dòng)態(tài)展示造成了一定的影響，所以，為了有所取舍，分出主次，這個(gè)模塊進(jìn)行了降級(jí)效果處理，讓評(píng)論此條原位置漸隱漸顯已經(jīng)完全滿足需求，這也正是不是為了動(dòng)效而動(dòng)，而是適宜有效的進(jìn)行展示。

 

 

 

 

也正是出于同樣的邏輯下，圖例中005B處也是可以容納另外一個(gè)功能的區(qū)域，為了達(dá)到這樣的目的，又重新梳理了交互動(dòng)效的互斥邏輯以及替換邏輯，避免在同一位置下兩種功能展示的互斥。

 

 

 

博客關(guān)注——極致的思考

博客關(guān)注這里的交互場(chǎng)景相對(duì)來說是比較小的，為了滿足不同場(chǎng)景下用戶對(duì)博客的關(guān)注，我們還是盡其所細(xì)，考慮多種角度。輔助用戶理解信息，幫助引導(dǎo)用戶完成必要的操作，更好的表達(dá)操作結(jié)果。

 

博客關(guān)注這里的交互場(chǎng)景相對(duì)來說是比較小的，為了滿足不同場(chǎng)景下用戶對(duì)博客的關(guān)注，我們還是盡其所細(xì)，考慮多種角度。將關(guān)注的可能性放到最大化，并強(qiáng)調(diào)關(guān)注的關(guān)聯(lián)性。

 

起初的設(shè)計(jì)是在關(guān)注后，從一側(cè)出現(xiàn)小封面再掉入到podcast icon中，但是關(guān)聯(lián)性并沒有達(dá)到預(yù)期的效果。

 

 

 

于是設(shè)計(jì)了第二種，直接將封面進(jìn)行位移縮放，似乎好了一些，但是這個(gè)路徑非常不自然，直來直去的。而且當(dāng)封面上滑的時(shí)候，由于頭部遮擋了一部分封面，這也導(dǎo)致此部分的交互動(dòng)效無法運(yùn)行。

 

 

在此基礎(chǔ)上又進(jìn)行了一次優(yōu)化，仔細(xì)剖析了一下，將整個(gè)過程進(jìn)行了拆解，首先為了封面完全露出時(shí)行動(dòng)的路徑更加清晰，做了一個(gè)響應(yīng)設(shè)計(jì)，當(dāng)界面向上滑動(dòng)，封面進(jìn)行縮小，縮小到一定的比例，進(jìn)行吸頂效果。同時(shí)優(yōu)化了行動(dòng)路徑行程一個(gè)拋物線的效果。

 

 

 

 

大家可能比較好奇此類的拋物線如何與研發(fā)進(jìn)行溝通，其實(shí)這里就涉及到我們中學(xué)的數(shù)學(xué)知識(shí)，需要運(yùn)用到四個(gè)錨點(diǎn)進(jìn)行計(jì)算，四個(gè)錨點(diǎn)分別是：起始點(diǎn)、落點(diǎn)，兩個(gè)操作桿的端點(diǎn)。同時(shí)這是一個(gè)變化的過程，給到初始封面時(shí)的曲線參數(shù)，最終縮放后的曲線參數(shù)，研發(fā)同學(xué)就可以計(jì)算出整個(gè)過程中的曲線。（圖例非真實(shí)數(shù)據(jù)，此處只作為展示示意）

 

 

minibar——有效推進(jìn)落地

minibar是音樂應(yīng)用中比較常用的功能模塊了，方便用戶在不同場(chǎng)景下快速喚起播放器，minibar與播放器之間建立關(guān)聯(lián)性是非常有必要性的。經(jīng)過調(diào)研，我們對(duì)市場(chǎng)上已有的音樂應(yīng)用進(jìn)行了分析，得出的結(jié)論minibar與播放器建立強(qiáng)關(guān)聯(lián)性的比弱關(guān)聯(lián)性的要易用很多。

 

封面作為關(guān)聯(lián)的重要因素，無疑是設(shè)計(jì)中最主要處理的模塊。

 

交互動(dòng)效不僅考慮用戶的使用場(chǎng)景、功能性，還需要考慮整體流程的持續(xù)時(shí)長(zhǎng)、曲線的運(yùn)用，從而達(dá)到合理的呈現(xiàn)效果。

 

由于特殊的頁面結(jié)構(gòu)，為了達(dá)到整個(gè)頁面縮放的目的，安卓必須在最上層加一個(gè)遮罩層達(dá)到效果，這個(gè)問題在iOS上卻是一個(gè)比較容易解決的問題。

 

在最初的設(shè)計(jì)中希望封面收起后會(huì)有一個(gè)停頓的動(dòng)作，在進(jìn)行掉落，之所以這樣思考是為了讓動(dòng)效看起來更有節(jié)奏，用戶可以看到專輯封面的變化。

 

同時(shí)整個(gè)流程的運(yùn)動(dòng)路徑也是直來直去的。

 

 

 

也正是出于這樣的最初設(shè)計(jì)，點(diǎn)播的效果也采用了其中的一部分動(dòng)作進(jìn)行落地。

 

 

但是這個(gè)方案還是被推翻了，首先來說，用戶之所以進(jìn)行收起這個(gè)動(dòng)作，是希望體驗(yàn)流暢，便捷，而且目的也很明確，這樣的動(dòng)作無疑是冗余，且對(duì)用戶的干擾起到了較大的影響。

 

于是在此基礎(chǔ)上進(jìn)行了優(yōu)化動(dòng)作，讓封面收起再掉落的動(dòng)作簡(jiǎn)化為直接收起，同時(shí)運(yùn)動(dòng)路徑也優(yōu)化為自然的曲線，前面我們已經(jīng)提到運(yùn)動(dòng)路徑為曲線是如何落地，繼續(xù)延續(xù)這種思路進(jìn)行落實(shí)。

 

 

安卓的遮罩層無法像iOS這樣完美的處理，所以只優(yōu)化了運(yùn)動(dòng)步驟和運(yùn)動(dòng)曲線，由于整個(gè)流程時(shí)間非常有限，所以造成的差異也在可控范圍內(nèi)。

 

基于這樣的改動(dòng)，點(diǎn)播的動(dòng)作也相應(yīng)的簡(jiǎn)化了很多。

 

 

 

聽歌識(shí)曲——多角度提前思考

聽歌識(shí)曲是作為一款音樂應(yīng)用中比較有特色的功能，增加探索發(fā)現(xiàn)音樂的場(chǎng)景，這種場(chǎng)景強(qiáng)調(diào)沉浸式體驗(yàn)，所以在頁面布局和呈現(xiàn)上更加注重細(xì)節(jié)的處理。

 

整個(gè)動(dòng)效都是向內(nèi)收的樣式，包括中心icon，呈現(xiàn)出的都是收音的效果。暫停狀態(tài)圓形周圍的線條形成呼吸感的效果，類似水紋漣漪，形成躍躍欲試的感覺。

 

 

在識(shí)別和暫停的轉(zhuǎn)換過程中，采用圓形遮罩進(jìn)行轉(zhuǎn)場(chǎng)，能夠達(dá)到元素的關(guān)聯(lián)。

 

 

同時(shí)我們也考慮到識(shí)別結(jié)果的出現(xiàn)與前面識(shí)別動(dòng)效結(jié)合的轉(zhuǎn)場(chǎng)效果，始終傳達(dá)著一種自然柔和的感覺。

 

 

在界面中大面積的漸變色轉(zhuǎn)換的過程中，兩個(gè)相鄰的顏色過渡是可以做到自然轉(zhuǎn)換的，漸變的顏色如何做到自然。圖例中第一個(gè)漸變到第二個(gè)，四個(gè)錨點(diǎn)顏色，若A與C是相鄰色轉(zhuǎn)換可以達(dá)到自然的效果，但是A與D是相鄰色，或者A與C非相鄰色，那么這樣的顏色過渡就會(huì)不自然，而且在一些機(jī)型上還會(huì)出現(xiàn)割裂條紋的紋理。

 

 

 

為了解決這種問題，將一個(gè)漸變色理解為一個(gè)圖層，將一個(gè)圖層疊加到另一個(gè)圖層上，再進(jìn)行透明度的變化，就可以決絕這樣類似的問題了。

 

 

結(jié)語

交互動(dòng)效設(shè)計(jì)是產(chǎn)品設(shè)計(jì)與用戶認(rèn)知反復(fù)磨合，長(zhǎng)期積累、沉淀而來。整理總結(jié)這些知識(shí)資產(chǎn)可以幫助我們?cè)谖磥砉ぷ髦胁幻つ康氖褂脛?dòng)效和互動(dòng)。使“動(dòng)效設(shè)計(jì)模式”能成為指導(dǎo)提升產(chǎn)品用戶體驗(yàn)，穩(wěn)定輸出模式化、規(guī)范化動(dòng)效及互動(dòng)方式的白皮書。以上我們分析了很多場(chǎng)景的交互動(dòng)效，設(shè)計(jì)中的細(xì)節(jié)思考，如何有效的落地，一款應(yīng)用中的交互動(dòng)效是其必不可少的組成部分。相信和大家聊了這么多，會(huì)對(duì)交互動(dòng)效有了很多不同角度的認(rèn)識(shí)，也能有效的將這些化為自己的知識(shí)應(yīng)用于實(shí)際的工作中。

 

聲明：文章涉及頁面和頁面呈現(xiàn)內(nèi)容與實(shí)際上線有偏差，均以上線樣式為準(zhǔn)。頁面版權(quán)歸屬公司，這里只做學(xué)習(xí)交流使用，不得將頁面內(nèi)容用于其他用途。本文章未經(jīng)允許不得隨意轉(zhuǎn)載至其他平臺(tái)。

 

作者：古月設(shè)計(jì)
鏈接：https://www.zcool.com.cn/article/ZMTMwNTY2NA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。