澳门新浦京8455com网站交互、开发方式和前端框架介绍

这里是结合我的一些体会,写给前端工程师、产品经理和设计师的一封信,当然不是情书~

产品流程

时间: 2019-04-15阅读: 309标签: 交互

规范

需求

这个世界唯一不变的可能就是变化,历史的车轮滚滚向前,它不会因任何人的消极缓慢而停止。时代抛弃你时,连一声再见都不会说。从最开始的Javascrpit、到后来的Jquery、(ExtJs、EasyUI、MiniUI)、Bootstrap、Layui,再到如今的mvvm框架(Vue.js、Angular.js、React.js),整个前端的发展趋势一直在改变。

理论上在项目启动初应该根据项目制定一系列的规范,比如:

干什么,用户群体,什么风格,什么样子,网校风格还是新式绚丽的,怎么绚丽,需要什么模块。

就拿Jquery来说,在Dom操作领域无疑是一代霸主,它击败了所有Dom领域的竞争对手,却输给了时代,mvvm框架的出现,让它顿时黯然失色。这不由得让我想起大润发。大润发创始人离职时说:战胜了所有对手,却输给了时代。大润发在零售行业是一个号称19年不关一家店的传奇商场。在商场这个领域里,没有任何人能打败它,包括沃尔玛/家乐福,但是很可惜他败给了这个时代,被阿里巴巴收购,高层集体走人。

颜色色值

-产品经理的任务。

据说在程序员界有那么一条鄙视链:每一个程序员应该都听说过程序员鄙视链,做c的看不起做c++的,做c++看不起做java的,做java看不起做.net的,然后这些人都看不起搞PHP或前端的,可以说,前端程序员应该处于程序员鄙视链的底端。如果你看了以上这些惨绝人寰的鄙视链之后,仍然没有击倒你想要做程序员的心,那我必须提醒你一件最重要的事:先去交一个女朋友,再来学写程序;因为一旦你成为软件工程师之后,就交不到女朋友了。

通用组件

研究其他网站,看怎么做更吸引人。

早期的前端俗称美工、切图仔,每天的工作就是切图、写写html、写写css。如今前端变得越来越重,早已不复当年,各种新技术日新月异、层出不穷,前端要学的东西太多,其学习的难度丝毫不低于后端。最近这几年,前端的发展实在太快。Node.js的出现,更是将前端的发展提升到了一个新的境界。Node.js开启了前端模块化、组件化的进程,新技术层出不穷,各种mvc、mvvm框架也流行了起来。

通用图标

交互稿:简易的流程稿。APP首页 → 另一页面 →
另一页面,简易画/交互功能点,讨论修改。

网站交互方式

基础样式

设计稿:粗线条,按钮,输入框 →
细化,字体,宽高,等,形成设计稿。得到PSD文件。

网站交互有两种常用的方式:

单位、尺寸、字号

(prd:产品需求文档)

经典的多页面现代式的单页面

状态:滑过、按下、加载、出错等

分期完成功能:迭代

由多页面组成的站点,我们称之为多页应用,由单页面组成的站点称之为单页应用。

排期:项目启动时间,何时设计师交稿,前后端开发时间多少,何时功能预演(基本成型时),何时提测,何时上线。

在过去,许多Web后台常用UI框架,如ExtJs、EasyUI等等,通过iframe来嵌套页面,表面上看起来像单页应用,其本质其实依旧是多页应用。

通常这些规范的约束可以使我们后续在开发项目中如鱼得水~

项目Kick off:,所有过一遍,列风险点,开会,进度,文档位置。

多页Web应用(MPA)

需求评审

开发:前端需要交互稿。切图做网页;移动端/桌面端。

每一次页面跳转的时候,后台服务器都会给返回一个新的html文档,这种类型的网站也就是多页网站,也叫做多页应用。多页应用以服务端为主导,前后端混合。例如:.php文件、aspx文件、jsp文件。

当一个项目来临之际,很多产品直接就拍了整个方案,然而我认为当一个项目在产品心中有一定结论后,希望列出相关的需求并整理出文档,然后能跟设计+前端一起面对面的聊聊,首先不要认为前端只是一个执行者,借用@陈总一句话:我们需要被关注,需要参与感。

前端任务:PSD → html, css, js和接口。

