axure⼿机页⾯设计说明_Axure中移动端原型设计⽅法
在使⽤Axure设计移动端原型的应⽤⽅⾯，我总结出了两种常⽤的⽅法。第⼀种是更适合在移动端进⾏演⽰的设计⽅法，⼤家可以参考我之前已经分享过的⼀篇教程：使⽤Axure打造最佳的移动端交互原型教程，使⽤这种⽅法输出的原型在⼿机设备上进⾏演⽰时可以达到跟真实APP⼏乎⼀致的展⽰效果及交互体验。在今天我将分享另外⼀种基于设备模板的移动端原型设计⽅法。
什么是基于设备模板的移动端原型设计⽅法？简⽽⾔之就是在Axure的编辑界⾯中放置对应的机型模板，使输出的原型达到更规范和真实的演⽰效果。其实这是⼀种很常见的移动端原型的设计⽅法，很多同⾏在设计原型的时候也都⽤过。这篇分享教程将对个设计⽅法进⾏了总结和梳理，并基于这个⽅法制作了⼀套可快速复⽤的模板。这套模板具有⼏个⽅⾯的特点：
● 结构化，根据APP界⾯结构进⾏搭建；
● 标准化，⾮常⽅便进⾏编辑和维护；
● ⾼保真，可⾼度还原移动端交互效果；
在本篇分享的结尾我会提供模板的Axure源⽂件下载，其中包含了最新的IPhoneX和IPhone8等多套IOS设备机型，以及⼀些常见的界⾯元素和交互效果。在开始正式的介绍之前，⼤家可以查看使⽤这套模板
还原IOS中两款官⽅应⽤的设计演⽰。
IOS11 AppStroe For iPhoneX 原型演⽰
IOS11 Contacts For iPhone8 原型演⽰
1.界⾯元素和结构介绍
由于这套模板是基于IOS系统进⾏设计的，所以相关界⾯元素和交互⽅式均以IOS为标准。⽬前主流的移动端系统除了IOS还有Android，这两种系统设计标准和交互⽅式其实是存在⼀些差异的，不过⽬前市⾯上⼤部分APP在设计时并没有争对两种系统做单独的处理。
所以如果没有特珠需求的话，我们⼀般也只需要输出⼀套原型⽅案就可以了，不过设计过程中需要尽量兼顾这两个主流的系统。当然，如果你的产品明确需要按照Android的系统规范来设计，你也可以参照本教程设计⼀套Android的原型模板，相关交互⽅式可以参照Android版的交互指南规范。
在开始介绍模板的搭建和使⽤⽅法之前，需要先对APP的界⾯结构做⼀个简单的介绍，熟悉了界⾯结构可以⽅便我们后续的设计。常见APP 的界⾯主要由以下元素或组件组成：
StatusBar / 状态栏
状态栏显⽰设备的关键信息，包含设备模型或⽹络提供商、⽹络信号强度、电池使⽤量、时间等。在特殊界⾯中可以对状态栏做隐藏处理，或根据需要⾃定义状态栏背景。
NavBar / 导航栏
导航栏位于app内容区的上⽅，系统状态栏的下⽅，并且提供在⼀系列页⾯中的导航能⼒。可在导航栏中显⽰当前视图的标题，如果标题⾮常冗长且⽆法精简，可以空缺，避免⽤过多的元素填满导航栏。导航栏中可以添加⽂字和图标控件，相关控件的可点击区域需要⼤于控件的可视⼤⼩。
Body / 内容区
内容区域根据需要进⾏⾃定义设计，常见的设计形式有菜单列表、图标列表、卡⽚列表、图⽂组合等。
TabBar / 标签栏
标签栏位于APP底部，⽅便⽤户在不同功能模块之间进⾏快速切换。标签栏⼀般⽤作APP的⼀级分类，数量控制在3-5个之间。建议使⽤Badge进⾏提⽰，让⽤户知道有内容更新。
Toolbar / ⼯具栏
⼯具栏⼀般会出现在视图的的底部，提供给⽤户相关可操作的功能按纽。如，邮件应⽤程序⾥的收件箱栏中有删除、分享、答复等等。
Modal / 弹出层
移动端的弹出层根据弹出⽅式不同，共分为模态窗⼝、动作⾯板、弹出⾯板等⼏种不同的类型。在实际使⽤中，可根据界⾯的交互⽅式选择对应的类型。
Toast / 轻提⽰
⼀种轻量级反馈提⽰，可以⽤来显⽰不会打断⽤户操作的内容，适合⽤于页⾯转场、数据交互的等场景中。⼀次只显⽰⼀个轻提⽰，有图标的提⽰字数为4-6个，没有图标的轻提⽰字数不宜超过14个。
TableView / 列表视图
列表视图是移动端APP中⼀种通⽤的界⾯元素。很多应⽤程序在⼀定程度上，都有使⽤表视图来显⽰数据列表。常见的例如IOS的联系⼈应⽤中联系⼈信息列表，另外还有Mail中使⽤列表视图显⽰邮箱和邮件。列表视图不仅可以⽤来显⽰⽂本数据，也可以⽤来呈现图像数据。
以上是⾖瓣APP的⼀个界⾯截图⽰例，界⾯的结构⽤颜⾊进⾏了区分，从上⾄下分别为：状态栏、导航栏、内容区、标签栏。
2.结构化的模板搭建
在介绍完APP的界⾯结构之后，接下来说明⼀下模板的搭建⽅法。在本篇教程的结尾会提供了已经制作好的模板的⽂件，⼤家可以下载并参考本部分介绍进⾏使⽤，也可以参照介绍制作⾃⼰的原型模板。
在制作模板时需要⽤到对应的机型设备的图⽚素材，可以通过Dribbble等设计分享平台到对应的素材⽂件，然后对素材做⼀些简单的处理。处理的过程⾸先是去掉多余的元素，只保留机型设备的框架图⽚。另外还需要对图⽚的尺⼨进⾏调整，例如在制作⼿机等移动端模板时我们将内容区域定为375px，需要根据所定的内容区域对图⽚的尺⼨进⾏相应的调整。
为什么模板的内容区域是375px？这个问题我在上篇教程中进⾏过介绍，所以不再进⾏展开说明。但是需要记住的这个尺⼨是⼀个重要的标准，后续在设计过程中相关元件的宽度尺⼨都需要参照这个标准。机型设备的图⽚素材准备好之后，我们在Axure中创建⼀个对应的母版，然后将机型设备图⽚拖⼊到母版中。母版的名称可以按该机型设备的名称命名，后⾯在使⽤时在新建的页⾯中拖⼊该母版即可。
下⼀步需要创建前⾯介绍过的APP界⾯中常见元素或组件，⾸先⼤家可以看⼀下这张图⽚中已经创建好的模板，其中包含了机型母版、轻提⽰、弹层、导航栏、标签栏、内容框架等元素。
好看网页设计素材图片
在这个模板页⾯的概要视图中可以看到相关的对象，所有对象我都创建了⼀个对应的动态⾯板。这样的处理主要出于两个⽅⾯的考虑，⼀是⽅便对相关元素进⾏编辑维护，⼆是相关对象的显⽰是有顺序的，这样可以⽅便在概要视图中进⾏排序处理。
3.模板使⽤细节说明；
在内容框架中编辑界⾯内容；
界⾯的主要内容在内容框架动态⾯板中进⾏编辑和维护，由于该动态⾯板设置了⾃动显⽰滚动条，如果你的界⾯内容超出了⼀屏，在演⽰时可以通过在内容框架区域滚动⿏标滚轮查看更多内容。
关于模板界⾯元素的尺⼨说明：
模板中的界⾯元素的尺⼨并没有⾮常严格的标准，以下尺⼨是我根据⽐例进⾏设置的，仅供参考。IphoneX状态栏：44px、IphoneX标签栏：80px、Iphone8状态栏：28px、IphoneX标签栏：60px、导航栏：40px。另外，内容区域的⾼度因为机型设备的素材图⽚不统⼀可能略有差异，基本上可以忽略。
每个界⾯对应⼀个页⾯；
在设计原型时建议每⼀个界⾯创建⼀个对应的页⾯，通过添加页⾯链接进⾏界⾯跳转，这样⽅便对原型进⾏编辑和维护。不建议将多个界⾯⽤动态⾯板堆砌在⼀起页⾯内，这样会使输出的原型在演⽰时出现卡顿现象。
关于元素的层级顺序；
在概要视图中可以看到相关元素对应动态⾯板的层级顺序，在使⽤该模板的时候请尽量参照此顺序，否则可能在演⽰时出现显⽰错误的情况。
关于底部标签栏的设置；
为了⽅便维护可以将标签栏创建为母版，然后添加到需要显⽰标签栏的页⾯中。另外，在对应的页⾯中需要显⽰对应的标签选中效果，只需要在该页⾯中的标签栏动态⾯板中添加⼀个选中效果的标签元件。
热区占位符的使⽤；
如果页⾯中添加了标签栏或⼯具栏，由于标签页的动态⾯板在内容框架的动态⾯板之上，在演⽰时会出现内容有⼀部分被挡住的情况。可以创建⼀个⾼度为100px的热区元件为母版，将母版拖⼊对应的页⾯底部，⽤来解决内容区域被挡住的问题。
4.常⽤设计元素及规范
经常有朋友向我咨询如何设计出更漂亮美观的原型，虽然原则上原型能完整的体现出需求细节即可，好看并不是我们在原型输出时应该关注的重点，但是如果能满⾜说明需求的同时能把原型做得更漂亮⼀些更好，这也算是体现专业程度和⼯作态度的⼀个⽅⾯，⽽且很多⼈对⾃⼰的输出物也是有强烈的美感追求的。
其实原型设计不需要了解太复杂的设计⽅法，只要掌握⼀点简单的技巧就能达到美观的效果，同时能让整体更统⼀和标准。在分享的这套模板中包含了⼀些基本的设计元素，我下⾯对其中的⼀些规范细节进⾏说明，供⼤家进⾏参考。
配⾊⽅案
◆ ⼀般采⽤⿊⽩灰的配⾊⽅案就能够满⾜基本设计要求了，但是如果能稍微得加上⼀些亮⾊的配⾊效果，可以使原型更好的体现出视觉层级，这对UI是有⼀定的参考价值的。不要感觉得配⾊效果能够影响UI的设计，如果UI会被原型中的配⾊影响，只能说明UI的设计能⼒有待提升；
整套原型中亮⾊主⾊调不要超过两个，对于主要按纽和重点提⽰可以加上主⾊调⾊值，次要元素统⼀使⽤#000000、#333333、
#999999等灰⾊辅助⾊；
◆ 模板中的这套模板⽅案中的主⾊调是从IOS11的UI设计规范中提取的，你可以根据⾃⼰的需要整理⼀套⾃⼰的配⾊⽅案，建议尽量使⽤扁平化设计⾊值；
配⾊板使⽤
Axure中的配⾊板提供了⼀些常⽤的颜⾊⾊值，可⽤作⼀些常⽤元素的颜⾊配⾊。例如截图中标注1中的纵向的灰⾊⾊值可⽤于相关字体元素的颜⾊，标注2中横向的灰⾊⾊值可⽤于相关元素的背景和线条的颜⾊。另外，点击标注3中的更多按纽，可以将其它的常⽤⾊值加⼊到⾃定义颜⾊中，⽅便快速的使⽤。
字体元素
◆ 原型设计时的字体字号建议统⼀使⽤偶数，常⽤的标题字号为16px、18px、20px，常⽤的正⽂字号为12px、14px；
针对不同字体⼤⼩的多⾏⽂本单独设置对应的⾏间距，例如12px的多⾏⽂本⾏间距建议设置为20，14px的多⾏⽂本⾏间距建议设置为28；
推荐中⽂字体统⼀使⽤微软雅⿊，由于Axure的默认字体为Arial，可以通过⽣成HTML设置中的字体映射，将Arial映射为微软雅⿊，这样就不需要在设计时去单独设置每个元件的字体了。
其它元素
◆ 原型设计时元件的宽度建议统⼀保持为5和10的倍数，元件的间距建议为10px或20px；
◆ 使⽤键盘⽅向键移动选中的元件时每次移动距离为1px ，使⽤ctrl 键盘⽅向键每次移动距离为10px；
◆ 按住Ctrl ⿏标拖动可以快速的复制元件，按住Shift ⿏标拖动可以垂直或⽔平的移动元件；
对齐及分布⼯具使⽤
有对齐强迫症的朋友可以使⽤顶部⼯具栏中的对齐及分布⼯具对元件进⾏处理，右击顶部的⼯具栏区◆ 域可以⾃定义显⽰或隐藏相关的⼯具图标；
选中多个元件时可以使⽤对齐⼯具快速的对多个元件进⾏各种对齐处理，还可以使⽤分布⼯具快速的对多个元件进⾏垂直或⽔平分布处理；
5.使⽤辅助线进⾏排版；
在以前的教程中已经介绍过辅助线的使⽤⽅法，合理的使⽤辅助线可以帮助我们提升设计效率，同时能让输出的原型效果更标准，所以强烈建议⼤家在设计过程中使⽤。以下是模板中内容框架编辑区域的截图，是我常⽤使⽤辅助线⽤来排版的⽅式。截图中的辅助线均为横向x轴辅助线，可以看到其中共有4条，分别介绍⼀下它们的作⽤和位置：
第1条辅助线是⽤来划分左边的内容留⽩区域，例如我⼀般习惯将左边留⽩为20px，这条辅助线位于x轴的20px位置。
第2条辅助线是内容居中辅助线，之前已经介绍过模板的设计宽度标准为375px，这条辅助线位于x轴的188px位置；
(375px/2=187.5px)
第3条辅助线⽤来划分右边的内容留⽩区域，例如右边跟左边留⽩⼀样为20px，这条辅助线位于x轴的355px位置；(375px-
20px=355px)
第4条辅助线是⽤来划分内容设计区域，例如模板的设计宽度标准为375px，这条辅助线位于位于x轴的375px位置；
这些辅助线的⽤法只是作为参考，可以根据⾃⼰的需要新建对应的辅助线。⿏标光标移动到编辑区域的左侧和顶部的标尺区域，按住⿏标左键并往编辑区域拖动时，就可以⽣成横向x轴或纵向y轴的辅助线，然后将辅助线拖动到对应的位置即可。辅助线还有⼀个特性就是当拖动元件靠近它时，元件会⾃动吸附到辅助线的边缘达到快速对齐的效果。
⼏点辅助线的使⽤⼩技巧：
右击辅助线可以将其锁定，以防⽌拖动元件时会将辅助线会跟着⼀起移动；
可以通过按住Ctrl拖动创建全局辅助线，全局辅助线就是在所有页⾯中产⽣⼀条相同的辅助线；
在“布局—栅格和辅助线—锁定辅助线”中选中可以将所有的辅助线保持锁定状态且⽆法删除；
在“布局—栅格和辅助线—删除辅助线”中可以清除所有页⾯中的辅助线；
在“布局—栅格和辅助线—辅助线设置”中可以修改辅助线的颜⾊或进⾏更多设置；
6.Toast提⽰交互设置；
移动端原型中最常⽤的交互效果就是弹出层和轻提⽰两种，模板中已经包含了这种两交互效果的相关元件和事件，这⾥再单独简单的介绍⼀下。
Toast提⽰显⽰效果
在模板页⾯的概要视图中可以看到名为“提⽰”的动态⾯板，需要显⽰的提⽰信息在这个动态⾯板中编辑就可以了。当前的动态⾯板中有⼀个“操作成功”的提⽰状态，如果在⼀个页⾯中显⽰多个提⽰，可以新增对应的状态然后修改相关的提⽰内容。
选中提⽰的动态⾯板的状态右击选择复制状态可以快速创建新的提⽰。建议对每个对应的提⽰状态进⾏命名，这样⽅便后续进⾏管理。关于轻提⽰的基本使⽤规范请参照前⾯的介绍内容。
Toast提⽰的显⽰⽅式设置很简单，只需要在对应的元件事件上加⼊以上的交互动作。⾸先设置提⽰动态⾯板中对应的状态，然后设置显⽰动态⾯板，显⽰时有⼀个逐渐的动画效果。
Toast提⽰显⽰以后会在3秒后⾃动逐渐隐藏，模板中的这个交互动作已经加在提⽰动态⾯板的显⽰时事件中了，不需要再单独的进⾏设置。
7.常⽤弹层交互设置
模态窗⼝交互效果
移动端的弹层共分为模态窗⼝、动作⾯板、弹出⾯板等⼏种不同的类型。在模板页⾯的概要视图中可
以看到名为“弹层”的动态⾯板，可以根据需要创建更多其它的弹层状态，还能在对应的⾯板状态属性中设置透明背景的遮罩效果。
上⾯截图中的为⽐较常见的模态窗⼝弹层效果，设置⽅式是在对应的元件事件上加⼊以上的交互动作。另外，根据模态窗⼝、动作⾯板、弹出⾯板这⼏种弹层类型的弹出⽅式不同，需要设置显⽰时为向上滑动和逐步等动画效果。
8.导航栏切换交互设置
最后介绍⼀下如何实现内容区域滚动时，导航栏⾃动切换的交互效果。⾸先需要在导航栏的动态⾯板中创建对应的状态，然后选中内容框架动态⾯板，在它的滚动时事件中按照上⾯的格式加⼊对应的条件判断即可。
在这个设置⽤到了条件判断和函数，条件的详细设置见上⽅的截图。它的原理是当内容框架垂直滚动⾼度⼤于70时设置导航栏动态⾯板的显⽰状态为2，当内容框架垂直滚动⾼度⼤⼩于70设置导航栏动态⾯板的显⽰状态为1。其中⽤到的This.scrollY函数是获取当前元件的直滚动⾼度，70的值可以根据需要⾃⼰设置。
好了，到此这篇基于设备模板的移动端原型设计⽅法的分享基本介绍完了。最后提供的是iPhoneX And iPhone8 Mockup 原型模板的源⽂件下载，⼤家可以结合本⽂中的相关介绍进⾏使⽤。
最后再给⼤家分享⼀套本⼈整理设计的移动端元件库，这套元件库中的相关元件是可以在这个模板中复⽤的，后续也会不断的进⾏优化和完善，有需要的朋友可以关注⼀下。
⼀直以来Axure在对移动端原型设计⽅⾯的⽀持都不是⼗分理想，它没有像⽬前其它⼏类原型设计⼯具(Justinmind、墨⼑等)⼀样提供移动端设备的模板和相关交互组件，但是Axure⾃由灵活的特性却同样的其它原型设计⼯具所⽆法取代的。通过掌握⼀些设计规范和⽅法，我们同样可以通过Axure制作出⾮常完美的移动端演⽰原型。
⾸先你可以通过⼿机或电脑访问以下地址，这是我设计完成的移动端原型模板。
使⽤Axure打造最佳的移动端交互原型教程
1. 选择适合的设计分辨率
在开始设计原型之前我们需要做的第⼀步是选择合适的设计分辨率，⽬前使⽤Axure设计移动端原型时普遍采⽤的是(宽)375px*
(⾼)667px和(宽)414px*(⾼)736px两种分辨率尺⼨，这两种尺⼨分别是由⽬前主流的移动设备Iphone7和Iphone7 PLUS的屏幕分辨率尺⼨等⽐缩放⽽定义出来的，同时也是Iphone7和Iphone7 PLUS的逻辑分辨率。
有朋友可能会疑惑在设计原型的时候为什么不直接采⽤移动设备实际的分辨率呢？因为这主要考虑到设计时的便携性，毕竟我们输出的原型主要是⽤于演⽰⽽不是视觉稿，所以不需要达到那么⾼的精度，另外如果按移动设备实际的分辨率进⾏设计，在对元件进⾏编辑和排版的时候会是⼀件很耗费时间的事情，同时也不⽅便在电脑浏览器上进⾏查看。
本⼈在进⾏原型设计的时候⼀般⽤的是375px*667px这个分辨率尺⼨，因为Axure常⽤的元件默认的字号⼀般是14px或18px，这两种字号也刚好匹配Iphone7上常⽤字号的⽐例，⽽且这个分辨率尺⼨在电脑浏览器上刚好⼀屏就可以显⽰完整。
2. 定义内容区域
上⾯已经介绍了为什么选择375px*667px作为移动端原型设计分辨率尺⼨，在开始设计之前我们需要先按照这个尺⼨在编辑区域中定义好内容区域。我⼀般是使⽤辅助线来定义内容区域的，例如下图是⽤辅助线定义好内容区域的效果。
事实上我们在设计时其实不⽤去限制原型的⾼度，因为在通过移动端设备进⾏浏览时可以通过滚动页⾯查看超出⾼度部分的内容，这跟实际的移动端产品的操作⽅式是⼀致的。⽽在原型设计的时候，我们还是需要拖⼀条⽤于标识原型设计⾼度的辅助线，它的主要作且是为了标识出⾸屏的区域范围，这对于布局选择是有⼀定的参考价值的。
3. 神奇的辅助线
辅助线的作⽤除了⽤来定义内容区域之外，同时它也能帮助我们快捷的进⾏布局。辅助线有⼀个特性就是当你拖动元件靠近它时，元件会⾃动吸附到辅助线的边缘达到快速对齐的效果，对于有对齐强迫症的朋友来说这个特性会感觉⽆⽐贴⼼。
辅助线的基本使⽤⽅法：⿏标移动到编辑区域的左侧和顶部的标尺区域长按并往编辑区域拖动时就可以⽣成横向或纵向的辅助线，将辅助线拖动到对应的位置即可。
⼀般除了⽤辅助线来定义内容区域的之外，我还会新建两条纵向的辅助线⽤于标识界⾯左右两侧的留⽩区域。建议两侧留⽩区域⽤10px或者20px，例如本⼈常⽤的是20px，因此这两条辅助线的位置分别在X轴的20px和355px的位置。除此之外，我们的元件⼀般还需要设置左右各20px的填充，⽤来将⽂字的显⽰限定在界⾯留⽩区域内。
补充⼏点辅助线的使⽤⼩技巧：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。