页面结构

页面结构组件

万维网“站点”（Web “sites” ）是完全抽象的—他们并不存在,除了在我们的大脑中。当我们鉴定一个网站的时候，我们描述的是一个共享一般图形、具有导航性的外观及体验的单个链接页面的集合。在一个有凝聚力的“网站”创造一种连续性的幻觉是页面共享的设计特性，比如他们的CSS和页面图形。单个HTML页面,包括如何设计和联系,构成万维网站点的原子单位，且网站结构的所有特征都应该出现在页面模板中。

构造页面

• 在过去十年中，随着Web的成熟，文本驱动的信息站点中的网页结构变得更加统一和可预测。虽然并非所有的Web页面都共享了这里描述的确切布局和特性，但是大多数Web页面中的一些或所有这些基本组件，在Web用户熟悉的页面位置。最近的响应式设计系统倾向于简化页眉和导航框架，特别是对于较小的移动屏幕。
• 如果你在一个较大的组织中工作，总是把你与大企业的关系作为你网站设计的一个清晰而有意义的部分。如果你的机构有一个身份识别程序，就使用它。采用大企业的设计标准可以节省大量的时间和金钱。因治理不善的大学、政府机构、大型非营利机构而臭名昭著的机构通常也有混乱的网站。大公司有时也有同样的问题，但是，企业形象的标准和规范在商业世界中已经得到了很好的确立，大多数公司网站开始时都期望每个人都有一个共同的外观、感觉和用户界面，并且每一个独立的公司网站都会与母公司建立明确的关系。

页眉和站点标识

• 页眉类似于主页的微型版本，它位于每个页面的顶端，并且在有限的空间内完成许多主页所做的事情,页眉提供了站点身份导航，包括搜索和其他工具.这些组件的位置和布局因站点不同而不同，但总体设计模式已经相当一致。
• 页眉是站点标识中最可见的组件。看似真实的是，共享页面的集合将被视为一个“站点”，甚至页面来自各种技术来源（博客软件、门户系统、sharepoint、web应用程序、内容管理系统等等）复杂的企业网站让用户感到混乱和困惑的一个原因是，多个企业软件供应商都参与其中，但每个供应商都不愿意做很多事情来符合当地的设计标准。这既是一个设计问题，也是一个软件采购问题:
  • 为您的内部和外部web系统开发一致的企业标识标准
  • 让您的软件采购团队参与进来，确保他们了解接口和企业实体问题
  • 坚持每个软件供应商都符合本地身份、可访问性、图形和用户界面的互操作性标准，让他们的产品适合于你的一般企业的web体验
  • 如果你遵守谈判签订软件供应商合同之前企业设计标准，通常你会惊喜地看到“我们的软件不允许定制”变成了“我们当然可以做”。

首页链接

将您的组织或站点标识放置在页面的左上角，并将徽标链接到主页可能是Web上使用最广泛的设计约定。一个你应该经常使用，除了在特殊情况下，比如复杂的表单，“购物车”结帐过程，以及其他你想让用户的意图完全参与的过程中。如果你不在页眉中使用徽标或图形，至少在页面左上角放置一个“主页”链接，其中99.9%的用户希望找到它。

全局导航

• header是跨站点的全球导航链接最频繁的位置。理想的安排是使用链接的html列表，在响应页面设计中对每个viewport大小适当地设计css。这些是给你的:
  • 可用性:全球链接是用户最希望看到的。
  • 语义逻辑:全局链接的集合应该被标记为一个列表，因为它是一个列表。
  • 可访问性:链接列表格式出现在代码清单的早期，应该包含在html5 <nav >元素中。
  • 搜索可见性:连接代码列表顶部的主要导航关键字的集合是搜索引擎优化的理想选择。

• 选项卡是另一种被广泛使用的、易于理解的全球导航约定，特别是在桌面大小的页面模板版本中。为更大的屏幕设计实现基础选项卡的导航链接的方式是使用css处理的普通html列表来形成“选项卡”图形来查看每个链接。确保您获得了选项卡的详细信息:所选的选项卡应该在图形上明确无误，其余的选项卡显然应该在选择的选项卡后面。这种类型的“you are here”标记在网站内定位用户是必不可少的。选项卡还可以用于实现一个两层导航方案，在这个方案中，在选择的选项卡下出现一个次要的链接列表，这是一个带有css样式的简单html列表，可以使内容保持语义、可访问和搜索可见。

• 在设计小型移动视口中通常的做法是折叠主要导航列表通常在网页标题到一个较小的“隐式菜单”或“三元的Tri-Gram”符号来节省空间（HTML字符和#9776；）。Tri-Gram成为一个主流的Web导航公约时，知名度高的响应的网站如星巴克和推特引导采用符号引导小视窗设计导航。这个Tri-Gram是现在很常见的，响应式网站像卫报和Slate杂志使用triGram作为导航甚至大型的“桌面”布局。

