使用Axure制作移动端交互原型学习笔记

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

一般是(宽)375px*(高)667px和(宽)414px*(高)736px两种分辨率尺寸(优先前者)。,因为Axure常用的元件默认的字号一般是14px或18px,

2. 定义内容区域:

使用辅助线来定义内容区域的,例如下图是用辅助线定义好内容区域的效果。然后我们在设计时其实不用去限制原型的高度,因为在通过移动端设备进行浏览时可以通过滚动页面查看超出高度部分的内容。


3. 神奇的辅助线:

辅助线的基本使用方法:鼠标移动到编辑区域的左侧和顶部的标尺区域长按并往编辑区域拖动时就可以生成横向或纵向的辅助线,将辅助线拖动到对应的位置即可。

辅助线的作用除了用来定义内容区域之外,同时它也能帮助我们快捷的进行布局。辅助线有一个特性就是当你拖动元件靠近它时,元件会自动吸附到辅助线的边缘达到快速对齐的效果。如下:


几点辅助线的使用小技巧:

右击辅助线可以将其锁定,以防止拖动元件时会将辅助线会跟着一起移动;

可以通过按住Ctrl拖动创建全局辅助线,全局辅助线就是在所有页面中产生一条相同的辅助线;

在“布局—栅格和辅助线—锁定辅助线”中选中可以将所有的辅助线保持锁定状态且无法删除;

在“布局—栅格和辅助线—删除辅助线”中可以清除所有页面中的辅助线;

在“布局—栅格和辅助线—辅助线设置”中可以修改辅助线的颜色或进行更多设置;

其他的一些可参考点

列表菜单的高度为45px、导航栏的高度为45px、标签栏和工具栏常用高度为60px;

字号一般用偶数,常用的正文字号为12和14px,常用的标题字号为16px和18px;

元件的宽度和高度一般为5的倍数,例如45px、100px等;

元件的距间和行距一般为10的倍数,常用10px、20px,按住ctrl键通过方向键移动元件,每次移动的距离刚好是10px。

4. 页面属性的设置

进行设计我习惯将内容布局向左对齐,而在演示时内容居中显示更符合浏览习惯,所以需要在页面属性设置中将页面排列设置为水平居中,另外,页面的背景色推荐设置为#F9F9F9。

5. 导航栏,标签栏或工具栏的设置

导航栏的位置一般是固定在界面最顶部的,所以建议将导航栏转换为动态面板,然后在面板的属性设置中设置为“固定到浏览器”,水平固定选项为“居中”,垂直固定选项为“上”。


标签栏或工具栏的位置一般是固定在界面最底部的,同样我们也需要将标签栏或工具栏转换为动态面板,然后在面板的属性设置中设置为“固定到浏览器”,水平固定选项为“居中”,垂直固定选项为“下”。

注意:如果需要撤销动态面板状态,则右击元件,展开属性工具栏,点击从首个状态中脱离。如果需要多个元件一起作为导航栏或工具栏,则先将所需元件选中组合后再设置为动态面板状态。

6. 模态窗口交互设置:

模态窗口交互是移动端产品中最常见的交互方式之一,首先同样新建一个模态窗口的动态面板,在面板的属性设置中设置为“固定到浏览器”,水平固定选项为“居中”,垂直固定选项为“下”。然后再在触发模态窗口的交互事件中按以下方式进行设置,重点是勾选“置于顶层”选项和设置“灯箱效果”,灯箱效果的背景颜色和透明度可以根据需要进行自定义。


7. 输出选项的设置:

当我们的原型设计完成以后在生成HTML之前我们还需要进行几项简单的设置。

设置位置:发布—生成HTML-移动设备,在界面中勾选“包含视口标签”,设置宽度为:device-width,设置缩放为:no,其它选项为空就可以了。


另外,你还可以设置主屏图标,然后在IOS设备中通过safari浏览器打开原型,就可以直接将它添加到主屏幕中了。通过主屏访问原型时将不会显示浏览器的相关工具界面,最终的演示效果几乎是跟操作实际的APP是一致的,你甚至可以根据需要定义状态栏的颜色。

设置方式:启动safari浏览器打开原型地址—点击浏览器底部的设置图标(正中间)—添加到主屏幕——完成添加即可。大家可以尝试使用下方演示地址进行添加看看效果。

8. 其它说明:

我一般会在编辑区域放置一个设备模板,新建一个内容框架的动态面板用来放置页面的主要内容,而这个内容框架的尺寸同样是我们之前定义的内容区域尺寸(宽)375px*(高)667px。另外,内容框架的动态面板的属性中需要将滚动条设置为“自动显示垂直滚动条”,这样当框架的内容超出时可以拖动滚动条进行查看。如果我们在编辑界面中放置了设备模板,则不再需要对导航栏、标签栏或工具栏、模态窗口等动态面板进行固定到浏览器设置,你只需要拖动到设备模板对应的位置并置于内容框架上方即可。

并且最好将设备模板作为母版保存下来,可以省很多时间。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,529评论 5 475
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,015评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,409评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,385评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,387评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,466评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,880评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,528评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,727评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,528评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,602评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,302评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,873评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,890评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,132评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,777评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,310评论 2 342