移动端交互优化问题(一)

1、移动web开发和PCweb开发,有哪些不同?

通过MVC分析,

M(HTML):移动开发会关注很多meta标签,通过meta标签来定制行为样式;

V(CSS):移动开发关注移动设备分辨率适配;

C(javascript):交互优化、性能优化等;



2、交互优化、性能优化的区别

性能优化:更快

主要通过压缩代码、文件合并、后台直出等方法切实改变响应速度;

交互优化:更好用

通过替代方案改变用户感知到的响应速度

结合移动设备特点,提供更有针对性更好用的体验



3、交互优化场景


场景一:移动端click点击事件有300ms延迟

原因分析:

PC网页没有做移动端分辨率兼容,移动端常使用放大缩小的方案是双击,需区分单击双击,此时设置300ms延迟,300ms内单击两次为双击。

解决方法:

引入移动端框架如zepto,用tap事件代替click

tap:不是原生事件,通过touchstart\touchmove\touchend三个原生事件来模拟tap事件;

基本条件:

a、从触摸到离开时间间隔短;

b、从起点到终点的距离小

点击态:给用户明确的点击反馈,提升用户体验

方案1:使用:active伪类 (不推荐)

缺点:滚动的时候会触发样式

方案2:通过js原理来添加或者移除active样式(推荐)


移动端交互优化问题(一)_第1张图片


场景二:移动端滚动问题

全局滚动:滚动条在body节点或更顶层

局部滚动:滚动条在body下的某一个dom节点上

Part1 :实现弹性滚动效果

原因:

ios系统中:

全局滚动:默认支持;

局部滚动:默认没有滚动条,且滑动起来干涩

解决办法:

ios的局部滚动使用弹性滚动效果,只需要将属性挂在body下,


移动端交互优化问题(一)_第2张图片

Android版本:

版本较多,表现各异,默认没有弹性滚动效果

-webkit-overflow-scrolling默认浏览器不支持,Android版chrome支持

Part2: ios的出界

触发出界的原因:

全局滚动:滚动到页面顶部(底部)时候继续向下(向上)滚动,就会出现;

局部滚动:滚动到页面顶部时,手指离开停下,在继续向下滑动,就会出现;

解决方案:

局部滚动:使用ScrolllFix,页面固定区域禁止touchmove默认事件;


移动端交互优化问题(一)_第3张图片

全局滚动:把全局滚动改为局部滚动;

Andriod下只使用全局滚动;

流畅滚动总结:

1、body上加上webkit-overflow-scrolling:touch

2、ios尽量使用局部滚动

3、ios引进ScrollFix避免出界

4、Android下尽量使用全局滚动代替

1)尽量使用overflow:auto;

2) 使用min-height:100%代替height:100%;

5、ios下带有滚动条且position:absolute的节点不要设置背景色


场景三:键盘定制

定制软键盘样式:可以通过配置input节点的type属性来实现

1)纯粹输入数字:

2)输入数字加符号:

3)让键盘右下角出现搜索按钮:

用form表单包围起来,在onsubmit事件里面阻止默认行为

4、使用pattern属性设置纯数字;

其他pattern属性值并不支持

定制软键盘行为:可以通过配置input节点的autocapitalize、autocorrect属性

1)输入英文用户名首字母自动大写的问题:通过autocapitalize="off"关闭首字母大写

2)自动纠错的问题:autocorrect=“on”和autocorrect=“off”

兼容性问题:

ios基本都支持;

Android不同版本情况不一样

你可能感兴趣的:(移动端交互优化问题(一))