发布时间：2023-1-6 分类： 行业资讯
实际上，网页或应用程序中的导航概念远不止熟悉的导航栏，而是更广泛的交互概念：指导用户和产品有效交互并实现用户目标。本文将详细介绍该界面的导航设计。
对于具有良好可用性的网页或应用程序产品，最基本的操作是导航设计或指导用户的设计。如果用户在使用代购源码网站或应用程序时无法找到他或她的位置或如何到达所需页面，则视觉效果不具创意或吸引眼球无法弥补产品的缺陷。无论您的产品满足用户的需求，让用户了解产品的当前状态，每一步后的结果都是对用户最基本的尊重。
导航
首先，让我们弄清楚导航的概念。最基本的含义是，在我们的现实世界中，当我们从一个地方走到另一个地方时，我们需要一些指导和指示。英文导航一词来自拉丁语，原意是：操纵船舶在海上航行。因此导航是帮助我们到达目的地的行为。导航的另一个含义是基于这个原始意图。
回到UX/UI设计，导航无疑是可用性的关键点。它可以定义为一系列动作组合或技能组合，指导用户成功地与产品交互并实现其目标。用户使用您的代购源码网站或产品满足他们的期望和目标。作为设计师，您需要为他们提供最佳的操作流程以实现他们的目标。因此，当您的导航设计非常高效时，可以大大提高用户体验。
当您第一次开始设计界面时，请考虑如何设计有效的无缝导航。通过一些交互式元素，例如按钮，开关，链接，标签，贝司，菜单和字段，用户处于不同的界面中。切换之间。
我们工作室的设计理念是在界面设计的早期阶段考虑导航设计，包括界面布局，如何在页面之间切换，导航元素的放置和特定功能。并通过低保真原型进行验证，确保用户能够清楚地了解所有重要操作。如果您跳过此步骤，设计将面临巨大风险，其他事情可能最终会被完成。所以无论对于用户，客户还是设计团队来说，做最基本的部分是非常有益的。
菜单
菜单是最熟悉的导航元素，它向用户显示界面的所有重要选项。基本上，它可以是由动词命名的一系列指令，用户可以使用这些指令来指示系统进行诸如保存，删除等操作。它还可以是用名词命名的目录，以表示不同内容的集合。
在界面设计中，菜单可以放置在不同的位置（侧面菜单，顶部菜单，底部菜单等），具有不同的交互和可视形式（下拉菜单，上拉菜单，幻灯片菜单等） 。为了设计菜单的位置，交互和可视形式，设计师需要进行全面的用户调查，包括目标用户的期望和要求，接受的能力以及使用它们的上下文。良好的菜单设计使用户能够更快地实现目标，并为用户体验打下坚实的基础。
△作者：Tubik
这是博客应用程序的界面设计，使用侧面菜单和目录的形式，文本直接描述内容，加上图标作为辅助视觉描述。
△作者：Ludmila Shevchenko
UI概念设计的这个示例使用颜色作为好标记。这是一种非常有效的导航技术：每个类别的背景颜色使用与目录相同的颜色，因此目录和内容具有非常强的相关性。用户可以自然地连接它们。
行为呼叫（CTA）
CTA是号召性用语的缩写。 CTA只是意味着设计师激励用户通过设计做出一些动作。相应地，CTA元素是刺激用户行动的元素。典型的CTA元素是按钮，标签或链接。
无论接口如何，CTA元素都是高效交互的核心，并且与产品可用性和导航有效性密切相关。如果CTA元素的设计不到位，用户将感到困惑并且必须努力。产品转换率和用户体验受到严重影响。这就是CTA元素特别值得注意的原因。无论界面如何，它都必须是最引人注目的元素之一，直接告诉用户如何使用该产品。
△作者：Eugene Cameel
某些CTA元素直接采用图标的形式，没有任何文字描述，但仅适用于每个人都熟悉的图标，例如听筒图标和信封图标。在上面的示例中，此手机图标是此界面中的焦点，这是一个典型的CTA元素，可以快速指导用户完成目标。不需要文本说明，用户可以理解单击此图标的结果。
但是，如果图标的含义不那么明显或可能被误解，最好添加文本描述。
△作者：Tania Bashkatova
以上示例是制作海鲜的代购源码网站的登录页面。该页面的标题是’ s该项目的照片是CTA，但不是交互式CTA。交互式CTA是下面的红色按钮，允许用户查看有关不同主题和配方的更多信息。眼睛的颜色捕捉到页面的视觉水平，将用户的注意力吸引到关键交互区域。
酒吧（
Bar是指界面中的一个元素，一组用户可以单击该元素以快速与产品交互，或让用户知道事件的进度。
标签栏（条）
最基本的条带是标签栏，它们通常出现在应用程序界面的底部，允许用户在应用程序的不同模块之间快速切换。
△作者：Sergey Valiukh
加载栏
加载栏用于指示操作的进度，用户可以按时间，百分比或其他信息了解整个过程。
△作者：Sergey Valiukh
进度条
向用户提供反馈，让他们了解事件的进度，例如已完成计划的事情。
△作者：Valentyn Khenkin
按钮（
按钮应该是最常用的按钮。该按钮允许用户在向系统发出指令后获得适当的反馈。用户按下系统按钮以与系统交互以实现其目标之一，例如发送邮件，购买物品，下载文件，播放音乐等。按钮之所以如此常见和用户友好，是因为按钮模仿了人与现实世界之间的相互作用。
今天的UI按钮有无数的设计风格，以满足很多设计需求。按钮的典型用途是指示该位置是可点击的，因此它需要具有非常高的视觉识别，特定形状和文本以显示其可以执行的操作。设计师经常需要花费大量时间思考如何使按钮与界面完美融合，同时在视觉上跳跃。
△作者：欧内斯特·阿萨诺夫
以下是APP和网页设计中常用的一些按钮。
汉堡按钮
汉堡按钮隐藏菜单。当用户点击它们时，他们可以调出菜单。我有这个名字，因为它由三条水平线组成，看起来像一个汉堡包。这是一个典型的互动元素和有争议的元素。
大多数用户都知道单击此按钮会扩展菜单，因此不需要其他说明。汉堡菜单极大地节省了界面空间，使界面看起来更简单，并为其他重要的界面元素释放了必要的空间。它也非常适合响应式设计，并且通过隐藏菜单使整个设计更加统一，并且界面可以跨设备保持一致。尽管由于一些缺点而引起争议，但由于它的巨大优势，它仍然被广泛使用。对这个元素的主要批评是对于一些不熟悉界面的用户来说，这个更抽象的设计元素可能会让他们感到困惑。因此，在决定使用汉堡菜单之前，您应该调查目标用户的接受程度及其需求。
△作者：欧内斯特·阿萨诺夫
上面的概念设计使用汉堡按钮隐藏菜单以获得简单的页面布局和视觉效果。
加按钮
通常，通过该按钮，用户可以实现添加特定内容的动作，例如添加新联系人，状态，备注，位置等，用户可以在产品中执行的所有基本动作。有时，单击此按钮将显示一个新窗口。有时，用户可以选择添加内容，具体取决于产品。
△作者：Sergey Valiukh
上面的例子是用户点击加号按钮后，会出现可以选择的内容（图片，视频，文字），选择后会弹出添加内容的窗口。虽然此操作可能会添加一些额外的交互，但它是一种用户友好的设计，因为它为用户提供了空间选择。
分享按钮
顾名思义，“共享”按钮允许用户将内容分享到他们的社交平台帐户。在大多数情况下，此按钮使用社交平台的徽标作为可视图像，非常容易识别和识别。
开关（开关）
同样，这是用户非常熟悉的元素，并且在界面中非常常用。因为它模仿了人们在现实世界中熟悉的开关概念。关于该元件的设计，重要的是要注意打开和关闭的状态在视觉上是不同的。这将阻止用户花时间研究它是如何关闭的。各种表单比较或切换动画可以解决此问题并创建出色的用户体验。
△来源：Tubikstudio
这种情况来自闹钟应用程序Toonie。动画效果使交互更平滑和更自然，而整个控件的颜色变化和滑动元件的形状变化允许用户容易地识别开关的状态。如果您想了解整个应用程序的案例研究，可以从源头查看。
拾取器
它也是非常好理解的，即让用户在某些选项中选择目标选项。它通常包含一个可滑动列表，其中包含值列表，例如小时，分钟，日期，指标，货币等。通过滑动列表，用户可以选择所需的值。该元素广泛用于界面设计中，有时间设置此功能。
△来源：Tubikstudio
复选框
复选框可用于同时标记多个特定内容。同样也借鉴了我们在现实世界中熟悉的概念。当我们参加考试或填写调查问卷时，我们会将选项前面的小方框着色为选定的标记。像开关一样，复选框也被大量使用，主要是在设置页面设计中。但是，还有另一个地方使用复选框，即包含任务管理，待办事项，时间记录等任务的应用程序或网页。
△作者：Tubik
以上是待办事项应用程序的概念设计。当用户单击该复选框时，表示内容已完成。字体变得更粗，颜色也会变化，这使得将完成的任务与其他未完成的任务区分开来非常明显。
界面导航是用户体验设计的核心之一。毫无疑问，如果你没有看到这条路，你就无法前往目的地。用户现在面临越来越多的代购源码网站和应用程序。越来越多的选择将使用户期望这些产品具有适合他们习惯的导航设计。
图标（
图标可以被定义为象征概念或对象的视觉图像，并且旨在增强与观众的通信。它将与文本结合使用，以呈现您想要传达给受众的信息。在界面设计中，图标通常是象形图或表意文字，这对于可用性和成功的人机交互非常重要。
毫无疑问，图标的一个重要功能是有效地替换文本描述。由于用户比文字更快地了解图片，因此该功能可以极大地增强用户体验，增强产品导航并引导用户。但是，重要的是要注意即使是轻微的模糊或误解也会导致糟糕的用户体验。因此，在设计图标时进行必要的测试，并根据目标用户平衡文本和图标的使用。最有效的方法是使用图标和文本，以便大多数用户没有问题。电子商务应用或代购源码网站最常使用此表单，以便为用户提供足够的信息，以便轻松快速地查看。
△作者：Tubik
根据图标的功能，我们可以将它们分为以下几类：
交互式图标
这些图标具有交互功能。它们是可点击的并响应用户请求，触发由图标表示的操作。该图标通知用户按钮，控件或其他界面交互元素的功能或特征。在大多数情况下，这些图标具有明确的含义，不需要文本辅助指令。
△标签栏
△菜单概念设计
澄清图标
用作描述的图标，设计人员使用它来指示特定内容的特征或类型。它有时不是界面布局的一部分或没有直接交互。通常与文字一起使用。
△作者：Tubik
△作者：欧内斯特·阿萨诺夫
娱乐和装饰图标
这些图标专注于捕捉眼睛，视觉效果不是功能，通常用于节日或特殊模型。它们可以有效地吸引用户的注意力并增强视觉冲击力。
复活节和春季主题图标：
△摄影：Arthur Avakyan
APP图标
每个平台上的交互式品牌标志，显示品牌和产品的图像。最常见的是我们移动界面上每个应用的图标，通常是品牌和产品的徽标。
△作者：Arthur Avakyan
Web图标（favicon）
也就是说，我们经常在网址栏或书签中看到的URL前面的小图标也代表产品或品牌的图像。允许用户在浏览网页时为其提供快速视觉提示。
搜索字段
搜索区域通常被称为搜索框或搜索栏，这意味着用户可以输入他们想要在该区域中搜索的内容。它是具有大量内容的代购源码网站或应用程序的核心导航元素，如博客，电子商务，新闻和其他产品。精心设计的搜索框使用户可以轻松找到所需信息。因为它可以帮助用户节省大量的时间和精力，所以它是一个用户友好的界面元素。
它可以设计成各种形式，从标签的形式到引导输入的线条或简单的搜索图标。在大多数情况下，搜索框的图标是放大镜样式。基本上所有用户都了解此图标的含义，因此可以实现非常直观的导航设计。如果你想对这个图标大惊小怪，你应该对它进行测试，因为如果你改变它很糟糕，它将严重影响交互和界面的可用性。搜索框也可以添加到提供候选或自动填写内容的下拉菜单中。
△作者：欧内斯特·阿萨诺夫
另一点需要注意的是接口中搜索框控件的位置。在网页设计中，搜索框通常显示在页面顶部。这是一个非常合适的设计，因为通常网页的顶部区域具有高可见性，用户可以看到网页，并且不需要花时间来查找控件。举一个反面的例子，如果电子商务代购源码网站的搜索框设计有问题，用户就无法快速轻松地找到他们想要购买的东西，并且代购源码网站的销售业绩将受到很大影响。由于许多代购源码网站现在将搜索框放在页面顶部，因此用户也养成了在那里找到搜索框的习惯。
至于App界面，根据情况，设计师可能会面临更多限制。如果它是一个内容很多的应用程序，并且搜索是核心功能之一，那么它通常放在一个突出的标签栏上。如果搜索不是核心功能，您可以将其隐藏在菜单中，或仅在需要或目前显示时显示。
△作者：Sergey Valiukh
标记（
标记是用关键字标记的交互元素。标签实际上为用户提供快速跟踪元数据，允许用户快速导航到与关键字相关的所有内容。除了网页或应用程序本身具有的标签之外，在许多情况下，用户可以自己创建标签。
△作者：Design4users
标签的界面元素广泛用于用户原始内容平台（UGC）的界面设计。当用户将图片或状态上载到社交网络时，可以添加关键字作为标签。上图显示，博客代购源码网站Design4Users使用标签来增强代购源码网站的内容导航。通过单击标记，您可以切换到包含此标记的所有内容的页面。标签是友好的SEO友好技术，可以提高搜索内容的用户的成功率。
△作者：Unsplash
另一个例子，上面的图片是照片素材代购源码网站Unsplash的界面。当用户想要下载图片时，可以输入描述图片的关键字作为标签。以这种方式，帮助用户有效地找到期望的图片。我们还可以注意到输入框中的说明指导用户操作，这进一步提高了产品的可用性。设计细节非常重要。总而言之，标签是用户可以自己创建的导航元素，使界面与目标用户之间的距离更近。
完全设计整个界面的导航并不是一件容易的事。它需要一些心理学，交互模式和用户测试的基本知识。它还需要在项目的早期阶段考虑代购源码网站或应用程序的信息架构。但做得好可以帮助您的产品帮助用户解决他们的问题，为良好的用户体验奠定坚实的基础，并使他们对您的产品越来越粘。
