Axure教程：全屏下拉菜单导航交互效果的原型设计（附源文件下载）

原标题：Axure教程：全屏下拉菜单导航交互效果的原型设计（附源文件下载）给大家分享一个PC导航列表交互原型设计，顺带同大家探讨下通过界面框架、组件设计来实现产品设计的标准化（文后附上rp供各位参考）。PC前台页面的整体设计一般是自上而下，多数基于中心垂直线以及两条垂直边线。因本文要分享的导航只是个全屏导航，并不需要考虑高度，所以只要做宽度的控制。在不同尺寸屏幕的自适应，就不深入了，今天讲的，只是将原型能够在多数不同尺寸屏幕上都能很好的浏览，不偏移也不多出些滚动条来。一、母版的创建按个人习惯，笔者将内容展示区统一定成1200px，并创建母版。导航部分分成两大块：主导航、子导航。向母版中拉入一个动态面板，设置宽度1200px。右键此动态面板，选中“100%宽度”。这里为了让“100%宽度”能在比1200px更宽的屏幕上实现效果，且对齐中心垂直线，需要做两步工作：（1）在任意页面上设置页面样式，将页面排列改成居中，并更新到所有页面（笔者习惯将背景设置成黑色，容易区分内容）（2）在导航动态面板中，拉入一个2880*80px的背景矩形（宽度大于常用屏幕尺寸即可），并将其中心线对齐动态面板中心线子导航部分的背景100%宽度以及居中显示同理设置。二、主导航按钮的设计接下来我们拉入几个主导航矩形，将其背景色设置成主导航栏背景一致（颜色1），并设置好每个导航的交互样式-选中状态（其中背景为颜色2）。这里我们不用鼠标悬停，主导航和子导航间移入移出还要将各自效果进行保持，用鼠标悬停的交互样式难控制，悬停效果通过动态面板状态切换来实现会好很多。将每个主导航都转成动态面板，并各自复制一份面板状态：并将状态2中的矩形基础样式改成鼠标悬停时需要的样子（背景颜色为：颜色3）。接着将每个主导航动态面板加上鼠标移入的交互，鼠标移入时，将自己的状态改成状态2，其他主导航的改成各自状态1：三、子导航按钮的设计将子导航转成动态面板，全屏及居中显示同步骤1。按主导航个数创建面板状态，将子导航背景设置成主导航鼠标悬浮时出现的颜色（为颜色3），并将其选择状态的颜色设置为主导航选中颜色（颜色2）。再排入子导航版面中的链接内容，这里就随意拉入两个矩形，设置透明背景。右键设置其主交互样式，将“鼠标悬停”以及“选中”两种情况都加上相同的背景色，为了区分选中及悬停，在选中效果上还加上字体的变化。四、设置导航交互效果现在对鼠标移动时导航的交互进行设置，首先对主导航区的各个主导航进行交互设置，以“产品”为例，设置鼠标移入时各个主导航的面板状态以及子导航区显示的面板状态。如下图：同理设置所有的主导航。鼠标移出的效果需要把主导航以及子导航区组合起来，当鼠标移出这两块部位时才还原。对组合设置鼠标移出时的交互，这里注意要通过主导航选中状态来区分最终还原的状态：同理将其他几个主导航被选中状态的用例加上，只有不同的主导航被选中子导航动态面板的状态对应不同。五、各页面载入配置基础工作在前三步准备完了，现在将导航拉入到一个具体页面中。我们以所有产品为例子，在页面属性中加入交互。设置页面载入时：此时就可以预览最终效果了，同理，设置好每个页面，导航的交互就完成了。写在后面的话负责公司saas产品线，对标准化的要求越来越高，除了对技术研发提出要求外，产品设计过程中，我也尝试着做产品工作的基础框架及组件。毕竟产品岗是对产品反复修正优化是较为常态的，与各部门协作以及设计阶段需求调整将造成原型反复修改，通过标准来保障各方整体设计保持一致，也能将原型在一次一次的优化中变得更加的高质量。此导航组件可能应用场景不多，但也期望能给大家提供一种新思路。而且笔者本身是想给大家分享一个后台框架的，但因公司项目在用不便给出源文件，就以导航组件来讲解设计过程。这种后台架子其实只是把导航放到了左侧，实现思路相似，只是多加了些动态面板的状态，大家可以自行试试。移动端项目不方便公开，也没有做什么个人原型设计作品，就不分享图片及相关设计了，或许未来找机会再给大家做一次移动端框架的原型设计分享。可以看看我之前一篇文章，移动端的注释方式，若能给大家带来些新启发，也是件可喜的事儿了。源文件下载：https://pan.baidu.com/s/1OrSgBP7yU49uZcF4CW8Jkg，密码：7xco官方下载链接: https://pan.baidu.com/s/1MsJfwYW4CtRRRy5Cullh1g 密码: 7ecj本文由 @用心的工匠 原创发布于人人都是产品经理。未经许可，禁止转载。题图来自 pexels ，基于 CC0 协议