Axure教程:全屏下拉菜单交互效果的原型设计(附源文件下载

2018-06-10 06:10

  原标题:Axure教程:全屏下拉菜单交互效果的原型设计(附源文件下载)

  给大家分享一个PC列表交互原型设计,顺带同大家探讨下通过界面框架、组件设计来实现产品设计的标准化(文后附上rp供各位参考)。

  PC前台页面的整体设计一般是自上而下,多数基于中心垂直线以及两条垂直边线。因本文要分享的只是个全屏,并不需要考虑高度,所以只要做宽度的控制。

  在不同尺寸屏幕的自适应,就不深入了,今天讲的,只是将原型能够在多数不同尺寸屏幕上都能很好的浏览,不偏移也不多出些滚动条来。

  部分分成两大块:主、子。向母版中拉入一个动态面板,设置宽度1200px。右键此动态面板,选中“100%宽度”。

  这里为了让“100%宽度”能在比1200px更宽的屏幕上实现效果,且对齐中心垂直线,需要做两步工作:

  (1)在任意页面上设置页面样式,将页面排列改成居中,并更新到所有页面(笔者习惯将背景设置成黑色,容易区分内容)

  (2)在动态面板中,拉入一个2880*80px的背景矩形(宽度大于常用屏幕尺寸即可),并将其中心线对齐动态面板中心线

  接下来我们拉入几个主矩形,将其背景色设置成主栏背景一致(颜色1),并设置好每个的交互样式-选中状态(其中背景为颜色2)。

  这里我们不用鼠标悬停,主和子间移入移出还要将各自效果进行保持,用鼠标悬停的交互样式难控制,悬停效果通过动态面板状态切换来实现会好很多。

  并将状态2中的矩形基础样式改成鼠标悬停时需要的样子(背景颜色为:颜色3)。

  接着将每个主动态面板加上鼠标移入的交互,鼠标移入时,将自己的状态改成状态2,其他主的改成各自状态1:

  将子转成动态面板,全屏及居中显示同步骤1。按主个数创建面板状态,将子背景设置成主鼠标悬浮时出现的颜色(为颜色3),并将其选择状态的颜色设置为主选中颜色(颜色2)。

  再排入子版面中的链接内容,这里就随意拉入两个矩形,设置透明背景。右键设置其主交互样式,将“鼠标悬停”以及“选中”两种情况都加上相同的背景色,为了区分选中及悬停,在选中效果上还加上字体的变化。

  现在对鼠标移动时的交互进行设置,首先对主区的各个主进行交互设置,以“产品”为例,设置鼠标移入时各个主的面板状态以及子区显示的面板状态。如下图:

  鼠标移出的效果需要把主以及子区组合起来,当鼠标移出这两块部位时才还原。对组合设置鼠标移出时的交互,这里注意要通过主选中状态来区分最终还原的状态:

  同理将其他几个主被选中状态的用例加上,只有不同的主被选中子动态面板的状态对应不同。

  基础工作在前三步准备完了,现在将拉入到一个具体页面中。我们以所有产品为例子,在页面属性中加入交互。设置页面载入时:

  负责公司saas产品线,对标准化的要求越来越高,除了对技术研发提出要求外,产品设计过程中,我也尝试着做产品工作的基础框架及组件。毕竟产品岗是对产品反复修正优化是较为常态的,与各部门协作以及设计阶段需求调整将造成原型反复修改,通过标准来保障各方整体设计保持一致,也能将原型在一次一次的优化中变得更加的高质量。

  而且笔者本身是想给大家分享一个后台框架的,但因公司项目在用不便给出源文件,就以组件来设计过程。

  这种后台架子其实只是把放到了左侧,实现思相似,只是多加了些动态面板的状态,大家可以自行试试。

  移动端项目不方便公开,也没有做什么个人原型设计作品,就不分享图片及相关设计了,或许未来找机会再给大家做一次移动端框架的原型设计分享。

  可以看看我之前一篇文章,移动端的注释方式,若能给大家带来些新,也是件可喜的事儿了。