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

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


iphone 界面尺寸

左边是能找到最新的设计规范,右边是auxre10自带画布尺寸显示,结合做参考


ip不同机型界面尺寸

ip6之前界面尺寸

ios界面结构

状态栏

状态栏位于界面最上方,主要用于显示当前时间、网络状态、电池电量、SIM运营商。


状态栏/导航栏

导航栏

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

标签栏

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


标签栏

标准页面布局

image.png

\color{red}{TODO1}
暂未解决:不同ip机型的状态栏高度应该设置多少?是否有设计规范?知道方法的朋友欢迎留言
\color{red}{TODO2}
暂未解决:标准布局下,pt和px怎么转换,axure中设计原型尺寸应该怎么设计
--在网上看到其他的尺寸,不确定这个是否有规范--
image.png


边距

全局边距

单边30px


image.png

可根据不同的产品设计进行调整


image.png

卡片边距

页面中的卡片边距根据承载信息内容的多少来界定,通常不小于16px。


image.png

\color{red}{------忽略-------}
暂留,全面屏之前的状态栏数据?

image.png


参考链接

  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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容