xiaofei?|?2013-01-23?|交互設計
講到移動設備的轉場設計捎琐,我們先來看看移動設備会涎。 移動設備有三個主要的特點:
1. 屏幕小,相對于普通的PC來看移動設備的屏幕相對要小很多瑞凑。
2. 使用環(huán)境多變末秃,由于移動設備便攜的特點我們會在各種環(huán)境中使用。
3. 由于屏幕小一次展示的內容少加上各種不穩(wěn)定操作環(huán)境拨黔,軟件上有簡單易學易于操作的特性
回到正題來看轉場 說到“轉場”一般都會想到電影和PPT里面的轉場蛔溃,
下面來看轉場在這兩個領域的定位和作用
在影視作品中轉場作為一種藝術加工的技巧,可以有效的將影片的情節(jié)連接起來篱蝇,從而形成一部完整的影片贺待。善用轉場技巧可以有效的營造影片氣氛和制造懸念,對人物刻畫和劇情的發(fā)展有極大的幫助零截。
在PPT中轉場作為一種手段麸塞,可以有效的將各個頁面連接起來,幫助觀者更好的理解PPT內容涧衙。使得講述更加連貫
轉場的廣義定義:某種形式或類型之間的變化哪工,或者是這種變化的過程。
了解了移動設備的特點和轉場的定義弧哎,下面聯系起來看為什么移動設備需要有轉場的存在雁比。移動應用由若干頁面組成,而每個頁面又由若干元素組成撤嫩。內容要求條理性更強偎捎、操作邏輯更清晰、更易于學習序攘、用戶轉化率高茴她,而轉場恰恰可以很好的表達元素之間的聯系,所以在不同元素與頁面的轉換中程奠,需要轉場丈牢。
下面來詳細了解一下移動設備轉場,
首先是轉場的分類 轉場的類型多種多樣瞄沙,我總結出了6個有代表性的
1.翻轉界面
2.黑屏
3.縮放
4.場景切換
5.淡入淡出
6.效果疊加
分別來看一下:
1.翻轉界面 翻轉界面通常是有一定的對應關系己沛,常見的有iOS平臺的播放和專輯列表界面的切換最有代表性的是ibookstore的翻轉
2.黑屏 黑屏說是轉場感覺有點不合理,其實它是特殊情況下的轉場距境。如果連接的兩個頁面需要耗損系統(tǒng)大部分的性能泛粹,我們可以做盡量簡單的轉場來過渡。這就是黑屏的使用環(huán)境肮疗。打開Cut the Rope應用,當點擊設置按鈕后扒接,會以黑屏的方式切換界面伪货。
3.縮放 縮放一般應用于層級的導航们衙,能清晰的表明正處在的位置和不同選項之間的關系 WINPHONE上的選項切換用的比較多
4.淡入淡出 淡入淡出的過渡效果是最為常見的處理手法,這種效果往往能很直觀的表現從一個畫面到另一個畫面變化的過程碱呼,視覺表現上比較柔和蒙挑,但同時通常會局限在需要過渡的兩個界面之間有一定的共同特點
http://yule.kankan.com/vod/164/164540.shtml
5.場景切換 場景切換一般用于同一元素在不同狀態(tài)下的動作過程,典型的有ZAKER 的點擊切換場景切換一般用于同一元素在不同狀態(tài)下的動作過程忆蚀,典型的有ZAKER 的點擊切換圖片上是一個叫Scorekeeper計分軟件的界面切換。 自上而下清晰表明了狀態(tài)的變化馋袜,輪播立體感的跳轉則則將數據的變化的空間形象化。這個方法不足之處是需要一定的等待時間
6.效果疊加 在有些復雜的界面切換過程中欣鳖,有時候僅僅使用一種方式來實現界面的切換是遠遠不夠的,為了能夠更生動而自然的在界面中進行切換泽台,需要同時運用幾種過渡效果。
接下來看一下轉場設計的方法總結了一下5點
1.預備動作
2.跟隨與重疊動作
3.慢入慢出
4.次要動作
5.時間
1.預備動作:預備動作就是為了告訴用戶接下來會發(fā)生什么事情怀酷,速度以及方向會是怎樣,以便給用戶一個緩沖時間嗜闻。這個原則可用于打開App時處理視覺效果蜕依,也可用于用戶體驗之間的承接。
2.跟隨與重疊動作:
跟隨動作:毛發(fā)等在它無意識控制的情況下自然飄動或延遲的現象就是跟隨動作的一種泞辐。
重疊動作:頭轉了一半身子也跟著轉笔横,這就是重疊動作。
3.慢入慢出:自然界中咐吼,不論是汽車啟動還是運動員起跑吹缔,都需要一個緩沖過程,慢入與慢出就利用間隔空間處理這個過程的锯茄。.這里面會用到緩動函數厢塘,緩動函數指定動畫效果在執(zhí)行時的速度,使其看起來更加真實〖∮模現實物件照著一定節(jié)奏移動晚碾,非初始即移動很快。當打開抽屜時喂急,首先會加速格嘁,然后慢下來。當某個東西往下掉時廊移,首先是越掉越快糕簿,撞到地上后回彈探入,最終才又碰觸地板。
http://yule.kankan.com/vod/164/164542.shtml
4.次要動作:次要動作就是在主要動作以外的有助于表現角色內心狀態(tài)或者個性的動作懂诗。身體和腿部運動就是主要動作蜂嗽,尾巴運動則是次要動作。次要動作的存在是為了配合主要動作殃恒,共同讓整個畫面更加真實生動植旧。
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.滾動刷新
滾動是自然的閱讀方式鸯乃,用戶由上而下閱讀,新的內容自動加載替換省去了翻頁的步驟鸟悴。
我們作為設計師竭盡所能讓內容更容易找到细诸、容易閱讀并且充滿藝術美感震贵。
而隨著科技進步水评、數據處理器越來越強大中燥,人們用以閱讀內容的設備和系統(tǒng)將向前更進一步,我們將開發(fā)更新方式來展現這些內容拿霉。就像被迅速接納的觸摸操作友浸,手勢正也變得越來越重要偏窝。正因如此祭往,我們需要讓用戶在應用中擁有位置感,轉場在此之中會變得尤為重要驮肉。
設計离钝,可以去表現一種態(tài)度褪储。更甚者,可以引領一種生活方式浪读。
相關標簽