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

原创 2017年01月03日 21:31:42

一、移动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中,各种版本兼容性表现不一致,但是可以先使用,达到尖晶增强的效果;

版权声明:本文为小平果原创文章,转载请注明:http://blog.csdn.net/i10630226

相关文章推荐

Azure SQLServer 添加Azure Active Directory管理员

之所以写这篇博客是觉得这个配置很坑,给看到此篇文章还在踩坑的朋友指条明路。配置本身不复杂,复杂就复杂在当下azure中国正处于老portal和新portal切换之际。     因为我使用的都是reso...

CodeRush使用教程三:可视化工具Code Metrics

代码度量Code Metrics允许你在编写代码的时候测量代码编辑器中的代码度量。默认情况下,度量会以数字的形式显示在成员声明的左边,如下图所示。今天我们就一起来看看 CodeRush的其中一个可视...

从国企到阿里的面试经历(二)

读完本文需要 3 分钟。 安逸舒适是一种生活态度,挑战自己是另一种生活态度,我躁动不安的性格注定会选第二条路。突破舒适区,才有可能改变,能不能变得好,就交由给老天爷来决定。 「一入阿里深似...

从vue-cli源码学习如何写模板

vue-cli 是 vuejs 官方提供的基于 vuejs 的项目脚手架工具, 可以很快的帮助 vuejs 开发者搭建一个 startup 项目, 免去环境配置的繁琐, 开箱即用. 今天就来看下 vu...

css3布局的若干笔记总结

自己在写一些样式的时候,遇到的一些问题,顺手就记下了,多总结。1. css 图片间隙问题:解决方案:法宝一:定义图片img标签vertical-align:bottom,vertical-align:...

18个网站优化技巧

快速的页面加载对提升搜索引擎排名、网站转化率和整体的用户体验是非常重要的。网站页面的加载速度也是衡量网站性能的一个重要因素。如果网站不是以最好的性能在运行,迟缓的加载会让你在低的排名和搜索流量上花费更...

Web性能优化中的一些关键点get了吗?

##Web性能优化:Performance,数据搜集方法###浏览器新提供的performance接口精确的告诉我们当访问一个网站页面时当前网页每个处理阶段的精确时间(timestamp),以方便我们...

ECMAScript 6新特性介绍

箭头函数箭头函数使用=>语法来简化函数,在语句结构上和C#、Java 8 和 CoffeeScript类似,支持表达式和函数体。。=>`操作符左边为输入的参数,而右边则是进行的操作以及返回的值。var...

Vue.js学习 Item16 – 实现一个自定义分页组件vue-paginaiton

vue实现一个分页组件vue-paginaitonvue使用了一段时间的感触就是,我再也不想直接操作DOM了。数据绑定式的编程体验真是好。实现的一个分页组件。这里的css就不放出来了,可以看直接去gi...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)