好书，侧重前端设计（原型+设计+布局+性能优化）
2014-11-16
前端设计如同一个人的着装与外表，站点的设计总是最先吸引人们的眼球。布局是否合理、风格是否简介、配色是否和谐，流程是否通畅，操作是否便捷，这些前端特效都影响着用户对站点的认可度。随着用户体验，可用性，可交互性等越来越多的前端术语的出现，前端设计已经不是简单的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避免使用滤镜