06.页面结构 Page Structure p.173
本次翻译是中山大学南方学院-文学与传媒学院-网络与新媒体专业-2016级-网页设计与制作课-K组的小组成员共同协作的成果。
6.3 页面结构组件 PAGE STRUCTURE COMPONENTS
P.190,K,黎婵万维网“站点”（Web “sites” ）是完全抽象的—他们并不存在,除了在我们的大脑中。当我们鉴定一个网站的时候，我们描述的是一个共享一般图形、具有导航性的外观及体验的单个链接页面的集合。在一个有凝聚力的“网站”创造一种连续性的幻觉是页面共享的设计特性，比如他们的CSS和页面图形。单个HTML页面,包括如何设计和联系,构成万维网站点的原子单位，且网站结构的所有特征都应该出现在页面模板中。
P.191,K,黎婵图 6.12
构造页面 STRUCTURING A PAGE
K,胡靖茵在过去十年中，随着Web的成熟，文本驱动的信息站点中的网页结构变得更加统一和可预测。虽然并非所有的Web页面都共享了这里描述的确切布局和特性，但是大多数Web页面中的一些或所有这些基本组件，在Web用户熟悉的页面位置（图6.12）。最近的响应式设计系统倾向于简化页眉和导航框架，特别是对于较小的移动屏幕。K,胡靖茵如果你在一个较大的组织中工作，总是把你与大企业的关系作为你网站设计的一个清晰而有意义的部分。如果你的机构有一个身份识别程序，就使用它。采用大企业的设计标准可以节省大量的时间和金钱。因治理不善的大学、政府机构、大型非营利机构而臭名昭著的机构通常也有混乱的网站。大公司有时也有同样的问题，但是，企业形象的标准和规范在商业世界中已经得到了很好的确立，大多数公司网站开始时都期望每个人都有一个共同的外观、感觉和用户界面，并且每一个独立的公司网站都会与母公司建立明确的关系。
p.192
页眉和站点标识 Page headers and site identity
K,蔡泽纯页眉类似于主页的微型版本，它位于每个页面的顶端，并且在有限的空间内完成许多主页所做的事情,页眉提供了站点身份导航，包括搜索和其他工具.这些组件的位置和布局因站点不同而不同，但总体设计模式已经相当一致。K,蔡泽纯页眉是站点标识中最可见的组件。看似真实的是，共享页面的集合将被视为一个“站点”，甚至页面来自各种技术来源（博客软件、门户系统、sharepoint、web应用程序、内容管理系统等等）复杂的企业网站让用户感到混乱和困惑的一个原因是，多个企业软件供应商都参与其中，但每个供应商都不愿意做很多事情来符合当地的设计标准。这既是一个设计问题，也是一个软件采购问题:K,蔡泽纯- 为您的内部和外部web系统开发一致的企业标识标准
- 让您的软件采购团队参与进来，确保他们了解接口和企业实体问题
- 坚持每个软件供应商都符合本地身份、可访问性、图形和用户界面的互操作性标准，让他们的产品适合于你的一般企业的web体验
K,黎婵如果你遵守谈判签订软件供应商合同之前企业设计标准，通常你会惊喜地看到“我们的软件不允许定制”变成了“我们当然可以做”。
首页链接 Home link
K,何敏红将您的组织或站点标识放置在页面的左上角，并将徽标链接到主页可能是Web上使用最广泛的设计约定。一个你应该经常使用，除了在特殊情况下，比如复杂的表单，“购物车”结帐过程，以及其他你想让用户的意图完全参与的过程中。如果你不在页眉中使用徽标或图形，至少在页面左上角放置一个“主页”链接，其中99.9%的用户希望找到它。
p.193
全局导航 Global navigation
K,崔影芳header是跨站点的全球导航链接最频繁的位置。理想的安排是使用链接的html列表，在响应页面设计中对每个viewport大小适当地设计css。这些是给你的:K,崔影芳- 可用性:全球链接是用户最希望看到的。
- 语义逻辑:全局链接的集合应该被标记为一个列表，因为它是一个列表。
- 可访问性:链接列表格式出现在代码清单的早期，应该包含在html5 <nav >元素中。
- 搜索可见性:连接代码列表顶部的主要导航关键字的集合是搜索引擎优化的理想选择。
-
K,赖婵娟标签是另一种被广泛使用的、易于理解的全球导航约定，特别是在桌面大小的页面模板版本中。为更大的屏幕设计实现基础标签的导航链接的方式是使用css处理的普通html列表来形成“标签”图形来查看每个链接。确保您获得了标签的详细信息:所选的标签应该在图形上明确无误，其余的标签显然应该在选择的标签后面。这种类型的“你在这里”标记在网站内定位用户是必不可少的。标签还可以用于实现一个两层导航方案，在这个方案中，在选择的标签下出现一个次要的链接列表，这是一个带有css样式的简单html列表，可以使内容保持语义、可访问和搜索可见。 K,何敏红在设计小型移动视口中通常的做法是折叠主要导航列表通常在网页标题到一个较小的“隐式菜单”或“三元的Tri-Gram”符号来节省空间（HTML字符和#9776；）。Tri-Gram成为一个主流的Web导航公约时，知名度高的响应的网站如星巴克和推特引导采用符号引导小视窗设计导航。这个Tri-Gram是现在很常见的，响应式网站像卫报和Slate杂志使用triGram作为导航甚至大型的“桌面”布局。
面包屑导航 Breadcrumb navigation
K,崔影芳导航是一种用途广泛、易于理解的导航设备，在具有深度内容组织的大型站点中尤其有用(见第7章界面设计)。将面包屑整合进页眉顶部是最好的，就像在国会图书馆的网站一样(见黑色标题栏，图6.13)。另一个流行的用于面包屑导航的位置在标题导航下，在主页< h1>标题和内容之上。
p.194
K,胡靖茵图6.13国会图书馆是很好地使用“面包屑”导航（见头黑线）使浏览大，多层次的，内容丰富的网站更容易、更直观。