優(yōu)秀交互分析#

todo_concept_iphonex_30fps.gif

1.1 卡片的預(yù)覽樣式到展開的過度動畫：通過向上的拖拽來表示展開，向下拖拽來實現(xiàn)縮小。
1.2 添加內(nèi)容的頁面切換通過點擊加號來過渡，并且把加號展開來引導(dǎo)用戶完成之后點擊，之后再縮小，視覺引導(dǎo)到位。
1.3 對于完成內(nèi)容的實現(xiàn)，進度條直接給出增長的動畫效果，直觀。

iphonex_calendar_demo.gif

2.1 查看日歷詳情內(nèi)容通過向上拖拽展開，視覺效果顯示為最頂層，背后的日歷層縮小，視覺上突出內(nèi)容列表。
2.2 查看詳情的內(nèi)容為從下方漸入，覆蓋整個屏幕，吸引用戶焦點，關(guān)閉為向下漸出。
2.3 日歷中不同的時間點擊切換，會根據(jù)時間先后來顯示向上滾動還是向下滾動。

iphonex_travel_demo.gif

3.1 也是一個卡片式內(nèi)容導(dǎo)航，展開方式向上拖動。
3.2 展開之后的詳情內(nèi)容展開是通過點擊之后，從右向左的一個滑動切入來實現(xiàn)。
3.3 搜索功能是全屏展開，并非是在當(dāng)前頁面彈出鍵盤，吸引用戶處理的焦點，減少分心的情況。

maps_concept_iphonex_f.gif

總結(jié)：
1、整體交互過渡動畫設(shè)計中，從內(nèi)容列表到詳情展開的方式是一致的。
2、充分利用上下滑動來實現(xiàn)展開和縮回的操作效果，此類手勢非常符合人類的原始認(rèn)知，降低用戶的操作負(fù)擔(dān)。
3、對于操作，瀏覽內(nèi)容的頁面，都被設(shè)計成單一主題的內(nèi)容，方便用戶沉浸式的進行體驗。
4、頁面若有不同層級的動畫變化，通過延遲跟進的過渡效果來實現(xiàn)這種層次感，而不是使用同時變化。