产品 | 用Axure设计App

使用Axure打造最佳的移动端交互原型教程


演示demo

一直以来Axure在对移动端原型设计方面的支持都不是十分理想,它没有像目前其它几类原型设计工具(Justinmind、墨刀等)一样提供移动端设备的模板和相关交互组件,但是Axure自由灵活的特性却同样的其它原型设计工具所无法取代的。通过掌握一些设计规范和方法,我们同样可以通过Axure制作出非常完美的移动端演示原型。

1. 选择适合的设计分辨率

  • Iphone7——(宽)375px*(高)667px
  • Iphone7 PLUS——(宽)414px*(高)736px
    字号14px或18px

2. 辅助线的使用小技巧:

  • 右击辅助线可以将其锁定,以防止拖动元件时会将辅助线会跟着一起移动;
  • 可以通过按住Ctrl拖动创建全局辅助线,全局辅助线就是在所有页面中产生一条相同的辅助线;
  • 在“布局—栅格和辅助线—锁定辅助线”中选中可以将所有的辅助线保持锁定状态且无法删除;
  • 在“布局—栅格和辅助线—删除辅助线”中可以清除所有页面中的辅助线;
  • 在“布局—栅格和辅助线—辅助线设置”中可以修改辅助线的颜色或进行更多设置;

3. 基础设计规范

  • 列表菜单的高度为45px、导航栏的高度为45px、标签栏和工具栏常用高度为60px;
  • 字号一般用偶数,常用的正文字号为12和14px,常用的标题字号为16px和18px;
  • 元件的宽度和高度一般为5的倍数,例如45px、100px等;
  • 元件的距间和行距一般为10的倍数,常用10px、20px,按住ctrl键通过方向键移动元件,每次移动的距离刚好是10px。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容