app原型设计

app是我们每天都会使用到的,手机上众多的app都会有各种各样的作用,app原型设计首先需要打开ps软件,然后将上期设计的文件导入到其中,接着选择一个画板,使用软件中的工具向下复制并修改像素,更改颜色,更改完成以后需要让其与参考线对齐,下一步就是拖入我们所需要的图标,并将其居中对齐,然后调整间距,下面让我们来详细的了解一下关于科技节海报设计app原型设计的知识介绍吧!

1、本期我们进行第一个大的模块:专题模块的设计;打开PS,将上期设计的文件导入进来;选择一个画板,按住【Alt+Shift】键向下复制,并修改名称为【专题】;新建宽度750像素,高度98像素的矩形,放置在最底部并修改颜色;向上【复制】矩形,并将高度改为1像素,更改颜色并与参考线对齐,【拖入】所需图标。


2、将图标居中对齐,并调整好与顶部的间距;并【输入】相关文字,文字大小为20像素,修改文字的颜色;将文字与图标居中对齐,并调整好它们之间的间距。


3、【拖入】背景;更改顶部的文字内容,使用【直线工具】绘制线条,调整成渐变的效果,并更改文字的颜色。


4、【拖入】图片素材,并居中对齐,并调整好与导航栏之间的间距,在移动间距的时候:按下上/下/左/右键移动的位置是一个像素,如果加上Shift键,按一下就是十个像素的距离。


5、 继续【拖入】图片,并对齐,【Ctrl+T】按住Alt+Shift键缩小。


6、将调整好的图片,放置在右面并调整好图片的间距:向左按两下,再按住Shift键向左按三下。


7、将图片拖入【主题】组里,就可以隐藏不需要的部分。


8、【复制】2画板,并调更换好图片;需要注意的是中间的专题,两边都有提示,第一个专题前面就没有提示,最后一个专题后面没有提示。


9、如何快速的更换图片:选择好需要更换的图片,右键【替换内容】,就会弹出文件夹,选好图片就可以替换了。


10、【复制】画板,删除不要的部分,【拖入】图片,【复制】直线,修改直线的长度,居中对齐,放在所需位置。


11、选择【矩形工具】绘制宽度750像素,高度420像素的矩形,并对齐。


12、将填充颜色改为渐变,渐变的颜色全调为黑色,前面的不透明改为56%,后面的不透明度改为0%。


13、拖入所需的图标,并对齐;【拖入】文字与【指针】。


14、文字的大小是28像素,与横切线间距是30像素。


15、指针间的间距是16像素,圆的大小是12像素;将第一个圆的颜色改为白色。


16、选择好画板,按住【Alt+Shift】键向下复制;删除不需要的部分,修改文字内容及图标。


17、拖入所需的图片,与左边界的间距是75像素,与顶部的间距是16像素。


18、输入商品的信息,修改文字的大小;文字与图片的间距是12像素。


19、拖入所需的图标,并修改图标的颜色,并在图标后面输入数字,也就是喜欢的人数;图标与顶部文字间距是20像素,并居中对齐。


20、复制图片,并调整好间距。


21、继续向下【复制】图片,距离心型图标的间距为40像素。


22、全部修改好的效果。


 

 


1.本课主要内容如图示。


2.【打开】Axure 软件,【新建】文档。具体效果如图示。



3.单击【页面面板】,单击【新建】文件夹,【单击】元件库,【选择】默认元件。【拖入】素材文档,右击【组合】,右击【转换为母板】,并【重命名】。具体显示如图示。


4.单击【母板】,右击母板图层【固定位置】,拖入母板至画面。【拖入】素材文档,按Shift键等比缩放至合适的大小。具体效果如图示。


5.单击【元件库】,使用【矩形框工具】在母板上拖出矩形框,调整大小,放置合适的位置。【拖动】左上角倒三角箭头转换圆角。使用【文字工具】,在框内输入文字。具体效果如图示。


6.【单击】搜索框对象,调整至合适的大小,单击【样式】,【边框颜色】和【文字颜色】调整为灰色。具体效果如图示。


7.【拖入】搜索关联的素材,放置搜索栏合适的位置。【拖入】文字标签,输入内容,排列至合适的位置。具体效果如图示。


8.使用【矩形工具】绘制合适大小的矩形框,调整边框和颜色,排列至版面合适的位置。具体效果如图示。


9.【选择】三级标题标签,拖入画面,输入标题内容,排列至版式合适的位置。具体效果如图示。


10.【拖入】占位符元件,调整大小,排列至合适的位置。具体效果如图示。


11.【拖入】文字标签元件,输入文字内容。【选择】关联的元件对象,垂直居中对齐。按Alt键【移动复制】,排列至版面合适的位置。具体效果如图示。


12.【复制】标题文字元件,【修改】文字内容。使用【矩形工具】绘制矩形,调整大小,排列至版面合适的位置。使用【文字工具】输入文字,排列至版面合适的位置。具体效果如图示。


13.使用【矩形工具】绘制矩形,调整大小,排列至底部合适的位置。【拖入】准备好的关联素材元件,排列至底部合适的位置,依次添加【文字标签】,输入对应的文字内容。具体效果如图示。


14.【选择】底部关联元件对象,右击【创建母板】,具体参数如图示。


15.【拖入】母板页面,使用【矩形工具】绘制矩形,调整大小。调整图层顺序,修改矩形颜色和透明度。具体效果如图示。


16.【拖入】播放ICON图标,放置矩形上方合适的位置。【拖入】二级标题元件,输入文字,【拖入】段文字元件,放置合适的位置。具体效果如图示。


17.【打开】首页,【选择】矩形框元件,单击属性面板【链接】至详情页面。单击【播放按钮】。具体呈现效果如图示。


