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

苏米客

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

Axure RP 教程:快速原型进阶教程之间距大小

1年前 1353 0

通过上两节关于对齐方式,辅助线的教程,今天再来给大家详细介绍一下如何调整间距大小,通过调整间距大小提升页面整体的视觉效果。

本节依旧以Axure RP 9 版本为例, Axure RP 8操作略微有些差异,但大部分一致;

对于初级设计师来讲,间距是很容易被忽略的细节,也不容易把握分寸,往往设计出来的页面不够美观,甚至导致页面内容混乱不堪,让人不知所以,而合适和统一的间距规则,能够有效的提升页面的整齐度和内容信息的聚合度,让页面结构整齐有序,内容层次分明,一目了然。

事实上间距的调整没有一个绝对的标准,找到合适的适用于当前系统的尺寸即可,

这里推荐几个使用较多的尺寸:4px、8px、10px、12px、16px、20px、24px、30px、32px、40px、48px、60px、80px等,这么多尺寸不用都用上,

需要从中挑选几个搭配起来使用,如:8px、12px、24px;

知道了这些间距尺寸,那么在Axure中如何使用起来呢,下面从元件间间距、元件内间距两个方面来讲解

元件间间距

在Axure中可以用快捷键来控制间距,能够方便快捷准确的调整间距

Shift+方向键(→↑←↓)

Ctrl+方向键(→↑←↓)

用快捷键操作后,元件会以一个设置好的单元间距进行水平或者垂直移动,默认单元间距为10px,也可以手动修改成你需要的尺寸,修改方式如下图所示:

“布局-栅格和辅助线-对齐元件设置”,出现元件对齐设置,设置成需要的尺寸即可

示例

使用间距快捷键将散乱的元件按照一定的间距规则重新调整,将基本信息标题与内容区分开,让内容变得更整齐有序,结构也更清晰

元件内间距

元件内间距可以分为元件组内间距和单元件文字间距

元件组是由多个元件组合而成形成一个集合,往往都有明确的界限,元件组内间距与元件间间距的调整方式相同,都可以通过快捷键控制间距,示例如下:

单元件文字间距,通过控制行间距与填充来完成,这两个控制项在Axure面板的右边【检视】的样式里面

行间距用来控制段落文字之间的间距

填充用来控制元件内间距的大小

一般行间距会与填充结合起来使用,效果如下所示:

到此为止,Axure中如何调整间距大小的讲解就到此为止了,你Get到了吗~

声明:本站原创文章文字版权归本站所有,转载务必注明作者和出处;本站转载文章仅仅代表原作者观点,不代表本站立场,图文版权归原作者所有。如有侵权,请联系我们删除。
#Axure教程 #进阶教程 #间距大小 
收藏 1
推荐阅读
  • 在Axure RP中快速创建可视化统计图,加载图表元件库 Axhub Charts
  • Axture元件库教程(二):一键复制Iconfont图标到Axure
  • Axure入门教程:将Adobe XD设计导入Axure
  • Axure RP 教程:Axure 预览与发布生成HTML文件
  • Axure RP 教程:快速原型进阶教程之间距大小
评论 (0)
请登录后发表评论
分类精选
Axure RP 教程:Axure中实现多组条件判断情形(Case)的使用和设置
1877 10月前
Axure RP 教程:快速制作页面跳转,Axure RP跳转链接教程
1785 1年前
Axure RP 教程:制作滚动字幕效果,文字滚动的动态效果
1771 1年前
Axure RP 教程:Axure 预览与发布生成HTML文件
1708 1年前
Axure RP 教程:Axure中继器的增、删、改、查操作教程
1702 1年前
Axure入门教程:将Adobe XD设计导入Axure
1694 1年前
在Axure RP中快速创建可视化统计图,加载图表元件库 Axhub Charts
1663 1年前
Axture元件库教程(二):一键复制Iconfont图标到Axure
1661 1年前
Axure RP 教程:Axure中继器中按钮文字添加页面链接或外链设置方法
1660 1年前
Axure RP 无法发布预览页面问题?无法正常预览页面怎么办?怎么解决?
1459 1年前

文章目录

关注「苏米客」公众号

订阅推送更及时,手机查看更方便
分类排行
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模板 申请友联