ui,icon的基本规范

ui,icon的基本规范篇一：ui 设计规范命名规则 模块_类别_功能_状态.pngnav_button_search_导航_按钮_搜索_默认.png search 搜索 bg 背景 selected 按钮状态（选中） button 按钮 nav导航栏 disabled 按钮状态（不可点击） tab 菜单栏 icon 图标 default 按钮状态（默认） bg 背景 personal tada 个人资料 presses 按钮状态（按下） user 用户 pop 弹出 back 返回 refresh 刷新 delete 删除 eidt 编辑 image 图片 download 下载 content 内容 banner 广告 login 登陆 left right center左右中 registered 注册 title 标题 msg 提示信息 link 链接 note 注释 logo 标志 icon 制作： iOS120px：Icon_120 80px: Icon_small_40 58px: Icon_small 114px: Icon 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） idpi 240*320 mdpi 320*480 1 hdpi 480*800 xhdpi 720*800 xxhdpi1080*1920 Android 的图标尺寸 屏幕尺寸 启动图标 操作栏上下文 320*480px 48*48px 32*32px 16*16px 480*800px 480*854px 72*72px 48*48px 24*24px640*960px 720*1280px 48*48dp 32*32dp 16*16dp 1080*1920 144*144px 96*96px 48*48px 比率 rate（750px） 系统通知 最细笔画24*24px 2px 36*36px 3px 24*24dp 2dp 72*72px 6px iPhone 图标尺寸 设备 AppStore 程序应用 状态栏 spotlight搜索标签栏(工具栏)导航栏 6p 1024*1024px180*180 54px 87*87 146（66）132 （160px） （物理 60px） 6 1024*1024px120*120 54px 58*58 98 （44）98 5 1024*1024px114*114 40px 58*58 98 （44） 98 4 1024*1024px114*114 40px 58*58 98 （44）98 3 515*512px 57*5720px 29*29 49 （44）44 （80px） 点击区域 点击区域大于 44pxretain屏幕大于 88px 字体大小 上的英文字体：HeiveticaNeue 中文：mac 下是 黑体-简 win 下 华文黑体 Ios 长文本 （可接受）26px（见小值）30px（舒适值）32px34px 双数 短文本 （可接受）28px（见小值）30px（舒适值）32px 注释 （可接受）24px（见小值）24px（舒适值）28px 手机上的字体：Droid sans fallback Android 高分辨率长文本 （可接受）21px（见小值）24px（舒适值）27px（480*800） 短文本 （可接受）21px（见小值）24px（舒适值）27px 注释 （可接受）18px（见小值）18px（舒适值）21px Android 低分辨率长文本 （可接受）14px（见小值）16px（舒适值）1820px（320*480） 短文本 （可接受）14px（见小值）14px（舒适值）18px 注释 （可接受）12px（见小值）12px（舒适值）1416px 篇二：APP 界面 UI设计规范UI 设计规范 一、APP 界面设计规范 （一）界面尺寸 1、IOS 界面尺寸：常见为（宽度 640px、高度1136px） 2、Android 界面尺寸：常见为（宽度 720px、高度1280px） 其他尺寸：ldpi（240*320） 、mdpi（320*480） 、hdpi（480*800） 3、Web Mobile尺寸：常见为（宽度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 列表高度：默认为 Droidsans fallback （八）字号 字号通常按照标题及征文级别递减为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 篇三：UI 设计基础-icon 图标设计UI 设计基础-icon 图标设计 我们今天来说一下基于布尔运算下怎么绘画设计一些 icon图标，作为新手我们起初不应该起点太高，先不用自己设计图标，我们可以在网上找一下大师设计的图标进行临摹，等我们熟练掌握技巧以后再开始自己设计。 我们用网上的一张 icon来做事例: 就拿这张图片中的第一个小图标来演示 首先第一步:分析图标: 如图表示,图标放大后实际上是分为了两层,里边是一层外边一层,里边相对的比较简单,是一个圆环,不过在细节上我们要注意,里边的这个圆环在端口处是圆角,而不是有楞的边,外边的图形相对复杂一些,我们可以看成半圆环与正方形的结合.这里我们要注意的:在我们设计 icon的时候要先确定它的边的像素,如这个临摹图就是 4像素的. 下面我们来说一下如何临摹 一,外图绘制 1,确定整体大小 我们可以看得出来,这个 icon实际上是一个圆形如图所示 :我们查看它的信息,可以看到这个圆形的大小是 44乘 44的像素,这样我们就可以开始自己的临摹了. 2,画外图层 如图我们画一个 44*44像素的圆:然后外层图形的宽当初我们看了是 4像素,那么我们就可以再做一个小圆,让大圆与小圆之间的宽为 4像素. 当会出外图层大致轮廓后,我们知道,最开始外图层是由几个半圆环和矩形组成的,同样是查看半圆信息,其实是直径为 22像素的圆,所以我们就可以先画出一个直径为22像素的圆.然后同样的步骤我们再在这个圆形当中做一个小圆,两个圆形的差距为 4像素,最终的图形结果如图所示 3,确定位置 我们看临摹的原图,查看信息可以看出,上下两个圆的圆心是在一条直线上的,然后就是打圆环与小圆环之间的距离,他们其实是没有距离的,然后在布尔运算中,我们知道,这两个圆环其实应该是一个图层,下面我们就把这两个圆环的图层合并,得出来的效果图就是这样的. 4,完成图形这个时候为了保证图形的规范我们要用到辅助线,下面是一个圆形了,我们看原图是有 6个圆形的,下面我们可以用这种方法:首先将小圆的圆心移动到大圆圆心处,然后以最新的圆心为远点复制出六个圆,效果图如下.然后把没用的部分切掉,就成了最终的图形了 .二,内图绘制 绘制步骤跟外图一样,做一个圆环如图所示 :然后就是缺口处的圆形切口,我们可以先用矩形工具绘制一个三角