網(wǎng)站設(shè)計(jì)中需要的動(dòng)態(tài)效果展示--網(wǎng)站建設(shè)分享

< 隨著國(guó)際大品牌蘋(píng)果跟谷歌的引領(lǐng)，近越來(lái)越多的國(guó)內(nèi)公司開(kāi)端關(guān)注動(dòng)效設(shè)計(jì)了，越來(lái)越多的團(tuán)隊(duì)已經(jīng)意識(shí)到動(dòng)效在產(chǎn)品用戶閉會(huì)中的重要性了，更多的射雞師們也開(kāi)端投身動(dòng)效設(shè)計(jì)范疇。

（文中局部案例為設(shè)計(jì)師個(gè)人作品，局部為線上產(chǎn)品，都是我十分十分欣賞的作品。如不慎沖撞請(qǐng)戳我調(diào)換掉）
   加強(qiáng)閉會(huì)舒服度
嗯，就是讓用戶更加爽更加爽的用你的產(chǎn)品。網(wǎng)站設(shè)計(jì)要能充分吸引訪問(wèn)者的注意力，讓訪問(wèn)者產(chǎn)生視覺(jué)上的愉悅感。因此在網(wǎng)頁(yè)創(chuàng)作的時(shí)候就必須將網(wǎng)站的整體設(shè)計(jì)與網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)原理緊密結(jié)合起來(lái)。
具體表當(dāng)初：
1.表示層級(jí)關(guān)聯(lián)

為了展示層與層的關(guān)聯(lián)，是抽屜，是打開(kāi)，還是平級(jí)切換等等，讓用戶曉得這個(gè)界面跟上一個(gè)、下一個(gè)的關(guān)聯(lián)。網(wǎng)站設(shè)計(jì)要能充分吸引訪問(wèn)者的注意力，讓訪問(wèn)者產(chǎn)生視覺(jué)上的愉悅感。因此在網(wǎng)頁(yè)創(chuàng)作的時(shí)候就必須將網(wǎng)站的整體設(shè)計(jì)與網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)原理緊密結(jié)合起來(lái)。這已經(jīng)是非經(jīng)常見(jiàn)的應(yīng)用了。



2.與用戶手勢(shì)結(jié)合，更天然的動(dòng)畫(huà)表示
當(dāng)用戶手勢(shì)操作的時(shí)候，讓界面的動(dòng)態(tài)走向更合乎手指的活動(dòng)，從而讓用戶感到到是自己把持了界面的動(dòng)向，而不是機(jī)械化的跳轉(zhuǎn)。
UI動(dòng)效設(shè)計(jì) 動(dòng)效設(shè)計(jì) 提示性動(dòng)效設(shè)計(jì)
City guide app 用手勢(shì)可能向左向右扔卡片



3.愉快的提示功能
在某些須要提示的時(shí)候能吸引用戶的留神，然而又不會(huì)僵硬，合乎預(yù)期的呈現(xiàn)。

UI動(dòng)效設(shè)計(jì) 動(dòng)效設(shè)計(jì) 提示性動(dòng)效設(shè)計(jì)
Action button feedback 出錯(cuò)提示
UI動(dòng)效設(shè)計(jì) 動(dòng)效設(shè)計(jì) 提示性動(dòng)效設(shè)計(jì)
City Guides 啟動(dòng)時(shí)提示用戶可能左右滑動(dòng)卡片


4.額定增加界面的活力
在用戶預(yù)期之外增加的驚喜，可能是帥氣的，可能是賣(mài)萌，可能有些物理屬性，總之讓用戶感知到產(chǎn)品的生命力。

UI動(dòng)效設(shè)計(jì) 動(dòng)效設(shè)計(jì) 提示性動(dòng)效設(shè)計(jì)
readme.io 萌萌的輸入框

UI動(dòng)效設(shè)計(jì) 動(dòng)效設(shè)計(jì) 提示性動(dòng)效設(shè)計(jì)
amazon Q彈的菜單

UI動(dòng)效設(shè)計(jì) 動(dòng)效設(shè)計(jì) 提示性動(dòng)效設(shè)計(jì)
tumblr  不喜好我 心都碎了呢~
5.吸引用戶長(zhǎng)久的留神力
也是屬于增加用戶的驚喜感，在某些數(shù)據(jù)量較大的界面中增加一些動(dòng)效，讓用戶堅(jiān)持留神力。
UI動(dòng)效設(shè)計(jì) 動(dòng)效設(shè)計(jì) 提示性動(dòng)效設(shè)計(jì)
Bubbles 以動(dòng)態(tài)的情勢(shì)展示數(shù)據(jù)點(diǎn)
http://www.0577idc.com/
>