您所在的位置:首页 > 营销策划

热点推荐

最新推荐

Axure中基于设备模板的移动端原型设计方法(附IPhoneX和IPhone8最

编辑:互联网时代网时间:2019-07-12 08:37:30阅读次数:

  作者共享基于模板的移动终端设备原型法,相信可以帮助您使原型设计工作,值得马克。

  在使用Axure高端移动应用的原型设计,我总结了两种常见的方法。第一种方法更适合于设计演示在移动终端中,你可以参考我有一个份额教程之前:Axure创造最佳的移动终端用户交互原型教程,使用移动设备,这个方法的原型的输出你显示在演示和互动体验的效果时,可以达到几乎与真正的应用程序相同。今天,我将分享另一种原型法基于模板的移动终端设备。

  什么是移动终端设备基于模板的原型?简而言之置于Axure对应模型模板编辑界面,所述原型的输出实现更加规范和实际演示效果。事实上,这也是移动端的原型设计的一种很常见的方法,在原型的设计有很多同事也使用。本教程将共享的设计方法进行了归纳和梳理,并在此基础上方法制作的一套模板,以便快速重用。这个模板有几个方面的特点:

  到底本篇份额,我会提供一个模板Axure源文件下载,其中包括最新的IPhoneX和IPhone8其他台iOS设备模型,以及一些常见的界面元素和交互。演示正式开始之前,您可以查看此模板设计IOS减少在这两个官方应用示范。

  因为这个模板是基于IOS系统上设计的,因此相关的界面元素和交互是标准的IOS。目前主流的移动终端系统,除了有Android的IOS,标准和系统设计的交互方式其实也有一定的差异,但大多数现有的APP的两个系统的设计没有竞争使个体化治疗。

  因此,如果没有特殊珠要求,我们一般只需要输出一个原型程序就可以了,但在设计过程中需要尝试这两个主流系统之间的平衡。当然,如果你的产品是明确需要遵循Android系统的规范来设计,也可以指一个原型设计模板本教程的Android,相应的参考Android版本可以交互式互动指南规范。

  越来越设置和使用模板之前,你需要做一个简单的介绍了APP的界面结构,熟悉的界面结构可以促进我们的后续设计。APP通用接口由以下元素或组件组成:

  状态栏显示的关键信息设备,包括设备模型或网络供应商,网络信号强度,电池的使用,时间等。。特别接口,你可以做隐藏状态栏处理,或根据需要在状态栏上的自定义背景。

\

  应用导航栏位于内容区域上方,系统状态栏的下方,并且在导航功能提供了一系列的页面。在导航栏可显示当前视图的标题,如果标题是很长的,并且不能简化,可以是空缺,以避免与在导航栏元素过多填充。导航栏,您可以添加文字和图标所控制,相关的控件,需要的不仅仅是视觉控制的尺寸更大的可点击区域。

  在APP,底部标签栏以方便用户不同的功能模块之间的快速切换。通常分类为APP的标签栏,控制的3-5之间的数。推荐徽章提示,以便让用户知道更新。

  工具栏通常出现在视图的底部提供了相关的操作的功能按钮的用户。例如,在邮件应用程序的收件箱列有删除,分享,回复等。

  根据所述移动终端的层以不同的喷射弹出方式,划分为不同的模式窗口,操作面板,弹出板和其它类型的。在实际使用中,可以根据相应的交互界面的类型来选择。

  轻量级及时反馈可以用于在不中断用户的操作要显示的内容适用于页面转换,场景数据交互等。仅显示一个光提示,与用于4-6的图标提示换句话说,没有图标光提示词语不应该超过14。

  APP是在移动终端中的列表视图的通用接口元件。许多应用程序在一定程度上,必须使用表格视图来显示数据列表。常见的应用程序的联系人信息,例如IOS联系人名单中,除了使用列表视图到邮件显示邮箱和邮件。列表视图不仅可以用来显示文字数据,可用于图像数据来呈现。

  以上是豆瓣APP界面的示例性屏幕截图,该接口结构经颜色区分,从顶部到底部,分别为:状态栏,导航条,内容区域,标签栏。

\

  引入到APP的界面结构之后,然后解释建立模板的方法。在本教程将提供一个现成的模板文件的末尾,您可以下载并参考本节介绍了使用,也可以引入参考,使自己的原型模板。

  需要建立相应的图片素材类型设备模板时使用,你可以找到通过Dribbble,如设计,材料相应的源文件共享平台,然后做一些简单的处理。治疗的第一疗程是去除多余的元素,只留下的装置框架的图片类型。我们还需要调整图片的大小,例如在生产手机和其他移动端模板中,我们将内容区域为375px,需要进行调整,以图片的基础上,给定的内容区域的大小。

  为什么模板的内容区域375px?我曾在第一部分教程中介绍了这个问题,所以没有进一步扩大的描述。但要记住在标准参考的相关元件的设计过程中的后续的宽度尺寸的一个重要标准是所要求的尺寸。后的画面材料的设备的类型准备好,我们创建在Axure一个相应的主,然后将模型拖动到主设备中的图片。按名称的主名称命名的设备的类型,拖回主在新页面中使用。

  接下来,你需要创建前面所述APP共同元件或部件的接口,首先我们可以看一下这个图片已经创建了一个包含主模型,光提示,打层,导航栏,标签栏,内容等元素的模板框架。

  总之查看此页面模板可以看到相关的对象,我创建了一个对应的动态面板的所有对象。这样的处理,主要是由于两个方面,一个是轻松地编辑维护相关元素,第二个是相关对象的显示是有序的,所以可以很容易地进行排序的过程的概要视图。

  用于编辑和维护在内容帧动态面板,接口由于动态面板的主要内容设定自动滚动条,如果您的接口的内容超出了一个屏幕,在演示文稿的时间可以通过滚动鼠标被视为更在内容框架区域轮多项内容。

  在模板接口元件的尺寸不是很严格的标准,以下是我的尺寸被按比例设定,仅供参考。IphoneX状态栏:44px,IphoneX标签栏:80px,Iphone8状态栏:28px,IphoneX标签栏:60像素,导航栏:高40。另外,画面的内容区域的高度,因为该材料是不统一的设备模型可能会略有不同,基本上忽略。

  建议在对应于一个页面的每个接口创建一个设计原型,通过添加页面链接的界面,使跳,这样容易编辑和维护原型。不推荐内页堆积在一起更动态的接口面板,这将是在演讲的时候原型输出卡顿现象。

  在大纲视图中,可以看到使用这个模板时,请参阅本为了尽可能多地涉及到动态面板元素的层次结构的相应的命令,否则会出现错误可能是在演讲的时间的情况下。

  为了便于维护可以创建主标签栏,然后添加一个页面,显示在标签栏。此外,在相应的页面需要对应于所选标签的效果被显示,仅在标签栏面板动态标签添加到页面所选效应元件。

  如果页被添加到标签栏或工具栏,由于在面板框架的所述动态内容的动态面板标签上,当演示被部分阻塞发生。可以创建一个热区元件100像素高度是主,对应于拖动的底部的主页,解决了内容区域的问题被阻止。

  朋友们经常来找我,询问如何设计原型的外观更美观,虽然在原理样机能够充分体现细节的需求,可好看了当的原型是不是我们的输出应该关注的焦点,但如果你能解释,以满足在同一时间原型的需求可以变得更美,更好,这将是该行业的一个方面和工作态度的程度,以及他们的许多输出也强劲对美的追求。

  事实上,原型设计,不需要知道太多复杂的设计方法,一旦你有一点点简单的技术可以达到美观的效果,同时让一个更加统一和整体标准。包括在这个模板中的一些基本设计要素的共享,我下面一些规范的细节描述,给大家做个参考。

  ◆常用的黑白灰配色方案将能够满足设计的基本要求,但如果你能得到一点点增加一些鲜艳的色彩效果,可以使原型更好地反映了视觉层次,这个UI是有一定的参考值。没有感受到色彩的效果会影响UI设计,用户界面将是颜色的影响,如果原型只能说明UI设计能力有待提高;

  原型中不超过两个设定的明亮的原色,为对主按钮和要点可为主色,次要元素一致的使用#000000,#333333,#999999和其他灰色二次色添加值;

  此模板方案的主色调◆模板是从UI设计规范IOS11提取,您可以根据自己的需要组织自己的一套的配色方案,建议利用扁平化设计的颜色值;

  Axure在彩色板提供的颜色的一些常见的颜色值,作为颜色匹配若干共同的要素的。例如通过截图1在纵向上表示的灰度颜色值可以在灰度颜色值表示2为背景的颜色可以是横向线和相关元件相关的字体颜色元件中使用的。此外,更标志着点击按钮3,可以添加颜色值,以常用的自定义颜色,快速和易于使用的。

\

  建议字体大小◆原型团结偶数,常用的标题字体大小16像素,18像素,20像素,常用的文本字体大小为12px,14px的;

  提供对应于多行文本用于各个行间距的不同的字体大小,例如,12像素间距推荐多个文本行来设置20,14px多螺距建议28的文本行;

  推荐中国字体统一使用微软雅黑,由于Axure默认字体是宋体,可以生成HTML设置字体映射,宋体被映射到微软雅黑,所以没有必要单独设定中的每个元素的设计字体。

  推荐的宽度◆成型保持均匀时,元件5和10倍,间隔元件或建议10px的20像素;

  ◆当所选择的元件来移动键盘箭头每个运动是1px的,使用箭头键CTRL +每一个动作是10px的;

  ◆按下Ctrl +鼠标拖拽元件可以迅速复制,按住Shift +鼠标拖动运动可以是垂直或水平构件;

  在前面的教程已经介绍了使用的辅助线,合理使用指南可以帮助我们提高设计的效率,效果原型同时让更多的标准输出,所以强烈建议您在设计过程中使用。以下是模板内容帧编辑区域的屏幕截图,我曾经使用用于格式化方式的辅助线。截图辅助线是辅助线横向x轴分别描述它们的位置和作用:

  辅助线的第1条用于分隔左边距区域中的内容,例如,我通常用于留空为20像素,该辅助线的辅助线是中心合理导轨,先前介绍的标准模板设计宽度为375px ,使用该辅助线的辅助线来划分右页边空白区域的内容,如与左作为空白为20像素的权利,该辅助线的辅助线被用来划分设计区域中的内容,诸如的宽度一个标准的设计模板是375px,该辅助线的位置PX;

  使用这些辅助线的只作为参考,可以根据自己的需要创建一个相应的辅助线。当鼠标光标移动到刻度的顶部,并在编辑区域的左侧的区域,按住鼠标左键并拖动到编辑区域,则可以产生辅助线x轴的横向或纵向y轴然后拖动到相应的辅助线的位置,以。有辅助线的特性,当它接近拖动元件,该元件将自动对齐对齐,以实现快速的结果辅助线边缘。

  选择提示动态面板的状态右键单击并选择复制状态可以快速创建新的提示。推荐命名建议每个相应的状态,这样便于后续管理。使用基本技巧上的光,请参阅前面的介绍内容。

  吐司提示的显示非常简单的方式,仅需要加入的相互作用比相应的事件元素。提示对应于面板的动态状态的第一集合,然后设置动态显示面板,有一个渐进的动画显示。

  自动显示该提示后逐渐隐藏在3秒后烤面包,相互作用的模板已在提示板显示动态事件加入,并且不需要单独的一组。

  上面的截图是比较常见的模式窗口弹性层的效果,被添加到交互元件的上述布置上的相应的事件。此外,根据所述模式窗口,操作面板,这几种不同类型的弹性层弹出方式的,并且应被设置为向上滑动弹出面板时的动画显示逐步。

  最后,介绍一下如何实现互动效应滚动导航栏的时候自动切换内容区域。首先,需要在对应的状态的导航栏创建动态面板,然后选择动态内容框架板,在其滚动时,根据被添加有上述格式来确定的条件相应的事件。

  在这种布置中使用一个主题设置详细条件确定和功能,请参阅上述条件。其原理是,当所述帧的含量大于垂直滚动条的高度被提供的导航面板70时被设置在垂直滚动条70中的帧的内容的高度尺寸时动态显示状态2,导航面板是一种动态显示状态1。其使用该。scrollY功能是获得一个线性电流滚动元件的高度,也可以根据自己的需要来提供的值70。

  那么,这股基础上引入了基本的模板原型移动终端设备的这种方法。最后,提供源文件iPhoneX而iPhone8样机原型模板下载,你可以在本文的相关介绍,使用相结合。

  最后给高端移动图书馆分享我完成一组设计,该组件库相关的元素可以在这个模板被复用,后续将不断优化和完善,有需要的朋友可以有点。

  人人都是产品经理(产品的经理,在学习,交流,共享平台的核心业务,集媒体,培训,招聘,社会作为一个整体,全方位服务的产品和运营商,成立8年举办网上+期间,+场线,大会,大会20+业务领域的产品经理,覆盖广州,深圳上海,杭州,成都等15个城市的北部,在业内具有较高的知名度和影响力。平台汇集了众多知名互联网公司的产品总监和运营总监BAT降至360美团京东小米网易,在那里他们分享知识,人才招聘与您一起成长。

相关阅读
  • 2019-7-19Galaxy Tab 4 Advanced规格曝光

    昨天上午8以下。0英寸Galaxy Tab的S3获得国内入网许可证之后,今天的网络已经暴露的Galaxy Tab 4高级的...

  • 2019-7-19Galaxy S8玩《王者荣耀》类游

    很多人说,华而不实的全屏幕的手机,我想说,他是不是在玩游戏。全屏幕手机带来的不仅是震撼的...

  • 2019-7-19Galaxy Tab S2确认9月3日登陆美

    上个月末,三星正式推出8.0/9.7英寸的Galaxy Tab S2片剂,配备了更强大的性能的Exynos 5433处理器集成4 1...

友情链接:

观音心经 大悲咒经文 佛经

|营销策划|销售技巧|市场公关|品牌营销|网络推广|

苏ICP备18043316号    互联网时代网版权所有    网站地图