关于 UI设计切图，我们应该如何给开发人员

每个 UI 设计到了尾声，不可避免的会遇到一些切图上的问题，下面我就跟大家分享几个我遇到过的切图问题，希望能帮你避开一些坑，减少重复切图，减少沟通成本！

01 代码更容易实现线性渐变、径向渐变、角度渐变。网格渐变往往需要我们切图

设计中，我们通常用的渐变有：线性渐变、径向渐变、角度渐变、网格渐变。

在这当中，代码实现线性渐变、径向渐变、角度渐变相对来说要简单一些，而网格渐变则需要消耗更多的开发精力。我们也不会在这上面去增加开发工作量。

所以，在我们输出设计稿给开发的时候，有网格渐变的部分直接切给开发。

比如下面设计稿上的渐变背景色：

02 文字能不用透明度就不用透明度，直接给原始的16 进制色值

16 进制色就是在开发中设定颜色的代码，每个颜色都有对应的 16 进制色，如 #000000 是黑色，#FFFFFF 是白色。

比如我在调这个文字颜色的时候可以用 #000000 40% 的透明度，也可以直接用 #999999 这个色，这两个呈现的颜色没有任何区别。

但是交给开发写的话，第一种除了要写 #000000 的黑色之外，还要写一串 Alpha 透明值，这样做会更消耗性能，且在不同屏幕分辨率、不同操作系统下，所实现的透明效果也会有偏差。

所以，在这种非必要情况下，样式可以用不带透明度实现的话，就不要带。

03 切一整张大图，可能会发生拉伸变形或是图片被裁剪的问题

如果是一整张的切下来，会导致不同尺寸的手机把切图拉伸变形，或者会裁剪多出比例的部分。

比如我们切的这张启动页大小为 375*812 的三倍图，这张图在 iphone13 mini（375*812px）和安卓（360*640px）上等比展示就会产生不同的效果——

安卓屏就会被裁切掉一些（展示图片来自网络）。

如何保证在这种情形下，启动页的图片可以适配不同尺寸的屏幕呢？

我们可以将上下分开切，让开发分别定上面插画和logo的位置，以此保证他俩都能完整展示。

将一张图切成这两张：

设定插画距离头部是 30px，底部 logo 距离底部是 30px

这样在其他屏幕上，也是依照「插画距离头部30px，底部 logo 距离底部是 30px」这个规则来写，就能保证这张图上的所有内容不被裁切了！

04 不要将切片与 icon 贴在一起

一些初次切 icon 的同学会这么做↓

这么做会导致以下几点问题：

· 如果 icon 有 0.5 像素点，那么贴边切很可能会被裁掉一些；

· icon 的高矮长宽不一，但开发会全按一个尺寸来写，导致 icon 被拉伸或压缩；

· icon 设计规范不一致，出现各式各样的尺寸。

所以我们都会给一套的 icon 固定一个同样大小、正方形的框，以此来规避掉以上出现的问题。

05 通知icon与带数量的小红点不用切在一起

我们在做通知消息的时候右上角会有消息数量的标识：

当数字分别为个位数、十位数、99+ 时，红色底板的宽度会根据数字长短发生变换：

我们不需要每种情况的小红点都切一遍，只需要定好数字在红底里的左右间距，让开发根据数字长短做自适应即可。

所以我们提供切图只需要切铃铛部分。

总结

以上就是我在实际项目中遇到的切图问题了，切图是一项靠经验积累的 UI 必修课，希望你在阅读之后留个印象，以后遇到类似问题也有了解决之法。

切图就用摹客。

以上文章来源于菜心设计铺，作者花菜

关于 UI设计切图，我们应该如何给开发人员相关推荐

移动端切图内容包括什么_移动ui设计切图规范有哪些要求
随着智能手机的不断运用,移动端ui设计成为大家关注的重点.而移动ui设计中,移动ui设计切图跟手机的使用密切相关.今天就让小编为大家介绍移动ui设计切图规范有哪些要求. 移动ui设计切图规范 1.切图 ...
android ui 切图工具,APP切图标注教程：UI设计切图标注的小工具实用技巧
分享关于一篇UI设计师必须要懂的切图标注的小工具实用技巧,让你在跟开发工程师协作的时候更加得心应手. 设计师必备的UI切图小工具如下3大常用工具: 1.切图工具 Assistor PS 也是一款PS的 ...
android 系统的切图方式_UI设计切图规范
移动UI设计切图是UI设计师最重要的设计输出物,切图资源输出是否规范直接影响到工程师对设计效果的还原度.设计师的切图输出物是是体现一个设计师专业水准的重要标准,同时也是设计师表达自己对设计态度的最有力 ...
iOS界面设计切图小结
iOS界面设计切图小结 APR 12TH, 2013 1.基本尺寸 (1)界面实际设计时按: iPhone4.4s:640px*960px iPhone5: 640px*1136px iPad:15 ...
9图工具 android,在线自动生成.9png图的Android设计切图工具推荐
当我们完成了一套iOS的切图的时候,当android开发人员让你切几个版本的dpi切图时,你是不是一下子崩溃了! 我想大家都会崩溃,切一套APP设计稿已经够麻烦了. 因为在Android的设计过程中 ...
移动APP界面设计切图指南
移动APP切图信息图:iOS界面设计切图指南 http://blog.163.com/conghui1986@126/blog/static/5647097520146311247618/ Andro ...
android与ios ui切图关系,iOS、Android 开发单位换算及 UI 切图要求
在移动端 UI 设计中,经常会用到的单位有 4 种:px.pt.dp 和 sp,很多人分辨不清这几种单位及其换算关系,以及 iOS 和 Android 的切图要求,我在这里做下简单的介绍,希望大家读完 ...
自动切图生成html,Photoshop如何实现UI自动切图？_html/css_WEB-ITnose
切图严格来说并不是UI设计师的工作, 而是前端工程师的工作,指的是将UI设计师的设计(大部分为photoshop创建的PSD文件)转化为界面(网页或窗体等)所需要资源的过程. 切图是衔接UI设计和应用 ...
android app ui如何切图,APP切图详细规范终极指南
我们都知道一套完整的 App 通常会有很多张切图,不管是 iPhone 需要 1x.2x.3x 图档,Android 需要至少 3 种 hdpi.xhdpi.xxhdpi.在庞大的切图数量下如何让负责 ...

关于 UI设计切图，我们应该如何给开发人员

关于 UI设计切图，我们应该如何给开发人员相关推荐

最新文章

热门文章

关于 UI设计 切图，我们应该如何给开发人员

关于 UI设计 切图，我们应该如何给开发人员相关推荐

最新文章

热门文章

关于 UI设计切图，我们应该如何给开发人员

关于 UI设计切图，我们应该如何给开发人员相关推荐