WSG7/WAG9(1)

课本：

WSG7界面设计

为媒体设计
读者需要了解他们在信息组织中的位置背景

没有死胡同的页面
确保您网站中的所有网页都至少有一个链接返回到主页，或更好的是，主页链接以及指向网站其他主要部分的链接。

直接访问
用户希望以尽可能少的步骤获取信息。

简单和一致
用户对似乎无偿的复杂性并没有留下深刻的印象，特别是那些可能依赖网站获得及时准确信息的用户。

诚信和稳定
为了说服用户，您必须提供准确可靠的信息，您需要像使用其他类型的公司通信一样，使用相同的高级编辑和设计标准，精心设计您的网站。

反馈和对话
您的网页设计应通过平面设​​计，导航链接和统一放置的超文本链接，提供持续的视觉和功能确认用户的行踪和选项。

带宽和交互
用户不会忍受长时间的延迟。

显示器
事实上，当今主流的响应式网页设计方法以及响应式设计所基于的CSS3 @media代码查询诞生了，它试图为从小型智能手机到巨型“4k”桌面显示器的当前视口提供令人难以置信的范围内的合理用户体验。

在移动和桌面环境中，三个密切相关（有时是相反的）因素控制着屏幕图形和用户界面设计：

屏幕尺寸：屏幕的整体物理尺寸，以英寸（或厘米）为单位。屏幕尺寸会影响显示器的视觉特性，但由于手机屏幕几乎都是触摸屏，显示屏的物理尺寸也会影响用户在手指和拇指触及范围内握住屏幕和操作触摸屏的容易程度。在小屏幕上运行良好的触摸界面可能会在较大的平板电脑或手机上变得笨拙，反之亦然。
屏幕像素尺寸：显示器包含的水平和垂直像素数。一般来说，较大的视口包含大量的水平和垂直像素，但显示器的视觉效果也与屏幕分辨率密切相关。
屏幕分辨率：像素显示网格每条线上每线性英寸（或厘米）的屏幕像素数，这是组合物理屏幕大小和屏幕像素大小的一个因子。分辨率对屏幕上图像和类型的大小和视觉细节有重大影响，最近屏幕分辨率急剧增加。台式机和笔记本电脑显示器也出现了类似的趋势：经过近二十年的电脑屏幕平均分辨率达到72-110ppi，我们正在迅速进入一个所有计算机显示器接近真实“视网膜”分辨率的世界。刚刚超过400 PPI。

“渲染像素（有时称为”CSS像素“或”虚拟像素“）
iPhone 6屏幕的物理像素分辨率为1,080到1,920，但其类型和布局测量的行为与屏幕为540到960时相同。否则，在最近的“视网膜”屏幕上，所有网页和印刷术都会显得小型化。

导航和寻路
万维网最基本的潜在隐喻是通过我们称之为网站“地点”的地方填充的空间导航，因此寻路隐喻非常适合思考网页导航
寻路有四个核心组成部分：

定位：我现在在哪里？
路线决定：我能找到我想去的地方吗？
心智图：我的经历是否足够可理解，足以知道我去过的地方，并预测下一步该去哪里？我可以制作一幅我见过的空间的连贯心理地图，并用它来预测下一步要走的路线吗？
关闭：我能否认识到我到达了正确的地方？

但林奇发现大多数人的地图都由五种元素组成：

路径：熟悉的街道，人行道，地铁路线，公交线路。
边缘：墙壁，栅栏，河流或海岸线的物理障碍物。
地区：具有不同身份的地方，如纽约，唐人街，华尔街和格林威治村。
节点：主要交叉路口或会议地点，例如纽约大中央车站的时钟，也提供了许多进一步的导航选择。
地标：高大或独特的结构让您可以长距离定位。

尽管你可以很容易地看到网上导航的相似之处，但网络是一种特殊的空间，它往往不能提供我们在现实世界中穿过小镇时理所当然的具体空间和导航线索。

