帮设计师与工程师更好沟通的实用技巧

摘要:设计师与工程师的交流经常是鸡同鸭讲,牛头对不上马嘴,为了帮同学们搞定这个难题,一位国外的设计师兼开发者整理了一个列表,帮同学们能跟工程师无障碍沟通,全是非常实用的知识点。

  开发者一般不是令人惊艳的设计师,设计师也通常不是出色的开发者。虽然有很多例外,但这两行的门道对对方而言都是难以言说的谜,然而双方却要在这种情况下合作完成项目。作为在两个领域都工作过的人,我为设计师整理了一个列表,使他们能够更好地辅助开发者开发应用和网站。

  Photoshop

  开发者经常需要处理设计师制作的Photoshop PSD文件,因此任何对设计师有益的事情也会对开发者有益,包括绘制易于维护、易于理解的PSD文件。

  1. 有效地进行版本控制

  设计师经常会面对各种装满了一堆没有清晰版本命名的PSD的文件夹。为了解决这个问题,设计师可以事先确定一种合适的版本命名格式(理想的格式应该使文件在字顺排序下自动有意义地排列)。

  2. 保持图层

  不要轻易合并图层。需要导出时,通过组合,隐藏/显示图层的方式来进行,导出后再把文件恢复到原来的状态。不要轻易破坏有用的数据。电脑性能更不是合并图层的理由——若被此限制,你应该做的是买内存更大,性能更好的电脑。

  3. 对图层进行有意义的命名

  虽然对图层命名比较繁琐,但这样做确实能够帮助理解,尤其是在重用文件元素的时候。命名时应确保文字图层的名称反应其内容。重复的图层也要进行有意义的命名,而不是简单的“副件”。

  4. 合理地对图层编组

  应该把分散在不同图层的视觉元素编为一组。对单一设计的文件来说,编组整体上应该一致按照从左到右,从上到下的顺序。层次和顺序比按颜色编码图层更好,因为图层移动时,颜色还需要保持。

  5. 去掉不需要的图层

  不再需要的旧版本、模版和参考材料以及临时复件应该从图层中及时删除。间歇性地浏览一下你的所有图层,及时删除不需要的东西。

  6. 使用图层复合

  Photoshop的图层复合功能可以让你制作多组图层状态,如可见性,位置甚至图层风格。你可以用图层复合功能来灵活地在一份文件中整合设计中不同部分(比如网站的多个标签、应用的多个页面)。这样做可以不必保留重复的图层编组,从而减小文件大小。

  7. 保存矢量文件和可伸缩效果

  在设计应用时,很可能会需要原设计两倍尺寸的图片来适应有双倍像素的新设备。确保在这种情况下你不需要重新绘制所有的图标。

  助力开发者

  还有一些特别与应用及网页设计相关的建议,每项都有相应的要求和限制。

  8. 学会在缩放时保存圆角

  操作系统经常会统一圆角的角半径(iOS通常为12像素)。Adobe Fireworks会保持圆角矩形的角半径,但Photoshop不会。因此确保你用直接选择工具来选取圆角的点并且以传统的方式缩放图像。

  9. 在72ppi下进行设计

  一个像素就是一个像素,更多的像素只会生成更大的文件。不要通过改分辨率来蒙混过关。

  10. 对齐像素

  确保相关的形状工具设置成对齐像素。根据你的需要使用像素网格等工具。一贯使用偶数尺寸来方便裁剪。

  11. 使用RGB模式

  这点不仅对颜色显示重要,对开发者将颜色正确地写入代码也同样关键。

  12. 资源准备是你工作的一部分

  很多(大多数)开发者除了基本的编辑功能外对Photoshop一窍不通。设计师需要适时地导出可能会在应用或网站上用到的裁剪图,因为毕竟他们是对文件和Photoshop最熟悉的人。

  这项工作虽然很痛苦,而且很耗时,但这是除“设计”外90%的工作。

  13. 谨慎地使用字体

  不同的设备和操作系统的预设字体有所不同,因此不能确保这些设备都有你进行设计的电脑上的字体(事实上,你比一般人的设备上的字体都多)。基本上,将应用或网站上的文字以实际文本的格式呈现会有更好的效果,但这也使对字体的选择不仅基于视觉,还有可行性上的考虑。

  还有一点值得注意,允许个人设计使用的许可也许不允许你将该字体完全使用在应用或网页上。在选定设计中使用的字体之前,确保和你的开发者或客户进行有效沟通。

  14. 确定设计尺寸

  对移动设备应用来说,屏幕尺寸不是全部信息,你还需要考虑系统状态栏等的存在,以及他们如何在屏幕横排和竖排时影响尺寸(比如iOS设备的顶端状态栏会在横排的时候减小较小边的尺寸,在竖排的时候减小大边的尺寸)。和你的开发者确认一下应用是否为完整的全屏很必要。

  15. 使用平台风格

  每个平台(操作系统)都有其独特的用户界面元素和交互风格(也会根据不同的设备有所不同)。在设计时注意这些风格,并且除了有特殊原因,不要进行与平台本身风格差别太大的设计。例如,在iPad上,你会发现这些需要注意的地方:

  1. 支持两种屏幕方向的强烈需求
  2. 双栏设计在两种屏幕方向上都可接受
  3. 将弹出框作为一种界面元素和分组机制
  4. 确定的文件浏览器的风格
  5. 在级别较高的导航栏中,返回按钮是向左指的图标

  因此,在设计时要熟悉平台,因为你的设计要适应它。没有哪一种单一的设计可以适应所有的平台。

  16. 对横排和竖排分别进行设计

  不同的屏幕方向需要不同的交互设计风格,这不仅是因为屏幕宽高比,还因为用户以不同方向手持设备时外形、重量和平衡上的区别。

  只针对适应屏幕宽高比进行设计顶多是一个糟糕的妥协策略。

  17. 针对每种主流尺寸和情景进行设计

  同一应用在手机、平板和电脑上的内容和交互都应有所不同。对移动设备而言,我们也需要考虑注意力持续时间、注意力分散、使用设备时的身体协调性减弱,以及用户在移动或危险情境下使用设备的可能性(例如走路时的障碍物、过马路时的交通情况以及驾驶安全性)。

  这些使用情景与设备的尺寸和本质有不可否认的关系,有效的设计应该充分考虑这些因素。

  18. 使用纯正的,至少实际的示例内容

  好的示例内容标准有以下几条:

  1. 示例内容涵盖应用可能的长度,而不是仅仅为了原型设计的方便。
  2. 设计必需的数据缺省时的显示方案,尤其如用户照片等。
  3. 考虑不合需要的输入示例,比如需要进行裁剪的过宽或过长的图片。
  4. 包含极端或少见的名字示例,包括超长或不间断的姓和名。
  5. 地址不限制为当地的地址形式,而包括各种可能的长度和格式。
  6. 在设计的任何角落都找不到“Lorem ipsum”。

  19. 本地化考虑

  当大多数人考虑支持其它语言时,他们想的是文本。而当设计师或开发者考虑本地化时,他们应该考虑的是布局。为了实现本地化,你的设计应该使所有文本支持与英文50%的宽度差异。

  在显示同等内容时,亚洲语言需要的空间比英语少接近50%,而欧洲语言会比英语多接近50%。这个问题在设计按钮和帮助文本时尤其重要。

  20. 考虑屏幕全局光源

  作为设计师,你应该早就了解每个平台都有其不可改变的屏幕全局光源(例如在iOS上,是在中心的正上方,或90度)。所有高光和阴影效果都应该和平台的光源相协调。

  21. 明确导航和组织控件设计

  向你的开发者明确展示你的设计中包含的标签、下拉菜单或者其它闭合机制。在进行这种控件设计时,要尊重平台的设计惯例。开发者在进行开发时需要明确了解信息层次,因此你要确保你的设计清晰地展示你的意图。图层复合在这种情况下非常有用。

  22. 导出图形时不进行压缩

  在导出时以PNG alpha通道格式保存,除非被明确告知其它保存方式。除非被明确要求,否则不要使用JPEG格式。不要考虑图像文件大小,因为开发者或他们的开发环境会对图像进行最优化。以透明背景导出每个元素,而不是纯色,即便你设计中的一部分背景确实是纯色的。

  23. 询问阴影的处理

  和你的开发者沟通是否要将阴影效果包含在导出图中。通常情况下,开发者会用CSS或写代码来应用阴影,这样做事实上会比直接使用预先保存的阴影位图更方便容易。不要假定阴影效果应该包含在图像中,虽然在设计原型时用图层展示阴影效果。

  24. 理解按钮的构建方法

  应用或网页上的按钮几乎都不是用单一的图片创建的,而通常是下面两种情况:

  • 3部分图像,左端图像,右端图像,重复的单像素宽的中间部分(允许图像的横向扩展)
  • 9部分图像,上中下-左端图像,上中下-右端图像,以及3个重复的上中下中间部分(允许按钮的横向和纵向扩展)

  最后的想法

  任何软件都应该是平面设计、交互设计和开发三者合作的结果,这三部分都同等重要。知道另外领域的需求对我们自己的工作非常有帮助。

