2024-7-9 資深UI設計者
今天就與大家探討一些，在一款音樂應用中的交互動效，在設計落地中的思考與革新。
前言
這半年中從一名UI設計師轉型UX設計師，打破了一些固有的邊界，開拓了對業務的了解角度，我想這也許就是行業中設計師的發展形態。由于跟蹤的流程加長，對于輸出的想法也更加細密，哪怕是很小的一些點，也能以小見大，得到收獲。
以前作為一名UI設計師對于業務的話語權很輕，在整個業務流程中的作用甚至多半時候是一個“緩沖帶”的角色，現在作為一名UX設計師會更接近業務，同產品討論，同研發探討。
我們設計輸出還是要服務用戶，不是一味的追求標新立異，當然美是最基礎的準則，應該從底層思考，讓自己的設計更加立住腳跟。
以前在做動效設計邏輯會用很多“干擾因素”，致使落地的方向以及還原度都有較大的偏差，現在從立項，到設計輸出，以及最后的落地環節都可以緊密參與，這樣不僅能出于對業務目的更深度的了解，同時在與上下游的設計溝通中，輸出會更具信服力，理解研發的呈現邏輯，更加主動的輸出優質的設計。
本文所有設計樣式源于一款名為resso的音樂應用，想體驗的同學可以科學上網下載體驗，不過不下載也沒關系，這里分享的知識都是相通的。隨著這款應用日活突破千萬，里面的交互動效就會思考和深究的更多。那么今天就與大家探討一些，在一款音樂應用中的交互動效，在設計落地中的思考與革新。
知其所以然
設計師是屬于創造性的職業，整個職業生涯會分為三個階段：第一是技術層面，第二是藝術層面，第三是心術。一切好的產品都是具有人性的，我們不去拿一些飛機稿去研究它的炫酷性，而是由淺層常規的交互動效，去探索這其中的奧秘，知其然知其所以然，這才是對于知識真誠的態度。
業務中思考
對于界面中的交互動效大家已經接觸很多，對于制作，很多設計師也有了一些基礎的了解，我們能看到的也有很多關于聊動效的文章和作品，但是在實際的工作中，這些知識如何能有效應用，在推進落地中，如何與研發溝通，以及在落地遇到困難時，又是怎樣出解決方案，作為一名動效設計師都是不可避免的需要去深究。
頁面橫滑回退——用戶角度思考
大家對于一些應用的右滑回退操作已習以為常，但是究其深度可并沒有表面上那么簡單。
做這樣一個功能的目的也很簡單，智能應用下，用戶對簡潔的操作愈加渴望，說白了，就是怎么操作方便怎么來。
首先做這樣一個功能，在一個界面中，用戶的觸發區域怎么定義，以我們常用的應用為例，微信、支付寶采用的是邊緣可觸發，圖例001A位置區域，抖音、百度則采用的是頁面任意區域觸發，圖例001B位置區域。
為什么會有兩種觸發機制？如果頁面中帶有多重操作入口，邊緣可觸發精準了用戶的操作。任意區域觸發便捷了操作，讓用戶操作更加自由。這兩種沒有絕對的好與壞，針對產品的屬性定位而去對應配置。
第二點就是在實際的開發中，觀察到安卓和iOS的區別，我們不妨拿出身邊的手機打開任意一個應用去觀察。在橫滑回退操作中，上一層級頁面與下級層級頁面的關系。
如圖例002中，當B頁面回退的同時A頁面是出于靜態的還是在同步移動的。其實我們可以去定義，iOS系統中是默認的錯層位移效果，然而安卓默認是不會移動的，就需要單獨增加，成本就會影響上線周期，所以對于這樣的雙端不一致，我們是可以理解與容納的，這也就呈現出上線后，雙端差異的原因。
如圖例002中，當B頁面回退的同時A頁面是出于靜態的還是在同步移動的。其實我們可以去定義，iOS系統中是默認的錯層位移效果，然而安卓默認是不會移動的，就需要單獨增加，成本就會影響上線周期，所以對于這樣的雙端不一致，我們是可以理解與容納的，這也就呈現出上線后，雙端差異的原因。
應用全局搜索——多端實現差異
現在市場上成熟的應用基本都會有一套自己的搜索組件系統，為了方便用戶在應用能快速精準的查找結果。但是搜索的組成并不是一個簡單的搜索框這么簡單，當點擊搜索后，交互動效是如何指引用戶的，這里牽扯到搜索頁面中相關搜索模塊，以及調用系統鍵盤。
這里的交互動效設計中，為了讓用戶能夠注意到相關搜索模塊的內容，我們做了一個與鍵盤同時升起的效果。
但是安卓和iOS對喚起鍵盤的可控程度不一，因為安卓的鍵盤升起和降落的速度時間不可控，所以針對這種情況的處理，在安卓上去掉內容部分跟隨鍵盤升起降落的動畫，保留iOS的內容隨鍵盤降落的動畫。
無論是安卓還是iOS，系統自帶的應用都能很好的處理此類的問題，有一些應用安卓上為了減少內容入場與鍵盤升起的錯落感，采用的是橫滑的樣式入場。
在初始設計中我們忽略了安卓鍵盤喚起的問題，所以在設計落地中無法有效的推進，最后我們去除了搜索內容跟隨鍵盤的動作，讓用戶的注意力集中在頭部搜索輸入和鍵盤上，同時由于搜索內容的動效去除，也解決了低端機上無法滿足搜索內容在行使動效中有效描繪的問題。
用戶評論外顯——綜合比較最優選
隨著應用的用戶量上升，每一款應用都會在社交社區模塊發力，為了讓用戶在這里能夠找到更多志同道合的人，所謂的擁有歸屬感，這也是對于用戶增量以及用戶留存的手段。
最初的交互動效設計為了讓此部分更能引起用戶的關注，放大了此板塊的狀態轉換，評論詞條的更替樣式采用了向上輪換的效果，并且將詞條移動的同時進行了縮放，圖例中004，行成一種空間滾動的感覺。
當然這種效果如果在一個靜止的頁面中出現，無疑是非常吸引用戶的，然而忽略掉了一點在這樣的一個頁面中，處于動態展示的并不止這一處，圖例中005A處與B處，這樣的展示，會對頁面中其他的動態展示造成了一定的影響，所以，為了有所取舍，分出主次，這個模塊進行了降級效果處理，讓評論此條原位置漸隱漸顯已經完全滿足需求，這也正是不是為了動效而動，而是適宜有效的進行展示。
也正是出于同樣的邏輯下，圖例中005B處也是可以容納另外一個功能的區域，為了達到這樣的目的，又重新梳理了交互動效的互斥邏輯以及替換邏輯，避免在同一位置下兩種功能展示的互斥。
博客關注——極致的思考
博客關注這里的交互場景相對來說是比較小的，為了滿足不同場景下用戶對博客的關注，我們還是盡其所細，考慮多種角度。輔助用戶理解信息，幫助引導用戶完成必要的操作，更好的表達操作結果。
博客關注這里的交互場景相對來說是比較小的，為了滿足不同場景下用戶對博客的關注，我們還是盡其所細，考慮多種角度。將關注的可能性放到最大化，并強調關注的關聯性。
起初的設計是在關注后，從一側出現小封面再掉入到podcast icon中，但是關聯性并沒有達到預期的效果。
于是設計了第二種，直接將封面進行位移縮放，似乎好了一些，但是這個路徑非常不自然，直來直去的。而且當封面上滑的時候，由于頭部遮擋了一部分封面，這也導致此部分的交互動效無法運行。
在此基礎上又進行了一次優化，仔細剖析了一下，將整個過程進行了拆解，首先為了封面完全露出時行動的路徑更加清晰，做了一個響應設計，當界面向上滑動，封面進行縮小，縮小到一定的比例，進行吸頂效果。同時優化了行動路徑行程一個拋物線的效果。
大家可能比較好奇此類的拋物線如何與研發進行溝通，其實這里就涉及到我們中學的數學知識，需要運用到四個錨點進行計算，四個錨點分別是：起始點、落點，兩個操作桿的端點。同時這是一個變化的過程，給到初始封面時的曲線參數，最終縮放后的曲線參數，研發同學就可以計算出整個過程中的曲線。（圖例非真實數據，此處只作為展示示意）
minibar——有效推進落地
minibar是音樂應用中比較常用的功能模塊了，方便用戶在不同場景下快速喚起播放器，minibar與播放器之間建立關聯性是非常有必要性的。經過調研，我們對市場上已有的音樂應用進行了分析，得出的結論minibar與播放器建立強關聯性的比弱關聯性的要易用很多。
封面作為關聯的重要因素，無疑是設計中最主要處理的模塊。
交互動效不僅考慮用戶的使用場景、功能性，還需要考慮整體流程的持續時長、曲線的運用，從而達到合理的呈現效果。
由于特殊的頁面結構，為了達到整個頁面縮放的目的，安卓必須在最上層加一個遮罩層達到效果，這個問題在iOS上卻是一個比較容易解決的問題。
在最初的設計中希望封面收起后會有一個停頓的動作，在進行掉落，之所以這樣思考是為了讓動效看起來更有節奏，用戶可以看到專輯封面的變化。
同時整個流程的運動路徑也是直來直去的。
也正是出于這樣的最初設計，點播的效果也采用了其中的一部分動作進行落地。
但是這個方案還是被推翻了，首先來說，用戶之所以進行收起這個動作，是希望體驗流暢，便捷，而且目的也很明確，這樣的動作無疑是冗余，且對用戶的干擾起到了較大的影響。
于是在此基礎上進行了優化動作，讓封面收起再掉落的動作簡化為直接收起，同時運動路徑也優化為自然的曲線，前面我們已經提到運動路徑為曲線是如何落地，繼續延續這種思路進行落實。
安卓的遮罩層無法像iOS這樣完美的處理，所以只優化了運動步驟和運動曲線，由于整個流程時間非常有限，所以造成的差異也在可控范圍內。
基于這樣的改動，點播的動作也相應的簡化了很多。
聽歌識曲——多角度提前思考
聽歌識曲是作為一款音樂應用中比較有特色的功能，增加探索發現音樂的場景，這種場景強調沉浸式體驗，所以在頁面布局和呈現上更加注重細節的處理。
整個動效都是向內收的樣式，包括中心icon，呈現出的都是收音的效果。暫停狀態圓形周圍的線條形成呼吸感的效果，類似水紋漣漪，形成躍躍欲試的感覺。
在識別和暫停的轉換過程中，采用圓形遮罩進行轉場，能夠達到元素的關聯。
同時我們也考慮到識別結果的出現與前面識別動效結合的轉場效果，始終傳達著一種自然柔和的感覺。
在界面中大面積的漸變色轉換的過程中，兩個相鄰的顏色過渡是可以做到自然轉換的，漸變的顏色如何做到自然。圖例中第一個漸變到第二個，四個錨點顏色，若A與C是相鄰色轉換可以達到自然的效果，但是A與D是相鄰色，或者A與C非相鄰色，那么這樣的顏色過渡就會不自然，而且在一些機型上還會出現割裂條紋的紋理。
為了解決這種問題，將一個漸變色理解為一個圖層，將一個圖層疊加到另一個圖層上，再進行透明度的變化，就可以決絕這樣類似的問題了。
結語
交互動效設計是產品設計與用戶認知反復磨合，長期積累、沉淀而來。整理總結這些知識資產可以幫助我們在未來工作中不盲目的使用動效和互動。使“動效設計模式”能成為指導提升產品用戶體驗，穩定輸出模式化、規范化動效及互動方式的白皮書。以上我們分析了很多場景的交互動效，設計中的細節思考，如何有效的落地，一款應用中的交互動效是其必不可少的組成部分。相信和大家聊了這么多，會對交互動效有了很多不同角度的認識，也能有效的將這些化為自己的知識應用于實際的工作中。
聲明：文章涉及頁面和頁面呈現內容與實際上線有偏差，均以上線樣式為準。頁面版權歸屬公司，這里只做學習交流使用，不得將頁面內容用于其他用途。本文章未經允許不得隨意轉載至其他平臺。
藍藍設計(m.ssll180.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。
關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司、銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發