没有太空中的规模和运动感。网页导航与物理移动有许多相似之处，但实际上网上旅行很神奇：您只是出现在页面之间的下一个旅程中，并且没有任何景观体验在您面前展现为一系列地标。
没有指南针。没有方向，往往没有明确的方向标题。这种空间方向的缺乏是导致主页的链接在网络导航中至关重要的原因：您在家中的方向以及您是否远离主页或朝向主页是许多网站唯一的“方向”感。
你在这里。所有这些都针对网页上的具体，可见，易于理解的导航线索提出争议。设计人员经常为网页繁琐的界面框架而烦恼 - 我们是否真的需要页眉和页脚以及制表符和链接这样的负担？嗯，是的，我们这样做。没有那个导航界面，它提供的所有“你在这里”标记，我们都在太空中迷路了。

支持搜索和浏览导航
大多数读者对于搜索是如何工作，不了解如何构建高效查询以及很少使用更高级的功能（如范围搜索选项或“高级搜索”页面）只有一个模糊的概念。

精心设计的浏览界面还支持网站的可查找性和可发现性：

可见度：意味着用户可以轻松找到他们知道或假定的内容或网站功能，例如，在Zappos网站上查找特定型号的耐克鞋。
可发现性：意味着用户经常接触到他们以前不知道的新内容或新功能。例如：亚马逊产品页面上的“经常一起购买”和“购买此产品的顾客也购买了”。

设计导航
大多数网站由页面组成，每个页面都有一个唯一的URL。导航设计是关于提供描述场地地形的地图，以及用于从一个位置移动到另一个位置的运输系统。

菜单突出显示热门目的地
我们倾向于将导航视为从这里到达那里的一种手段。
将导航视为您网站功能的地图。

路径引领道路
路径也可以是明确的站点导航元素，例如面包屑路径，可显示您与整个站点相关的位置
通过使用内置在每个页面设计中的持久导航，创建一致的，标记明确的导航路径。
标题是有效的（在小空间中提供多种选择）和可预测的（它总是在那里，在每个页面的顶部），并且它在整个站点中提供一致的标识。

链接支持发现和探索
最有效的链接是：

区分：许多设计师反对网页链接的默认下划线，因为它会中断页面​​上的“类型颜色”，并且通过restyle链接消除下划线并更改链接颜色。下划线是至关重要的，特别是对于内联链接（出现在文本块内的链接），因为颜色感知问题的人可能无法区分颜色差异。
不言而喻：用户不会从模糊或措辞不佳的链接中获益，或从“点击此处”或“获取更多信息”等库存短语中获益良多。链接应该是不言自明的，并且不要求用户按照链接确定其目的地。
相关：用户扫描页面以查找内容，并且如果他们发现相关关键字，他们更有可能进入并阅读您的页面。突出显示关键字对于搜索引擎优化（SEO）也是至关重要的，因为主要的搜索引擎对链接中的关键字给予额外的权重。“前端加载”链接也具有可访问性，因为屏幕阅读器用户通过链接标签可以快速理解链接的本质，而无需聆听整个链接短语。
简洁：链接文本的长短语强调了下划线文本的可读性降低，并且通常过分强调该短语在页面内容上下文中的重要性。
眼动追踪研究表明，读者开始以强调页面左上部分的标准“F”模式扫描页面，但随后快速切换到扫描页面主体以获取主标题，并扫描页面上的任何链接文本页。
确保链接清晰可辨，易于理解是交互设计的关键组成部分。

清晰的“香味”使选择更容易
他的第二个可用性规则是“只要每次点击都是无意义的，明确的选择，无论点击多少次都无关紧要。”关键是要提供一条清晰的路径，并带有不言自明的标签， t需要用户进行很多解码。