作者: Matt Gemmell  来源: 优设网

时间: 2024-08-24 08:47:10

帮设计师与工程师更好沟通的实用技巧的相关文章

【译】设计师/后端工程师也能马上实践!前端设计(CSS设计)的技巧

本文是我在众成翻译平台上认领并翻译的:设计师/后端工程师也能马上实践!前端设计(CSS设计)的技巧 ,正文内容如下: 大家好,我是2015年的应届毕业生小原,职位是前端工程师.不久前我加入了新业务的开发,负责前端的设计和实现.我想在回顾当时做法的同时,总结出一套能够轻松实现的前端编程设计方法. 什么是高灵活性的前端开发设计 不论开发什么样的业务,都可能面临界面样式没有完全确定,或者今后还需要增加或改变功能点的情况.因此代码开发与业务构思一样,都需要具备高度的灵活性,对变化频繁的前端来说更是如此.

web设计经验<五>国外设计师总结的7个找灵感实用方法

每个设计师不时会有创意灵感缺失.大脑一片空白的状态.盯着一个空白的屏幕,发愁着“好吧,我现在该做什么呢?该怎么做呢?”有些人喜欢静待,但这不是唯一的一个方法.焦虑的客户或者是你自己的不耐烦,都会让你无比头痛, 所以我们分享七个积极有效的方法来解决你设计时遇到的灵感枯竭. 这些都是在我们实际工作中总结的,我们认为它们也会对你的设计工作有所帮助. 1. 不要停止设计,即使它不完美 最大的区别在于没有好的想法和没有任何想法.有趣的是,如果你有更多不好的想法,那么更多的压力会迫使你想出好的方案来.在没有

