大巧不工:Web前端设计修炼之道
第1章Web前端开发
1.1 Web大局观
1.1.1 混沌初开——Web的诞生
1.1.2 网络技术的领导者
1.1.3 不断优化的客户端技术
1.1.4 服务端技术的成熟
1.2 地位、曲线和使命
1.2.1 前端开发路漫漫
1.2.2 千军易得，一将难求
1.2.3 令人望而却步的学习曲线
1.2.4 前端开发人员如何自身定位
1.3 前端开发所需掌握的技术
1.4 前端开发常用的工具
1.4.1 设计类工具
1.4.2 原型类工具
1.4.3 调试类工具／27
1.Firebug
2.HttpWatch
3.Yslow
7大类、35条准则
□尽量减少HTTP请求
□缓存Ajax
□推迟加载
□提前加载
□减少DOM元素数量
□使用域名划分页面内容
□尽量减少iframe的数量
□尽可能地减少DNS的查找
□避免404错误
□避免页面的重定向
1.4.4 辅助类工具／32
CSS Sprites:http://www.cssforest.org/blog
1.5 小结／33
第2章 打造前端设计的基石——交出你的原型稿／34
2.1 UCD——以用户为中心的设计原则／35
原型设计、可用性设计、模型设计
2.1.1 关注用户／36
1.用户群分析
□按照之前的维度进行用户群分类
□分析不同用户群体的使用习惯
□为不同的用户群制定不同的方案
□确定用户群的重要级别
2.人物角色分析
2.1.2 用户调研／39
1.问卷调查
2.可用性测试
2.1.3 更含蓄的方式／42
1.服务器端数据
WEB服务器日志文件、网络监视器
2.客户端数据
热点图
3.数据挖掘
2.2 交出第一份设计稿／46
2.2.1 为什么原型设计很重要／47
2.2.2 原型如何表现／48
1.需求
2.精简
37Signals例子
精简：清晰、好用、漂亮、简单
3.规则
一致性，设计风格贯穿软件的始终，颜色的感观，舒适度
在做原型时，需要在视觉层次、元素的比例、排版、空间保持一致
4.重构
（1）让交互变得更友好
（2）向好的事例看齐
（3）再加一点点创新
2.2.3 做好原型产品的注意事项／56
1.目标
了解目标、制定计划、提出问题
2.为人而设计
对不同层次的人发掘他们的行为
3.重功能，轻外观
4.不要懒惰
5.头脑风暴
6.选择适合的工具
2.3 让工具帮助你／57
2.3.1 创建用户模型／58
整个产品设计流程可以分为几个阶段：
1.基础调研
2.产品分析
3.原型设计
4.详细设计
5.设计维护
2.3.2 BalsamiqMockups设计概念图／59
2.3.3 AxureRP设计交互原型／60
2.3.4 更真实的表现／66
2.4 小结／71
第3章 从过去到未来——前端设计演变之路／72
3.1 最熟悉的陌生人／73
3.1.1 浏览器之争／73
3.1.2 性能对比／74
3.1.3 IEPKWeb标准／77
3.2 结构的变迁／83
3.2.1 表格噩梦／83
1.可用性问题
2.兼容性问题
3.可维护性问题
3.2.2 基于DIV和CSS的布局结构／86
原则：首先要结构清晰、简洁；其次必须要有语义
1.清除不必要的DIV标记
2.使用语义化的标签及命名标识
3.尽量减少使用DIV标记
4.格式化代码
5.在布局结尾加上注释
3.3 不单纯是脚本／90
3.3.1 JavaScript的原貌／90
3.3.2 华丽的进化／92
3.3.3 AjaX不得不提／95
3.3.4 脚本框架的出现／96
3.4 接触未来(一)——初探HTML5／101
3.4.1 摘要／101
3.4.2 结构／102
<header>，表示页面主体的头部
<nav>，标记一些链接的结合体，常用的是导航条、边栏常用的链接
<section>，表示一块区域
<article>，表示一条独立的记录
<aside>，可以用来表示标记、侧栏、摘要、引用
<footer>，页脚
3.4.3 Flash杀手Canvas?／105
3.4.4 设计一个布局结构文档／107
1.骨架
2.页眉
<header>
<nav>
<ul><li></li></ul>
</nav>
</header>
3.主体内容
<section id=”content”>..</section>
<aside id=”news”>..</aside>
4.页脚
<footer>
<section id=”about”></section>
<section id=”links”></section>
</footer>
3.4.5 对表单的支持／109
1.新增的控件类型
Url/email/date/tel/search/datetime/date/month/week/number/range/color
2.Data属性
<select data=”http://”>
3.内建的表单校验
<input type=”number” min=”10” max=”50”/>
4.表单XML支持
3.5 接触未来(二)——CSS3的世界很精彩／110
1.圆角
2.阴影
□边框阴影
□文字阴影
3.5.1 选择器的变化／113
1.标签选择器
2.ID选择器
#
3.类选择器
.
4.后代选择器
#header .logo h2{...}
5.组合选择器
Input,select{line-height:1em;}
6.属性选择器
alt^=”value”
a[title$=”info”]{
top:0;
right:0;
}
7.同级组合选择
div~img{}
8.伪类
td:not([class*=”old”])(...)
3.5.2 布局的变化／116
3.5.3 样式的变化／119
1.自定义字体
2.边框背景
3.透明及RGBA
3.5.4 动画／120
3.6 小结／121
第4章 让你的设计深入人心——可用性设计／122
□有效性
□效率
□可记忆性
□容错性
□易学性
4.1 可用性原则／123
4.1.1 别让我思考／124
1.一目了然
2.可用性暗礁
（1）链接
（2）按钮
4.1.2 停止你的假设／129
1.用户喜欢扫描而不是阅读
2.用户喜欢尝试性选择
3.用户喜欢勉强应付
□用户不关心产品的内部机制：只要通过浏览器搜索达到目的
□只要能使用，就不会轻易去改变
4.1.3 针对扫描而设计／132
1.层次清晰
2.尊重习惯
3.明确能点击的元素
4.降低视觉噪声
4.2 高可用性页面／136
4.2.1 导航之道／137
1.web导航的要素
要素：网站标识、主导航和搜索
2.网站ID
网站LOGO
3.主导航条
主导航条：到达最主要位置的链接，一般位于页面正上方，而且非常醒目
导航架构：深窄型和宽浅型
4.工具导航
主要包括：帮助、联系我们、站点地图
5.我要“回家”
无论到什么地方，用户都可以依靠主页重新回来。
6.提供搜索
□用词：用词准确、通用
□选项：慎用选项
7.页面名称
□每个页面都是页面名称
□页面名称总是在合适的位置，而且位置有持久性
□名称让人一目了然
□名称与链接最好保持一致
8.我在哪里
□当前位于什么位置
□通过颜色和粗体的方式来区别其他栏目
9.面包屑导航
□位于页面上方
□使用“>>”号间隔
□使用小字体，因为它是辅助机制
□路径与当前位置要区分
4.2.2 当链接变成云／145
链接生来不平等，我们要想尽办法让用户容易定位到那些重要的链接
4.2.3 设计可用的表单／147
1.最短时间完成表单
首先：使用适合用户快速扫描的布局方式
其次：尽量减少表单的内容项
最后：要更好的利用键盘
2.无约束
表单设计必须简洁，将不必要的信息放一边，排版清晰易懂
3.有效的帮助和反馈
如果表单项目比较多，建议分多页进行填写，但必须清楚告诉当前在第几个步骤。
（1）在输入域后加上色彩区别的帮助信息
（2）在内容校验时实时的错误提示帮助
（3）在标签栏加上弹出的帮助信息
（4）在操作成功后提醒用户的反馈信息
4.2.4 拒绝写作艺术／153
1.页面需要简洁
2.说明也需要简洁
3.试着简化一下
4.3 可用性测试／156
4.3.1 如何测试／157
4.3.2 现象与本质／158
4.4 巧妙地应对错误／159
4.4.1 提前预防／162
发现错误及时引导用户改正，出现错误后不能输入的内容都消失了
4.4.2 设计有用的信息／165
错误信息的设计并不是要设计“警告信息”，而是要设计“提示信息”，帮助用户解决使用中所出现的问题。
□告诉用户在哪个业务环节出现了问题，可以使用文字或编号来标识
□不是每个人都能够记住客服电话，请加上联系方式，更好的方式是提供直接反馈渠道的链接。
□注意用词和目的导向，提示的目的是告诉用户下一步要怎么做，同时方便运维人员来定位错误
404页面也要设计与系统的整体风格保持一致
4.4.3 人性化操作／169
操作不需要太复杂，要尽量在交互过程中提供友好、合理的操作流程。
4.5 系统一致性设计／170
一致原则：视觉一致、操作一致、内外一致
4.5.1 规范设计／172
规范包括：信息架构规范、界面设计规范、交互规范、语言文字使用规范等
4.5.2 有始有终／172
色彩，文字的字体选择和排版上都需要一致
4.6 小结／173
第5章 原型模型化／174
5.1 布局之道／175
1.固定的布局
2.流性的布局
当浏览器窗口大小变化时，布局也随之发生变化-放大或缩小
3.弹性的布局
随着尺寸的变化，布局会作相应的调整
5.1.1 基本布局样式属性
1.单位
2.浮动
3.定位
相对定位和绝对定位
5.1.2 基于网格系统的CSS框架布局
5.1.3 流体布局
5.2 样式就是设计
5.2.1 必须了解的样式技术
1.规划样式的文件
1）规划样式文件：开发态和运行态
2）质量需要着重指出重置样式的重要性
3）为样式加上清晰的注释
2.重置样式
3.为样式加上清晰的注释
（1）简写
减少样式的方法，即将多行合并在一个属性内。
（2）图像合并
减少HTTP的请求数量，节省宽带并加快页面的装载速度。
设计时要有效规划图片背景
（3）优先权
□元素的内联样式属性
□每个ID选择器
□每个class选择器、属性选择器及伪类
□每个元素或伪元素
□其他选择器
□！Important优先权最高
（4）Hack
将一些Hack语法剖离至一个单独的文件，最后通过条件判断是否需要引用Hack
IE：任意的IE版本
It IE version：低于指定IE版本
Ite IE version：低于或等于指定IE版本
IE version：指定IE版本
gt IE version：高于指定IE版本
gte IE version：高于或等于指定IE版本
IE6及以下版本：*html{} ”写法
IE7及以下版本：*:first-child+html{} *html{}
IE7 *:first-child+html{}
IE7及现代浏览器：html>body
现代浏览器（除IE7）：html>/**/body{}
现代浏览器（除IE6及以下版本）：!important
（5）验证
W3C验证工具
5.2.2 使用样式完成所有事情
1.圆角
分为上、中、下
.inside{width:344px;}
.topgap{background:url(fix-cornes-top.png) no-repeat; height:9px;}
.middlegap{background:url(fix-cornes-middle.png) repeat-y; padding:5px;}
.bottomgap{background:url(fix-cornes-bottom.png) no-repeat; height:9px;}
<div>
<p class=”topgap”></p>
<p class=”middlegap”>内容区域</p>
<p class=”bottomgap”></p>
</div>
分为：左上角、右上角、内容角、左下角、右下角
<div id=”cornerexample”>
<div class=”top-left”/>
<div class=”top-right”/>
<div class=”inside”>
<h2>流动圆角例子</h2>
</div>
<div class=”bottom-left”/>
<div class=”bottom-right”/>
</div>
2.图像替换
图像替换的中心思想就是使用背景图像来替换文本，还可以使用display属性将文本设置为none
3.列表
（1）无序列表
LI
（2）有序列表
OL
（3）定义列表
以DL标记开始，每个自定义列表项以DT开始，每个列表项的定义以DD开始
4.表单
1）为给表单容器添加边框及背景，将表单输入域与按钮操作区域进行视觉区分
2）将表单输入域部分设置为自上而下的布局
3）字体及输入框设置。为<legend>内的文字、<label>、<p>
4）去除fieldset上的默认边框，重写表单中的输入域及复选框样式
5.3 动态交互之美
5.3.1 javascript设计新思维
1.事件驱动的脚本设计
2.不要过分依赖脚本
通过javascript完成一些校验可以减轻服务器压力。
3.前端需要分层
分为三层次：结构HTML、表现CSS、行为javascript
□脚本代码更加简洁、规范、便于代码维护
□独立的脚本代码更容易测试与调试
□行为层次的独立增加了脚本代码复用的可能
基本原则：
□.javascript只出现在.js文件中
□在html中不会出现onload、onclick等元素，所有的行为都使用绑定的方式来实现。
□只关注与行为，不能在javascript中定义CSS样式
5.3.2 jquery是最佳实践
1.为什么选择jquery
□简洁之美
□架构之美
□扩展之美
2.Javascript的最佳实践
□剥离功能逻辑
□不要依赖脚本，尝试从设计上避免错误的发生
□设计良好的结构
□用ready方法来进行初始化
5.3.3 一个关于Tab导航的交互例子
□样式独立定义在tab.css中
□样式设计也体现出结构性，所有样式的作用域在tabs的作用域下
□关于导航的背景使用了图片位移技术，减少了服务器与客户端之间的交互
□对于导航，使用手型的游标，让客户可以很轻易的知道“这个东西可以点击”
5.4 设计理念的碰撞与融合
5.4.1 PNG透明色应用
□更高的压缩率
□更高的颜色深度
□基于alpha通道的透明色
5.4.2 大菜单
5.4.3 Tab选项卡
5.4.4 模态窗口
1.图像/视频预览
2.注册/登录
3.帮助/提示
5.4.5 unobtrusive的web开发
1.unobtrusive的HTML
（1）使用更具有语义的HTML标签
<dl>
<dt></dt>
</dl>
（2）只将<table>用于表格式的数据
（3）避免使用无意义的<div>和<span>
2.unobtrusive的CSS
（1）所有的CSS都应该是非必要的，就算没有加载CSS也应该可以正常访问页面
（2）尽量使用可重用的class，控制class的数量
（3）将CSS放在外部.css文件或者<style>标签中
（4）活用HTML标签
提倡活用现成的HTML标签，如使用H1，而不是<div class=”header”>
3.unobtrusive的FLASH对象
4.Unobtrusive的javascript
（1）从纯HTML方面来考虑交互设计
（2）为了保证应用的可访问性,javascript只用于增加交互效果而不是成为必需品
（3）测试每一段javascript脚本
（4）将javascript代码保存在外部的.js文件中，不使用onclick这种内联属性的方式来绑定事件，也不使用javascript:void(0)之类的代码
需要遵循的一些原则：
（1）代码更加简洁，并且易于维护
1）可读性意味着更容易被维护
2）修改样式只需要修改CSS文件
3）Javascript代码更容易维护和测试
4）修改HTML所造成的风险降低
（2）能够提高可访问性
1）所有人都可以访问你的内容
2）不能预估所有客户端的情况，但可以肯定的是所有浏览器都能够处理HTML
3）有一部分用户并不能正常使用javascript的功能
4）有些人使用的是屏幕阅读器，有些人甚至无法使用鼠标
（3）有利于搜索引擎优化
1）搜索爬虫无法解释CSS和javascript
2）搜索爬虫只会顺着<a>继续爬行
3）Javascript和flash中的内容无法被搜索到
4）更多的内容、更结构化的HTML使得页面相关性更高
第6章 探索、品味、总结——经典设计思维
6.1平衡网站的色彩
6.1.1色彩的联想
1.红色：给人冲动、愤怒、热情、有活力
2.橙色：给人快乐而幸福的颜色
3.黄色：快乐、希望、智慧和轻快的个性，也代表希望和祝福
4.绿色：健康、与环保
5.蓝色：海洋、和平、宁静与深邃，给人有内涵和可靠
6.紫色：高贵神秘
7.黑色：深沉、神秘、寂静、悲哀、压抑的感觉
8.白色：纯洁给人明快、清洁
9.灰色：时尚感
6.1.2色彩三要素
1.色相
2.饱和度
3.明度
6.1.3流行配色
以暖色为主，还是以冷色为主，再配以辅助色彩，在视觉上达到一个平衡点。
四种常见的配色方案：
1.单色系配色
2.相似色配色
3.互补色配色
4.三色配色
6.2简洁的思想斗争
功能、操作流程、视觉效果上也需要简洁。
□可以让站点更容易进行导航，站点内没有冗余的信息，页面中拥有更少的栏目及内容，可以让用户轻松的找到所需的内容。
□不会分散用户的注意力，站点中有突出的重要内容，不会有令人烦躁的内容影响用户的视觉操作。
□目的性明确，可以更精细的表达想要表达的元素
6.2.1有效利用空白
首页分为四部分：
□首页顶部是一个带搜索的主导航条
□突出的产品及链接
□相关产品视频及其他链接
□包含全部导航项的页脚
6.2.2是时候“减肥”了
6.2.3简洁的背后
1.简洁是一种需求
2.简洁是一种文化
3.简洁是一种潮流
4.持续设计
6.3排版艺术
6.3.1充分了解你要使用的字体
1.衬线与无衬线的字体
2.合适的font-family
3.自定义字体
6.3.2其他重要排版要素
1.H1
2.去除原有的空行及空格
6.4 80%的情况下我们可以这样做
6.4.1轻松导航
1.主导航
2.区域导航
1）手风琴导航
2）标签导航
3.面包屑导航
6.4.2便捷检索
1.标签云
2.搜索框
3.分页
6.4.3快速选择
1.日期范围选择
2.滑门
6.4.4有效帮助
1.操作步骤
2.表单提示
第7章 让你的设计更加完美——优化技巧和最佳实践
7.1性能在前端的重要性
1.page speed
2.Yslow
7.2前端性能优化的基本原则
7.2.1页面内容的优化
1.降低请求数
（1）合并文件
（2）CSS Sprites
注意：
□不能滥用这样的技术，使用不当也可能造成后期维护困难
□若在系统架构中缓存策略做得好，同样可以尽可能少的使用这项技术，因为加载时间会更长
□在制作合并背景图时，需要合理归纳，尽量将后期变动不多的图片合并在一张图内，并使用多张合并图
（3）剔除重复脚本
2.减少交互通信量
（1）压缩技术
1）压缩javascript和CSS
2）优化图像
3）减少cookie体积
（2）合理的利用缓存
1）使用外部javascript和CSS
2）缓存ajax
（3）减少不必要的通信量
1）剔除未用到的脚本和样式
2）推迟加载内容
3）使用GET来完成Ajax请求
4）对于静态内容使用无cookie请求
3.合理利用“并行”
（1）尽量避免重定向
（2）慎用iframe
（3）把样式表置于顶部
（4）脚本放到样式后面加载
4.节约系统消耗
（1）避免使用CSS表达式
（2）避免使用滤镜
7.2.2服务器的优化
1.使用内容分发网络
2.配置合理的缓存机制
3.Gzip压缩文件内容
4.减少DNS查找次数
7.3让自己更容易被发现
7.3.1SEO策略
1.网站内容的规划和组织
2.链接策略-SEO的重点
（1）导入链接
原则：
□导入链接的内容和你的网站的内容相关
□页面中的导入链接不宜过多
□避免与未被收录的或被搜索引擎惩罚的网站交换链接
□导入链接的可点击部分要包含我们指定的关键词
（2）导出链接
每个页面导出链接不宜过多，一般在10-15个
原则：
□导出链接的内容和网站内容相关
□页面中的导出链接不宜过多，否则会降低该页面在搜索引擎上的权重
□避免与未被收录的或被搜索引擎惩罚的网站交换链接
（3）内部链接
注意：
□穿插在主题文章的链接数量控制在3-8个
□链接的对象要和主题相关
□更好使用绝对路径
3.站点地图
4.关键词的选择和分析
（1）关键词的选择原则
□必须是流行的
□不宜太广泛或者太流行
□长度不宜太长
□要与页面内容保持高度一致
□从搜索者的角度组织关键词
□切忌关键词千篇一律
（2）关键词的选择方法
□确定核心关键词
□核心关键词定义上的扩展
□模拟用户思维设计关键词
□研究竞争者的关键词
（3）关键词的优化
要素：
□在页面上安排关键词要遵循“自左上角向下”的策略，即“从上到下，从左到右”
□在页面标题title，主要标题h1，文本标题，小标题，摘要，文本主体货强调的文本
□在meta标签中设置关键词
□尽量避免使用图片表现关键词
□可以在URL中放入关键词，即目录文件名
□可在网页的导入、导出链接的可点击部分包含关键词
□关键词尽量出现在页面的前200个字中
（4）关键词的分析优化工具
7.3.2前端搜索引擎友好
1.友好的用户界面
2.友好的搜索引擎HTML代码
□确保HTML代码是严格遵循W3C标准的
□将CSS，javascript和HTML代码分开
□建立站点地图
□尽量避免iframe,flash,javascript中创建链接
□使用图片表示关键词时必须设置alt属性
7.3.3其他
1.谨慎的使用用户重定向
2.避免URL参数
3.服务器响应速度
7.3.4维护SEO效果
1.排名监控
2.网站分析
3.关键词监控
4.链接监控
□这些外部链接的数量和质量
□每页的导入和导出链接是否过多
□导入链接是否来自垃圾网站
5.内容更新
第8章 思考与展望——浅谈Web发展的未来
8.1不可思意的WEB2.0
8.1.1WEB2.0是一场必然的革命
8.1.2WEB 2.0的新生活
1.博客
2.网站个性化
3.WIKI
4.社会化书签
5.SNS
8.1.3云时代的脚步
8.2 REST
8.2.1什么是REST
8.2.2 REST初探
8.2.3AJAX和REST组合
8.3 Mashup与Widget
8.3.1 什么是Mashup
他是一种概念，是一个整合的过程
8.3.2Mashup实践
1.API
2.HTML与样式
3.JQUERY交互
8.3.3 1+1 > 2
□可以从不同的数据源聚合内容
□轻量级的表现方法
□服务端与客户端分离
8.3.4 Widge
8.4拥抱未来，拥抱WEB3.0
8.4.1WEB 3.0到底怎么样
1.个人档案
2.通用的API
3.语义识别
8.4.2语义网
1.为什么需要语义网
2.语义网的技术基础
8.4.3WEB 3.0先行者
1.知道你的爱好-twine
2.分析语句的DNS-textwise
3.传统搜索引擎终结者-powerset
4.语义时代的简历搜索引擎-zoominfor
5.语义关系数据库引擎-semantra
6.丰富你的阅读-headup
网友评论