移動設備的轉場設計

 

 

講到移動設備的轉場設計，咱們先來看看移動設備。 移動設備有三個主要的特色：

1. 屏幕小，相對於普通的PC來看移動設備的屏幕相對要小不少。

 

2. 使用環境多變，因爲移動設備便攜的特色咱們會在各類環境中使用。

3. 因爲屏幕小一次展現的內容少加上各類不穩定操做環境，軟件上有簡單易學易於操做的特性

回到正題來看轉場 說到「轉場」通常都會想到電影和PPT裏面的轉場，

下面來看轉場在這兩個領域的定位和做用

在影視做品中轉場做爲一種藝術加工的技巧，能夠有效的將影片的情節鏈接起來，從而造成一部完整的影片。善用轉場技巧能夠有效的營造影片氣氛和製造懸念，對人物刻畫和劇情的發展有極大的幫助。

在PPT中轉場做爲一種手段，能夠有效的將各個頁面鏈接起來，幫助觀者更好的理解PPT內容。使得講述更加連貫

轉場的廣義定義：某種形式或類型之間的變化，或者是這種變化的過程。

瞭解了移動設備的特色和轉場的定義，下面聯繫起來看爲何移動設備須要有轉場的存在。 移動應用由若干頁面組成，而每一個頁面又由若干元素組成。內容要求條理性更強、操做邏輯更清晰、更易於學習、用戶轉化率高，而轉場偏偏能夠很好的表達元素之間的聯繫，因此在不一樣元素與頁面的轉換中，須要轉場。

 

下面來詳細瞭解一下移動設備轉場，

首先是轉場的分類 轉場的類型多種多樣，我總結出了6個有表明性的

          1.翻轉界面

          2.黑屏

          3.縮放

          4.場景切換

          5.淡入淡出

          6.效果疊加

分別來看一下：

1.翻轉界面 翻轉界面一般是有必定的對應關係，常見的有iOS平臺的播放和專輯列表界面的切換最有表明性的是ibookstore的翻轉

2.黑屏 黑屏說是轉場感受有點不合理，其實它是特殊狀況下的轉場。若是鏈接的兩個頁面須要耗損系統大部分的性能，咱們能夠作儘可能簡單的轉場來過渡。這就是黑屏的使用環境。打開Cut the Rope應用，當點擊設置按鈕後，會以黑屏的方式切換界面。

3.縮放 縮放通常應用於層級的導航，能清晰的代表正處在的位置和不一樣選項之間的關係 WINPHONE上的選項切換用的比較多

              

4．淡入淡出 淡入淡出的過渡效果是最爲常見的處理手法，這種效果每每能很直觀的表現從一個畫面到另外一個畫面變化的過程，視覺表現上比較柔和，但同時一般會侷限在須要過渡的兩個界面之間有必定的共同特色

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

5.場景切換 場景切換通常用於同一元素在不一樣狀態下的動做過程，典型的有ZAKER 的點擊切換場景切換通常用於同一元素在不一樣狀態下的動做過程，典型的有ZAKER 的點擊切換圖片上是一個叫Scorekeeper計分軟件的界面切換。 自上而下清晰代表了狀態的變化，輪播立體感的跳轉則則將數據的變化的空間形象化。這個方法不足之處是須要必定的等待時間

 

6.效果疊加 在有些複雜的界面切換過程當中，有時候僅僅使用一種方式來實現界面的切換是遠遠不夠的，爲了可以更生動而天然的在界面中進行切換，須要同時運用幾種過渡效果。

 

接下來看一下轉場設計的方法總結了一下5點

 1.預備動做

 2.跟隨與重疊動做

 3.慢入慢出

 4.次要動做

       5.時間

1.預備動做：預備動做就是爲了告訴用戶接下來會發生什麼事情，速度以及方向會是怎樣，以便給用戶一個緩衝時間。這個原則可用於打開App時處理視覺效果，也可用於用戶體驗之間的承接。

 

2.跟隨與重疊動做：

跟隨動做：毛髮等在它無心識控制的狀況下天然飄動或延遲的現象就是跟隨動做的一種。

重疊動做：頭轉了一半身子也跟着轉，這就是重疊動做。

 

3.慢入慢出：天然界中，不管是汽車啓動仍是運動員起跑，都須要一個緩衝過程，慢入與慢出就利用間隔空間處理這個過程的。.這裏面會用到緩動函數，緩動函數指定動畫效果在執行時的速度，使其看起來更加真實。現實物件照着必定節奏移動，非初始即移動很快。當打開抽屜時，首先會加速，而後慢下來。當某個東西往下掉時，首先是越掉越快，撞到地上後回彈，最終才又碰觸地板。

 

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

 

4.次要動做：次要動做就是在主要動做之外的有助於表現角色心裏狀態或者個性的動做。身體和腿部運動就是主要動做，尾巴運動則是次要動做。次要動做的存在是爲了配合主要動做，共同讓整個畫面更加真實生動。

5.時間：一個動做運動得太慢或太快都會讓人以爲怪異，在動畫繪製中，時間用框架的數量來描述，動畫播放後，這個時間就轉換成速度。

1.接近0.1秒，用戶認爲是同步的，感受直接操控。

2.接近1秒，有響應，認爲認爲進程沒有被打斷。

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

 

應用邏輯分爲兩個維度，1.橫向的是瀏覽的維度。(不適合)

                   2.縱向的是任務流程的維度。（適合使用）

 

在橫向的瀏覽維度是不適合頻繁的轉場的。也有一些方法幫助咱們在沒有轉場的時候解決內容多的問題。

 

     1. 分段按鈕和TAB 

     2. 撥選器

     3. 滾動自動刷新

     4. 導航隱藏

     5. 沉浸瀏覽

 

1. 分段按鈕和TAB

頁面信息過多須要進行再次過濾或者切換模式類別，分段按鈕在保持頁面基本空間不變的狀況下，能夠有效的過濾信息。

 

2.撥選器

淘寶輪播上的促銷廣告每隔幾秒會轉變一下，dots有效的暗示了廣告的位置和動做，用戶能夠在不用跳轉頁面的狀況撥動輪播圖片查看各類信息。

 

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

 

3. 導航隱藏

全局導航模式能夠有效的較少跳轉的次數，全局導航更加扁平化，能夠直接到達任一類別。

4. 響應展開

有效避免頁面跳轉，同時保持了首頁的整潔

 

5.滾動刷新

滾動是天然的閱讀方式，用戶由上而下閱讀，新的內容自動加載替換省去了翻頁的步驟。

咱們做爲設計師竭盡所能讓內容更容易找到、容易閱讀而且充滿藝術美感。

而隨着科技進步、數據處理器愈來愈強大，人們用以閱讀內容的設備和系統將向前更進一步，咱們將開發更新方式來展示這些內容。就像被迅速接納的觸摸操做，手勢正也變得愈來愈重要。正因如此，咱們須要讓用戶在應用中擁有位置感，轉場在此之中會變得尤其重要。

設計，能夠去表現一種態度。更甚者，能夠引領一種生活方式。

轉載自：http://cued.xunlei.com/log061