每天记录一个看对眼的小设计、小交互。
冒昧得揣测一下设计师背后的心意,望见谅。
感谢世间所有充满创造力的大脑、所有勤劳能干的双手、还有能看见美好的眼睛。
今天分享一个旅游APP——马蜂窝旅游 APP V10.1.1 首页的设计小惊喜
【舵式拓展导航栏】
马蜂窝APP抛弃了传统的底部tab栏导航,用了舵式拓展形式的导航栏。舵式导航栏的优势在于突出核心功能——发布图文游记。另外还能够充分减小导航栏的屏占比,拓展了正文区域。
【滑动过程缩进及展开】
APP将用户滑动操作和导航栏的样式变化做了关联,多见于浏览型的页面中,例如文章、瀑布流信息等。用户在进行连续上滑手势操作时,判断用户正专注于阅读页面正文内容信息,此时将banner位进行隐藏、舵式导航栏无关的功能缩进,减少对页面的遮挡,提高用户阅读效率。
在用户进行下滑手势操作时,判断用户已经中断阅读,此时展开导航栏,将更多的后续操作选择展示给用户。在展开过程中,APP细致得将发布按钮做了一个缩小的操作,和另外两个功能按钮形成更加和谐的比例。滑至头部时,进一步展示banner位内容。滑至顶部时,和很多APP的交互一致,马蜂窝也调取了刷新页面的功能,但马蜂窝还是做了一些不一样的小惊喜,除了下拉的刷新图标动效外,此时舵式导航的首页图标也变成了“刷新”图标动效,在刷新完成后,又变回首页图标。这一套流畅的图标变化动效值得学习。