2016软装设计师不可不知的几个软装技巧

在外人看来软装设计师是一个光鲜亮丽的职业,但其实只有自己经历了这个职业,才能体会其所要付出的汗水.当然,作为一名软装设计师,也是幸运和幸福的,因为我们都生活在自己的梦里,为每一个家庭打造属于他们的梦幻城堡,如此一想,也是很快乐的一件事.如果说<盗梦空间>让我们震撼于造梦的绚丽.美妙:那么软装设计师则是见证美丽奇迹的天使.以下五色光软装设计培训机构小编为大家整理了一些想要成为一名顶尖软装设计师所必知的几个软装技巧,希望能帮助到大家. 软装饰即在完成地板.墙面.门窗等硬装后进行可移动的.材质上也较

前端工程师必须要知道的SEO技巧(2):制作比设计还要漂亮的代码(内容和语义化代码)上

前言:现在的网站设计,大多数不仅仅要求美观,前端代码往往发挥着重要的作用.这意味着很大一部分搜索引擎优化或搜索引擎优化责任应该落在设计师身上.然而,有大量的网页设计师不理解这个问题以及如何在建立一个网站初期就达到是完全的搜寻引擎优化.当然,要达到这个高度,肯定离不开学习.需要花费时间使用. 一.制作比设计还要漂亮的代码(语义化代码)其实就是在适当的位置使用适当的代码. 接下来,我举几个例子就能明白: H1~H6标签多用于标题. UL标签多用于无序列表. OL标签多用于有序列表. DL标签多用于定