面包屑导航

导航是一种用途广泛、易于理解的导航设备，在具有深度内容组织的大型站点中尤其有用。将面包屑整合进页眉顶部是最好的，就像在国会图书馆的网站一样。另一个流行的用于面包屑导航的位置在标题导航下，在主页<h1>标题和内容之上。

搜索

• 搜索框
  • 网页超过几十页的网站都应提供本地网站搜索。 标题右上角的区域是搜索框的标准位置。 确保您的搜索框不会太小，以适应长时间的查询。 一项研究表明，一个27字符长的盒子可以容纳90%的搜索查询。亚马逊的搜索框拥有两倍以上的字符（57个字符）。

购物车

• 购物车
  • 很久以前，亚马逊把它的“购物车”链接放在标题的右上角，这也是所有其他购物网站现在也放在这里的地方。 不要反对这个趋势; 它是网络上最牢固的接口约定之一。

广告

广告支持的网站经常在横幅广告的其他标题组件之上预留一个很大的区域，研究表明用户通常期望在页面的这个区域看到横幅广告。这种布局约定有重要的含义，即使你的网站不使用横幅广告，因为“旗帜盲区”现象很普遍。“读者通常会忽略那些通常包含广告的屏幕区域，尤其是如果图形内容看起来像横幅广告的话。”确保你的页眉和其他页面图形不使用大多数横幅广告的大量的盒装和图形化的视觉词汇，否则你的读者可能会忽略你的用户界面的重要元素。

侧栏列

将页面字段划分为功能区域是现代图形设计的基本特征。在web历史的早期，设计师们开始在页面的边缘使用狭窄的边栏列来组织导航链接和其他外围页面元素，就像在打印出版物中使用了一个世纪或更长时间的扫描列一样。web用户期望的研究现在支持定位导航链接的惯例，特别是在左边的部分或导航。

框:导航栏向左还是向右放

• 一些眼动追踪和用户研究表明，无论您使用左侧导航栏还是右侧导航栏，这都不重要，尽管左侧栏更为常见，而且大量研究发现对这些导航栏的偏见可能是因为它们非常普遍。 用户似乎无论如何都可以做到，只要您对放置的位置保持一致。 喜欢左侧导航的设计师经常引用英语语言阅读习惯和古腾堡图，但研究图表显示尽管左上角受到读者最多的关注，不过右上角也并不太落后。 广告在右侧栏更为常见，因此用户往往会忽略该区域。 我们普遍赞成左栏导航，因为这是最常见的做法，利用既定惯例是一件好事。
• 侧边栏作为网页搜索框的位置，邮寄地址和联系信息，以及其他更小但必要的页面元素也十分有用。 研究表明，在本地导航链接下的左侧扫描列是大多数用户在查看右侧标题区域后查找搜索功能的第二位。
• 根据 “真实世界”的信息，关于负责的公司是谁，负责的公司在哪，以及如何去联系此公司经常在别的设计优秀的网站上难以找到。如果你出售了一个产品或者一次服务，不要躲避你的顾客。把你的联系方式放在一个显而易见的地方，例如扫描列，在每一页上。

主要内容

• 网络内容是多彩的却很少有提供一般的规定，但接下来的时间练习可以让你更容易地使用内容区域。
• 页面内容标题：不要把开头藏起来。每一页都需要一个可见的标题在顶部附近，标记一个类似”h1”的开头。对于各种逻辑、编辑、可达性、可显示的搜索以及常识等原因，用”h1”作为顶部的开头可以让使用者明白这一个网页是关于什么内容的。确保你的主要内容关键词是在第一个”h1”之中的。
• 面包屑导航：在内容区域的顶部是面包屑导航的通常位置
• 跳转到顶部链接：跳转链接对于长页面来说是一个好的改进。这些链接不需要详细说明——只需要一个页面顶部链接就可以了，但是一个小的上箭头键图标提供了良好的改进。
• 规则：这些水平图形元素很容易被过度使用，导致设计混乱。使用CSS使页面规则尽可能不引人注目，非常薄，颜色比周围的排版要轻得多。一个更好的方法：跳过规则，使用一个小的空白来创建视觉内容分组或分色。
• 分页导航：在多页面序列中，在页面的顶部和底部有简单的文本链接，可以将读者移动到序列的前一页或下一页。在较长的序列中，提供描述它们在系列中的位置的信息是有帮助的。
• 日期：发布和更新日期通常是评估传播和内容相关性的必要条件。在新闻和杂志网站上，出版日期应该出现在页面的顶部，其他网站应该在内容区域底部显示一个最后更新日期。

