转自并参考：http://www.woshipm.com/rp/692285.html
1. 选择适合的设计分辨率：
(宽)375px*(高)667px，iPhone7
(宽)414px*(高)736px，iPhone7 Plus
2. 定义内容区域
3. 神奇的辅助线
建议议两侧留白区域用10px或者20px，例如本人常用的是20px，因此这两条辅助线的位置分别在X轴的20px和355px的位置。除此之外，我们的元件一般还需要设置左右各20px的填充，用来将文字的显示限定在界面留白区域内。
补充几点辅助线的使用小技巧：
(1) 右击辅助线可以将其锁定，以防止拖动元件时会将辅助线会跟着一起移动；
(2) 可以通过按住Ctrl拖动创建全局辅助线，全局辅助线就是在所有页面中产生一条相同的辅助线；
(3) 在“布局—栅格和辅助线—锁定辅助线”中选中可以将所有的辅助线保持锁定状态且无法删除；
(4) 在“布局—栅格和辅助线—删除辅助线”中可以清除所有页面中的辅助线；
(5) 在“布局—栅格和辅助线—辅助线设置”中可以修改辅助线的颜色或进行更多设置；
4. 更多基础设计规范
列表菜单的高度：45px
导航栏的高度：45px
标签栏和工具栏常用高度：60px
字号一般用偶数，常用的正文字号为12和14px，常用的标题字号为16px和18px
元件的宽度和高度一般为5的倍数，例如45px、100px等
元件的距间和行距一般为10的倍数，常用10px、20px，按住ctrl键通过方向键移动元件，每次移动的距离刚好是10px
5. 页面属性的设置
为了方便进行设计，将内容布局向左对齐，而在演示时，内容居中显示更符合浏览习惯，所以需要在页面属性设置中将页面排列设置为水平居中，另外，页面的背景色推荐设置为#F9F9F9。
6. 导航栏的设置
导航栏的位置一般是固定在界面最顶部的，所以建议将导航栏转换为动态面板，然后在面板的属性设置中设置为“固定到浏览器”，水平固定选项为“居中”，垂直固定选项为“上”，具体设置如下图：
7. 标签栏或工具栏的设置
标签栏或工具栏的位置一般是固定在界面最底部的，同样我们也需要将标签栏或工具栏转换为动态面板，然后在面板的属性设置中设置为“固定到浏览器”，水平固定选项为“居中”，垂直固定选项为“下”。
通过这样的设置以后在有标签栏或工具栏的页面中，如果你的页面内容已经超出了一屏的高度，我们通常需要在内容正文区域的底部放置一个与标签栏或工具栏高度一致的热区元件当作占位符，它的作用是用来解决原型演示时标签栏或工具栏会挡住页面内容的情况。
8. 模态窗口交互设置
模态窗口交互是移动端产品中最常见的交互方式之一，它主要用作显示系统的重要信息，并请求用户进行操作反馈，例如：删除某个重要内容时，弹出对话框进行二次确认。在原型中我们可以通过简单的设置，实现跟移动端APP一致的模态窗口效果。
首先同样需要新建一个模态窗口的动态面板，在面板的属性设置中设置为“固定到浏览器”，水平固定选项为“居中”，垂直固定选项为“下”。然后再在触发模态窗口的交互事件中按以下方式进行设置，重点是勾选“置于顶层”选项和设置“灯箱效果”，灯箱效果的背景颜色和透明度可以根据需要进行自定义。关于具体的设置和演示效果，可以参照我将在后面推荐的移动端元件库。
9. 输出选项的设置
设置位置：发布—生成HTML-移动设备，在界面中勾选“包含视口标签”，设置宽度为：device-width，设置缩放为：no，其它选项为空就可以了。
设置方式：启动safari浏览器打开原型地址—点击浏览器底部的设置图标(正中间)—添加到主屏幕——完成添加即可。大家可以尝试使用下方演示地址进行添加看看效果。
10. 其它的补充说明
如果我们设计的移动端原型不需要考虑在手机上演示的场景，仍然可以参照本文中相关的规范。我一般会在编辑区域放置一个设备模板，新建一个内容框架的动态面板用来放置页面的主要内容，而这个内容框架的尺寸同样是我们之前定义的内容区域尺寸(宽)375px*(高)667px。另外，内容框架的动态面板的属性中需要将滚动条设置为“自动显示垂直滚动条”，这样当框架的内容超出时可以拖动滚动条进行查看。
通过使用设备模板可以让输出的原型效果更标准和规范，如果我们在编辑界面中放置了设备模板，则不再需要对导航栏、标签栏或工具栏、模态窗口等动态面板进行固定到浏览器设置，你只需要拖动到设备模板对应的位置并置于内容框架上方即可。
