佛山企业网站开发：寻找移动网络

在首先设计移动设备时，导航会占据内容的后座，无情的编辑为更有针对性的体验铺平了道路。追求简洁，结合移动视口的严格空间限制，往往导致我们去除元素以试图最小化界面。但是，我们通过巧妙的编辑和紧凑的用户界面获得的节省空间的便利性可以牺牲我们的用户所依赖的导航辅助工具。佛山企业网站开发

为了帮助平衡对视觉简单性的渴望和保持网站易于浏览的需求，我们可以从寻路世界中借鉴一些概念。本文介绍如何将这些概念应用于移动Web。

寻路的重要性

顾名思义，寻路是我们如何理解周围环境并驾驭我们周围的空间。我们不断依赖环境中的线索来定位自己，找出我们去过的地方和下一步的去处。如果你曾经飞过，请回想一下在陌生机场下飞机的经历。它可能是这样的：

1. 你在门口停下来，四处看看，快速调查周围的环境。

2. 您可以观察到大多数人似乎走向哪个方向并开始朝着那个方向前进。

3. 当您开始行走时，您的注意力会从一个标志转移到另一个标志，扫描任何类似“行李提取”或“地面运输”的符号或文本，并忽略任何与其中任何一个不匹配的标志。

4. 一旦您感觉自己正朝着正确的方向前进，您的注意力就会放松，您开始关注下次您在机场时可能想要返回的任何商店或餐馆。

人们在数字空间中定位自己的方式与他们在现实世界中找到自己的方式并没有太大的不同。我们专注的能力取决于我们是在寻找信息还是娱乐浏览。当我们迷失或努力到达目的地时，我们甚至会经历同样的情绪和挫折感。

以下是三种寻路概念，可以整合到移动和响应式设计中，以帮助您的访客更轻松地导航。

1. Circulation systems（循环系统）允许人们在空间内移动的基础设施

2. 空间线索空间的可观察品质，帮助人们理解周围环境

3. 标牌指导人们的教学标志，符号和图像

循环系统

在城镇中穿行时，街道和人行道是我们从一个地方到另一个地方的路径。在建筑物内，我们可能依靠楼梯和走廊来绕行。各种路线经常共存，为人们提供了到达目的地的多种选择。可用途径的网络形成空间的循环系统。在网络上，循环系统由导航结构塑造。最熟悉的是层次树菜单，这是与宽屏桌面设计同义的模型。

分层树

这种自上而下的分类树是信息丰富的网站的事实上的惯例。用户可以访问顶级（父）导航和本地（兄弟）内容。这是有利的，因为它为用户提供了许多不同的路径来探索。

这种型号倾向于变得很重，使其非常适合大屏幕，但在装入小屏幕的范围时可能很麻烦。设计师一直在探索展开体验的概念，而不是试图将扩展的菜单压缩到移动屏幕上，而是一个术语设计师和研究员Rachel Hinman用来描述逐步向用户揭示信息的系统。在为您的网站规划流通系统时，请考虑如何合并以下“展开”模式：

嵌套娃娃

嵌套娃娃导航是一种线性菜单模式，在移动网络应用程序中是常规的。当用户在站点地图中上下移动时，用户会逐步点击或滑动以显示其他菜单选项。将用户从广泛的概述页面汇总到详细页面可以帮助他们磨练他们正在寻找的内容，并专注于单个部分中的内容。这种方法非常适合小屏幕，但代价是跨部分容易横向移动。

枢纽和辐条

该模型利用中央屏幕作为探测的发射台。链接指向网站的其他部分或独立的应用程序，每个部分都与其他部分隔离。要从一个部分移动到另一个部分，您必须先跳回到集线器。这种主屏幕方法消除了对每个页面进行全局导航的需要，使其成为基于任务的应用程序的流行选择，这些应用程序受益于焦点和最小的分心。

便当盒

便当盒模型是一个仪表板式应用程序，可以提供动态组件和信息。大多数交互发生在单个多用途屏幕的上下文中，该屏幕展开以显示附加信息的层。对于用户与各种来源汇总的数据进行交互的网站，这是一种流行的选择。

过滤后的视图

与仪表板不同，仪表板提供用于与各种数据交互的控制中心，过滤后的视图系统处理单个数据集。可以从多个角度探索信息，具有由用户控制的各种视图和排序选项。

