主页 > 引资期刊 >网站、App的介面设计工具,相关工作者Demo必备! >

网站、App的介面设计工具,相关工作者Demo必备!

时间: 2020-07-30 浏览量:648

随着iPhone、iPad越来越受欢迎,相信已经有许多朋友想加入开发者,或是App规划设计这个行列。

就好像盖房子一样,构思一个网站或App,最先决的并不是外观与配色,而是它的使用者介面,以及使用流程架构。就好像房子需要先有地基,才能砌墙与上漆。

那幺一开始需要怎幺做呢?当然是要先有好的规划工具啰!

虽然电脑端已经有一些好用的工具可以使用,但是有的时候创意发想总是发生在随时随地,或者是在一些有浓浓咖啡香的地方,iMockups For iPad提供了非常方便的工具,让这些点子与创意可以随手在iPad上一一架构、演练。

网站、App的介面设计工具,相关工作者Demo必备!

操作介面 

一开始我们会进入管理专案的目录页面,在这里我们可以「创建新专案」,「分享专案」、「複製专案」、「删除专案」。

网站、App的介面设计工具,相关工作者Demo必备!

点进去任一专案,可以看到主要操作介面。左侧为专案内页,可以在多个页面中切换;右侧为介面设置区,里面有各种构成的物件,包含网站、iPhone、iPad等主题。点一下左上方的「专案」,可以回到目录页面。

网站、App的介面设计工具,相关工作者Demo必备!

右上方的「编辑」,可以让我们直接「剪下」、「複製」、「贴上」单一物件。以两指可以进行画面的缩放,而按下「重设比例」,可以让画面比例回复到100%比例检视。

网站、App的介面设计工具,相关工作者Demo必备!

右上方的工具,可以提供一些软体操作的提示,也可以切换介面主题,或是转档输出等。特别的是转出单页时,可以选择PNG与BMML档案格式,转出专案时则输出成JPG或iMockups专用格式,方便其他装置开启。

网站、App的介面设计工具,相关工作者Demo必备!

让我们先试试看做一个iPhone App的介面。在右侧选择iPhone/iPad的主题页面,点一下iPhone的图示,可以将其放置在页面上。

网站、App的介面设计工具,相关工作者Demo必备!

接下来我们可以加入「工具列」、「地图」、「选项钮」。

网站、App的介面设计工具,相关工作者Demo必备!

将它们排列在一起,点选元件可以调整大小,并进行「剪下」、「複製」、「删除」、「群组」等动作。

网站、App的介面设计工具,相关工作者Demo必备!

网站、App的介面设计工具,相关工作者Demo必备!

设定群组,我们必须先点一下空白处,选择「Select All」;选取所有的物件后,选择「群组」,便能将画面中这个物件群组做移动。但注意不能调整群组物件的放大缩小,不然会整个画面跑掉,而且还无法复原喔!冏

网站、App的介面设计工具,相关工作者Demo必备!

单点个别物件两下,或是选取后按下右上方的「i」钮,即能针对此物件的属性做调整。包含尺寸、里面的文字、文字大小,图层等。

网站、App的介面设计工具,相关工作者Demo必备!

在设定按钮时,我们可以发现设定内文处,有逗点将各个项目隔开。

在此逗点的数量便决定了按钮的数量,範例图中,我们需要设定三个按钮,因此便将三个功能用逗点分开,达到分隔的效果。

设定完后,还可以利用「标籤」选项来设定要将哪个选项反白,显示被选取。

网站、App的介面设计工具,相关工作者Demo必备!

左上方的「还原」与「重做」可以在做错的时候调整,或是重新回复。但有的时候会有无法作用的时候,要特别注意!

製作动作页面

了解基本的介绍后,我们就来尝试完成一个小型的专案。这个iPhone App有三个功能页,分别代表「主目录」、「图片」、「关于」。我们要设定一个流程,让使用者可以透过iMockups模拟出按下按钮可以切换各个页面的流程。

网站、App的介面设计工具,相关工作者Demo必备!

先将按钮设定好,因为按钮是产生动作的最大要素。在这个页面中,我们要设定三个按钮,个别取名为:主目录、图片、关于(文字框内不要有逗号),将大小调整107。

网站、App的介面设计工具,相关工作者Demo必备!

将它们排列好后。将左侧选单叫出,点一下第一页,会出现流程页面选单。

按两次「重複」,就能产生共三个有iPhone介面的流程页面。若想删除多余的页面,可以选择「删除」,若要调整整体页面大小,可以选择「画布尺寸」。

在这边我们先做好三个页面,等等可以来做细部调整与整合。

网站、App的介面设计工具,相关工作者Demo必备!

第一页:

首先将标题名称改为:主目录-地图。(这边大家可以自由发挥创意喔!)

将下面的「主目录」按钮框,设为另一种颜色。

网站、App的介面设计工具,相关工作者Demo必备!

设定「图片」按钮属性,将其连结至第二页。

以同样的方式,将「关于」按钮连结至第三页。

网站、App的介面设计工具,相关工作者Demo必备!

第二页:

将标题名称改为:图片。

将中间的地图置换成图片。在属性里选择「置入图片」,便能于相机胶卷内选择图片。

将「图片」按钮框设定为另一种颜色,表示现在处在此页面中。

设定「主目录」按钮属性,连结至第一页。

设定「关于」按钮,连结至第三页。

网站、App的介面设计工具,相关工作者Demo必备!

第三页:

将标题名称改为:关于。

将中间的地图删除,并加入大标题、文章等文字方块,并在下面设定一个按钮。将按钮上的文字改为「E-mail to me!」。

这样看起来就有点像是作者的介绍页面了,使用者还可以按钮寄发E-mail呢!

别忘了将「关于」按钮框设定为另一种颜色。并设立按钮连结。

播放流程

网站、App的介面设计工具,相关工作者Demo必备!

按下右上方的播放键,就可以开始模拟的动作流程。

网站、App的介面设计工具,相关工作者Demo必备!

开始流程后,只要按下按钮,就可以跳到刚才连结的页面。这个时候就可以看到我们App运作的流程有没有问题,或是哪个页面设计有出错等。

网站、App的介面设计工具,相关工作者Demo必备!

我们也可以贴上一些附注或便条纸,来加强这个介面的一些说明。若是跟对方讨论,也可以请对方加入一些看法,再寄回给自己,这样子就一目了然了!

规划网站与App也是一门学问, 透过在iPad上的简单操作, iMockups让使用者介面更容易架构,也更方便沟通讨论。App与网站规划、行销运用、视觉设计等等运用,都可以利用iMockups,随时随地发展创意、简报内容,是一款不可多得的好工具喔!

如果觉得本篇文章对您有帮助,请看一下您感兴趣的工商资讯,iapplanet感谢您的支持!
[[[AD]]]

上一篇: 下一篇:
相关推荐
乐百家登录网址_注册送300体验金的网址|影视领域|潮流爱看|网站地图 月博怡宝老虎机游戏网址_宝盈bbin客户端 巴黎人blr下载_bv韦德体育手机端下载 库博体育主页_金州娱乐app下载 腾耀2注册登录_众发娱乐会员登录下载 新濠天地视讯电子_ag旗舰厅推荐凯发送68 元宝娱乐优惠中心_大神娱乐app 体育平台送彩金_在线游戏app久赢 永信贵宾会app下载_真人平台苹果版app下载 金沙9170app下载_lovebet爱博体育下载ios 凯撒皇宫游戏网址_大卫娱乐下载平台