首页 > 代码库 > 《大巧不工 web前端设计修炼之道》学习笔记

《大巧不工 web前端设计修炼之道》学习笔记

前端设计如同一个人的着装与外表,站点的设计总是最先吸引人们的眼球。布局是否合理、风格是否简介、配色是否和谐,流程是否通畅,操作是否便捷,这些前端特效都影响着用户对站点的认可度。随着用户体验,可用性,可交互性等越来越多的前端术语的出现,前端设计已经不是简单的HTML、CSS、AJAX等元素的整合了,它更关注交互的流畅性、操作的便利性、流程的合理性、结构的清晰度以及可维护性、页面兼容性以及同后端程序的良好桥接等,应该能够在真正理解WEB应用的需求的基础上放眼全局,把握整个前端的设计方案,因此新的时期赋予了前端开发人员新的使命,业内更需要全能的开发人才。

1、视觉设计

了解web排版艺术以及交互艺术,PS,了解web应用的一些方法:布局,排版,字体,色彩,表单等,为用户提供良好的视觉体验

2、交互设计

强调可用性:在效力、效率、满意度三个维度进行衡量。效力:用户可以完成任务;效率:用户完成任务的快慢;满意度:用户是否很享受完成任务的这个过程。

打开网页,你是否很希望你关注的消息显示在最醒目的位置?你是否喜欢某一操作因为比较简单?你是否希望网页上只出现你最想看到的内容。

总结:用户的3种特性:懒惰,喜新厌旧,有想法。

设计时候遵循以用户为中心的设计原则:UCD(user-centered Design):即以用户为中心进行产品的设计,开发和维护,一切都从用户的感受和需求出发,而不是让用户去适应产品,要做到这一点,就必须要时刻关注用户习惯、视觉感受、交互方式等细节。

工具:axure rp ,主要针对负责定义需求、设计功能、设计界面的专家,包括用户体验设计师UX、交互设计师UI、业务分析师BA、信息架构师IA、可用性专家UE和产品经理PM

原型设计和客户的交流发生了如下改革:

1.可以进行更高效的设计

2.体验动态的原型

3.更清晰地交流想法

制作线框图应该注意:

1.需求:requirements

2.精简:reduction

3.规则:regularity

4.重构:refatoring,理解为在编程领域中为了改善代码的质量而进行的工作。也就是改进。

使用PNG,是一种无损的位图图片压缩格式,与目前常用的GIF图片格式相比,它有更多实用的优点:

1.更高的压缩率

2.更高的颜色深度

3.基于Alpha通道的透明色

色彩:

人类可以感知波长为380nm到780nm的光波,意味着我们可以感知赤橙黄绿青蓝紫的七彩世界。均衡的色彩让人舒心,突兀的色彩让人烦心。比如IBM笔记本的设计黑色为主,再配上一个红点,使整体显得协调而醒目。

色彩三要素:

色相:色彩的首要特征,例如红色,黄色,蓝色,就是颜色属性中的色相。

饱和度:色彩的纯度,颜色混合的次数越多,则纯度越低。设计上:饱和度相似能使设计更具凝聚力。

明度:色彩的亮度。颜色有深浅,明暗的变化。白色的明度值最高,黑色最低。

流行配色:

1.单色系配色:稳重

2.相似色配色:相同色度的颜色

3.互补色配色

4.三色配色

页面内容的优化:

1.降低请求数

1)合并文件

2)CSS Sprites:把所有的背景图像放到一个图片文件中,注意:不能滥用,后期维护困难;若在系统架构中缓存策略做得好,同样可以尽可能低使用这项技术,因为首次加载的时间会变得更长。

3)剔除重复脚本:带来多余的http请求和javascript运算,影响页面性能。

2.减少交互通信道

2.1压缩技术

1)压缩:压缩javascript和css,减少文件大小,节省下载时间

2)优化图像:PS中使用“保存为web格式”来保存切割图片,可以输出适用于web质量的图像。(PNG,JPG,GIF)

其中:gif只有256色,不易表现色彩丰富的图像,小图标,支持小动画;JPG格式压缩比较高,所以适合用于照片类的图像。PNG格式包含了PNG-8及真彩的PNG-24或PNG-32,体积更小,且支持alpha通道,不支持动画。

3)减小cookie体积

2.2:合理利用缓存

1)使用外部javascript和CSS,可以提高页面加载速度,因为外部文件都能在浏览器中产生缓存,而且可以减少html文档的大小。如果把javascript和css内置在html中,则每次请求的时候都会随html文档重新下载,在用户访问站点中的多个页面时,这种方式带来的性能提高更加明显。

2)缓存Ajax

Ajax可以实现前端和后台服务的异步通信,使浏览器不用刷新整个页面就能够获得数据,带来良好体验的同时,能快速得到异步的HTTP响应同样重要,提高Ajax性能的措施最重要的就是:使响应具有可缓存性。

2.3.减少不必要的通信量

1)剔除未用到的脚本和样式。

2)推迟加载内容

3)使用get完成Ajax请求,使用POST方法需要首先发送文件头,然后发送数据。而post,只需要发送一个TCP数据包(除非有很多cookie),但是IE中的URL的最大长度是2K,因此如果发送一个超过2K的数据就不能使用GET了。

4)对于静态内容使用无cookie请求。

3.合理使用“并行”

3.1尽量减少重定向

3.2慎用iframe

3.3样式置于顶部

3.4脚本放到样式后面加载

4.节约系统消耗

4.1避免使用CSS表达式

4.2避免使用滤镜

二 IE及解析CSS的Bug,28个普通Bug、4个布局bug、6个可以绕开的bug.(个人建议:不需要刻意去记忆,遇到bug的时候,根据实际情况灵活应对就好)

《大巧不工 web前端设计修炼之道》学习笔记