促进沟通的实战技巧

大多数交流失败都是沟通不畅或者根本没有实质沟通造成.每一个人都有别于他人.每一个人的需求.阅历.兴趣点.价值观和情感构成不同,对事物的评价标准和观察视角不同.语言使用习惯和表达能力不同甚至对同一个词句(包含日常语言)的理解程度也不同,所以每一个人对同一件事物的反应是不同的,这就是认知差距. 认知差距就会造成沟通过程中的误解,由于你的思想.想法和观点对方可能是全然看不到的.要想说服别人,你必须从这个观念入手. 要达成有效地沟通,必须基于两方的感受和需求.从理智.情感双管齐下,建议有: 1,始终和对

商务沟通方法与技巧

沟通注意事项:1.在沟通过程要做到及时准确2.沟通过程中信息的变化要做到及时跟进,确认,以免发生错误. 沟通中的物理障碍:干扰,距离,不良的设备,员工短缺,不良的工作环境. 谈判技巧:沉默:在不知道对方底线的时候,沉默是最好的做法.一旦对方先出价,那么我方就处于谈判的有力位置. 元信息沟通:指沟通中沉默的重要性. 非语言沟通:面部表情,姿势,触摸,方向,时间,地点,空间.非语言沟通的特点:连贯性,真实性,相似性,多义性,通义性,协同性,及时性,心理性. 眼神在商务沟通中发挥的作用:表示兴趣,反馈

首次沟通邮箱发送技巧

您是否需要经常给一些新客户发送一些公司资料.产品介绍等? 是否遇到发送给新用户的邮件被归档到对方垃圾箱甚至被对方服务器拒收的尴尬? 本期,我们总结了一些常见的可能导致增加邮件被误判的情况,希望您了解并与新客户的沟通更加顺畅! 1. 不要选用复杂的签名: 通过企业邮箱发送商务邮件,基本都会使用到邮件签名或电子名片,并且很多用户会在签名中携带公司的各种产品介绍,网站链接,宣传图片,多种联系方式等等,但是这些都增加了邮件被收件方网关系统误判为垃圾邮件的风险,因此请在首次发信给新客户时,使用简洁的签名.

这5个实用技巧,教你设计出更好的App

三年前,谷歌公司分享了一项研究:用户平均会安装36个app在手机上,但每天都使用的只有9个.据统计,只有4%的app会被使用一年以上. 所以,能运用基本用户体验设计原则来设计出更好的app,对公司大有裨益.一个实用的app可以让用户高度参与,以此来降低卸载应用的机会.更好的使用体验,用户留存时间增长,也是能让app口耳相传的主要原因之一.毕竟,除了在应用商店被发现,52%的用户来源是亲朋好友的互相安利. 下面分享五个技巧,可以帮助你设计出更好的移动端app. 01 实用性和用户目标 设想一下,当

前端工程师必备的几个实用网站

一.配色类网站 http://colorhunt.co 这个网站给我们提供了很多的配色方案,我们直接使用就OK了.使用方法也很简单,鼠标移动到对应的颜色上,我们就可以看到颜色的十六进制码,复制这个颜色到工具里就可以使用了. https://webgradients.com/ 180种渐变方案供你选择,还可以直接复制CSS样式应用到网页中 https://color.adobe.com/zh/create/color-wheel 这个是Adobe公司出的,他提供了多种配色方案.我们点击圆盘中间的点