如何设计规范的原型图
作者:暂无发布时间:暂无

1.原型图的【设计规范】是直接针对我们产品输出的一个设计源头,明确了解原型图的【交互过程】、【根源】、每个界面的【功能点】所在,在做产品最终【视觉设计稿】时,会有更高层次的把控【能力】和产品提升【思维】。



2.【基础规范】的作用如下图,比如PS中的【快捷键】是为了我们在工作中更快的出图,提升工作效率。



3.原型图的【常规尺寸】如下图,它的原始尺寸是【750*1334】PX,考虑绘制的便利,大多开发人员使用小屏幕笔记本,所以当前尺寸是原始尺寸除以2得到的【375*670】PX,对于【安卓】系统个别页面,尺寸是【375*670】PX乘以1.5,针对内容、图标单独乘以1.5倍。



4.原型图的【组件尺寸】如下图,状态栏、顶部导航栏、底部导航栏最大宽度为【375】PX,状态栏、顶部导航栏、底部导航栏高度分别为【20、44、49】PX,是原始高度除以2得到的。



5.原型图的【对齐性】:会使页面【规整】,不会误导设计师思维;原型图的【亲密性】:即【格式塔原理】,指相关内容属性的归为一个【组件】,在位置距离上也应该相近,不同内容属性的位置距离上应该远一些;原型图的【对比重复性】:使页面组织信息明了、层级分明,突出重点。



6.【细节规范】的作用如下图。



7.原型图的【字体与模块】:原型图的模块背景或元素,一般采用【黑白灰】三个色值,避免用色干扰,【加粗、加深】字体突出重点信息,使设计师快速通过页面了解整个元素的【层级】。



8.原型图的【字体类型与大小】:【微软雅黑】字体是系统自带的,而且是【无衬线】字体,【识别度】较高,【字号】依据页面具体的元素层级设定最小限度是【12】PX,但在实际输出稿中是【24】PX。



9.原型图的【根本目的】如下图,原型图可大大省去产品与用户之间的一个【损耗】过程,利用原型交互稿进行用户【测试】,发现不足、改正,这样做出的产品就比较贴合用户市场。


点击观看视频教程
如何设计规范的原型图
初级练习16637人已学视频时长:20:12
立即学习
特别声明:以上文章内容仅代表作者本人观点,不代表虎课网观点或立场。如有关于作品内容、版权或其它问题请与虎课网联系。
500+精品图书
20G学习素材
10000+实用笔刷
持续更新设计模板
立即领取

下载虎课APP

随时随地学技能
APP更方便
每天免费学课程
下载虎课网APP
随时随地学海量会员教程
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了37,196
并提交了227份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证