WSG6（2）

7、响应式设计技术的资源

8、配对响应式设计和移动优先设计

9、优先内容和功能
移动优先方法并不是默认使用桌面版本的网站，而是稍后尝试将所有内容和导航填充到小格式中，而是从最关键的内容和功能中逐渐形成，并随着空间允许逐渐添加辅助材料和功能。这种以移动优先为重点的方法很好地适应了响应式设计技术，以及强调不断关注高优先级目标和功能的敏捷项目管理。
CSS布局可以使用你对各种语义HTML容器（完全控制<header>，<main>，<nav>，<article>，<section>，<aside>）或其他<div>容器放置在屏幕移动断点上。
根据内容和导航优先级制定布局决策，而不是简单的布局公式。

普遍接入

从内容和功能开始
我们的建议是在最小的移动环境中制作必备项目的“短名单”，并从那里建立起来。在纸上或白板上勾画出主要屏幕的核心功能和内容区域，然后将这些粗略草图翻译成简单的框图，以便页面编码人员可以使用这些框图创建实际响应的HTML和CSS模型以供学习。

使用最佳做法
使用有效的，广泛支持的HTML5和CSS3来构建您的网站。
利用HTML5和咏叹调的新语义，为您的内容添加含义，可访问性和搜索可见性。
在整个布局和排版中使用百分比和ems等比例度量。
根据观众的需求，观看设备的可能范围以及特定内容的性质，计算您的响应式断点和媒体查询的使用情况。
采用基于移动优先的方法，建立在最小的基础体验基础上。
随着屏幕空间，带宽和浏览器功能的允许，逐步增强移动优先体验。
使用浏览器优先的开发周期，远离复杂的，面向桌面的Photoshop组件和静态图形设计。花哨的静态设计模型是一种古老的思维方式，完全与现代网络现实脱节。

10\页面结构组件

构建一个页面
页眉和网站身份:为您的内部和外部Web系统开发一致的企业身份标准
让您的软件采购团队参与进来，并确保他们了解接口和企业身份问题
坚持要求每个软件供应商遵守本地身份，可访问性，图形和用户界面互操作性标准，以使其产品适合您的一般企业网络体验

首页链接:
如果您的标题中没有使用徽标或图片，则至少应在页面左上角附近放置一个“主页”链接，其中99.9％的用户期望找到它。

全球导航:
用性：全球链接是用户最期待看到的地方。
语义逻辑：全局链接的集合应该标记为一个列表，因为它是一个列表。
辅助功能：链接的列表格式出现在代码清单的早期，应包含在HTML5 <nav>元素中。
搜索可见性：链接在代码清单顶部的主要导航关键字集合是搜索引擎优化的理想选择。

在较小的移动视口设计中，通常的做法是将页面页眉中的主要导航列表正常折叠成较小的“navicon”或“trigram”符号以节省空间（HTML字符）。

》》》面包屑导航：
集成到标题中的面包屑最好在标题的顶部，
面包屑导航的另一个流行位置位于标题导航下方，位于主页<h1>标题和内容的正上方。

搜索:
一个27个字符长的盒子可容纳90％的搜索查询。亚马逊的搜索框拥有两倍以上（五十七个字符）。

购物车:

广告:“横幅失明”

侧栏栏:将页面区域细分为功能区域是现代平面设计的基本特征。
对网络用户期望的研究现在支持在左栏中定位导航链接的常见做法 - 特别是节或导航。右侧边栏通常用于广告，因此请确保您放置在那里的任何图形内容看起来不像广告，否则您的读者可能会忽略该区域。
侧边栏也可用作网页搜索框的位置，邮寄地址和联系信息，以及其他更小但必要的页面元素。研究表明，在本地导航链接下的左侧扫描列是大多数用户在查看右侧标题区域后查找搜索功能的第二位。

左侧或右侧导航栏？
喜欢左侧导航的设计师经常会引用英语阅读习惯和古腾堡图（见图8.15），但该图表明尽管左上角受到读者最多的关注，但右上角并不太落后。广告在右侧栏更为常见，所以用户经常会忽略该区域。由于这是最常见的做法，因此我们通常赞成左侧导航栏，并且利用已建立的惯例是一件好事。

