移動設(shè)備的轉(zhuǎn)場設(shè)計

2013-2-16    藍藍設(shè)計的小編

轉(zhuǎn)載藍藍設(shè)計(   sillybuy.com  )是一家專注而深入的設(shè)計機構(gòu) ,為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、  cs界面設(shè)計 、  ipad界面設(shè)計   、  包裝設(shè)計 、  圖標定制 、  用戶體驗 、交互設(shè)計、   網(wǎng)站建設(shè) 平面設(shè)計服務

 來源: http://cued.xunlei.com/log061

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中,            請點這里   

移動設(shè)備的轉(zhuǎn)場設(shè)計

 

講到移動設(shè)備的轉(zhuǎn)場設(shè)計,我們先來看看移動設(shè)備。 移動設(shè)備有三個主要的特點:

1. 屏幕小,相對于普通的PC來看移動設(shè)備的屏幕相對要小很多。

 

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

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

回到正題來看轉(zhuǎn)場 說到“轉(zhuǎn)場”一般都會想到電影和PPT里面的轉(zhuǎn)場,

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

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

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

轉(zhuǎn)場的廣義定義:某種形式或類型之間的變化,或者是這種變化的過程。

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

 

下面來詳細了解一下移動設(shè)備轉(zhuǎn)場,

首先是轉(zhuǎn)場的分類 轉(zhuǎn)場的類型多種多樣,我總結(jié)出了6個有代表性的

          1.翻轉(zhuǎn)界面

          2.黑屏

          3.縮放

          4.場景切換

          5.淡入淡出

          6.效果疊加

分別來看一下:

1.翻轉(zhuǎn)界面 翻轉(zhuǎn)界面通常是有一定的對應關(guān)系,常見的有iOS平臺的播放和專輯列表界面的切換最有代表性的是ibookstore的翻轉(zhuǎn)

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

3.縮放 縮放一般應用于層級的導航,能清晰的表明正處在的位置和不同選項之間的關(guān)系 WINPHONE上的選項切換用的比較多

              

 

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

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

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

 

 

 

6.效果疊加 在有些復雜的界面切換過程中,有時候僅僅使用一種方式來實現(xiàn)界面的切換是遠遠不夠的,為了能夠更生動而自然的在界面中進行切換,需要同時運用幾種過渡效果。

 

 

接下來看一下轉(zhuǎn)場設(shè)計的方法總結(jié)了一下5點

 1.預備動作

 2.跟隨與重疊動作

 3.慢入慢出

 4.次要動作

       5.時間

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

 

2.跟隨與重疊動作:

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

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

 

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

 
 
4.次要動作: 次要動作就是在主要動作以外的有助于表現(xiàn)角色內(nèi)心狀態(tài)或者個性的動作。身體和腿部運動就是主要動作,尾巴運動則是次要動作。次要動作的存在是為了配合主要動作,共同讓整個畫面更加真實生動。

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

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

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

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

 

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

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

 

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

 

     1. 分段按鈕和TAB 

     2. 撥選器

     3. 滾動自動刷新

     4. 導航隱藏

     5. 沉浸瀏覽

 

1. 分段按鈕和TAB

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

 

2.撥選器

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

 

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

 

3. 導航隱藏

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

 

4. 響應展開

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

 

5.滾動 刷新

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

 

 

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

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

設(shè)計,可以去表現(xiàn)一種態(tài)度。更甚者,可以引領(lǐng)一種生活方式。

 

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://sillybuy.com

存檔