结合系统

即使具有漂亮的样式和过渡，传统导航系统的庞大性也会在小型触控屏幕上感受到k - 特别是与本机应用程序相关的优雅，沉浸式交互相比。试图将一个信息丰富的网站变成类似app的导航系统可能过于拘束，但采用完全分层的模型可能会有点过分。幸运的是，模型不必相互排斥。

我们最近的一个项目涉及与医疗保健组织合作，将其内容和在线工具集中在一个网站下。我们最初开始构建一个分层站点地图，其中包含一个仅包含所有成员内容的部分。我们还玩弄了在网站上引入额外菜单的想法：公共导航以及登录成员出现的导航。

这感觉比它需要的更复杂，并且在小屏幕上组织起来会很棘手。认识到当前成员对营销密集的公共内容的需求很少，我们最终放弃了成员部分的所有公共菜单。而且由于成员主要访问网站以访问一些关键应用程序，因此他们从分层内容结构转向带有主屏幕的中心辐射模型，这将推出各种在线工具。

这与我们最初创建跨越整个网站的全局页眉和页脚的计划背道而驰，但它允许我们设计一个既精简又易于导航的系统。这仍然让我们面临的挑战是尽可能无缝地在公共和会员内容之间进行过渡。我们转向空间线索以在整个界面上建立连续性。

空间线索

如果循环系统代表了人们可以到达他们想去的地方的路径，那么空间线索就是空间的可识别品质，可以帮助他们定位自己并照亮可用的路径。设计师依靠一些强大的空间线索来帮助用户找到自己的方式。

地标

地标是您在周围环境中观察到的任何卓越，独特或令人难忘的物体。从远处可以看到一些地标，并根据您相对于它们的位置帮助您找出您所处的位置。例如，芝加哥是世界上最高的摩天大楼之一威利斯大厦的所在地。如果您在探索城市时无论如何都会迷失方向，您只需扫描天际线并比较您与塔楼的相对位置，即可了解您的位置和方向。其他地标只是沿着你的路线排列，帮助你找到从特定地方往返的路。地标帮助我们定义和理解空间。我们依赖地标的程度可以通过我们如何提供方向来证明：“在路上向左转，”或“直到三个街区直到你到达星巴克，

在UI设计中，地标是任何一致定位或值得注意的元素，可帮助游客定位自己。全局元素的一些示例（即在整个网站中可见）是：

• 标志。轻松返回主屏幕

• 主要导航。快速访问主要登录页面，使用户能够转动和探索其他部分。

• 面包屑加强了系统内的当前位置，并充当梯子以遍历站点地图

• 搜索。当用户不想回溯或继续浏览时，提供保证和另一种寻找信息的方式

其他地标可能只出现在某些地方，帮助访问者区分网站特定部分的位置：

• 部分横幅。加强用户所在的部分

• 部分导航。访问类似分类的内容

• 独特的模板或组件（幻灯片，画廊或活动日历）。用户可能记得传递并尝试返回的可视识别点

仅这一点就是非常简单的东西。当您考虑多屏幕行为和自适应设计时，它会变得有趣。您可以看到，随着网站访问者仔细阅读您的网站，他们正在构建他们遇到的所有可识别地标的心理地图。数据显示，许多交互随着时间的推移和跨设备发生。如果界面中的地标看起来与一个断点或设备截然不同，则可能会使用户迷失方向。另一方面，如果您有意在UI中建立连续性，在所有屏幕尺寸上保持这些地标的可识别质量，那么您将为回访者提供更熟悉，更直观的体验。您可以通过检查UI元素如何跨越断点进行调整来增加设计中地标的连续性：

• 位置。他们是保留相对的页面位置，还是他们跳来跳去？

• 表格。物品是保留其形式还是变成完全不同的东西？

• 颜色。前景色和背景色保持不变或切换？

• 优先权。最突出的页面组件是否在屏幕大小上保持其比例视觉权重，或者层次结构是否会发生变化？

• 可见性。可见的东西是否仍然被揭示，隐藏的物体仍被隐藏？

巧妙地调整UI以最适合可用的屏幕大小或视口是一个有价值的目标。请记住，每次调整都会创建一个用户必须自己定位的新环境。虽然适应是必要的，但要平衡它，同时注重连续性。

边缘

