多语言展示
当前在线:429今日阅读:126今日分享:42

Axure实战002:APP原型设计思路

在做APP原型设计时,我们需要先对项目的整体结构规划清晰,最好能先画个思维导图将整个模型的框架结构整理出来,Xmind就是一款不错的思维导图工具,操作简单效率高。
工具/原料

Axure

方法/步骤
1

规划好框架结构并整理好需要的相关素材和数据我们就可以开始着手绘制原型了,这里我用的是母版的设计思路来完成的,首先我们先规划好框架,手机的屏幕大小不一这里我们选用比较中等的尺寸比例即可,iPhone4s的屏幕尺寸是:640*960px,用这个尺寸做已经足够了,19寸的屏幕要全屏显示才能看全。

2

导航栏以一般3-5个菜单即可,少了觉得太空,多了又很挤, 我比较喜欢4个栏位,美观大气,我们可以发现每个页面的状态栏和导航栏都是不变的,唯一改变的就是当前的状态,而内容区域则是动态扩张的,跟随内容的多少自动改变的,所以内容区域我们就需要用到可调节大小的动态面板来设计了。

3

制作方法:再内容区域 新增一个动态面板A,大小和给定的内容区一样大,然后将其“属性”中的“滚动条”显示出来-“自动显示垂直滚动条”,然后双击动态面板A,在面板管理中添加页面,再新增页面中再添加一个动态面板B,我们把内容放在动态面板B中即可。

4

状态栏和导航栏的设计和交互我们可以都放在母版中进行设计,当我们点击相应的图标时将其颜色点亮,首先我们先在图标和文字中的属性中将选中时的状态设计好,这里我们把选中时的状态设置为蓝色(默认黑色)。

5

然后在图标和图标和文件上加上一层矩形框,设置为透明,添加交互事件, 当鼠标点击时我们将图标和文字的状态改为选中状态,这样就可以触发我们之前设计好的交互样式,再浏览器中预览就可以得到下图的效果了。

6

内容区我建议页也用母版的形式进行设计,把一些页面之间的交互方式放在动态面板中去实现,这样在修改的时候会发现方便了许多,不会被多层次干扰到,然后再在动态面板B中将每个母版添加到页面中,并设计交互事件即可。

推荐信息