全部新闻提供最新行业动态,分享前沿设计理念
超全面的UI设计规范整理,你值得收藏!
时间:2024-09-12 来源:朝夕友人 点击:

很多新人在开始做移动端UI设计的时候,往往对界面的一些尺寸规范不是十分清楚,很多时候都是凭借自己的感觉和经验去绘制界面,心里并没有一个清晰的概念,导致做出来的页面总是不那么尽如人意。

本文整理汇总了一些界面设计(iOS系统)中常用的一些尺寸规范和方法,如控件间距、适配、标注、切图等,设计师在设计时并不一定要严格遵守,但对这些规范应有所了解,并融会贯通。

目录

01.界面设计尺寸及栏高度

02.边距和间距

03.内容布局

04.界面图片设计比例

05.建立统一风格的图标

06.APP版式设计规范

07.界面文字设计规范

08.设计适配

09.切图规范

10.设计稿标注

正文

01.界面设计尺寸及栏高度

目前主流的iOS设备主要有iPhone SE(4英寸)、iPhone 6s/7/8(4.7英寸)、iPhone 6s/7/8 Plus(5.5英寸)、iPhone X(5.8英寸),它们都采用了Retina视网膜屏幕,其中iPhone 6s/7/8 Plus和iPhone X采用的是3倍率的分辨率,其他都是采用的2倍率的分辨率,无论是栏高度还是应用图标,设计师提供给开发人员的切片大小,前者始终是后者的1.5倍,并分别以@3x和@2x在文件名结尾命名,程序再根据不同分辨率自动加载@3x或者@2x的切片。

通过上面的讲解和图示我们了解了iPhone不同设备的物理尺寸,那么他们的像素分辨率又是多少呢?也就是说我们用Photoshop做设计新建画布应该设置多大呢?另外,iOS应用中的栏,包括状态栏、导航栏、标签栏、工具栏等,它们的高度又分别是多少呢?(注意:iOS严格规定了各个栏的高度,这个是必须遵守的)通过下面的表格和图示来为你解答上面的问题。

注意:在进行iphone x设计的时候我们依然可以采用熟悉的iphone 7的设计尺寸作为模板,只是高度增加了290px,设计尺寸为750*1624(@2

如果您也有此需求,欢迎咨询我们立即咨询