页脚

• 页脚主要是关于家务和法律问题，尽管有时它们也可以用于非必要的导航。这些元素需要在页面上，但把它们放在某个地方:
• 页面作者或，在大型企业网站，负责任的一方
• 版权声明
• 联系细节，尤其是电子邮件
• 链接到相关站点或大型企业
• 多余的导航链接，用于长页面或附加导航。
• 页脚也可以用于重复全局站点链接。由文本链接组成的扩展页脚几乎没有增加任何大小，但提供了一个不显眼的位置来列出精心选择的链接集。ibm精心设计的导航页脚几乎就像每个页面底部的站点地图。
• 扩展导航页脚是提供一组站点导航链接的极好方法——本质上是页面底部的站点地图——而不必在页面顶部占用大量的空间。在这里，IBM站点提供了6个导航类别作为样式化的HTML列表，这是相关链接集的正确语义HTML标记，在页面加载速度上花费时间更少。这是用户导航和搜索引擎优化关键字的理想选择。

优化快速交付的页面

• 网页的平均大小翻了一番
• 从2007年到2010年，Web设计者享受了一段时间的Web标准，最后在Web浏览器的范围内走到了一起，桌面视图是唯一的考虑因素，并且我们大多数读者的家中有足够的带宽可以享受网页中的大量图片甚至视频。而桌面用户的图片每年都在不断改进，移动网络的兴起使网络媒体的带宽限制再一次成为问题。虽然移动网络和无线网速度在不断提高，移动Web计算仍然受到相对较慢的页面加载速度的限制。移动设备缓慢的网络导致iOS和Android应用程序爆发式提高移动设备的网络服务性能。
• 而网络出版与技术产业早就开始忙于移动用户的需求，我们对大图像入迷，大量的CSS和JavaScript应用，以及视听媒体不断膨胀的网页整体大小。2010到2013年之间，Web页面及其相关媒体和CSS文件的平均大小增加了一倍（图6.15）。
• 随着移动性能挑战被日益广泛理解，网页大小的增长速度已经减慢,但总体 web 性能仍继续在媒体丰富的内容和快速的网页中平衡前进。页面性能有直接和重要的影响, 特别是在线商户。沃尔玛发现，如果一页需要超过4秒的时间(图6.16)，转化率(购物者变成活跃买家的速度)就会下降。
• 在电子商务中, 页面加载速度是关键
• 这并不意味着您必须从页面中删除所有媒体, 但它意味着开发人员和设计者需要将每一个字节挤出页面的开销, 特别是移动受众使用大量的网页。技术例如使用 html5 srcset 属性或 元素来指定图像的多个尺寸 (认为小, 中, 大) ,来根据屏幕大小提供正确大小的图像,压缩每个图像的压缩率,使用GIF格式的小几何图形和图标,以JPEG格式放大,避免使用许多二十四位透明背景的 png 图像,尽可能使用 svg 图形, 并使用紧凑的符号字体来有效地提供图标图形,这些都被用来从web图形中挤出不必要的部分。有关web图形的更多信息,请参阅第11章图片。

围绕 “信息屏” 设计

• 在 1994年,万维网的最早时代,人类界面研究员雅各布尼尔森发现,第一个web浏览器和网站的用户似乎不愿意滚动查看隐藏在其显示屏底部下方的网页部分, 并注意到在网页顶端放置材料的重要性。三年后, 尼尔森收回了他的发现,”网络用户不滚动”,因为他后来的研究表明, 随着用户适应新的网络媒体, 他们确实滚动到网页的下部内容。不幸的是,”用户不滚动” 的格言被证明比后来的撤回更难忘,这种错误的迷言在网页设计中一直存在。
  • Pixels of screen height——屏幕高度的像素
  • Schade eye-tracking fold study heat map——Schade 眼跟踪折叠研究热图
  • Example web site——示例网站
  • Google ad visibility study——谷歌广告知名度研究
  • Chartbeat page scrolling study——Chartbeat 页面滚动研究
  • No. of fixations——定向的数量
  • Viewability——可见
  • Maximum viewability/visibility——最大可见/能见度
  • Visibility——能见度
  • Many visitors scroll before the page fully loads——许多访问者在页面完全加载前滚动
  • Seen by 80% of visitors ~550 px——看到80% 的访客〜 550 px
  • Average desktop screen height ~900 pixels——平均桌面屏幕高度 ~ 900 像素
