月度归档:2011年01月

关于前端开发用户体验上的一些唠叨

不管做什么东西,现在基本上一开口就是要求用户体验。说的多了,耳朵也腻。在我心目中良好的设计肯定是很少使用图片的,为啥?不光节约了HTTP请求,压缩了文件尺寸,最重要的是在界面渲染上使用纯CSS肯定比图片要来得快啊。但是 IE 对CSS3高级属性的支持一直是前端开发工程师的痛。所以我也有了以下的一些疑惑。

  1. 是否还需要考虑的浏览器?
    IE6 已经很老了,应该到了退休的年龄了。但是也许公司的 BOSS 或者客户使用浏览器的时候可能还是老式的 IE6 ,我个人已经开始厌倦了对 IE6 的 BUG 修复了,慢慢杜绝开始兼容 IE6 。比如,一个元素看上去有圆角,有阴影,支持 CSS2 伪类等,为了这些表现层的东西而写一大段的 CSS HACK 或者 JavaScript 脚本。很显然不值得。当然,也并不是完全没有任何底线。底线就是,不影响用户正常的功能使用
  2. 视觉设计和前端的关系其实真的很暧昧
    为什么 TAOBAO,BAIDU,SINA等都会要求界面设计师懂 HTML,CSS 代码。曾经我和设计师争论过这个问题,这里我提出我自己的观点。一个页面最重要的展示元素是 “内容” ?。那么到底是 “内容驱动设计的布局” 还是 “设计驱动内容布局” 很明显的我趋向于前者。当然,我的理解也许过于片面的追求HTML “良构” 了,一开始用 HTML 所谓的法则限制了视觉上的设计,也许就扼杀了设计师的设计思维。一开始又设计师直接设计,也许会为了刻意的追求一些效果而写了大量冗余的 HTML 代码。并且还要使用大量的 CSS 去渲染,似乎也得不偿失。我想一线公司要求懂 HTML,CSS 的原因也就是希望设计师能够在界面实现的风险上面有一个大概的权重了解吧。
  3. 体验的终极目标
    用户体验是什么,良好的界面布局设计?精心设计的圆角和阴影效果?很炫的 JavaScript 脚本特效?清晰的界面结构分割?No!No!No!这些东西的基础都是建立在速度的基础上的。0.1秒的系统会让人感觉很愉悦,1秒的系统会让人感觉开始有点停顿,知道计算机在处理数据,而10秒的系统,用户则会直接关闭浏览器。为了靠近 0.1 秒的目标,我个人觉得设计UI的时候都应该都尝试使用纯 CSS 和 HTML 用弱性衰减的原则去设计为主是最好的方案。其实用纯色来设计用户界面不是也挺好么。?当然,这又回到了上面需要讨论的问题了。一个好的设计师是否要掌握HTML,CSS ?

好了。准备下班,回家睡觉,继续学习我的 Python.

2010年总结

又过了一年,又老了一岁,我的开发也迈入了第四年.在过去的一年里,收获不少.找到了一个适合自己的team.并且在前端技术上又精进了不少.

在 HTML 上,对界面的要求更加语义化.对结构的把握有了新的理解.对于HTML5技术有了初步的认识和了解.

在CSS上,通过多个项目使用 Css Sprites .在构图的经验上有所提升.对 IMG 的结构优化有了一定程度的增长.

综合技术,在前端的设计上看了应该有1000+以上的网站,对欧美风格的网站特别推崇,对韩国网站在色彩的应用上有了初步的感知.在用户易用性和界面结构上面开始有了初步的认识.前端框架中新研究了GWT.在EXTJS的应用上有了更加深层次的掌握.

进步比较大的前端性能优化.包括G-Zip压缩,合并背景图片,Script Loader技术,图片优化技术,Apache与Tomcat整合,Google Apache自动优化模块的应用(能够优化客户端缓存,图片缓存,本地缓存,连接数优化,最大并发优化等…)

新年新计划:

今年的主要研究:

  1. JavaScript高级应用以及如何编写高效的JavaScript.
    去年一年没有写过多少行 JavaScript 主要都放在了 html,css,前端性能提上,所以今年一定要全部补回来.
  2. 掌握 Python 语言,并且要求作出一个小 mis 系统.
    Java 对与web应用以及框架的掌握已经达到了一个开发级别,没有想法继续研究下去了.转向自己喜爱的动态语言阵营.
  3. 使用 html5,css3 制作一个支持 iPad ,IPhone 的小型网站.
    对新型技术的应用.
  4. 研究 Dojo 框架.
    在 IBM 以及各个论坛上介绍了 Dojo 在企业应用的优越性.并且相对 Ext 这样对客户端有一定要求的框架,Dojo,Gwt这中框架更加的 fast.对Comet技术,IO的优化非常好,如果能伴随新的 tomcat7,Jetty 服务器以及 Java Servlet 3.0 在前端的使用上会有新的飞跃.

今年,刚开年我收获了我人生第一份至宝,我亲爱的女朋友终于和我一起去民政局打了标签回来了,以后填表的时候终于可以勾 “已婚” 了.????? ^_^?????? 希望正式升级为老婆的她能够一辈子健康.

HTML5用户指南 读后感

相对国内的书而言,这本书应该也算走在前列了吧.书中的内容介绍得多而全.如:

  • 新标签的语义以及使用环境
  • CSS样式化
  • 在什么环境下使用新的标签
  • 介绍 html5 为什么要以内容为主并且放弃了验证
  • 新型HTML5元素在浏览器中的应用
  • 新媒体,视频,音频
  • 画布
  • 数据存储 ( 比较感兴趣的是 web sql 的应用)
  • 如何构建离线程序
  • 拖放功能以及数据的传递
  • 如何获得自己的坐标(mobile 应用)
  • Message,Worker,Socket 的实现

给我的感觉就是作者有丰富的开发经验,并且对HTML在未来的应用充满了憧憬,的确也是,读完本书,我个人也觉得HTML5在未来 MOBILE 平台上肯定会大放异彩,当然也不排除传统的 WEB 应用在 RIA 方面的升华.作者结合了日常开发中的小例子,给读者小片的CODE并且对应用的案例进行一些简单的分析,留给读者发挥的空间.代码写得都是通俗易懂,没有特别难以理解的代码片段.基本上都是属于新API的调用.当然,这些例子也是点到即止,如果想对某章节深入研究的读者可能会失望了.

总的来说: 专业,简单,内容丰富且生动是我对这本书的评价.适合所有WEB前端开发人员.如果相对HTML5有一个基础的了解,这本书还算一个不错的选择.