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