《大巧不工-WEB前端设计修炼之道》

Posted 2020-12-17 cx2016

 

目录  · · · · · ·

赞 誉
前 言
致 谢
第1章 Web前端开发ABC/1
1.1 Web大局观/2
1.1.1 混沌初开—Web的诞生/2
1.1.2 网络技术的领导者—W3C/4
1.1.3 不断优化的客户端技术/7
1.1.4 服务端技术的成熟/8
1.2 地位、曲线和使命/11
1.2.1 前端开发路漫漫/11
1.2.2 千军易得，一将难求/12
1.2.3 令人望而却步的学习曲线/14
1.2.4 前端开发人员如何自身定位/16
1.3 前端开发所需掌握的技术/17
1.4 前端开发常用的工具/25
1.4.1 设计类工具/25
1.4.2 原型类工具/26
1.4.3 调试类工具/27
1.4.4 辅助类工具/32
1.5 小结/33
第2章 打造前端设计的基石—交出你的原型稿/34
2.1 UCD—以用户为中心的设计原则/35
2.1.1 关注用户/36
2.1.2 用户调研/39
2.1.3 更含蓄的方式/42
2.2 交出第一份设计稿/46
2.2.1 为什么原型设计很重要/47
2.2.2 原型如何表现/48
2.2.3 做好原型产品的注意事项/56
2.3 让工具帮助你/57
2.3.1 创建用户模型/58
2.3.2 Balsamiq Mockups设计概念图/59
2.3.3 Axure RP设计交互原型/60
2.3.4 更真实的表现/66
2.4 小结/71
第3章 从过去到未来—前端设计演变之路/72
3.1 最熟悉的陌生人/73
3.1.1 浏览器之争/73
3.1.2 性能对比/74
3.1.3 IE PK Web 标准/77
3.2 结构的变迁/83
3.2.1 表格噩梦/83
3.2.2 基于DIV和CSS的布局结构/86
3.3 不单纯是脚本/90
3.3.1 javascript的原貌/90
3.3.2 华丽的进化/92
3.3.3 Ajax不得不提/95
3.3.4 脚本框架的出现/96
3.4 接触未来（一）—初探html 5/101
3.4.1 摘要/101
3.4.2 结构/102
3.4.3 Flash杀手Canvas？/105
3.4.4 设计一个布局结构文档/107
3.4.5 对表单的支持/109
3.5 接触未来（二）—CSS 3的世界很精彩/110
3.5.1 选择器的变化/113
3.5.2 布局的变化/116
3.5.3 样式的变化/119
3.5.4 动画/120
3.6 小结/121
第4章 让你的设计深入人心—可用性设计/122
4.1 可用性原则/123
4.1.1 别让我思考/124
4.1.2 停止你的假设/129
4.1.3 针对扫描而设计/132
4.2 高可用性页面/136
4.2.1 导航之道/137
4.2.2 当链接变成云/145
4.2.3 设计可用的表单/147
4.2.4 拒绝写作艺术/153
4.3 可用性测试/156
4.3.1 如何测试/157
4.3.2 现象与本质/158
4.4 巧妙地应对错误/159
4.4.1 提前预防/162
4.4.2 设计有用的信息/165
4.4.3 人性化操作/169
4.5 系统一致性设计/170
4.5.1 规范设计/172
4.5.2 有始有终/172
4.6 小结/173
第5章 原型模型化/174
5.1 布局之道/175
5.1.1 基本布局样式属性/176
5.1.2 基于网格系统的CSS框架布局/179
5.1.3 流体布局/183
5.2 样式就是设计/185
5.2.1 必须了解的样式技术/185
5.2.2 使用样式完成所有事情/191
5.3 动态交互之美/207
5.3.1 JavaScript设计新思维/207
5.3.2 jQuery是最佳实践/214
5.3.3 一个关于Tab导航的交互例子/223
5.4 设计理念的碰撞与融合/226
5.4.1 PNG透明色应用/226
5.4.2 大菜单/228
5.4.3 Tab选项卡/230
5.4.4 模态窗口/232
5.4.5 unobtrusive的Web开发/234
5.5 小结/237
第6章 探索、品味、总结—经典设计思维/239
6.1 平衡网站的色彩/240
6.1.1 色彩的联想/240
6.1.2 色彩三要素/247
6.1.3 流行配色/249
6.2 简洁的思想斗争/254
6.2.1 有效利用空白/255
6.2.2 是时候“减肥”了/256
6.2.3 简洁的背后/260
6.3 排版艺术/262
6.3.1 充分了解你要使用的字体/263
6.3.2 其他重要排版要素/267
6.4 80%的情况下我们可以这样做/270
6.4.1 轻松导航/270
6.4.2 便捷检索/273
6.4.3 快速选择/278
6.4.4 有效帮助/280
6.5 小结/282
第7章 让你的设计更加完美—优化技巧和最佳实践/283
7.1 性能在前端的重要性/284
7.2 前端性能优化的基本原则/286
7.2.1 页面内容的优化/286
7.2.2 服务器的优化/299
7.3 让自己更容易被发现/304
7.3.1 SEO策略/304
7.3.2 前端搜索引擎友好/310
7.3.3 其他/311
7.3.4 维护SEO效果/312
7.4 小结/314
第8章 思考与展望—浅谈Web发展的未来/315
8.1 不可思议的Web 2.0/316
8.1.1 Web 2.0是一场必然的革命/316
8.1.2 Web 2.0的新生活/317
8.1.3 云时代的脚步/322
8.2 REST/323
8.2.1 什么是REST/323
8.2.2 REST初探/325
8.2.3 Ajax和REST组合/330
8.3 Mashup与Widget/333
8.3.1 什么是Mashup/333
8.3.2 Mashup实践/336
8.3.3 1+1>2/342
8.3.4 Widget/343
8.4 拥抱未来，拥抱Web 3.0/346
8.4.1 Web 3.0到底什么样/348
8.4.2 语义网/350
8.4.3 Web 3.0先行者/353
8.5 小结/362

 