信息的气味
具有强烈气味痕迹的网站通常是那些能够深入洞察和理解网站目标受众的网站。通过用户研究和目标导向设计过程，开发团队已经映射了用户界面的设计，以符合用户目标的方式映射到他们的心智模型。

“气味之道”一节中的关键原则。

与其他元素（例如蓝色和下划线）很容易区分的链接效果最佳。
当链接包含关键字（“触发词”）时，链接最能传达气味，并且描述性和清晰，准确地描述它们链接的页面。当链接中的单词在目标页面上显着时，信心会增加。
只要气味随着每次点击而变得更强，并且他们意识到他们正朝着自己的目标迈进，用户不会介意点击多个页面。

边界和地标提供了方向
精心设计的网站导航系统建立在一致的页面网格，术语和导航链接之上，但它还具有视觉灵活性，可在更大的空间内创建可识别的区域和边缘。

导航的浏览和搜索都必须支持用户对站点主要地标的位置和方向感。

一致性使导航更容易
大多数面向文本的信息网站正在聚合在一个相对一致的页眉，页脚，本地导航和内容元素的布局上，这些元素一起成为网页界面设计的一个有用的，熟悉的起点。
在为您的网站设计界面时，请记住，理想的Web界面不应与用户注意力的页面内容竞争。界面是框架，而不是绘画。

搜索也需要寻路
对于喜欢搜索的用户来说，最基本的支持就是使您的网站的每个页面都可以轻松地进行搜索。用户期望任何超过几页的网站都有搜索功能。研究表明，用户期望看到搜索框的页面有特定区域（图7.19），而且大多数用户期望一个简单的简单搜索框，并且不理解或使用“高级搜索”选项。

在简单的搜索表单中，您可以使搜索范围在字段标签中清晰显示，或者在搜索框旁边的细微下拉菜单中进行。在页面上有更多空间的地方，搜索表单可以提供更多选项来控制搜索范围（图7.20），但保持简单。

为了保持您网站的地方感，用户搜索查询的结果应该显示在网页的其余部分。
通过切除浏览信息层次结构的中间步骤，搜索可以将用户发送到网站内部的深层页面，其中只有网站图形，页面标题，面包屑路径和导航链接的“浏览”界面可以提供线索允许用户在网站内建立“你在这里”的位置。

提供导航系统
当您遵循Web导航系统的设计惯例时，用户将能够应用他们已知的关于浏览网站以浏览您的网站的知识。

用于全球寻路的标题
网页标题传达网站的身份，提供主要的导航链接，并且经常提供搜索功能。
用户调查显示绝大多数用户希望网页标题的左上方区域包含您是谁的视觉指示以及回到您网站主页的链接。用户还希望标题将在您的网站的全球导航中发挥重要作用。

菜单为地方wayfinding
更多情况下，部分导航显示在屏幕左侧或右侧的内部页面上。根据大多数用户界面和眼动追踪研究，用户可以快速适应网页左栏或最右栏内的内容导航 - 只需在您如何在所有页面上布置导航时保持一致。左侧导航栏更为常见，因此在可用性方面具有优势，因为所有网络用户都熟悉它们，但随着“移动优先”响应网站的兴起以及更简单的双列页面布局，导航栏通常位于右边。也就是说，右栏有时用于含括号的“相关链接”或广告。考虑到用户期望正确的列包含广告，

面包屑路线导航和定位
沿着你的道路留下面包屑，找到你从哪里来的路
在实践中，面包屑痕迹是网站链接的简单分层列表，显示网站的结构，通常从主页开始，以最接近您当前位置的主要导航页面结束。面包屑路径中的每一步都是可点击的网页链接，这样用户就可以直观地看到网站中的当前位置，并为网站提供主要导航部分的可点击菜单。除了其用户界面优势之外，面包屑路径在为每个网页添加主要链接关键字方面发挥着潜在的强大作用，从而提高了页面的搜索可见性和关键字相关性。

