2023/08/09 IOS设计规范收集

背景:绘制原型图时,不确定状态栏、标签栏、侧边margin具体怎么设置,很困惑…


iphone 界面尺寸

左边是能找到最新的设计规范,右边是auxre10自带画布尺寸显示,结合做参考
2023/08/09 IOS设计规范收集_第1张图片
2023/08/09 IOS设计规范收集_第2张图片


ios界面结构

状态栏

状态栏位于界面最上方,主要用于显示当前时间、网络状态、电池电量、SIM运营商。
2023/08/09 IOS设计规范收集_第3张图片

导航栏

导航栏位于状态栏之下,主要用于显示当前页面标题。

标签栏

标签栏通常位于界面底部,也有少部分标签栏位于状态栏之下、导航栏之上。标签栏主要包括App的几大主要板块,通常由3~5个图标及注释文字组成,例如微信标签栏内容为“微信”“通讯录”“发现”“我”4个板块,如图所示。
2023/08/09 IOS设计规范收集_第4张图片


标准页面布局

2023/08/09 IOS设计规范收集_第5张图片
T O D O 1 \color{red}{TODO1} TODO1
暂未解决:不同ip机型的状态栏高度应该设置多少?是否有设计规范?知道方法的朋友欢迎留言
T O D O 2 \color{red}{TODO2} TODO2
暂未解决:标准布局下,pt和px怎么转换,axure中设计原型尺寸应该怎么设计

边距

全局边距

单边30px
2023/08/09 IOS设计规范收集_第6张图片
可根据不同的产品设计进行调整
2023/08/09 IOS设计规范收集_第7张图片

卡片边距

页面中的卡片边距根据承载信息内容的多少来界定,通常不小于16px。
2023/08/09 IOS设计规范收集_第8张图片

− − − − − − 忽略 − − − − − − − \color{red}{------忽略-------} 忽略
暂留,全面屏之前的状态栏数据?
2023/08/09 IOS设计规范收集_第9张图片


参考链接

  1. 写得很详细,有布局形式、图片规范、各处的注意事项等
    UI小白必看!2022年iOS设计规范指南
  2. 能查到的最新iOS设计规范
    https://www.learnui.design/blog/ios-design-guidelines-templates.html#tab-bar
  3. 其他各种网站设计规范总结
    设计规范官网汇总:iOS、Material…(持续更新
  4. Apple官网
    官网:Design - Apple Developer

你可能感兴趣的:(#,理论知识,ios,设计规范)