主要内容
网页内容标题：不要埋头。每个页面都需要靠近顶部的可见名称，标记为<h1>标题。对于各种逻辑，编辑，可访问性，搜索可见性和常识性原因，请使用<h1>页面顶部的标题让用户知道该页面的内容。确保你的重要内容关键字在第一<h1>。
面包屑导航：内容区域的顶部是面包屑导航的常用位置。
跳转到顶部的链接：跳转链接对于长页面来说是一个不错的改进。这些链接不需要精心制作 - 只要页面顶部的链接就可以完成，但一个小箭头图标可以提供很好的强化。
规则：这些水平图形元素很容易被过度使用，并导致混乱的设计。使用CSS来保持页面规则尽可能不显眼，非常薄，颜色比周围的印刷文字要轻得多。更好的主意：跳过规则并使用一点空白区域创建可视内容分组或分隔。
分页导航：在多页序列中，在页面的顶部和底部有简单的文本链接以方便将阅读器移动到序列中的前一页或下一页。在较长的序列中，提供描述它们在系列中的位置的信息是有帮助的，例如“第5页，共8页”。
日期：发布和更新日期通常对评估内容的货币和相关性至关重要。在新闻和杂志网站上，出版日期应该显示在页面顶部。其他网站应在内容区域的底部显示最近更新的日期（见图6.12）。

页脚
页脚主要是关于家务和法律事务，尽管它们有时也可以用于非必要的导航。这些元素需要放在页面上，但将它们放在某个位置：

网页作者，或者在大型企业网站中担任责任方
版权声明
联系方式，特别是电子邮件
链接到相关网站或更大的企业
冗余导航链接，长页面或额外导航。
页脚也可用于重复全球站点链接。由文本链接组成的扩展页脚几乎不增加页面的大小，但提供了一个不显眼的地方列出精心挑选的链接。ibm精心设计的导航页脚几乎就像每个页面底部的站点地图。

优化页面以实现快速交付
尽管移动网络和无线网络速度不断提高，但移动网络计算仍然受到页面加载速度相对较慢的限制。移动设备上的网络缓慢导致iOS和Android应用程序爆炸式增长，以提高移动设备上的网络服务性能。

尽管移动网络和无线网络速度不断提高，但移动网络计算仍然受到页面加载速度相对较慢的限制。移动设备上的网络缓慢导致iOS和Android应用程序爆炸式增长，以提高移动设备上的网络服务性能。

这并不意味着您必须从您的网页中删除所有媒体，但这确实意味着开发人员和设计人员需要从页面开销中挤出每个字节，特别是那些被移动用户大量使用的字节。诸如使用HTML5 srcset属性或<picture>元素来指​​定图像的几种尺寸（思考小，中，大），以根据屏幕尺寸传递合适尺寸的图像，压缩每个图像的压缩率，使用gif格式来绘制小的几何图形和图标，以jpeg格式，避免使用许多二十四位透明背景PNG图像，尽可能使用SVG图形，并使用紧凑符号字体来有效传送图标图形，这些都是通常用于将不必要的位压出网页图形的。

11、围绕“折叠”设计
“折叠之上”的头版报道是报纸和网页中最重要和最显眼的。
用户必须主动滚动才能看到的网页部分的视图有明显的下降。

网页的顶部约有80％的关注度（严格来说，网页上的眼动追踪凝视）只有20％的注意力留在页面区域用户必须滚动显示的“低于折叠”。

如果您认为页面的顶部始终是最明显的区域，那么这听起来有点违反直觉：页面顶部并非页面最可靠的部分。由于页面很复杂，而且加载速度通常较慢，因此急躁的用户通常会在页面顶部完全呈现之前开始向下滚动页面。用户也很清楚，页面顶部通常用于广告，因此是寻找信息的不太有用的地方。

选择向下滚动页面的网页阅读者往往花费的时间比“上面的折叠”区域多，这表明当读者发现页面内容引人注目时，他们会继续阅读该页面。