相互作用
在最基本的网络交互中，用户通过点击链接和提交表单与网页进行交互。这种交互会启动客户端（通常是Web浏览器）和服务器之间的对话：浏览器向服务器发送数据和页面请求，服务器收集数据并返回页面。一旦服务器递交一个页面，所有的对话框都会暂停，直到浏览器发出另一个请求。用户对该页面做什么并不重要，除非另有链接被点击或提交了其他表单。这种客户端 - 服务器模型不适用于我们在使用计算机接口时所期望的交互类型。以必填字段为例。在基本的Web环境中，一旦用户提交表单，服务器就会检查数据，如果字段丢失，则将表单返回给用户以完成。

更有效的方法是客户端交互，沿途提供反馈以帮助避免错误，而不是让用户在完成后纠正错误。使用动态表单时，字段在完成时进行验证，并且仅当所有字段完整时“提交”按钮才处于活动状态。在网络上，客户端交互可以通过包括HTML，JavaScript，CSS和文档对象模型（DOM）等技术的组合来实现。这些元素构成了动态HTML或DHTML，这是在页面加载到浏览器中后动态更新页面内容，结构和样式的一种方式。

设计交互
于Web应用程序对用户提出了更高的要求，因此将重点放在与用户相关和重视的内容上尤为重要，从而避免不惜一切代价蔓延到范围。

用户定义相关性
良好的界面设计来自约束。

80/20规则有助于解决目标受众的主要需求。
遵循这一交互设计规则，百分之八十的时间使用了20％的网站功能。剩余的80％正在使用或正在考虑的功能应进行评估，以确定它们是否为网站增加了足够的价值来证明其成本，无论是资源分配还是用户界面的简单性和可用性。消除不必要的功能和内容可以让交互设计师专注于提供能够满足目标受众主要需求的特殊体验。

模式提高可用性
设计模式是用于交互的可识别模式，例如用于访问子页面的下拉菜单和用于在页面序列中移动的分页导航。

人们使用不同的交互方式
现代网站包括基于三种交互模式的功能：菜单和超链接选择，表格填写和直接操作。

择窗体翻转功能：禁用缩放缩放
“形式遵循功能”这个表达常常被用来提醒设计师，以确保决策制定的主要驱动因素是支持事情如何运作，而不是看起来如何。
该禁令基于这样的观点：设计的成功取决于产品在满足功能要求方面的表现，而不是美观方面。

提供交互式组件
基本的交互式Web组件是超链接和表单元素，包括文本输入字段，单选按钮和复选框，下拉菜单和按钮。
名称，角色，值：对于所有用户界面组件（包括但不限于：表单元素，链接和由脚本生成的组件），名称和角色可以通过程序确定; 用户可以设置的状态，属性和值可以通过程序设置; 并向用户代理提供这些项目更改的通知，包括辅助技术。

纽扣
按钮通常显示为具有单个单词或短语的圆角矩形，图像图标或两者的某种组合。它们通常具有可视化的可供性，可鼓励用户点击，单击或按Enter键以启动该按钮指示的操作。

由于链接的样式可以看起来像按钮，因此某些网站使用锚点元素作为链接。这可能会导致屏幕阅读器和键盘用户的可用性问题。例如，按下链接上的空格键会滚动页面，而按按钮上的空格键将执行该操作。理解按钮和超链接之间的区别很重要 - 链接可以在页面之间导航，按钮执行一个动作 - 并为任务使​​用正确的控件。

菜单
菜单是用户选择最适合的选项列表。
菜单使用渐进式公开的设计策略，其中最初只显示最直接和最相关的图层，并且当用户选择主菜单项时显示附加选项。

