开发眼中的一些前端交互优化

标签: 前端性能优化交互优化移动开发
1868人阅读 评论(0) 收藏 举报
分类:

一、移动web开发与PCweb开发有哪些不同?

首先一点就是性能:手机端的性能,要求更高;

M中有很多meta标签;V中的css有很多屏幕适配;C中的交互优化与性能优化;

交互优化与性能优化的差别

系统真的快于用户感觉很快,是两码事;交互优化是更多的根据用户的实际感受来优化。

1. 交互优化 – 点击事件

如下场景:延时,卡顿;

根本原因:默认点击有300ms延迟:有很多pc网页没有做移动端分辨率兼容,需要放大缩小来浏览,则简单暴力用双击300ms以内来决定放大缩小。所以单击的时候会有延迟

移动web优化之tap事件替代click

移动web优化之添加点击状态

2. 交互优化 – 滚动的交互优化

基本概念:全局滚动与局部滚动

在ios系统中,全局滚动是默认支持的,局部滚动:默认没有滚动条,而且滚动起来比较干涩;

如何让局部滚动具有全局滚动这么流畅的效果呢?

子节点可以继承这个属性;

那么在Android上呢?

出界的情况

在滚动的时候,滚到边界之后,继续滚动,会有黑边出来;

如何解决出界的问题呢?

在iOS中,可以使用ScrollFix组件来结局,其核心的代码如下;

对于局部滚动,页面上有一些固定的导航区域,这时候可以禁止他的touchmove默认事件;

在全局滚动,怎么样才能阻止出界呢?

在android中呢?使用局部滚动,有时候是的滚动条会断裂;

比如一些比较常见的布局,如何实现全局滚动呢?举个例子:

通过上下的设置padding值,这样就可以使用全局滚动了;

总结一下

3. 交互优化 – 键盘定制

比如我们再有一些键盘输入时,系统怎么知道我们是要数字还是英文,中文呢?如下图所示

这时候,我们就可以根据业务的需求,定制自己的键盘模式

1. 英文键盘

2. 数字键盘

两种不同的数字键盘,还有一种高级的配置键盘方式:

3. 设置搜索框键盘

为什么还要用form表单包裹起来呢?这是因为键盘上有一个搜索按钮,当用户点击之后,我们可以处理点击的一些事件;

4. 定制键盘的行为

去掉一些首字母大写的情况;比如用户名

去掉一些多余的纠错行为

兼容性:样式与行为;ios基本都支持,但是android中,各种版本兼容性表现不一致,但是可以先使用,达到尖晶增强的效果;

2
0

猜你在找
【套餐】Hadoop生态系统零基础入门
【套餐】嵌入式Linux C编程基础
【套餐】2017软考系统集成项目——任铄
【套餐】Android 5.x顶级视频课程——李宁
【套餐】深度学习入门视频课程——唐宇迪
【直播】广义线性模型及其应用——李科
【直播】从0到1 区块链的概念到实践
【直播】计算机视觉原理及实战——屈教授
【直播】机器学习之凸优化——马博士
【直播】机器学习&数据挖掘7周实训--韦玮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:745615次
    • 积分:11173
    • 等级:
    • 排名:第1405名
    • 原创:313篇
    • 转载:54篇
    • 译文:4篇
    • 评论:216条
    博客专栏
    最新评论