切图与设计相关

前端设计规范指南
最新推荐文章于 2025-07-23 15:09:12 发布
转载 最新推荐文章于 2025-07-23 15:09:12 发布 · 54 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://yq.aliyun.com/articles/563811

本文介绍了一套前端设计规范，包括设计稿提供标准、切图前的准备工作、元素布局建议及颜色使用技巧等内容。

  1. 设计稿尽量提供偶数

  2. 切图之前预先定义好标准(常用标签的样式,公用样式)

  3. 上下文元素之间尽量保持同级

  4. 更新不频繁的使用背景图片(logo)

  5. 先做需求确定部分内容(头/尾部)

  6. 设置颜色尽量不使用英文,使用色码时多用3位,少用6位

  7. 本文转自  素颜猪  51CTO博客，原文链接:http://blog.51cto.com/suyanzhu/1878191

精选资源
一款APP，从设计稿到切图
02-26
依旧声明：这里写的不是一种规范，只是一种工作方法，大家在具体工作中，一定要灵活运用。另外，技术的更新是非常快的，我写的这些可能某些东西已经和你们的工程师搭档所用的方法不...完善的公司会把项目相关人员聚集起
网页设计及切图规范
11-21
网页布局设计相关内容，颜色设计，设计及切图规范。常用技巧包括图片装饰（圆角，外发光，阴影，透明度 渐变，旋转，透视，等）。切图时注意事项， 图片格式选择等。
关于web切图你需要知道的几件事情
xiaheader
04-24 3024
前言 相对于程序来说，切图门槛很低，只要有一些ps基础，摸索个五分钟基本也就了解各大概。但是就跟其他的所有技能一样，切图也是有很多技巧性和经验在里面的，这些东西可以让你的切图工作更有效率，更有目的性。本文希望把我几年做切图的心得整理归纳一下，希望对各位前端，程序员，设计师有所帮助。 说明 笔者用photoshop cs5做示例，不同版本功能会有稍许差异。 第一部分：一些快捷键 相
UI设计切图规范
weixin_51686423的博客
11-10 1751
　　移动UI设计切图是UI设计师最重要的设计输出物，切图资源输出是否规范直接影响到工程师对设计效果的还原度。设计师的切图输出物是是体现一个设计师专业水准的重要标准，同时也是设计师表达自己对设计态度的最有力的语言。合适、精准的切图可以最大限度的还原设计图，起到事半功倍的效果。如何输出具有全局把控和细节专注的高段位切图，应该是所有设计师一直需要追求的能力。 　　设计切图的原则 　　设计切图输出的目的是跟下游的工程师团队协同工作，那么在团队协作过程中首先应该保证切图输出能够满足工程师设计效果图的高保真还原的需
h5页面如何切图_切图与CSS入门
weixin_39953244的博客
12-21 1014
不会CSS的后端不是好的程序猿JS 对于后端小伙伴来说不算难点，能够顺手的使用，涉及到 CSS 就会有点懵逼了。为了让后端同事更愉快的玩转 CSS，做一个好的切图仔，下面我将讲一些如何提升自己的 CSS 技巧，帮助后端同事快速还原 PSD。前端页面的书写顺序先看设计稿编写 HTML 代码编写 CSS 代码编写 JS 代码今天我们主要关注编写 CSS 代码，在写 CSS 代码时，我们需要从PSD中拿...
图像处理与切图软件：设计师和开发者的必备工具
weixin_30600615的博客
05-22 949
切图软件是图像处理领域中不可或缺的一部分，它主要提供给设计师、开发者快速而精确地从大型图片中切割出所需部分的能力。本章节将从基础功能出发，带领读者了解切图软件的核心作用。切图软件的基础功能通常包括图片的裁剪、分割、旋转等操作。这些功能使用户能够根据实际需要，精确地提取图像中的特定部分。例如，网站设计师会利用这些功能，从一个完整的网页设计图中提取出各个独立的图片元素，以用于网站的构建。图像裁剪与缩放是图像处理软件中最基础的功能之一，它允许用户对图像进行部分选取或改变其尺寸。
UI设计怎么切图？初学者入门必读篇
设计“1+2”，摹客就够了！
09-12 2028
本文主要介绍了UI设计中切图的相关知识和规范，包括切图的概念、目的、规范、流程和工具等。切图是UI设计中的一个重要步骤，通过将开发不能直接使用代码实现的设计元素分解成不同的图形元素，以便在开发过程中能够被编程语言所识别和应用。切图不仅包括图像元素的切割，还包括不同图形元素的组合和命名，以及与图形元素的链接和注释等。切图的规范包括格式、尺寸和命名等方面，掌握相关知识可以确保开发最终的还原度。常见具有切图能力的工具有Invision、Zeplin、摹客协作、摹客DT等。
android 分辨率 切图,Android设计图（标注、切图）
weixin_31752923的博客
05-25 596
1.Android：1)Android的单位是dp2)分为ldpi/mdpi/hdpi/xhdpi/xxhdpi。3)分辨率对应DPIldpi QVGA (240×320)mdpi HVGA (320×480)hdpi WVGA (480×800),FWVGA (480×854)xhdpi 720P(1280*720)xxhdpi 1080p(1920*1080 )xxxhdpi 4K(3...
Sketch切图插件Slicer：提高设计到开发流程效率
weixin_42509513的博客
07-23 1043
在数字产品设计领域，设计师和前端开发人员之间的协作是至关重要的。为了确保设计在不同平台上的准确实现，设计工具必须提供高效、准确的切图输出能力。Sketch是一款专为UI设计打造的矢量图形编辑器，它通过提供一套完善的切图功能，极大地方便了设计师将设计元素转换成实际可用的图片资源。Slicer插件是专为Sketch设计的工具，旨在将设计稿高效转换为可直接用于开发的资源。其工作原理涉及几个关键步骤，首先，设计师在Sketch中完成设计后，插件会读取Sketch文件中的图层和图层属性。
android与ios ui切图关系,iOS、Android 开发单位换算及 UI 切图要求
weixin_34540951的博客
05-26 746
在移动端 UI 设计中，经常会用到的单位有 4 种：px、pt、dp 和 sp，很多人分辨不清这几种单位及其换算关系，以及 iOS 和 Android 的切图要求，我在这里做下简单的介绍，希望大家读完后能有所收获(如有错误，欢迎纠正)。一、常用单位1. px (像素)px 即 pixel，像素点，电子屏幕上组成图像的最基本单位，在描述屏幕分辨率时也会使用该单位。1px 表示一个像素，例如 iPho...
基于JavaScript的地质切图网页设计源码
09-23
基于JavaScript的地质切图网页设计源码是一个专注于地质领域信息展示的网络项目。该项目利用了前端技术中最为核心的JavaScript语言，配合HTML页面、CSS样式和图片资源，实现了地质切图的动态加载和展示。通过该项目...
切图切图切图切图1111
12-06
"js"标签表明这个话题与JavaScript有关。JavaScript是一种广泛使用的脚本语言，主要用于客户端的网页开发，它可以实现动态交互、表单验证、页面动画等多种功能，是现代网页不可或缺的一部分。在切图过程中，...
OneRec是一个专注于多源信息融合与知识集成的开源推荐算法库_它旨在打破数据孤岛并极大扩充推荐系统的外部世界知识_通过可插拔的模块化设计整合行为数据_包括多信号与长短期用户行为序.zip
12-04
OneRec是一个专注于多源信息融合与知识集成的开源推荐算法库_它旨在打破数据孤岛并极大扩充推荐系统的外部世界知识_通过可插拔的模块化设计整合行为数据_包括多信号与长短期用户行为序.zip
这是一个旨在构建一个开放协作结构化持续进生的社区驱动型知识库与代码资源集合中心的项目它通过GitHub平台汇聚来自全球开发者学习者及技术爱好者的多元化智慧结晶涵盖从入门.zip
12-04
这是一个旨在构建一个开放协作结构化持续进生的社区驱动型知识库与代码资源集合中心的项目它通过GitHub平台汇聚来自全球开发者学习者及技术爱好者的多元化智慧结晶涵盖从入门.zip
峰值密度聚类matlab代码-Clustering-based-density-peaks.zip
最新发布
12-04
峰值密度聚类matlab代码-Clustering--based--density--peaks.zip
（47页PPT）南京地铁集团大数据在城轨行业的应用.pptx
12-04
（47页PPT）南京地铁集团大数据在城轨行业的应用.pptx
基于Create-React-App脚手架构建的现代化React单页面应用开发入门项目_该项目详细展示了如何使用官方推荐的Create-React-App工具链快速初始化开发测.zip
12-04
基于Create-React-App脚手架构建的现代化React单页面应用开发入门项目_该项目详细展示了如何使用官方推荐的Create-React-App工具链快速初始化开发测.zip
基于MediaPipe与YOLOv5的手语视频识别系统源码实现（USTC数据集）
12-04
本资源提供一套针对手语视频进行自动识别的完整系统实现方案，该方案融合了USTC标准数据集、MediaPipe姿态估计框架以及Yolov5目标检测模型。此项目原为本科生毕业设计课题，在最终答辩环节获得了接近满分的优异评价。全部程序代码均经过充分验证与调试，保证其可顺利部署与执行，适合学习者直接获取并应用于实践。 该系统源码尤其适用于计算机科学、信息通信、智能技术及自动化等专业领域的在校学生、教师或行业技术人员参考使用。它可作为课程作业、学期项目或毕业设计的优质基础材料，具备显著的教学参考与工程借鉴意义。对于具备一定技术基础的开发者，可在现有架构上进一步调整与扩展，以适配更多样化的功能需求。 资源来源于网络分享，仅用于学习交流使用，请勿用于商业，如有侵权请联系我删除！
网页设计与切图规范：技巧与方法
本文主要介绍了网页设计和切图的相关规范，包括颜色设计、图片处理技巧以及切图时的注意事项，并提供了几种常用的图像修饰方法。 在网页设计中，颜色设计是至关重要的，它不仅影响到网站的整体视觉效果，还对用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值