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

09e76f924faa83c3592fa2a8553a4643.png

对于想入行移动端UI设计师的小伙伴们来说,对于UI的基础认知可能会有一些模糊,导致不知道从何下手。今天总结了UI设计当中的切图命名和规范以及尺寸规范(iOS)。

一、切图命名规范

1、常见界面、控件、功能、状态命名集合:

是对产品经理、设计师、开发工程师以及H5前端开发人员都可以记住的文件命名规范。

界面命名

46a0d815262f5a57795432c7264e4306.png

系统控件库

25af5385c0f9b7beb7f1fd9053425908.png

功能命名

d3d2ff8912e1dd66bcbc5f839e473fe6.png

资源类型

9008969f7542662e1ebe74b622238bc5.png

常见状态

15e55d45561002bfa0259f04650164f4.png

位置排序

0edb486fd10fb16cfe3c4b9a30393ca8.png

2、以iOS为范例(安卓通用)的切片文件命名规范如下

813ea1a2dedfc848ddcfdb86ccc314a9.png

dc17345324d437613d3a3465f8e8ef39.png

5a4fb95f0de1c4d21e512f9b4cfc91b6.png

二、界面设计基础规范——iOS

1、字体使用规范

中文字体:PingFang SC

英文字体:SF UI Text 、SF UI Display

(其中SF UI Text适用小于19pt的文字,SF UI Display适用于大于20pt的文字)

c8aa575de2d16e526852d768401d8b58.png

6fea4a5d9b678df232a60cc8db06ead3.png

7e72d96fd25f835ac5baf04d9da5d5cd.png

2、点和像素 Points(pt)和Pixels(px)

这里要说一下很多刚开始的小伙伴一直把这两个弄混。iOS 开发中用到的单位 pt 是独立像素的意思,它是绝对长度,不随屏幕像素密度变化而变化(和我们日常用到的毫米、厘米是一个意思,只是它要小得多),在非视网膜的 iPhone 上(iPhone 3G),苹果规定 1px=1pt,也就是说 pt 和像素点是一一对应的。但随着 iPhone 4 的到来,高分屏出现了(视网膜屏),这个时候 1pt 对应 2px。所以用固定长度 pt 作为开发单位的好处是:这样可以统一图形在同一种类不同型号设备上图形的大小。而如果用像素作为单位的话,就乱了套了,因为在不同像素密度的屏幕里面,像素本身大小是不一样的。所以小伙伴们这两个单位不要弄混咯。

624ee42489976dde5a43ace7e0e89ab0.png

3、图标Icon

应用图标app icon

ce653ac3cd6c77aa251d6ff1a5aeb967.png

a0b058ccc6cfe444a19b6df7582854f6.png

905054fc934ea559544b05df03ee685b.png

4、分辨率和显示规格 Resolutions and Display

996db25f872ced18aab0618d60f28a2a.png

3810ed9133a4f68befddd3d39fcfe97d.png

5、配色

a2701eb96272f6ede993ab40358d85c2.png

总结:

很多时候UI的工作输出后是开发工程师提供参考的,因此最好和开发工程师进行沟通,了解他们的工作方式,标注完成之后宣讲你的注意事项,以更快捷高效的完成工作,并且最大限度的完成视觉稿的还原。

推荐一个超级实用的网站:http://www.qijishow.com/

我在这篇文章也提到过UI设计师超级实用的5个网站,记得收藏哦~

-END-

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

ec8abf39e6b2120687571369108b7ea3.png

4f466d4f9179e7c8e15fd12e99b9c7bc.png

7a4197736f6eb242e351b915c70477db.png

046e7d8d57ca6d879c94f3c13cf1bd6d.png

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值