“折叠”不是一种在充分关注和不重视之间的坚硬路线，折叠上方的底部可见区域受到高度重视，并且可怕的“折叠线”可能较少比以前认为的设计重要。

选择向下滚动页面的网页阅读者往往花费的时间比在“上方”区域更多，这表明当读者发现页面内容引人注目时，他们会继续阅读该页面。

12、设计信息屏幕

大多数网页设计可以垂直划分为具有不同功能和不同图形和文本复杂程度的区域。随着垂直滚动逐渐显示页面，新内容出现，上面的内容消失。每次阅读器向下滚动页面时都会建立一个新的图形上下文。因此，网页布局不应该通过将整个页面视为一个单元来进行判断，而应该将页面划分为视觉和功能区域，并判断每个信息屏幕的适用性。

页面模板
始终启动您的页面模板或CMS主题内部页面，因为内部页面模板将主导网站。
内部页面模板必须建立这些重要功能：

提供全球和本地站点导航：使它们在逻辑上与您的站点的信息架构和结构组织一致，适用于小型屏幕的桌面和响应式移动变体。
建立一个定期，重复的设计框架：这将在整个网站内一致地组织内容。
设置图形色调：这建立了网站的外观和风格，理想情况下，系统由一致的视觉元素统治，但具有足够的灵活性以在大型网站内创建不同的区域。

为内部页面创建模板
辅助页面模板
大多数网站都以多层次的层次结构组织起来，包括垂直维度（主页，辅助页面，内部页面）和横向分布的不同内容区域，这些区域以图形和组织方式帮助读者导航。辅助页面模板应与内部页面模板密切相关，但必须包含这些附加功能：

建立标题标签的层次结构，设置辅助页面与主页和大型企业站点以及内部页面之间的关系。
提供独特的外观，将辅助页面标识为特殊的“子主页”，并建立明确的内容主题。
辅助页面模板有助于创建具体的网站垂直维度，并可在主页和内部内容页面之间的层级中执行各种功能，例如与广告活动或宣传相关的特殊目的“登录页面”，您希望读者到达您的网站，并立即收到与将广告带入您的网站的广告相关的信息。

导航和子菜单页面

备用“前门”或“着陆页”

部门或节目主页

为主页设计一个模板

但如果您已经考虑到了网站导航的基本原理，并且已经完成了创建内部和辅助页面模板的艰苦工作，那么您将有一个良好的开端。最后设计主页布局允许您确认主页的独特介绍性角色，但将设计牢牢地放置在网站的更大导航界面和图形上下文中。

主页有四个主要元素：

身分
导航
及时性或内容重点
工具（搜索，目录）

确定你的优先事项，并建立一个主页，让用户对主题和优先级有清晰的认识。

下拉菜单

主题导航与路径分割

课堂提问：
6、响应式布局：导航栏的变化
避免公式化的移动页面设计：将侧边栏内容放置在主内容栏下面。如果你的侧边栏有重要内容，请在CSS中将它设计在更高的视觉位置。

