iPhone手机浏览置顶的解决办法
这种一般就是顶部是有色背景,在往上滑动页面的时候,由于顶部内容要冻结,为在页面上凸显出元素的层级感,所以冻结的内容要做相应的样式调整。
这就不得不让我们先分析了解下“顶部导航”的作用及承载内容:顶部导航栏用于标示当前所在的页面名称、返回上一页面按钮的放置,一些全局操作按钮的放置、搜索等.
再如马蜂窝“我的”页面,由于不是一级页面,故该页面默认有顶部导航栏,左上角为返回按钮,右侧为全局操作,头图为地球背景,上面的大数字为旅行的国家及城市数据,让用户更具有情景代入感。当往上滑动页面时,顶部导航上的信息做了稍微调整,头像被缩小放了上去,右侧设置按钮隐藏,背景替换为模糊背景。相较于前两个应用的个人中心页变化较小。
如高德地图“我的”页面,默认展示用户信息,当往上滑动页面时,顶部出现导航栏,个人头像被放小放在左侧,右侧为全局操作“设置”按钮。
这种方式一般运用在类似首页这样的页面,第一屏一般为分类入口及运营位,第二屏以后一般为某个主题的商品或服务类展示,往往为图片加重要信息的展示形式。
苹果手机浏览网页返回后跑到最上面
如京东购物车页面往上滑动时,隐藏导航栏,沉浸式的页面浏览模式,能让单屏承载更多的内容,当往上滑动页面时说明用户想要浏览之前加入购物车的商品。
同时要尽量精简需冻结的内容信息,原则就是对下面页面中的内容一定是有必要而存在的,如果非必须则可以考虑隐掉。要尽量缩减被冻结的位置空间,留出更多的页面空间以便于用户浏览主要信息内容。
当开发同学嫌麻烦而跟你说默认是啥样,滚动时也得啥样时,你可以就本身的产品站在用户使用场景及运营需要的角度跟他解释说明这么做的原因,而不是直接拿着某某产品应用的页面说,人家就是这么做的。站在自身产品和用户的角度考虑问题显然更有说服力一些,而不仅仅只是表面的展示和交互形式。
这种一般是从默认的一种形式变为另一种形式的过程,当页面往上滑动时,由于冻结的内容较默认的变化较大,所以可认为是内容的替换。这种形式在个人中心页面运用的比较多。
上面我们说了,移动端的页面上寸土寸金,想要某种场景下展示更多的重要内容,那就必须在某些时候隐藏掉一些相对次要信息。
苹果手机总是自动返回顶端的
如当当“我的”页面,顶部模块默认展示个人信息,当往上滑动页面时,顶部导航栏位置由原来的搜索按钮被放大为搜索框冻结在顶部,引导用户去搜索“读书吧”,此种操作为特定的运营需求。
再如京东搜索商品后的结果页面,往上滑动页面时,说明用户想要浏览筛选出自己想要的商品,此时顶部导航栏区域(搜索框及辅助操作)隐藏,只冻结条件筛选项,方便用户进行精细筛选。
最近在优化一些产品的页面,某些页面用户在往上滑动的时候,想要做一些更符合用户使用场景的内容调整,在做之前,大概分析了下一些主*品的做法。
如高德地图的“附近”和马蜂窝的“首页”,页面上部分为一些分类入口及运营位,当页面往上滑动时,在筛选项滚动至页面顶部时冻结在顶部,便于用户沉浸式浏览商品及对商品的筛选。在比较自然的过渡情况下,对用户来说又像是一个全新的商品页面,转场比较自然,更容易让用户接受。
不管是在何种情况下顶部冻结的内容,都有一个相同的关键点,那就是过渡要自然,一般使用缩放、移动、渐隐渐显的方式,不会让用户感觉到明显的突兀。
添加新评论