app设计字体规范.docx

1、app设计字体规范app设计字体规范篇一：APP设计规范文档 APP设计规范文档 注：（*本文档分辨率大小是以安卓1920x1080为准） 1. #数值 （1）*标准界边距:40PX （2）*列表左边距:40PX *列表右边距:40PX *列表上边距:40PX *列表下边距:40PX *列表左边距:40PX *列表右边距:30PX *列表上边距:30 PX *列表下边距:30PX （3）*标题字体大小: 56PX *主内容字体大小: 46PX *次级内容字体大小: 36PX *底部导航内容字体大小: 28PX 2. #颜色 （1）*主背景色:#F3F3F3 *登录页面背景色: #FaFaFa

2、*主前景色: 以APP主色调为准 *次级前景色:以设计效果图为准，具体到时候填上。 （2）*标题颜色:#FFFFFF *主内容颜色: #333333 *次内容颜色: 以设计效果图为准，具体到时候填上。*高亮内容颜色:以设计效果图为准，具体到时候填上。 （3）*列表分割线的颜色:#D9D9D9 （4）*标题字体的颜色:#545454 *主内容字体的颜色:#999999 #545454 *次级内容字体的颜色:#249FFF #DF3130 #F9A531 篇二：iOS和Android的app界面设计规范 iOS和Android的app界面设计规范 字数876阅读96439评论36喜欢344 记录一

3、下iOS和Andoird的界面设计规范，方便进行标准的产品设计，并与设计师顺畅沟通 iOS篇 界面尺寸 设备 iPhone6 plus iPhone6 iPhone5/5s/5c iPhone4/4s iPad1/2 iPad mini 分辨率 7501334 px 6401136 px 640960 px 1024768 px 1024768 px 状态栏高度 导航栏高度 标签栏高度 60px 40px 40px 40px 40px 20px 20px 132px 88px 88px 88px 88px 44px 44px 147px 98px 98px 98px 98px 49px 49p

4、x 12422208 px iPad3/4/Air/Air2/mini2 20481536 px Paste_ 图标尺寸 设备 iPhone6 plus iPhone6 iPhone5/5s/5c iPhone4/4s iPad1/2 iPad mini App Store 程序应用 主屏幕 spotlight工具栏和 标签栏 搜索 导航栏 75*75px 44*44px 75*75px 44*44px 75*75px 44*44px 25*25px 22*22px 25*25px 22*22px 1024*1024px 180*180px 144144px 8787 px 75*75px 6

5、6*66px 1024*1024px 120*120px 144144px 58*58px 1024*1024px 120*120px 144144px 58*58px 1024*1024px 120*120px 144144px 58*58px 1024*1024px 90*90px 1024*1024px 90*90px 72*72px 50*50px 72*72px 50*50px iPad3/4/Air/Air2/mini2 1024*1024px 180*180px 144144px 100*100px 50*50px 44*44px 字体 iPhone 上的字体英文为：Helvet

6、icaNeue至于中文，Mac下用的是黑体-简，Win下则为华文黑体，所有字体要用双数字号。 XX用户体验部做过一个小调查，对于app字体大小的调查结论如下： Paste_ 颜色值 IOS颜色值取 RGB各颜色的值比如某个色值，给予IOS开发的色值为 R:12 G:34 B:56 给出的值就是 12,34,56(有时也要根据开发的习惯，有时也用十六进制) 内部设计 1、所有能点击的图片不得小于44px（Retina需要88px） 2、单独存在的部件必须是双数尺寸 3、两倍图以2x作为命名后缀 4、充分考虑每个控制按钮在4中状态下的样式，如图 Paste_ Android篇 界面尺寸 状态栏高度

7、：50 px 导航栏高度：96 px 标签栏高度：96 px Android最近出的手机都几乎去掉了实体键，把功能键移到了屏幕中，当然高度也是和标签栏一样的：96 px 内容区域高度为：1038 px（1280-50-96-96=1038） 图表尺寸 屏幕大小 320480 px 480800px /480854px /540960px 7201280 px 10801920 px 启动图标 操作栏图上下文图系统通知图标 最细笔画 标 标 (白色) 不小于2 px 不小于3 px 不小于2 dp 不小于6 px 4848 px 3232 px 1616 px 2424 px 7272 px 4

8、848 px 2424 px 3636 px 4848 dp 3232 dp 1616 dp 2424 dp 144144 9696 px 4848 px 72 72 px px ps: Android设计规范中，使用的单位是dp，dp在安卓机上不同的密度转换后的px是不一样的 字体 Android 上的字体为： Droid sans fallback ，是谷歌自己的字体，与微软雅黑很像。 Android的字体大小调查结论是： Paste_ 颜色值 Android颜色值取值为十六进制的值比如一绿色的值，给开发的值为 #5bc43e 那么，为了满足自己的工作需要，我们谈谈UI设计师需要什么技能。