• 标准桌面显示器主页上的大约115平方英寸构成了网站中最显眼的区域。大多数台式机或笔记本电脑用户将在22日英寸显示器或笔记本电脑屏幕上查看您的站点, 而顶部的8-9垂直英寸 (大约900–1,000像素)是所有在平均屏幕上都可以看到的, 也许在短, 大多数笔记本电脑的屏幕。当然, 各种移动屏幕的措施不同, 但基本效果是相同的: 典型网页的顶部是可见的,除非用户滚动,否则页面的其余部分是不可见的。”上面的褶皱”隐喻指的是经典的折叠大报纸,如《纽约时报》或《华尔街日报》的中间褶皱。在报纸和网页中最重要和最显眼是首页的故事。
• 读者行为是根据眼球追踪和其他研究方法来分析的，以确定读者在屏幕底部或附近看到内容的频率。它显示，用户必须通过滚动显示的内容比内容“在折叠上方”要少得多。
• 虽然web用户在使用web时确实会滚动，但许多研究表明，在web的页面中，在用户必须积极滚动查看的部分，视图有明显的下降。由尼尔森-诺曼集团所做的眼球追踪研究显示，网页的顶部可以获得80%的关注(严格地说，眼球追踪注视着页面)，只剩下20%的固定页面，用户必须滚动显示。谷歌进行了一项关于网页广告在不同页面位置的相对可见性的研究，并发现在折叠中能见度急剧下降，类似于Chartbeat的研究(图6.17)。谷歌的研究还显示，在较小的移动设备上的可见性“低于折叠”，但效果并不明显，尤其是在用户习惯于滚动浏览页面内容的较小的手机屏幕上。
• 在较小的移动设备中,谷歌的研究显示的是一个向下的V型可视化折线图,但效果不太明显,特别是在较小的手机屏幕上,用户已经习惯了滚动看网页内容.然而，谷歌和Chartbeat的研究都表明,虽然注意力和可见性确实在“折叠”上有所下降,但大约有一半的用户看到的材料远远低于折叠线(大约900像素下).这些研究还注意到,如果你假设页面的顶部总是最明显的区域,那么听起来有点违反直觉:页面顶部并不是页面中最可靠的可见部分.因为页面很复杂,而且经常加载缓慢,不耐烦的用户通常会在页面顶部完全呈现前向下滚动页面.用户也很清楚,页面顶端通常被用来做广告,因此是一个不太值得去寻找信息的地方.用户的注意力和广告的可见性似乎在页面上的500到800像素之间达到峰值,相当接近大多数台式机和笔记本电脑屏幕上大约900像素的折叠区域.Chartbeat还注意到,那些选择向下滚动页面的web读者通常会花更多的时间在那里,而不是在“折叠”区域,这意味着当读者发现页面内容有吸引力时,他们会继续阅读页面.综上所述,这些研究表明,”折叠”并不是一条在充分注意和没有注意之间的硬性线,它的底部可见的区域得到了极大的关注,而可怕的“折线”在设计上的重要性可能比之前想象的要小.我们自己的结论是,折叠区域仍然是一个重要的过渡区域,在页面上的关键材料最好不低于600 - 700像素,以保证桌面和笔记本电脑的可见性.

按屏幕的信息来设计

• 大多数web页面设计可以垂直划分为不同功能和不同级别的图形和文本复杂性的区域。随着垂直滚动逐渐显示页面，新的内容出现，上面的内容消失。每当读者浏览页面时，都会建立一个新的图形上下文。因此，Web页面布局应该不是通过将整个页面作为一个单元来判断，而是将页面划分为可视化和功能区，并判断每个信息屏幕的适宜性。注意卫报主页的垂直结构。最大的信息屏幕与链接更密集，因为它是所有用户将看到的唯一区域(图6.18)。1. 首先设计内部模板和移动版本;内部模板建立站点的字符和接口2. 从内部模板派生出第二页;辅助菜单和导航页面3. 最后设计主页;不要让主页操纵了设计过程
• 显然，在响应式网页设计中，构成“屏幕价值”的因素在很大程度上取决于屏幕的宽度和使用中的CSS“断点”。经常评估各种屏幕尺寸上不断变化的响应式设计的影响的另一个伟大的原因是去做尽可能多的设计工作，在浏览器窗口中做“活”的的HTML和CSS。

页面模板

• 总是从你的页面模板或CMS主题与内部页面工作开始，因为内部页面模板将主导站点。主页十分重要，但主页本质上是单一的，并且发挥着独特的作用。你的内部页面模板将在更大的站点上使用数百或数千次。导航、用户界面、移动响应和内部图形设计页面将主导用户的站点体验。根据你的内部页面设计还有导航，然后在此基础上进行你的主页和二级页面设计。
• 网站的开发项目经常会被网站主页的设计和特点所困扰。基本的内部页面模板将在您的web站点中构建绝大多数页面。我们建议先专注于内部页面的设计，然后再解决有趣但又单一独立的具有挑战性的首页设计。

---