18.【打开】详情页面,【拖入】返回ICON按钮,【缩放】至合适的大小,排列至版式合适的位置。单击【属性面板】,链接至首页。具体效果如图示。


19.本课内容小结如图示。




1.根据案例讲解,了解Axyre软件的主要设计功能,具体如图所示。



2.打开软件XD,了解APP原型案例设计,具体如图所示。



3.根据案例讲解,了解APP原型案例结构,创建【iphoneX】画板,具体如图所示。



4.在画布顶部创建【宽:44】的矩形,在组件库中添加【电池条】到矩形中,具体如图所示。



5.根据案例讲解,了解讲师制作的组件库,具体如图所示。



6.根据素材案例讲解,添加讲师制作的组件库中的【导航栏】,修改【文字内容】,具体如图所示。



7.根据素材案例讲解,了解做APP原型模块的规划,具体如图所示。





1.打开【XD】创建一个iPhoneX的画布,然后【圆角矩形工具】画出搜索框,输入文字【如图所示】。



2.继续输入文字信息,【矩形工具】画出矩形,对当前页面进行一个字体颜色的处理,并在下方画出一个小的矩形线【如图所示】。



3.填充矩形颜色,然后输入文字信息,在下方画出一个矩形填充一个浅一点的颜色作为分割线,同样在下方输入文字然后画出一个小的矩形【如图所示】。



4.【圆角矩形工具】画出圆角矩形,然后在矩形内输入文字信息,【圆形工具】画小圆,然后输入数字,复制一层放在下方,然后再画出三个矩形平均排列【如图所示】。



5.输入文字信息,然后在下方拖入按钮素材,修改相应的按钮名称【如图所示】。



6.另一个页面呢,我们只需要修改一下页面的排版,对文字信息进行相应的处理就可以了【如图所示】。




7.其实页面在制作的时候没有我们想象的那么复杂,我们只要有耐心,然后在细节上稍微认真一下,就可以了,在制作原型的时候可以先把图标的部分用一个形状或者色块去代替,不要直接就把图标或者图片啊拖拽进来,这样可以大大提高我们的效率。




1.我们先按照正常的软件页面显示流程将制作好的原型排列好,然后选中第一个页面连接到第二个页面,调整交互选项【如图所示】。



2.然后根据页面中按钮的不同功能连接到相应的页面中去,调整好交互效果选项【如图所示】。



3.继续用相同的方法将所有的按钮进行相应页面的连接【如图所示】。



4.这里要注意一下,在点击返回按钮的时候要设置为【上一个】画板,这样在点击的时候它就会跳转到之前的页面中去了【如图所示】。



5.如果页面的内容很长的话,我们可以通过左侧的手柄来调整页面的长度,比如屏幕长度为812,我们就把手柄移动到812的位置,然后继续往下来添加页面内容就可以了【如图所示】。



6.我们选中当前所有的页面,然后点击左上角【文件】按钮,选择【导出】,【蓝湖】,【如图所示】。



7.选择导出之后呢,我们直接选择【当前选中的画板】,然后点击【上传到蓝湖】,【如图所示】。



8.导出之后我们打开浏览器,然后打开我们刚才上传的文件,在这里可以直接对页面进行连接,直观的的表达出进行每个点击操作之后会显示哪一个页面【如图所示】。



9.我们可以双击一个页面,然后点击左侧操作栏的【圆形】,然后画出一个区域,接着将这个区域和右侧的页面进行连接,这样就可以做出点击之后自动跳转到相应页面的效果了【如图所示】。



10.在这里我们可以对每一个版块或者按钮进行相应的页面连接【如图所示】。



11.在【Sketch】里我么也可以做出这种效果,比如说新建两个画布,然后让画布1连接到画布2,我们可以选中画布1,然后点击右侧操作栏的【PROTOTYPING】,然后将两个页面进行连接就可以了【如图所示】。





索引

用UI设计个人中心模块原型设计

【Axure】视频APP低保真原型设计

APP原型UI设计1

APP原型UI设计2

UI设计中初学制作交互原型

相关百科

相关知识

相关教程

特惠
充值
7折购
奖励今日继续学的你折扣券已到账
7
折扣券可用于
年费分类SVIP
立 即
使 用
有效期:000000
手机版
虎课桌面客户端
置顶播放器,边看边学习
虎课移动APP
支持离线缓存,随时随地学习
领福利
微信扫码即领2020年全新素材包
建议意见
官方客服

官方客服

您可以与在线客服进行沟通或者拨打客服热线获得帮助

客服热线:400-862-9191工作日:9:30-18:30

在线咨询:联系客服工作日:9:00-22:00

节假日:9:00-18:00

虎课积分
免费学习54000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了225,526
并提交了3,454份作业!
登录后立即学习!
loading
微信扫码关注即可登录
登录后立即学习!
手机号
验证码
立即登录
您需要同意协议才可以进行登录
已连续签到0
第一天
5个虎课币
第二天
10个虎课币
第三天
15个虎课币
第四天
20个虎课币
第五天
40个虎课币
第六天
20个虎课币
第七天
20个虎课币
立即签到
已签到
每周一重置签到奖励
已连续签到0
本周斩获110个虎课币,下周也要来哦
我知道了
已连续签到0
哎呀,签到失败了!
再次签到
哎呀,系统出现错误,请稍后重试!
恭喜!签到成功,获得 10 个虎课币
上上签 ·21August.2018
尽管眼下十分艰难,可日后这段经历说不定就会开花结果
— 唐代文学家 韩愈
训练营坚持完成打卡任务 报名费全额返更多>>
直播公开课学员好评率95%以上更多>>
全站54000+课程免费学!昨日已有53112位学员免费领取~点我领取