10+年产品经理聊聊产品、测测产品,产品人交流学习成长平台,按 Ctrl+D 收藏我们
留言板 小程序 交流群 关于我

苏米客

  • 首页
  • AIGC
    • AI最新动态
    • AI学习教程
    • AI工具集合
    • AI产品百科
    • AI编程开发
  • Axure
    • Axure动态
    • Axure教程
  • 产品
    • 用户体验
    • 产品设计
    • 苏米杂谈
  • 资源
    • 产品UI组件库
    • 开源图标库
    • 中后台框架
  • 书单
    • AI书籍
    • 用户体验
    • UI视觉
    • 产品研究
    • 其他类型
  • 下载
    • Axure组件
    • Axure原型
    • 文档报告
    • 素材资源
  • 登录
  • 首页
  • AIGC
    • AI最新动态
    • AI学习教程
    • AI工具集合
    • AI产品百科
    • AI编程开发
  • Axure
    • Axure动态
    • Axure教程
  • 产品
    • 用户体验
    • 产品设计
    • 苏米杂谈
  • 资源
    • 产品UI组件库
    • 开源图标库
    • 中后台框架
  • 书单
    • AI书籍
    • 用户体验
    • UI视觉
    • 产品研究
    • 其他类型
  • 下载
    • Axure组件
    • Axure原型
    • 文档报告
    • 素材资源

Axure RP 教程:常用样式之页面样式管理器

8月前 1141 0

在Axure使用创建完页面后首要做的就是设置页面样式,对于风格统一的页面需要保持所有页面样式的统一或者单独设置某个页面的样式,苏米今天就详细的分享一下如何设置页面样式,通过设置页面样式可以制作出不同风格的页面和统一风格的模板。

快速了解页面样式设置

在【菜单】-【项目】的选项列表中,选择【页面样式管理器】;

在弹出的面板中可对默认页面进行页面背景、居中、排列等设置。

同时还支持添加【自定义页面】样式的设置

通过自定义页面排列、颜色、图片、图片对齐、重复等参数,可以自定出自己的页面模板,从而应用到需要统一风格的页面;

页面样式参数及说明

页面排列:分为左对齐和居中对齐;

页面的对齐设置只有在浏览器中查看HTML文件时才能看到效果,在Axure源文件中是看不到效果的。需要提醒的是,居中对齐是根据元件在页面中的相对位置来确定的。

颜色:为页面设置背景颜色;

图片:导入本地图片作为整个页面的背景;

图片对齐

不重复:导入的图片直接作为背景,不做任何其它处理;

重复:水平和垂直方向都重复背景图片,呈网格状重复排列;

水平重复:在水平方向上,重复背景图片;

垂直重复:在垂直方向上,重复背景图片;

填充:缩放图像的最大尺寸,以适应背景的水平尺寸和垂直尺寸;

适应:自动调整图像的宽度和高度,以适应页面内容的水平尺寸和垂直尺寸;

拉伸:拉伸图片让其覆盖页面内容的宽度和高度;

图片显示位置

左上:将图片的左上角等比缩放作为背景;

左侧:将图片的左侧等比缩放作为背景;

左下:将图片的左下角等比缩放作为背景;

顶部:将图片的顶部等比缩放作为背景;

居中:将图片的中心等比缩放作为背景;

底部:将图片的底部等比缩放作为背景;

右上:将图片的右上角等比缩放作为背景;

右侧:将图片的右侧等比缩放作为背景;

右下:将图片的右下角等比缩放作为背景;

页面样式的管理操作

页面样式管理界面中除了可以设置页面样式外,还可以对页面样式进行以下管理操作:

添加:一次只能添加一个页面,不支持批量添加

复制:创建新页面并复制其样式

移动:可以上下移动页面位置,按住Ctrl键进行多选,可以批量移动

删除:按住Ctrl键进行多选,可以批量删除

如何使用自定义页面样式

在创建完成页面后,会自动应用默认页面样式,可在默认页面样式上直接修改页面排列、填充等参数;

如何应用已创建的自定义页面样式模板,可以直接点击【默认】切换已创建的【自定义页面】样式;

应用成功后,就完成了自定义页面模板的使用,同时也支持单独修改当前页面的页面排列、填充等参数;

对于项目中有较多风格的页面设计,可以通过自定义样式设置的方式创建和使用,快速创建不同的页面风格。

声明:本站原创文章文字版权归本站所有,转载务必注明作者和出处;本站转载文章仅仅代表原作者观点,不代表本站立场,图文版权归原作者所有。如有侵权,请联系我们删除。
#Axure RP 教程 #页面样式 #Axure RP 
收藏 1
推荐阅读
  • Axure入门教程:Axure RP键盘快捷键大全
  • Axure入门教程:如何学习AxureRP以及学习方法
  • Axture元件库教程(一):新建和加载元件库
  • Axure RP 10官方版介绍
  • axure rp 一款专业的快速原型设计工具
评论 (0)
请登录后发表评论
分类精选
Axure RP 教程:Axure中实现多组条件判断情形(Case)的使用和设置
1686 9月前
Axure RP 教程:制作滚动字幕效果,文字滚动的动态效果
1612 11月前
Axure RP 教程:Axure中继器的增、删、改、查操作教程
1593 11月前
Axure RP 教程:快速制作页面跳转,Axure RP跳转链接教程
1558 11月前
Axure RP 教程:Axure 预览与发布生成HTML文件
1549 11月前
在Axure RP中快速创建可视化统计图,加载图表元件库 Axhub Charts
1519 11月前
Axure入门教程:将Adobe XD设计导入Axure
1519 11月前
Axure RP 教程:Axure中继器中按钮文字添加页面链接或外链设置方法
1514 11月前
Axture元件库教程(二):一键复制Iconfont图标到Axure
1502 11月前
Axure RP 无法发布预览页面问题?无法正常预览页面怎么办?怎么解决?
1348 11月前

文章目录

关注「苏米客」公众号

订阅推送更及时,手机查看更方便
分类排行
1 Axure PR进阶教程:输入数值控制滑块与拖动滑块动态显示数值交互设计
2 Axure RP 教程:如何导入阿里云Datav地图,实现Axure地图可视化交互效果
3 Axure RP 教程:Axure视频播放功能,高保真原型实现视频交互的详细操作步骤
4 Axure RP 教程:动态面板之表单多级联动效果制作
5 Axure RP 教程:动态面板之Tab标签导航页面切换效果制作
6 Axure RP 教程:动态面板之水平拖动及展开收起如何实现
7 Axure RP 教程:元件操作之快速创建单选按钮组或选项组
8 Axure RP 教程:常用样式之元件样式管理器
9 Axure RP 教程:常用样式之页面样式管理器
10 Axure RP 教程:Axure 支持哪些类型的页面布局,如何创建自定义布局
©2015-2024 苏米客XMSUMI 版权所有 · WWW.XMSUMI.COM 闽ICP备14005900号-6
免费影视APP 花式玩客 免费字体下载 产品经理导航 Axure RP 10 免费Axure模板 Axure原型设计 Axure元件库下载 原创Axure模板 申请友联