用于交互控制的菜单栏在图形用户界面中已经存在了很长时间，其中一系列选项水平地显示在屏幕的顶部，以提供对可用内容和功能的访问。在网站上，菜单栏通常允许用户从一个页面移动到另一个页面。选择菜单栏上的项目将打开一个带有其他选项的下拉菜单。将下拉菜单中的项目数量保持为与目标受众最相关的项目数量。确保菜单可使用指点设备，触摸屏和键盘进行操作，并且它们遵循键盘操作的既定惯例。一个常见的错误是在悬停时显示下拉菜单，使得键盘和触摸屏用户无法使用下拉菜单。
标签面板通常用于在不同的窗格之间导航。该交互设备允许相关的内容和功能显示在同一页面上。这些选项卡允许用户在不同窗格之间移动，而无需更改加载新页面的上下文。

对于表格填写，菜单有助于以标准格式收集信息。他
下拉式菜单可以在小空间内提供多种选择，但难以使用。特别是，具有多种选项的菜单（例如选择您的州或国家）对扫描具有挑战性。输入州或国家代码比从选择菜单中选择它更容易，特别是在移动设备上，滚动长列表的选项非常麻烦。
单选按钮很容易扫描，因为选项显示在页面上。但是，由于长列表会占用屏幕空间，并且由于长列表很难让读者解析，因此将您的单选按钮组限制为四到六个选项。
复选框允许用户进行多项选择。单选框也是二进制选择的正确控制方式，如yes或no，其中checked表示“yes”。列表框是允许用户从一系列选项中进行多项选择的另一个组件。
总是将菜单设置为不可执行的默认值，以防止用户仅仅通过忽略从菜单中选择来提交不正确的信息。例如，使复选框默认未选中，并且选择菜单的第一项为空值，例如“无”或“选择项目”。

输入
使用输入字段和滚动文本区域的表单填写允许用户将信息直接输入到字段中，而不是从预定义的选项菜单中选择。
文本输入是开放式的文本字段，允许用户输入字符。一些文本输入具有辅助控件，例如日期输入，允许用户手动输入日期或从日期选择器窗口小部件中选择日期。其他辅助控件包括可用于增加文本输入值的步进器和滑块。对于用户必须输入长段文字的情况，文本区域才是最好的选择。
组合框允许用户将信息输入到输入或从下拉菜单中选择预定义的值。这种混合输入/菜单控制提供了两全其美的优点 - 文本输入的效率和菜单的信息性和功能性方面，文本输入通过显示选定的值提供有关当前状态的信息。
自动完成功能通常会添加到文字输入中。当用户在字段中键入信息时，与输入文本匹配的选项列表显示为下拉菜单。该列表随着用户类型而更新，随着输入更多文本而缩小选项。用户可以选择从下拉菜单中选择一个选项，或者只需完成打字。Autosuggest是自动完成的一种变体，其中下拉菜单项不提供直接匹配，而是建议可能更正确的选项，并且没有拼写错误的相关选项。

切换
切换是一种控制，当被激活时，它可以在开启和关闭状态之间切换一些功能。
切换通常用在桌面软件工具栏中，以将粗体或斜体等格式应用于文本块。在Web上，切换控件用于表单填充 - 单个复选框用作切换控件，例如，选中的含义为“是”，未选中的含义为“否”。但它们也经常用于与显示相关的交互如显示隐藏的内容和功能。

面板和抽屉是包含次要内容和功能的组件，用户可以根据需要选择显示或隐藏。显示和隐藏控制通常是一个图标，例如“+”和“ - ”或旋转以指示面板的打开或关闭状态的箭头。例如，手风琴组件是用户可以展开和折叠的一组重叠面板。
内容切换会显示隐藏内容，例如常见问题解答，答案仅在用户选择“展开”控件时显示。通常，常见问题解答为希望访问所有内容的用户提供“全部展开”选项。
树是以大纲格式排列的项目的分层列表，使用切换控件可以展开和折叠部分和子部分。树有时用于导航，以提供对部分和子部分页面的直接访问。

WAI-ARIA作为最后的手段
WAI-ARIA（可访问的富互联网应用程序套件）是一种基于HTML的W3C规范，提供可以被辅助技术（如屏幕阅读器软件）使用的附加标记，允许用户访问和操纵使用Ajax开发的动态Web界面元素，JavaScript，HTML和其他技术。

