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
    评论
Element UI 中,上传图片排序可以通过以下步骤实现: 1. 使用 `el-upload` 组件来创建上传图片的区域,设置 `multiple` 属性以支持多图上传。 ```html <el-upload class="upload-demo" action="/upload" :on-success="handleUploadSuccess" :before-upload="beforeUpload" :limit="3" :multiple="true" > <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> ``` 2. 在 `handleUploadSuccess` 方法中,将上传成功的图片保存到一个数组中,以便进行排序操作。 ```javascript data() { return { uploadedImages: [], // 存放上传成功的图片 }; }, methods: { handleUploadSuccess(response, file, fileList) { // 处理上传成功的逻辑 this.uploadedImages = fileList.map(file => file.raw); }, } ``` 3. 在页面上展示已上传的图片,并提供排序功能。 ```html <el-image v-for="(image, index) in uploadedImages" :key="index" :src="URL.createObjectURL(image)" fit="contain" style="width: 100px; height: 100px; margin-right: 10px;" > </el-image> <el-button type="primary" @click="sortImages">排序</el-button> ``` 4. 实现 `sortImages` 方法来对已上传的图片进行排序。 ```javascript methods: { sortImages() { this.uploadedImages.sort((a, b) => { // 根据需要的排序逻辑进行排序 // 示例:按文件大小排序 return a.size - b.size; }); }, } ``` 通过以上步骤,你可以在 Element UI 中实现上传图片排序功能。请注意,这只是一个示例,你可以根据自己的需求调整排序逻辑。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值