发布时间：2023-3-1 分类： 电商动态
该文章的作者共享了基于设备模板的基于移动的原型设计方法。我相信它可以帮助你的原型制作工作，值得马克。
在使用Axure设计移动端原型方面，我提出了两种常用方法。第一种是更适合在移动端呈现的设计方法。您可以参考我之前已经共享过的教程：使用Axure创建最佳移动交互式原型教程，并使用此方法在移动设备上输出原型。在演示中，您可以获得与真实APP相同的显示效果和交互体验。今天，我将基于设备模板分享另一种基于移动的原型设计方法。
什么是基于设备模板的移动端原型设计方法？简而言之，相应的模型模板放置在Axure的编辑界面中，以实现输出原型的更标准化和逼真的呈现。事实上，这是一种非常常见的移动终端原型设计方法，其中许多人在设计原型时都使用过它。该共享教程将总结和整理设计方法并构建一组可以基于此方法快速重用的模板。这组模板有几个方面：
●结构化，根据APP界面结构构建;
●标准化，易于编辑和维护;
●高保真，高度恢复移动互动;
在本文的最后，我将提供Axure源文件下载的模板，其中包括最新的IPhoneX和IPhone8以及其他IOS设备模型，以及一些常见的界面元素和交互效果。在开始正式介绍之前，您可以查看使用模板的设计演示，以恢复IOS中的两个官方应用程序。
适用于iPhoneX原型演示的IOS11 AppStroe
演示地址：http://www.axureux.com/demo/TemplatesForIOS11/today.html
适用于iPhone8原型演示的IOS11联系人
演示地址：http://www.axureux.com/demo/TemplatesForIOS11/Personal Collection.html
1.界面元素和结构简介
由于此模板是基于IOS系统设计的，因此相关的界面元素和交互方法都基于IOS。目前，主流移动系统不仅是IOS，还有Android。两种系统设计标准和交互方法之间存在一些差异。但是，市场上的大多数APP并不是为单独处理这两个系统而设计的。
因此，如果没有特殊的珠子需求，我们通常只需要导出原型解决方案，但我们需要在设计过程中处理这两个主流系统。当然，如果你的产品显然需要根据Android的系统规范进行设计，你也可以参考本教程设计一套Android原型模板，相关的交互方法可以参考Android版的交互式指南规范。
在开始介绍模板的构造和使用之前，您需要简要介绍APP的界面结构。熟悉界面结构可以方便我们的后续设计。普通APP的界面主要由以下元素或组成部分组成：
StatusBar /状态栏
状态栏显示有关设备的关键信息，包括设备型号或网络提供商，网络信号强度，电池使用情况，时间等。在特殊界面中，您可以隐藏状态栏或根据需要自定义状态栏背景。
导航栏/导航栏
导航栏位于应用程序内容区域上方，系统状态栏下方，并提供跨页面的导航功能。当前视图的标题可以显示在导航栏中。如果标题很长并且不能简化，它可能是空的，避免用太多元素填充导航栏。可以将文本和图标控件添加到导航栏，并且相关控件的可单击区域需要大于控件的可见大小。
身体/内容区
内容区域根据需要定制。常见的设计形式包括菜单列表，图标列表，卡片列表，图形组合等。
TabBar/Tab栏
标签栏位于应用程序的底部，允许用户在不同的功能模块之间快速切换。标签栏通常用作APP的主要分类，数量控制在3-5之间。建议使用Badge提示用户知道有内容更新。
工具栏/工具栏
工具栏通常显示在视图的底部，为用户提供相关的操作按钮。例如，在邮件应用程序的收件箱栏中删除，共享，回复等。
模态/弹出图层
根据不同的弹出模式，移动终端的弹出层被分成几种不同的类型，例如模态窗口，动作面板和弹出式面板。在实际使用中，可以根据界面的交互模式选择相应的类型。
吐司/小贴士
轻量级反馈提示，可用于显示不会中断用户操作的内容，适用于页面转换和数据交互等场景。一次只显示一个灯光提示。带图标的提示数量为4-6，没有图标的灯光提示数量不应超过14。
TableView /列表视图
列表视图是移动应用程序中的常用界面元素。在某种程度上，许多应用程序使用表视图来显示数据列表。联系人应用程序（如IOS）中的联系人信息和列表视图中的邮件的常见示例，用于显示邮箱和邮件。列表视图不仅可用于显示文本数据，还可用于渲染图像数据。
以上是豆瓣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,33333和999999。
◆模板中模板方案的主要颜色是从IOS11的UI设计规范中提取的。您可以根据自己的需要组织自己的配色方案。建议尽可能使用平面设计颜色值;
调色板使用
Axure中的调色板提供了一些常见的颜色色度值，可用作某些常见元素的色彩匹配。例如，屏幕截图中标签1中的垂直灰色值可以用于相关字体元素的颜色，标签2中的水平灰色值可以用于相关元素的背景和颜色这条线。此外，通过单击“维度3”中的“更多”按钮，可以将其他常用颜色值添加到自定义颜色中，以便快速轻松地使用。
字体元素
◆建议原型设计的字体大小使用偶数。常用的标题字体是16px，18px，20px，常用的文本数字是12px和14px;
分别为不同字体大小的多行文本设置相应的行间距。例如，建议将12px多行文本行间距设置为20，建议将14px多行文本行间距设置为28;
建议以统一的中文字体使用Microsoft Yahoo。由于Axure的默认字体是Arial，您可以通过在HTML设置中生成字体映射来将Arial映射到Microsoft Yahoo，因此您无需在设计时单独设置每个组件的字体。它是。
其他要素
◆原型制作过程中元件的宽度建议保持为5和10的倍数，推荐元件间距为10px或20px;
◆使用键盘方向键每次移动所选组件1px，并使用ctrl +键盘方向键每次移动10px;
◆按住Ctrl +鼠标快速复制组件，按住Shift +鼠标垂直或水平移动组件;
对齐和分发工具以使用
具有对齐强迫症的朋友可以使用顶部工具栏中的对齐和分布工具来处理组件。右键单击顶部的工具栏区域◆域以自定义显示或隐藏相关工具图标;
选择多个组件后，您可以使用对齐工具在多个组件上快速执行各种对齐，并且可以使用分发工具快速垂直分布多个组件;
5.使用引导线进行排版;
在之前的教程中，引入了指南的使用。合理使用指南可以帮助我们提高设计效率并使输出原型更加标准化，因此强烈建议您在设计过程中使用它们。以下是模板中内容框架编辑区域的屏幕截图，这是我使用辅助线进行排版的方式。屏幕截图中的辅助线是水平x轴辅助线。您可以看到其中有4个，它们的功能和位置是分开引入的：
第一辅助线用于划分内容的左侧区域。例如，我习惯将左侧白化为20px。该辅助线位于x轴的20px位置。
第二辅助线是内容定心辅助线。之前已经介绍了模板的设计宽度标准，即375px。该辅助线位于x轴的188px位置; （375px/2=187.5px）
第三辅助线用于划分右侧的空白区域。例如，右侧的左侧为20px白色。该辅助线位于x轴的355px位置; （375px-20像素=355px）
第四辅助线用于划分内容设计区域。例如，模板的设计宽度为375px，辅助线位于x轴的375px位置;
使用这些指南仅供参考，您可以根据需要创建新指南。将鼠标光标移动到编辑区域的左侧和顶部标尺区域，按住鼠标左键并拖动到编辑区域以生成水平x轴或垂直y轴的辅助线，然后拖动辅助线到对应的位置很好。该指南的另一个特点是，当拖动组件靠近它时，组件会自动捕捉到指南的边缘以便快速对齐。
使用多个指南的提示：
右键单击指南以将其锁定，以防止在拖动组件时指南移动;
您可以通过按住Ctrl并拖动来创建全局指南。全球指南在所有页面上都生成相同的指南;
在“布局— Grid&Assist Line—锁定辅助线>选择所有辅助线都可以锁定，不能删除;
您可以在“布局—中删除所有页面中的指南”。网格和指南—删除指南 ;;
您可以修改指南的颜色或在“布局—”中进行更多设置。网格和指南—指南设置 ;;
6.Toast提示交互式设置;
移动端原型中最常见的交互效果是弹出层和灯光提示。模板已包含两个交互效果的相关组件和事件。这是一个简短的介绍。
Toast提示显示效果
在模板页面的摘要视图中，您可以看到名为“提示”的动态面板，您可以在此动态面板中编辑需要显示的提示信息。在当前动态面板中，存在“操作成功”的提示状态。如果在一个页面上显示多个提示，则可以添加相应的状态，并且可以修改相关的提示内容。
选择提示的动态面板的状态，然后右键单击以选择复制状态以快速创建新提示。建议为每个相应的提示状态命名，以便以后管理。有关灯头的基本使用规范，请参阅前面的介绍。
Toast提示的显示模式非常简单，只需要将上述交互添加到相应的组件事件中。首先在提示动态面板中设置相应的状态，然后设置显示动态面板，显示时会有渐变的动画效果。
3秒后，Toast提示显示将自动逐渐隐藏。模板中的此交互操作已添加到提示动态面板显示的事件中，无需单独设置。
7.常见的弹性层交互设置
模态窗口交互效果
移动端的弹性层分为几种不同的类型，例如模态窗口，动作面板和弹出式面板。在模板页面的摘要视图中，您可以看到名为“Blast Layer”的动态面板，您可以根据需要创建更多其他图层，并且可以在相应的面板状态属性中设置透明背景的蒙版效果。 。
在上面的屏幕截图中，通过将上述交互添加到相应的组件事件来设置更常见的模态窗口层效果。另外，根据模态窗口，动作面板和弹出面板的不同弹出方式，需要设置向上滑动和逐步显示等动画效果。
8.用于切换交互设置的导航栏
最后，我将介绍如何在滚动内容区域时实现导航栏自动切换的交互效果。首先，需要在导航栏的动态面板中创建相应的状态，然后选择内容框动态面板，并在滚动事件中根据上述格式添加相应的条件判断。
在此设置中，使用条件判断和函数。有关条件的详细设置，请参阅上面的屏幕截图。其原理是当内容框架的垂直滚动高度大于70时，导航栏动态面板的显示状态设置为2，当内容框架的垂直滚动高度为70时，显示状态导航栏的动态面板是1. This.scrollY函数用于获取当前组件的直线滚动高度，值70可以根据需要设置。
好的，这是基于设备模板共享移动设备原型方法的基本介绍。最后，提供了iPhoneX和iPhone8 Mockup原型模板的源文件下载。您可以将它与本文中的相关介绍结合使用。
下载地址：https://pan.baidu.com/s/1nvBVgYt
最后，我将与您分享我设计的一组移动终端组件。可以在此模板中重用此组件库中的相关组件。随后的优化和改进将持续进行。一点点。
演示和下载：http://www.axureux.com/home/librariesmoblite.html
本文最初由@windir发布。未经许可，禁止复制。
该地图来自PEXELS，基于CC0协议
