轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   www.alimai.net  )是一家專(zhuān)注而深入的設(shè)計(jì)機(jī)構(gòu) ，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、  cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

 來(lái)源： http://cued.xunlei.com/log061

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，            請(qǐng)點(diǎn)這里   

 

講到移動(dòng)設(shè)備的轉(zhuǎn)場(chǎng)設(shè)計(jì)，我們先來(lái)看看移動(dòng)設(shè)備。 移動(dòng)設(shè)備有三個(gè)主要的特點(diǎn)：

1. 屏幕小，相對(duì)于普通的PC來(lái)看移動(dòng)設(shè)備的屏幕相對(duì)要小很多。

 

2. 使用環(huán)境多變，由于移動(dòng)設(shè)備便攜的特點(diǎn)我們會(huì)在各種環(huán)境中使用。

3. 由于屏幕小一次展示的內(nèi)容少加上各種不穩(wěn)定操作環(huán)境，軟件上有簡(jiǎn)單易學(xué)易于操作的特性

回到正題來(lái)看轉(zhuǎn)場(chǎng) 說(shuō)到“轉(zhuǎn)場(chǎng)”一般都會(huì)想到電影和PPT里面的轉(zhuǎn)場(chǎng)，

下面來(lái)看轉(zhuǎn)場(chǎng)在這兩個(gè)領(lǐng)域的定位和作用

在影視作品中轉(zhuǎn)場(chǎng)作為一種藝術(shù)加工的技巧，可以有效的將影片的情節(jié)連接起來(lái)，從而形成一部完整的影片。善用轉(zhuǎn)場(chǎng)技巧可以有效的營(yíng)造影片氣氛和制造懸念，對(duì)人物刻畫(huà)和劇情的發(fā)展有極大的幫助。

在PPT中轉(zhuǎn)場(chǎng)作為一種手段，可以有效的將各個(gè)頁(yè)面連接起來(lái)，幫助觀者更好的理解PPT內(nèi)容。使得講述更加連貫

轉(zhuǎn)場(chǎng)的廣義定義：某種形式或類(lèi)型之間的變化，或者是這種變化的過(guò)程。

了解了移動(dòng)設(shè)備的特點(diǎn)和轉(zhuǎn)場(chǎng)的定義，下面聯(lián)系起來(lái)看為什么移動(dòng)設(shè)備需要有轉(zhuǎn)場(chǎng)的存在。  移動(dòng)應(yīng)用由若干頁(yè)面組成，而每個(gè)頁(yè)面又由若干元素組成。內(nèi)容要求條理性更強(qiáng)、操作邏輯更清晰、更易于學(xué)習(xí)、用戶(hù)轉(zhuǎn)化率高，而轉(zhuǎn)場(chǎng)恰恰可以很好的表達(dá)元素之間的聯(lián)系，所以在不同元素與頁(yè)面的轉(zhuǎn)換中，需要轉(zhuǎn)場(chǎng)。

 

下面來(lái)詳細(xì)了解一下移動(dòng)設(shè)備轉(zhuǎn)場(chǎng)，

首先是轉(zhuǎn)場(chǎng)的分類(lèi) 轉(zhuǎn)場(chǎng)的類(lèi)型多種多樣，我總結(jié)出了6個(gè)有代表性的

          1.翻轉(zhuǎn)界面

          2.黑屏

          3.縮放

          4.場(chǎng)景切換

          5.淡入淡出

          6.效果疊加

分別來(lái)看一下：

1.翻轉(zhuǎn)界面 翻轉(zhuǎn)界面通常是有一定的對(duì)應(yīng)關(guān)系，常見(jiàn)的有iOS平臺(tái)的播放和專(zhuān)輯列表界面的切換最有代表性的是ibookstore的翻轉(zhuǎn)

2.黑屏 黑屏說(shuō)是轉(zhuǎn)場(chǎng)感覺(jué)有點(diǎn)不合理，其實(shí)它是特殊情況下的轉(zhuǎn)場(chǎng)。如果連接的兩個(gè)頁(yè)面需要耗損系統(tǒng)大部分的性能，我們可以做盡量簡(jiǎn)單的轉(zhuǎn)場(chǎng)來(lái)過(guò)渡。這就是黑屏的使用環(huán)境。打開(kāi)Cut the Rope應(yīng)用，當(dāng)點(diǎn)擊設(shè)置按鈕后，會(huì)以黑屏的方式切換界面。

3.縮放 縮放一般應(yīng)用于層級(jí)的導(dǎo)航，能清晰的表明正處在的位置和不同選項(xiàng)之間的關(guān)系 WINPHONE上的選項(xiàng)切換用的比較多

              

 

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

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

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

 

 

 

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

 

 

接下來(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í)間