【专业技能】前端开发眼里的页面

拿到效果图时,有这么几步,就我了解的情况做一下分享,不一定全部都是科学,但可以部分借鉴。

我先说一下,熟练后拿到效果图时这样的一个状态:

http://imcn.me/html/y2012/9871.html/comment-page-1

拿到效果图时,有这么几步,就我了解的情况做一下分享,不一定全部都是科学,但可以部分借鉴。 1. 拿到效果图先是分析: 分析什么,分析上下游的相关情况。先说上游设计和产品,如果设计有相关的文档,则仔细通读文档,就文档中相关业务流程,页面跳转,交互行为,设计细节相关清楚不清楚的问题找设计产品了解确认清楚,如果必要需要邮件确认,免得其后扯皮说,当时没说清楚,当时说的不是这,怎么怎么的。如果可能还需要开会,让相关把关人与会参与,比如项目经理,技术总监。 业务流程就是直观的就是需求设计里边的流程图,比如注册,电话->成功->失败等等,但这不是最终的页面,只是流程,然后就要跟流程对页面,哪个页面对应流程中的那个节点,页面的跳转,跳转的可能,依赖次序,以及重复页面的梳理等等。 然后在分析下游后台,页面的数据是否可以顺利的实现,后台接口数据提供的日期,大概约定等等。是否有前台业务逻辑判断的可能,是否前台需要更复杂简单的处理。是否在评审中有遗漏的细节,需要重新评估,或者直接否决,等等。 分析这些的目的就是:这些页面交给下游后台时会出现的一些问题,防止页面交出去以后,有些链接的去向不明,数据不正确,以及少页面,漏模块等等情况的发生。 2. 写页面之前的需要了解的2种方式: 当然切的时候有2种方式,一部分前端可能是第1种方式,就是把psd转换成html页面,交给后端,进行数据的完善。其实这种方式有几个问题: a. 页面的结构划分没有决定权,比如,有些页面在后端来说,可以通过后台技术来进行一定的拆分组合。但是纯html页面不能实现这个功能,要是不能合理的拆分,有些资源的调用,或后期页面的修改有很大的麻烦。 b. 页面的数据的结构状态,因为设计交与的页面状态是一个理想的状态,但是页面至少有三种状态,比如,数据最少的情况,数据最多的情况,以及数据刚好的状态,而设计给你的是数据刚好的状态,其它的如果项目紧设计人员少,那就需要自己脑补,如果有真正的效果图出来,那还好有参考的依据。否则,后期在测试部门回溯的时候也是比较麻烦。 c. 任务完成的不连续性,因为有些ajax的交互发生,需要重新的渲染页面,这样结构或样式可能会发生改变,如果是纯html页面,那只有等后端完成数据状态之后,在去完成相关ajax的相关模块,或者是等后端自己完成ajax,然后出现问题在找你,等等的情况,都加大了合作之间出现bug的风险或可能。

鉴于以上情况,我个人建议利用后端语言的优势来写静态的数据结构或者直接输出动态的最终view层页面。这样在前端层的页面控制权完全交与前端来负责,但是这样得具备一个条件: 对前端的技术储备有大大的要求,必须了解一门后端语言为基础,了解ajax的整个交互过程或一些常见问题的处理。 当然,说起来很玄乎,其实这些东西都不难。比如流行的web后端语言php,以及php相关的一些框架提供的view模板,可能说,有一定的编程基础或静下心来的决心,少花点时间基本都没有问题。 这种方式也有一个缺点,就是小型的活动页面,或者一些专题页面,如果完全套用这种方式,可能盘子太大,不适合。用纯html的页面反而会更快。

3. 然后才是真正的动手写页面切图: 写页面也是需要一个过程,从最初的写出基本的效果到解决常见浏览器的兼容bug到最后兼顾页面复用性,健壮性以及扩展性:

a. 页面的健壮性:

这个怎么说呢,这个前面已经提过,UI出的psd图是一个页面理想状态下的形态,而页面有数据,会出现两种极端状态,一,数据极多,二,数据极少。所以在页面排版的时候,考虑这两种状态,以免数据太多的时候,撑破页面,以免数据太少,页面部分元素会出现收回去状况,这样的页面会出现一些细节没有处理的常规失误。

b. 页面的扩展性:

可以说,这个也是第一条的扩充,扩展性的意思为,在页面的模块很少的时候,要考虑未来添加子模块或兄弟模块的状态,为将来留好html接口。在将来添加模块的时候,尽可能少的去动原来的html结构,使html易于扩展。这个具体情况,具体处理。一般的处理就是如果有可能会有兄弟元素就多套一层,为后台添加兄弟元素尽可能的不影响现有结构。这个点乍看起来很小,其实如果扩充到整个项目,多个项目就有可观的效应了。

