测试 剪裁 像素 UX 设计师与开发、测试同事交流有障碍？沟通费时？不用怕，读完这篇文章你将掌握开发、测试常用术语及基础知识，沟通效率+10086。背景概述：设计师在日常工作中，避免不了与开发、测试同事沟通交流。他们说的话，你真的听明白了吗？如何更快、更好的无障碍交流？这就需要我们设计师，多多了解开发、测试同事们常用的术语，以及一些与设计相关的代码知识。常用术语1. 开发测试常说的 DEV 环境、黑盒、沙盒、SIT、UAT 是什么？开发的流程是怎样的？UE/UI 在何时介入验收测试比较好？设计师日常工作中，除了设计输出，设计验收也很重要。你们是否遇到过以下情况：不知道什么时候开始设计验收，等到上线了才发现设计还原不到位；测试通知设计验收，给出验收文档后，却因为已经到了上线节点，延后处理（这是因为验收的节点不对，测试通知晚了）；提前主动要求验收，开发测试给过来各种各样的安装包，DEV 环境、黑盒、沙盒等等，每次的叫法让人晕头转向，账号都搞不清了。如果你有以上问题，就跟着我来一起了解一下，开发测试的常用环境术语吧～DEV 环境：develop，即代码开发的环境黑盒/SIT：黑盒测试/系统集成测试(System Integration Testing)，黑盒=SIT，开发人员、测试人员测试流程是否走通。它是通过测试来检测每个功能是否都能正常使用。在测试中，把程序看作一个不能打开的黑盒子，在完全不考虑程序内部结构和内部特性的情况下，在程序接口进行测试，它只检查程序功能是否按照需求规格说明书的规定正常使用，程序是否能适当地接收输入数据而产生正确的输出信息。黑盒测试着眼于程序外部结构，不考虑内部逻辑结构，主要针对软件界面和软件功能进行测试。沙盒/UAT：沙盒测试/用户验收测试((User Acceptance Testing)，沙盒=UAT，由专门的测试人员验证，验收完成才能上生产环境。计算机专业术语，在计算机安全领域中是一种安全机制，为运行中的程序提供的隔离环境。通常是作为一些来源不可信、具破坏力或无法判定程序意图的程序提供实验之用。通常是由最终软件的用户（通常这些用户不了解软件的具体逻辑，而对业务逻辑却相当熟悉）进行的测试，因此是面向最终用户的测试，结束之后通常就可以发布生产环境了。每个公司所使用的环境或开发流程顺序可能不一样，可以先通过对于上图的基础了解，去跟自己公司的开发测试同学询问学习，深入了解自己公司的开发测试流程，制定属于你自己的设计验收规范～2. “冒烟”是什么意思？冒烟即冒烟测试，跟黑盒、沙盒测试的侧重点不一样，黑盒、沙盒是手动测试流程、样式、交互等等，而冒烟测试主要用于压力测试，比如同时载入 N 条数据或者点击动作，测试服务器是否能承载这样的操作，整体流程是否会有阻塞等等。冒烟测试执行，与正式测试的区别在于二者侧重点不同，冒烟测试关注的是阻塞型缺陷，包括但不限于流程不通、主要功能未实现等，而正式测试则属于全面、细致的测试，需要尽可能的发现全部缺陷并按其严重性进行区分。这个术语，跟设计师关系很小，此处只是简单讲解，大家了解即可。3. “栈”是什么？在设计中有怎样的体现？栈，存储货物或供旅客住宿的地方，可引申为仓库、中转站，引入到计算机领域里，就是指数据暂时存储的地方，所以才有进栈、出栈的说法。栈在程序的运行中有着举足轻重的作用。最重要的是栈保存了一个函数调用时所需要的维护信息，这常常称之为堆栈帧或者活动记录。堆栈帧一般包含如下几方面的信息：函数的返回地址和参数 临时变量：包括函数的非静态局部变量以及编译器自动生成的其他临时变量。在设计中的体现，例如下图的密码登录流程：设计与开发1. 文字、段落的适配，开发是如何实现的？对于段落文字的显示，最终落地效果，经常达不到 UI 的预期。一方面是 UI 在设计的过程中考虑不完善，一方面是开发在实现的过程中偷懒使用了默认属性。对于文字，常见适配方式有以下几种：1、无适配；2、省略；3、换行以上这些属性可以结合使用，达到我们想要的 UI 效果，比如超过多少行省略都是可以实现的。对于适配方式，我们最好告知开发或在UI上有所体现，以呈现较完整的视觉样式，不然开发就会按照自己的理解随便写样式。结合一些其他属性，我们来看看，对于需要自适应控件的设计，开发是如何实现的，我们需要注意些什么案例一：文本段落的设计还原比如上图设计稿：单行的上下间距和多行的就不一样，到了开发那边实现，开发若是给了一个定值，这就造成了最终的落地稿和视觉稿有误差。若是按照设计稿上的实现，收起展开就会出现动效过渡抖动的情况。如何解决：我们在设计的过程中多注意一下代码规律，能统一的尽量统一，非必要的避免单独定制（因为不同平台的代码特性，除了通用的，单独定制的多少会有差异）案例二：按钮的设计还原2. 不同平台，可拉伸元素是如何使用的？哪些元素需要拉伸使用：气泡、不规则背景板、特殊投影切图等等为什么要使用可拉伸元素：1. 为了自适应适配：如果一个样式，里面的内容有多有少，我们不能每种场景都切一张图吧2. 为了适配不同分辨率：可拉伸元素，不同分辨率下用一张就足够了3. 为了减少图片的大小：比如一张带特殊投影的背景板，正常切图体积很大的时候，我们可以考虑只切一部分以减少图片体积不同平台如何使用可拉伸元素：1. 安卓：点 9 即.9 是 andriod 平台的应用软件开发里的一种特殊的图片形式，文件扩展名为：.9.png；这种图片能告诉开发哪部分可以被拉伸，哪一点部分不能被拉伸需要保持原有比例；2. iOS：自带拉伸属性只需要提供图片质量较高的切图，拉伸效果可由代码控制；3. H5：切图+开发自己写规则图形拼接（都是规则图形：规则三角+规则矩形，开发自己写）如果气泡的小三角是规则的三角形，就不需要提供切图如果气泡的小三角是带圆角的三角形，是需要提供切图的，可以给一个三角形的 svg。3. 各型号的手机的适配、倍率关系与实现效果首先，我们需要先了解以下基础概念：英寸、分辨率、设备独立像素、设备像素比等等常见走查疑问：为什么在不同手机上样式呈现有差异？随着手机设备的多样化，有些手机的设备独立像素和设备像素比的乘积并不等于物理像素，这就造成了在不同手机上样式呈现有差异的原因。为什么 iPhone 12 的文字显示比 iPhone 11 大？一个原则：同样大小的屏幕，逻辑分辨率越低，字体越大。为什么在同一个手机上 H5 文字看起来比本地偏大？这点要根据不同公司使用的开发单位去看。H5 的 1px 细线问题，为什么有的开发写出来的细线比较粗？因为移动端的屏幕不仅仅分辨率有差异，其实还有 Retina 屏的问题。正常情况下，我们代码里的 1px 在屏幕上就应该显示一个像素点，但是在 Retina 屏下则不仅仅是一个像素点。以 iPhone6 为例，其 dpr（device pixel ratio）设备像素比为 2，css 中一个 1×1 的点，其实在 iPhone6 上是 2×2 的点,并且 1px 的边框在 devicePixelRatio=2 的 Retina 屏下会显示成 2px。常见各类手机设计像素和倍率关系表：https://uiiiuiii.com/screen/4. 开发是如何进行图片适配与剪裁的？在我们页面走查的过程中，有时候会发现给到开发的图片，被拉伸变形了或者重要信息被剪裁了。例如下图：想要知道出现这种情况的原因，首先我们需要先了解下开发进行图片适配与剪裁的几种方式，以 H5 为例子（iOS 和安卓同理）：结合以上开发适配剪裁方式，总结 banner 展示效果不佳，图片被拉伸变形、重要元素被剪裁掉的主要原因可能有1. banner 通常是由后台上传配置的，如果后台上传尺寸和前端的展示尺寸不一致，例如后台只设置了一个上传入口，前端我们需要在手机端、PC 端同时展示该 banner（两个端展示尺寸还不一样），就会出现以上情况。2. 不同型号的手机，图片适配方式不一样3. 对于 PC 端的动态自适应，开发适配方式使用错误如何解决？除了后台设置多入口，匹配后台和前端的尺寸，我们还可以使用以上代码特性+设置 banner 剪裁安全区域去更好的展示 banner。（开发有的时候不会想那么多，就使用默认的适配方式，我们可以告诉他怎么做）刚刚变形、被剪裁的 banner，开发一开始就是一张图去无限拉伸适配，在拉伸的过程中使用的属性也不对，造成各种变形。经过沟通，设计了一张最大的 banner，并将文案内容设置在安全区域内，其他区域根据窗体尺寸动态剪裁。5. APP 界面适配方式，固定尺寸还是固定比例？屏幕适配的原则是：大屏手机显示更多的内容；所以并不是大屏手机就根据屏幕宽高比将 UI 控件进行等比例缩放界面里的元素样式适配有两种形式：固定尺寸：不论在什么型号的手机上面，显示尺寸都是一样的固定比例（固定边距）：会根据不同型号的手机分辨率，按照在页面中的占比进行等比缩放适配。参考文章：开发丨值得设计师看看的5个开发小知识@韩重赞 ：这里整理了几点关于设计的开发知识。阅读文章 > https://www.zhihu.com/question/19939866H5 适配方式： https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit关于移动端适配，你必须要知道的： https://blog.csdn.net/weixin_39670849/article/details/111655506如何看待 iPhone 12 系列的逻辑分辨率设置？苹果可能是如何考虑的？ https://www.zhihu.com/question/425893492从第一代 iPhone 细数到 iPhone 12，iPhone 屏幕尺寸进化历程背后的 app 设计哲学： https://sspai.com/post/62198部分配图源自网络，仅做交流学习使用，如果侵权，请联系我删除。对日常工作中与开发测试同学对接的一些知识经验总结就到这里，欢迎评论交流，让我们的设计稿落地更精致～点赞收藏给点鼓励～我会持续给大家分享日常工作实战经验总结，一起进步呀～本篇来源：优设网原文地址：https://www.uisdc.com/the-development-of-knowledge
像素 素材 字体 LL PixelFun 是一款像素字体，为了增加字体的可玩度加入自由合字的特性输入以下单词：bird boat chicken clock coffee computer cow dog face fast file glasses heart home key lock low mail moto music pause play shit stop talk unlock在 Ai 或者 Ps 中 Opentype 工具栏点击自由连字即可生成相对应 Icon（无聊的小功能）依旧是免费商用，附件下载！「第一张插画底是素材是素材是素材」任天堂设计师出品！700+免费可商用的粗点像素风素材打包下载！《超级玛丽》《魂斗罗》《坦克大战》《吃豆人》，还记得这些在那个时代给我们带来无限欢乐的像素风电子游戏吗？阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 LL PixelFun13.13KB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/ll-pixelfun
像素 设计师 素材 《超级玛丽》《魂斗罗》《坦克大战》《吃豆人》，还记得这些在那个时代给我们带来无限欢乐的像素风电子游戏吗？虽然这种类型的游戏已不再是主流，但是他们所带有的“像素风”却成为一种经典风格沿用至今，甚至一度成为一种设计新潮流，海报、Banner、UI 图标、H5 等各处都能看见它的应用。像素风的作品虽然有其独特的趣味性，但是也存在制作过程繁杂，费时费力的问题。今天就向大家介绍一种更简单实用的像素风格——「粗点」像素风。「粗点」像素风「粗点」像素风这个概念是由日本设计师前田隆史（Takashi Maeda ）在个人工作室「前田设计事务所」成立时提出的，用来形容其工作室创作一系列具有独特性的像素风作品。这使得「粗点」区别于传统的像素风，并在社会上继续流行。前田隆史曾就职于世界电子游戏巨头任天堂，是像素风的忠实爱好者，也对像素风元素的设计有丰富经验，其 Ins 账号「前田设计事务所」（ID：maedadesignroom）已经持续更新了近百个像素风小元素。免费可商用的像素艺术网站「DOTOWN」近日，前田设计事务所宣布上线像素艺术网站「DOTOWN」，开放其全部的「粗点」像素风图片素材。这些素材都是免费可商用的，种类丰富全面。是有像素风设计需要的设计师不可错过的宝藏网站。站内共有 700 多张「粗点」像素风图片素材，种类包括人物、植物、动物、车辆、建筑等，都是 PNG 模式。网页左侧有分类标签，也有详细的 Tag 列表，可以迅速找到自己想要的类型。DOTOWN 网站丰富多样的像素风素材站内所有素材都已经打包，资源链接见文章底部。「粗点」像素风简单却也不失表意，只要懂得规律，任何人用任何工具都可以做出来，对想要快速上手像素风的设计师来说是一个很好的临摹学习选择。感兴趣的小伙伴快去下载学习吧！再给大家推荐几款免费好用的像素风制作软件，帮助大家更好创作手机软件「八位元画家」「八位元画家」是一款 IOS 应用软件，界面简单，操作方便，非常容易上手。傻瓜式的在线像素画绘制工具 Pixilart这个工具之前和大家介绍过，直接戳链接：设计神器！高颜值傻瓜式的在线像素画绘制工具 Pixilart@豁牙子的阿昕 ：说到可爱风格的设计，我们很容易就想到这种萌萌的像素风，这种小小的颗粒感，让它们比普通的Q版漫画显得高级一些。阅读文章 > 中文版来了！值得每个设计师收藏的《完美像素使用手册》之细节篇这本纪念碑谷团队出品的《完美像素使用手册》，有设计师说是她见过的最全面，最毫无保留，最生动有趣的界面设计指南，而且不止是设计，还包括和程序员的合作经验，AI、PS的操作小技巧等等。阅读文章 > 以上就是有关「粗点」像素风的全部内容，喜欢的小伙伴记得点赞收藏哦！ 文件名 如何下载使用 文件大小 提取码 下载来源 粗点像素风素材合集1M2333 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/dotown
矩形 像素 将其 在今天的Illustrator教程中，我将带领大家学习如何使用Illustrator软件的一些基本几何形状和工具来创建复古风格的火车插图。希望朋友可以喜欢。先看看效果图设置新文档首先创建一个新文档(文件>新建或控制+ N)，并进行以下设置：画板数量： 1宽度： 1200像素高度： 640像素单位：像素进入“ 高级”选项卡：色彩模式： RGB光栅效果：屏幕(72 ppi)设置图层创建好了新文档，接下来创建图层。打开“ 图层”面板，创建两个图层，将其命名如下：第1层>背景第2层>火车创建背景图标开始之前我们首先创建背景图层第1步选择矩形工具(M)创建一个1200x640 px矩形，使用#EA7B54进行着色，然后选择“ 对齐”面板的“ 水平”和“ 垂直对齐中心”选项，将其中心对齐到底层的“ 画板”。第2步创建一个808x16 px矩形作为铁轨，使用#434F59进行着色，然后定位距离画板底部边缘108 px的位置。第3步创建两个16x16 px圆圈(以绿色突出显示)并将它们放置在矩形的两边，然后使用路径查找器减去多余部分。第4步使用Shift + X键盘快捷键将生成的形状转换为轮廓，然后在“ 笔触”面板中将“ 笔触的权重”设置为8 px，将“ 角”设置为“ 圆形”。第5步创建17个8x8像素正方形(#434F59)作为铁轨上的小螺栓，将彼此间隔调整为36 px，将它们定位在轨道的下边缘。然后选择它们和铁路使用Control + G键盘快捷键将它们组合在一起。第6步完成了背景的绘制，我们可以锁定它的图层然后继续进行下一步开始构建火车的图层。创建火车底盘完成了铁轨的绘制，我们就可以开始绘制火车的底盘部分了。第1步创建火车底盘的主形状，首先建立508x16像素的矩形调整8像素的轮廓(#434F59)，我们将其定位在距离铁轨左边缘84像素，上方88像素的位置。第2步创建两个相距4 px的4x4 px圆(#434F59)给火车底盘上添加第一对螺栓，我们将分组(Control + G)，然后定位到底盘的左侧，如参考图像所示。第3步创建六组由两个4x4 px圆圈(#434F59)组成的螺栓，放置到参考图像中的位置。完成后，使用Control + G键盘快捷键选择并将所有螺栓和底盘组合在一起。创建火车头的后端一旦我们完成底盘的工作，我们就可以绘制火车头的后端了。第1步首先创建一个176x112像素的矩形，添加一个8 px的轮廓(#434F59)，将定位它在底盘上方，距离其左边缘4 px。第2步创建24x48像素矩形(#434F59)放置在先前创建的形状的左侧，将两者的边缘对齐。第3步选择钢笔工具(P)创建一条”L”形状8 px的圆角线条(#434F59)。第4步创建8 px轮廓(#434F59)的64x120 px矩形作为棚顶支柱，调整到距离下部矩形左边缘40 px的位置。第5步创建一个160x24像素的矩形，使用#434F59进行着色，然后定位到参考图像中看到的位置。第6步创建168x8 px矩形(#434F59)添加水平的细节装饰，然后在其上方添加9个8x16像素的较小矩形(#434F59)，将彼此间隔调整为8 px。完成所有形状后，使用Control + G键盘快捷键选择并分组，然后再继续下一步。第7步创建16x112 px矩形(#434F59)创建车厢阴影，将其与当前部分的右边缘对齐，然后使用直接选择工具(A)选择其左下锚点进行调整，使用“ 移动”工具向外移动16像素(右键单击>“变换”>“水平”> -16像素)。完成后，使用Control-G键盘快捷键选择所有形状组合在一起。第8步创建84x36像素大小8 px轮廓的矩形(#434F59)创建车厢上的小箱子，将其定位在火车车身上，距离车身左边缘20 px的位置。第9步创建一个较小的84x12像素、8 px的矩形(#434F59)放置到箱子的上半部分，将其放置到上一个形状的顶部，使它们的轮廓重叠。第10步花一些时间在箱子上添加一些细节，例如4x4 px螺栓(#434F59)和12x16 px锁(#434F59)，使用参考图像作为参考。完成后，选择并分组(Control + G)所有的组成形状，然后再继续下一步。第11步创建较小的8x52 px矩形(#434F59)创建箱子阴影，选择左下锚点并向外推动8 px(右击>变换>移动>水平> -8来调整px)。完成后，将生成的形状放在箱子边框的左侧，选择并将两者组合在一起(Control + G)，然后再转到下一步。创建火车的车厢一旦我们完成了火车后端的工作，我们可以向右移动几个像素开始创建舱室。第1步首先创建一个8 px轮廓(#434F59)136x232 px矩形，将其定位到机箱上，确保其左边缘与前一部分的右边缘重叠。第2步创建一个112x88像素的矩形(#434F59)添加窗口，将矩形堆叠在一个120x8像素(#434F59)的矩形上方，将两个矩形选择并进行分组(Control + G)，然后定位在距离车舱中心16 px的位置。第3步创建8x28 px矩形作为门把手，使用#434F59进行着色，然后如参考图像中所示定位到车舱的左侧。
落霞与孤鹜
张大湿