特点:

当然需求的沟通不只是参与感,前端在聆听的过程中还可以占在与用户0接触的角度提一些问题,并当时还可以实时的跟设计交流一些事情,这样的前期沟通其实会对后续的开发带来你意想不到的收获,当然有时候收益是明显的,有时候收益是默默无闻的~

非单单静态页面,前端展示+后端服务+后端接口。

用户体验一般,每次跳转都会刷新整个页面页面切换慢,等待时间过长每个页面都要重新加载渲染,速度慢首屏时间快,SEO效果好(蜘蛛会爬链接)前后端糅合在一起,开发和维护效率低

确认稿的质量

定接口,点击按钮得到数据,然后展示数据:接口,请求后端,得到数据。

为什么多页应用的首屏时间快?

确认稿 –
顾名思义就是通过层层确认之后的psd稿,然而这里面的一些潜在性的问题是否有考虑呢?

前后端同步开发

首屏时间叫做页面首个屏幕的内容展现的时间,当我们访问页面的时候,服务器返回一个html,页面就会展示出来,这个过程只经历了一个HTTP请求,所以页面展示的速度非常快。

适配问题,常见于移动端的页面,是否能在不同尺寸的屏幕上良好的展现呢?

接口,模拟数据;格式正确。

为什么搜索引擎优化效果好(SEO)?

状态问题,常见于页面逻辑很多,而没有给出相应的状态图,比如:列表为空、加载中、加载出错等

切图/html/css/js/接口

搜索引擎在做网页排名的时候,要根据网页内容才能给网页权重,来进行网页的排名。搜索引擎是可以识别html内容的,而我们每个页面所有的内容都放在Html中,所以这种多页应用,seo排名效果好。

页面数据真实性、可选性,比如:某些字段可能为空,页面是否考虑到,某些数据可能长度有限制等

和后端一起调试

为什么切换慢?

规范的问题,是否符合预期的规范,还有就是别动不动就整成19px

网站后台不是单纯html,通常是模版。

因为每次跳转都需要发出一个http请求,如果网络比较慢,在页面之间来回跳转时,就会发现明显的卡顿。

…todo

后台自动做渲染。

单页Web应用(SPA)

如果这些都没考虑那是说我给你拍回去残忍呢还是说你故意在培养我设计的能力呢?

页面html切分成模版

单页Web应用(single page web
application),简称SPA,就是只有一张Web页面的应用,是加载单个HTML
页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

用户体验

定义接口模式

单页应用程序 (SPA) 是加载单个HTML
页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript,所有的操作都在这张页面上完成,都由JavaScript来控制。

在现代互联网高速发展的前提下,我们不能只做出来,我们更应该做的更好~

一起调试,查看接口数据是否正确。

单页应用开发技术复杂,所以诞生了一堆的开发框架:Angular.js、Vue.js、React.js。

我认为用户体验就体现在我们身边,比如早上买粥时,老板会提前所粥盛好,就等你付钱直接拿走,这样可以缩小我们等待的时间,我认为这就是体验。然而我们在项目中也常常遇到体验,比如:

提测

单页应用,前后端分离,各司其职,服务端只处理数据,前端只处理页面(两者通过接口来交互)。

在移动端有手机号输入的文本框,我们给一个聚焦就直接为数字键盘,且最大长度为11的

预演/冒烟:不是很完美,但是已经可以让别人看了,心里有底,是个什么东西。

单页应用的优点

在移动端有搜索框的地方,我们给这个框加上待定代码使其在聚焦文本框时,手机键盘右下角显示的是搜索按钮


用户体验好,就像一个原生的客户端软件一样使用,切换过程中不会频繁有被“打断”的感觉。前后端分离,开发方式好,开发效率高,可维护性好。服务端不关心页面,只关心数据;客户端不关系数据库及数据操作,只关心通过接口拿到数据和服务端交互,处理页面。局部刷新,只需要加载渲染局部视图即可,不需要整页刷新。完全的前端组件化,前端开发不再以页面为单位,更多地采用组件化的思想,代码结构和组织方式更加规范化,便于修改和调整。API共享,如果你的服务是多端的(浏览器端、Android、iOS、微信等),单页应用的模式便于你在多个端共用
API,可以显著减少服务端的工作量。容易变化的 UI
部分都已经前置到了多端,只受到业务数据模型影响的
API,更容易稳定下来,便于提供更棒的服务。组件共享,在某些对性能体验要求不高的场景,或者产品处于快速试错阶段,借助于一些技术(Hybrid、React
Native),可以在多端共享组件,便于产品的快速迭代,节约资源。

