不要问我为什么是这些尺寸,用上之后专业人士看你的文档就会感觉你很专业
总体框架尺寸:750*1334px
接下里介绍框架内依次的元素尺寸
状态栏(最顶层的系统显示条):750*40px
导航栏(状态栏下面那一栏,一般用于防止返回按钮、搜索框等等,程序代码中actionbar、titlebar的放置位置):750*88px
标签栏尺寸(最底层用于切换页面用,一般不超过五个):750*98px
工具栏(详情页面中的点赞、评论、转发形成的工具栏):750*88px
搜索栏(单独将搜索置于一个页面的导航栏时):宽度自定义,高度88px
筛选栏(搜索栏下面用于缩小范围达到提升搜索精准率目的新增的一栏):宽度自定义,高度60-88px
字体、间距、等规范
简介:
页面字体大小:
导航栏:中间标题:36px/42px、两侧(返回或更多)字体32px
标签栏(底部菜单):20-24px,一般取中间值22px
内容:大标题:36px、标注:24px、正文30px
新闻类顶部导航切换:30px,选中为40px
图文列表间距尺寸:
表格式列表:上下30px、左右20px
子页面导航点击列表:左侧一般会放置图标一个,图标的左右间距35px,右侧一般会有箭头会图标、左右30px
常用图标尺寸:
不同位置的图标使用尺寸不一
标签栏常用图标尺寸: 48*48px,如图标不是正方形,则用空白补充,保证可点击区域不小于48*48px
其他的可以自己截图市场上的app,导入ps进行测量得出,方法就是这样的。
参考ios ui kit,能够让你的开发工程师不那么头疼,做的一些无厘头的交互和一些无厘头的功能入口位置,会让整个ui脱离系统初衷,使用户体验减分。一直听到有人问我说,到底设计师要不要懂得开发原理,这样更好的做设计、能动当然是最好的,但是需要时间成本,如果能够将ui kit 理解得当,增加工程师与设计师之间的沟通是最好的工作方式。