移動設備的轉場設計

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)度褪储。更甚者,可以引領一種生活方式浪读。

相關標簽

交互設計移動設備轉場

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末互订,一起剝皮案震驚了整個濱河市痘拆,隨后出現的幾起案子错负,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,122評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件识颊,死亡現場離奇詭異祥款,居然都是意外死亡月杉,警方通過查閱死者的電腦和手機苛萎,發(fā)現死者居然都...
    沈念sama閱讀 93,070評論 3 395
  • 文/潘曉璐 我一進店門腌歉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人桂塞,你說我怎么就攤上這事阁危√保” “怎么了?”我有些...
    開封第一講書人閱讀 164,491評論 0 354
  • 文/不壞的土叔 我叫張陵菱父,是天一觀的道長官辽。 經常有香客問我粟瞬,道長,這世上最難降的妖魔是什么俗批? 我笑而不...
    開封第一講書人閱讀 58,636評論 1 293
  • 正文 為了忘掉前任岁忘,我火速辦了婚禮干像,結果婚禮上驰弄,老公的妹妹穿的比我還像新娘戚篙。我一直安慰自己,他們只是感情好位喂,可當我...
    茶點故事閱讀 67,676評論 6 392
  • 文/花漫 我一把揭開白布忆某。 她就那樣靜靜地躺著弃舒,像睡著了一般状原。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上削锰,一...
    開封第一講書人閱讀 51,541評論 1 305
  • 那天器贩,我揣著相機與錄音,去河邊找鬼吧黄。 笑死唆姐,一個胖子當著我的面吹牛奉芦,可吹牛的內容都是我干的。 我是一名探鬼主播烦却,決...
    沈念sama閱讀 40,292評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼短绸,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了窄驹?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,211評論 0 276
  • 序言:老撾萬榮一對情侶失蹤抗斤,失蹤者是張志新(化名)和其女友劉穎瑞眼,沒想到半個月后伤疙,有當地人在樹林里發(fā)現了一具尸體辆影,經...
    沈念sama閱讀 45,655評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡蛙讥,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,846評論 3 336
  • 正文 我和宋清朗相戀三年次慢,在試婚紗的時候發(fā)現自己被綠了翔曲。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片瞳遍。...
    茶點故事閱讀 39,965評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡傅蹂,死狀恐怖份蝴,靈堂內的尸體忽然破棺而出氓轰,到底是詐尸還是另有隱情,我是刑警寧澤案糙,帶...
    沈念sama閱讀 35,684評論 5 347
  • 正文 年R本政府宣布时捌,位于F島的核電站炉抒,受9級特大地震影響,放射性物質發(fā)生泄漏拿诸。R本人自食惡果不足惜亩码,卻給世界環(huán)境...
    茶點故事閱讀 41,295評論 3 329
  • 文/蒙蒙 一描沟、第九天 我趴在偏房一處隱蔽的房頂上張望缅刽。 院中可真熱鬧,春花似錦迟蜜、人聲如沸啡省。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,894評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽障斋。三九已至,卻和暖如春邀层,著一層夾襖步出監(jiān)牢的瞬間遂庄,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,012評論 1 269
  • 我被黑心中介騙來泰國打工秸谢, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留估蹄,地道東北人沫换。 一個月前我還...
    沈念sama閱讀 48,126評論 3 370
  • 正文 我出身青樓苗沧,卻偏偏與公主長得像待逞,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子识樱,可洞房花燭夜當晚...
    茶點故事閱讀 44,914評論 2 355

推薦閱讀更多精彩內容