在移动端由于文本框聚焦问题,我们往往要依赖代码让其在获得焦点时主动的把文本框移动到用户的最佳可视范围

> 桌面考虑浏览器兼容

单页应用的缺点

在pc端,有文本框的时候,我们会优化考虑是否需要让用户使用ctrl+enter提交

> 移动端可以放心使用html5特性

首次加载大量资源:要在一个页面上为用户提供产品的所有功能,在这个页面加载的时候,首先要加载大量的静态资源,这个加载时间相对比较长;对搜索引擎不友好:因为界面的数据绝大部分都是异步加载过来的,所以很难被搜索引擎搜索到。开发难度相对较高:开发者的JavaScript技能必须过关,同时需要对组件化、设计模式有所认识,他所面对的不再是一个简单的页面,而是类似一个运行在浏览器环境中的桌面软件。兼容性:单页应用虽然已经很成熟了,但是都无法兼顾低版本浏览器

在有表单的情况,总是会考虑让用户按回车时响应提交命令、或者进入下一个表单项的操作

表1.1-单页应用和多页应用对比:

在任何考虑ctrl快捷键的时候都要考虑mac上使用command替换方案

比较点

只要有异步查询处理就要考虑到加载中、加载成功、加载出错的情况,并且要通过断网测试

多页应用模式MPA

所有js操作的按钮要考虑到js绑定前点击问题和者用户按ctrl点击问题

单页应用模式SPA

应用构成

甚至我认为发邮件时写日期格式为:12-19(周五)也是种用户体验,体验就在我们身边,并且体验不只是前端要考虑的事,产品和设计都应该考虑,让我们共同努力使项目做的更好。

由多个完整页面构成

内容转自前端小武!

一个外壳页面和多个页面片段构成

跳转方式

页面之间的跳转是从一个页面跳转到另一个页面

页面片段之间的跳转是把一个页面片段删除或隐藏,加载另一个页面片段并显示出来。这是片段之间的模拟跳转,并没有开壳页面

跳转后公共资源是否重新加载

URL模式

#page1

#page2

用户体验

页面间切换加载慢,不流畅,用户体验差,特别是在移动设备上

页面片段间的切换快,用户体验好,包括在移动设备上

能否实现转场动画

无法实现

容易实现(手机app动效)

页面间传递数据

依赖URL、cookie或者localstorage,实现麻烦

因为在一个页面内,页面间传递数据很容易实现

搜索引擎优化(SEO)

可以直接做

需要单独方案做,有点麻烦

特别适用的范围

需要对搜索引擎友好的网站

需要兼顾低版本浏览器的网站

对体验要求高的应用,特别是移动应用。

管理系统

开发难度

低一些,框架选择容易

高一些,需要专门的框架来降低这种模式的开发难度

CSS和JS文件加载

每个页面都需要加载自己的CSS和JS文件

整个项目的CSS和JS文件只需要加载一次

页面Dom加载

浏览器需要不停的创建完整的DOM树,删除完整的DOM树

浏览器只需要创建一个完整的DOM树,此后的伪页面切换其实只是在换某个div中的内容

页面请求

所有页面请求都是同步的——客户端在等待服务器给相应的时候,浏览器中一片空白

所有的“伪页面请求”都是异步请求——客户端在等待下一个页面片段到来时,仍可以显示前一个页面内容——浏览器体验更好

HTML页面数

项目中有多个完整的HTML页面

整个项目中只有一个完整的HTML页面;其他HTML文件都是HTML片段。

说明:现在除了一些电商网站,其实已经很少有系统需要去兼容低版本的浏览器,大部分是IE9以上的浏览器。而用户想要拥有更好的上网操作体验,就不得不选择高版本的浏览器。如果不需要考虑SEO的项目,建议采用单页应用的开发方式,因为这样可以前后端完全分离,提高开发效率,用户体验只是其次。

前后端分离的开发模式

前端端分离的开发模式基本流程通常如下:

