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

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

时间: 2024-10-24 10:12:29

开发眼中的一些前端交互优化的相关文章

Bootstrap开发前端 进阶(优化及与后端结合接口)总结

Bootstrap开发前端 进阶(优化与接口分析)           chang_jw 通过使用bootstrap3.3.7,html5, CSS3进行购票系统网站前端开发. 实现index,film. Cinema, certain,login, success页面并可形成关联性跳转逻辑. 一,使用Google Fonts 插件进行字体优化 文字是网页中很重要的组成部分.为文字选择一个合适的字体,能够更好的展现一个网站的个性,表达所要传递的信息. 对于font理解首先是从CSS中,如: 浏览

2017前端性能优化清单

https://github.com/Findow-team/Blog/issues/11?utm_source=tuicool&utm_medium=referral 2017前端性能优化清单 你开始使用渐进启动了么?是不是已经使用过React和Angular中tree-shaking和code-splitting两个工具?有没有用过Brotli.Zofli和HPACK这几种压缩技术,或者OCSP协议(在线证书状态协议)?知不知道资源提醒,客户端提醒和CSS containment一类的技术?

浅谈前端性能优化(移动端)

上一篇讲了PC端的部分:前端性能优化(PC端),这次继续说移动端的.相对于PC端的,移动web浏览器上有一些明显的特点:设备的屏幕小.新特性兼容性较好.支持一些比较新的HTML5和CSS3.需要与Native应用交互等.但移动端可用的CPU资源和网络资源极为有限,因此要做好移动端web上的优化往往需要考虑做更多的事情.首先在移动web的前端页面渲染中,PC的优化规则同样适用,此外针对浏览器也要做一些更细节的优化达到更好的效果.需要注意的是,并不是移动端的优化在PC端不适用,而是由于兼容性的原因,

网站前端性能优化

继前面几篇文章后再来说说老生常谈的话题,怎么样提升前端性能.文中很多取材自网络及<High Performance Web Sites>,并根据自己工作中所接触到的知识整理而成. http://hovertree.com/menu/webfront/ 1. 减少HTTP请求 终端用户响应时间80%消耗在前端,而大部分时间都是在下载页面的资源:图片,脚本,flash等等,减少请求资源简化页面设计成为了性能提升的关键.尽量合并CSS.JS及图片文件,减少HTTP请求. 2. 使用内容分发机制 使用

移动H5前端性能优化指南[转]

移动H5前端性能优化指南 米随随2015.01.23 移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB5. Mobile侧因手机配置原因,除加载外渲染速度也是优化重点6. 基于第五点,要合理处理代码减少渲染损耗7. 基于第二.第五点,所有影响首屏加载和渲染的代码应在处理逻辑

移动HTML5前端性能优化指南

(点击看大图) 移动H5前端性能优化指南[托尼托尼研究所] 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB5. Mobile侧因手机配置原因,除加载外渲染速度也是优化重点6. 基于第五点,要合理处理代码减少渲染损耗7. 基于第二.第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置8. 加载完成

转:网站前端性能优化

继前面几篇文章后再来说说老生常谈的话题,怎么样提升前端性能.文中很多取材自网络及<High Performance Web Sites>,并根据自己工作中所接触到的知识整理而成. 1. 减少HTTP请求 终端用户响应时间80%消耗在前端,而大部分时间都是在下载页面的资源:图片,脚本,flash等等,减少请求资源简化页面设计成为了性能提升的关键.尽量合并CSS.JS及图片文件,减少HTTP请求. 2. 使用内容分发机制 使用内容分发如CDN加速,使用户从离自己最近的服务器下载文件.但一般要求减少

【杂谈】BI系统的前端性能优化

近一年,由于笔者团队的一些变化,笔者开始承担一个BI系统的前端应用的维护和迭代,一年中,围绕着这个BI系统,发生了不少令人啼笑皆非和醍醐灌顶的故事.最近,终于有时间把它们一点点的沉淀写来,以文字的形式呈现出来. 首先,简单介绍下笔者维护的这个BI系统,和常规的BI(Business Intelligence)系统一样,笔者的BI系统同样可以分为三层: 数据层:这一层其实主要是ETL的过程,即将业务数据库的数据通过抽取(Extract).转换(transform).加载(Load)到新的数据库中,

web前端性能优化

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户体验,也决