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

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

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

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开发者的五个建议

1374
来自专栏Web项目聚集地

「SSM实战」从零开发内容管理系统(一)

本课程将从零开始,手把手带大家完成项目开发,有助于掌握编码思维、经验与技巧,并拥有一个属于自己的线上作品。本课程并非从Java语法开始的,共20节课从零讲解此项...

642
来自专栏编程

基于Node.js开发跨平台窗口程序

发表日期: 2017.12.26 分类: Code Tags: Node.js JavaScript 跨平台 Electron 时间很快,已经是学期末了,这学期...

2235
来自专栏网络

学web前端开发写给新手的建议,超实用!

如今我们使用的互联网,客户端与服务器端的交互无时无刻不在发生。比如我们在浏览器打开网页,浏览器就是客户端,将网页数据发过来的也就是服务器。其实服务器,并没有什么...

1829
来自专栏互联网杂技

产品容错性设计原则

随着互联网的飞速发展,越来越多产品尤其是2C类产品更加注重用户体验,其中错误对用户体验的影响是灾难性的,在此我总结出一些容错性设计原则供大家参考和探讨。 ? 一...

4239
来自专栏地方网络工作室的专栏

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述 前言 2016年,我写了一系列的 VUE 入门教程,当...

1869
来自专栏王二麻子IT技术交流园地

一、VueJs 填坑日记之基础概念知识解释

概述 在最开始听说vuejs这个词是在2016年,当时天真的认为自己是个后端开发工程师不需要学习太多的前端知识,不过紧接着在2017年在公司就用到了vuejs。...

1848
来自专栏跟着阿笨一起玩NET

C#网络编程技术FastSocket实战项目演练

141
来自专栏BestSDK

用心去设计产品,小细节大用处

一.用户反馈的好处 1.提高用户体验 慢慢人生路,每个产品都是一个生命,而反馈就是它的神经源,让用户体验到它的喜怒哀乐。要是没有反馈又好像一个植物人一般,或者没...

2707
来自专栏24K纯开源

TinyOS和Deluge的安装模拟(一)

介绍       TinyOS是一款嵌入式操作系统,相信做无线传感器网络开发的同志们都不陌生。同类型的系统有不少,但是TinyOS的应用较之其他系统更为广泛。T...

1898

扫描关注云+社区