2024年5月13日发(作者：湖人惨败太阳26分)

竭诚为您提供优质文档/双击可除

app图标规范

篇一：app图标尺寸

在iphone960pxx640px分辨率中图标显示尺寸

114pxx114px20像素的圆角

4像素的90度黑色投影2像素的90度白色内投影默认

自带的高光

在iphone480pxx320px分辨率中图标显示尺寸

57pxx57px10像素的圆角

2像素的90度黑色投影1像素的90度白色内投影默认

自带的高光

在ipad1024pxx768px分辨率中图标显示尺寸

72pxx72px13像素的圆角

2像素的90度黑色投影1像素的90度白色内投影默认

自带的高光

android屏幕图标尺寸规范android屏幕图标尺寸规范

1.程序启动图标：

1 13

ldpi(120dpi)

小屏

mdpi(160dpi)

中屏

hdpi(240dpi)

大屏

xhdpi(320dpi)

特大屏

36x36px

48x48px

72x72px

96x96px

2.底部菜单图标

1.大屏:

1.完整图片（红色）:72x72px

2.图标（蓝色）:48x48px

3.图标外边框（粉色）:44x44px

1.中屏:

1.完整图片:48x48px

2.图标:32x32px

3.图标外边框:30x30px

1.小屏:

2 13

1.完整图片:36x36px

2.图标:24x24px

3.图标外边框:22x22px

3.弹出对话框顶部图标lowdensityscreen(ldpi)小屏

mediumdensityscreen(mdpi)中屏

highdensityscreen(hdpi)大屏

24x24px

32x32px

48x48px

4.长列表内部列表项图标lowdensityscreen(ldpi)小

屏

mediumdensityscreen(mdpi)中屏

highdensityscreen(hdpi)大屏

24x24px

32x32px

48x48px

5.底部或顶部tab标签图标

1.大屏(hdpi)screens:

1.完整图片（红色）:48x48px

2.图标（蓝色）:42x42px

1.中屏(mdpi)screens:

1.完整图片:32x32px

3 13

2.图标:28x28px

1.小屏(ldpi)screens:

1.完整图片:24x24px

2.图标:22x22px

6.底部状态栏图标

ldpi(120dpi)

小屏

mdpi(160dpi)

中屏

hdpi(240dpi)

大屏

xhdpi(320dpi)特大屏18x18px24x24px36x36px48x48px

篇二：app-ui规范

app-ui设计规范

——0.1版本

1.设计尺寸及像素

作图的时候尽量用形状工具画矢量图，方便后期图片尺

寸的变更及切图。

现在主流尺寸如下：android

480×800、720×1280、1080×1920ios

iphone:320×480、640×960、640×1136、750×1334、

1080×1920

4 13

ipad:1024×768、2048×1536

像素：72像素/英寸

尺寸：第一版效果图建议使用尺寸750×1334，能适用

大部分尺寸，并且在iphone6plus中显示也较为清晰，切图

后文件大小也适中，应用的内存消耗也不会过高。后期再配

合程序员根据不同尺寸切相应版本的图片。

2.设计要素

a.布局

android开发中最麻烦的问题之一就是屏幕适配的问题，

硬件厂商太多，屏幕尺寸太多。一个好的应用应该尽可能多

的适配更

多的屏幕。ui设计过程中就应该考虑到屏幕变宽、变高、

变窄、变短的过程中ui应该如何适配。

b.界面

风格：首先无论什么风格，一定要统一，不能一会扁平

化，一会拟物。

颜色：配色一定要协调，内容与背景色的对比度一定要

适度，设计一定要考虑到使用环境，如在阳光下。如果对比

度不够的话那么在强光的环境下就不好用了，背景和内容就

融为一体了，很难分辨。

c.按钮

图片点击尺寸不要太小，至少要大于一个手指的宽度，

5 13

提高点击命中率，否则会有“点击不灵敏”的感觉，当然并

不是真正的不灵敏，而是没有点中操作的区域。(用户可不

管这些理由，多为用户考虑哦)。

对于Radiobutton、checkbox至少应该出2个状态的图：

正常、选中。最好3个图：正常、点击、选中。如果没有点

击的过程，会造成“响应迟钝”的感觉，因为毕竟在点击状

态没有换图。d.动画

使用动画进行界面的过度让人感觉更柔和、亲近。有时

一些简单的动画会给你的应用增色不少。

e.对话框

尤其是网页中都会有很多的对话框，久而久之人们对对

话框也就产生了反感（至少我是这么认为的），能以更好的

方式做提示的情况下就尽量避免用对话框，非用不可的情况

下那么建议一个界面不超过两处。老是弹对话框的应用，最

终弹走的是用户。

3.切图

1、和客户端的技术沟通好，用不同的框架来实现的时

候，图会有不一样的切法。例如tabbar是连背景一起切还

是单独把icon做成背景透明的，文字是放在图里还是后面

加字。

2、有一些小的icon式按钮，不能只切到icon边缘，

而是要考虑到最终实现的时候，是把这个图片做成按钮，和

6 13

用户交互。所以必须要多留一些透明的边，让能点击的图片

在88×88以上，这样用户才保证比较好点到。

3、如果可以用png24就不用png32，如果可以用png8

就不用png32。

4、对于不改变可见图形而又需要加大点击区域的图。

那么切图的时候建议在可见图形的四周都加上1像素的透明，

这是为了放大拉伸而不产生可见区域的图像失真。

5、切图的高度。

6、切图的宽度。

7、:是安卓开发里面的一种特殊的图片，这种格

式的图片通过adt自带的编辑工具生成，使用九宫格切分的

方法，使图片支持在android环境下的自适应展示。

4.命名

基本上app的切图可分为下面几大类：

背景、按钮、图示、图片、照片、tabbaricon等。

为了让切图便於管理，通常会依图片性质命名。例如

bg_、btn_、img_、pic_、

tab_。

当图档要做给Retina萤幕使用时，只要在副档名前加

上「@2x」就可以了。如bg_xxx@、btn_xxx@、

icon_xxx@。

按钮命名:

7 13