对于想入行移动端UI设计师的小伙伴们来说,对于UI的基础认知可能会有一些模糊,导致不知道从何下手。今天总结了UI设计当中的切图命名和规范以及尺寸规范(iOS)。
一、切图命名规范
1、常见界面、控件、功能、状态命名集合:
是对产品经理、设计师、开发工程师以及H5前端开发人员都可以记住的文件命名规范。
界面命名
系统控件库
功能命名
资源类型
常见状态
位置排序
2、以iOS为范例(安卓通用)的切片文件命名规范如下
二、界面设计基础规范——iOS
1、字体使用规范
中文字体:PingFang SC
英文字体:SF UI Text 、SF UI Display
(其中SF UI Text适用小于19pt的文字,SF UI Display适用于大于20pt的文字)
2、点和像素 Points(pt)和Pixels(px)
这里要说一下很多刚开始的小伙伴一直把这两个弄混。iOS 开发中用到的单位 pt 是独立像素的意思,它是绝对长度,不随屏幕像素密度变化而变化(和我们日常用到的毫米、厘米是一个意思,只是它要小得多),在非视网膜的 iPhone 上(iPhone 3G),苹果规定 1px=1pt,也就是说 pt 和像素点是一一对应的。但随着 iPhone 4 的到来,高分屏出现了(视网膜屏),这个时候 1pt 对应 2px。所以用固定长度 pt 作为开发单位的好处是:这样可以统一图形在同一种类不同型号设备上图形的大小。而如果用像素作为单位的话,就乱了套了,因为在不同像素密度的屏幕里面,像素本身大小是不一样的。所以小伙伴们这两个单位不要弄混咯。
3、图标Icon
应用图标app icon
4、分辨率和显示规格 Resolutions and Display
5、配色
总结:
很多时候UI的工作输出后是开发工程师提供参考的,因此最好和开发工程师进行沟通,了解他们的工作方式,标注完成之后宣讲你的注意事项,以更快捷高效的完成工作,并且最大限度的完成视觉稿的还原。
推荐一个超级实用的网站:http://www.qijishow.com/
我在这篇文章也提到过UI设计师超级实用的5个网站,记得收藏哦~
-END-
-----精选推送-----