《大巧不工 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 前端设计修炼之道》学习笔记的更多相关文章 大巧不工 web 前端设计修炼之道—笔记   设计原则: 深入人心的设计 -- 别让我思考 简洁是一种文化, 一种需求, 一种思想   · 排版 · 字体 (衬线 | | 无衬线) 《编写高质量代码：Web 前端开发修炼之道》 笔记与读后感 编写高质量代码: Web 前端开发修炼之道 / 曹刘阳著. —北京: 机械工业出版社, 2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫 css 精灵, 是一种网页图片应用处理方式 ... 读《编写高质量代码 - Web 前端开发修炼之道》笔记 第一章 1.Web 标准由一系列标准组合而成, 核心理念是将网页的结构, 样式和行为分离, 所以分为三大部分: 结构标准, 样式标准和行为标准. 结构标准包括 XML 标准, XHTML 标准, HTML 标准: 样式标准指 CS ... [读书笔记] Web 前端开发修炼之道 原创地址: http://www.cnblogs.com/bnbqian/p/3735565.html 转载请注明出处 今天我们要读的书是 Web 前端开发修炼之道 第 1 章 从网站重构说起 1.1 糟糕的 ... 《编写高质量代码－－Web 前端开发修炼之道》读书笔记 前言 这两周参加公司的新项目, 采用封闭式开发 (项目成员在会议室里开发), 晚上加班到很晚, 所以没时间和精力写原创博客了, 今天就分享下这篇<编写高质量代码 --Web 前端开发修炼之道> 读书笔记吧 ... 编写高质量代码: Web 前端开发修炼之道（一） 最近老大给我们买来一些技术方面的书籍, 其实很少搬着一本书好好的完整的看完过, 每每看电子档的, 也是打游击式的看看这章, 瞅瞅那章, 在那 5 本书中挑了一本比较单薄的 < 编写高质量代码 web 前端开发修炼之道 ... 《Web 前端开发修炼之道》- 读书笔记 CSS 部分 如何组织 CSS - 分层 应用 css 的能力分两部分: 一部分是 css 的 API, 重点是如何用 css 控制页面内元素的样式: 另一部分是 css 框架, 重点是如何对 css 进行组织. 如何组织 css 可以有多种角 ... 《编写高质量代码——Web 前端开发修炼之道》读后随笔 结构样式行为的分离 结构标准包括 XML 标准. XHTML 标准. HTML 标准: 样式标准有 CSS 标准: 行为标准主要包括 DOM 标准和 ECMAScript 标准. 通常的项目会按照如上的方式进行分离, 但自己曾今做 ... web 前端开发修炼之道 -- 编写高质量代码 想想自己的页面实现是否糟糕 Web 标准 -- 结构. 样式和行为的分离 Web 标准可分为三个部分: 结构标准. 样式标准. 行为标准. 结构标准包括 XML 标准. XHTML 标准. HTML 标准 样式标准主要是指的 CS ... 随机推荐 用 ssh 整合时，用 sessionfactory 的 getCurrentSession() 获取不到 session 在用 ssh 整合时, 一开始用的是 getCurrentSession(), 获取当前线程上的 session, 但是总是抛异常, 不能获取. 后来用 sessionfactory 的 openSession(), 但是, ... css 样式 --- CSS hack 前端样式, 虽然不是经常需要 hack, 但是我们经常会遇到各浏览器表现不一致的情况. 基于此, 某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现. 我个人是不太推荐使用 hack 的, 要知道一 ... 【转】如何使用 Android Studio 把自己的 Android library 分发到 jCenter 和 Maven Central 转自: http://www.devtf.cn/?p=760&utm_source=tuicool 如何使用 android Studio 把自己的 Android library 分发到 jCenter ... Python-While 刷博爬虫 仅用于测试 #!/usr/bin/python import webbrowser as web import time import os url = ‘www.abc.com‘ while Tru ... Undefined symbols for architecture armv7 xcode 编译过程中出现如下问题 Undefined symbols for architecture armv7:... ld: symbol(s) not found for architectur ... remastersys 修改默认选项 1.vim /etc/remastersys/isolinux/isolinux.cfg.vesamenu default vesamenu.c32prompt 0timeout 100 menu t ... python 学习笔记 enumerate() 与 range(len) 运用及赋值小计 #!/uer/bin/env python # _*_ coding: utf-8 _*_ #格式 1 a = ‘abc‘ for i in range(len(a)): print a[i],‘(%d ... Android 项目开发全程（四）-- 将网络返回的 json 字符串轻松转换成 listview 列表 前面几篇博文介绍了从项目搭建到获取网络字符串, 对一个项目的前期整体工作进行了详细的介绍, 本篇接着上篇介绍一下怎么样优雅将网络返回的 json 字符串轻松转换成 listview 列表. 先上图, 看一下效果. ... java 面向对象编程 (一)- 类与对象 1. 问题的提出      张老太养了两只猫猫: 一只名字叫小白, 今年 3 岁, 白色. 还有一只叫小花, 今年 100 岁, 花色. 请编写一个程序, 当用户输入小猫的名字时, 就显示该猫的名字, 年龄, 颜色. 如果用户输入的小 ... 发送短信验证码及调用短信接口与 C# 后台 post 发送 #region 调用短信接口 public ActionResult Mobile(string Tel)// 调用接口 { Random rm = new Random(); int i; strin ...   《大巧不工 web 前端设计修炼之道》学习笔记的更多相关文章随机推荐