2013-2-16 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( m.lzhte.cn )是一家專注而深入的設(shè)計(jì)機(jī)構(gòu) ，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(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)的廣義定義：某種形式或類型之間的變化，或者是這種變化的過(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í)、用戶轉(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)的分類 轉(zhuǎn)場(chǎng)的類型多種多樣，我總結(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)的播放和專輯列表界面的切換最有代表性的是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í)間
1.預(yù)備動(dòng)作： 預(yù)備動(dòng)作就是為了告訴用戶接下來(lái)會(huì)發(fā)生什么事情，速度以及方向會(huì)是怎樣，以便給用戶一個(gè)緩沖時(shí)間。這個(gè)原則可用于打開(kāi)App時(shí)處理視覺(jué)效果，也可用于用戶體驗(yàn)之間的承接。
2.跟隨與重疊動(dòng)作：
跟隨動(dòng)作：毛發(fā)等在它無(wú)意識(shí)控制的情況下自然飄動(dòng)或延遲的現(xiàn)象就是跟隨動(dòng)作的一種。
重疊動(dòng)作：頭轉(zhuǎn)了一半身子也跟著轉(zhuǎn)，這就是重疊動(dòng)作。
3.慢入慢出： 自然界中，不論是汽車啟動(dòng)還是運(yùn)動(dòng)員起跑，都需要一個(gè)緩沖過(guò)程，慢入與慢出就利用間隔空間處理這個(gè)過(guò)程的。.這里面會(huì)用到緩動(dòng)函數(shù)， 緩動(dòng)函數(shù) 指定動(dòng)畫(huà)效果在執(zhí)行時(shí)的速度，使其看起來(lái)更加真實(shí)。 現(xiàn)實(shí)物件照著一定節(jié)奏移動(dòng)，非初始即移動(dòng)很快。當(dāng)打開(kāi)抽屜時(shí)，首先會(huì)加速，然后慢下來(lái)。當(dāng)某個(gè)東西往下掉時(shí)，首先是越掉越快，撞到地上后回彈，最終才又碰觸地板。
5.時(shí)間： 一個(gè)動(dòng)作運(yùn)動(dòng)得太慢或太快都會(huì)讓人覺(jué)得怪異，在動(dòng)畫(huà)繪制中，時(shí)間用框架的數(shù)量來(lái)描述，動(dòng)畫(huà)播放后，這個(gè)時(shí)間就轉(zhuǎn)換成速度。
1. 接近0.1秒，用戶認(rèn)為是同步的，感覺(jué)直接操控。
2. 接近1秒，有響應(yīng)，認(rèn)為認(rèn)為進(jìn)程沒(méi)有被打斷。
3. 大于十秒，走神，注意力不集中，甚至抓狂。
應(yīng)用邏輯分為兩個(gè)維度， 1.橫向的是瀏覽的維度。(不適合)
2.縱向的是任務(wù)流程的維度。（適合使用）
在橫向的瀏覽維度是不適合頻繁的轉(zhuǎn)場(chǎng)的。也有一些方法幫助我們?cè)跊](méi)有轉(zhuǎn)場(chǎng)的時(shí)候解決內(nèi)容多的問(wèn)題。
1. 分段按鈕和TAB
2. 撥選器
3. 滾動(dòng)自動(dòng)刷新
4. 導(dǎo)航隱藏
5. 沉浸瀏覽
1. 分段按鈕和TAB
頁(yè)面信息過(guò)多需要進(jìn)行再次過(guò)濾或者切換模式類別，分段按鈕在保持頁(yè)面基本空間不變的情況下，可以有效的過(guò)濾信息。
2.撥選器
淘寶輪播上的促銷廣告每隔幾秒會(huì)轉(zhuǎn)變一下，dots有效的暗示了廣告的位置和動(dòng)作，用戶可以在不用跳轉(zhuǎn)頁(yè)面的情況撥動(dòng)輪播圖片查看各種信息。
http://yule.kankan.com/vod/164/164535.shtml
3. 導(dǎo)航隱藏
全局導(dǎo)航模式可以有效的較少跳轉(zhuǎn)的次數(shù)，全局導(dǎo)航更加扁平化，可以直接到達(dá)任一類別。
4. 響應(yīng)展開(kāi)
有效避免頁(yè)面跳轉(zhuǎn)，同時(shí)保持了首頁(yè)的整潔
5.滾動(dòng) 刷新
滾動(dòng)是自然的閱讀方式，用戶由上而下閱讀，新的內(nèi)容自動(dòng)加載替換省去了翻頁(yè)的步驟。
我們作為設(shè)計(jì)師竭盡所能讓內(nèi)容更容易找到、容易閱讀并且充滿藝術(shù)美感。
而隨著科技進(jìn)步、數(shù)據(jù)處理器越來(lái)越強(qiáng)大，人們用以閱讀內(nèi)容的設(shè)備和系統(tǒng)將向前更進(jìn)一步，我們將開(kāi)發(fā)更新方式來(lái)展現(xiàn)這些內(nèi)容。就像被迅速接納的觸摸操作，手勢(shì)正也變得越來(lái)越重要。正因如此，我們需要讓用戶在應(yīng)用中擁有位置感，轉(zhuǎn)場(chǎng)在此之中會(huì)變得尤為重要。
設(shè)計(jì)，可以去表現(xiàn)一種態(tài)度。更甚者，可以引領(lǐng)一種生活方式。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.lzhte.cn