恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Android与iOS视觉规范
0.0°
2016-10-24 原创文章 规范/资料 举报 10707 183 77 11

~给自己总结的规范~

………………

刚出道米粒一枚,数据显示Android市场占比越来越大,我却死磕iOS这样以后怎么立足射击圈

于是查阅大量资料

Image title

看到这个数据心里暗自欢喜(国产手机崛起)

在我接触UI设计到现在近两年的时间里身边的学哥学姐总是对我说按照iOS规范出图就可以

(没有主见说啥是啥……)

于是乎……Android规范差点被我遗弃掉

近期恶补规范,将其总结如下



   

Android规范

 安卓中dp为距离单位、sp为字号单位

1.界面尺寸

 (在安卓中,系统密度为160dpi的中密度手机屏幕为基准屏幕)

320*480             1dp=1px

480*800             1dp=1.5px
720*1280           1dp=2px
1080*1920         1dp=3px

 

Image title

 Idpi : mdpi : hdpi : xhdpi : xxhdpi = 3 : 4 : 6 : 8 : 12





2.界面元素尺寸

(在Android中高度可用程序自定义无严格要求)
状态栏:50px
导航栏:120px
标签栏:120px
图标大小:96*96px
but…………状态栏高度+导航栏高度=128px

Image title



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)

Image title2.图标尺寸

Image title


3.字体字号

ios:英文字体  HelveticaNeue

        中文字体  Heiti SC  (黑体-简)
字体大小没有严格标准(可以截个字体显示舒服的页面直接拖到设计软件里比对字体大小)

常用4种字号:40px    32px    28px    24px   (iOS中字体不建议小于22px)



…………………………


           

往往设计稿出来后界面设计么有什么问题还是会被退回来从新修改

界面设计没有问题的前提下一定要注意一些细节

不然辛苦一大顿结果还是………………继续改、改、改

              

颜色标示规范


iOS开发可以根据色值换算出颜色,但Android开发有时根据RGB换算颜色,所以建议两种标示方式都表示出来

效果展示如下图~

Image title         

切图命名规范


有一种痛叫做图切完了名字取乱套了!

设计时采用高分辨率设备来制作,切图的时候我们通常需要给程序猿两套图

在原设计稿中出题套,再保存一次50%的图以供网络状态不佳时使用


命名规则:

模块_类别_功能_状态.png

例如: nav_button_search_default.png(导航_按钮_搜索_默认.png)

Image title


到这里

未完待续



更新:2016-10-24

收藏

183人已收藏

狂奔小米粒

时刻准备诈尸

  • 10

    作品

  • 47

    粉丝

  • 13

    关注

  • 线框图设计指南
  • 设计工具
  • ENJOY—— 规范
  • 设计师要懂点代码

    猜你喜欢

      2016-10-24 原创文章 规范/资料 举报 10707 183 77 11

      Android与iOS视觉规范

      0.0°

      你确定要举报Android与iOS视觉规范

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年10月11日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      77
      183
      11

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录