项目立项需求分析服务端的工作需求分析数据库设计接口设计(有时候也需要前端参与其中)接口开发前端的工作需求分析写界面和功能通过接口和服务端交互

前后端分离的开发方式,无论是多页应用还是单页应用都可以采用,但是多页应用采用前后端分离模式的情况通常比较少。前端的主要工作是什么?主要负责MVC中的V这一层;主要工作就是和界面打交道,来制作前端页面效果;

前端三大开发框架

单页应用开发其实是比较复杂的,需要一定的技术支撑。所以一些前端框架应运而生。Vue.js和Angular.js、React.js
一起,并成为前端三大主流框架。

Angular

09年诞生Google它的目的就是让我们开发单页应用变得更方便了它主要为前端带了mvvm开发模式,这是一个伟大的变革mvvm:数据驱动视图,不操作DOM

React

Facebook公司自己开发的一个Web框架组件化

Vue

Vue作者:尤雨溪早期由个人开发,在国内很火Vue借鉴了Angular和React之所长,属于后起之秀

前端三大主流框架各有千秋,对于规模不大的前端项目来说,Vue
因其极易上手会被列出首选之位,而Angular 在快速开发大型 Web
项目上很受推崇,但仍存诸多缺陷,React则为 JavaScript
应用开发者提供新的开发方式。

如果硬是要给这三大框架一个排名,目前排名是React、Vue、Angular。从目前国内的整体行情看,一些中小企业,更青睐于Vue。作为一名开发者,我们无需纠结哪个更好,对我们而言,不同的框架或者不同的语言,它们都只是一个工具而已,是我们解决问题的工具。

Vue.js
是目前最火的一个前端框架,而React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,
当然Vue同样也可以用于进行手机App开发,需要借助于Weex,而且没有React那么强大)。

Vue.js最火,表示想要学习的人员最多,React最流行,表示目前正在使用的人最多。而Angular
的流行度已呈现明显下滑趋势。甚至有人说:“对于 Angular
2,我想我永远不会再使用。 因为它带来的问题远远多于解决的问题。
它需要丰富的知识经验来构建大型应用程序,否则总是会遇到性能问题。

如今最火热的前端需求在于移动端,而不再是 Web 。React Native
非常成功,同时它也会带动 React.js 的发展。Vue.js目前 只在 Web
前端中占据主导地位,而不会统治所有的前端领域。React
则可以在所有的前端领域中盛行。这是为什么?

因为Vue.js 未能提供替代 React Native 的可行性方案(Weex 和 Quasar
太年轻,存在碎片化并且很脆弱),伴随着 React Native 和 React.js
的爆发式增长,如果你掌握了 Web 前端的 React 和 Redux
,你将获得极大优势:只要你想,便可在几周内熟练地将 React Native
应用到移动端。

而使用 Vue.js 编写 Web 的前端人员几周就能掌握 React
Native,所以不管怎么说,学习Vue.js都是非常值得的。令人兴奋的是:”截止至目前为止,Vue在github上的start数已经超越了react,咱中国开发人员有着卓著的贡献,我非常看好Vue,也为咱中国人感到自豪!

为什么要学习流行框架(mvvm框架)

企业为了提高开发效率:在企业中,时间就是效率,效率就是金钱。而使用框架,能够提高开发的效率。提高开发效率的发展历程:原生JS

  • Jquery之类的类库 – 前端模板引擎 – Angular.js / Vue.js

在Vue中,一个核心的概念,就是让用户不再操作DOM元素,解放了用户的双手,让程序员可以更多的时间去关注业务逻辑;

增强自己就业时候的竞争力

mvvm框架能够帮助我们减少不必要的DOM操作;提高渲染效率;双向数据绑定的概念:通过框架提供的指令,我们前端程序员只需要关心数据的业务逻辑,不再关心DOM是如何渲染的了。

在Vue中,一个核心的概念,就是让用户不再操作DOM元素,从而解放用户的双手,让程序员可以有更多的时间去关注业务逻辑。

框架和库的区别

框架:是一套完整的解决方案;对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目。

框架举例:

node 中的expressJava中的spring boot

库(插件):提供某一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易切换到其它库来实现需求。例如:

从Jquery 切换到 Zepto从 EJS 切换到 art-template

来自:

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图