标签：搭建 客户 感受 好的 可用性测试 适应 span 背景图 alpha
| 《大巧不工 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 前端设计修炼之道》学习笔记的更多相关文章
随机推荐
|
|
标签：搭建 客户 感受 好的 可用性测试 适应 span 背景图 alpha
原文地址：https://www.cnblogs.com/cx2016/p/13294392.html
