开发眼中的一些前端交互优化
2017-01-03 21:31
477 查看
一、移动web开发与PCweb开发有哪些不同?
首先一点就是性能:手机端的性能,要求更高;![](http://i.imgur.com/0yMWEqi.png)
M中有很多meta标签;V中的css有很多屏幕适配;C中的交互优化与性能优化;
交互优化与性能优化的差别
![](http://i.imgur.com/b8fYJkT.png)
系统真的快于用户感觉很快,是两码事;交互优化是更多的根据用户的实际感受来优化。
![](http://i.imgur.com/LEouytr.png)
1. 交互优化 – 点击事件
如下场景:延时,卡顿;![](http://i.imgur.com/C4Ak20G.gif)
根本原因:默认点击有300ms延迟:有很多pc网页没有做移动端分辨率兼容,需要放大缩小来浏览,则简单暴力用双击300ms以内来决定放大缩小。所以单击的时候会有延迟
![](http://i.imgur.com/pNkehje.png)
移动web优化之tap事件替代click
![](http://i.imgur.com/bE03EVo.png)
移动web优化之添加点击状态
![](http://i.imgur.com/84SQCTA.png)
2. 交互优化 – 滚动的交互优化
基本概念:全局滚动与局部滚动![](http://i.imgur.com/nbblpKP.png)
在ios系统中,全局滚动是默认支持的,局部滚动:默认没有滚动条,而且滚动起来比较干涩;
如何让局部滚动具有全局滚动这么流畅的效果呢?
![](http://i.imgur.com/ZBmkwQc.png)
子节点可以继承这个属性;
那么在Android上呢?
![](http://i.imgur.com/gOdmr5s.png)
出界的情况
在滚动的时候,滚到边界之后,继续滚动,会有黑边出来;![](http://i.imgur.com/yt46FQt.png)
如何解决出界的问题呢?
在iOS中,可以使用ScrollFix组件来结局,其核心的代码如下;
![](http://i.imgur.com/kGE1JO2.png)
对于局部滚动,页面上有一些固定的导航区域,这时候可以禁止他的touchmove默认事件;
在全局滚动,怎么样才能阻止出界呢?
![](http://i.imgur.com/QW5ksB6.png)
在android中呢?使用局部滚动,有时候是的滚动条会断裂;
![](http://i.imgur.com/aUcp52V.png)
比如一些比较常见的布局,如何实现全局滚动呢?举个例子:
![](http://i.imgur.com/WJhrqeE.png)
通过上下的设置padding值,这样就可以使用全局滚动了;
总结一下
![](http://i.imgur.com/3TBC8Wu.png)
3. 交互优化 – 键盘定制
比如我们再有一些键盘输入时,系统怎么知道我们是要数字还是英文,中文呢?如下图所示![](http://i.imgur.com/BNdbVCp.png)
这时候,我们就可以根据业务的需求,定制自己的键盘模式
1. 英文键盘
![](http://i.imgur.com/BelXFqg.png)
2. 数字键盘
![](http://i.imgur.com/zQRXweD.png)
两种不同的数字键盘,还有一种高级的配置键盘方式:
![](http://i.imgur.com/qeKe1WX.png)
3. 设置搜索框键盘
![](http://i.imgur.com/Q0YSdNW.png)
为什么还要用form表单包裹起来呢?这是因为键盘上有一个搜索按钮,当用户点击之后,我们可以处理点击的一些事件;
4. 定制键盘的行为
去掉一些首字母大写的情况;比如用户名
![](http://i.imgur.com/zY8df2Z.png)
去掉一些多余的纠错行为
![](http://i.imgur.com/7LM1S3z.png)
兼容性:样式与行为;ios基本都支持,但是android中,各种版本兼容性表现不一致,但是可以先使用,达到尖晶增强的效果;
相关文章推荐
- 前端交互开发微体验--总结了一些国内外炫酷的网站
- iOS开发:移动端与前端交互的一些基本操作
- Web前端开发一些有趣的新书
- 网站前端优化一些小经验
- 前端开发中的一些用户体验细节
- asp.net开发中的一些优化技巧
- 收集的一些轻量级非常实用的前端开发小工具
- Web前端开发一些有趣的新书
- 浅谈对前端开发时对html中一些招数的运用
- 前端开发--优化工具
- 前端开发的一些工具
- 前端开发中的一些用户体验细节
- 网站前端优化一些小经验
- 网站开发WEB前端高性能优化之JavaScript优化细节
- 网站开发WEB前端高性能优化之JavaScript优化细节
- 前端开发中一些常用技巧总结
- Web前端开发一些有趣的新书
- 网站开发WEB前端高性能优化之JavaScript优化细节
- 网站开发WEB前端高性能优化之JavaScript优化细节
- 【随笔】近期前端开发中IE6的一些诡异神奇bugs