【Axure笔记】10.什么时候该使用动态面板?

        在移动端原型设计中,动态面板可以说是使用率非常非常非常之高的元件之一,而具体什么时候应该使用动态面板呢?

        1. 页面内容超出手机屏幕,需要垂直滚动时:

        这个很容易理解,当我们的页面内容多到一屏无法展示的时候,就需要使用动态面板作为一个“容器”去装下这些内容,当然如果你将页面尺寸设置为移动端的大小并在虚线下的白色区域布置内容后,其实点击预览时页面依旧会产生一个下拉滚动的效果,只不过这个效果是全屏下拉,如果在屏幕顶端有放status bar的时候,status bar就会跟随一起下拉。这时我们仅仅在需要滚动地方放置动态面板即可,建议选中所有需要滚动的部分,点击右键——转化为动态面板,之后稍加调整动态面板的尺寸即可。

 

       2. 元件/页面需要滑动(拖动)操作时:

       当需要制作类似于滑动翻页,拖动滑块功能时,一般需要动态面板来进行制作。例如制作图片浏览功能时,左划时切换照片。亦或时制作类似微信好友列表中左划出现删除按钮等等功能时,都会用到动态面板。后续有时间的话我会做一些实际制作过程来进行演示。

 

        3. 元件的样式需要有条件的改变时:

         “我如何设置用户点击鼠标时改变按钮的颜色呢?”“点击时这个交互下面也没有更改元件颜色或者改变元件中字体大小和颜色的选项呀?”这些是刚刚开始学习交互编写的朋友可能会遇到的问题,诚然Axure在功能设计时并不支持编写交互时直接对某个元件的内部属性进行调整,而需要用户首先将需要修改样式后的元件制作出来,并与原来的元件共同组合成一个含有不同状态的动态面板,之后通过点击鼠标等触发事件来切换动态面板的状态来实现之前所说的点击鼠标改变按钮颜色等等功能。

        4. 元件/内容有规律的改变时:

        这一点可能比较容易理解,当在做诸如轮播图,HUD提醒,加载动画提示等等需要元件内容有规律的改变时,一般会使用动态面板的几个状态来进行切换,同时编写切换状态的交互逻辑来实现有规律/循环播放的效果。

        5. 当切换页面时:

        页面的切换在Axure中大致有四种方式:

      (1)链接跳转(最简单,最暴力,但无切换动画效果);

      (2)元件隐藏显示切换;(可设置显示隐藏的动画,但一层压一层的千层饼的页面编辑起来真的脑壳痛)

      (3)元件移动;(同上,但是不仅仅是千层饼的问题了,还得算好千层饼的尺寸和需要移动的距离)

      (4)动态面板状态切换。(便于编辑,切换有动画效果,但切换的页面尺寸必须相同)

        其中使用动态面板切换页面的好处是当页面内容较多,均需要上下拖动时,如果仅仅通过显示隐藏元件或移动元件的方法无法实现,而显示隐藏动态面板或移动动态面板的做法又未免有点脱裤子放屁(当然要切换的两个页面若是大小不同还是有必要的)。通过在动态面板的不同状态中分别编辑各个要切换的页面,并用切换手势或按钮进行状态切换行为的触发,切换时设置合适的切换动画即可实现漂亮的页面切换效果。因为编辑时可以分状态,终于不用所有页面都压在一起了,这种感觉试过一次都不想再用显示隐藏那种方法了。

        以上是需要用到动态面板的几种场景,此外说一些使用动态面板时的注意事项和小技巧:

        动态面板是可以“套娃”的,一个动态面板的状态中可以嵌套另一个或多个动态面板,目前我没发现有什么数量限制,但是嵌套过多偶尔会出现一些滑动bug并且浏览时性能也会有所下降,套娃时需要稍稍克制一下。另外中继器是不支持嵌套的。

        如何隐藏动态面板下拉时的滚动条?请将动态面板的宽度增加15,并使用一个同背景色的无线框矩形压住这多出来的15宽度即可。

        在设计需要页面滑动的移动端原型时,请千万不要打开动态面板的自适应功能,否则多一放一点内容,动态面板就跟着变大一圈,最后滑动变成了整个动态面板的滑动,而不是动态面板中内容的滑动。


——————————————————文章目录——————————————————

Chapter 1

开始前的准备

1. 写在前面,我为什么要开Axure这个坑?

2. 没有完整构想的产品上来直接开画就是耍流氓。

3. 做之前先想好:高保真还是低保真?

4. 移动端的相关规范,多多少少还是要知道一点点的。

Chapter 2

开始做吧,初学时懵逼的问题:

5. 站在巨人的肩膀上:先装个元件库吧

6. 技多不压身,元件多了真的压

7. 文本框、文本域:如何获取输入的文字?

8. 如何使用url及变量链接页面并实现跳转

9. 关于命名规范:页面、元件、组。

10. 什么时候该使用动态面板?

11. 什么时候应该使用中继器?

12. 交互、变量、函数我该怎么着手学习?

13. 关于交互的最后防线——启用情形

Chapter3

实战教程,未完待续...

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,001评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,210评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,874评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,001评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,022评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,005评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,929评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,742评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,193评论 1 309
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,427评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,583评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,305评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,911评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,564评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,731评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,581评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,478评论 2 352