这部分是由于创建和维护自定义控件带来的开销。以下列表详细说明了您必须使用自定义控件验证和维护的所有方面 - 使用原生HTML元素开箱即用的属性。没有这些属性的控件将不会被某些用户使用。

可聚焦：您可以使用键盘进行控制吗？
可操作：您可以使用键盘操作控制器吗？
预期的操作：您是否可以使用标准按键来操作该控件？
清晰的焦点指示：您能否轻松看到控件何时关注焦点？
标签：控件是否有与控件关联的文本标签？
作用：控制是否具有与控制相关的正确角色？
状态和属性：是否有与控制相关的所有相应的状态和属性？
色彩对比：控件及其标签是否适用于视力低下或色觉问题的人士？
高对比度模式：启用高对比度模式时控制是否可用？

指导互动
任何设计的中心目标都是自我解释 - 告诉人们如何与功能元素进行交互。

标签
控制标签必须向用户传达足够的信息，以便他们知道启动控制器会发生什么情况。

该<label>元素使用id属性将标签与其元素相关联：

<label for=”departdate”>Departing (YY/MM/DD):</label>
<input type=”text” id=”departdate” />

不要将“占位符”文本用于重要信息，例如字段标签。占位符文本很吸引人，因为文本显示在输入字段内，并且可以在不使用宝贵的屏幕空间的情况下提供指导。但是，当用户激活字段输入信息时，默认文本消失，这正是最需要说明的时候。（是年份，月份，日期还是日期，月份，年份？）另外，占位符文本通常在白色背景上显示为低对比度灰色文本，因此难以区分。占位符文本旨在成为辅助数据输入的辅助手段。如果信息对于成功填写表格至关重要，请将其放置在屏幕上，并附上相应的表格元素，以便每个人都能从中受益。

帮助和说明
上下文帮助在页面上下文中提供答案和指导，而不是将用户发送到站点的帮助部分。
网页表单通常需要提供超出简单表单标签的说明。
必填字段：请注意需要哪些输入字段，并使用通用访问方法。不要依赖颜色，因为不是所有的用户都可以区分颜色。一个约定是使用星号（“*”）来表示必填字段。此外，确保该字段在代码中标记为必需，以便它可用于辅助技术。
工具提示：工具提示通常用于提供有关控件和输入的附加信息。当用户将光标悬停在交互式组件上时，会显示工具提示，为使用组件提供附加上下文和说明。如上面在支持不同交互模式的章节中讨论的那样，依靠鼠标来使您的界面可访问是有问题的。键盘和触摸屏用户不会从通过工具提示提供的指导中受益。

反馈
处理错误的最好方法是防止它们发生。
例如，用户无意中删除文件。防止这种情况的一种方法是让用户每次要求删除文件时确认他们的选择，这可能很快变成唠叨。更好的方法是允许用户继续并删除，但将所有已删除的邮件保存在可轻松检索的位置。Google会将其Web应用程序的已删除文件保留在垃圾箱文件夹中。只有当您选择清空垃圾时，系统会提示您确认您的意图。

错误处理可能发生在服务器上，用户提交表单后或在客户端上内联，因为用户与表单元素交互。服务器端模型中的反馈通常采用返回页面的形式，并显示一条错误消息，指出表单未成功接收。

内联错误消息提供反馈，因为用户在提交时通过表单而不是事后处理提供反馈 - 例如，具有必填字段的表单，其中字段在表单完成期间被监视并且反馈被提供给用户，并且“提交”按钮被禁用，直到所有必填字段完成。内联反馈比事后反馈更有用，因为用户可以在通过表单工作时响应错误，而不必确定哪些表单元素出错，修复错误，再次提交表单，并希望最好。相反，用户可以在错误发生时修复错误，并确信他们的提交将会成功。

