移動(dòng)設(shè)備的轉(zhuǎn)場(chǎng)設(shè)計(jì)(2)
4.淡入淡出 淡入淡出的過渡效果是最為常見的處理手法,這種效果往往能很直觀的表現(xiàn)從一個(gè)畫面到另一個(gè)畫面變化的過程,視覺表現(xiàn)上比較柔和,但同時(shí)通常會(huì)局限在需要過渡的兩個(gè)界面之間有一定的共同特點(diǎn)
http://yule.kankan.com/vod/164/164540.shtml
5.場(chǎng)景切換 場(chǎng)景切換一般用于同一元素在不同狀態(tài)下的動(dòng)作過程,典型的有ZAKER 的點(diǎn)擊切換場(chǎng)景切換一般用于同一元素在不同狀態(tài)下的動(dòng)作過程,典型的有ZAKER 的點(diǎn)擊切換圖片上是一個(gè)叫Scorekeeper計(jì)分軟件的界面切換。 自上而下清晰表明了狀態(tài)的變化,輪播立體感的跳轉(zhuǎn)則則將數(shù)據(jù)的變化的空間形象化。這個(gè)方法不足之處是需要一定的等待時(shí)間
6.效果疊加 在有些復(fù)雜的界面切換過程中,有時(shí)候僅僅使用一種方式來(lái)實(shí)現(xiàn)界面的切換是遠(yuǎn)遠(yuǎn)不夠的,為了能夠更生動(dòng)而自然的在界面中進(jìn)行切換,需要同時(shí)運(yùn)用幾種過渡效果。
接下來(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è)原則可用于打開App時(shí)處理視覺效果,也可用于用戶體驗(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è)緩沖過程,慢入與慢出就利用間隔空間處理這個(gè)過程的。.這里面會(huì)用到緩動(dòng)函數(shù),緩動(dòng)函數(shù)指定動(dòng)畫效果在執(zhí)行時(shí)的速度,使其看起來(lái)更加真實(shí)。現(xiàn)實(shí)物件照著一定節(jié)奏移動(dòng),非初始即移動(dòng)很快。當(dāng)打開抽屜時(shí),首先會(huì)加速,然后慢下來(lái)。當(dāng)某個(gè)東西往下掉時(shí),首先是越掉越快,撞到地上后回彈,最終才又碰觸地板。
5.時(shí)間:一個(gè)動(dòng)作運(yùn)動(dòng)得太慢或太快都會(huì)讓人覺得怪異,在動(dòng)畫繪制中,時(shí)間用框架的數(shù)量來(lái)描述,動(dòng)畫播放后,這個(gè)時(shí)間就轉(zhuǎn)換成速度。
1.接近0.1秒,用戶認(rèn)為是同步的,感覺直接操控。
2.接近1秒,有響應(yīng),認(rèn)為認(rèn)為進(jìn)程沒有被打斷。
3.大于十秒,走神,注意力不集中,甚至抓狂。
應(yīng)用邏輯分為兩個(gè)維度,1.橫向的是瀏覽的維度。(不適合)
2.縱向的是任務(wù)流程的維度。(適合使用)
在橫向的瀏覽維度是不適合頻繁的轉(zhuǎn)場(chǎng)的。也有一些方法幫助我們?cè)跊]有轉(zhuǎn)場(chǎng)的時(shí)候解決內(nèi)容多的問題。
1. 分段按鈕和TAB
2. 撥選器
3. 滾動(dòng)自動(dòng)刷新
4. 導(dǎo)航隱藏
5. 沉浸瀏覽
1. 分段按鈕和TAB
頁(yè)面信息過多需要進(jìn)行再次過濾或者切換模式類別,分段按鈕在保持頁(yè)面基本空間不變的情況下,可以有效的過濾信息。
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)展開
有效避免頁(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)一步,我們將開發(fā)更新方式來(lái)展現(xiàn)這些內(nèi)容。就像被迅速接納的觸摸操作,手勢(shì)正也變得越來(lái)越重要。正因如此,我們需要讓用戶在應(yīng)用中擁有位置感,轉(zhuǎn)場(chǎng)在此之中會(huì)變得尤為重要。
本文地址:http://irelandcustomcontracting.com/tutorial/id1327.html
您可能還喜歡
- 關(guān)于第三方注冊(cè)和本地注冊(cè)的選擇
- 8大網(wǎng)頁(yè)前端界面必備jQuery插件
- 掌上指路標(biāo) —– APP架構(gòu)與導(dǎo)航設(shè)計(jì)
- 時(shí)尚電商網(wǎng)站交互分析
- 軟件推薦為移動(dòng)設(shè)計(jì)而生-Justinmind
- TGideas實(shí)例:加載,不只是少一點(diǎn)點(diǎn)
- 網(wǎng)頁(yè)設(shè)計(jì)中引人入勝的引導(dǎo)頁(yè)設(shè)計(jì)
- 體驗(yàn)新版Apple AppStore ——App設(shè)計(jì)從
- 確認(rèn)按鈕在左邊,取消按鈕在右邊?
- 交互設(shè)計(jì)從登錄開始
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