7\Responsive breakpoints
随着手机网民的日益增长，人们希望有更完整的手机冲浪体验(实用性与美观兼备），希望手机网页更加“原生”而不是仅有基本功能的附属品。
由于HTML5的支持（响应式设计）以及现在JavaScript/CSS/DOM等性能和稳定程度越来越高，Web越来越与原生APP靠近。

8、Breadcrumb trails面包屑导航

面包屑导航不会占用太多空间，同时提供了一种方便持久的方式，让你可以做你最常做的两件事：回退一个层次、返回主页。对于层次深的大型网站来说，它们是最有用的。

面包屑导航设计中的最佳实践：
把它们放在最顶层
这让它们看起来像是页面的补充机制，如书本和杂志的页码一样。
使用“>”对层级进行间隔
最好的分隔符就是大于号，因为它在视觉上暗示了沿着层级向前移动的动作。
加粗最后一个元素
最后一个元素是当前页面的名称，加粗让它得到应有的突出，而且因为这是当前页面，因此不用添加链接。

9、Optimizing Pages For Fast Delivery�优化快速交付的页面

10、Conversion rates vs. load time�转换率 与 加载时间

11、网页需要加载更多的媒体内容，但是网页制作者提高页面加载速度的方法并不是减少这些媒体内容，而是利用各种方法压缩网页字节大小。可以采用的技术如，使用HTML5的srcset属性或<picture>标签设置几个固定的图片大小（大、中、小），根据屏幕分辨率让浏览器自行选取；使用JPEG或GIF格式的图标及图片，避免使用24位的PNG格式作为背景图片；更可以将网页的所有图形内容都改为SVG格式。

这些从点点滴滴提高页面加载速度的方法，在经常被用户在手机中访问的网页来说尤为重要。

12、“ABOVE THE FOLD” 原则！！

1994年始，各界便开始研究网页分屏与用户浏览行为的关系。通过“眼球追踪技术”及大量实验数据，就电脑屏幕来说，不同尺寸大小及不同浏览器样式的屏幕，用户一定会看到的高度在约0~1000px之间，而随着分屏的增加，第二屏、第三屏...的内容被用户浏览的几率会递减。

据研究显示，第一屏（“above the fold”）的内容被用户看到的几率是80%，而第一屏之下的内容（“below the fold”）只有20%几率。

然而，随着手机等移动设备的兴起、网页承载更多媒体元素、以及网站设计者们制作出更多样式丰富新颖的网站，研究显示出网站“第一屏”原则已经被打破了。

GOOGLE的一项著名研究显示，大约有一半网站用户将注意力用在第一屏之下（高度大于900px）。这个结果似乎与人们之前认为“放得越高的内容越容易受到用户关注”有所不符，这很大可能是因为网站第一屏内容形式多样、数量多，用户会滑到下一屏先行浏览，等待第一屏加载完成后再返回查看；另外一个原因是，用户开始意识到网站首屏常常放置一些广告内容（广告盲点Banner Blindness）。这种“非首屏原则”的情况在手机中更甚，用户能够轻松滑动查看且分屏概念更轻。

我们仍然可以给出一个结论：“信息屏”仍然是转换率的重要节点，对电脑屏幕和平板屏幕来说，最重要的内容仍然不应放置在低于600-700px的位置。
13、不要让主页绑架了你的设计步骤

请先设计你的内页（网站或CMS都是如此），因为内页才是主宰你的网站生命力的元素。设计好你的内页，然后根据内页来设计二级页面、首页。（试想你如何在网内页会被你的用户访问成千上万次，内页的导航设计、交互设计、响应式设计、图形设计都是影响用户体验的重要部分。页上搜索一部电视剧？）
请确保你的内页做到以下几点：

1. 提供全局导航和次级导航
   导航功能：告诉我们这里有什么、告诉我们如何使用网站、给了我们对网站建设者的信心
2. 规律的设计框架
3. 统一的样式与基调

二级页面设计要素
请确保你的二级页面做到以下几点：

1. 清楚展示二级页面与内页、与首页的层级关系
   使用标签、tab导航栏等表明清楚二级页面与内页和首页的层级关系
   https://v.qq.com/tv/

2. 给二级页面独特的样式
   二级页面要有清楚的内容主题（如：教务教学、学院设置、电视剧、综艺等）；
   二级页面的样式要有别于主页，但也要兼具首页的指引、导航功能。

主页设计要素
主页必须有四个要素：
标识（身份）
导航
重点内容
工具（搜索、购物车、字典等）

优秀网站首页都要包含如上要素，但要素的重要性及显眼程度不必均等，如何设计摆放由你的网站的内容、风格决定。比如，亚马逊主页几乎都在做内容导航，耶鲁大学官网主页大量篇幅在做自我标识，GOOGLE主页都是工具。一个有效的网站，不可能对所有人都面面俱到，找出你的网站最重要的目的是什么，进而放大这个元素，让你的网站拥有明确的主题与内容的优先级。

HTML5新结构标签、内容标签