前端设计中ui,icon的基本规范

UI和Icon的基本规范包括以下方面：

1. 准确性：设计图标时，应选择使用AI工业标准矢量插画软件，并采用矢量图而非位图，以确保图标在放大时不会模糊或出现像素块。使用AI制图既可以保证精准度，也能确保清晰度。
2. 留位：在制作图标时，应预留一定的空间，以防止图标在具体应用时边缘被切割掉。这样可以避免图标规整不一，同时也能为设计留下进退的余地。例如，利用1024*1024的画板进行制作时，可以在边缘预留64像素的位置。
3. 韵律系统：点、线、圆角、三角等元素的使用，应遵循一定的规范。例如，圆角的规格以8的倍数为原则，常用的分别是8、16、32等两倍数关系；尺寸的选择会保持16倍数的原则来进行；点的设计选择都是以80、96、112、128来设计，特殊尺寸可以按照16的倍数进行延伸。
4. 审美统一：在多个图标中共享同样的设计要素，如都是圆形或方形的角，角的具体尺寸（2像素、4像素等）、一致的线的粗细（2像素、4像素等）、风格（面、线、填充的线、字形）、颜色等等。审美统一可以让设计看起来整体感更强。
5. 辨识性：在图标设计上，可以将特色和自然两块融合。例如，通过图形的定义将72像素的圆角调整至32像素可以在视觉上令图标看起来更坚硬和理性。

以上是UI和Icon设计中的一些基本规范，当然也可以根据实际的设计需求来进行适当的调整。

　　篇一：ui设计规范

　　命名规则

　　模块_类别_功能_状态.pngnav_button_search_default.png导航_按钮_搜索_默认.png

　　search搜索bg背景selected按钮状态（选中）

　　button按钮nav导航栏disabled按钮状态（不可点击）

　　tab菜单栏icon图标default按钮状态（默认）

　　bg背景personaltada个人资料presses按钮状态（按下）

　　user用户pop弹出back返回

　　refresh刷新delete删除eidt编辑

　　image图片download下载content内容

　　banner广告login登陆leftrightcenter左右中

　　registered注册title标题msg提示信息

　　link链接note注释logo标志

　　icon制作：

　　ios120px：icon_120@2x.png

　　80px:icon_small_40@2x.png

　　58px:icon_small@2x.png

　　114px:icon@2x.png

　　android：36*36px：drawable-ldpi

　　48*48px：drawable-mdpi

　　72*72px：drawable-hdpi

　　96*96px：drawable-xhdpi

　　android安卓系统dp/sp/px换算

　　名称分辨率比率rate（320px）比率rate（640px）

　　idpi240*3200.750.375

　　mdpi320*48010.5

　　hdpi480*8001.50.75

　　xhdpi720*8002.251.125

　　xxhdpi1080*19203.3751.6875

　　android的图标尺寸

　　屏幕尺寸启动图标操作栏上下文

　　320*480px48*48px32*32px16*16px

　　480*800px

　　480*854px72*72px48*48px24*24px640*960px

　　720*1280px48*48dp32*32dp16*16dp

　　1080*1920xx4*144px96*96px48*48px

　　比率rate（750px）0.320.42670.641.0241.5系统通知最细笔画24*24px2px36*36px3px24*24dp2dp72*72px6px

　　iphone图标尺寸

　　设备appstore程序应用状态栏spotlight搜索标签栏(工具栏)导航栏

　　6p1024*1024px180*18054px87*87146（66）132

　　（160px）（物理60px）

　　61024*1024px120*12054px58*5898（44）98

　　51024*1024px114*11440px58*5898（44）98

　　41024*1024px114*11440px58*5898（44）98

　　3515*512px57*5720px29*2949（44）44（80px）

　　点击区域

　　点击区域大于44pxretain屏幕大于88px

　　字体大小

　　1.iphone上的英文字体：heiveticaneue中文：mac下是黑体-简win下华文黑体

　　ios长文本（可接受）26px（见小值）30px（舒适值）32px~34px双数

　　短文本（可接受）28px（见小值）30px（舒适值）32px

　　注释（可接受）24px（见小值）24px（舒适值）28px

　　2.android手机上的字体：droidsansfallback

　　android高分辨率长文本（可接受）21px（见小值）24px（舒适值）27px（480*800）

　　短文本（可接受）21px（见小值）24px（舒适值）27px

　　注释（可接受）18px（见小值）18px（舒适值）21px

　　android低分辨率长文本（可接受）14px（见小值）16px（舒适值）18~20px（320*480）

　　短文本（可接受）14px（见小值）14px（舒适值）18px

　　注释（可接受）12px（见小值）12px（舒适值）14~16px

　　篇二：app界面ui设计规范

　　ui设计规范

　　一、app界面设计规范

　　（一）界面尺寸

　　1、ios界面尺寸：常见为（宽度640px、高度1136px）

　　2、android界面尺寸：常见为（宽度720px、高度1280px）

　　其他尺寸：ldpi（240*320）、mdpi（320*480）、hdpi（480*800）3、webmobile尺寸：常见为（宽度640px、高度960px）

　　（二）导航尺寸

　　1、ios导航尺寸：高度60px，留白7px

　　2、android导航尺寸：高度64px或48px，留白8px

　　（三）标签尺寸

　　1、ios标签尺寸：高度98px

　　2、android标签尺寸：高度96px

　　（四）工具栏尺寸

　　1、ios工具栏尺寸：高度88px

　　2、android工具栏(ui,icon的基本规范)尺寸：高度96px

　　（五）列表高度

　　1、ios列表高度：高度88px

　　2、android列表高度：高度96px

　　（六）资源状态

　　对于资源通常设计弹起、点击、点击后、不可用四种状态，通常弹起、点击、点击后用不同颜色表示、不可用状态用低度灰色表示。

　　（七）字体

　　1、ios默认英文为helveticalneue，中文为黑体

　　2、android列表高度：默认为droidsansfallback

　　（八）字号

　　字号通常按照标题及征文级别递减为42、36、34、30、24

　　（九）icon

　　1、ios常用尺寸有1024*1024、512*512、120*120、60*60

　　2、android常用尺寸有512*512、200*200、72*72、48*48

　　（十）资源插图

　　1、长方形插图高度一般不超过背景宽度的二分之一

　　2、缩略图两张并列高度一般不超过200px，宽度要适中有留白

　　3、图文混排中图片一般不高过150*110