静态面板的救赎

jiangliu1010

静态面板能够让实际操作人员经过简略的配置，就可以完成相对于丰硕的成果。那末在实际设计中，有哪些模块能够利用静态面板来完成？本篇文章里，作者做了拆解和剖析，无妨一同来看一下。

cfzxhfekkpi.jpg

【静态面板】是 Axure 中此外一个神级的元件，它的江湖位置能够说跟【中继器】八两半斤，【静态面板】提供了简略的配置，却能够完成十分丰硕的成果，在实际设计中运用十分普遍。
关于刚入门的产品经理来讲，学习【静态面板】要比学习【中继器】容易患多，根本很快就可以上手，然而得多人学习完之后不知道甚么中央能够用到【静态面板】，能够使用哪些属性来更为轻松地实现设计，所以，明天分享一些简略的案例，根本都是用其余元件做起来十分费劲，乃至完成不了，但用【静态面板】却能够轻松实现的设计，所以说，关于得多繁杂的设计而言，静态面板就是一次“救赎”。
一、导航栏
以人人都是产品经理网站首页为例，咱们从下图能够看到，当咱们摆布调剂窗口宽度的时分，导航栏的配景（红色通栏）会跟随宽度一同调剂，上下转动的时分，导航栏一直固定在页面顶部：
接上去咱们用【静态面板】来完成一下这个成果。
首先在 Axure 任务区拖入一个静态面板，假如静态面板中没有听任何内容的话，在页面中是看不到的，所以这里咱们给静态面板加一个填充色：

fuub03fpy0h.jpg

接上去为了在页面中可以转动，咱们需求让页面的内容超过阅读器高度，这样阅读器才会泛起转动条，可以进行转动，这里的页面内容咱们用【占位符】替代：

qsbw1z415hg.jpg

看一下网页中的成果：

nxneqmus42c.jpg

能够看到，通栏没有占满阅读器宽度，滑动页面的时分也不克不及固定在顶部。别急，咱们还需求进行一些设置。
首先咱们在【款式】中勾选【100%宽度】：

ocl3m2xhfh4.jpg

接着咱们点击下方的【固定到阅读器】，在弹出的设置窗口中勾选【固定到阅读器窗口】，选择【左边】：和，勾选【一直放弃顶层】：

1ikernr2rib.jpg

再次预览成果，就能看到，通栏占满阅读器的宽度，而且能够跟着阅读器宽度自动调剂，转动页面时，通栏也会固定在页面顶部：

bzentroxuht.jpg

为了让大家更好地领会到【固定到阅读器】这个功用，我再举一个例子，仍是人人都是产品经理的某个页面的通栏，咱们能够看到，当咱们对阅读器窗口宽度进行缩放的时分，头像其实不会一直固定在某个地位，而是会贴着阅读器边沿静态变动：
咱们在刚刚的根底上进行修正，完成这个成果。
咱们再拖入一个静态面板，放在通栏右侧，填充一个底色：

13bcbj0txug.jpg

接上去再设置它【固定到阅读器】，这次选择固定到【右边】，【边距】设置10，不彻底贴着右边，一样固定在顶部不变，Axure 曾经自动按照元件地位设置好顶部边距：

bndy2aeuswv.jpg

预览看看成果：

grmgh50hdt1.jpg

二、轮播图
先看一下实际的网站成果，一样也是来自人人都是产品经理网站首页：

3zymx4h2heh.jpg

轮播图开展至今，每个网站的产品经理都在竭尽所能设计出本人的格调，但说究竟，轮播图的中心，就是多张图片的切换，其中包罗了【自动切换】、【手动切换】和【指定切换】，接上去咱们用静态面板来完成这个功用。
首先仍是拖入静态面板，并在面板摆布添加两个按钮，分别用来手动切换【上一张】和【下一张】图片：

s3hme5aemxu.jpg

接着双击静态面板，进入静态面板编纂页面：

2ob3doi1odq.jpg

在这里咱们能够看到静态面板的【形态】，默许给了一个形态，咱们能够添加多个形态，并在每个形态中放入一张轮播图（个别轮播图设计倡议是3-5张）：

422vmzvhamu.jpg

添加完点击右上角回到主任务区，接上去给切换按钮添加【单击时】【设置面板形态】事情。
下列是【上一张】按钮的事情，点击的时分切换【上一项】（也就是静态面板的上一个形态），这里勾选了【向前循环】，表现能够间接从第一个形态切换到最初一个形态，而后咱们给切换设置一个动画成果，惯例切换上一张就是以后的图向右滑出，上一张图片向右滑入，所以这里咱们设置进入动画是【向右滑动】，时间是【500毫秒】，用【线性】动画便可，退出动画会自动婚配适合的成果：

ahrqq0tnv51.jpg

下一张的设置相似，然而留意切换的是【下一项】，而且动画成果也是跟上一张相同的：

3zqhamw11x5.jpg

预览看看成果：

jgnswuthscu.jpg

【手动切换】功用就做完了，点击按钮能够先后切换图片，而且能够循环切换，在【第一张图】再次点击【上一张】的时分，能够切换到【最初一张】（第三张图）。
接上去咱们来做【自动切换】，给【静态面板】添加【载入时】【设置静态面板】的事情，因为【自动切换】个别都是切换到【下一张】，所以这里设置的事情跟【下一张】按钮的事情根本相反，但留意这里不同之处是，咱们需求设置【循环距离】，这里的意思就是每隔【3000毫秒】自动切换，同时这里需求勾选【首个形态延时切换】，假如不勾选，页面一下去就切换到第二张图，用户就看不到第一张图了：

