《大巧不工-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 前端设计修炼之道》学习笔记的更多相关文章

1. 大巧不工 web 前端设计修炼之道—笔记

     设计原则: 深入人心的设计 -- 别让我思考 简洁是一种文化, 一种需求, 一种思想   · 排版 · 字体 (衬线 | | 无衬线)

2. 《编写高质量代码：Web 前端开发修炼之道》 笔记与读后感

   编写高质量代码: Web 前端开发修炼之道 / 曹刘阳著. —北京: 机械工业出版社, 2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫 css 精灵, 是一种网页图片应用处理方式 ...

3. 读《编写高质量代码 - Web 前端开发修炼之道》笔记

   第一章 1.Web 标准由一系列标准组合而成, 核心理念是将网页的结构, 样式和行为分离, 所以分为三大部分: 结构标准, 样式标准和行为标准. 结构标准包括 XML 标准, XHTML 标准, HTML 标准: 样式标准指 CS ...

4. [读书笔记] Web 前端开发修炼之道

   原创地址: http://www.cnblogs.com/bnbqian/p/3735565.html 转载请注明出处 今天我们要读的书是 Web 前端开发修炼之道 第 1 章 从网站重构说起 1.1 糟糕的 ...

5. 《编写高质量代码－－Web 前端开发修炼之道》读书笔记

   前言 这两周参加公司的新项目, 采用封闭式开发 (项目成员在会议室里开发), 晚上加班到很晚, 所以没时间和精力写原创博客了, 今天就分享下这篇 读书笔记吧 ...

6. 编写高质量代码: Web 前端开发修炼之道（一）

   最近老大给我们买来一些技术方面的书籍, 其实很少搬着一本书好好的完整的看完过, 每每看电子档的, 也是打游击式的看看这章, 瞅瞅那章, 在那 5 本书中挑了一本比较单薄的

7. 《Web 前端开发修炼之道》- 读书笔记 CSS 部分

   如何组织 CSS - 分层 应用 css 的能力分两部分: 一部分是 css 的 API, 重点是如何用 css 控制页面内元素的样式: 另一部分是 css 框架, 重点是如何对 css 进行组织. 如何组织 css 可以有多种角 ...

8. 《编写高质量代码——Web 前端开发修炼之道》读后随笔

   结构样式行为的分离 结构标准包括 XML 标准. XHTML 标准. HTML 标准: 样式标准有 CSS 标准: 行为标准主要包括 DOM 标准和 ECMAScript 标准. 通常的项目会按照如上的方式进行分离, 但自己曾今做 ...

9. web 前端开发修炼之道 -- 编写高质量代码

   想想自己的页面实现是否糟糕 Web 标准 -- 结构. 样式和行为的分离 Web 标准可分为三个部分: 结构标准. 样式标准. 行为标准. 结构标准包括 XML 标准. XHTML 标准. HTML 标准 样式标准主要是指的 CS ...

随机推荐

1. 用 ssh 整合时，用 sessionfactory 的 getCurrentSession() 获取不到 session

   在用 ssh 整合时, 一开始用的是 getCurrentSession(), 获取当前线程上的 session, 但是总是抛异常, 不能获取. 后来用 sessionfactory 的 openSession(), 但是, ...

2. css 样式 --- CSS hack

   前端样式, 虽然不是经常需要 hack, 但是我们经常会遇到各浏览器表现不一致的情况. 基于此, 某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现. 我个人是不太推荐使用 hack 的, 要知道一 ...

3. 【转】如何使用 Android Studio 把自己的 Android library 分发到 jCenter 和 Maven Central

   转自: http://www.devtf.cn/?p=760&utm_source=tuicool 如何使用 Android Studio 把自己的 Android library 分发到 jCenter ...

4. Python-While 刷博爬虫

   仅用于测试 #!/usr/bin/python import webbrowser as web import time import os url = ‘www.abc.com‘ while Tru ...

5. Undefined symbols for architecture armv7

   xcode 编译过程中出现如下问题 Undefined symbols for architecture armv7:... ld: symbol(s) not found for architectur ...

6. remastersys 修改默认选项

   1.vim /etc/remastersys/isolinux/isolinux.cfg.vesamenu default vesamenu.c32prompt 0timeout 100 menu t ...

7. python 学习笔记 enumerate() 与 range(len) 运用及赋值小计

   #!/uer/bin/env python # _*_ coding: utf-8 _*_ #格式 1 a = ‘abc‘ for i in range(len(a)): print a[i],‘(%d ...

8. Android 项目开发全程（四）-- 将网络返回的 json 字符串轻松转换成 listview 列表

   前面几篇博文介绍了从项目搭建到获取网络字符串, 对一个项目的前期整体工作进行了详细的介绍, 本篇接着上篇介绍一下怎么样优雅将网络返回的 json 字符串轻松转换成 listview 列表. 先上图, 看一下效果. ...

9. java 面向对象编程 (一)- 类与对象

   1. 问题的提出      张老太养了两只猫猫: 一只名字叫小白, 今年 3 岁, 白色. 还有一只叫小花, 今年 100 岁, 花色. 请编写一个程序, 当用户输入小猫的名字时, 就显示该猫的名字, 年龄, 颜色. 如果用户输入的小 ...

10. 发送短信验证码及调用短信接口与 C# 后台 post 发送

    #region 调用短信接口 public ActionResult Mobile(string Tel)// 调用接口 { Random rm = new Random(); int i; strin ...