2018-06-28 优秀交互分析

优秀交互分析#

1

todo_concept_iphonex_30fps.gif

1.1 卡片的预览样式到展开的过度动画：通过向上的拖拽来表示展开，向下拖拽来实现缩小。
1.2 添加内容的页面切换通过点击加号来过渡，并且把加号展开来引导用户完成之后点击，之后再缩小，视觉引导到位。
1.3 对于完成内容的实现，进度条直接给出增长的动画效果，直观。

2

iphonex_calendar_demo.gif

2.1 查看日历详情内容通过向上拖拽展开，视觉效果显示为最顶层，背后的日历层缩小，视觉上突出内容列表。
2.2 查看详情的内容为从下方渐入，覆盖整个屏幕，吸引用户焦点，关闭为向下渐出。
2.3 日历中不同的时间点击切换，会根据时间先后来显示向上滚动还是向下滚动。

3

iphonex_travel_demo.gif

3.1 也是一个卡片式内容导航，展开方式向上拖动。
3.2 展开之后的详情内容展开是通过点击之后，从右向左的一个滑动切入来实现。
3.3 搜索功能是全屏展开，并非是在当前页面弹出键盘，吸引用户处理的焦点，减少分心的情况。

maps_concept_iphonex_f.gif

总结：
1、整体交互过渡动画设计中，从内容列表到详情展开的方式是一致的。
2、充分利用上下滑动来实现展开和缩回的操作效果，此类手势非常符合人类的原始认知，降低用户的操作负担。
3、对于操作，浏览内容的页面，都被设计成单一主题的内容，方便用户沉浸式的进行体验。
4、页面若有不同层级的动画变化，通过延迟跟进的过渡效果来实现这种层次感，而不是使用同时变化。