axure商城

【教程】快速提升原型页面美观度之对齐方式详解

对于制作原型的初学者来说,可能感觉比较困惑的地方是,不管怎么做总感觉原型整体不美观,不知道怎样才能快速提升整体的美感,其实通过几步简单的调整,就可以让原型达到整齐美观的效果,不管是原型设计、PPT、Word等需要排版布局的地方,都可以运用这几步使整体样式变得整齐
  • 调整控件对齐方式
  • 调整控件之间的间距大小
  • 调整字体大小样式
  • 使用适当的颜色搭配
下面我将逐步为大家讲解在Axure中如何使用这些技巧来提高页面的美观度,这一讲将讲解控件的对齐方式

对齐方式

在Axure中有两种对齐的方式,一种是对齐,另一种是分布,通过调整对齐方式可以快速的将混乱的控件变得整齐有序,而不需要一个控件一个控件的拖拽对齐了,其实在很多软件里都有对齐方式,比如PPT、Word、PS等,在Axure中掌握了对齐的技巧,也可以运用于其他的软件中了。
【教程】快速提升原型页面美观度之对齐方式详解
对齐分为六种:
左对齐 (Ctrl+Alt+L)
左右居中(Ctrl+Alt+C)
右对齐(Ctrl+Alt+R)
底部对齐(Ctrl+Alt+B)
上下居中(Ctrl+Alt+M)
顶部对齐(Ctrl+Alt+T)
分布分为两种:
水平分布(Ctrl+Shift+H)
垂直分布(Ctrl+Shift+U)

注意事项

  • 选中两个及以上的控件可以触发对齐操作
  • 选中三个及以上的控件可以触发分布操作
  • 对齐、分布操作可以结合起来,以达到最佳的显示效果
  • 对齐与分布的参考标准是以第一个被选中的控件为标准,选中一个控件后,然后按住Shift键或者Ctrl键,再选中其他的控件,就可以使用对齐、分布了

效果展示

顶部对齐
【教程】快速提升原型页面美观度之对齐方式详解
上下居中
【教程】快速提升原型页面美观度之对齐方式详解
底部对齐
【教程】快速提升原型页面美观度之对齐方式详解
水平分布
【教程】快速提升原型页面美观度之对齐方式详解
左对齐
【教程】快速提升原型页面美观度之对齐方式详解
左右居中
【教程】快速提升原型页面美观度之对齐方式详解
右对齐
【教程】快速提升原型页面美观度之对齐方式详解
垂直分布
【教程】快速提升原型页面美观度之对齐方式详解

设置对齐方式

在axure中软件默认显示的图标操作按钮只有对齐、分布两个,需要点击后才会出现具体的对齐、分布方式,使用的时候不是很方便
【教程】快速提升原型页面美观度之对齐方式详解
其实在Axure中是可以通过设置来控制显示哪些操作按钮的,可以将常用的对齐操作显示出来,直接点击使用
【教程】快速提升原型页面美观度之对齐方式详解
下面来为大家讲解如何设置对齐方式
视图-工具栏-自定义基本工具列表,打开自定义基本工具列表

【教程】快速提升原型页面美观度之对齐方式详解

将需要的对齐、分布操作勾选,点击“DONE”即可
【教程】快速提升原型页面美观度之对齐方式详解
到此为止Axure的对齐方式就讲解完毕了,你学会了吗?如果学会了就赶紧运用到原型的制作中去吧!

优职坊:致力于产出优质的axure资源,包括组件库、原型、高保真原型、Axure教程等用户体验相关的资源。交互设计师、产品经理学习Axure技术的不二选择!
更多优质Axure原型资源:https://www.axureshop.com/shop/18

给TA打赏
共{{data.count}}人
人已打赏
Axure教程

Axure RP 9 教程—基本功能介绍1

2018-12-27 21:46:39

Axure教程

【教程】Axure全局辅助线与页面辅助线使用讲解

2018-12-28 21:39:52

axure商城
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索