網(wǎng)頁(yè)界面設(shè)計(jì)如能跟動(dòng)效設(shè)計(jì)結(jié)合來(lái)探索設(shè)計(jì)方向，作品將會(huì)獲得更佳優(yōu)秀的體驗(yàn)。網(wǎng)頁(yè)設(shè)計(jì)扁平化風(fēng)格趨勢(shì)的興起，給了動(dòng)效設(shè)計(jì)絕佳時(shí)機(jī)。我們?cè)诤芏嘟?jīng)典網(wǎng)站設(shè)計(jì)中發(fā)現(xiàn)，網(wǎng)站界面越簡(jiǎn)潔，其越容易隱藏超贊的動(dòng)效設(shè)計(jì)在里面。
網(wǎng)頁(yè)界面與動(dòng)效設(shè)計(jì)方向參考1
單點(diǎn)發(fā)力，多個(gè)模塊同時(shí)呈現(xiàn)。
網(wǎng)頁(yè)界面與動(dòng)效設(shè)計(jì)方向參考2
推拉翻頁(yè)，單向擴(kuò)展
網(wǎng)頁(yè)界面與動(dòng)效設(shè)計(jì)方向參考3
從左到右，從下至上，這是最常見的頁(yè)面展示交互動(dòng)效。
網(wǎng)頁(yè)界面與動(dòng)效設(shè)計(jì)方向參考4
多個(gè)模塊同時(shí)呈現(xiàn)
網(wǎng)頁(yè)界面與動(dòng)效設(shè)計(jì)方向參考5
從下至上
網(wǎng)頁(yè)界面與動(dòng)效設(shè)計(jì)方向參考6
多個(gè)模塊，不同方向呈現(xiàn)
網(wǎng)頁(yè)界面與動(dòng)效設(shè)計(jì)方向參考7
文字遮罩特效與滾動(dòng)視差結(jié)合，單向推頁(yè)
網(wǎng)頁(yè)界面與動(dòng)效設(shè)計(jì)方向參考8
結(jié)合視頻動(dòng)效，這種方式文件很大，訪問(wèn)體驗(yàn)可能有些差，有點(diǎn)VR的味道。
網(wǎng)頁(yè)界面與動(dòng)效設(shè)計(jì)方向參考9
多個(gè)方向推進(jìn)，局部放大
網(wǎng)頁(yè)界面與動(dòng)效設(shè)計(jì)方向參考10
網(wǎng)頁(yè)界面與動(dòng)效設(shè)計(jì)方向參考11
旋轉(zhuǎn)木馬，放大強(qiáng)調(diào)
網(wǎng)頁(yè)界面與動(dòng)效設(shè)計(jì)方向參考12
大數(shù)據(jù)的動(dòng)效設(shè)計(jì)
網(wǎng)頁(yè)界面與動(dòng)效設(shè)計(jì)方向參考13
翻雜志與視頻結(jié)合，比普通的水平推拉更有趣味
小結(jié)
-
告別界面的枯燥乏味，可以適當(dāng)考慮增加動(dòng)效設(shè)計(jì)效果。今天分享的這些動(dòng)效設(shè)計(jì)參考方向，不一定都是最優(yōu)秀的。動(dòng)效設(shè)計(jì)需要根據(jù)網(wǎng)站項(xiàng)目本身的需求來(lái)定制設(shè)計(jì)，不可生搬硬套。
網(wǎng)站需要一種氛圍，一種情感話的東西在里面，我們可以適當(dāng)考慮增加動(dòng)效設(shè)計(jì)，以求最佳的界面與動(dòng)效結(jié)合。動(dòng)效設(shè)計(jì)不只是前端工程師的事情，是界面UI界面設(shè)計(jì)師、前端制作工程師、交互設(shè)計(jì)工程師一起深度溝通與合作的結(jié)果，并最終獲得客戶的認(rèn)同的一種網(wǎng)頁(yè)表現(xiàn)形式，少了一樣這個(gè)作品都稱不上經(jīng)典。