9、在视觉设计方面1）平面构成 2）色彩构成 3）版式设计 4）心理学 5）美术绘画 6）设计意识在交互设计方面1）了解用户体验设计、可用性原则；2）信息挖掘、用户调研、数据分析；3）良好的逻辑能力；4）心理学；5）交互设计原则、不同平台的规范；6）产品视觉感；7）沟通能力。 篇三：ios和Android APP设计规范要点 相信很多人都在开发设计APP时会遇到很多界面上的问题，要以多大尺寸来设计？分辨率是多少？该怎么切图给开发等等 下面的文字就给出一点点技巧总结，但也要给合团队在开发时的习惯。每个工程师们所使用的控件，书写布局习惯来实际移交的图是不一样的，但八九不离十，都是遵循一个原则，便捷开发

10、、自适应强的开发模式 IOS篇 一、尺寸及分辨率 iPhone界面尺寸：320*480、640*960、640*1136 iPhone6：英寸(1334750)，iPhone6 Plus：英寸(19201080) 设计图单位：像素72dpi。在设计的时候并不是每个尺寸都要做一套，尺寸按自己的手机来设计，比较方便预览效果，一般用640*960或者640*1136的尺寸来设计，现在iphone6和plus出来后有很多人会使用6的设计效果。 如果是我来做的话，我会使用6401136，对plus做单独的修改适配，因为plus的屏幕实在是大了，遵循屏大显示更多内容的原则这里本应该是需要修的了。有更好办法

11、的话希望大家可以分享一下。 Ps：作图的时候确保都是用形状工具(快捷键：U)画的，这样更方便后期的切图或者尺寸变更。 二、界面基本组成元素 iPhone的app界面一般由四个元素组成，分别是：状态栏(status bar)、导航栏(navigation)、主菜单栏(submenu)、内容区域(content)。 这里取用640*960的尺寸设计，那我们就说说在这个尺寸下这些元素的尺寸。 状态栏(status bar)：就是我们经常说的信号、运营商、电量等显示手机状态的区域，其高度为：40px 导航栏(navigation)：显示当前界面的名称，包含相应的功能或者页面间的跳转按钮，其高度为：88

12、px 主菜单栏(submenu，tab)：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：98px 内容区域(content)：展示应用提供的相应内容，整个应用中布局变更最为频繁，其高度为：734px 至于我们经常说的iPhone5/5s的640*1136的尺寸，其实就是中间的内容区域高度增加到910px。 PS：在最新的iOS7的风格中，苹果已经开始慢慢弱化状态栏的存在，将状态栏和导航栏合在了一起，但是再怎么变，尺寸高度也还是没有变的，只不过大家在设计iOS7风格的界面的时候多多注意下 三、字体大小 iPhone上的字体英文为：HelveticaNeue 。至于中文Mac下用

13、的是黑体，Win下则为华文黑体(最新字体称为黑体-简)。 下图是XX用户体验做过的一个小调查，可以看出用户可接受的文字大小。 四，切图 切图是APP设计中的一个重要过程，关系到APP的界面实现，及各种适配性还有各种性能 IOS在没6plus前，我们只需要提供两种图，普通图及视网膜屏幕图。 以6401136（640960是一样的）做的设计图的话就会好办一点。直接出设计图上的原大小图标，比如我们命名一个图片叫 ，我们给开发的图就要改变这个名字叫 img-line 就是在后缀名前加上2x表示视网膜屏的图，iPhone4的还需要把这个图尺寸按比例缩小50%，得到正真的。然后把这两个图移交给开发，iPh

14、one6的图在规范里是与5s使用的是一样的，也是2x图。有些UI则需要做适当的适配，比如拉长，拉高，这个开发会去做。 对于IPhone6 plus的话范里给出的是3x相信大家也知道是怎么回事，但如果要使用PS放大的话，大家做图的时候就需要使用形状工具来做，放大后还需要仔细微调，这里就不多做讲解 温馨提示： 在出可按的图片切图时需要注意图片的可按区域大小，有时图标很小，实际切出来的放在上面，用手指是按不到的，我们就需要对图片单独处理，拓宽图片的有效区域，这里是拓宽非放大，就是改变画布大小使图片尺寸面积扩大，使图片四周拓宽多余的透明区域 ，从而改变可按大小。 五，颜色值问题 IOS颜色值取 RGB

15、各颜色的值比如某个色值，给予IOS开发的色值为 R:12 G:34 B:56 给出的值就是 12,34,56(有时也要根据开发的习惯，有时也用十六进制)；Android开发的色值则使用十六进制 #0c2238 ANDROID篇 一、尺寸及分辨率 Android界面尺寸：480*800、720*1280、1080*1920 Android比iPhone的寸尺多了很多套，建议取用720*1280这个尺寸，这个尺寸 720*1280中显示完美，在1080*1920中看起来比较清晰，切图后的图片文件大小也适中，应用的内存消耗也不会过高。 二、界面基本组成元素 Android的app界面和iPhone的基本相同：状态栏、导航栏、主菜单、内容区域。