業(yè)務中的動效思考與落地

2024-7-9    資深UI設計者

 

 

今天就與大家探討一些,在一款音樂應用中的交互動效,在設計落地中的思考與革新。

 

 

前言

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

 

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

我們設計輸出還是要服務用戶,不是一味的追求標新立異,當然美是最基礎的準則,應該從底層思考,讓自己的設計更加立住腳跟。

 

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

 

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

 

知其所以然

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

 

業(yè)務中思考

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

 

 

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

大家對于一些應用的右滑回退操作已習以為常,但是究其深度可并沒有表面上那么簡單。

做這樣一個功能的目的也很簡單,智能應用下,用戶對簡潔的操作愈加渴望,說白了,就是怎么操作方便怎么來。

 

 

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

 

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

 

 

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

 

 

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

 

 

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

 

 

應用全局搜索——多端實現(xiàn)差異

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

 

 

這里的交互動效設計中,為了讓用戶能夠注意到相關搜索模塊的內(nèi)容,我們做了一個與鍵盤同時升起的效果。

 

但是安卓和iOS對喚起鍵盤的可控程度不一,因為安卓的鍵盤升起和降落的速度時間不可控,所以針對這種情況的處理,在安卓上去掉內(nèi)容部分跟隨鍵盤升起降落的動畫,保留iOS的內(nèi)容隨鍵盤降落的動畫。

 

 

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

 

 

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

 

 

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

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

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

博客關注——極致的思考

博客關注這里的交互場景相對來說是比較小的,為了滿足不同場景下用戶對博客的關注,我們還是盡其所細,考慮多種角度。輔助用戶理解信息,幫助引導用戶完成必要的操作,更好的表達操作結果。

 

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

 

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

 

 

 

于是設計了第二種,直接將封面進行位移縮放,似乎好了一些,但是這個路徑非常不自然,直來直去的。而且當封面上滑的時候,由于頭部遮擋了一部分封面,這也導致此部分的交互動效無法運行。

 

 

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

 

 

 

 

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

 

 

minibar——有效推進落地

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

 

封面作為關聯(lián)的重要因素,無疑是設計中最主要處理的模塊。

 

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

 

由于特殊的頁面結構,為了達到整個頁面縮放的目的,安卓必須在最上層加一個遮罩層達到效果,這個問題在iOS上卻是一個比較容易解決的問題。

 

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

 

同時整個流程的運動路徑也是直來直去的。

 

 

 

也正是出于這樣的最初設計,點播的效果也采用了其中的一部分動作進行落地。

 

 

但是這個方案還是被推翻了,首先來說,用戶之所以進行收起這個動作,是希望體驗流暢,便捷,而且目的也很明確,這樣的動作無疑是冗余,且對用戶的干擾起到了較大的影響。

 

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

 

 

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

 

基于這樣的改動,點播的動作也相應的簡化了很多。

 

 

 

聽歌識曲——多角度提前思考

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

 

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

 

 

在識別和暫停的轉(zhuǎn)換過程中,采用圓形遮罩進行轉(zhuǎn)場,能夠達到元素的關聯(lián)。

 

 

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

 

 

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

 

 

 

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

 

 

結語

交互動效設計是產(chǎn)品設計與用戶認知反復磨合,長期積累、沉淀而來。整理總結這些知識資產(chǎn)可以幫助我們在未來工作中不盲目的使用動效和互動。使“動效設計模式”能成為指導提升產(chǎn)品用戶體驗,穩(wěn)定輸出模式化、規(guī)范化動效及互動方式的白皮書。以上我們分析了很多場景的交互動效,設計中的細節(jié)思考,如何有效的落地,一款應用中的交互動效是其必不可少的組成部分。相信和大家聊了這么多,會對交互動效有了很多不同角度的認識,也能有效的將這些化為自己的知識應用于實際的工作中。

 

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

 

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

 

 

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://m.sillybuy.com

存檔