经验分享｜关于构建一款产品的导航体系.docVIP

经验分享｜关于构建一款产品的导航体系 　　导航体系对于产品易用性有着极大的影响，设计师应该对此足够的重视起来。今天，本文作者给大家分享的一些自己的心得，希望给各位设计师在将来的导航设计中提供了一些不同的思路。 　　 　　随着智能手机的兴起，移动端导航技术的成熟，对于导航我们也越来越熟悉。现如今去一个陌生的城市，我们只要一部带有导航功能的手机，就能做到畅行无阻。导航最基本的两个功能：告诉用户当前所处的位置和规划出前往目的地的路线图。 　　导航这一理论投射到互联网产品的层面来说，网站和app都是为了向用户展示某些内容，但是与从书本或者海报这类展示形式差异来看，网站和app通过“链接”可以将不同的内容相互串联起来，并且可以往返各个内容之间。简言之，因为“链接”的存在使得这些内容具有了相关性。所以，用户在使用过程中，我们必须让他／她时刻了解： 　　现在我在哪个页面？ 　　这个页面内容是什么？ 　　从哪里来到这个页面？ 　　从这个页面可以到哪个页面去？ 　　什么时候开始构建导航体系？ 　　 　　产品导航体系的构建应该在前期线框图绘制的时候就开始，从排版布局、场景转换到功能定位，大致规划出导航体系的框架。在产品原型图期间，再进行一次检查，以确保所有重要的操作和功能选项对于用户来说都是明确的。我们不能等到进行UI设计阶段才想起来去搭建导航体系，那样会冒极大的风险，对产品的未来也会带来极大的隐患。 　　菜单 　　菜单是最主要的导航元素，在很多人看来甚至是唯一的导航元素。菜单样式很符合我们传统意义上对于互联网产品导航的理解。你打开一款app，出现一个菜单列表，用户可以通过点击选项来进入不同的功能模块。菜单根据在页面中所处的位置可以分为：顶部栏菜单，侧边栏菜单和底部栏菜单。基于不同的交互模式和外观又可以分为：下拉菜单，滑动菜单和弹出框菜单。 　　设计师对于最终菜单方案的选择是基于多重因素的：功能的优先级、使用场景和用户的操作习惯。精心设计的菜单会大大加快用户实现目标和满足需求的进程。 　　 　　上面这个就是侧边栏菜单的一个例子，左侧菜单中项目代表了内容类别，用户可以通过微文案和图标来识别具体功能。这种菜单模式具有较强的拓展性，可以在有限的屏幕空间中容纳更多数量的功能入口。 　　 　　上面这个例子属于列表式菜单的一种。列表式菜单主要应用于核心功能流程比较单一的产品，主界面就可以满足用户核心场景下的需求，不需要通过底部栏菜单来在几个功能模块之间来回切换。 　　行为召唤 　　Call To Action，这里翻译为行为召唤，是一种很重要的设计技法。顾名思义，设计师引入行为召唤是鼓励和刺激用户完成特定操作。 　　在交互过程中，行为召唤在产品的易用性和适航性上起着至关重要的作用。从产品导航的角度来说，即使我们给用户构建了完整的交互流程，但是如果行为召唤没有考虑到，用户会感到困惑。就像我们来到一个陌生城市搭地铁，通过手机导航我们可以找到地铁站，但是“前方100米地铁站”的标志对于我们来说也是极其重要的。 　　常见的行为召唤元素有按钮、标签和链接，但是不止于此。一个图标，一幅插画甚至是一句话都可以是召唤用户的一种行为。 　　 　　行为召唤元素使用的是非成功在于，我们强迫或者希望用户看到的内容在页面中是非足够明显，能否被用户立即识别。 　　上面这个海鲜食品网站的登录页面我们可以看到，图片上面的那句“Lets Cook”就是一个行为召唤元素。用户进入页面第一眼就可以看到这句话，接受到产品的主题。但是这文案本身不可交互，这个页面中可交互的行为召唤元素是页面底部的红色按钮。通过按钮上的标签View More，用户知道点击后就会看到更多特定主题的食品与菜单。红色的应用增强了页面的视觉层次结构，可以有效的吸引用户的目光。 　　功能条 　　功能条作为一个重要的交互元素，用户可以通过点击来实现与产品之间的快速互动。此外功能条还可以向用户展示系统当前状态，让用户时刻了解自己所处的位置。 　　标签栏 　　主要应用于app中，位于页面底端，用户可以通过点击标签栏实现不同功能之间的切换。 　　 　　进度条 　　进度条可以通过时间或者数字百分比的形式，给用户很直观的展示加载或者处理过程的实时情况。 　　 　　按钮 　　按钮是当前UI设计中最常用的交互元素，用户通过按钮可以向系统发出命令和接受反馈。按钮本身有着极强的可塑性，给我们的导航设计提供了更多的发挥空间。 　　汉堡按钮 　　使用汉堡按钮可以将功能列表隐藏起来，它既节省了空间，同时也保持了页面的简洁，而且一般都会结合点击弹出的样式，操作起来也很方便。但是有一个缺点，就是增加了用户的认知负担，有点时候很难发现。 　　 　　添加按钮 　　用户可以点击添加按钮来添加新的内容，包括新的联系人、笔记、照片等。通常情况下，用户点击后会直接进入创