您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 交互設(shè)計(jì) >> 瀏覽設(shè)計(jì)教程

移動(dòng)設(shè)備的轉(zhuǎn)場(chǎng)設(shè)計(jì)(2)

              

 

4.淡入淡出 淡入淡出的過渡效果是最為常見的處理手法,這種效果往往能很直觀的表現(xiàn)從一個(gè)畫面到另一個(gè)畫面變化的過程,視覺表現(xiàn)上比較柔和,但同時(shí)通常會(huì)局限在需要過渡的兩個(gè)界面之間有一定的共同特點(diǎn)

http://yule.kankan.com/vod/164/164540.shtml

5.場(chǎng)景切換 場(chǎng)景切換一般用于同一元素在不同狀態(tài)下的動(dòng)作過程,典型的有ZAKER 的點(diǎn)擊切換場(chǎng)景切換一般用于同一元素在不同狀態(tài)下的動(dòng)作過程,典型的有ZAKER 的點(diǎn)擊切換圖片上是一個(gè)叫Scorekeeper計(jì)分軟件的界面切換。 自上而下清晰表明了狀態(tài)的變化,輪播立體感的跳轉(zhuǎn)則則將數(shù)據(jù)的變化的空間形象化。這個(gè)方法不足之處是需要一定的等待時(shí)間

 

 

 

6.效果疊加 在有些復(fù)雜的界面切換過程中,有時(shí)候僅僅使用一種方式來(lái)實(shí)現(xiàn)界面的切換是遠(yuǎn)遠(yuǎn)不夠的,為了能夠更生動(dòng)而自然的在界面中進(jìn)行切換,需要同時(shí)運(yùn)用幾種過渡效果。

 

 

接下來(lái)看一下轉(zhuǎn)場(chǎng)設(shè)計(jì)的方法總結(jié)了一下5點(diǎn)

 1.預(yù)備動(dòng)作

 2.跟隨與重疊動(dòng)作

 3.慢入慢出

 4.次要?jiǎng)幼?/span>

       5.時(shí)間

1.預(yù)備動(dòng)作:預(yù)備動(dòng)作就是為了告訴用戶接下來(lái)會(huì)發(fā)生什么事情,速度以及方向會(huì)是怎樣,以便給用戶一個(gè)緩沖時(shí)間。這個(gè)原則可用于打開App時(shí)處理視覺效果,也可用于用戶體驗(yàn)之間的承接。

 

2.跟隨與重疊動(dòng)作:

跟隨動(dòng)作:毛發(fā)等在它無(wú)意識(shí)控制的情況下自然飄動(dòng)或延遲的現(xiàn)象就是跟隨動(dòng)作的一種。

重疊動(dòng)作:頭轉(zhuǎn)了一半身子也跟著轉(zhuǎn),這就是重疊動(dòng)作。

 

3.慢入慢出:自然界中,不論是汽車啟動(dòng)還是運(yùn)動(dòng)員起跑,都需要一個(gè)緩沖過程,慢入與慢出就利用間隔空間處理這個(gè)過程的。.這里面會(huì)用到緩動(dòng)函數(shù),緩動(dòng)函數(shù)指定動(dòng)畫效果在執(zhí)行時(shí)的速度,使其看起來(lái)更加真實(shí)。現(xiàn)實(shí)物件照著一定節(jié)奏移動(dòng),非初始即移動(dòng)很快。當(dāng)打開抽屜時(shí),首先會(huì)加速,然后慢下來(lái)。當(dāng)某個(gè)東西往下掉時(shí),首先是越掉越快,撞到地上后回彈,最終才又碰觸地板。

 
 
4.次要?jiǎng)幼鳎?/span>次要?jiǎng)幼骶褪窃谥饕獎(jiǎng)幼饕酝獾挠兄诒憩F(xiàn)角色內(nèi)心狀態(tài)或者個(gè)性的動(dòng)作。身體和腿部運(yùn)動(dòng)就是主要?jiǎng)幼?,尾巴運(yùn)動(dòng)則是次要?jiǎng)幼鳌4我獎(jiǎng)幼鞯拇嬖谑菫榱伺浜现饕獎(jiǎng)幼?,共同讓整個(gè)畫面更加真實(shí)生動(dòng)。

5.時(shí)間:一個(gè)動(dòng)作運(yùn)動(dòng)得太慢或太快都會(huì)讓人覺得怪異,在動(dòng)畫繪制中,時(shí)間用框架的數(shù)量來(lái)描述,動(dòng)畫播放后,這個(gè)時(shí)間就轉(zhuǎn)換成速度。

1.接近0.1秒,用戶認(rèn)為是同步的,感覺直接操控。

2.接近1秒,有響應(yīng),認(rèn)為認(rèn)為進(jìn)程沒有被打斷。

3.大于十秒,走神,注意力不集中,甚至抓狂。

 

應(yīng)用邏輯分為兩個(gè)維度,1.橫向的是瀏覽的維度。(不適合)

                   2.縱向的是任務(wù)流程的維度。(適合使用)

 

在橫向的瀏覽維度是不適合頻繁的轉(zhuǎn)場(chǎng)的。也有一些方法幫助我們?cè)跊]有轉(zhuǎn)場(chǎng)的時(shí)候解決內(nèi)容多的問題。

 

     1. 分段按鈕和TAB 

     2. 撥選器

     3. 滾動(dòng)自動(dòng)刷新

     4. 導(dǎo)航隱藏

     5. 沉浸瀏覽

 

1. 分段按鈕和TAB

頁(yè)面信息過多需要進(jìn)行再次過濾或者切換模式類別,分段按鈕在保持頁(yè)面基本空間不變的情況下,可以有效的過濾信息。

 

2.撥選器

淘寶輪播上的促銷廣告每隔幾秒會(huì)轉(zhuǎn)變一下,dots有效的暗示了廣告的位置和動(dòng)作,用戶可以在不用跳轉(zhuǎn)頁(yè)面的情況撥動(dòng)輪播圖片查看各種信息。

 

http://yule.kankan.com/vod/164/164535.shtml

 

3. 導(dǎo)航隱藏

全局導(dǎo)航模式可以有效的較少跳轉(zhuǎn)的次數(shù),全局導(dǎo)航更加扁平化,可以直接到達(dá)任一類別。

 

4. 響應(yīng)展開

有效避免頁(yè)面跳轉(zhuǎn),同時(shí)保持了首頁(yè)的整潔

 

5.滾動(dòng)刷新

滾動(dòng)是自然的閱讀方式,用戶由上而下閱讀,新的內(nèi)容自動(dòng)加載替換省去了翻頁(yè)的步驟。

 

 

我們作為設(shè)計(jì)師竭盡所能讓內(nèi)容更容易找到、容易閱讀并且充滿藝術(shù)美感。

而隨著科技進(jìn)步、數(shù)據(jù)處理器越來(lái)越強(qiáng)大,人們用以閱讀內(nèi)容的設(shè)備和系統(tǒng)將向前更進(jìn)一步,我們將開發(fā)更新方式來(lái)展現(xiàn)這些內(nèi)容。就像被迅速接納的觸摸操作,手勢(shì)正也變得越來(lái)越重要。正因如此,我們需要讓用戶在應(yīng)用中擁有位置感,轉(zhuǎn)場(chǎng)在此之中會(huì)變得尤為重要。

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://irelandcustomcontracting.com/tutorial/id1327.html
淘寶購(gòu)交互設(shè)計(jì)心得
交互設(shè)計(jì)師的產(chǎn)出物是什么?
圖趣網(wǎng)微信
建議反饋
×