数极客首页

Axure实例:顶栏和侧边栏的固定和窗口自适应

一篇关于Axure的干货教程,关于顶栏和侧边栏固定以及窗口自适应的设计过程,希望对大家有所启发。

Axure实例:顶栏和侧边栏的固定和窗口自适应

在后台系统中,常有侧边栏,不随页面内容的滚动而变化,且高度与浏览器等高。

第一步

新建一个母版1 做侧边栏,在母版中新建两个动态面板,一个作为背景使用,一个放置标题使用。

Axure实例:顶栏和侧边栏的固定和窗口自适应

第二部

(背景)动态面板的颜色设置为  与标题背景色一致。

(标题)动态面板内新建元件作为标题。

Axure实例:顶栏和侧边栏的固定和窗口自适应

第三步

将(标题)动态面板 与(背景)动态面板对齐。

设置 (背景)动态面板的高度与浏览器高度一致。可实现左侧栏高度自适应。

Axure实例:顶栏和侧边栏的固定和窗口自适应

Axure实例:顶栏和侧边栏的固定和窗口自适应第四步

将(背景)动态面板 和(标题)动态面板  固定到浏览器,实现内容滚动时,侧边栏不会跟随滚动。

Axure实例:顶栏和侧边栏的固定和窗口自适应

第五步

新建一个母版2 做顶栏。在母版中新建两个动态面板,一个做为背景,一个作为登录用户名。

Axure实例:顶栏和侧边栏的固定和窗口自适应

第六步

设置(背景)动态面板和(用户名)动态面板对齐,

(背景)动态面板的颜色设置为  与(用户名)背景色一致。

(用户名)动态面板内新建元件为 用户名称。

设置 (背景)动态面板的宽度与浏览器宽度一致。可实现顶栏宽度自适应。

Axure实例:顶栏和侧边栏的固定和窗口自适应

顶栏宽度自适应也可以选择 动态面板属性  勾选(100%宽度)

Axure实例:顶栏和侧边栏的固定和窗口自适应

第七步

要使(管理员)三个字,随着浏览器窗口的变化而跟随一直在右边。

可设置(管理员)的位置为 (背景)动态面板的右边位置 减去 200像素(因为我设置的 管理员 三字宽度为120像素,所以减200就使得 管理员 三字一直在浏览器范围内,并距右边距为80像素。)

Axure实例:顶栏和侧边栏的固定和窗口自适应
Axure实例:顶栏和侧边栏的固定和窗口自适应

设置局部变量(就是 背景 动态面板) 的右边(right)减去200像素。

[[LVAR1.right-200]]

Axure实例:顶栏和侧边栏的固定和窗口自适应

第八步

(管理员)三字可以随浏览器窗口大小而移动,需要给它限定一个范围,不能跑到最左边。

可以给它设置移动边界。

Axure实例:顶栏和侧边栏的固定和窗口自适应

第九步

与侧边栏同样的方法,固定顶栏到浏览器,使其不随内容的滚动而滚动。

预览:

Axure实例:顶栏和侧边栏的固定和窗口自适应

完成。Axure实例:顶栏和侧边栏的固定和窗口自适应

 

本文由 @Carota 原创发布。未经许可,禁止转载。

新一代大数据用户行为分析与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合分析用户行为数据和业务数据,可以自动监测网站、APP、小程序等多种渠道推广效果分析,是增长黑客们必备的互联网数据分析软件。数极客支持实时多维分析、漏斗分析、留存分析、路径分析等十大数据分析方法以及APP数据分析网站统计网站分析小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据分析模型,是数据分析软件领域首款应用定量分析与定性分析方法的数据分析产品

发表评论

相关文章