边缘划分一个对象或部分的结束和另一个的开始。在我们周围的世界，我们被地理边界所包围，如山脉，海岸线和树木线条，以及旨在划分我们的环境的人造设施，如栅栏和墙壁。在UI设计中，清楚地定义区域和对象的边缘可以更快地使用户熟悉界面。边界有助于在网站上划分界限，例如来自内容的chrome，来自辅助导航的主导航以及来自页面特定功能的全局工具。在微观层面，边缘有助于定义点击目标的边界并分离各个内容块。

在设计宽屏幕时，我们可以依靠空白和列来描绘内容边界。在处理窄视口时，我们有更少的空间来组成列并利用空格来有效地区分页面的各个部分。我们可以通过以下方式回收小屏幕场景中边缘的可用优势：

• 提供明显的视觉提示，以建议链接和按钮的活动点击目标区域，

• 使用背景颜色或强边框的偏移来区分模板区域。

标牌

标志是视觉辅助工具，为人们在空间内的决策点提供指导。标志通过象形或印刷元素进行交流。在我们的界面中，大多数非内容元素都扮演着标牌的角色。标签，按钮，分页，菜单和号召性用语等元素都充当了标志。由于符号往往比书面文本占用更少的空间，因此它们在移动设计中被大量使用。由于人们以不同方式处理图像和文本，因此设计人员在决定如何以及何时使用其中一个时需要考虑某些因素。让我们快速了解一下如何有效地使用图标。

使用图标

图标可以是一种有效的方式来传达信息和突出导航选项，同时在小屏幕的狭窄范围内节省空间。普遍可识别的符号也可以克服语言障碍，使界面更易于全球访问。

虽然图标可能会吸引审美情感并为视觉组织界面提供了一个很好的解决方案，但它们也有可能对可用性带来障碍。

当图标熟悉且明显时，图标效果很好，没有任何误解的余地。但即使是许多最常用的图标也有多种含义。考虑以下图标，这些图标最初看起来是无辜的。每个代表什么？

• 铅笔。写或编辑？

• 另外。添加项目还是展开？

• 减。删除项目或崩溃？

• x。关闭还是删除？

• 放大镜。缩放还是搜索？

• Caret。玩，去还是向右滑？

正如我们所看到的，即使在简单的场景中，图标也可能含糊不清。同时，最小UI的吸引力诱使许多设计师使用图标来表示更复杂的概念。这再次挑战我们权衡节省空间的价值与界面可理解性的重要性。即使图标最终是可辨认的，解释它们的行为也会增加用户的认知负担。这会给决策过程带来摩擦，并可能妨碍导航。

文字标签

与图标相比，精心编写的文本标签可以留下较少的误解空间，从而减少用户的认知负担。

比较以下两个屏幕截图，两个屏幕截图都将图标与文本配对。第一个示例首先关注图标，而第二个示例强调文本标签。

图形的抽象性质需要相当多的解释，并且伴随的文本更难扫描，部分原因是网格排列，部分原因是类型的大小。请记住，使用移动设备时，文本很可能会按照手臂的长度进行查看，并且人和设备可能处于运动状态。在第二个示例中，标签假定为焦点。左对齐文本提供了一条直读线，使扫描和比较导航选项更加容易。这里，图标用于补充文本。因为我们快速处理图像，所以一旦用户了解了符号的含义，他们未来的交互将通过识别加速（即将图像与其代表的链接相关联）。

前面的例子也假设了两件事。首先是文本标签确实写得很好。不明确的文字可能像模糊的图像一样对导航有害。第二个假设是访问者是第一次使用者。一旦一个人在第一个屏幕截图中学习了图标的位置和含义，认知负荷就会降低，界面将变得熟悉，因此更容易使用。

这与用户界面工程进行的研究一致，该研究发现：

• 文本和图像比文本更好地工作;

• 单独的文本比单独的图像更好;

• 图标是学习的，但图标位置学得更快（所以，如果你最喜欢的应用程序获得一个新的图标，你不会感到困惑;但如果有人混淆了手机主屏幕上的应用程序的位置，你会被激怒） 。

可见性和决策

当您确定如何呈现产品列表时，会出现图形和文本之间的另一个冲突。显示图像的一个优点是它们可以帮助用户在视觉上区分选项。由于产品图像比文本图像占用的空间更多，因此视口中可见的项目数量将减少。那么，更重要的是，为每个选项显示更多细节或在单个视图中显示更多选项？

