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

原创 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

大数据浪潮下_前端工程师眼中的完整数据链图

原文链接 5月17日云栖精选夜读:大数据浪潮下,前端工程师眼中的完整数据链图 yq传送门 2017-05-17 17:53:43 浏览141 评论0 大数据 架构 jav...

移动端开发者眼中的前端开发流程变迁与前后端分离

写在最开始 这是一篇面向移动端开发者的科普性文章,从前端开发的最初流程开始,结合示范代码,讨论开发流程的演变过程,希望能覆盖一部分前端开发技术栈,从而对前端开发的相关概念形成初步的认识。 本文会提...

全栈工程师眼中的HTTP-笔记-Web优化:前端,后台,前后端交集BigPipe

Web优化方向:浏览器端,服务器端,前后端交集

移动端开发者眼中的前端开发流程变迁与前后端分离

写在最开始 移动端与前端的区别 前端开发的混沌时代 后端 MVC MVC 方案实现 MVC 的缺点与改进 前端只写 Demo HTML 模板 后端 MVC 架构总结 AJAX 与前端 MVC 前后端分...

移动端开发者眼中的前端开发流程变迁与前后端分离

写在最开始 这是一篇面向移动端开发者的科普性文章,从前端开发的最初流程开始,结合示范代码,讨论开发流程的演变过程,希望能覆盖一部分前端开发技术栈,从而对前端开发的相关概念形成初步的认识。 ...

开发工具的使用与WEB项目的建立【武理解析前端用户交互系统】

开发工具为IDEA 2016.2.5,使用校内邮箱即可免费申请到IDEA的学生版授权。 接下来使用IDEA新建一个web项目。在菜单栏点击File→new →project,出现下图说所示界面 ...

SSH网站开发实录(5)登录模块与前端交互SpringMVC + Spring +Hibernate

接着上一节的讲 上一节把登录的后台逻辑写好之后这一节学习,如何与前端界面交互...

iOS开发:移动端与前端交互的一些基本操作

1.UIWebView与前端的交互中,常需要获取html页面的内容、标题等信息,可以在UIWebViewDelegate的 - (void)webViewDidFinishLoad:(UIWebVie...

IOS 开发 OC(Object_C)与前端页面JS(JavaScript)交互整理(一)

IOS开发OC与JS交互
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:开发眼中的一些前端交互优化
举报原因:
原因补充:

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