快好知 kuaihz

侧边栏效果:如何制作简单的侧边栏及跳转的交互?

本篇讲述:如何制作简单的侧边栏及跳转的交互?为“侧边栏效果”系列篇章的第一篇。

1.左侧上方页面处添加四个新页面,左侧下方添加母版,起名为侧边栏。

2.双击母版侧边栏。

3.从左侧元件库,基本元件处拖出一个矩形,宽改为80,高改为30。

4.从左侧元件库,菜单和表格中拖出一个表格。

5.右键Column2,点击删除列,然后右键Column3,点击删除列,右键Column1,点击删除行。

6.把剩下的表格,两个单元格分别改名为P1,P2。

7.选中整个表格,右键转换为动态面板。

8.右侧检索,表格名称处,起名P1+P2DT。

9.右侧检视,样式,选取隐藏。

10.选中P1+P2矩形,右侧检索,属性,交互,双击鼠标单击时。

11.点击显示/隐藏,选中P1+P2DT动态面板,可见性选切换,选中推动/拉动元件,确定。

12.选中P1+P2矩形和P1+P2DT动态面板。

13.按住CTRL,鼠标拖动,复制出一份。

14.将复制出的P1+P2矩形改为P3+P4。

15.将复制出的P1+P2DT动态面板改名为P3+P4DT。

16.双击右侧概要:母版中,P3+P4DT动态面板下的State1。

17.将P3+P4DT内的表格中的单元格P1和P2,改为P3和P4。

18.点击P3单元格,右侧检视,交互,双击鼠标单击时。

19.点击打开链接,选中New Page3,确定。

20.同理,P4单元格设置打开链接到New Page4。

21.双击右侧概要,P1+P2DT动态面板下的State1。

22.同理,分别为P1,P2单元格添加鼠标单击时,跳转链接到New Page1,New Page2。

23.双击左侧侧边栏母版,回到母版主页。

24.右键侧边栏,点击添加到页面中。

25.点击全部选中,确定。

26.双击左侧页面,New Page1,进入New Page1页面

27.从左侧元件库,基本元件,拖出一个矩形,输入P1,字体调大,加粗。

28.同理,为2,3,4页面分别添加矩形,键入P2,P3,P4,代表不同页面

此时预览可以看到,点击P1+P2,会展开P1和P2,点击P1和P2分别可以跳转到New Page1和New Page2页面,P3,P4页面同理。

上篇讲解了如何制作简单的侧边栏及跳转的交互,下篇中,将讲解如何在跳转后保持侧边栏已有的展开状态,以及通过字体颜色变化表示当前所在页面

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:侧边  侧边词条  交互  交互词条  效果  效果词条  简单  简单词条  制作  制作词条  
设计

 产品设计中需要了解的10个心智模...

“无论设计师如何构想和设计他们的产品,用户的产品体验总受基于个人偏好和世界观的心智模型影响。”——唐·诺曼心智模型解释了人们如何看待这个世界,同时,它也影响着产...(展开)

设计

 一文解读好产品必须满足的 10 ...

如果说到产品设计常见的「原则」,便不得不提尼尔森博士所提出的「十大可用性原则」。今天分享的这篇文章,带你了解它。在一个产品开发完成一般都会进入测试(Beta)阶...(展开)