发生错误时，让用户知道有用的方法。提供有关所发生情况的具体信息：“您的密码不正确”而不是“您的用户名和密码不匹配”。请在相关字段旁边提供解释 - 在此情况下，请在密码字段旁边。通过将名称，角色和状态信息编码到错误消息中，确保辅助技术可以访问错误消息（请参阅上面的错误响应部分）。

在回应错误时，请确保您的错误消息符合用户需求。错误信息往往写在程序员的讲话中，要么太详细和具体，要么过于含糊，对解释和指导下一步要做什么（“操作失败：再试一次”）提供了很少的解释和指导。为用户提供关于发生的事情的足够信息。他们不需要知道错误号是404，但他们确实需要知道他们请求的页面在服务器上找不到。提供有关如何应对错误的指导。如果无法找到该页面，请提供搜索和站点地图以帮助用户查找它以及指向您网站主要部分的链接。总是欢迎一点幽默。

小工具设计模式和库
最好的设计使用通用语言来指导与数字产品的交互。
Widget库提供了可以下载并嵌入到项目中的代码和支持资源。

WAI-ARIA设计模式：此资源包含有关创建可访问的小部件和结构所需的详细说明。每种模式都包含有关窗口小部件如何响应键盘导航的详细信息，以及组件必须具备哪些HTML元素和ARIA属性才能使辅助技术能够访问所有必需的信息。
jQuery UI：这个交互，小部件，效果和实用程序的集合建立在jQuery JavaScript库上。库中的组件经过检查和维护，旨在提供稳定，灵活和可访问的解决方案。

信息设计
约翰内斯·古腾伯格的“1456年圣经”经常被引用为第一本大规模生产的书籍，但即使在古腾堡发明了可移动类型的印刷术之后，出版业爆炸性增长，在页码，索引，目录以及甚至标题页成为预期和必要的书籍功能。

不要因为网页的新颖性而迷失，编辑一致性，商业通信和平面设计的基本标准被抛弃。

设计信息
网页在几个关键方面与书籍和其他文档不同：超文本链接允许用户体验与上下文分离的单个网页。出于这个原因，网页需要比书中的页面更独立

鉴于创建容易使用且充满复杂内容的网站存在固有的困难，最佳设计策略是在您创建的每个网页中一致地应用一些基本的文档设计原则。
文档的基本元素并不复杂，几乎与互联网技术无关。这就像高中新闻课：谁，什么，什么时候，在哪里。

每个网页都需要：

一个提供信息的HTML页面标题（在HTML <title>标签内），它也成为页面任何书签的文本
本地内容区域顶部的显着标题，用于确定页面的主要用途或内容
创作者的身份（作者或机构）
创建日期或修订日期
版权声明，知识共享声明或其他所有权声明，以保护您的知识产权
指向本地主页或​​菜单页的链接，位于所有页面上的一致位置
指向本地站点主页的链接
指向您企业或公司的主页的链接
大多数网页还应包含这些附加元素：

靠近左上角的组织标志或名称，并带有返回主页的链接
导航链接到您网站的其他主要部分
至少有一个标题来标识和澄清页面内容
邮寄地址和联系信息或此信息的链接
交替（“alt”）文本识别页面上的任何图形
包括这些基本信息元素，你将走过90％的路向用户提供可理解的Web用户界面。

移动界面设计

设计移动用户体验
移动上下文
确保移动用户使用的信息在您的网站的移动视图中突出显示或容易找到。

移动用户界面的组件
移动样式表通常可简化移动显示的网站标题和导航，基于页脚的导航链接可以提供更多导航选项，而不会混淆移动页面的顶部。

混合桌面，平板电脑和智能手机页面导航隐喻定义了移动设计中出现的一个新问题。不要混淆桌面和平板电脑界面隐喻：平板电脑用户习惯于在移动应用程序内容和电子书中横向“滑动”手势，但桌面网络和手机网络用户不适合。大多数响应网站和桌面网站都使用垂直滚动。

