APP原型实战



效果总览


我们以麦子学院的APP为例,首先我们来看看麦子学院的APP界面


PM1.png 



绘制步骤


1.确定手机原型的宽度(320像素)和高度(480像素或者560像素)并拉出参考线定位绘制区域,有时候为了好看,可以拿一个手机的模型套,例如:


PM2.png 

 

2.绘制页头(用矩形部件填充颜色)


PM3.png 

 

3.在页头加上“课程中心”和搜索图标


PM4.png 

 

4.用矩形部件拉出一大小合适的矩形做banner图,去掉矩形的边框

 

PM5.png 

 

5.填充矩形的颜色,加上注释说明并加上两个小矩形

 

 PM6.png

 

6.使用矩形部件并设置圆角半径绘制课程图标

 

PM7.png 

 

7.复制组件并平均分布

 

PM8.png 

 

8.用矩形部件绘制列表并填充颜色

 

PM9.png 


9.添加文字图标注释说明并更改次要信息的透明度

 

PM10.png 

 

10.复制组件

PM11.png 

 

11.绘制底部导航(矩形部件---右键转换为动态面板)


PM12.png 

 

12.在动态面板中绘制底部导航(注意调整图标和文字的大小比例)


PM13.png 

 

13.因为课程中心,麦子圈,我的分别会跳转到一个页面,所以先新建这三个页面

 

PM14.png 

 

14.设置事件


PM15.png 

 

15.设置动作


PM16.png 

 

16.以同样的方法分别设置“麦子圈”和“我的”链接

 

17.因为中间列表是可以滑动的,所以我们将所有元素设置为动态面板进行管理

 

18.对动态面板进行交互设置

 

PM17.png 

19.因为底部的导航是固定的,所以将底部导航固定到浏览器


PM18.png 

 

【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 www.tttoutiao.net
蜀ICP备13014270号-4 Version 5.0.0 release20160127

免费领取价值1888元求职宝典!

客服热线 400-862-8862

回到顶部

幸运飞艇官网 欢乐生肖 澳洲幸运10开奖结果 快乐赛车平台 优优彩票APP 河北快3基本走势 极速快乐8 澳洲幸运10开奖结果 玖玖棋牌app 幸运飞艇官网