Skip to content

前
前端体验设计

CSDN 技术社区 / content / 前端体验设计

通知 1
Star 2
Fork 1
前
前端体验设计

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 ad964382 编写于 作者: ToTensor's avatar ToTensor
浏览文件
操作

init code

上级 f824c1cc
展开全部 隐藏空白更改
内联 并排
Showing with 1433 addition and 9 deletion
data/前端体验设计/欢迎来到异步社区！/1.异步社区的来历/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">异步社区(<a>www.epubit.com.cn</a>)是人民邮电出版社旗下IT专业图书旗舰社区，于2015年8月上线运营。</p>
<p class="zw">异步社区依托于人民邮电出版社20余年的IT专业优质出版资源和编辑策划团队，打造传统出版与电子出版和自出版结合、纸质书与电子书结合、传统印刷与POD按需印刷结合的出版平台，提供最新技术资讯，为作者和读者打造交流互动的平台。</p>
<p class="图"><img alt="图像说明文字" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/272.jpg"></p>
data/前端体验设计/欢迎来到异步社区！/2.社区里都有什么？/text.html 0 → 100644
浏览文件 @ ad964382
<h3 class="sigil_not_in_toc" id="nav_point_333">购买图书</h3>
<p class="zw">我们出版的图书涵盖主流IT技术，在编程语言、Web技术、数据科学等领域有众多经典畅销图书。社区现已上线图书1000余种，电子书400多种，部分新书实现纸书、电子书同步出版。我们还会定期发布新书书讯。</p>
<h3 class="sigil_not_in_toc" id="nav_point_334">下载资源</h3>
<p class="zw">社区内提供随书附赠的资源，如书中的案例或程序源代码。</p>
<p class="zw">另外，社区还提供了大量的免费电子书，只要注册成为社区用户就可以免费下载。</p>
<h3 class="sigil_not_in_toc" id="nav_point_335">与作译者互动</h3>
<p class="zw">很多图书的作译者已经入驻社区，您可以关注他们，咨询技术问题；可以阅读不断更新的技术文章，听作译者和编辑畅聊好书背后有趣的故事；还可以参与社区的作者访谈栏目，向您关注的作者提出采访题目。</p>
data/前端体验设计/欢迎来到异步社区！/3.灵活优惠的购书/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">您可以方便地下单购买纸质图书或电子图书，纸质图书直接从人民邮电出版社书库发货，电子书提供多种阅读格式。</p>
<p class="zw">对于重磅新书，社区提供预售和新书首发服务，用户可以第一时间买到心仪的新书。</p>
<p class="zw">用户帐户中的积分可以用于购书优惠。100积分=1元，购买图书时，在<img alt="图像说明文字" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/273.png">里填入可使用的积分数值，即可扣减相应金额。</p>
<p class="editing-tag 超强提示标签">特别优惠</p>
<blockquote class="超强提示 editing-block">
<p class="zw"><br></p>
<p class="zw">购买本电子书的读者专享<strong>异步社区优惠券</strong>。 使用方法：注册成为社区用户，在下单购书时输入“<strong>57AWG</strong>”，然后点击“使用优惠码”，即可享受电子书8折优惠（本优惠券只可使用一次）。</p>
</blockquote>
<h3 class="sigil_not_in_toc" id="nav_point_337">纸电图书组合购买</h3>
<p class="zw">社区独家提供纸质图书和电子书组合购买方式，价格优惠，一次购买，多种阅读选择。</p>
<p class="图"><img alt="图像说明文字" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/274.png"></p>
data/前端体验设计/欢迎来到异步社区！/4.社区里还可以做什么？/text.html 0 → 100644
浏览文件 @ ad964382
<h3 class="sigil_not_in_toc" id="nav_point_339">提交勘误</h3>
<p class="zw">您可以在图书页面下方提交勘误，每条勘误被确认后可以获得100积分。热心勘误的读者还有机会参与书稿的审校和翻译工作。</p>
<h3 class="sigil_not_in_toc" id="nav_point_340">写作</h3>
<p class="zw">社区提供基于Markdown的写作环境，喜欢写作的您可以在此一试身手，在社区里分享您的技术心得和读书体会，更可以体验自出版的乐趣，轻松实现出版的梦想。</p>
<p class="zw">如果成为社区认证作译者，还可以享受异步社区提供的作者专享特色服务。</p>
<h3 class="sigil_not_in_toc" id="nav_point_341">会议活动早知道</h3>
<p class="zw">您可以掌握IT圈的技术会议资讯，更有机会免费获赠大会门票。</p>
data/前端体验设计/欢迎来到异步社区！/5.加入异步/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">扫描任意二维码都能找到我们：</p>
<p class="图"><img alt="图像说明文字" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/275.png" style="width: 50%" width="50%"></p>
<p class="图题">异步社区</p>
<p class="图"><img alt="图像说明文字" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/276.jpg" style="width: 50%" width="50%"></p>
<p class="图题">微信订阅号</p>
<p class="图"><img alt="图像说明文字" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/277.jpg" style="width: 50%" width="50%"></p>
<p class="图题">微信服务号</p>
<p class="图"><img alt="图像说明文字" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/278.png" style="width: 50%" width="50%"></p>
<p class="图题">官方微博</p>
<p class="图"><img alt="图像说明文字" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/279.png" style="width: 50%" width="50%"></p>
<p class="图题">QQ群：368449889</p>
<p class="zw"><strong>社区网址：</strong><a>www.epubit.com.cn</a></p>
<p class="zw"><strong>官方微信：</strong>异步社区</p>
<p class="zw"><strong>官方微博：</strong>@人邮异步社区，@人民邮电出版社-信息技术分社</p>
<p class="zw"><strong>投稿&咨询：</strong>contact@epubit.com.cn</p>
<p class="zw"><br style="page-break-after:always"></p>
\ No newline at end of file
data/前端体验设计/欢迎来到异步社区！/text.html 0 → 100644
浏览文件 @ ad964382
<h1 id="nav_point_330">欢迎来到异步社区！</h1>
data/前端体验设计/第01章 超越平凡的Web设计/1.硬派的作风/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">身为侦探的主角们每天的工作，就是用枪指着别人的太阳穴，或者一拳揍烂坏蛋的五脏六腑。别人搞不定的事情，只要主角出马准能办成。他们不需要规则，那是为胆小鬼和无能警察准备的东西。</p>
<p class="zw">硬汉侦探有时会和警察一起破案，但硬汉总是深入险境，因为在必要的时候，他们从不受条条框框的限制，从来都是按照自己的规则来破案。当然，法律、法规和惯例很重要，但有时只有通过伸张正义才能获得实现这些规则。当人们不能做那些他们认为正确的事情时，人们就需要这些不畏险境的英雄出手相救。</p>
<p class="zw">这些英雄们特别擅长做警察和其他人搞不定的事情，因为他们的行动并不受规则及惯例的限制。我们为他们加油打气，并全力支持，不管这些人多么不羁和残酷，因为我们需要他们。作为前端工程师，我们可以从这些硬汉身上学到很多东西，本书的灵感便来源于此。</p>
data/前端体验设计/第01章 超越平凡的Web设计/2.硬派的设计/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">为了创造最好的设计体验而永不妥协，才称得上够硬派。推翻限制、打破或创造新的规则，毫不畏惧，这才是我们的本色，并且要让网站在任何可能的情况下都具有更强的适应性。在这个套路里，需要毫不犹豫地充分利用新技术。</p>
<p class="zw">说起来简单，做起来并不容易，但如果你已经准备好挑战自己，深呼吸，稳住神，准备迎接一个漫长的夜晚吧。</p>
data/前端体验设计/第01章 超越平凡的Web设计/3.致故步自封的人/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">无论是在现实生活中和还是在虚拟网络中，我们需要规则、约定和标准。但是，我们应该利用它，而不是定义它，更不是限制它。虽然网络已经有25年的历史（当我在写这段的时候），我们已经提出了它的标准，例如W3C标准组织，充当了所谓的Web标准技术，如HTML、CSS和JavaScript的监护人的角色。</p>
<p class="zw">我们还建立了一系列最佳实践，如移动优先、渐进增强和响应式Web设计等，指导人们使用这些技术来构建极富可用性——跨浏览器兼容、方便残障人士、视觉上更吸引人、搜索引擎优化——的网站。</p>
<p class="zw">但是，世界还远远不完美，这些标准和最佳实践至今都也只是“建议”，W3C甚至使用这个词来形容他们维护的规范。</p>
<p class="zw">除了迫于同行的压力和常识之外，并没有法人实体或者其他机构可以强制浏览器厂商和互联网专业人员采用这些标准并做出最佳实践。如果这本书是为他们写的，这将是一个完全不同的书。</p>
<p class="zw">当我五年前第一次写这本书的时候，Web设计的标准做法是，创建一个在所有浏览器中看起来和用起来都相同的网站，而不去管它们的性能如何。要做到这一点意味着要委曲求全，例如需要避免使用某些技术，因为有些浏览器不支持此项技术。</p>
<p class="zw">这就让你心满意足了么？</p>
<p class="zw">当然不行！这个套路无法让你建立出色的网站，并且这种过时的做法阻碍了我们的进步，让我们不思进取。作为互联网的守护者，我们所做的最糟糕的事，莫过于不思进取的老旧观点无动于衷。</p>
<p class="zw"><span style="font-family: Times New Roman,楷体_GB2312">“我们必须做我们的老板和客户想做的事儿！我们要做他们所期望的事情！”</span></p>
<p class="zw">在这方面我算是个老手了。我深知，在帮助客户实现想法的时候，完全可以使用最新的Web特性，充分展示我们的创造力。这才是硬派的Web设计。</p>
<p class="zw">在寻找超越习以为常的方法之前，让我们扪心自问，为什么我们对待全新的Web技术会如此谨慎？</p>
data/前端体验设计/第01章 超越平凡的Web设计/4.你也在抱怨吗？/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">当我的第一本书《超越CSS》在2006年出版的时候，支持CSS3新特性的浏览器还非常少。只有Firefox支持CSS3多栏布局，只有Safari浏览器支持多背景图片。《超越CSS》中由于提及这两个高级CSS属性而在业界广受赞誉。</p>
<p class="zw">等我五年后写了本书的第一版的时候，情况已经完全不一样了。早期独领风骚的IE桌面浏览器，其市场份额不断萎缩，其竞争对手的浏览器此时已经取得优势，移动端浏览器也在快速发展。</p>
<p class="zw">彼时我们有一系列很棒的CSS属性，并且大部分已经得到了浏览器的支持，包括IE9。此外，还有很棒的CSS工具任由我们使用。你可能会想，我们可以利用这些条件来做些伟大的事情。</p>
<p class="zw">事实上呢？并非如此。我们中的大多数人总是盯着做不到的事情，而不是我们能做的。很多人抱怨局限性，而不是拥抱可能性。大多数人不停地埋怨，而不是感到兴奋。</p>
<p class="图"><img alt="" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/8.jpg"></p>
<p class="图题">使用基于Web标准的HTML、CSS和JavaScript，能创作出令人怦然心动的作品，例如Bryan James创作的的“30个CSS碎片拼图，30种濒危灭绝动物”。</p>
data/前端体验设计/第01章 超越平凡的Web设计/5.你还在用老套路吗？/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">网页设计和开发变革的速度前所未有。HTML、CSS和JavaScript等技术已经发展成熟。</p>
<p class="zw">使用智能手机和平板电脑来访问网站和APP的人数呈井喷式增长，且已经超过了PC端的访问数量。响应式Web设计已经不再仅仅是一个概念，而是一个被广泛接受的网站设计方法。</p>
<p class="zw">Web设计和开发的方式正在发生巨大的变化，针对响应式设计的要求，许多设计师抛弃了以往从设计页面开始的方式，转变为从设计组件化系统着手。我们已经彻底改造了HTML和CSS样式指南，把它们变成了成熟的模板库，它们就是你的设计工具，而不再是简单的文档。</p>
<p class="zw">为了管理大型网站的样式表，开发人员使用Sass为CSS添加了继承、混入和变量，他们还为HTML和CSS引入了命名方法，包括BEM（块、元素，修饰符），这使得HTML元素和CSS样式之间的关系更加清晰。</p>
<p class="zw">最后，我们不再需要说服老板使用响应式Web设计——因为是他们要求这样做的。</p>
data/前端体验设计/第01章 超越平凡的Web设计/6.打破传统/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">在接下来的几章，针对如何使用新兴技术这一话题，我会挑战一些早已被普遍认同的想法。然后，我会制定一个计划，即如何在创造性地推进工作的同时，满足所有人的需求。</p>
<p class="zw">我热衷于使用最先进和最新的工具来做出最好的设计，因此我可能会有话直说，所以别指望我会轻声细语地告诉你。</p>
<p class="zw"><br style="page-break-after:always"></p>
\ No newline at end of file
data/前端体验设计/第01章 超越平凡的Web设计/text.html 0 → 100644
浏览文件 @ ad964382
<h1 id="nav_point_18">第1章　超越平凡的Web设计</h1>
<p class="zw">在孩提时代，我就对侦探小说很着迷。是的，侦探小说。既不是乡间别墅谋杀案，也不是密室推理小说，这些类型的小说从来都不是我喜欢的风格。我所指的是雷蒙德•钱德勒（Raymond Chandler）、达希尔•哈米特（Dashiell Hammett），以及我个人最喜欢的米奇•斯皮兰（Mickey Spillane）等作家所创作的那种坚韧有力的小说。</p>
<p class="zw">现在回到本书的最开始，读一读那段引言，那可不是我在参加客户会议或W3C CSS工作组会议时所做的笔记，尽管直接使用笔记的内容很容易。那段话摘自我最喜欢的一部侦探小说——米奇•斯皮兰（Mickey Spillane）所著的经典“硬汉”侦探小说《My Gun Is Quick》。</p>
<p class="zw">即便不是侦探小说迷，你应该也听说过或者看过一些“硬汉”电影。你或许熟悉亨弗莱•鲍嘉（Humphrey Bogart）刻画的私人侦探 Sam Spade。这部电影改编自达希尔•哈米特于1941年出版的小说《马耳他之鹰》。这是历史上非常精彩的一部侦探电影，仅次于那部《谁陷害了兔子罗杰》。</p>
<p class="zw">演员斯塔西•基齐（Stacey Keach）的表现如何呢？20世纪80年代，他在Spillane的电视剧《Mike Hammer》中的表演算不上硬气，然而总比没得看强。</p>
<p class="zw">没错，就是下面这个家伙。</p>
<p class="图"><img alt="0101.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/7.jpg"></p>
<p class="图题">你对这类小说感兴趣吗？我真希望你立马就去读一读，可以从那些经典的小说开始，越老越好，例如小说家达希尔•哈米特的《马耳他之鹰》或雷蒙德•钱德勒的《长眠不醒》。对怪咖侦探、贵妇与警察内鬼的故事感兴趣吗？Mickey Spillane的小说是我的最爱。你可以从《My Gun Is Quick》和《复仇在我》开始。</p>
<p class="zw">从20世纪20年代开始，硬汉派侦探小说就充斥着暴力、犯罪场面。罪犯虽然凶狠，但英雄也充满了个性，他们从不掩饰真相，从不耍小聪明。作为读者，我们需要知道真相，不管事实是多么腐败不堪。</p>
<p class="zw">各种硬汉派侦探小说里的这些主角让我着了迷，如Hammett描写的Sam Spade，Chandler笔下的Philip Marlowe，特别是Spillane小说里所描写的Mike Hammer。</p>
data/前端体验设计/第02章 Web设计的峥嵘岁月/1.渐进增强/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">同年早些时候，Steve Champeon 开始推广渐进增强概念。他同Jeffrey Zeldman一样，是Web标准的创建人之一。</p>
<p class="zw"><span style="font-family: Times New Roman,楷体_GB2312">“与其优雅降级，不如渐进增强。首先为最新的、不同功能的设备构建文档，通过单独的逻辑继续增强这些文档表现。不要让基准设备承担过多的责任，而应该让使用现代浏览器的用户拥有更加丰富的体验。”</span></p>
<p class="zw">许多人将渐进增强概念视为设计开发网站的理想方法。从对Web特性支持较少的浏览器上开始，设计一个仅能提供最基本体验的网页，然后再在高级和现代浏览器上，根据其所支持的特性，实现不同细节的分层设计。</p>
<p class="zw">这意味着在实际操作时，优先使用老旧浏览器支持较为成熟的CSS选择器和属性，而对于较新的属性则谨慎使用。理论上这种渐进增强的方法是行得通的，但是在实践中，我们又该如何选择不同的增强方案，才能发挥这种设计原则的最大潜力？尽管Steve在文章中使用了术语“包容性的网页设计”，但我确信，他从未打算让我们与功能差劲的浏览器纠缠，限制我们的渐进增强创作思路。就算他提过这样的想法，你能猜猜他和Dave的那些文章是什么时候的吗？2003年！</p>
data/前端体验设计/第02章 Web设计的峥嵘岁月/2.时代更迭/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">2003年，巨大的30GB容量的iPod可算是个潮物，在那一年，如果你的工作是设计、开发网页或者仅仅是浏览网页，你肯定使用过下面这些软件。</p>
<ul>
<li class="第1级无序列表">Mac OS X 10.2 (Jaguar)</li>
<li class="第1级无序列表">Windows XP (SP2)</li>
<li class="第1级无序列表">Adobe Photoshop CS</li>
<li class="第1级无序列表">Macromedia Dreamweaver 7</li>
<li class="第1级无序列表">Microsoft FrontPage 2003</li>
<li class="第1级无序列表">Internet Explorer 6</li>
<li class="第1级无序列表">Apple Safari 1</li>
<li class="第1级无序列表">Mozilla Phoenix/Firebird</li>
<li class="第1级无序列表">Opera 7</li>
</ul>
<p class="zw">随着时间的流逝，我们会不断升级软件，然而在实践渐进增强方面，我们总是固执地坚守着以前的常识。</p>
<h3 class="sigil_not_in_toc" id="nav_point_28">沉醉其中</h3>
<p class="zw">这并不是说渐进增强不值得称赞，事实恰恰相反。</p>
<ul>
<li class="第1级无序列表">基本内容和功能应该总是可访问的。</li>
<li class="第1级无序列表">应该使用简洁、清晰和语义化的标记。</li>
<li class="第1级无序列表">样式表应该可以实现视觉设计的所有方面。</li>
<li class="第1级无序列表">网页的交互行为应尽可能交给脚本来完成。</li>
</ul>
<p class="zw">我们在开发时遵循这些原则，页面的可用性或可访问从来不依赖CSS或者JavaScript。当我们使用有意义的HTML标签时，它将变得更轻量、更具有适应能力。CSS使得在各种尺寸和类型的屏幕上的排版更容易。</p>
<p class="zw">渐进增强的理念不止如此，然而我们必须小心谨慎，不要因为坚持其原则或应用其理念而限制了自己的创造力，特别是在视觉设计方面。我们必须不断地重新评估如何应用这些原则，从而避免我们的作品变得平庸。</p>
data/前端体验设计/第02章 Web设计的峥嵘岁月/3.老旧浏览器和过时设备/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">Zoe Gillenwater在她的演讲“使用弹性布局提高响应能力”中提到了CSS中flexbox布局的应用，她提倡使用弹性布局在设计中实现渐进增强。但问题是，在渐进增强实践中，往往会为了迁就还在使用老旧浏览器和过时设备的用户，而放弃使用先进的CSS属性，甚至放弃使用flexbox这样强大的工具。</p>
<p class="zw">增强或改善，往往意味着从底部开始。仅仅针对各种浏览器普遍支持的特性进行Web设计是远远不够的，这也是造成当今许多网页如此平庸的原因。我们使用新的CSS特性作为一种工具时，需要为使用新浏览器和设备的用户设计更多、更好的体验，就如Dan Cederholm所说“为新版浏览器用户提供增强的文档，以便让他们获得更加丰富的体验。”</p>
<p class="图"><img alt="0201.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/9.jpg"></p>
<p class="图题">在过去的几年里，Zoe提出了很多非常有指导意义的Flexbox实战案例，具体查阅：zomigi.com/publications/#pub-fwd。</p>
<p class="zw">因为我们首先开始为老旧的浏览器设计，所以离最终的卓越设计还差着十万八千里。</p>
<h3 class="sigil_not_in_toc" id="nav_point_30">抖个机灵</h3>
<p class="zw">我们绝不能被那些老旧的浏览器与过时的设备限制了创造力。相反，我们应该利用新技术，为每一位用户的每一次浏览，设计出最好的体验。这样我们可以充分利用一切能力更强的浏览器和新兴技术，实现更高和更优的设计。</p>
<p class="zw">我猜你现在肯定在想优雅降级的事儿？</p>
<h3 class="sigil_not_in_toc" id="nav_point_31">踌躇不前</h3>
<p class="zw">渐进增强的另一面——优雅降级——确保当样式和脚本不可用或无法被浏览器解析时，用户依然可以访问网页的内容。采用优雅降级方法，意味着网站的功能永远都是可用的，尽管一定程度上也许是低保真的设计，好在它的内容仍然可以访问。</p>
data/前端体验设计/第02章 Web设计的峥嵘岁月/4.优雅降级就够了么？/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">在老旧的或功能较弱的浏览器中，考虑可用性是我们能做的最基本，也是最重要的部分。但是优雅降级这个术语，意味着我们应该妥协。</p>
<p class="zw">去xx的优雅。</p>
<p class="zw">硬派的方法，是进一步推进优雅降级，并发挥我们的创造天赋去设计，不仅只针对设备的屏幕大小，而且也要考量其浏览器的功能。我们需要重新理解优雅降级，并面对今天这个领域所遇到的挑战。</p>
<p class="zw">如果要创建令人期待且鼓舞人心的网站，我们必须打破过往渐进增强和优雅降级的经验藩篱。只是鼓励人们去使用高性能或者对Web特性支持良好的浏览器，是远远不够的。</p>
<p class="zw">相反，我们应该充分利用新的技术，并且精心设计每一次用户体验，以便于充分发挥用户使用的浏览器的潜力。这可能意味着最终页面跟设计稿有很大不同，有时在不同的浏览器或设备上差异更大。</p>
<p class="zw">对于一些人来说，这种方法似乎太激进，甚至有些偏执。但这种方法更好地利用了当今的技术，充分释放创造性，令用户体验和设计达到更高水平，并让我们开发出更鼓舞人心和富有想象力的网站与应用。</p>
data/前端体验设计/第02章 Web设计的峥嵘岁月/5.拥抱新特性/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">在渐进增强和优雅降级的概念刚提出时，网络是一个与今日完全不同的环境。在浏览器新特性支持领域，两款竞争的浏览器间鲜有差异。而今天一切都改变了，优秀的现代浏览器支持各种Web特性，而老旧的浏览器的支持性很差，二者之间的鸿沟越来越大。下面是一些最新的CSS选择器和属性，在现代浏览器中有着稳定和良好的表现。</p>
<ul>
<li class="第1级无序列表">对任何元素的选择器绑定样式不再使用<code>id</code>跟<code>class</code>属性。</li>
<li class="第1级无序列表">以多种方式实现透明效果，包括RGBa、<code>opacity</code>属性和CSS滤镜。</li>
<li class="第1级无序列表">以更多的方式让背景跟边框一起生效。</li>
<li class="第1级无序列表">使用偏移、旋转、缩放和拉伸，实现元素变形。</li>
<li class="第1级无序列表">应用过渡特效，实现微妙的交互效果。</li>
<li class="第1级无序列表">制作以前只能通过JavaScript或Flash实现动画的逐帧动画。</li>
</ul>
<p class="zw">当前桌面浏览器对CSS属性的支持情况</p>
<p class="图"><img alt="0202.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/10.jpg"></p>
<p class="zw">CSS作为高自由度的创作工具，帮助我们实现了很多惊艳的Web体验。如果在创作中不充分利用它们，是多么短视和愚蠢啊。如今，在掌握这些技术的前提下，我们为什么不去使用这些属性呢，哪怕只用其中的一个。</p>
<p class="zw">那么到底是什么在阻止我们?</p>
<p class="zw">只不过是几个陈旧的想法罢了。</p>
data/前端体验设计/第02章 Web设计的峥嵘岁月/6.打破传统/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">渐进增强和优雅降级，都不应该被教条或不经大脑地应用在我们的Web设计中。相反，它们提供了一个新的起点，而现在，我们要重新定义响应式设计的原则，以适应不断变化的网络。</p>
<p class="zw"><br style="page-break-after:always"></p>
\ No newline at end of file
data/前端体验设计/第02章 Web设计的峥嵘岁月/text.html 0 → 100644
浏览文件 @ ad964382
<h1 id="nav_point_25">第2章　Web设计的峥嵘岁月</h1>
<p class="zw">渐进增强一直是现代Web开发的基础之一，我第一次接触到这个概念是在Dave Shea的博客上,当时他介绍了所谓的MOSe——Mozilla、Opera和Safari增强。你应该对Dave有所耳闻，就是他创造了CSS禅意花园。</p>
<p class="zw">Dave是这样解释MOSe方法的：</p>
<p class="zw"><span style="font-family: Times New Roman,楷体_GB2312">“在IE浏览器上创建一个基本的功能页面，你可以在拥有高级选择器的现代浏览器里添加额外的功能，等等，这是我们可以在未来几年持续前进的唯一方法，让我们拥抱它吧。”</span></p>
<p class="zw">Dave建议我们应该首先为低级浏览器创建一个最低可用页面，尤其针对IE的早期版本，然后在支持CSS的子选择器、兄弟选择器和属性选择器的现代浏览器里应用更多的样式。你会注意到，Dave讨论页面应该如何工作，而不是应该如何设计。</p>
data/前端体验设计/第03章 Web标准之路/1.不存在CSS3规范这样的东西/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">与CSS的早期版本相比，CSS3不是一套单一独立的规则，它被划分为了多个模块。CSS工作组根据优先级分别开发每个模块：</p>
<p class="zw"><span style="font-family: Times New Roman,楷体_GB2312">“CSS2以后，W3C Recommendation Track单独地提出了一系列开发中的模块，其中包括语法模块、级联和继承，当然还包括打印、页面布局和呈现等许多方面。”</span></p>
<p class="zw">CSS3的模块化是件好事，这样浏览器厂商可以按照他们的时间表，逐步发布新的功能。这对我们来说也是件好事，因为这允许我们逐步地熟悉和使用每个模块，而不是等待完整的大而全的规范。</p>
data/前端体验设计/第03章 Web标准之路/2.标准制定/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">CSS工作组的章程上显示了目前正在开发的模块，这不是一个详尽的清单，我选择了与我们最相关的10个模块。</p>
<table border="1" width="90%">
<tbody>
<tr>
<td><strong>CSS 动画</strong></td>
<td>w3.org/TR/css3-animations</td>
</tr>
<tr>
<td colspan="2">使用关键帧，随着时间的推移改变css属性值来实现动画。这些关键帧动画的行为可以通过指定时间、重复的次数、重复的行为来控制</td>
</tr>
</tbody>
</table>
<table border="1" width="90%">
<tbody>
<tr>
<td><strong>CSS 背景和边框</strong></td>
<td>w3.org/TR/css3-background</td>
</tr>
<tr>
<td colspan="2">使我们能够控制背景图片的大小、重复一个合适的背景图、在盒模型的边框和圆角上使用背景图</td>
</tr>
</tbody>
</table>
<table border="1" width="90%">
<tbody>
<tr>
<td><strong>合成和混合</strong></td>
<td>w3.org/TR/compositing</td>
</tr>
<tr>
<td colspan="2">混合模式允许我们使用若干个元素来做混合背景，你可以在Adobe Photoshop里找到类似的工具</td>
</tr>
</tbody>
</table>
<table border="1" width="90%">
<tbody>
<tr>
<td><strong>滤镜效果</strong></td>
<td>w3.org/TR/filter-effects</td>
</tr>
<tr>
<td colspan="2">使用CSS来为元素添加滤镜效果，像Adobe Photoshop里的滤镜工具一样</td>
</tr>
</tbody>
</table>
<table border="1" width="90%">
<tbody>
<tr>
<td><strong>CSS 弹性布局</strong></td>
<td>w3.org/TR/css3-flexbox</td>
</tr>
<tr>
<td colspan="2">CSS布局中一个重要的新工具，弹性布局使我们能过轻松实现水平和垂直两个方向上元素的排列</td>
</tr>
</tbody>
</table>
<table border="1" width="90%">
<tbody>
<tr>
<td><strong>CSS 栅格布局</strong></td>
<td>w3.org/TR/css3-grid-layout</td>
</tr>
<tr>
<td colspan="2">一种将可用空间划分成列和行的新标准，我们这本书不详细介绍CSS栅格布局</td>
</tr>
</tbody>
</table>
<table border="1" width="90%">
<tbody>
<tr>
<td><strong>CSS 多列布局</strong></td>
<td>w3.org/TR/css3-multicol</td>
</tr>
<tr>
<td colspan="2">无需额外标记来生成伪列，并控制它的数量和宽度，以及列间距和分配器</td>
</tr>
</tbody>
</table>
<table border="1" width="90%">
<tbody>
<tr>
<td><strong>CSS 形状</strong></td>
<td>w3.org/TR/css-shapes-1</td>
</tr>
<tr>
<td colspan="2">使我们能够在CSS文本流周围设置形状。形状可以是几何图形、多边形或者长方形，也可以通过alpha通道图像来创建</td>
</tr>
</tbody>
</table>
<table border="1" width="90%">
<tbody>
<tr>
<td><strong>CSS 转换</strong></td>
<td>w3.org/TR/css3-transforms</td>
</tr>
<tr>
<td colspan="2">匹配许多SVG提供的控件，CSS通过这个模块去控制元素的移动、旋转、缩放和倾斜</td>
</tr>
</tbody>
</table>
<table border="1" width="90%">
<tbody>
<tr>
<td><strong>CSS 过渡</strong></td>
<td>w3.org/TR/css3-transitions</td>
</tr>
<tr>
<td colspan="2">和动画不同，CSS过渡使一个属性使用css来代替脚本，在两种状态间平滑过渡，例如在正常和划过之间改变超链接的颜色</td>
</tr>
</tbody>
</table>
data/前端体验设计/第03章 Web标准之路/3.厂商特定的前缀/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">我在后面的章节展示CSS，你很快就会发现一个反复出现的主题——并不是所有的浏览器都支持用同一种方式来使用相同的属性，例如，Edge和Safari在Mac OS X和iOS上原生支持多列布局。</p>
<pre class="代码无行号"><code>.content {
columns : 10rem;
}</code></pre>
<p class="zw">但是，在其他浏览器上使用多列布局，需要使用厂商特定的前缀。例如，针对Chrome、Opera和安卓浏览器，需要使用<code>-Webkit-</code>前缀，Firefox需要<code>-moz-</code>前缀。因此，要实现跨浏览器的多列布局，意味着你要先写几遍带厂商前缀的属性，然后才是W3C约定的没有前缀的语法。</p>
<pre class="代码无行号"><code>.content {
-moz-columns : 10rem;
-Webkit-columns : 10rem;
columns : 10rem;
}</code></pre>
<p class="zw">如果你觉得写多个厂商前缀的属性太繁琐，Autoprefixer是一个方便的工具，它从浏览器普及率以及可用的CSS属性支持数据来解析CSS，然后添加厂商的前缀。</p>
<p class="zw">你也可以使用Lea Verou的<code>-prefix-free</code>，只要在页面的任何一个地方引入这个脚本，它就会在需要的地方，为每一个外链或内嵌的样式表，添加那些厂商的特定前缀。</p>
<p class="图"><img alt="0301.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/11.jpg"></p>
<p class="图题">你可以根据自己的开发环境，以多种方式使用Autoprefixer。那我呢？我把Autoprefixer集成到CodeKit中，然后每天用这个工具把Sass编译成CSS。</p>
<p class="zw">标准产生之前，编写带厂商前缀的属性列表是一件很麻烦的事。因此，2010年彼得•保罗•科赫（PPK）呼吁浏览器厂商停止使用它们。</p>
<p class="zw"><span style="font-family: Times New Roman,楷体_GB2312">“厂商前缀让开发人员的样式表变得累赘。为什么我们非得用好几个声明才获得一个单一的效果呢？兄弟们，让我们停止厂商前缀这个无稽之谈，适可而止吧。”</span></p>
<p class="zw">对此我持不同的意见。如果新属性没有厂商前缀，而在每个浏览器的显示效果各不相同，那么PPK又该抱怨了。</p>
<p class="zw">难道多写几个厂商前缀属性要花很多时间吗？什么？你以为做一个专业的开发人员很容易？那么我有一个妙计：我们不写盒模型hack，但事实上，没有任何人能做到。</p>
<p class="zw">厂商前缀起初只是浏览器厂商和CSS2规范用来警告我们的，而不是让我们真地去使用它们。</p>
<p class="zw">在现实中，厂商前缀通常还是必要的，它使得我们今天可以使用新的属性。在考虑到快速变化的网络前提下，建议还是使用厂商特定的前缀，以便安全地使用这些新属性。</p>
<p class="zw"><span style="font-family: Times New Roman,楷体_GB2312">“我们不建议您在实际应用中使用这些扩展，那些未实现的CSS属性最好是用来做测试或者尝试。”</span></p>
<p class="zw">但是，网络现在最需要的不是安全，它需要我们充分利用新的标准的技术，这样我们就可以创造一些神奇的事情。</p>
data/前端体验设计/第03章 Web标准之路/4.厂商的前缀属性有效吗？/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">在标准的制定过程中，属性保留通过破折号（-）或者下划线（_）来为特定的厂商添加前缀。使用这些在样式表本身技术上是无效的，但无效的样式表相对于我们现在使用CSS标准来说，代价很小。</p>
data/前端体验设计/第03章 Web标准之路/5.浏览器标记/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">毫无疑问，一般情况下我们是受益于厂商特定前缀的，因为在W3C将新的CSS属性确立标准之前很早的时候，它们就允许我们在测试，甚至是正式的代码中使用这些新的CSS属性。</p>
<p class="zw">正如任何实验性技术一样，当浏览器厂商认为某个CSS属性不会再改变时，你就可以不再加特定前缀了。</p>
<p class="zw">然而，我们常常在样式表中保留过时的前缀，即使在多年后它们已经不再必要。比如，我们仍然会在很多网站、创作工具和框架里看到<code>border-radius</code>这个已经过时的前缀。</p>
<p class="zw">在Chrome里，仍然支持属性前缀<code>-Webkit-</code>。谷歌实现了一个系统的标记，用户必须在自己的浏览器中启用这些实验性属性。这些标记可以让你尝试新的CSS属性，同时厂商还正在不断完善它。CSS形状就是这样一个例子，并没有厂商前缀来支持形状，用户必须启用实验性网络平台功能，以便看到它们。</p>
<p class="图"><img alt="0302.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/12.jpg"></p>
<p class="图题">想在Chrome里看CSS形状或者其他实验性的特性的话，在Chrome的地址栏里输入chrome://flags/，然后在实验性平台商搜索并启用实验功能。</p>
<p class="zw">在我看来，让用户了解标记的存在这是非常罕见的。使得我们无法在生产代码中使用实验性的属性，虽然这有时在短期内造成了不便，但从长远来看，我们和我们的用户都将受益于这个实验性功能沙盒。</p>
data/前端体验设计/第03章 Web标准之路/6.打破传统/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">CSS3包含一系列独立的模块，这会让我们产生“等某个属性规范提出后再去使用这个属性”的想法。相反，通过使用厂商前缀，我们现在就可以使用这些属性，没必要等待。然而即使越来越多的新CSS属性被浏览器支持，浏览器和设备能力之间也会有一些差异。我们不能总是在用小技巧来消除这些差异，我们应该学会接受它们。</p>
<p class="zw"><br style="page-break-after:always"></p>
\ No newline at end of file
data/前端体验设计/第03章 Web标准之路/text.html 0 → 100644
浏览文件 @ ad964382
<h1 id="nav_point_35">第3章　Web标准之路</h1>
<p class="zw">人们经常误认为W3C是用来创造新技术的，但其实它是一个标准化机构，而不是创新机构，它的工作是将现有技术标准化。CSS工作组规范作家Elika Etemad总结出该组织的作用：</p>
<p class="zw"><span style="font-family: Times New Roman,楷体_GB2312">“这个工作组是为规范化而存在的。如果没有人对实现某些东西感兴趣，那么我们制定这些标准就是在浪费时间。另外，如果只有一个实施者来做这些事，我们就不可能提出跨平台的标准。”</span></p>
<p class="zw">很长一段时间以来，我都认为W3C的CSS工作组是先创新，然后发布草案和建议。例如W3C提出建议，浏览器厂商来采用它们（或者不采用），现实却是，当标准达成共识的时候才会去采用。</p>
<p class="zw"><span style="font-family: Times New Roman,楷体_GB2312">“如果CSS工作组有多个独立完整和互操作性的实现方案被广泛采用，那么它的工作就被认为是成功的。”</span></p>
<p class="zw">假设我们在意标准，并且希望我们的作品符合这些标准。那如果我们在使用某些新技术时，它的标准还没制定完成怎么办？如果我们硬要按照标准来设计，那么我们将会错过许多的创作机会。</p>
<p class="zw">因此，我们不必等待HTML或CSS模块成为W3C的议案，现在我们可以使用大多数新兴的标准。</p>
data/前端体验设计/第04章 浏览器差异化呈现/1.响应式设计/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">网站在每个浏览器上呈现不同的效果，这并不是一个新出现的观点，早在2000年，John Allsopp就开创性地提出了这个观点。</p>
<p class="zw"><span style="font-family: Times New Roman,楷体_GB2312">“每一个设计师都知道的打印媒介控件， 在Web 媒介中也同样需要，这是一个控制打印页的功能函数。我们应该拥抱变化，Web设计应该保持灵活性，不要那么多限制。首先，我们应该接受老事物的衰退。”</span></p>
<p class="zw">在这本书第1版面世发行的几个月之前，Ethan Marcotte 很巧妙地提出了几个已经存在的方法和技术，包括流式栅格、弹性媒体和媒体查询，详见《移动优先与响应式Web设计》 （<a>http://www.epubit.com.cn/book/details/1649</a>）。</p>
<p class="zw">五年后，响应式Web设计已经逐步成为网页设计的标准方法，这也是网页设计的标志性改变。它帮助设计者应对不断变化的局面，响应式设计也说服我们的老板和客户们：因为它能够解决浏览器和设备多样性带来的问题。</p>
data/前端体验设计/第04章 浏览器差异化呈现/2.浏览器支持意味着什么/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">许多组织保留着哪些浏览器支持他们的网站的数据矩阵。如今，众多浏览器和设备厂商激烈斗争，他们中的大厂重新定义了支持的含义（像英国政府数字化服务描述的那样）：内容正确显示，关键功能良好运行。</p>
<p class="zw">对于英国政府数字化服务而言，人民群众对在 Gov.uk 上获取内容和信息吐槽不断，所以他们测试了使用率在2%以上的每一款浏览器。不像其他组织有专门的质量管控团队，或者市场部门专注于他们的网站细节，使得在每个浏览器上的每一个像素都是完美的。所以他们明白了：</p>
<p class="zw"><span style="font-family: Times New Roman,楷体_GB2312">“不是所有的浏览器对网页都按照同样的方式渲染，它们在使用CSS、HTML和JavaScript 方面有不一样的地方。”</span></p>
<p class="zw">接受“并不是所有浏览器对网站的渲染方式都是一样的”这个观念，将会让我们能够抛弃像素级设计还原，专注于为每个浏览器提供恰当的体验。</p>
<p class="zw">BBC也认同像素级完美渲染的优先级，不能凌驾于内容可读性之上。它的浏览器支持分为三个级别。</p>
<ul>
<li class="第1级无序列表">级别1：支持</li>
<li class="第1级无序列表">级别2.：部分支持</li>
<li class="第1级无序列表">级别3.：不支持</li>
</ul>
<p class="zw">他们接受在这些支持级别间小的变化，甚至接受使用新兴的技术，只要他们在用户访问基本内容或功能上不妥协。</p>
<p class="zw"><span style="font-family: Times New Roman,楷体_GB2312">“使用新技术去支持新的浏览器特性，这并没有错，但是必须保证用户能访问你的基本内容。”</span></p>
<p class="zw">BBC 并没有定义新技术和新的原则。他们没有考虑一系列的浏览器支持问题，而是思考做出什么样的设计能够影响他们的用户。</p>
<ul>
<li class="第1级无序列表">对于用户来说，核心体验是什么？</li>
<li class="第1级无序列表">当检测到用户使用了支持特殊功能（例如web font、geolocation等）的现代浏览器，我们如何提高用户体验?</li>
</ul>
<p class="zw">考虑到这些特性可以开发出一个个的小功能，这带给我的感受要比浏览器分级要好得多。啰唆一句，当被客户问起我们支持哪些浏览器时，我想改一下问题：因为我们要么不支持浏览器，要么不支持他们。</p>
data/前端体验设计/第04章 浏览器差异化呈现/3.精细化设计/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">当浏览器没有实现一个新兴的特性的时候，不要完全地对它进行分级或者排斥。相同的浏览器对不同的新特性会有非常棒的支持。例如，Safari 已经完全实现了弹性布局，但是只部分支持多列布局。我们应该根据具体情况来选择使用新特性，而不是直接给浏览器分级。</p>
<p class="图"><img alt="0404.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/16.jpg"></p>
<p class="图题">caniuse.com并不是唯一的浏览器特性支持程度的查询工具，包括像 Autoprefixer 这样的编译工具，一样可以帮助我们来完成这样的工作。</p>
<p class="zw">有些时候，设计元素很重要，我们需要让每个人看到的或体验到的是一致的。比如说公司的标志logo， 这是客户想让所有人看到的，logo的颜色、logo的字形，当然还有很多没那么重要的设计元素，需要区别对待。</p>
<p class="zw">考虑到特殊属性的影响，那么问题的关键就是如何保证设计的保真度。在实践中，当我们把一个元素添加到设计中时，我们考虑的是如何让更多的人，超越一系列的浏览器，所见或所感是一致的。</p>
<p class="zw">例如，Web 字体有多重要？ 在某些场景下，字体的选择对公司标志的重要性，与内容的可读性是一样的。</p>
<p class="zw">多列布局怎么样？用CSS渲染？ 它们重要到需要每个人都得看到？或者我们可以允许它们优雅降级？或者更牛的，设计一个替代品出来？现在来考虑一下圆角、渐变和透明度，它们对你的设计保真度到底有多重要？</p>
data/前端体验设计/第04章 浏览器差异化呈现/4.弥散圆/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">在我从事Web工作之前，我曾在使用广角摄像机方面受过专业的训练，这些电影摄像机的特点是利用摇摆和倾斜运动，在图像中创造一个清晰的画面。</p>
<p class="zw">在摄影中，即使是最好的镜头也不能把光线聚在一个点上。取而代之的是，镜片将光线聚于一个点或者圆上。尽管这些圆很小，但它们仍有尺寸，这就是“弥散圆”。</p>
<p class="zw">弥散圆越大，照出来的照片会越不清晰，反之亦然。这些是高级摄影技术的基础，没有照片有完美的聚光，也无法做到真正的锐利，相反，照片只能是尽可能清晰。</p>
<h3 class="sigil_not_in_toc" id="nav_point_47">尽可能清晰</h3>
<p class="zw">虽然模块化和原子化设计被很多人采用，有时候客户还是希望我们能用Photoshop来演示如何完成网站或者应用程序的外观设计。</p>
<p class="zw">这些图像将包括每一个设计元素：品牌、颜色、各种形式的排版、背景图、边框和渐变。我们可以认为这就是高保真、清晰的设计。</p>
<p class="zw">但这些元素对设计完整性有多重要？一个特殊的字体对于一个品牌的用户体验是否至关重要？背景混合有多重要？列是真的需要吗？</p>
<p class="zw">这些决定将确定元素应该怎样跨浏览器和设备，具备不同的功能。我们致力于在他们之间达成一致，为了帮助做出这些决定，我们可以从弥散圆的原则中学习。</p>
<p class="图"><img alt="0405.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/17.jpg"></p>
<p class="图题">字体的选择对于设计的完整性有多重要？左侧使用是具有设计特色的Web字体，右侧使用的是系统字体。</p>
<h3 class="sigil_not_in_toc" id="nav_point_48">有意义的讨论环境</h3>
<p class="zw">用三个同心圆来表示比较直观。</p>
<ul>
<li class="第1级无序列表">最里面的环应该包含设计元素，这是最核心的。如果布局和排版必须保持一致，将它们放在这个圆中。</li>
<li class="第1级无序列表">在中间的圆中，放置重要的元素，但不是至关重要的，这是个人的设计经验之谈。举个文本的例子，文本被放置在CSS创建的列中，对于支持多列布局的浏览器，浏览器自动渲染列，对于不支持的浏览器，我们需要调整字体来适应没有列这种情况。</li>
<li class="第1级无序列表">最外层的元素是允许优雅降级的。如果没必要在所有的浏览器中实现背景混合或滤镜，就使用JavaScript来节省时间。</li>
</ul>
<p class="zw">我已经发现，弥散圆原则在解释浏览器之间的自然差异方面是个很有用的技术。它设置了更现实的期望和更有意义的讨论环境。最重要的是，它使大家都能够在设计的优先权方面做出更好的决定。</p>
data/前端体验设计/第04章 浏览器差异化呈现/5.提升品牌形象/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">一些公司有质量管控团队，他们确保品牌的每个像素都是完美的，浏览器的差异化体现对他们来说有损于品牌形象，这被认为不完善的。</p>
<p class="zw">这些团队的品牌价值理念，不应该还停留在跨浏览器的完美表现和保持各种设备的功能完整性。这些现在或许没改变，但迟早会到来的。</p>
<p class="zw">我们应该向老板保证，差异化会提升我们的品牌，因为我们能精确地调整用户体验。差异化为我们创造了机会，我们应该接受它。</p>
data/前端体验设计/第04章 浏览器差异化呈现/6.亲爱的客户/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">在Stuff & Nonsense工作很幸运， 我们的客户很懂技术，他们很尊重我们的工作，他们认为我们的时间和他们的钱应该花在创造性的响应式设计上，而不是浪费在高保真还原上。但并不是世界上所有的客户都像他们这样。</p>
<p class="zw">一些人对改变浏览器和设备的适应性知之甚少，我们怎么样让他们理解“不必让每个浏览器的呈现效果必须一样？ ”我经常听说，那是前端工程师应该考虑的事情。对此，我非常反对。我们的工作不是教育用户，而是设计、创造不可思议的网站。</p>
<p class="zw">如果客户提出一些棘手的问题怎么办，比如“为什么网站在不同的浏览器或者不同的设备上呈现的不一样？”你要向他解释： 这和裁缝做衣服一样，根据不同浏览器对属性的支持程度以及设备不同的尺寸，量体裁衣，这样才能合身。这样会对客户产生积极的影响，而不是让他们以为这是缺陷。</p>
<p class="zw">如果你和一个传统厂商合作，比如大商业公司、政府部门或者学校，你怎么样向他们表达你的观念：你们公司的网站是可接受的，反应良好的，甚至是专业的呢？</p>
<p class="zw">解释这些问题，远比五年前的时候简单多了。那时候，绝大部分人还使用PC，不同浏览器的差别非常难以理解。现在的情况好多了，大家使用的设备的多样性也比PC 时代多多了。</p>
<p class="图"><img alt="0406.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/18.jpg"></p>
<p class="图题">移动端浏览器使用情况，2015年2月至6月。</p>
data/前端体验设计/第04章 浏览器差异化呈现/7.打破传统/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">现实是，互联网已经改变了，我们的工作、我们的客户必须改变观念，打破以往的“一个尺寸适配所有”的方式。没有两个浏览器是完全相同，我们应该致力于开创新技术，摒弃“一个网站在所有的地方看起来都一样”的观念。</p>
<p class="zw">固执坚守以前的这种想法，将会持续地浪费我们、客户和老板的时间与金钱。这也将阻止我们拥抱新变化。为了使这种改变成为可能，我们应该解释道，这种变化不是缺陷，而是一种新的可能，通过响应式设计将提升品牌体验。</p>
<p class="zw"><br style="page-break-after:always"></p>
\ No newline at end of file
data/前端体验设计/第04章 浏览器差异化呈现/text.html 0 → 100644
浏览文件 @ ad964382
<h1 id="nav_point_42">第4章　浏览器差异化呈现</h1>
<p class="zw">长久以来，人们先入为主地认为网站在不同浏览器中的显示效果应该是一致的，而这恰恰阻碍了技术的发展。</p>
<p class="zw">Dan Cederholm 说道：“网站在不同浏览器上的呈现效果必须是一样的吗？”“不！”他很肯定。当然，他是对的。</p>
<p class="图"><img alt="0401.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/13.jpg"></p>
<p class="图题">当我们使用Safari 这种表现能力强的浏览器的时候，我们能看到@font-face属性很好地呈现出来。</p>
<p class="图"><img alt="0402.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/14.jpg"></p>
<p class="图题">当我们使用Opera mini 这种表现度不够好的浏览器的时候，web font的属性是表现不出来的。不过无所谓，反正用户也不知道真实情况。</p>
<p class="zw">那么关于体验呢？Dan 最爱的域名也回答了这个问题，“做网站需要在每个浏览器中都有相同的体验吗？（dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com）</p>
<p class="zw">当然不需要。</p>
<p class="图"><img alt="0403.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/15.jpg"></p>
<p class="图题">在这个网站上移动鼠标，实际的体验会根据你使用的浏览器而有所区别。</p>
<p class="zw">Dan也许在挑选域名上很有天分，但他不是第一个提出这个问题的人。</p>
<p class="zw"><span style="font-family: Times New Roman,楷体_GB2312">“如果要在所有的平台上做到展现一致，我们将陷入无止尽的挣扎中。我们不可能让网站在PDA和 21 寸的显示器上看起来是一样的。也不可能让它和盲文描述是一致的。尽管这些都在变化，但仍然存在浏览器厂商对W3C标准的支持不一致的情况。不去管这些，就让他们看起来不一致吧。”</span></p>
<p class="zw">Rachel Andrew 在 2002 年的时候就写道：为何直到今天，咱们仍然为同样的问题而纠结争论，特别是在屏幕如此多样化的一个时代，从电视到手机、平板、甚至是高分辨率PC。当然有些人仍然认为当我们访问某个网站的时候，在每个浏览器上呈现出来的就应当是一样的，不过他们过一段时间就会分裂成两个阵营。</p>
data/前端体验设计/第05章 组件与原子化设计/1.风格指南/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">我做Web工作之前，一直被各个公司的风格指南和品牌呈现方式所吸引。我喜欢看到多种多样的相似组件的外观，尤其是喜欢看排版定稿文档。有时候，虽然在工作中我会收到公司的品牌风格指南，但我仍然会想办法在指导原则的范围内加入自己的想法。</p>
data/前端体验设计/第05章 组件与原子化设计/10.发展Web设计风格指南/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">组件是我们开发的模板中的块元素，我们可以通过调整这些模板来制作页面。我们的设计风格，就是伴随着设计这些独的组件，并将它们建设成为模式库而发展的。</p>
<p class="zw">在过去的几年里，有些人创建了组件库。其中一些组件库已经被广泛引用，包括BBC、英国政府、MailChimp和星巴克的组件库。</p>
<p class="图"><img alt="0507.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/25.jpg"></p>
<p class="图题">英国政府服务设计手册，可以帮助他们的设计师和开发人员，实现GOV.UK网站的各个部分，并保持外观一致。</p>
data/前端体验设计/第05章 组件与原子化设计/11.原子化设计/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">Brad Frost提出的原子化设计已经成为了响应式设计的代名词。Brad第一次讨论原子化设计是在2013年，他写道：</p>
<p class="zw"><span style="font-family: Times New Roman,楷体_GB2312">“最近，我一直对接口的组成，以及如何通过更有条理的方式来构造设计系统很感兴趣。”</span></p>
<p class="zw">Brad接着描述了他的原子设计系统，是如何由原子、分子、组件、模板和页面组成的。</p>
<ul>
<li class="第1级无序列表"><strong>原子：</strong>HTML的基础，包括按钮、表单和标签等元素。</li>
<li class="第1级无序列表"><strong>分子：</strong>一组元素的组合，例如由标签、输入框和按钮组成的搜索表单。</li>
<li class="第1级无序列表"><strong>组件：</strong>一组分子组合在一起形成界面的一部分。</li>
<li class="第1级无序列表"><strong>模板：</strong>大多数组件结合形成页面级的对象。</li>
<li class="第1级无序列表"><strong>页面：</strong>测试设计系统有效性的必需品。</li>
</ul>
<p class="图"><img alt="0508.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/26.jpg"></p>
<p class="图题">Brad将原子化设计描述为“用于构建网页设计系统的方法。”这个方法由工具和模式库来创建原子化设计系统。</p>
<p class="zw">然而，并不是每个人都认同原子化的设计方式。Mark Boulton就写出了他的顾虑，我不得不同意他的说法。</p>
<p class="zw"><span style="font-family: Times New Roman,楷体_GB2312">“一致性和效率是要付出代价的。这个代价就是设计，是人类对从无到有创造作品的感觉。我描述的不是设计过程。它就像一个制造蛋糕的机器，生产出大量相同的蛋糕。虽然裹着不同的糖衣，但它们的味道都是一样的。”</span></p>
<p class="zw">当你单独地设计各个部分，那么往往很难知道它们是否能够融为一体。</p>
<p class="zw">如果人们不能一眼全览设计的全部，人们很容易感觉到设计不连贯，缺乏连通性。而且想要摆脱组件库提供的默认样式也将变得更加困难。你只需要看看基于Bootstrap和Foundation的成千上万的相似网页就能够意识到了。</p>
<p class="图"><img alt="0509.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/27.jpg"></p>
<p class="图题">做得好，组件库可能会成为非常有用的资源。Salesforce的闪电设计系统是最好的资源之一。Salesforce成立于1999年3月，是一家客户关系管理（CRM）软件服务提供商。</p>
data/前端体验设计/第05章 组件与原子化设计/12.节省时间/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">基于组件的方法使得设计初期的工作更高效。我们能够更快地原型化组件，与使用Photoshop和Sketch软件设计一套完整的页面相比，我们可以用更少的时间将它变成响应式模板。我们的项目会运行得更平稳，也将可以进行更专注的沟通，并且能够减少与客户的误会。</p>
<p class="zw">我们已经意识到，开发组件仅仅是工作的一部分，我们需要一套工具，包括一些也许很令人惊讶的静态视觉效果，以及一个灵活的工作环境。</p>
data/前端体验设计/第05章 组件与原子化设计/13.建立Web设计风格指南/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">我们发现，当使用基于组件的方法构建网页时，为了保证设计的原创性，我们需要保持设计过程轻快而简约。在设计模式库或风格指南时，很容易做得过头儿，所以我们用最简单的HTML、CSS和JavaScript建立自己的Web设计风格指南工具包。</p>
<p class="zw">为了避免复杂性，我们把设计风格和组件具化到一个页面，这让我们在通过Photoshop和Sketch验证想法时，可以尽可能地自由。</p>
<p class="图"><img alt="0510.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/28.jpg"></p>
<p class="图题">我们已经做了初步的风格指南，并可以在Github上访问。我们希望大家可以使用它，以及贡献想法来改进它。</p>
<p class="zw">为了保证Web设计风格指南的易用性，我们把风格分为以下几种。</p>
<ul>
<li class="第1级无序列表"><strong>品牌：</strong>根据屏幕断点设置不同的logo和字体。</li>
<li class="第1级无序列表"><strong>颜色：</strong>按钮、背景、边框和超链接的主要、次要、普通和重点的色调。</li>
<li class="第1级无序列表"><strong>版式：</strong>多种大小和粗细的主要和次要字体。</li>
</ul>
<p class="zw">字体元素：h1到h6的标题层级；文本样式，如导语（大号）、二级（小号）、三级（更小号）和最小号；块级元素以及列表的样式。</p>
<ul>
<li class="第1级无序列表"><strong>其他HTML元素：</strong>基本表格样式；各种类型、大小、风格和状态的表单输入框和按钮。</li>
<li class="第1级无序列表"><strong>常用组件类型：</strong>盒模型、博客、事件、新闻摘要与媒体组件。</li>
</ul>
<p class="zw">我们这里只列出了启动项目所需的样式指南，如果有需要，你也可以轻松地为新组件添加样式。</p>
data/前端体验设计/第05章 组件与原子化设计/14.只包括我们需要的/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">建立一个能用于多个项目的风格指南工具包，这通常很诱人，因为其中的许多组件（如手风琴效果、按钮或选项卡）可能会在某天派上用场。我们应该警惕：当我们把并不需要的组件增加进来时时，工具包很快就会变得臃肿。</p>
<p class="zw">目前有数十种模式库和框架可供我们选择，它们提供了大量的组件。例如，Bourbon，这个Sass库包含了Bitters和Refills这两个实用的HTML、CSS和JavaScript模式。这些组件对于实现快速原型设计非常有用，但在你把所有的这些都一股脑地推到Web设计风格指南里之前，请三思而行。每增加一个额外的组件，就意味着更复杂，以及需要维护更多的代码，所以设计风格指南里应该只包括你需要的那些，对于项目中并不需要的部分要毅然丢掉。</p>
data/前端体验设计/第05章 组件与原子化设计/15.远离复杂的框架/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">像Bootstrap和Foundation这种前端框架，可能非常适合那些需要现成的栅格和主题化的系统的人。但开发者的需求与那些用HTML和CSS工作的设计师不同。Bootstrap和Foundation功能很强大，但是设计师根本不需要它们，哪怕只是一小部分。</p>
<p class="zw">我们将通过使用自己需要的部分，来建立Web设计风格指南。如果有需要，再在这个基础上进行扩展，而不是依靠框架。我们将从颜色开始，添加排版，然后是通用组件，包括字体。在将一切融合在一起创造组件之前，我们将包括常见的HTML元素。</p>
<p class="zw">我们必须时刻谨记让事情变得简单，记住我们正在做的是一个创造性的工具，而不是开发环境。这并不意味着我们不能在合适的时候，去充分使用开发者工具，所以，如果我们习惯于把样式表拆分为Sass片段，尽管放手去做吧。只要记住，最重要的是我们在做的设计，而不是工具的复杂性。</p>
data/前端体验设计/第05章 组件与原子化设计/16.制作协作工具/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">并不是每个设计师都会编写代码，有些设计师专注于平面设计、排版和配色，而且做得很棒。尽管我觉得掌握HTML和CSS对于Web设计师非常重要，但设计师并不需要知道如何写HTML或CSS代码，哪怕一行。</p>
<p class="zw">也就是说，设计师应了解HTML和CSS这些广泛应用的现代Web设计工具。我认为，甚至让设计师参与设计这些工具更加重要。这样，他们就会知道如何使用这些工具，而不需要太多的技术知识。</p>
<p class="zw">制作工具，是一个让设计师和开发人员一起工作的好机会。毕竟，这些工具的目的是使协作更加容易。做得好的话，他们也可以减少摩擦、消除误解。</p>
<p class="图"><img alt="0511.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/29.jpg"></p>
<p class="图题">我们花时间打造的Web设计风格指南，不仅是一款实用的内部工具，还可以用于为客户做演示。</p>
<p class="zw">我们发现，Web设计风格指南不仅仅在提高设计师和开发者协同工作方面发挥了作用，它还帮助我们与客户更紧密地合作。我们意识到，客户使用我们的工具包来向别人演示工作，所以我们在工具包中加入了客户的VI和专案信息，以令它更真实。此外，我们还是用真实内容片段代替了千篇一律的占位符。</p>
<p class="zw">由于Web设计风格指南简明易懂，客户也喜欢在公司中分享它。人们通常会在多种设备上来查看我们的工作成果，这意味着我们会得到更好的反馈。我相信，我们的工作会因此而改善。</p>
data/前端体验设计/第05章 组件与原子化设计/17.打破传统/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">在过去的五年里，我们的工作、流程和工具都发生了翻天覆地的变化。我们已经学会了如何去应对响应式Web设计的需求，还学会了利用Web设计风格指南来设计网页风格和元素。在下一章，我们将从排版开始，构建一个新的网页设计风格指南。</p>
<p class="zw"><br style="page-break-after:always"></p>
\ No newline at end of file
data/前端体验设计/第05章 组件与原子化设计/2.与品牌设计规范作斗争/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">传统的风格指南覆盖了各种各样的媒体，包括包装、印刷和网络，然而这对Web设计师来说并不总是有益的。例如，我曾经参与的汇丰银行的项目。此项目全面的指南规定了产品名称——比如预收账款、高级账户和私人银行等——的字号永远不应该比银行名称更大。这条规定使得当产品被挤进只有80像素的网站横幅广告中时，名称可读性将变得很差。</p>
<p class="图"><img alt="0501.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/19.jpg"></p>
<p class="图题">Houden手袋品牌风格指南。</p>
data/前端体验设计/第05章 组件与原子化设计/3.沟通不是记录/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">多年来，我并没有满足于向客户展示静态设计稿。这些使用Photoshop或Sketch软件制作出的静态视觉，无法证明网站中设计的重要性。客户会期望最终的网站是冻结的图像的副本，事情显然不会是样。最重要的是，他们在谈话中对于设计手段所知甚少，而且很少能够对具体问题进行专注的、富有成效的讨论。</p>
<p class="zw">客户在看静态视觉时，往往容易分心。我可能需要讨论关于排版的问题，但客户却希望logo再大些；我可能想要谈论一下搜索将如何发挥作用，但他们却纠结于一张过时的产品照片。客户没有抓住重点，因为我们所讨论的静态视觉也没有重点。</p>
<p class="图"><img alt="0502.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/20.jpg"></p>
<p class="图题">houden手袋的关键网页设计。</p>
<p class="zw">过去我给客户展示静态视觉的时候，他们有时会说：“我不确定这个设计的效果。”这令人非常沮丧，尤其是我们花了几个小时对他们的设计进行了详细的再现。当我想得更深一些的时候，我发现他们所评论的往往不是重要的设计细节，不是我们选择的字体或排版方式，也不是我们使用的色彩、线条、边框或底纹。</p>
<p class="zw">当我们进一步询问客户，他们可能会说：“侧边栏应该是在左边，不是在右边。”换句话说，他们在谈论布局，但却站在整体设计的角度来表达他们的批评。为什么我感到惊讶？我期望什么？毕竟，我已经向他们展示了把各个重要部分混合在一起的设计稿。</p>
<p class="zw">我知道必须有一个更有效的方法来展示设计，并让客户专注于我需要讨论的方面。随着时间的推移，我的工作室已经建立了一种方式来做这件事情。最重要的是，我们开始展示我所说的设计风格，然后设计从布局分离出来的元组件。</p>
data/前端体验设计/第05章 组件与原子化设计/4.描述设计风格/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">查看“atmosphere”这个单词，字典会告诉你它代表“弥漫的色调、一个地方、情况的氛围，或创造性的工作”。在响应式网页设计的背景下，我觉得设计风格与布局截然不同，包括颜色、字体和纹理。我们要打破传统。</p>
<h3 class="sigil_not_in_toc" id="nav_point_57">颜色</h3>
<p class="zw">我们用色彩来营造风格，并唤起一个人在使用网站或APP时的情绪。作为交互的一部分，我们还要突出交互的行为；例如“我能点击吗？”“我已经点击了什么？”“点击之后有什么潜在危险？”</p>
<h3 class="sigil_not_in_toc" id="nav_point_58">排版</h3>
<p class="zw">设计的个性化相当一部分取决于我们选择的字体，以及如何把行高、字号、粗细和周围的空白结合起来使用。</p>
<h3 class="sigil_not_in_toc" id="nav_point_59">纹理</h3>
<p class="zw">纹理可以是像纸张、石头或木头的拟物化纹理，但也并不一定是这样。在设计风格里，纹理指的是细节，包括边框样式、阴影以及盒子模型或其他元素的形状。</p>
data/前端体验设计/第05章 组件与原子化设计/5.设计风格/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">让我们看一个设计感十足的网站：2015年的dConstruct会议网站。你认为是什么让它的视觉风格如此有特色？</p>
<p class="图"><img alt="0503.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/21.jpg"></p>
<p class="图题">此网页由Paddy Donnelly 设计，由Graham Smith建立，会议组织者为Clearleft。</p>
<p class="zw">当然，你可能第一眼就被本次会议主题“设计未来”（VISION OF THE FUTURE）中的特色插图所吸引，但也有其他方面让这个设计看起来个性十足。</p>
<ul>
<li class="第1级无序列表">字体组合：Futura (naturally)、humanist sans和Lamplighter Script。</li>
<li class="第1级无序列表">倾斜的内容容器。</li>
<li class="第1级无序列表">用活泼的方式展示演讲者。</li>
</ul>
<p class="zw">为什么我要强调2015年dConstruct会议呢？在不同尺寸的任何设备上访问这个网站，看起来都是一样的。当然，页面的排版会随着设备的尺寸变化，但是网页的整体设计风格应该保持一致，不论是在手机、平板电脑还是在PC上访问。</p>
<p class="zw">2014年，dConstruct设计风格完全不同，它采用了扁平化设计和简单的配色。选择的字体是PT Sans，无衬线字体。与当年的主题“生活与网络”文字框周围的鲜明线条非常匹配。</p>
<p class="zw">2013年和之前的dConstruct网页设计都有着完全不同的设计风格，但是每年的设计也有共同之处。</p>
<p class="图"><img alt="0504.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/22.jpg"></p>
<p class="图题">自2005年以来，dConstruct主办方在保持会议网站、回顾十年的设计工作以及如何确定一个网站的设计风格方面做了出色的工作。</p>
<p class="zw">当你仔细观察它们的颜色、字体和纹理时，设计的每一个部分都有着独一无二的个性，设计风格被跨终端地呈现出来。</p>
<p class="zw">如果说自适应设计已经告诉了我们什么，那就是我们应该承认，配色、纹理背景、边框和排版设计应该跨越屏幕尺寸保持自己的特点。换言之，设计风格不应该受布局的限制。</p>
data/前端体验设计/第05章 组件与原子化设计/6.使用前端样式指南和组件库/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">我们注意到，当我们开始用令人着迷的风格指南去设计并呈现我们的作品时，我们与客户的沟通效率将得到很大的改善。尽管风格指南几经迭代，当一个新形式的Web风格指南流行起来的时候，我们仍然饶有兴致。</p>
data/前端体验设计/第05章 组件与原子化设计/7.指导视觉识别/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">人们在媒体上维护一个组织的品牌，需要风格指南或品牌准则来保持品牌资产、安置和处理方法的一致性。这些指南通常从描述品牌的个性和价值观开始。Jamie Oliver是这样描述他的Fresh Retail Ventures品牌个性的。</p>
<p class="zw"><span style="font-family: Times New Roman,楷体_GB2312">“诚实并具有挑战性——直接、豁达、坦率；充满激情和鼓舞——对食物充满兴趣和爱，健康的生活方式；平易近人和乐趣——朴实无华、方便、充满乐趣，鼓励大家一展身手。”</span></p>
<p class="zw">大多数风格指南提供了一些logo使用或禁用示例，它们也给出了字体的使用规则，并应该让你对如何使用颜色和如何处理图像不会心存疑惑。Jamie Oliver的风格指南甚至说明了“Jamie期望所有的照片中都是新鲜的熟食，并且是在自然光线下拍摄的。”</p>
<p class="图"><img alt="0505.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/23.jpg"></p>
<p class="图题">Fresh Retail Ventures有一套严格的品牌设计规范，涵盖了广泛的品牌原则，例如包装设计，甚至语气。</p>
data/前端体验设计/第05章 组件与原子化设计/8.创建Web设计风格指南/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">可惜的是，我常常发现，品牌标识指南很少恰当地应用到Web设计上。有些指南会强迫我使用在色卡上看起来很棒、但在屏幕上看起来很不舒服的颜色。还有些情况下，特定字体不能作为网页字体，如果把它们用在网页上，会让人阅读起来很不舒适。经验告诉我，我们再做Web设计时，品牌设计规范只能作为参考，而不是标准。我们需要的是可以具体应用到网上的风格指南。</p>
<p class="zw">要清楚地说明这个问题，我认为最好举个例子。英国有个伦敦国王学院医院NHS（National Health Service，英国医疗服务体系）信托基金会，作为英国国民健康服务的一部分，意味着信托基金会的出版物必须参考NHS的品牌设计规范。</p>
<p class="zw">由于国王学院医院是一个独立的组织，其网站不必严格遵守NHS品牌设计规范。我们为其做了一个设计，体现出了基金会的价值，而不是NHS的价值。尽管NHS品牌设计规范给了我们一个起点，但是我们还需要一个适用于国王学院医院网站的风格指南。</p>
<p class="zw">品牌标识指南往往以PDF格式提供，但响应式的HTML、CSS和JavaScript，是更佳的Web设计风格指南媒介。相较风格指南文档，我们的Web设计风格指南，已经成为了一个工具，而不是纯粹记录设计风格的地方。</p>
<p class="图"><img alt="0506.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/24.jpg"></p>
<p class="图题">NHS品牌设计规范是一套全面的设计规则，涵盖了logo、字体（包括FRUTIGER的几个权重）的使用，以及如何使用照片和插图。在国王学院医院的项目中，某人设计了一套综合性的Web风格指南。</p>
data/前端体验设计/第05章 组件与原子化设计/text.html 0 → 100644
浏览文件 @ ad964382
<h1 id="nav_point_52">第5章　组件与原子化设计</h1>
<p class="zw">在过去的五年里，可以很明显地看到Web的巨大变化以及我们所做的努力。随着响应式Web设计的发展，我们的设计流程也发生了根本的变化。虽然我们的设计方法并不适合每一个人，但它已经被证明是成功的，因此在本章中，我将解释我们的流程。</p>
data/前端体验设计/第06章 Web设计规范/1.从字体开始/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">当人们看一个设计稿时，经常把焦点放在色彩鲜艳的图形和照片上，但是一个好的设计可能是因为选择了一款个性的字体。这就是为什么我们需要制定Web设计风格指南，我们在客户说一些很外行的话的时候就会用到它。我们首先关注排版元素：标题、段落、各种列表、引用、表单和表格文本，以及其他元素。</p>
<p class="zw">当我们设计版式时，通常会平衡个性和可读性。偶尔，我们会发现这两个属性融合于一个字体上，而有时需要组合使用两种字体才行。一种字体作为主要字体，而另一种字体则体现个性的一面。在工作中，我们为选择合适的字体花了大量的时间。</p>
<p class="图"><img alt="0601.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/30.jpg"></p>
<p class="图题">这种HTML字体元素集合的形式并不罕见，Jeremy Keith的Pattern Primer和Bourbin Bitter也和我们的很类似，你还会发现很多框架都采用这种方法。</p>
<p class="图"><img alt="0602.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/31.jpg"></p>
<p class="图题">在SETM Learning的设计项目中，我们采用了高度灵活的Bliss字体。在整个网站中，我们使用了它的多种风格和粗细。</p>
<p class="图"><img alt="0603.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/32.jpg"></p>
<p class="图题">在国王学院医院的项目中，我们使用了Aktiv Grotest和Lexia这两种字体，它们都来自字体设计公司Dalton Maag。</p>
data/前端体验设计/第06章 Web设计规范/10.选择颜色/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">一些客户在一个项目里带来自己的颜色集合，通常是品牌设计规范方案的形式。其他时候他们可能只有那个使用在他们logo上的单一的颜色，我们的工作就是创建一个调色板的颜色来搭配它。我希望每一个设计师都有自己的神奇的方法来创建颜色调色板。在我的工作室,我们一直在到处寻找色彩的灵感。我们已经开发了一些流程,它们帮助我们选择颜色,这些灵感来自于我们的客户，他们告诉我们有关他们的组织和他们的品牌的颜色。</p>
data/前端体验设计/第06章 Web设计规范/11.确定一组颜色/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">优秀的设计并不需要一系列复杂的颜色，相反，相对简单的配色更容易将设计感体现出来。在我们的项目中，大部分设计只包括四种颜色甚至更少。我们把选择的颜色归类以下几种。</p>
<p class="zw"><strong>主要色：</strong>最常用的品牌、超级链接和主要背景色，包括按钮。</p>
<p class="zw">次要色：经常用来表示交互元素，例如超链接的hover（鼠标悬浮）颜色和点击按钮时的背景色。</p>
<p class="zw"><strong>中性色：</strong>按钮的背景、复选框、表格条纹和其他元素。我们经常在边框和其他水平线上使用深色或浅色的中性颜色。</p>
<p class="zw"><strong>强调色：</strong>强颜色很少使用， 它经常用于与主要色的对比，如报错和警告的背景色，以及边框颜色。</p>
<p class="zw">在国王学院医院的项目中，使用的主要颜色就来源于它现有品牌的颜色，这同时也能够反过来影响NHS的品牌设计规范。</p>
<p class="zw">再次强调，依靠Web设计风格指南，就可以恰到好处地选择这些颜色。它给参与项目的设计师和开发人员提供了一个参考，并可以帮助客户向公司的其他同事解释为何选择某种颜色。</p>
<p class="图"><img alt="" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/41.jpg"></p>
<p class="图题">Adobe Color CC（color.adobe.com）是一款非常有用的工具，可以用来创建调色板。在国王学院医院项目中，我们用它来定义次要色和强调色，然后在调色板中添加了两种中性颜色，而不是一种。</p>
<blockquote class="提示 editing-block">
\ No newline at end of file
data/前端体验设计/第06章 Web设计规范/12.品牌个性采访/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">在几乎每一个项目的开始，我们都会问客户是如何看待他们自己的品牌的。我们称之为品牌个性采访,我们会这样问我们的客户：</p>
<p class="zw"><span style="font-family: Times New Roman,楷体_GB2312">“假设你的品牌是一个人。这个人可以是今天真实存在的，也可以是一个历史人物，还可以是某本书或某部电影中的虚构角色。事实上,他不一定是一个真实存在的人。”</span></p>
<p class="zw">这不是开玩笑，每次我都会拿摩根•弗里曼举例子。接下来我们问：</p>
<p class="zw"><span style="font-family: Times New Roman,楷体_GB2312">“你觉得品牌的哪个部分吸引你，以及这些特征和你想要如何表达你的品牌。”</span></p>
<p class="zw">人们常说，摩根•弗里曼迷人的地方在于他的可靠而且值得信赖。最后，我们要求人们描述出最能体现品牌的六个特征。与此同时，我们也会询问客户不想让品牌呈现出哪些特征。下面有一些特征是我们在访谈中使用的例子。</p>
<ul>
<li class="第2级无序列表">有趣但不搞笑</li>
<li class="第2级无序列表">机智但不滑头</li>
<li class="第2级无序列表">严肃但不沉闷</li>
<li class="第2级无序列表">专业但不刻板</li>
<li class="第2级无序列表">友好但不客套</li>
<li class="第2级无序列表">时尚但不浮夸</li>
</ul>
<p class="zw">我们使用这些问题的答案来在图片库中寻求合适的颜色。当我们第一次与别人合作时，可以通过安排研讨会来解决这些品牌个性的问题。如果是为一个小团队（六人）服务，我们会与每个人讨论上述问题；对于更大的团队，最好让他们分成三人或四人小组分别讨论，在会议结束时，我们把大家聚在一起对比大家的想法。</p>
</blockquote>
<h3 class="sigil_not_in_toc" id="nav_point_87">确定色调</h3>
<p class="zw">2004年5月，我在博客上的第一篇文章里描述了一项技术——从一组核心颜色着手，创建拥有更多颜色的调色板。也就是我在前一节中介绍的，如主要色、次要色、中性色和强调色。</p>
<p class="zw">自2004年以来发生了很多变化，令人难以置信，但我仍然在使用这项技术，几乎在每一个项目中都会用到。它非常简单。</p>
<ul>
<li class="第1级无序列表">创建五个方块，并用你选择的其中一个颜色去填充它们。</li>
<li class="第1级无序列表">调整方块的透明度来稀释颜色强度。我用90%、75%、50%、25%和10%。</li>
<li class="第1级无序列表">用你选择的颜色创建灰暗的色调，并把这五个方块放在一致的黑色底部上。</li>
<li class="第1级无序列表">重复上面的动作，但是这次创建亮色调，并放置在白色方块的底部。</li>
<li class="第1级无序列表">重复每个颜色设置，创建你需要的所有色调。</li>
</ul>
<p class="图"><img alt="0613.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/42.jpg"></p>
<p class="zw">在STEM Learning公司的品牌设计规范中，四种颜色分别代表科学（Science）、技术（Technology）、工程（Engineering）和数学（Math）。在品牌设计规范下，我们设计了新网站，并提炼出了一个很酷的调色板，中性色和鲜艳色形成了很美的对比。</p>
<p class="图"><img alt="0614.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/43.jpg"></p>
<p class="zw">STEM Learning品牌设计规范中的四个生动的颜色不能满足我们的需要，所以我们使用可靠的技术来丰富调色板，增加更多微妙的颜色。这种技术可能比较老旧，但事实证明，我们创造的调色板恰到好处。</p>
<p class="图"><img alt="0615.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/44.jpg"></p>
<h3 class="sigil_not_in_toc" id="nav_point_88">测试颜色的可访问性</h3>
<p class="zw">事实上，许多设计师直到项目的后期才做颜色对比和可访问性测试， 这让我很为难。对我来说，色彩对比和可访问性不应该是测试工作，而是设计任务。所以我们需要在设计过程中关注它们。使用Web设计风格指南最大的好处是，我们更早地关注可访问性，然后花更多时间纠正潜在的问题。</p>
<p class="zw">当测试颜色的可访问性时，需要确保元素的背景色有足够的对比，并且里面有一些文本。我们可以改变对比度或选择互补颜色作为背景色和前景色。</p>
<p class="zw">在国王学院医院项目的早期，背景色和前景色的对比度不足。</p>
<p class="图"><img alt="0616.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/45.jpg"></p>
<p class="zw">幸运的是，我们在把颜色调色板交给客户之前，就测试了对比度，并调整了设计。</p>
<p class="图"><img alt="0617.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/46.jpg"></p>
<p class="图题">我觉得在灰度下进行设计对于测试颜色的可访问性非常有效。这不仅让我们把注意力放在对比度上，还能让我们在排版布局时避免被干扰。</p>
<p class="zw">有一些很棒的工具可以帮助我们检查颜色组合的对比度，我个人最喜欢的是Lea Verou对比度检查器。这款工具简单便捷，适合所有人使用。</p>
<p class="图"><img alt="0618.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/47.jpg"></p>
data/前端体验设计/第06章 Web设计规范/13.添加纹理/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">当我们创建设计风格指南时，纹理指的是修饰方面，有助于让设计富有个性。纹理包括边界样式、阴影和容器的形状。当然，纹理有时也可以包括拟物设计纹理。所以当你需要时，可以制作人造革和撕纸边缘的效果。</p>
<p class="zw">边框和间隔决定着纹理。我相信所有的网站设计中都包含了边框，它们可以是<code>solid</code>、<code>double</code>或者<code>dashed</code>形式。如果要设计一个复古的外观，我们甚至可以使用早起的CSS属性，如<code>groove</code>和<code>ridge</code>、<code>inset</code>和<code>outset</code>。</p>
<p class="zw">再进一步，我们还需要决定边框的宽度，以及这些边框的宽度是否统一。对于一个设计，我们可能希望所有边框一样宽；或者，我们可能会采用不同的宽度来体现立体感。</p>
<p class="图"><img alt="0619.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/48.jpg"></p>
<p class="zw">另一个问题是，如何使用各种分界线样式来创建层次结构。在文章内部的元素<code>article</code>之间，我们可以使用虚线边界；在文章之间，可以使用实线；紧密的双边框可以表达一个层次结构。</p>
<p class="zw">背景也会影响纹理。如何给内容区域阴影使用背景？我们会使用纯色？还是渐变？或者图案？</p>
<p class="zw">盒子的设计可以使用纹理。我们把盒子做成圆角还是直角？如果是圆角，那么四个角的半径都是相等的？或者将其中一个角设计得更圆，创造出不寻常的形状?</p>
<p class="图"><img alt="0620.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/49.jpg"></p>
<p class="zw">按钮的外观关乎纹理。我们想让按钮在屏幕上看起来像个真实的物理按键吗？如果想要实现这种拟物化效果，按钮的光影应该是怎样添加？渐变会使按钮看起来很光滑？使用阴影能够将按钮从背景中突显出来吗？我们要不要给它们使用背景或使它们透明？我们会跟随时尚，并添加细的轮廓和大写按钮文本吗？</p>
<p class="zw">我们如何对待内联图像？如何给它们添加细边框？如何添加白色粗边框来模拟宝丽来相片？图标采用什么风格？使用图形或手绘?</p>
<p class="zw">这些有关纹理的设计决策，能让你的设计独一无二，它或有趣、或敏感、或严肃、或专业，但对用户总是友好的。</p>
data/前端体验设计/第06章 Web设计规范/14.静态图像的价值/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">为设计确定风格对于响应式Web设计是个优势，但它也有缺点。当我们分别关注风格和组件时，有时很难把它们形成一个统一的整体。</p>
<p class="zw">由于这个原因，设计很容易脱节，缺乏连通性。因此，我们需要基于一点来审视设计的方方面面，以防止上述情况的发生。</p>
<p class="zw">在浏览器里讨论设计和静态视觉效果，很容易使人陷入争论。事实上，代码和视觉效果缺一不可。HTML和CSS编辑器和图形工具是最有效的，我们应该使用它们。几乎在每个项目开始时，我们都会在纸上画草图，因为在早期表达想法，铅笔和纸绝对是最好的工具。</p>
<p class="zw">当确定了一个方向后，我们开始敲代码，在浏览器里尝试版式布局、原型交互元素和测试早期的设计。毫无疑问，HTML和CSS是这个阶段最好的工具。</p>
<p class="zw">在设计排版、色彩和纹理的过程中，我们几乎完全在浏览器中使用HTML和CSS，因为我们知道它给我们最真实的结果。在设计方向之间转换时我们使用代码快速迭代。当需要敏捷灵活时，我们发现代码和浏览器是目前为止最好的工具。</p>
<p class="zw">我们喜欢在浏览器中使用HTML和CSS进行设计，但对于某些环节，Photoshop或Sketch工具更好用。说出来可能吓着你，我们经常创建静态视觉效果，有时甚至是完整的Web页面，因为我们希望看到设计的整体，而它可能只是一个标题。</p>
<p class="zw">我们会制作关键页面的视觉效果，也许是文章列表或一系列产品、博客或新闻条目，有时甚至是一个主页。因为我们发现，设计关键视觉效果，会让设计更加连贯。</p>
<p class="zw">与过去不同的是，我们不会制作出所有页面的视觉效果，那样做没有什么收获，甚至是白费功夫；此外，我们也不会设计小屏或中屏版本，而仅制作台式机版本，因为静态图像从来就不是用来解决响应式设计问题的工具。</p>
<p class="zw">当要添加一些额外的设计细节时，使用静态版本的设计依然有效。并且，如果想尝试添加微妙的轮廓、阴影或底纹时，无论你的代码功夫有娴熟，还是应该使用Photoshop或Sketch，它们是不可替代的。</p>
<p class="zw">这些小细节会带来很大的改变，可以很容易地将一个普通的设计变得更有趣。现在你可能会问：“哪些方面不能在浏览器中做呢?“事实上，答案是没有。然而图形化工具环境可以让我们远离HTML和CSS代码实现中的实际问题，有助于我们更清晰地关注视觉细节。</p>
data/前端体验设计/第06章 Web设计规范/15.打破传统/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">过去五年中，网站和应用设计规范发生了巨大的变化。就像我们设计的响应式网站，设计风格、开发组件已经成为一种越来越普遍的设计实践。我们设计色彩、字体和纹理，开发Web设计风格指南和样式库，并把它们制作成工具，而不仅仅是一纸文档，这帮助我们更清楚地关注响应式断点的设计。</p>
<p class="zw"><br style="page-break-after:always"></p>
\ No newline at end of file
data/前端体验设计/第06章 Web设计规范/2.活字校样/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">选择字体只是排版过程中的一部分，在响应式Web设计时，我们需要让版式在诸多不同类型的屏幕上都清晰且可读。这不仅意味着要兼顾不同的屏幕尺寸，同时还要确保排版在低分辨率和高分辨率上显示得一样好。</p>
<p class="zw">在过去，我们花了大量的时间和心血使用Photoshop或者Sketch来打磨版式细节。今天，要想实现一个渲染准确的响应式版式，不能再依赖一款图像处理工具了。我们需要使用CSS来设计版面，然后使用HTML在不同设备的浏览器上测试。</p>
<p class="zw">我们把这种方法叫做活字校样。这些HTML和CSS文件只包含标题和段落元素。</p>
<ul>
<li class="第1级无序列表">段落字号： 12px - 21px</li>
<li class="第1级无序列表">标题字号 ：12px - 38px</li>
<li class="第1级无序列表">小文本字号 ：9px - 12px</li>
</ul>
data/前端体验设计/第06章 Web设计规范/3.测试可读性/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">活字校样不仅简单，而且易用。它们帮助我们和客户更好地协同工作，来设计出最好的排版。在协作设计过程中，我们仔细考虑适当的字号，并请客户在他们携带的设备上进行测试，同时鼓励他们邀请其他同事一起参与。</p>
<p class="zw">这里有一个案例：在国王学院医院的项目中，我们担心国家卫生服务的标注字体（Frutiger 45)在小屏幕上以较小字号显示时可能会令不易识别。因此，我们寻找了很多与Frutiger 45外观相近的开源字体，并测试了几种备选方案，最后确定使用Dalton Maag的Aktiv Grotest字体。</p>
<p class="zw">我们采用了两种活字校样，它们帮助我们在字体间做决定。第一个包含Frutiger 45,另一个是Aktiv Grotest。在我们客户使用的几个设备上并排显示来测试了两者的可读性，这帮助我们迅速做出判断，而且可能比我们看静态视觉效果更加准确。</p>
<p class="图"><img alt="0604.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/33.jpg"></p>
<p class="图题">就几分钟，国王学院医院的团队就能选择Frutiger（左边）或Aktiv Grotest（右）作为他们新设计的字体。</p>
data/前端体验设计/第06章 Web设计规范/5.决定最小和最大的尺寸/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">无论面对什么项目，遇到的第一个挑战就是为特定类型的设备选择合适的字号。我们使用活字校样来帮助决定不同尺寸屏幕上的最小或最大字号。使用什么具体的设备并不重要，确切的尺寸、型号或操作系统也不重要，它们的比例和特征才是最重要的。我们的基本字号由这些设备类型来决定。</p>
<ul>
<li class="第1级无序列表">较小的智能手机： iPhone 5s</li>
<li class="第1级无序列表">中等的智能手机： iPhone 6s</li>
<li class="第1级无序列表">较小的平板电脑： iPad mini（具有或不具有Retina显示屏）</li>
<li class="第1级无序列表">较大的平板电脑： iPad Air</li>
<li class="第1级无序列表">笔记本电脑： MacBook</li>
<li class="第1级无序列表">台式电脑： iMac</li>
</ul>
<p class="zw">显然，我们喜欢Apple产品，但如果你拥有其他相似类型的智能手机、平板电脑和个人电脑，使用活字校样也会很有效。</p>
data/前端体验设计/第06章 Web设计规范/6.测试段落、标题和文本/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">我们先看小屏幕上的段落，把能看得舒服的最小字号设置为最小字体。12px看起来太小，是因为我们的脸没有贴近设备屏幕？，那么13px或14px看起来会舒服一些吗？</p>
<p class="zw">然后，将同样大小的文字段落放到大屏幕上来看。这时观看距离会对效果有所影响，我们的眼睛通常会离大屏幕远一些，所以需要看一下字号是否仍然适合，如果不适合，我们还要增大字号来适应更远的观看距离。通过这种方式，我们可以快速为各种类型的设备选择最合适的字号。</p>
<p class="图"><img alt="0605.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/34.jpg"></p>
<p class="图题">相对于em或rem单位，客户更容易理解px，即像素， 因此我们以px为单位来设置文本字号。当然，在这个过程中，我们会把字体转换为弹性元素。</p>
<p class="图"><img alt="0606.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/35.jpg"></p>
<p class="图题">活字校样是一种简单的方法，它能够帮助我们为每种类型的设备的标题设置最大的字号。</p>
<p class="zw">使用相同的方法，还可以为标题和其他元素确定合适的字号。大标题使设计看起来更引人注目，然而它们更加适合大屏幕；小屏幕上的空间有限，每行只能显示几个词，因此需要谨慎地设置字号，不然看起来很不舒服。我们首先为小屏幕选定合适的标题字号，然后在不同的设备类型上测试。注意观察变化，一直到我们所能测试的最大屏幕。</p>
<p class="zw">对于按钮上的小文字、导航和页脚，使用相同的方法，都是先从最小的屏幕开始。</p>
data/前端体验设计/第06章 Web设计规范/7.添加CSS媒体查询/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">现在活字校样能让我们快速的确定段落排版最合适的字号，但在以前，我们可能需要打开Photoshop或Sketch。在将样式添加到网页设计风格指南之前，我们会通过CSS媒体查询来匹配我们的设备尺寸，这种方式经常帮助测试我们研究的结果。</p>
<p class="zw">我们先使用媒体查询测试了排版，下一步在与客户合作的过程中，我们会展开非正式的讨论。首先把活字校样放到不同类型的设备上，然后让客户来确认排版。我们发现，让客户参与决策有几个好处，他们更容易确认字号，因为我们鼓励客户携带自己的设备，这样我们就可以在自己手头没有的设备上测试这些排版。</p>
data/前端体验设计/第06章 Web设计规范/8.判断印刷颜色/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">印刷颜色不是指文本的颜色，而是页面上的文本块的密度。选择合适的密度不仅对设计外观很重要，同时对可读性也很重要，尤其是在响应式Web设计中，它特别有用。</p>
<p class="zw">有多种因素会影响印刷颜色：字体、字母间的间隔（在CSS中，我们称之为字母间距<code>letter-spacing</code>，在其他设计领域称为tracking），以及文本行之间的空间（在样式表里，我们称之为行高<code>line-height</code>，但在其他领域是指一些非常相似的行距)。</p>
<p class="zw">下面看看这三种因素在小屏幕上的截图。</p>
<p class="图"><img alt="0607.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/36.jpg"></p>
<p class="zw">仔细观察这个例子，你应该能看到中间的图会显得比较暗，即使它使用了与其他设备一样的尺寸和颜色。因为我们选择了某种字体，这种字体使设计看起来更黑。</p>
<p class="zw">再次使用这个例子，为了让印刷颜色变得更加明亮，我增加了行高<code>line-height</code>。这样就直接影响了排版的外观。</p>
<p class="zw">这就是告诉我们，设置响应式断点的时候，需要密切关注行高<code>line-height</code>是如何影响排版颜色和可读性的，这和我们关注的字号一样重要。</p>
<p class="图"><img alt="0608.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/37.jpg"></p>
<h3 class="sigil_not_in_toc" id="nav_point_82">调整行高</h3>
<p class="zw">根据经验，当文本的宽度变长时，我们应该增加行高<code>line-height</code>，如在不同尺寸的设备上显示，或者在相同设备的竖屏和横屏旋转。然而，通常设计师只对<code>body</code>元素设置一次行高<code>line-height</code>，而忽略调整屏幕宽度和文本长度增加的情况。我们应该不断调整行高<code>line-height</code>，在响应式断点和活字校样时就开始，在更宽的列和更大的屏幕上，增加文本的行高<code>line-height</code>。</p>
<p class="图"><img alt="0609.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/38.jpg"></p>
<p class="图题">我将跨响应式断点调整行高的过程称为比例优先（proportional leading）。我在2010年7月时第一次提出了这个概念。</p>
<h3 class="sigil_not_in_toc" id="nav_point_83">检查字体加粗</h3>
<p class="zw">随着时间的推移，高分辨率Retina屏幕变得越来越大，从iPhone 4，到iPad，然后是MacBook，最后到iMac。可是，不是每个人都那么幸运地拥有一块高分辨率显示屏。因此，设计师和开发者必须考虑在低分辨率或高分辨下，网页如何渲染。</p>
<p class="zw">活字较样再次成为检查字体跨屏幕分辨率的一种好方式。选择并使用一款时髦的细字体之后，必须确保它以低分辨率或高分辨率渲染时都能很好地呈现。</p>
<p class="图"><img alt="0610.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/39.jpg"></p>
<p class="图题">当以低分辨率渲染较细的文字时（左），我们可以通过给同一款字体加粗来修正它（右）。</p>
data/前端体验设计/第06章 Web设计规范/9.颜色的运用/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">在Web设计风格指南里，颜色是设计规范的另一个方面。用户访问网站或使用APP时，颜色可以塑造氛围，唤起用户的情绪反应。我们可以使用颜色来向用户传达交互意图，比如用户可以做、不可以做或者不应该做的事情。下面总结一下网站或APP的交互元素。</p>
<ul>
<li class="第1级无序列表">链接<code>active</code>、<code>hover</code>和<code>visited</code>状态。</li>
<li class="第1级无序列表">不同类型的表单按钮，包括<code>disabled</code>、<code>active</code>和<code>hover</code>状态。</li>
<li class="第1级无序列表">不同类型的表单输入框。</li>
</ul>
<p class="图"><img alt="0611.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/40.jpg"></p>
<p class="图题">我们可以用色彩来强调特定类型的内容，例如给这些内容添加背景和边框。</p>
<p class="zw">在设计时，颜色可以让我们通过设计来向用户传达信息，例如“可以点击什么？不能点击什么？已经点击什么？应该谨慎地点击什么?”</p>
<p class="zw">依靠Web设计风格指南，就可以恰到好处地选择这些颜色。与静态视觉方案相比，使用风格指南能让我们更加系统地考虑如何使用颜色。这对网站或APP用户非常重要，,因为他们会发现我们的设计非常简单易用。</p>
data/前端体验设计/第06章 Web设计规范/text.html 0 → 100644
浏览文件 @ ad964382
<h1 id="nav_point_73">第6章　Web设计规范</h1>
<p class="zw">当你走进房间，两个人正在为一件事争论，而你恰好知道答案，那么就会产生一种不好的氛围。一场精彩的音乐会或者足球比赛中，也会有令人难以置信的气氛。这往往很难描述，难以确定。这就是你感受到的。在设计中，气氛包括从布局中分离出来的颜色、字体和纹理。在本章中，我们将探讨气氛的概念以及学习如何设计它。</p>
data/前端体验设计/第07章 直击HTML/1.简述/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">从最简单的开始吧。首先用简短的HTML写一个文档类型的声明。</p>
<pre class="代码无行号"><code><!DOCTYPE html></code></pre>
<p class="zw">没有版本号、没有语言、没有URI，只是一个普通的HTML。</p>
<p class="zw">文档类型doctype是不区分大小写的，所以也可以写为：<code><!doctypehtml></code>、<code><!DOCTYPEhtml></code>或者<code><!DoctypeHTML></code>。</p>
<p class="zw">你知道吗，最新版本的HTML甚至不需要写doctype，你甚至可以不声明它，页面仍然有效。但不建议这样做。</p>
<p class="zw">不仅doctype变短了，字符编码也变短了。下面是一个写在HTML里面的meta元素。</p>
<pre class="代码无行号"><code><meta charset="UTF-8"></code></pre>
<p class="zw">我们不需要指定每一个link上面的每个stylesheet值，我们可以简写成这样。</p>
<pre class="代码无行号"><code><link rel="stylesheet" href="Hardboiled.css"></code></pre>
<p class="zw">因为浏览器不需要知道，我们不必要包含<code>text/javascript</code>，我们可以简写成这样。</p>
<pre class="代码无行号"><code><script src="modernizr.js"></script></code></pre>
<p class="zw">HTML不计较我们怎么写标记。是否大小写，是否大小写混用，是否忘记闭合标签，HTML都不介意。浏览器也不介意，所以按照自己的喜好来写吧。</p>
data/前端体验设计/第07章 直击HTML/10.My Gun Is Quick/text.html 0 → 100644
浏览文件 @ ad964382
<p>Mickey Spillane's second novel featuring private
investigator Mike Hammer.</p>
</aside>
</article>
<aside>
\ No newline at end of file
data/前端体验设计/第07章 直击HTML/11.Other crime fiction writers/text.html 0 → 100644
浏览文件 @ ad964382
<ul>
<li>Raymond Chandler</li>
<li>Dashiell Hammett</li>
<li>Jonathan Latimer</li>
</ul>
</aside>
</section></code></pre>
data/前端体验设计/第07章 直击HTML/12.nav/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">有了导航，浏览网站变得更加简单。当我们构建页面时，导航通常看起来是这样的。</p>
<pre class="代码无行号"><code><div class="nav—-main">
<ul>
<li><a href="about.html">What's Hardboiled?</a></li>
<li><a href="archives.html">Archives</a></li>
<li><a href="authors.html">Hardboiled Authors</a></li>
<li><a href="store.html">Classic Hardboiled</a></li>
</ul>
</div></code></pre>
<p class="zw">我们已经习惯了使用列表标记导航，但我们还使用列表标记其他事情。那么问题来了，浏览器如何区分不同的列表？</p>
<p class="zw">好在我们现在有了<code>nav</code>元素，来实现页面上的一个或多个“主要导航块”。不是所有的链接或者链接区块都是页面主导航，所以我们应该保留<code>nav</code>元素，以便帮助人们快速区分出哪里才是页面导航</p>
<p class="zw">导航可能会包含跳转最重要页面的链接列表，它可能在<code>header</code>中，可能在侧边栏，也可能在<code>footer</code>中。接下来，我们将使用充满语义的<code>nav</code>元素，取代以前的<code>div</code>布局。</p>
<pre class="代码无行号"><code><nav>
<ul>
<li><a href="about.html">What's Hardboiled?</a></li>
<li><a href="archives.html">Archives</a></li>
<li><a href="authors.html">Hardboiled Authors</a></li>
<li><a href="store.html">Classic Hardboiled</a></li>
</ul>
</nav></code></pre>
<p class="zw">当访客通过搜索来寻找内容时，我们在<code>nav</code>中添加一个搜索表单。如果我们包含跳转链接，这些也可以作为无障碍技术的主要导航区域。</p>
data/前端体验设计/第07章 直击HTML/13.figure/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">我通常会在印刷品、图片、图表、简图中配上一些说明文字。与其纠结使用什么样的元素来做图注，不如直接使用<code>figure</code>和<code>figcaption</code>元素，就像下面这样。</p>
<pre class="代码无行号"><code><figure>
<img src="jury.jpg" alt="I, The Jury">
<figcaption>I, The Jury by Mickey Spillane</figcaption>
</figure></code></pre>
<p class="zw">当我们需要注释一组元素时，我们可以嵌套多个图片、图表示意图，然后用一个<code>figcaption</code>来标记。</p>
<pre class="代码无行号"><code><figure>
<img src="jury.jpg" alt="I, The Jury">
<img src="gun.jpg" alt="My Gun is Quick">
<img src="vengeance.jpg" alt="Vengeance Is Mine!">
<figcaption>Books by Mickey Spillane</figcaption>
</figure></code></pre>
data/前端体验设计/第07章 直击HTML/14.HTML5时间和日期/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">你可以想象，在HTML里写日期如此简单。</p>
<pre class="代码无行号"><code><footer>
<small>Published by Andy Clarke on 06/05/2015</small>
</footer></code></pre>
<p class="zw">但问题是，软件很难知道这串数字是一个日期。另一方面，人们对相同的数字可能会有不同的解读，如果你来自英国，这些数字代表2015年5月6日，但如果你生活在美国，你可能认为它表示6月5日，2015年。</p>
<p class="zw">为了解决这个问题，<code>time</code>元素必须对人是可读的——不管是6 May 2015,还是May 6th, 2015——这些参数必须格式化。</p>
<pre class="代码无行号"><code><time>May 6th 2015</time></code></pre>
<p class="zw"><code>time</code>元素是由两个版本的日期或日期/时间属性构成的。首先是一个人类可读的、自然语言的日期；第二个是名为<code>datetime</code>的机器可读属性，它遵从ISO标准日期格式：<code>YYYY-MM-DDThh:mm:ss</code>。年月日后跟着的是小时、分钟和秒（如果我们需要精确的话）。</p>
<pre class="代码无行号"><code><time datetime="2015-05-06">May 6th 2015</time></code></pre>
<p class="zw"><code>time</code>元素有一段曲折的历史。在2011年首次引入HTML5中的时候，它曾遭HTML规范的抛弃，被一个更通用、且在我看来缺乏语义的<code>data</code>元素替代。好在当年晚些时候<code>time</code>元素又被加入到规范中，并增加了一些有用的额外功能。比如此前的<code>datetime</code>格式要求精确，而新支持的ISO标准格式则允许使用模糊日期。</p>
<pre class="代码无行号"><code><time datetime="2015"> means the year 2015
<time datetime="2015-05"> means May 2015
<time datetime="05-06">means 6th May (in any year)
<time datetime="2015-W1"> means week 1 of 2015</code></pre>
<p class="zw">当需要描述一个事件持续多长时间时，可以使用<code>datetime</code>属性和前缀<code>P</code>。添加后缀<code>D</code>表示天、<code>H</code>表示小时、<code>M</code>表示分钟、<code>S</code>表示秒。如果你想标记为了买火车票排了一天队的话，像下面这样写就好了。</p>
<pre class="代码无行号"><code><time datetime="P 1 D"></code></pre>
<p class="zw">下一个事件持续了1天6小时10分钟30秒。发现了吗？额外的<code>T</code>（时间）前缀表示一个更为精确的时间。</p>
<pre class="代码无行号"><code><time datetime="PT 1D 6H 10M 30S"></code></pre>
<p class="zw">通过结合精确、结构化的日期格式，日期和时间得以借助自然语言来设定，同时实现了一个对于人类和机器都可读的通用格式。</p>
data/前端体验设计/第07章 直击HTML/15.表单元素/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">哪种网站或APP将由一两个表单构成？无论你喜不喜欢，如果网站中没有表单，那着实让人难以接受。HTML5引入十多个<code>input</code>类型和属性，这令实现复杂的控制和功能——如滑块、日期选择器和客户端验证——变得更加简单。这些元素包括<code>email</code>、<code>url</code>、<code>tel</code>和<code>search</code>。不要担心老旧的浏览器，因为当浏览器无法理解这些<code>input</code>类型的时候，会自动降级为文本框。</p>
<h3 class="sigil_not_in_toc" id="nav_point_105">电子邮件<code>email</code></h3>
<p class="zw">很多场景下都需要填写电邮地址，比如联系人表单、评论表单、注册、登记表单等。选择<code>email</code>的<code>input</code>类型，来表述这些email地址。</p>
<p class="zw">现在你可以使用各种各样的有趣的功能，比如检查电邮地址的有效性，以及是否包含@符号等。在一个<code>email</code>类型输入框中输入时，Safari会自动调出虚拟键盘，@符号很直观地出现在键盘下方。</p>
<p class="图"><img alt="0702.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/52.jpg"></p>
<p class="图题">我们已经习惯了使用软键盘处理手头工作，如左图所示，iPad键盘已经包含了一个可以便捷输入email的设置键。</p>
<pre class="代码无行号"><code><input type="email"></code></pre>
<h3 class="sigil_not_in_toc" id="nav_point_106">网址<code>url</code></h3>
<p class="zw">当我们使用URL类型的输入框时——为了帮助用户专注和精准的输入网址地址——iOS软键盘会为此类型输入框提供斜杠/、句点以及.com这样的按键。</p>
<pre class="代码无行号"><code><input type="url"></code></pre>
<p class="图"><img alt="0703.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/53.jpg"></p>
<p class="图题">提升网站表单的体验，有助于让人们愿意完成输入。当使用<code>url</code>时，iPhone的键盘会自动在下方调取出.com按钮。</p>
<h3 class="sigil_not_in_toc" id="nav_point_107">电话<code>tel</code></h3>
<p class="zw">如果我们使用<code>tel</code>输入框，iOS会自动调出数字键盘。</p>
<pre class="代码无行号"><code><input type="tel"></code></pre>
<p class="图"><img alt="0704.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/54.jpg"></p>
<p class="图题">iOS做了很多细致且卓越的工作，以使键盘输入更加便捷。</p>
<h3 class="sigil_not_in_toc" id="nav_point_108">搜索<code>search</code></h3>
<p class="zw">如果网站内容太多，我们就得使用搜索框来找到所需的内容。刚好有一个输入框表单类型可以用于搜索。</p>
<pre class="代码无行号"><code><input type="search"></code></pre>
<p class="zw">在iOS系统的Safari浏览器上，<code>search</code>输入框的边角更加圆润；而在Mac OS X系统的Safari浏览器上（在别的桌面浏览器上也同样），<code>search</code>和普通文本框的外观别无二致，直到我们与之交互。在Chrome、Safari和Opera这些浏览器上，搜索查询体验会更加便捷，它们会自动在搜索框内增加一个图标，当用户点击这个图标时，就会清除已经在搜索框内输入的内容。</p>
<p class="图"><img alt="0705.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/55.jpg"></p>
<p class="zw">通过添加一些小的额外属性，可以让你定制的输入框更有范儿。比如添加<code>autosave</code>属性，为其添加一个唯一值，在我们的例子中，我们写上“gethardboiled”，然后在Safari中奇迹出现了，搜索框中不仅会添加一个放大镜图标，而且在点击它的时候，会出现一个列表，其中是近期搜索过的关键词。无论页面是否刷新，这个列表都会保存。此外，可以使用<code>results</code>属性来控制记录多少个最近搜索的关键词，在下例中，我们的表单将保存最近搜索的10个关键词。</p>
<pre class="代码无行号"><code><input type="search" results="10" autosave="getHardboiled"></code></pre>
<p class="zw"><code>search</code>输入框在样式处理上简直是臭名昭著，而其结果列表的样式在不同浏览器下也是千差万别。所以我的建议是，把这些交给浏览器来处理，不必太过渲染输入框。</p>
<p class="图"><img alt="0706.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/56.jpg"></p>
<h3 class="sigil_not_in_toc" id="nav_point_109">数字<code>number</code></h3>
<p class="zw">如果我们使用<code>number</code>输入类型，iOS会自动调出一个只有数字的键盘。但在大多数桌面浏览器中，更有趣的事情发生了。Chrome，Firefox、Opera和Safari，在<code>number</code>输入框右侧增加了输入箭头或旋钮。按下这些箭头，或使用键盘上的方向键，或者使用鼠标滚轮向上或向下滚动，即可调整输入的号码。</p>
<pre class="代码无行号"><code><input type="number" step="10"></code></pre>
<p class="zw">如果你并不需要这些箭头，你可以在Chrome、Firefox、Opera以及Safari中，使用一段非标准，但是却非常好用的CSS代码。</p>
<pre class="代码无行号"><code>input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance : textfield;
margin: 0; }</code></pre>
<p class="zw">这样一来，<code>number</code>的功能保持不变，人们仍然可以使用键盘的方向键或鼠标滚轮来调整数字。</p>
<p class="图"><img alt="0707.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/57.jpg"></p>
<h3 class="sigil_not_in_toc" id="nav_point_110">本地日期选择器Native date picker</h3>
<p class="zw">当人们在航空公司、租车服务或酒店网站上选择日期的时候，总是要耗费极大的精力和时间。HTML的原生日期选择器将会让我们不再那么痛苦。</p>
<p class="图"><img alt="0708.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/58.jpg"></p>
<h3 class="sigil_not_in_toc" id="nav_point_111">占位符文本<code>placeholder</code></h3>
<p class="zw">表单标签总会给人带来各种麻烦。我总想为没有标签文本的表单元素制作一个可视化提示。<code>placeholder</code>属性，会将提示信息添加到任何为空且失去焦点的<code>input</code>中；而不支持这个属性的浏览器会忽略这个提示文本。</p>
<pre class="代码无行号"><code><input type="search" title="Search this site"
placeholder="Search this site"></code></pre>
<p class="zw"><code>label</code>并不是必需的，当表单内容很简单的时候，它可以被标题或者明确的标题按钮所替代。</p>
<h3 class="sigil_not_in_toc" id="nav_point_112">自动焦点<code>autofocus</code></h3>
<p class="zw">像大多数人一样，当我使用Google搜索的时候，光标会自动聚焦在搜索框内；而与很多普通人不同，作为设计师，我会注意这些小的体验改进。在过去，我们必须使用脚本才能达到这样的效果，但现在完全可以使用<code>autofocus</code>属性，来以原生的方式让浏览器帮助我们实现。不支持<code>autofocus</code>属性的浏览器将会自动忽略它：</p>
<pre class="代码无行号"><code><input type="search" autofocus></code></pre>
<h3 class="sigil_not_in_toc" id="nav_point_113">自动完成<code>autocomplete</code></h3>
<p class="zw">使用<code>autocomplete</code>属性，可以以原生的方式实现自动补充的效果。</p>
<pre class="代码无行号"><code><input type="text" name="name" autocomplete="on"></code></pre>
<p class="zw">使用<code>autocomplete</code>的时候需要注意安全性，尤其在某些场景下最好不要使用，比如涉及信用卡或其他财务信息的时候。</p>
<pre class="代码无行号"><code><input type="text" name="credit-card" autocomplete="off"></code></pre>
data/前端体验设计/第07章 直击HTML/16.列表<code>list<code>和数据列表<code>datalist<code>/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">通常，帮助访客完成表单输入的最好方式，就是让他们回答问题、给出建议，或做出选择。我们来看下<code>list</code>属性，它包含一个<code>datalist</code>，在一个文本输入框上复合了一个<code>select</code>框，这样可以方便快捷地选择输入内容。</p>
<p class="zw">想象一下，当我们在表单中问访客最喜欢的侦探是谁时，为了帮助用户快速做出选择，可以在<code>datalist</code>里提供一些侦探的名字，然后给一个<code>text</code>类型的<code>input</code>添加一个<code>list</code>属性，并通过给紧邻的<code>datalist</code>设置相同的<code>id</code>，将二者联动起来。。</p>
<pre class="代码无行号"><code><input type="text" list="detectives">
<datalist id="detectives">
<option value="Mike Hammer">Mike Hammer</option>
<option value="Sam Spade">Sam Spade</option>
<option value="Philip Marlowe">Philip Marlowe</option>
</datalist></code></pre>
<p class="图"><img alt="0709.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/59.jpg"></p>
<p class="图题">访客既可以自己输入，也可以从<code>datalist</code>中选择可用的选项。如果浏览器不支持此属性，则忽略它们，只显示出普通文本输入框。</p>
<h3 class="sigil_not_in_toc" id="nav_point_115">最小<code>min</code>和最大<code>max</code></h3>
<p class="zw">在某些电商网站，购物数量被设定为一个最小值；而有的则需要设置为更大的值。添加<code>min</code>和<code>max</code>属性，就可以对数据的上下限进行控制。</p>
<pre class="代码无行号"><code><input type="number" id="book" min="1">
<input type="number" id="course" max="6"></code></pre>
<p class="zw">值得注意的是，不管在哪个浏览器中，<code>min</code>和<code>max</code>属性不能和<code>required</code>属性同时使用。事实上，我们不能把<code>required</code>属性和数字输入框一起用。</p>
<h3 class="sigil_not_in_toc" id="nav_point_116">客户端验证</h3>
<p class="zw">编写表单验证脚本是我最不喜欢的工作之一。如果可能，我宁可花钱雇人干这个脏活儿。虽然JavaScript库让这样的工作轻松了一些，但我敢打赌，即使最铁杆的JavaScript程序员，也不喜欢去开发这些脚本。如果浏览器能处理表单验证岂不更好。这不仅让开发者更轻松，还可以让那些绕过表单里的通过JS验证输入是否合法的人无从下手（因单纯为使用JS验证输入是否合法，是可以被用户人为绕过的，比如禁止掉浏览器的JS功能）。要绕过JavaScript验证，其实只需关闭浏览器的JavaScript即可。好消息是，在新的HTML标准中，已经包括了这些看起来很简单的特性，使客户端表单验证成为轻而易举之事。</p>
<h3 class="sigil_not_in_toc" id="nav_point_117">必填<code>required</code></h3>
<p class="zw">HTML5添加<code>required</code>属性后，将阻止表单提交，直到所有的属性都已正确输入。</p>
<pre class="代码无行号"><code><input type="email" required></code></pre>
<h3 class="sigil_not_in_toc" id="nav_point_118">无需验证<code>novalidate</code></h3>
<p class="zw">如果你不喜欢添加浏览器验证，简单地加一个<code>novalidate</code>标签就可以了。</p>
<pre class="代码无行号"><code><form action="search" method="get" novalidate></code></pre>
data/前端体验设计/第07章 直击HTML/17.打破传统/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">HTML5把标记带入了Web应用的时代，而实际情况远比本书所介绍的更多。例如，可以使用很多方式脱离浏览器插件来支持播放音视频文件，甚至可以离线交互等。你能走多远，取决于你的工作和人们的需求。但有一点是很明确的，HTML就在那里，如果我们想在互联网浪潮中保持领先，那就应该尽可能地利用这一开放的新技术。</p>
<p class="zw"><br style="page-break-after:always"></p>
\ No newline at end of file
data/前端体验设计/第07章 直击HTML/2.HTML中的语义元素/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">HTML5引入了一组新的元素，提高了页面的构建能力。你的文档可能仍然充满了<code>div</code>——HTML4.01规范中描述其为“附加结构机制”——对相关内容进行语义分组。</p>
<pre class="代码无行号"><code><div class="branding"> […] </div>
<div class="nav"> […] </div>
<div class="content">
<div class="content__main"> […] </div>
<div class="content__sub"> […] </div>
</div>
<div class="footer"> […] </div></code></pre>
<p class="zw">以上标签中的任何一个属性语义都是比较隐晦的，也不是机器可读的。在实践中，爬虫会认为<code>you-dumb-mug</code>和<code>content__main</code>毫无区别。</p>
<p class="zw">将来，添加<code>id</code>和<code>class</code>属性将只是简单地描述可视化布局，而不会承担语义化的任务。</p>
<p class="zw">我们可以替换一些语义更精确的结构元素来帮助减少对可视化的依赖。结果是，我们的可视化布局将会变得更简单。</p>
<p class="zw">2005年，Google调查了30亿的网页，从中找出设计师最常用的<code>id</code>和<code>class</code>属性。这些发现后来成为了HTML5的基本元素。</p>
<ul>
<li class="第1级无序列表"><code>section</code></li>
<li class="第1级无序列表"><code>article</code></li>
<li class="第1级无序列表"><code>aside</code></li>
<li class="第1级无序列表"><code>header</code></li>
<li class="第1级无序列表"><code>footer</code></li>
<li class="第1级无序列表"><code>nav</code></li>
</ul>
<p class="zw">这个列表并不全面，因为本书并不是一本HTML参考书。参考书我推荐Jeremy Keith的《HTML5+CSS3网页设计入门必读》。</p>
data/前端体验设计/第07章 直击HTML/3.section/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">挑选一个典型的Web页面的结构，我们就会发现<code>div</code>元素。这些元素组织起相关内容，帮助我们建立CSS布局。我们看一下一个老手构建的页面。</p>
<pre class="代码无行号"><code><div class="banner"> […] </div>
<div class="navigation"> […] </div>
<div class="content">
<div class="content__uk"> […] </div>
<div class="content__usa"> […] </div>
<div class="content__world"> […] </div>
</div>
<div class="footer"> […] </div></code></pre>
<p class="zw">这样垒代码是非常有效的。然而，虽然我们能理解每个<code>div</code>代表了页面上的一小块，浏览器却无法将它们和任何匿名块级元素区分开。</p>
<p class="zw">相反，<code>section</code>元素将内容组织到精确的语义块而不是通用容器中。把它们当做文档中独立且清晰存在的一部分。在下一个例子中，<code>section</code>将包含不同国家地区的新闻报道，每一篇报道与国家地区都是相关的。请注意，每一个部分都是独立的，所以我们将在每个部分中加入描述性标题。</p>
<p class="zw">如果有必要，我们可以添加<code>id</code>属性，以便通过片段标识符寻址。</p>
<pre class="代码无行号"><code>http://hardboiledwebdesign.com#content__uk:</code></pre>
<blockquote class="提示 editing-block">
\ No newline at end of file
data/前端体验设计/第07章 直击HTML/4.向BEM转换/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">如果你多年来关注我的作品，你会发现我一直痴迷于HTML的命名规则和尽量少写<code>class</code>。编写最简洁的HTML是我的信仰。</p>
<p class="zw">过去，我尽可能使用较短的<code>class</code>命名，比如我会像下面这样，使用CSS的属性选择器来替代<code>class</code>的显示声明。</p>
<pre class="代码无行号"><code>a[title="Get Hardboiled"] {
border-bottom : 5px solid #ebf4f6; }</code></pre>
<p class="zw">我使用子选择器（配合<code>></code>使用）直接定义元素子集的样式，在这个例子中，<code>ul</code>无序列表就是<code>header</code>元素的子集。</p>
<pre class="代码无行号"><code>header > ul {
list-style-type : none;
display : flex; }</code></pre>
<p class="zw">当然，我使用了很多相邻兄弟选择器。这种选择器可能已不再安全，它会把样式规则作用在近邻指定元素后方的元素上。比如下面的例子会对<code>h1</code>一级标题后的<code>header</code>元素增加一个蓝色的边框。</p>
<pre class="代码无行号"><code>h1 + header {
border-bottom : 5px solid #ebf4f6; }</code></pre>
<p class="zw">甚至有一次，我制作了一个完全没有包含任何类属性的页面，什么都没有。每每想到这里，就很同情那些不得不靠很多<code>class</code>来构建页面的开发人员。</p>
<p class="zw">在过去的几年里，我们公司参与了几个大项目，这让我意识到，良好的代码结构、HTML和CSS元素之间的关系，对于项目交付是很重要的。BEM语法或者命名公约的作用就在于此。</p>
<h3 class="sigil_not_in_toc">区块、元素、装饰器</h3>
<p class="zw">仔细看之前例子，你就会注意到，许多元素的属性值都有两条下划线或者俩个连字符。这些连字符和下划线是BEM系统的一部分，它们经常像下面这样使用。</p>
<p class="zw"><code>.block</code>用作高阶元素，包含了其他的内容和风格。例如在本书第一部分里，一个具有<code>container</code>的<code>class</code>里面将包含一些子元素，包含一些主内容和互补内容。这个<code>container</code>就是典型的BEM区块。</p>
<p class="zw"><code>.block__element</code>代表这个元素是我们的子容器。主内容和互补内容边界就是很好的例子。用两个带下划线的元素就能描述它们的边界：<code>.container__main</code>和<code>.container__complementary</code>。子元素或者特定的段落（如<code>.container__lead</code>）也可包含标题（如<code>.container__heading</code>）。</p>
<p class="zw"><code>.block--modifier</code>描述了对一个区块元素的改变。在本书网站的主页中，主容器是一个浅色背景，然而，一些属性改变了，它就变成了深色背景。我们可以通过有两个连字符的属性来做到，比如：<code>container--dark</code></p>
<p class="zw">使用这个约定可以帮助精确定义不同元素之间的关系。开发人员可以通过检查HTML结构或者通过阅读我的样式表来理解。<code>.container__main</code>显然是容器的子元素。容器标题就是<code>container__heading</code>。开发人员不需要理解<code>.container__dark</code>的目的，因为BEM语法告诉他们，这是<code>.container</code>的一个标准替代。</p>
<p class="zw">使用BEM已经改变了我的工作，尽管我仍然追求简洁的HTML代码，但我可以为此牺牲一部分严谨的代码风格。</p>
</blockquote>
<pre class="代码无行号"><code><section id="content__uk">
<h1>Stories from the UK</h1>
</section>
<section id="content__usa">
<h1>Stories from the USA</h1>
</section>
<section id="content__world">
<h1>Stories from around the world</h1>
</section></code></pre>
<p class="zw">让我们继续增加一些文章来构建文档。</p>
data/前端体验设计/第07章 直击HTML/5.article/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">当我们为博客、在线杂志或新闻网站写稿时，我们就是在发布文章。在HTML中，每篇文章都是一个独立的故事，就算没有网页中的上下文，它也应该能被人们理解。这听起来类似于<code>section</code>，但有很大的差别。<code>article</code>代表了一个故事，可以独立存在，而<code>section</code>是页面中完整的一部分，它包含多个相关文章。</p>
<p class="zw">检查<code>article</code>标记是否运用得当的方法是：看其内容本身是否有意义。例如，将之导入iPad的Pocket应用里，看它是否还具备完整的意义。</p>
<p class="zw">如果你仍然对<code>section</code>和<code>article</code>的区别有所困惑，Doctor Bruce Lawson的文章“HTML5 articles and sections: what’s the difference?”可以供你参考。</p>
<p class="图"><img alt="0701.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/51.jpg"></p>
<p class="图题">如果你有iPad，使用Pocket是阅读文章的好方式。在Pocket里，内容是独立的，并且没有广告和导航等。Mac OSX和iOS中的Safari也提供类似的功能。</p>
<p class="zw">让我们给本书归档页的大纲的每个部分各自添加一段文章。</p>
<pre class="代码无行号"><code><section id="content__uk">
<h1>Stories from the UK</h1>
<article> […] </article>
<article> […] </article>
<article> […] </article>
</section>
<section id="content__usa">
<h1>Stories from the USA</h1>
<article> […] </article>
<article> […] </article>
<article> […] </article>
</section>
<section id="content__world">
<h1>Stories from around the world</h1>
<article> […] </article>
<article> […] </article>
<article> […] </article>
</section></code></pre>
<p class="zw"><code>section</code>可以包含<code>article</code>，<code>article</code>也可以包含<code>section</code>。你想轻轻松松地学习新的HTML元素？不可能吧？</p>
<p class="zw">我来帮你梳理一下对<code>article</code>和<code>section</code>的困惑，那不是你的问题，在以下例子中，<code>article</code>元素中分为三个部分，每个都对应一个知名作家。</p>
<pre class="代码无行号"><code><article>
<section id="chandler">[…]</section>
<section id="hammett">[…]</section>
<section id="spillane">[…]</section>
</article></code></pre>
data/前端体验设计/第07章 直击HTML/6.header/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">页面的标志区域或报头可以用<code>header</code>元素来描述，通常这些标题放在页面的顶端，当然也可以放在底部或者其他地方。我们用一个更合适的<code>header</code>元素来替换经典的banner。</p>
<pre class="代码无行号"><code><header>
<h1>It's Hardboiled</h1>
</header></code></pre>
<p class="zw">我们可以在<code>section</code>或者<code>article</code>里面添加<code>header</code>元素，而且在页面里面可以有多个<code>header</code>。这意味着我们有多种使用<code>header</code>的方式：作为整页的标志；作为介绍<code>section</code>和<code>article</code>区域的引言，或者二者混合使用。</p>
<p class="zw">下面我们试试在<code>article</code>中加上“本书作者”的<code>header</code>描述。</p>
<pre class="代码无行号"><code><article>
<header>
<h1>Hardboiled authors</h1>
</header>
<section id="chandler">
<header>
<h1>Raymond Chandler</h1>
</header>
</section>
<section id="dashiell-hammett">
<header>
<h1>Dashiell Hammett</h1>
</header>
</section>
<section id="mickey-spillane">
<header>
<h1>Mickey Spillane</h1>
</header>
</section>
</article></code></pre>
<p class="zw">这个规范将<code>header</code>元素描述成“导航辅助或一组引导的容器”。让我们可以自由地包含搜索表单、时间日历组件。页面或者段落都将以此开始。</p>
data/前端体验设计/第07章 直击HTML/7.footer/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">我在2004年对一些元素的使用情况进行过调研，Google也做过类似的调研，我们都发现：大多数设计师都会标注页脚，通常包含联系人和版权信息——这就是页脚。</p>
<p class="zw">在典型的HTML4.01和XHTML1.0文档中，页脚通常会是一个<code>div</code>并带有一个值为<code>footer</code>的<code>class</code>属性。</p>
<pre class="代码无行号"><code><div class="footer"> […] </div></code></pre>
<p class="zw">我们甚至可以使用<code>footer</code>元素来替换蹩脚的<code>div</code>布局。</p>
<pre class="代码无行号"><code><footer>
<h3>It's Hardboiled</h3>
<small>Creative Commons Attribution-ShareAlike 4.0
International License.</small>
</footer></code></pre>
<p class="zw">虽然它的名字叫做页脚，但我们没必要将它放在页面、<code>section</code>或者<code>article</code>的底部。事实上，在任何一个容器元素中都可以放一个。就像<code>header</code>一样，我们可以使用<code>footer</code>来定义任何<code>section</code>或<code>article</code>中的meta信息。在<code>article</code>内部，页脚应该包含作者信息或者发布时间。而<code>section</code>的页脚应该包含文章的更新时间或新文章的添加时间等相关信息。</p>
<pre class="代码无行号"><code><section id="spillane">
<header>
<h1>Mickey Spillane</h1>
</header>
<footer>
<small>Published by Andy Clarke on 20th Nov. 2015</small>
</footer>
</section></code></pre>
data/前端体验设计/第07章 直击HTML/8.aside/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">Mickey Spillane是一名多产的小说家，如果我们要写一篇关于他工作生活的传记，我们应该在传记里包含相关的信息，比如他的小说《My Gun Is Quick》。反之，如果我们要写这本书的书评，那我们应该捎带上作者简介。HTML5使用 <code>aside</code> 来定义这种类似的关系。</p>
<p class="zw">我们可以用<code>aside</code>来描述和文章相关，但对于理解文章又不是非常重要的内容。下面让我们写一段Mickey Spillane的简介，其中<code>header</code>包含了标题，<code>footer</code>包含作者名字，以及<code>article</code>的发布日期。</p>
<pre class="代码无行号"><code><article>
<header>
<h1>Mickey Spillane</h1>
</header>
<footer>
<small>Published by Andy Clarke on 20th Nov. 2015</small>
</footer>
<p>Frank Morrison Spillane, better known as Mickey Spillane,
was an author of crime novels…</p>
</article></code></pre>
<p class="zw">像我喝的咖啡一样顺滑流畅，现在我们来添加一些<code>aside</code>，来包含《My Gun Is Quick》的信息。</p>
<pre class="代码无行号"><code><article>
<header>
<h1>Mickey Spillane</h1>
</header>
<footer>
<small>Published by Andy Clarke on 20th Nov. 2015</small>
</footer>
<p>Frank Morrison Spillane, better known as Mickey Spillane,
was an author of crime novels…</p>
<aside>
\ No newline at end of file
data/前端体验设计/第07章 直击HTML/9.My Gun Is Quick/text.html 0 → 100644
浏览文件 @ ad964382
<p>Mickey Spillane's second novel featuring private
investigator Mike Hammer.</p>
</aside>
</article></code></pre>
<p class="zw">也许我们的页面包含其他小说作家的信息。对于我们的作者简介来说，这个容器内容不是特别相关，所以我们应该把<code>aside</code>置于文章之外。在这种情况下，我们也应该在<code>section</code>元素包裹<code>article</code>和<code>aside</code>、使其申明这两个是相关的。</p>
<pre class="代码无行号"><code><section>
<article>
<header>
<h1>Mickey Spillane</h1>
</header>
<footer>
<small>Published by Andy Clarkeon 20th Nov. 2015</small>
</footer>
<p>Frank Morrison Spillane,better known as Mickey Spillane, was an author of crime novels...</p>
<aside>
\ No newline at end of file
data/前端体验设计/第07章 直击HTML/text.html 0 → 100644
浏览文件 @ ad964382
<h1 id="nav_point_93">第7章　直击HTML</h1>
<p class="zw">每天早晨，我都例行公事般地喝咖啡、收邮件和刷Twitter。我在Instagram上浏览照片，查看屏幕截图，然后上传到Dribbble。我还使用DiggReader来阅读RSS订阅，然后在Swarm上看看附近的小伙伴。这些站点都与传统意义上的网站不同，它们更像是桌面软件，而不是Web应用。</p>
<p class="zw">Web应用已经变得越来越强大和复杂，但是标记语言与早期相比没什么变化。HTML以及后来更严格的XML、XHTML，这些是用来构建网页的工具，而不是构建应用的工具。所以HTML5应运而生——我们先来介绍一点历史知识。</p>
<p class="zw">在HTML4.0发布之后，W3C关闭了HTML工作组。HTML结束了。他们认为未来是属于XML的，而不是HTML。在2004年的时候，W3C举办了一场研讨会，几个浏览器大厂都参加了。他们考虑设计一款文档语言用来开发Web应用。</p>
<p class="zw">Mozilla和Opera给出了自己的建议，但是W3C忽略了他们……</p>
<p class="zw"><span style="font-family: Times New Roman,楷体_GB2312">目前W3C不打算为HTML和CSS的Web应用投入任何资源。</span></p>
<p class="zw">但在真实世界中，浏览器厂商才有决定权，而不是W3C这样的标准组织。因此，当W3C拒绝了厂商提出的建议后，这些厂商自己组建了一个WHATWG工作组。这是一个松散、非官方且开放的协作式工作组，其成员包括苹果、Google、Mozilla和Opera。微软最初没有加入这个组织。WHATWG称其规范为WebApplications1.0。</p>
<p class="zw">与此同时，W3C的工作也在继续，他们把重心放在了文档语言XHTML2上面。虽然他们雄心勃勃，然而没有这些浏览器大厂的支持，他们的命运是注定的。正如MarkPilgrim所说“赢家是顺应潮流的人。”</p>
<p class="zw">在Web标准的制定上，浏览器厂商握有重要的牌。各厂商都在不遗余力地支持HTML5，快速开发制定规范，结果呢？HTML不仅被广泛采用，而且成为了标准，即使W3C到2022年也不认可它。</p>
<p class="zw">我们是要等到那时才能使用HTML5？幸好我们没那么做，如果选择了等待，那我们就创造不出令人激动的网站和应用了。</p>
<p class="zw">有人肯定会问“如果规范变了，我是不是还得修改我的HTML？”是的。无论怎样我们都要改变。</p>
<p class="zw">HTML不会冰封，改写HTML5标记是其进化过程中的一部分。</p>
<p class="zw">HTML5建立在已有的标记之上，它不是一门新语言，而是在原有的基础之上加了一些强大的特性。学习HTML5不是很难，我们现在就开始吧。</p>
data/前端体验设计/第08章 语义化与微格式/1.基于链接的微格式/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">如果你对在HTML文档的头部<code>head</code>引用外部链接很熟悉，那么你可以看出这是一个外链的CSS样式表。</p>
<pre class="代码无行号"><code><link rel="stylesheet" href="screen.css" media="screen"></code></pre>
<p class="zw">这个属性定义了HTML文档和链接目标之间的关系，关联样式表是其中之一。我们采用类似的方法来连接RSS提要。</p>
<pre class="代码无行号"><code><link rel="alternate" type="application/rss+xml" href="articles.rss"></code></pre>
<p class="zw">我们还可以为关联到收藏或者关联到苹果图标<code>apple-touch-icon</code>做个定义，这是专门为iOS设备设计的：</p>
<pre class="代码无行号"><code><link rel="shortcut icon" href="favicon.jpg" type="image/gif">
<link rel="shortcut icon" href="favicon.png" type="image/png">
<link rel="apple-touch-icon" href="ios.png"></code></pre>
<p class="zw">所有基于链接的微格式，都是用这种方式来描述文档之间的关系。</p>
data/前端体验设计/第08章 语义化与微格式/10.结构化的名字/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">当我们构造一个名字时，会把名字分成多个部分，第一个是名字Nick，第二个是他的姓氏Jefferies。</p>
<pre class="代码无行号"><code><span class="p-given-name">Nick</span>
<span class="p-family-name">Jefferies</span></code></pre>
<p class="zw">如果Nick Jefferies的名片上有一个尊称的前缀（先生、女士、长官、教授等），甚至是他的绰号（Sawbuck），我们也可以包括进来。</p>
<pre class="代码无行号"><code><span class="p-honorific-prefix">Mr.</span>
<span class="p-Nickname">Sawbuck</span></code></pre>
<p class="zw">Mr Nick （Sawbuck）Jefferies的结构化名称里的所有单独的组件，现在看起来应该是这样的。</p>
<pre class="代码无行号"><code><span class="p-honorific-prefix">Mr.</span>
<span class="p-given-name">Nick</span>
<span class="p-Nickname">Sawbuck</span>
<span class="p-family-name">Jefferies</span></code></pre>
<p class="zw">然后我们所要做的就是把Nick的结构化名字放在一个最合适的HTML根元素里。一般情况下是列表、段落、<code>section</code>、<code>article</code>或者<code>footer</code>。哪个更合适，就把<code>h-card</code>赋值到它的<code>class</code>上就好了。</p>
<pre class="代码无行号"><code><div class="h-card">
<span class="p-honorific-prefix">Mr.</span>
<span class="p-given-name">Nick</span>
<span class="p-Nickname">Sawbuck</span>
<span class="p-family-name">Jefferies</span>
</div></code></pre>
data/前端体验设计/第08章 语义化与微格式/11.URL/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">现在的联系人信息里通常都包含了网址，所以当你在<code>h-card</code>里发现网址时也不应该感到惊讶。在h-card里添加URL最明显的方式是这样的。</p>
<pre class="代码无行号"><code><a href="http://HardboiledWebdesign.com" class="u-url">
http://HardboiledWebdesign.com</a></code></pre>
data/前端体验设计/第08章 语义化与微格式/12.公司/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">为了展示<code>h-card</code>的嵌套功能，我们虚构一个公司或者组织里的某个人。首先，我们将为一个名为Cole Henley的人创建一个<code>h-card</code>，Cole的名片里只包含他的名字和网址。</p>
<pre class="代码无行号"><code><div class="h-card">
<a href="http://HardboiledWebdesign.com" class="p-name
u-url">Cole Henley</a>
</div></code></pre>
<p class="zw">现在我们将把Cole工作的公司嵌套进来，并用<code>p-org</code>属性来描述它。因为该公司是个独立的实体，我们给它自己添加<code>h-card</code>，并嵌套在Cole的<code>h-card</code>里：</p>
<pre class="代码无行号"><code><div class="h-card">
<a href="http://HardboiledWebdesign.com" class="p-name
u-url">Cole Henley</a>
<span class="p-org h-card">The No. 1 Detective Agency</span>
</div></code></pre>
<p class="zw">当需要显示公司的标志时，我们可以在<code>h-card</code>里使用名为<code>u-logo</code>的<code>class</code>来嵌入一张图片。</p>
<blockquote class="提示 editing-block">
\ No newline at end of file
data/前端体验设计/第08章 语义化与微格式/13.在微格式2中隐含属性/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">微格式2比之前的版本更简单，因为它的一些属性附带了其他的的含义。例如，我们可以使用<code>p-name</code>来标记某人的完整名字，使用<code>u-url</code>来标记他们的网站地址。</p>
<pre class="代码无行号"><code><div class="h-card">
<a href="http://stuffandnonsense.co.uk" class="p-name u-url">
Andy Clarke</a>
</div></code></pre>
<p class="zw">然而，微格式2可以去除额外的元素，让整个模式更简单、代码更干净。我们可以直接在链接上使用<code>h-card</code>，并删除<code>p-name</code>和<code>u-url</code>，因为<code>h-card</code>里已经附带了这些属性。</p>
<pre class="代码无行号"><code><a href=http://stuffandnonsense.co.uk class="h-card">Andy Clarke</a></code></pre>
</blockquote>
data/前端体验设计/第08章 语义化与微格式/14.地址/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">想在信息里添加地址，我们可以在<code>h-card</code>里添加的值有这些：<code>p-street-address</code>、<code>p-locality</code>、<code>p-region</code> 和<code>p-postal-code</code>。</p>
<pre class="代码无行号"><code><span class="p-street-address">221b Baker Street</span>,
<span class="p-locality">London</span>,
<span class="p-postal-code">NW1 6XE</span>,
<span class="p-country-name">United Kingdom</span></code></pre>
<p class="zw">在这一点上，你可能会想“为什么不使用HTML里的<code>address</code>元素？”不管你怎么理解这个元素，其实<code>address</code>元素应该只用来为一个特定页面或者内容的作者标记联系信息。令人费解的是，到目前为止还没有一个专门描述物理地址的元素。如果你怀疑我的观点，那么请看下面这段出自WHATWG（网页超文本应用技术工作小组）的描述。</p>
<p class="zw"><span style="font-family: Times New Roman,楷体_GB2312">“<code>address</code>元素表示最近的文章或者父元素的联系信息。[…] <code>address</code>不能用来表示任何物理地址（如邮政地址），除非这些地址是和实际内容相关的联系信息。”</span></p>
<h3 class="sigil_not_in_toc" id="nav_point_132">需要多个地址？</h3>
<p class="zw">如果有人有不止一个地址呢？除非你像我一样在家里办公，否则你会有家庭和工作两个地址。别担心，我们可以把两个地址都包括在<code>h-card</code>里，并保证它们清晰可辨。我们把<code>h-card</code>里的<code>p-street-address</code>、<code>p-locality</code>、<code>p-region</code> 和<code>p-postal-code</code> 组合到一起，来形成独立的<code>h-adr</code>元素。</p>
<pre class="代码无行号"><code><div class="h-adr">
<span class="p-street-address">221b Baker Street</span>,
<span class="p-locality">London</span>,
<span class="p-postal-code">NW1 6XE</span>,
<span class="p-country-name">United Kingdom</span>
</div>
<div class="h-adr">
<span class="p-street-address">8-10 Broadway</span>,
<span class="p-locality">London</span>,
<span class="p-postal-code">SW1H 0BG</span>,
<span class="p-country-name">United Kingdom</span>
</div></code></pre>
data/前端体验设计/第08章 语义化与微格式/15.电话号码/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">我还是喜欢通过电话交谈，可能这样已经过时了。幸运的是，在<code>h-card</code>里包含一个电话号码（两个或者三个）是小菜一碟，使用<code>p-tel</code>就可以搞定。</p>
<pre class="代码无行号"><code><div class="p-tel">01745 851848</div></code></pre>
<p class="zw">大多数人通常都有多个电话号码：家里的、办公室的，还有手机号码。我们可以使用相同的格式来添加这些电话号码。</p>
data/前端体验设计/第08章 语义化与微格式/16.电子邮箱/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">我们通过在<code>h-card</code>里使用<code>u-email</code>来添加电子邮件：</p>
<pre class="代码无行号"><code><a href="mailto:dropadime@HardboiledWebdesign.com"
class="u-email">Drop me a dime</a></code></pre>
data/前端体验设计/第08章 语义化与微格式/17.其他h-card属性/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw"><code>h-card</code>是一种理想的格式，可以帮助一个人或者组织创建结构化的信息。当然有些人或者公司可能不只需要名字、地址、联系方式这些信息。所以<code>h-card</code>里还包括了很多的可选项。这里罗列一些我认为最有用的：</p>
<table border="1" width="90%">
<tbody>
<tr>
<td><code>u-photo</code></td>
<td>表示一张特定的照片，可以是一个头像</td>
</tr>
<tr>
<td><code>p-note</code></td>
<td>附加说明</td>
</tr>
<tr>
<td><code>dt-bday</code></td>
<td>生日</td>
</tr>
<tr>
<td><code>p-job-title</code></td>
<td>工作职级</td>
</tr>
<tr>
<td><code>p-role</code></td>
<td>工作岗位</td>
</tr>
<tr>
<td><code>p-sex</code></td>
<td>生理性别</td>
</tr>
<tr>
<td><code>p-gender-identity</code></td>
<td>性别认同</td>
</tr>
</tbody>
</table>
data/前端体验设计/第08章 语义化与微格式/18.标记Get Hardboiled网站的作者页面/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">理解<code>h-card</code>各个属性之间细微差别的最好的方法就是使用它们。我们将为Get Hardboiled网站构建一系列的<code>h-card</code>。每个侦探的名片使用稍微不同的属性值。</p>
<p class="图"><img alt="0805.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/62.jpg"></p>
<p class="图"><img alt="0806.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/63.jpg"></p>
data/前端体验设计/第08章 语义化与微格式/19.使用h-event发布事件/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">回想一下你每天在网上看到的一些事件信息，你会发现一些关于会议、体育赛事、音乐会或者电影里的细节。事件信息有时出现在组织中，有时出现在自然语言中。例如，我可能会在我的博客中写道，“今年11月份，我在曼彻斯特的艾伯特大厅看了Kacey Musgraves的演唱会”。</p>
<p class="zw">你不必去网上找一些很难找的事件信息，网站与网站之间使用HTML来标记事件信息的差别很大。这是Kacey Musgraves演唱会在Ticketmaster上的标记：</p>
<pre class="代码无行号"><code><tr>
<td class="event">
<div class="summary"> </div>
<div class="ratingContainer" title="4.8 out of 5 stars"></div>
</td>
<td class="location">Albert Hall Manchester, GB</td>
<td class="date">Mon 16/11/15 19:00</td>
</tr></code></pre>
<p class="zw">Seetickets使用不同的HTML发布了相同的事件：</p>
<pre class="代码无行号"><code><div class="browse-width result-text">
<h3>Kacey Musgraves</a></h3>
<p>Albert Hall, Manchester</p>
<p>at 7:00 PM</p>
</div></code></pre>
<p class="zw">人们可以很容易理解它包含一个事件，但是这种HTML没法帮助机器去理解。这使得微格式成了完美的解决方案。</p>
<p class="zw">一个日历事件很可能包含：</p>
<ul>
<li class="第1级无序列表">名称或摘要</li>
<li class="第1级无序列表">描述</li>
<li class="第1级无序列表">地点</li>
<li class="第1级无序列表">开始和结束的时间</li>
<li class="第1级无序列表">URL链接指向事件页面或者网站</li>
<li class="第1级无序列表">场地的联系信息</li>
</ul>
<p class="zw">我们将构建一个单独的事件，用<code>h-event</code>属性值来指定根元素，然后在一个元素上使用<code>p-name</code>，甚至是<code>u-url</code>来表示，以保证我们的事件足够简单。</p>
<pre class="代码无行号"><code><div class="h-event">The Maltese Falcon</div></code></pre>
<p class="zw">我们需要更多有用的信息来展示《The Maltese Falcon》，然而，我们通过在<code>article</code>嵌入一个使用<code>p-name</code>属性值的主标题来区分开：</p>
<pre class="代码无行号"><code><article class="h-event">
<h1 class="p-name">The Maltese Falcon</h1>
</article></code></pre>
<h3 class="sigil_not_in_toc" id="nav_point_138">摘要</h3>
<p class="zw">接下来，我们在一个适当的HTML元素上使用属性值<code>p-summary</code>，来添加一个简短的摘要，这里我们使用了一个段落：</p>
<pre class="代码无行号"><code><article class="h-event">
<h1 class="p-name">The Maltese Falcon</h1>
<p class="p-summary">A special showing of the remastered
mystery that kicked off the film noir genre of the 1940s…</p>
</article></code></pre>
<p class="zw">如果我们的摘要包含多个段落，那么我们可以把标题、段落、列表或者任何其他元素放到一个<code>section</code>中划分出来做摘要。而不要在一个<code>h-event</code>里包含多个段落的摘要，否则，这将是一个无效的事件。</p>
<h3 class="sigil_not_in_toc" id="nav_point_139">位置</h3>
<p class="zw">让人们知道事件在哪发生，只需要在一个元素上应用属性值<code>p-location</code>，在这个例子里， 场馆名字用<code>span</code>包起来：</p>
<pre class="代码无行号"><code><p>Showing at <span class="p-location">
The Scala Cinema and Art Centre</span></p></code></pre>
<p class="zw">我们应该需要提供更多关于地点的信息，比如地址，我们应该为场地创建一个<code>h-adr</code>元素，并把它嵌入到<code>h-event</code>里面。<code>h-adr</code>里包含相同的地址，这跟我们使用<code>h-card</code>时一样。</p>
<pre class="代码无行号"><code><div class="p-location h-adr">
<span class="p-street-address">47 High Street</span>
<span class="p-locality">Prestatyn</span>
<span class="p-region">Denbighshire</span>
<span class="p-country-name">Wales</span>
</div></code></pre>
<h3 class="sigil_not_in_toc" id="nav_point_140">URL</h3>
<p class="zw">如果这个事件中有个网站，那么我们将会使用和构建<code>h-card</code>时一样的<code>u-url</code>属性值：</p>
<pre class="代码无行号"><code><a href="http://scalaPrestatyn.co.uk" class="u-url">The Scala
Cinema Website</a></code></pre>
<h3 class="sigil_not_in_toc" id="nav_point_141">开始日期和持续时间</h3>
<p class="zw">我们构建的<code>h-event</code>微格式几乎要完整了，但是还缺少了开始日期和到场时间。首先，我们使用<code>time</code>元素，并为它添加属性值<code>datetime</code>来标记开始时间：</p>
<pre class="代码无行号"><code><time datetime="2015-11-20 T19:30">Nov. 20th, 2015 at 7:30pm</time></code></pre>
<p class="zw">显而易见，这是一个开始日期，我们还需要给<code>time</code>元素添加一个<code>dt-start</code>属性值：</p>
<pre class="代码无行号"><code><time datetime="2015-11-20 T19:30" class="dt-start">
November 20th, 2015 at 7:30pm</time></code></pre>
<p class="zw">这个事件是从傍晚持续到晚上10点。所以我们可以把这个时间也添加到我们的<code>datetime</code>属性里：</p>
<pre class="代码无行号"><code><time datetime="2015-11-20 T19:30 P 150M" class="dt-start">
November 20th, 2015 at 7:30pm</time></code></pre>
<h3 class="sigil_not_in_toc" id="nav_point_142">混合事件和联系人</h3>
<p class="zw">微格式按模块化、可嵌入来设计的，因此我们可以很容易把一个人的<code>h-card</code>嵌入到一个<code>h-event</code>里。</p>
<p class="zw">还记得之前我们为《The Maltese Falcon》标记位置信息吗？我们为场馆名添加了属性值<code>p-location</code>:</p>
<pre class="代码无行号"><code><p>Showing at <span class="p-location">
The Scala Cinema and Art Centre</span></p></code></pre>
<p class="zw">现在需要为事件添加更精确的位置信息，所以我们要创建一个<code>h-card</code>，嵌入到我们的<code>h-event</code>里。</p>
<pre class="代码无行号"><code><div class="p-location h-card">
<span class="p-name">The Scala Cinema and Art Centre</span>
<span class="p-street-address">47 High Street</span>
<span class="p-locality">Prestatyn</span>
<span class="p-region">Denbighshire</span>
<span class="p-country-name">Wales</span>
</div></code></pre>
data/前端体验设计/第08章 语义化与微格式/2.内容版权/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">最常见的基于链接的微格式的用途之一，就是链接到版权。当使用<code>rel-licence</code>时，目的十分明确，就是链接一个许可证。</p>
<pre class="代码无行号"><code><a href="http://creativecommons.org/licenses/by-sa/4.0/" rel="license">
Creative Commons Attribution-ShareAlike 4.0 International License</a></code></pre>
<p class="zw">你可能会认为任何人都会使用微格式链接到版权，没错，毕竟微格式的原则之一就是降低使用门槛。虽然门槛很低，但是它带来的好处却是巨大的，尤其是随着谷歌在高级搜索里添加了一个使用权选项。</p>
<p class="图"><img alt="0801.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/60.jpg"></p>
<p class="图题">想要搜索可以自由使用，共享和修改，甚至商业化的东西？可以使用隐藏在谷歌高级搜索选项里的使用权过滤器。</p>
<p class="zw">那么作为工程师的我们，该如何设计<code>rel-license</code>? 也许我们想要通过添加一个小图标来让许可链接和页面上的其他链接看起来不同。我们可以为这个链接添加个<code>class</code>:</p>
<pre class="代码无行号"><code><a href="http://creativecommons.org/licenses/by-sa/4.0/"
rel="license" class="license">Creative Commons Attribution-
ShareAlike 4.0 International License</a></code></pre>
<p class="zw">其实我们并不需要这个额外的<code>class</code>，因为我们可以通过CSS属性选择器来达到同样的效果。</p>
<pre class="代码无行号"><code>a[rel="license"] {
padding-left : 20px;
background : transparent url(cc.png) no-repeat 0 0; }</code></pre>
<p class="zw">通过使用微格式，可以使我们的HTML更加犀利，而且这种方式能为我们及用户提供更多的价值。</p>
data/前端体验设计/第08章 语义化与微格式/20.使用h-review发表评论/text.html 0 → 100644
浏览文件 @ ad964382
<p class="zw">到目前为止，我希望你很享受之前所读到的内容，并且写一篇热情洋溢的评论，因为接下来我们将会讲到<code>h-review</code>。</p>
<p class="zw">不论是谈话还是阅读，人们经常会表达自己的意见或者看法。我们的大脑随时都会产生评论：</p>
<p class="zw">上周我租了一盘DVD，1994年的由Humphrey Bogart饰演Sam Spade的《The Maltese Falcon》，它仍然是我最喜欢的电影，给它一个赞”</p>
<p class="zw"><span style="font-family: Times New Roman,楷体_GB2312">“电影: 《The Maltese Falcon》: 评分：10/10”</span></p>
<p class="zw"><span style="font-family: Times New Roman,楷体_GB2312">“我对《Who Framed Roger Rabbit》预期很低，但我还是给了5颗星”</span></p>
<p class="zw">电脑不能识别语言的细微差别，对它来说，这些评论信息只不过是一串字符。它是建立在我们学习过的微格式<code>h-card</code>和<code>h-event</code>之上，通过<code>h-review</code>提供的内容识别模式来解析这些内容的。</p>
<p class="zw">和我们学过的其他微格式一样，<code>h-review</code>也是用根元素来包含其他元素。它的根元素属性值是<code>h-review</code>，我们可以把它应用到任何恰当的HTML元素上，下面的例子我们用到了<code>article</code>元素上：</p>
<pre class="代码无行号"><code><article class="h-review">
<h1>The best detective film ever made</h1>
</article></code></pre>
<p class="zw">编写一个<code>h-review</code>用不了多少时间，因为<code>h-review</code>复用了一些值，这些值你在学习<code>h-card</code>和<code>h-event</code>时已经学过了。首先，像其他微格式一样，我们用<code>p-name</code>来命名评论，但值得注意的是，我们的<code>h-review</code>里的评论项的名字不一定非要一样。</p>
<pre class="代码无行号"><code><article class="h-review">
<h1 class="p-name">The best detective film ever made</h1>
</article></code></pre>
<p class="zw">现在我们开始定义我们评论的项目，<code>p-item</code>元素里的内容不一定是企业、人物、地方或者产品，我们可以创新，只要是和项目相关的其他信息。</p>
<pre class="代码无行号"><code><p class="p-item">Who Framed Roger Rabbit, starring the late Bob
Hoskins as private investigator Eddie Valiant.</p></code></pre>
<p class="zw">关于这个项目，我们需要更详细的信息，这无关评论。当评论一个人的时候，我们可以嵌入<code>h-card</code>，描述一个企业或者场地的位置时使用<code>h-adr</code>，产品评论使用<code>h-product</code>,其他类型的项目使用<code>h-item</code>来表示。这是一个特定项目的微格式结构信息。当我们正在评论一部电影，而不是一个业务或者产品，我们会选择<code>h-item</code>，并把它添加到我们的<code>p-item</code>元素上。</p>
<pre class="代码无行号"><code><p class="p-item h-item">Who Framed Roger Rabbit, starring the
late Bob Hoskins as private investigator Eddie Valiant.</p></code></pre>
<p class="zw">如果没有意见，一条评论是不会有多大用处的，因此我们将使用<code>e-description</code>。如果评论很简短，那么把这个属性值添加到列表或者是其他元素上，这个例子中，我们使用了段落：</p>
<pre class="代码无行号"><code><p class="e-description">How much do I know about show business?
Only that there is no business like it, no business I know.</p></code></pre>
<p class="zw">如果描述包含多个段落或者包含其他HTML元素，那么应该用一个元素把它们包起来，再把<code>e-description</code>赋值给这个包裹元素。如果我们的评论是我说的这种情况，那么使用最适当的方法是使用一个引用：</p>
<pre class="代码无行号"><code><blockquote class="e-description">
<p>How much do I know about show business? Only that there is no
business like it, no business I know.</p>
<p>A Classic film has to work on several different levels and animated
action movie Who Framed Roger Rabbit scores on all of them.
It's a fantastic children's film with characters like Roger, the
Weasels and Benny the Cab for them to enjoy. It also plays perfectly
as a detective story for adults. And who will ever forget
Jessica Rabbit?</p>
</blockquote></code></pre>
<h3 class="sigil_not_in_toc" id="nav_point_144">URL</h3>
<p class="zw">你应该能猜到我们如何在评论里包含一个URL，之前在h-card和h-event里已经看到过了。就是<code>u-url</code>属性值：</p>
<pre class="代码无行号"><code><a href="HardboiledWebdesign.com" class="u-url">Canonical Permalink</a></code></pre>
<h3 class="sigil_not_in_toc" id="nav_point_145">添加评分</h3>
<p class="zw">星评级是一个用来表明肯定或否定的非常流行的评论方式。它帮助人们一眼就能看出来一个项目是好是坏。在很多评论和购物网站，我们都能看到它们。我们将按照惯例，用星星来创建一个从0（最坏）到5（最好）的评级范围。</p>
<p class="zw">用五颗星来评价《Who Framed Roger Rabbit》，我们将使用HTML5的<code>data</code>元素。如果你之前还没有用过<code>data</code>元素，那么很简单，<code>data</code>是处理人类可读的、可见的元素部分。在我们的星星评级的例子中，使用了能提供同样信息的<code>value</code>属性，这是一种机器可读的形式：</p>
<pre class="代码无行号"><code><data class="p-rating" value="5">★★★★★</data></code></pre>
<p class="zw">如果我们们需要更具体的，而不是一个平均的评价等级，那么我么可以分别使用<code>p-best</code>和<code>p-worst</code>来表示：</p>
<pre class="代码无行号"><code><data class="p-best" value="5">★★★★★</data>
<data class="p-worst" value="0"></data></code></pre>
<h3 class="sigil_not_in_toc" id="nav_point_146">评论日期</h3>
<p class="zw">当然，我们还应该加上一个日期，这将帮助人们判断我们的评价。这对于酒店和餐馆尤为重要。我们将简单的复用<code>h-event</code>中的<code>time</code>元素，并为它加上<code>datetime</code>属性，然后再为它加上<code>dt-reviewed</code>的<code>class</code>名:</p>
<pre class="代码无行号"><code><time datetime="2015-11-20 T19:30" class="dt-reviewed">
November 20th, 2015 at 7:30pm</time></code></pre>
<h3 class="sigil_not_in_toc" id="nav_point_147">混合评论和联系人</h3>
<p class="zw">因为没必要知道是谁写的评论，所以<code>h-review</code>并没要求我们包含一个名字。但我们可以选择添加一个。因为一个人的身份可以大大提高一个评论的可信度。只要我们想要，就可以使用<code>h-card</code>来包裹很多信息。但在这里，我们只使用<code>p-reviewer</code>和<code>h-card</code>来添加评论者的名字：</p>
<pre class="代码无行号"><code><a class="p-reviewer h-card"
href="http://stuffandnonsense.co.uk">Andy Clarke</a></code></pre>
<h3 class="sigil_not_in_toc" id="nav_point_148">在新闻文章、博客和播客里使用h-entry</h3>
<p class="zw">接下来，你将了解<code>h-entry,</code>它是为出版联合内容，如新闻、博客和播客而设计的微格式。<code>h-entry</code>表示单个条目，我们可以和其他条目组合使用，我们来写一个<code>h-entry</code>博客。</p>
<p class="zw">微格式社区建议，我们应该用“最精确语义的HTML构建块对象等”。</p>
<p class="zw">这是我们最初的HTML，开始用一个标题，后面跟一个段落：</p>
<pre class="代码无行号"><code><h1>The Maltese Falcon</h1>
<p>The film stars Humphrey Bogart as private investigator Sam
Spade and Mary Astor as his femme fatale client.</p></code></pre>
<p class="zw">现在我们知道如何像这样单独的使用<code>article</code>元素，我们将在那篇文章里组合使用这些元素：</p>
<pre class="代码无行号"><code><article>
<h1>The Maltese Falcon</h1>
<p>The film stars Humphrey Bogart as private investigator Sam
Spade and Mary Astor as his femme fatale client.</p>
</article></code></pre>
<p class="zw">把一篇文章转换成<code>h-entry</code>，我们将在每个单独条目的根元素上添加<code>h-entry</code>属性值：</p>
<pre class="代码无行号"><code><article class="h-entry">
<h1>The Maltese Falcon</h1>
<p>The film stars Humphrey Bogart as private investigator Sam
Spade and Mary Astor as his femme fatale client.</p>
</article></code></pre>
<p class="zw"><code>h-entry</code>里包括文章、博客和播客的标题在内的一些属性是隐藏的，但是每个属性是可选的，像发布日期和作者姓名之类的最好是在每个条目里显式的添加，这些属性你应该已经比较熟悉。我们先为主标题标记<code>p-name</code>属性：</p>
<pre class="代码无行号"><code><h1 class="p-name">The Maltese Falcon</h1></code></pre>
<p class="zw">这里需要说清一点，日期或者时间指的是一篇文章的发布日期，我们用<code>h-entry</code>的<code>dt-pulished</code>属性值：</p>
<pre class="代码无行号"><code><time datetime="2015-11-20 T19:30" class="dt-published">
November 20th, 2015 at 7:30pm</time></code></pre>
<p class="zw">如果<code>h-entry</code>的发布日期出现更新，我们应该把<code>dt-published</code>值更改为<code>dt-updated</code>:</p>
<pre class="代码无行号"><code><time datetime="2015-11-20 T21:30" class="dt-updated">
November 20th, 2015 at 9:30pm</time></code></pre>
<p class="zw">最后我们添加一个作者到<code>h-entry</code>里，你应该已经很熟悉<code>h-card</code>，这里我们将结合使用<code>h-card</code>里的<code>p-author</code>属性值。</p>
<pre class="代码无行号"><code><address class="h-card p-author">
<a href="http://stuffandnonsense.co.uk">Andy Clarke</a>
</address></code></pre>
<p class="zw">不需要使用<code>p-name</code>或者<code>u-url</code>属性值，<code>h-card</code>里都隐含了这些。</p>
<p class="zw">但是，这里为什会用<code>address</code>元素？</p>
<p class="zw">前面表述过，<code>address</code>元素并不用来描述物理地址，但用来描述作者的联系信息绝对是恰当的。因为我们添加了一个指向作者网站的链接，所以我们需要用HTML链接来表达那个网站和作者的关系：</p>
<pre class="代码无行号"><code><address class="h-card p-author">
<a href="http://stuffandnonsense.co.uk" rel="author">Andy Clarke</a>
</address></code></pre>
<p class="zw">有些作者往往喜欢把博客分割成多页，比如，我们会主页或者存档里使用摘要，然后在文章详细页展示完整的内容。<code>h-entry</code>可以使用<code>p-summary</code>定义一个小段落当做文章的摘要：</p>
<p class="zw">我们的例子里，我们使用第一段：</p>
<pre class="代码无行号"><code><p class="p-summary">The film stars Humphrey Bogart as private investigator
Sam Spade and Mary Astor as his femme fatale client.</p></code></pre>
<p class="zw">用一个属性值为<code>p-summary</code>的<code>section</code>父元素将几个元素组合包裹起来，这样就形成了一个长摘要：</p>
<pre class="代码无行号"><code><section class="p-summary">
<p>The film stars Humphrey Bogart as private investigator Sam
Spade and Mary Astor as his femme fatale client.</p>
<p>The story follows a San Francisco private detective and his
dealings with three unscrupulous adventurers, all of whom are
competing to obtain a jewel-encrusted falcon statuette.</p>
</section></code></pre>
<p class="zw"><code>p-summary</code>里包含一个永久的全文链接，并出现在多个页面时，就很重要了。需要用<code>rel</code>属性，并赋值为<code>bookmark</code>，来明确<code>p-summary</code>的链接指向：</p>
<pre class="代码无行号"><code><a href="http://HardboiledWebdesign.com" rel="bookmark">
Permalink</a></code></pre>
<p class="zw">现在人们通常在几个渠道发布自己的内容。例如，你可能会在自己的博客上发布一条。也可能在其他媒介上发布，用来获得更多的受众。如果你添加了一个指向其它地方的入口链接，那么使用<code>u-syndication</code>来标识那个链接为联合内容就尤为重要：</p>
<pre class="代码无行号"><code><a href="http://medium.com" class="u-syndication">
Also published on Medium</a></code></pre>
<h3 class="sigil_not_in_toc" id="nav_point_149">管理多个h-entry</h3>
<p class="zw">到目前位置，我们已经可以让单个<code>h-entry</code>工作起来。但是很多网站首页或者存档页有相关文章列表。这些条目的组合做称作<code>h-feed</code>。我们需要一个合适的父元素来组合一个<code>feed</code>，这里我们使用了<code>section</code>元素。结合上下文的意思，我们会给它一个描述性的标题:</p>
<pre class="代码无行号"><code><section class="h-feed">
<h1>Hardboiled archives</h1>
<article class="h-entry"> […] </article>
<article class="h-entry"> […] </article>
<article class="h-entry"> […] </article>
</section></code></pre>
data/前端体验设计/第10章 CSS基础/text.html 0 → 100644
浏览文件 @ ad964382
此差异已折叠。
data/前端体验设计/第14章 边框/text.html 0 → 100644
浏览文件 @ ad964382
此差异已折叠。
data/前端体验设计/第15章 背景图像/text.html 0 → 100644
浏览文件 @ ad964382
此差异已折叠。
data/前端体验设计/第16章 渐变/text.html 0 → 100644
浏览文件 @ ad964382
此差异已折叠。
data/前端体验设计/第18章 CSS转换/text.html 0 → 100644
浏览文件 @ ad964382
此差异已折叠。
data/前端体验设计/第19章 CSS过渡/text.html 0 → 100644
浏览文件 @ ad964382
此差异已折叠。
data/前端体验设计/第20章 多列布局/text.html 0 → 100644
浏览文件 @ ad964382
此差异已折叠。
src/ebook/extract_book_code.py
浏览文件 @ ad964382
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或