Android与iOS视觉规范教程.docx

Android与iOS视觉规范 2016-09-07 狂奔小米粒 设计中的拿来主义 ……………… 刚出道米粒一枚，数据显示Android市场占比越来越大，我却死磕iOS这样以后怎么立足射击圈 于是查阅大量资料 看到这个数据心里暗自欢喜（国产手机崛起） 在我接触UI设计到现在近两年的时间里身边的学哥学姐总是对我说按照iOS规范出图就可以 （没有主见说啥是啥……） 于是乎……Android规范差点被我遗弃掉 近期恶补规范，将其总结如下 ? ? Android规范 ?安卓中dp为距离单位、sb为字号单位 1.界面尺寸 ?（在安卓中，系统密度为160dpi的中密度手机屏幕为基准屏幕） 320*480 ? ? ? ? ? ? 1dp=1px 480*800 ? ? ? ? ? ? 1dp=1.5px 720*1280 ? ? ? ? ? 1dp=2px 1080*1920 ? ? ? ? 1dp=3px?? ?Idpi : mdpi : hdpi : xhdpi : xxhdpi = 3 : 4 : 6 : 8 : 12 2.界面元素尺寸 (在Android中高度可用程序自定义无严格要求） 状态栏：50px 导航栏：120px 标签栏：120px 图标大小：96*96px but…………状态栏高度+导航栏高度=128px 3.字体 字号 (sp与px尺寸换算和dp与px换算一样 ? ? 例如：320px中 ?1px=1dp=1sp、720px中 ? 1dp=2px=2sp）?Android：英文字体 Roboto ? ? ? ? ? ? ? ? ?中文字体 droid sans fallback (谷歌自己的字体 ?近似方正兰亭细黑） 字体大小没有严格标准（可以截个字体显示舒服的页面直接拖到设计软件里比对字体大小） 常用4种字号：40px ? ?32px ? ?28px ? ?24px ? (20sp ?16sp ?14sp ?12sp) 注意啦~ 若是设计稿以px为单位，在后期标注时一定要告知程序猿们当前标注的密度他们需要进行换算 例如：xhdpi ? ? 1dp=2px=2sp ? ? ? ? ? ? ? ? ? ? ? iOS规范 1.界面尺寸? 界面四元素：? 状态栏（status bar） ? ? ? ? ? ? ? ? ? ? ? 导航栏（navigation） ? ? ? ? ? ? ? ? ? ? ? 主菜单栏（submenu） ? ? ? ? ? ? ? ? ? ? ? 内容区域（content） 2.图标尺寸 3.字体字号 ios：英文字体 ?HelveticaNeue ? ? ? ? 中文字体 ?Heiti SC ?(黑体-简） 字体大小没有严格标准（可以截个字体显示舒服的页面直接拖到设计软件里比对字体大小） 常用4种字号：40px ? ?32px ? ?28px ? ?24px ? (iOS中字体不建议小于22px) ………………………… ?? ? ? ? ?? 往???设计稿出来后界面设计么有什么问题还是会被退回来从新修改 界面设计没有问题的前提下一定要注意一些细节 不然辛苦一大顿结果还是………………继续改、改、改 ? ? ? ? ? ? ?? 颜色标示规范 iOS开发可以根据色值换算出颜色，但Android开发有时根据RGB换算颜色，所以建议两种标示方式都表示出来 效果展示如下图~ ? ? ?? ?? 切图命名规范 有一种痛叫做图切完了名字取乱套了！ 设计时采用高分辨率设备来制作，切图的时候我们通常需要给程序猿两套图 在原设计稿中出题套，再保存一次50%的图以供网络状态不佳时使用 命名规则： 模块_类别_功能_状态.png 例如： nav_button_search_default.png（导航_按钮_有哪些信誉好的足球投注网站_默认.png）