ofmfk24xyxm.jpg

预览看看成果：

dw5lgl2fpsg.jpg

【自动切换】也做完了，最初来做【指定切换】，指定切换个别需求搭配【唆使灯】使用，就是如下所示的圆点，用来唆使以后在第几张图片，也能够经过点击切换到对应的图片。

vlkwnvfxmqp.jpg

咱们在任务区绘制3个圆点作为【唆使灯】：


接上去给【唆使灯】添加【单击时】【设置面板形态】的举措，在形态这里间接选择切换到对应的形态，好比第一个圆点对应第一张图，也就是形态1，以此类推：


3个【唆使灯】都设置完之后，就能在几张图中恣意切换了：


这个轮播图还有点小问题，第一个就是【手动切换】或者【指定切换】之后，【自动切换】会生效，这是由于这几个中央的事情没有【循环距离】的设置，这个给【上下翻页】和【唆使灯】的【单击时】事情加一个【触发事情】，触发起态面板的【载入时】事情便可，这样，每次【手动切换】或【指定切换】之后，都会从新触发一次【自动切换】的举措：


此外一个问题就是这个轮播图的【唆使灯】没有方法唆使以后所在的图，也需求进行相干设置，首先选中3个【唆使灯】，【右键】选择【选项组】：


在弹出的选项组弹窗命名为【唆使灯】并肯定：


接上去给【唆使灯】添加【交互款式】，选中3个【唆使灯】，右边找到【交互】面板，点击【添加交互款式】：


选择【元件选中款式】：


这里咱们加个填充色彩便可：


接上去给【静态面板】添加【形态改动时】的交互，而后按照【面板形态】的不同选中对应的【唆使灯】圆点便可：


最初，由于页面刚载入时，曾经在第一张轮播图，然而尚无产生形态的变动，所以【唆使灯】都不会“点亮”，所以需求默许选中第一个【唆使灯】，选择第一个【唆使灯】，【右键】选择【选中】便可：


预览看看成果：


三、页签Tab
页签在网页设计中运用十分普遍，这里以人人都是产品经理首页社群板块为例：


点击标题的时分，下方可按照标题显示对应的内容，这个其实跟下面轮播图的【指定跳转】是一个原理，就是点击对应的标题时，下方经过切换到静态面板的不同形态来完成对应成果，这里就再也不设计实例。
四、固定尺寸
咱们有时分会看到相似下方这样的成果，一个页面有多个板块，为了页面的好看，每个板块有固定的高度，每个板块能够经过独立的转动条管制：


在 Axure 中，每个板块经过【静态面板】来做，就能完成相似这样的成果，咱们来完成相似上图的成果。
先在任务区拖入两个静态面板，在静态面板中的第一个形态放一个【占位符】：


这里留意咱们需求手动调剂静态面板的高度，能够经过右边【款式】反省确认没有勾选【自顺应内容】，并确保静态面板内的【占位符】高度超过静态面板的高度：


接着咱们选中两个静态面板，在右边【款式】中将转动形式设置为【垂直转动】：


预览就能看到咱们需求的成果：


这里几个定义简略解释一下：
自顺应内容：静态面板的宽度和高度会按照内容自动调剂，假如有多个形态，且每个形态内搁置的内容尺寸纷歧致，在切换到不同形态的时分，静态面板的尺寸也会自动调剂；从不转动：固定静态面板尺寸时，假如内容超过静态面板尺寸，只能看见与静态面板尺寸相反的那部份内容；按需转动：固定静态面板尺寸时，当内容宽度或高度超过静态面板尺寸，静态面板自动泛起垂直或程度转动条；垂直转动：固定静态面板尺寸时，当内容高度超过静态面板高度，静态面板自动泛起垂直转动条；程度转动：固定静态面板尺寸时，当内容宽度超过静态面板宽度，静态面板泛起程度转动条。望文生义，就是在页面上自在拖动一个元件，这个设计不必静态面板也能够做失掉，然而我置信你会领会到甚么叫“从入门到保持”，而假如用静态面板来做，你会忍不住喊出那句“so easy”，来吧，照样先在任务区拖入一个静态面板，填充色彩，而后添加【拖动】交互，【跟随拖动】【挪动】以后元件：


看看成果：


六、循环管制
有时分咱们需求在咱们的设计中循环履行某一个举措，但 Axure 是没有提供循环的交互的，然而咱们能够利用静态面板来“曲线救国”，咱们会用到静态面板的两个交互，一个是【自动切换形态】，让静态面板在形态间循环切换，此外一个就是【形态改动时】的交互，履行咱们需求循环的交互。
这样面板会非但循环，每次循环时改动了形态，就会履行对应的交互，这样就可以完成循环履行某一举措的成果。
这样讲可能有点笼统，各位能够看看我以前的文章《【Axure 静态面板】让你的动画变为“永念头”》，置信你能对此深有领会。
静态面板的内容就这里，各位感觉还有哪些做起来很难，然而能够经过静态面板轻松完成的设计，欢送评论区别享，感激浏览！
本文由 @产品锦李 原创公布于人人都是产品经理，未经许可，阻止转载。
题图来自Unsplash，基于CC0协定。
该文观念仅代表作者自己，人人都是产品经理平台仅提供信息存储空间办事。