在移动环境中真正的“响应”意味着不仅仅是为更小的屏幕重新设置内容框：

在小屏幕上下文中触摸目标应该更大。通过确保您的触摸目标（按钮，导航链接，字段格式）足够大，以便用户在不错过目标的情况下进行击打，或者更糟糕的是击中错误的目标，从而补偿灵活性差和视力不佳的情况。
适应您的排版小屏幕和高分辨率。虽然智能手机屏幕逐渐变大，但分辨率也在提高。这有效地产生了相反的趋势（请参阅下面关于手机屏幕的更长时间的讨论），因为较新的“视网膜”屏幕的更高分辨率实际上可能会导致图形和类型在某些屏幕上看起来更小。这意味着您的CSS3代码（@media queries）需要检查屏幕尺寸（最小宽度，屏幕上水平像素的总数）和有效分辨率（最小分辨率或每英寸像素），以判断哪种类型尺寸最适合移动显示器。
确保活泼的表现。如果移动Web浏览器必须下载大量不需要的图形和样式代码，尤其是大多数移动用户在典型的一天中遇到一些间歇性（或扩展）的网络访问问题，则网页代码中的移动响应变得毫无意义。如果您的页面设计需要数百KB的CSS3代码，那么设计移动应用程序可能比基于Web的解决方案更好。
让付款容易。不要指望移动用户填写一个长表格，并附上一个十六位数字的信用卡号码。使用预设系统（如PayPal，Apple Pay或Amazon Payments），或期望大多数潜在客户在购买前进行救助。
提供可访问的内容和功能。移动设备的可访问性至关重要，触摸屏设备具有内置辅助技术，包括屏幕阅读器软件，放大和倒置颜色。bbc的移动无障碍指南是支持无障碍功能的移动特定功能的绝佳指南。
提供对“桌面版本”的访问权限。理想情况下，您只需向用户提供将视图切换到网站的“桌面”CSS样式的方法。有了今天各种各样的移动设备屏幕尺寸和分辨率，大型手机或小型平板电脑的移动用户可能更喜欢用于某些任务的“桌面”版本的网站，尤其是当您隐藏移动用户的某些内容或功能或需要数据输入表单，不针对响应式显示进行编码。理想情况下，您应该使用浏览器cookie来记住用户的首选浏览风格。

屏幕尺寸和方向
随着屏幕尺寸的增加，Fitt定律开始在移动界面中以更重要的方式运行。菲特定律描述了图形界面中的一个通用常数：获取目标和使用目标采取行动所需的时间是目标距离和大小的函数。换句话说，小遥远的目标需要更多的时间来寻找，而且根本不会被发现。像按钮这样的可点击目标可能受益于各种响应式移动设计中略微增强的尺寸，需要注意，并且可以在小屏幕上提供足够大的目标以便精确触摸。

企业界面设计
提供有凝聚力的体验
改进组织的网络存在的唯一长期方法是对网络界面设计采用一致的方法，这种方法通常明确地认识到企业和网络的大环境。

相干性
一个结构完善的网站丰富有用的内容直接代表了企业的深度和广度，比以前的媒体更全面。

象征
对于大多数员工来说，组织网站的存在已经成为整个企业社会凝聚力和共同目标的最明显和最有效的证据。

定位
清晰和可识别的身份识别程序有助于区分企业与同行和竞争对手。

凝聚力，全面的设计超越了即时的商业目标。企业不仅需要在他们提供的产品和服务方面做出区分，而且还要作为社会实体。在太多的企业，大学和政府网站中，由于其网站的混乱状况，使得缺乏全面的群体身份和共同的使命感变得非常明显。有效的网站存在可以成为增强企业地位和竞争地位的有力工具，但前提是网站能够有效地对组织的知识和能力产生信任感。