当类别区别明显时，视觉线索（例如产品图像）的添加最低限度地有利于可用性。主要目标是显示选项，使用户可以轻松扫描和比较这些选项。在这些情况下，单独使用标题可能是最佳选择，因为当您可以同时查看所有（或大多数）选项时，比较项目更容易。如果访问者必须滚动或滑动以查看他们的选项，他们将被迫依赖记忆，将当前视图中的内容与之前的视图进行比较。

另一方面，对于彼此相似的产品，图像将帮助用户更好地区分它们。在这种情况下，区分项目可能比比较单个视图中的项目更重要。

铺平你的道路

对于人们如何找到自己的方式，进出视线的内容至关重要。“我可以从这里离开”的答案由用户可以轻易感知的路线决定。应该使最流量最大的路线（或者您想要通过最多流量的路线）最明显。较少旅行的路线可以不那么明显地标记。导航系统是主要还是次要导航系统是一个重要的考虑因素，需要在UI中对其进行优先级排序。导航的视觉突出是否映射到导航的实际优先级？

路线可见性和隐藏菜单

许多流行的移动导航约定涉及隐藏和显示菜单。这种技术依赖于菜单按钮（通常是臭名昭着的汉堡包图标），通过切换打开面板或从画布上推送导航来触发菜单的外观。关于汉堡包图标是否被普遍认为是代表菜单的符号的争论仍然存在。除了潜在的模糊之外，辩论忽略了一个更大的问题：即使人们认为它是召唤菜单的提示，菜单选项最初是隐藏的，因此这些路线被遮挡了。

跟踪信息气味的用户将在屏幕上扫描触发词：文本映射到他们脑海中描述他们所寻找内容的词或短语。在宽屏幕上，当暴露导航时，这些触发词是可见的，并增加用户发现它们并点击的可能性。假设您的主导航菜单具有简洁，互斥和熟悉的标签，通过将它们存储在视野之外，您隐藏了那些强大的触发词，实际上模糊了主要导航路线。

将其与“跳到导航”模式进行比较，其中菜单图标将用户向下滚动到锚定在页面底部的菜单。在此模型中，按钮仍然可以通过点击或单击快速访问菜单，但这些触发词仍然存在于可见画布中。滚动或滑过主要内容的用户将在普通视图中发现带有触发词的菜单选项。

在评估哪些元素可见以及哪些元素可以收集时，请考虑以下问题：

• 您的用户如何寻求信息？如果你的大量访问者是“知名项目搜索者”，意味着他们清楚地知道他们正在寻找什么，那么他们更有可能想要搜索; 因此，使搜索字段可见将是一个很好的提示。如果大多数用户只对他们想要的内容有一个大概的了解，那么他们可能更容易浏览，因此会受益于暴露的触发词。

• 您的用户想要做什么，以及他们如何到达那里？将屏幕上显示的内容与目标受众正在查找的关键内容或他们打算完成的任务进行比较。您可以看到的内容和链接是否为用户提供了一条足够简单的路径来完成他们的目标？或者他们必须依靠导航。如果导航是一个补充工具，作为绕过网站的快捷方式，那么它可能会受益于轻松收起。另一方面，如果菜单是导航网站的主要（或排他）方式，则可能需要更高的可见性（或默认情况下可见）。

• 您的隐藏内容与什么竞争？在内容最少的页面上，单击图标以显示隐藏菜单选项列表是一个明智的选择。但随着更多内容和链接添加到屏幕，菜单图标有更多的竞争对手。将此与可见链接充满信息气味（即一些图形或文本提示，表明链接后面存在哪些内容）这一事实相结合。同时，抽象符号的信息气味相对较差，暗示只能在其后面找到“更多选项”。

结论

尽管物理世界和数字世界之间存在着令人难以置信的差异，但我们如何定位自己并决定在两个空间中去哪里的相似性是不可思议的。建筑师和城市规划师所依赖的相同线索可以帮助我们处理我们的位置，知道在哪里集中精力并选择我们的方式可以应用于我们在网络上的日常工作中。请记住，浏览应用程序的每个人都在通过一个空间 - 通常是一个不熟悉的空间。当用户开始他们的旅程时，您提供什么类型的寻路辅助来指导他们？

佛山企业网站开发