6.2 数字APP图标常见尺寸与设计规范
知识要点
icon图标库1.APP图标设计遵循的图标尺寸标准
2.图标(iCON)设计规范
3.按钮(Button)设计规范
课程目标
1.了解Android、ios系统图标的尺寸要求
2.了解手机APP设计规范以及对于图片采用格式
一、失之毫厘,谬以千里。在手机APP图标设计中要严格遵循图标尺寸标准
APP的图标(ICON)不仅指应用程序的启动图标,还包括状态栏、菜单栏或者是切换导航栏等位置出现的其他标识性图片,所以IOCN指的是所有这些图片的合集。由于不同设备的屏幕
密度不同,ICON也受这一密度制约。
android平台不同屏幕密度下图标的具体尺寸要求:
在低、中、高和特高密度屏幕密度中,程序主界面、启动图标和菜单栏的尺寸分别为36X3648X4872X7296X96;状态栏、列表显示、切换、标签和对话框尺寸为:24X2432X3248X4872X72 根据不同屏幕密度来确定图标的具体尺寸,才能让用户得到更好的体验。说过Android的图标。
iOS 图标,按手机、设备版本类型区分如下表
不同版本的iPhone拥有不同尺寸分辨率的屏幕,所以其图标尺寸也有所区别。APP Store中的启动图标无论哪个版本都是1024X1024;主屏幕图标1-3代为57X57,后面的为114X114;搜索图标1-3代为29X29,4-7普通版为58X58plus版为87X87;标签栏1-3代为38X38,其他为75X75;工具栏和导航栏图标1-3代为30X30,4-7普通版本为44X44plus66X66
需要提醒的是,在图标设计中请用栅格化系统进行设计。
如果设计尺寸为1024 x 1024 px,尽可能的采用黄金比例设计。能让图标得到更好的显示效果。
二、手机APP设计规范
指对整套APP界面进行视觉设计UI风格的统一,对界面元素的样式、颜、图标按钮和大
小设定统一的规范和使用原则。方便以后协调合作和APP视觉迭代。
APP界面里面的图标(iCON)设计规范
我们在绘制APP UI界面设计里面的图标,在PS里面尽可能用形状来绘制。保证图标和按钮是矢量图。切图的时候的格式都是PNG。而且是图标和按钮的尺寸大小必须为偶数。
App 里的图标还应该根据不同的功能需求设计不同的状态:如常态、选中态、点击态等。而且每一个图标除了英文的命名以为,还需要一个中文名字的备注下图标所代表的含义。让开发和其他同事看得懂。这也是我们做APP视觉规范的最终目的。当然,每一个手机APP设计师整理自己的APP图标视觉规范略有不同,但遵循的原则一致。
按照界面位置和模块来分类,可分为底部标签,顶部导航,按钮图标,界面图标,功能图标,其他图标等;按照功能模块来分类:分为功能型图标和示意型图标。
功能型图标代表可操作的某些功能,并包括默认、触摸、选中三种状态,其尺寸有56X56 40x4030X30三种。根据实际情况选用。
示意型图标用于指示无需用户操作的信息。尺寸为24X24
如图所示,红的图标都是功能型的可操作,灰如手机图标为示意型图标。
当然你也可以有自己的APP图标视觉规范规则。其目的在于自己能够清楚明白。
APP界面里面的按钮(Button)设计规范
App 里的按钮拥有 4 种属性:分別为一般、点击、不能点击、选中
按钮规范因不同功能和场景需要,设计不同的样式和颜,在尺寸上也分有:长、中、短;而且按不同手机平台长中短尺寸也注意有所不同。
常见的图标和按钮视觉设计规范信息如图:
图标中底部导航图标常态下为灰,安卓和iOS系统尺寸均为60X60,选中态为红,尺寸不变。底部标题栏常态下为白,安卓系统中尺寸为42X42,ios为30X30.点击态为灰,安卓尺寸42X42,ios为30X30.  短按钮常态为黄安卓尺寸150X70,ios为120X60,点击态为偏灰的黄,尺寸不变。中按钮常态为红,安卓尺寸为350X70,ios为320X60,点击态为偏灰的红尺寸不变。长按钮在常态和点击态下颜分别为红线框和偏灰的红线框及文字,安卓尺寸为700X70,ios为600X60,尺寸依然不变。