雷火平台-中国知名电竞赛事平台

聯(lián)系我們 face+ 關(guān)于 服務(wù) 案例
首頁 案例 服務(wù) 關(guān)于 face+

音樂界面設(shè)計,讓你設(shè)計的音樂界面更舒服

Time: 2019-12-19

音樂應(yīng)該是一個讓人非常放松的東西,所以音樂界面的設(shè)計也應(yīng)該盡可能地呈現(xiàn)讓人舒服和舒適的感覺,下面我們跟隨小編一起來了解一下音樂界面設(shè)計的相關(guān)資料吧。


音樂界面設(shè)計之確定所需要的操作:

  1、界面設(shè)計的注意事項

  2、如何搜集靈感

  3、設(shè)計界面

  3、切圖后導(dǎo)入工具軟件

  4、制作動效


  音樂界面設(shè)計的步驟:

一、第一步

  首先確認這個音樂界面小頁面的一些界面設(shè)計規(guī)范設(shè)置

  字體:Helvetica Neue LT Pro Black / Bold / Light

  字號:標題40px 內(nèi)容32px 其他24px

  顏色:主字色#475266 輔助字色#acb3bf 主色調(diào)#61d5f4 - #58f2f4


1.png

(圖片來自網(wǎng)絡(luò))


二、第二步

  1、首先制作banner的切換動效。將兩個banner放入AE排列好,分析動畫的運動,首先第一個banner滑動走有位置,Y軸旋轉(zhuǎn),透明度的變化,位置從右到左,Y軸旋轉(zhuǎn)從0度到20度,需要打開3D模式,透明度從100到0。

  2、第二個banner位置從右到左,Y軸旋轉(zhuǎn)從-20度到0度,透明度從0到100,在運動完成后會發(fā)現(xiàn)這個效果過于生硬,所以可以將其Y軸旋轉(zhuǎn)繼續(xù)運動 “5度 - 0度 - 3度 - 0度”,讓其有一個回彈效果。

  3、檢查列表效果。列表的上劃涉及到的動效有幾個動畫,列表的位置從下往上運動,在運動的同時每個小卡片會有一個X軸旋轉(zhuǎn)的動效,當運動到banner的時候,banner會翻轉(zhuǎn)進行消失。

  難點解析:

  首先是列表的運動,從下面滑動的動效很簡單,但是需要注意第三排,由于后面的動畫需要利用到第三個中的唱片,名字和封套,所以我們需要將其進行單獨處理,但是我們需要先做X軸旋轉(zhuǎn),不能將第三排的4個組件單獨進行處理,需要讓唱片,名字和封套跟隨其基礎(chǔ)的組件。

  運動到banner的時候,banner的X軸旋轉(zhuǎn)的同時需要將位置往上挪動,就可以有向上翻轉(zhuǎn)的效果,并且在翻轉(zhuǎn)的時候需要將其透明度降低到0。


2.jpg

(圖片來自網(wǎng)絡(luò))


三、第三步

  首先是點擊后的封套會Y軸旋轉(zhuǎn)消失,然后是字和唱片會放大后挪動到相應(yīng)位置,然后會加上水波動效和時間變化動態(tài)效果等。

  難點介紹:

  1、首先介紹水波的動效。我們可以創(chuàng)建一個矩形,修改其顏色,然后加上“效果 - 扭曲 - 波形變形”的動畫,調(diào)整其參數(shù)即可完成水波動效。

2、然后是時間的變化效果,可以復(fù)制粘貼文本

  rate = 1;

  clockStart = -4;

  function minZero(n){ if (n function secZero(n){ if (n clockTime = Math.max(clockStart + rate* (time - inPoint),0);

  t = Math.floor(clockTime);

  min = Math.floor((t%3600)/60);

  sec = Math.floor(t%60);

  minZero(min) + ":" + secZero(sec)

  需要注意的是clockStart 為其開始的時間。

  3、歌詞的動效。這里涉及到蒙版,需要復(fù)制2層文字,將上層的文字改成藍色,后層文字改成灰色,然后將上層的文字用蒙版的變化去做歌詞的動效。

  

其實有了小編為你介紹的以上音樂界面設(shè)計的相關(guān)步驟之后,相信一定可以讓你涉及出更好看且更有特色的音樂界面哦!




合作咨詢

上海(總部)

上海市浦東新區(qū)郭守敬路498號22號樓
021-61057328
service@faceui.com

辦公地址地圖

北京

北京市東城區(qū)后永康17號A座
010-64015620
service@faceui.com

辦公地址地圖

成都

四川省成都市錦江區(qū)東大街牛王廟段100號
028-62790929
service@faceui.com

辦公地址地圖
首頁 | 案例 | 服務(wù) | 關(guān)于 | face+ | 智見

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號-5

上海辦公地點地圖
北京辦公地點地圖
深圳辦公地點地圖
在微信中搜索faceui
或保存二維碼在微信中打開