element ui 图片控件 排序_【学习笔记】UI的这些设计基础你都知道吗？

对于想入行移动端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-

-----精选推送-----