c. 页面的复用性:

由于页面中风格相似的模块很多,或页面中与页面中相似的模块很多,但是总会有那么一丁点的差异,这是设计师认识世界然后在表达世界的产物,我们理解设计师的职业操守,所以只能在前期做一些技术处理,免得后期问候某岗位的亲人。具体的有的模块高点有的模块低点,还有结构完全一样,但底纹不一定。这样建议把表现形式的样式放在一个class中,物理属性放在一个class中。还有就是装饰性的图片决不不以明标签的方式插入到页面中,内容式的内容绝对以<img src="" />的方式插入中去,以免将来多主题,多语言版本的实现。

可能有时候还有的情况是,页面完全切不出来,html,css完全不知道怎么写了。但基础掌握良好,概念基本清楚。这时候我个人建议应该是吸收别人好的东西时候到了,也是个人水平瓶颈的时候,需要在坚持一下完全的突破。具体的方式就是,用firebug去分析先有的bat各个项目的各个页面,总有你可以借鉴的地方。 4. 切完页面之后: 本着职业操守或一个有责任的前端,需要进一步分析各个页面的结构是否在原来加班的时候,或问候亲人的时候没有考虑完全的,或者原来的实现方式不是太好,需要进一步完善,有性能优化或结构优化的可能。

转自 http://www.cnblogs.com/jikey/p/4034353.html

原文发布于微信公众号 - 程序员互动联盟(coder_online)

原文发表时间:2015-07-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏PHP在线

2018年值得关注度的语言、框架和工具

前端框架:Angular 2,Vue.js,Bootstrap,LESS / SASS。 Web Web平台最近取得了两个重大进展——Web Assembly...

35112
来自专栏IT大咖说

Metrics:让微服务运行更透明

摘要 让微服务运行状态清晰可见。 Metrics是什么 直译是“度量”,不同的领域定义有所区别,在微服务领域中的定义: “对微服务的某个指标给予一个可量化程度的...

43412
来自专栏无原型不设计

关于流程图设计,你需要Get的几点必备知识

流程图(Flow Chart)这个概念对很多人来说并不陌生,但如果让你定义或者举例说明什么是产品流程图,恐怕还是有难度的。或许诸如“用户体验”、“交互设计”、...

3065
来自专栏云瓣

使用React全家桶搭建一个后台管理系统

引子 学生时代为了掌握某个知识点会不断地做习题,做总结,步入岗位之后何尝不是一样呢?做业务就如同做习题,如果‘课后’适当地进行总结,必然更快地提升自己的水平。 ...

4649
来自专栏腾讯移动品质中心TMQ的专栏

解放程序猿(媛)的双手---iOS UI自动化测试

前言 随着移动互联网时代的蓬勃发展,移动终端的自动化测试也在业界日益活跃,总体来看在Android平台上的自动化工具和实践比较多,但是说到iOS平台无论从自动化...

7548
来自专栏python学习指南

python爬虫(一)_爬虫原理和数据抓取

本篇将开始介绍Python原理,更多内容请参考:Python学习指南 为什么要做爬虫 著名的革命家、思想家、政治家、战略家、社会改革的主要领导人物马云曾经...

3446
来自专栏媒矿工厂

编码,打包,CDN交付和视频播放器端的延迟优化

在本系列上一篇文章《定义和测量延迟》中,介绍了为什么延迟是OTT传输的一个问题以及如何测量端到端延迟中不同传输步骤所占的延迟比重。 本文接下来介绍可能的延迟优化...

2824
来自专栏林喜东的专栏

你的账号安全吗?

账号安全无小事,近些年持续不断爆出的安全事件,有很多低级错误其实都是拥有一个健壮的账号体系可以避免的;多次听闻后曾写一写账号安全相关的东西,但直...

1504
来自专栏人工智能LeadAI

python爬虫学习:电商数据分析

通常我们在使用爬虫的时候会爬取很多数据,而这些数据里边什么是有用的数据,什么是没用的数据这个是值得我们关注的,在这一篇文章里,我们将通过一个简单的爬虫,来去简单...

2562
来自专栏云时之间

python爬虫学习:电商数据分析

通常我们在使用爬虫的时候会爬取很多数据,而这些数据里边什么是有用的数据,什么是没用的数据这个是值得我们关注的,在这一篇文章里,我们将通过一个简单的爬虫,来去简单...

6587

扫码关注云+社区