好看的移动端H5应用效果及样式借鉴

本文探讨了支付宝、饿了么、网易新闻及淘宝等应用中的UI交互设计细节,包括页面切换方式、动画效果、回到顶部按钮的设计以及导航栏的变化等,为开发者提供灵感。

支付宝

  1. 页面切换采用从下往上滑动,而且不是从底部滑上来,而是距离顶部大概200px的位置快速滑上来,感觉很自然。
  2. 缓冲的效果,就是一个圆圈不停转动的效果,作为一个遮罩层,等内容加载完,遮罩层隐去,内容浮现。
  3. 回到顶部按钮。一滚动页面右下方就出现回到顶部按钮。一回到顶部按钮消失。
  4. 导航栏在幻灯片下面。一开始滚动页面的时候导航栏随之移动,当导航栏触碰到顶部的时候导航栏就不动了。有一个新的css3属性可以方便支持这个效果,position:sticky。目前为了兼容性可以使用js计算。
  5. 展开合上的箭头有3d的翻转效果,参考阿里去啊的展开,感觉很不错。
  6. 深刻了解BFC。阿里的产品基本都遵循这个原理,不会因为内容还未缓冲就出现坍塌等效果。

饿了么

  1. 页面内容出现前在内面中做一些动画效果,等到内容加载完成后再呈现内容。
  2. 弹层从中心开始从小变大。
  3. 往下滚动不出现回到顶部按钮,向上滚动的时候出现回到顶部按钮,而且按钮是从下往上上来的。往下滚动的时候回到顶部按钮又会下去。
  4. 颜色比较鲜艳,让人看了比较愉悦,看上去年轻化。
  5. 搜索的放大镜图标的出现效果,很动感。弹层出现的也很动感。

网易新闻

  1. 下拉刷新的效果,一开始刚进入时会自动刷新的效果。
  2. 数据的标准化,在一开始就会有固定宽高的轮廓,然后会有相应内容填充进去。我不知道是传过来的数据结构已经遵循了一些规则还是没有规则的数据传过来后前端进行拼装的。
  3. 左滑右滑一起使用。点击左键左滑,点击右边右滑。滑动要快速。
  4. 点击按钮的时候按钮会变色。
  5. 展开合上按钮,点击展开之后延迟一会儿再展开,点击合上立即合上。展开和合上的效果不一定要一样。

淘宝

  1. DOM结构已经加载出来了,但下面的数据是滚动之后再加载的。跟网易新闻差不多的效果。
  2. 微淘里面评论的效果,感觉很舒服。
  3. 导航栏选择的时候会移动(当导航项比较多的时候)。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值