背景:绘制原型图时,不确定状态栏、标签栏、侧边margin具体怎么设置,很困惑…
iphone 界面尺寸
左边是能找到最新的设计规范,右边是auxre10自带画布尺寸显示,结合做参考
ios界面结构
状态栏
状态栏位于界面最上方,主要用于显示当前时间、网络状态、电池电量、SIM运营商。
导航栏
导航栏位于状态栏之下,主要用于显示当前页面标题。
标签栏
标签栏通常位于界面底部,也有少部分标签栏位于状态栏之下、导航栏之上。标签栏主要包括App的几大主要板块,通常由3~5个图标及注释文字组成,例如微信标签栏内容为“微信”“通讯录”“发现”“我”4个板块,如图所示。
标准页面布局
T
O
D
O
1
\color{red}{TODO1}
TODO1
暂未解决:不同ip机型的状态栏高度应该设置多少?是否有设计规范?知道方法的朋友欢迎留言
T
O
D
O
2
\color{red}{TODO2}
TODO2
暂未解决:标准布局下,pt和px怎么转换,axure中设计原型尺寸应该怎么设计
边距
全局边距
单边30px
可根据不同的产品设计进行调整
卡片边距
页面中的卡片边距根据承载信息内容的多少来界定,通常不小于16px。
−
−
−
−
−
−
忽略
−
−
−
−
−
−
−
\color{red}{------忽略-------}
−−−−−−忽略−−−−−−−
暂留,全面屏之前的状态栏数据?
参考链接
- 写得很详细,有布局形式、图片规范、各处的注意事项等
UI小白必看!2022年iOS设计规范指南 - 能查到的最新iOS设计规范
https://www.learnui.design/blog/ios-design-guidelines-templates.html#tab-bar - 其他各种网站设计规范总结
设计规范官网汇总:iOS、Material…(持续更新 - Apple官网
官网:Design - Apple Developer