《大巧不工 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的时候，根据实际情况灵活应对就好）