<kbd id='MyvLism2tzkDlxJ'></kbd><address id='MyvLism2tzkDlxJ'><style id='MyvLism2tzkDlxJ'></style></address><button id='MyvLism2tzkDlxJ'></button>

        慧网天下-移动站_Axure中基于设模板的移动端原型设计方式(附IPhoneX和IPhone8

        日期:2019-08-09 / 人气: / 来源:

        文章作者[zuòzhě]分享[fēnxiǎng]了一种基于设模板的移动端原型设计方式,信赖能够对你的原型设计事情带来扶助,值得[zhíde]马克。

        在哄骗[shǐyòng]Axure设计移动端原型的方面,我总结。出了两种的方式。种是更在移动端举行演示的设计方式,人人参考我之前[zhīqián]已经分享[fēnxiǎng]过的一篇教程:哄骗[shǐyòng]Axure打造。的移动端原型教程,哄骗[shǐyòng]这种方式输出的原型在手机。设上举行演示时到达跟APP的展示。结果及体验[tǐyàn]。在本日[jīntiān]我将分享[fēnxiǎng]一种基于设模板的移动端原型设计方式。

        是基于设模板的移动端原型设计方式?简而言之在Axure的编辑界面中放置的机型模板,使输出的原型到达更和的演示结果。着实这是一种很的移动端原型的设计方式,偕行在设计原型的时刻也都用过。这篇分享[fēnxiǎng]教程将对个设计方式举行了总结。和梳理,并基于方式建造[zhìzuò]了一套可复用的模板。这套模板具有[jùyǒu]几个方面的特点:

        ● 布局化,按照APP界面布局举行搭建;
        ● 尺度化,十分利便举行编辑和维护;
        ● 高保真,可还原移动端结果;

        在本篇分享[fēnxiǎng]的末端我会提供模板的Axure源文件下载[xiàzài],个中包括了最新的IPhoneX和IPhone8等多套IOS设机型,以及的界面元素[yuánsù]和结果。在开始。的介绍之前[zhīqián],人人审查哄骗[shǐyòng]这套模板还原IOS中两款的设计演示。

        IOS11 AppStroe For iPhoneX 原型演示

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

        演示地点:

        IOS11 Contacts For iPhone8 原型演示

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

        演示地点:保藏.html

        1.界面元素[yuánsù]和布局介绍

        因为这套模板是基于IOS体系举行设计的,以是界面元素[yuánsù]和方法均以IOS为尺度。今朝主流[zhǔliú]的移动端体系除了IOS另有Android,这两种体系设计尺度和方法着实是存在。差别的,不过今朝市面上APP在设计时并没有争对两种体系做的处置。

        以是假如没有特珠需求的话,我们也只必要输出一套原型方案就了,不过设计进程中必要只管兼顾这两个主流[zhǔliú]的体系。固然,假如你的产物必要凭据Android的体系来设计,你也参照本教程设计一套Android的原型模板,方法参照Android版的指南[zhǐnán]。

        在开始。介绍模板的搭建和哄骗[shǐyòng]方式之前[zhīqián],必要先对APP的界面布局做一个简朴的介绍,了界面布局利便我们后续的设计。APP的界面由元素[yuánsù]或组件构成:

        StatusBar / 状态栏

        状态栏显示设的信息[xìnxī],包括设模子或收集提供商、收集信号[xìnhào]强度。、电池哄骗[shǐyòng]量、时间等。在特别界面中对状态栏做隐蔽处置,或按照必要自界说状态栏后台。

        NavBar / 导航。栏

        导航。栏位于[wèiyú]app内容[nèiróng]区的上方[shàngfāng],体系状态栏的下方,而且提供在页面中的导航。能力。可在导航。栏中显示视图的问题,假如问题十分冗长且无法精简,空白,制止用的元素[yuánsù]填满导航。栏。导航。栏中添加笔墨和图标控件,控件的可点击必要大于控件的可视巨细。

        Body / 内容[nèiróng]区

        内容[nèiróng]按照必要举行自界说设计,的设计情势。有菜单列表、图标列表、卡片列表、图文等。

        TabBar / 标签栏

        标签栏位于[wèiyú]APP底部,利便用户在差异。成果模块之间举行切换[qiēhuàn]。标签栏用作APP的一级分类[fēnlèi],数目节制在3-5个之间。发起哄骗[shǐyòng]Badge举行提醒,让用户知道有内容[nèiróng]更新。

        Toolbar / 对象栏

        对象栏会泛起在视图的的底部,提供户可操作的成果按纽。如,邮件法式里的收件箱栏中有删除[shānchú]、分享[fēnxiǎng]、回复等等。

        Modal / 弹出层

        移动端的弹出层按照弹出方法差异。,共分为[fēnwéi]模态窗口、行动面板、弹出头板等几种差其余范例。在哄骗[shǐyòng]中,可按照界面的方法选择的范例。

        Toast / 轻提醒

        一种轻量级反馈提醒,用来显示不会[búhuì]打断。用户操作的内容[nèiróng],适实用于页面转场、数据的等场景中。一次只显示一个轻提醒,有图标的提醒字数。为4-6个,没有图标的轻提醒字数。高出14个。

        TableView / 列表视图

        列表视图是移动端APP中一种的界面元素[yuánsù]。法式在水平上,都有哄骗[shǐyòng]表视图来显示数据列表。的比方IOS的接洽人中接洽人信息[xìnxī]列表,另有Mail中哄骗[shǐyòng]列表视图显示邮箱和邮件。列表视图不单用来显示文本数据,也用来出现图像数据。

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

        是豆瓣APP的一个界面截图示例,界面的布局用颜色举行了区分[qūfēn],从上至下划分[huáfēn]为:状态栏、导航。栏、内容[nèiróng]区、标签栏。

        2.布局化的模板搭建

        在介绍完APP的界面布局之后[zhīhòu],接下来[xiàlái]说明模板的搭建方式。在本篇教程的末端会提供了已经建造[zhìzuò]好的模板的文件,人人可载[xiàzài]并参考本部门介绍举行哄骗[shǐyòng],也参照介绍建造[zhìzuò]本身的原型模板。

        在建造[zhìzuò]模板时必要用到的机型设的图片素材,通过Dribbble等设计分享[fēnxiǎng]平台。找到的素材文件,然后对素材做简朴的处置。处置的进程起首是去掉的元素[yuánsù],只保存机型设的框架图片。还必要对图片的尺寸。举行调解,比方在建造[zhìzuò]手机。等移动端模板时我们将内容[nèiróng]定为375px,必要按照所定的内容[nèiróng]对图片的尺寸。举行响应的调解。

        为模板的内容[nèiróng]是375px?题目我在上篇教程中举行过介绍,以是不再举行睁开说明。可是必要记取的尺寸。是一个的尺度,后续在设计进程中元件[yuánjiàn]的宽度尺寸。都必要参照尺度。机型设的图片素材准好之后[zhīhòu],我们在Axure中创立一个的母版,然后将机型设图片拖入到母版中。母版的名称按该机型设的名称定名,在哄骗[shǐyòng]时在新建的页面中拖入该母版即可。

        下一步必要创立介绍过的APP界面中元素[yuánsù]或组件,起首人人看这张图片中已经创立好的模板,个中包括了机型母版、轻提醒、弹层、导航。栏、标签栏、内容[nèiróng]框架等元素[yuánsù]。

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

        作者:慧网天下-移动站