不编码设计师的提示

我有设计背景，几年前开始从事前端开发。随着响应式网页设计的出现，设计师的需求正在发生变化。这里整理了一些技巧，以帮助不编码的设计师。

在理想情况下，每个为web媒体设计的人都将是前端开发人员。原因很简单，设计就是开发。为了真正最大限度地发挥设计技能，你需要与设计环境融为一体。有趣的是，许多来自离线/打印背景的设计师承担着为web设计的任务；提示无关的设计概念，试图详细说明互动性，并演示不同屏幕大小的网页。

但问题是，它们只是图片

作为一名开发人员，我已经多次担任过这样的职位：一位设计师给了我设计，他不理解web是一种灵活的交互媒体。他们通常不知道常见的做法，这扼杀了他们的创意。当然，你可以在某种程度上显示你认为下拉菜单应该是什么样子，或者按钮的各种状态，但在你将其放入浏览器进行快速原型制作之前，你严重限制了自己。

更严重的是，你可能正在设计一些需要花费大量时间来构建的东西，或者更糟糕的是，甚至可能正在设计一个可用性噩梦！

关键是，你真的不知道，直到你离开Photoshop，开始在他们习惯的环境中设计原型；web浏览器。

设计师提示

我现在要放下我的肥皂盒，尝试为那些发现自己是为web设计的，但对网页的技术构造没有明确理解的设计师提供一些实用的技巧。

Web和您的设计程序之间的差异

使用Photoshop或Illustrator进行设计很好，但请记住，这些应用程序呈现的内容与web浏览器不同。特别是，你会注意到字体在Photoshop中看起来不同，在浏览器之间也不同。风格当然会保留下来，但它们的渲染方式可能会更粗糙、更平滑或有边缘大小差异。

许多设计师也喜欢使用Photoshop滤镜来实现背景效果。这些确实可以在视觉上增加设计效果，但试着超越你工作的空间，确保这些效果可以无限扩展或重复。确保它们可以作为单独的文件提取出来用作背景，并且你没有设计一些无法轻松构建的复杂内容。Photoshop过滤器（即乘法、线性烧录等）在网络上不存在。

不用说，也应该对文件夹/层进行合理命名，尽量不要对设计中的大块进行光栅化，因为这会使开发人员难以处理。

响应式网页设计不仅仅是“桌面和手机”

我经常看到一个网站设计有两种风格；桌面和移动设备。通常，宽度分别为960像素和320像素。问题是，现在已经没有固定宽度了，我们所做的一切都需要完全灵活。

开发人员经常发现自己试图“填补空白”，而设计师没有考虑825、650甚至1400像素宽的设计（例如），这可能会导致所有相关人员真正头痛，因为内容和导航结构在未考虑的屏幕尺寸要求下崩溃。

Android设备的一些示例。（来源）。

为了克服这种有缺陷的方法，请尝试将页面元素视为在同一环境中共存的独立、模块化实体。解耦但相关且可重用。不要让组件在不同的大小上看起来不同——我们只是简单地对相同的内容进行回流，因此在不同的屏幕宽度上添加或删除内容是没有意义的。

不要浪费时间设计无限宽的页面，但要尽可能地考虑页面元素的灵活性和简单性。

正如布拉德·弗罗斯特（Brad Frost）在谈到原子设计时所引用的：“我们不是在设计页面，我们是在设计组件系统。”

解释互动性

这是一个特别困难的问题，因为Photoshop和Illustrator最终都是静态环境。与在浏览器中进行设计不同，在浏览器中，您可以访问本机响应、CSS动画和真实页面元素（如按钮和复选框），在Photoshop中，您需要费力地模拟某些东西在其初始状态、悬停状态、单击状态、禁用状态等下的外观。

同样，因为这在你制作原型之前是不明显的，许多设计师忽略了它，开发者需要填补空白。

UI工具包可以帮助完成这一过程。UI工具包本质上是一个文件中列出的页面元素目录，用于直观地描述交互状态。

但这只解决了一半问题。如果我们想在州与州之间过渡，我们该如何表现？例如，当您将鼠标悬停在复选框上时，复选框可能会变为不同的颜色，但这是一个二进制“flick”还是一个渐变？或者它做了完全不同的事情？在上面的例子中，百分比提示是否淡入？它们是在褪色时向上滑动还是向下滑动？或者他们只是出现？

从内容开始！

这听起来很简单，但是围绕真实内容进行设计！即使有世界上最好的意图，当你使用Lorem Ipsum时，你仍然只是在猜测。有时，真正的内容可能不存在，在这种情况下，从你的客户那里获得指导——当涉及到内容时，他们和你一样负责，所以不要害怕施加压力。

如果你在围绕用户生成的内容进行设计，那么一定要考虑边缘案例。“莎拉·琼斯”将自己的一张漂亮照片上传到个人资料的可能性有多大？想想“Jermaine Worthington Redmond”，他根本不上传图片——这是什么样子

苹果手表-这是一个可爱的，意识形态的形象，但它是完全无用的任何其他营销宣传品。你有多大可能会拍到你朋友的专业照片，照片的框架很好，顺便说一句，他们都有很短的名字？

位置，位置，位置

我更相信实用性而不是意识形态，所以我会不情愿地接受这样一个事实：在许多情况下，设计师不理解代码（甚至没有学习的欲望）。如果是这样的话，我最后的建议是与您的开发人员进行持续的对话。真的没有自我的空间，生产线的日子已经一去不复返了，设计只是交给开发人员来构建（我知道这些日子实际上并没有过去，但它们真的应该过去）。

通过在整个设计和构建过程中（我们现在知道其中存在大量重叠）坐在一起，你将消除设计的模糊性，最大限度地利用前端技术，确保过程更加顺畅，创造出更好的产品。

这是否引起了任何设计师或开发人员的共鸣？请在评论中告诉我们，我很想听听你的想法！

来源：https://speckyboy.com/tips-for-designers-who-dont-code/