致充满爱的设计师(前端开发人员的来信)

本文概述

• 文件设计
• 技术设计
• 互动设计
• 内容设计
• 响应能力设计
• 设计例外

亲爱的设计师,

这封信已经酝酿了多年。长期以来, 它的部分内容已通过语音和书面形式传达给各个设计师。

但是, 由于担心会隐含当前与我合作的设计师或客户的关系, 我一直不敢发表。因此, 在继续之前, 我想强调一点, 这不是特定的申诉, 而是18年来意见分歧的详细清单。

我们已经合作了近二十年, 你发送给我的每个PSD文件都(或多或少)遇到了相同的问题。那么请原谅我试图教你工作的dec亵行为。

我不打算教你有关图形或美学的知识。我不会研究排版, 易读性或使用空白。

相反, 我想解释一下你的劳动成果如何影响我的工作。

我想提醒你, 将设计复制为像素完美的网页需要什么。我想告诉你设计文件将如何用于文档编制以及你创建的图像如何确定所使用的技术-直至可扩展性和性能的最基本层次。

另外, 我想演示可以快速轻松地完成哪些工作以及哪些工作会产生开销, 从而将整个制作拖到抓取中。

最重要的是, 我想提醒你, 你现在正在创建的图片将变成一种能够互动和响应, 可以与成千上万的不同个人交流, 需要教他们学习和学习的生物。他们以最轻松的方式。为它和为他们。

文件设计

首先, 我想提醒你, 你制作的PSD文件不仅是供客户批准的图像来源, 而且还是技术文档和开发人员的原始资料。因此, 请保持你的图层和组整洁, 有条理和命名。

亲爱的设计师, 你二十年来一直向我发送同样问题的PSD。

鸣叫

注释你的设计。根据你使用的约定创建单独的文件, 或者在单独的隐藏层中记录它们。

告诉我你使用了哪种字体。让我知道要使用的颜色, 间距和上下文。我需要知道。

如果还没有针对特定功能进行设计, 我还需要知道要推断的内容。

我想我想说的是：尽可能为你要设计的产品创建简短的样式指南。

出于我们的缘故, 在添加标准文本块(例如标题)时, 请在其后添加矩形以指示其周围的间距。这应该使你能够始终如一地放置它们。如果这项工作太多, 请至少指出文档中的哪个示例是佳能。

我无法告诉你有多少次我会目视放置标题, 因此它们在视觉上适合放置它们的单个实例, 但是在测量时, 揭示出每个标题都有其各自的间距。

内容块也是如此。如果你有不同内容块的列表, 请一致地隔开它们。

我将在”内容设计”部分中为你介绍更多信息, 但请不要假定标题始终位于同一行, 并在文件中使用该信息。

我一直遇到字体大小为22px, 行高为92px(显然是从主页标题复制并粘贴)的标题。你选择的设置即使没有在视觉上更改导出的文件, 也具有相关性。

技术设计

这有两个方面：可以做什么, 什么适合该媒体。

尽管我们正快速达到网站开发在技术上一切皆有可能的地步(如果没有别的, 我仍然可以使用canvas逐像素绘制出来), 但其中许多解决方案尚未投入生产。

你发现一个示例, 其中有人成功地将WebGL 3D与CSS模糊加滤镜蒙版组合在一起用于演示页面, 这一事实并不意味着你可以在单个页面应用程序中将其用作全窗口视差面板。

而且, 如果你真的想走前沿技术, 请在提交设计以供批准之前与开发人员联系。否则, 将很难使客户付出更少的代价。

但是, 如果你真的想测试边缘, 并且想尝试一下它的乐趣, 请私下联系我。我喜欢创造与你一样多的东西。只是不要将这些东西放入预算的生产项目中。

除了这些事情之外-除了测试可以做的事情的极限之外, 还应该对应该做的事情保持敏感和明智。

你不是图形艺术家；你不仅是设计师, 还是设计师。

你不仅要以某种方式设计它, 还必须以某种方式设计它, 以某种方式交流和表现。

寻求各地设计师熟悉的陈词滥调：如果没有人可以坐在椅子上, 那么漂亮的椅子有什么好处？

你必须在设计中纳入加载速度, 执行速度和易用性, 才能使其成为设计而不是图片。

尝试仅使用HTML和CSS来实现尽可能多的目标。

尝试仅使用HTML和CSS来实现尽可能多的目标。避免使用Photoshop中提供的漂亮功能。不要使用混合！请勿使用人造粗体和人造斜体。

除非你希望将元素用作图像, 否则请不要使用滤镜-除了最简单的阴影。

不要让我计算或选择颜色, 因为你使用了混合色填充。请不要使用叠加混合来伪造透明图像；实际上, 我在网站上需要透明的图像。

如果我们使用的是诸如Bootstrap之类的前端框架, 那么其中的许多问题都将得到解决, 因此请了解其操作方法和修改方法。不要只是随意地设计无关的东西。

如果你的设计与框架的功能不符, 那么实现它就是不实现设计。取而代之的是, 我们最终有选择地重写了框架, 因此它不会干扰我们的设计, 然后从头开始实施。工作负载加倍而不是减少一半。

最后, 在网站上不要使用三种以上的字体(或字体变体)。如果你需要六个不同的权重(每个权重都有自己的常规和斜体), 则不再需要为网络设计。

互动设计

这是巨大的。这封信最初是专门为该主题而写的。你确实必须了解和理解用户和功能可以交互的所有方式。

让我们从最简单的事情开始：链接。

链接不只有两个状态。

在我收到的导航中, 你总是为链接和活动链接(当前页面)提供设计。

在其他情况下, 通常会提供基本状态和悬停状态。

如果你想成为最不友好的用户, 则应该针对基本状态, 悬停状态和焦点状态进行不同的设计(对于UX, 访问和活动状态也很不错)。对于导航, 链接和活动链接均具有上述所有状态。

哦, 你不敢更改状态之间的链接布局(边框宽度, 填充等)。

同样, 如果它看起来不像按钮, 则没有背景。期。填充内联文本元素是一团糟, 未填充的文本背景永远不会做到。

由于我们将在移动设备上使用它, 因此请确保单独的交互元素之间有足够的空格, 并且每个匹配框都足够大。我认为在每个轴上至少要有42px的像素。

绘制一个不可见的矩形或一个隐藏的层, 显示击中框；确保它们不会重叠, 并且用户交互是明确的。

表单元素甚至更糟。

我看到的最常见的情况是单选按钮和复选框。标准的丑陋！因此, 你可以设计自己的状态, 并给我一个已检查和未检查的状态, 并认为自己已完成。

但是, 有一个复选框的完整的多维状态表, 并且每个状态表都应在视觉上指示给用户。

我们有以下状态：

• 选中或未选中
• 是否悬停
• 是否专注
• 启用或禁用
• 是否出错

这些中的每一个都可以与其他结合。

禁用可防止某些组合(禁用时, 悬停和焦点通常是不相关的), 但不是全部(选中复选框的禁用错误是一个完全有效且信息丰富的状态)。因此, 我们最终得到16个启用状态和4个禁用状态, 总共提供了至少20个不同的状态。例如, 在该设置中, 你通常给我的状态是未选中未启用和未选中未启用。

其他表单元素可能没有选中状态, 但是可以为空或不为空(显示占位符文本)。它们还可以具有更复杂的信息状态, 因此, 错误或不错误的情况可能与中性警告错误成功一样复杂。

然后, 最重要的是, 你应该具有强制性或可选性指示符, 以及明确定义的标签, 输入帮助和错误文本的布局和设计。

而且, 如果你确实希望对用户友好, 则需要原始集状态, 表明用户从未提供过数据, 或者数据已经存储, 或者已经更改但尚未存储。

交互性设计很困难。而且, 如果你想更改单选按钮的外观, 请不要在两种状态下随意更改。

我的意思是：进行交互性设计很困难。而且, 如果你想更改单选按钮的外观, 请不要在两种状态下随意更改。

关于交互设计的最后一点是：确定交互的外观。意思是, 确定要用于交互式元素的约定, 不要在其他任何约定上使用它们。

不, 你不能使用品牌的主要颜色来表示链接, 尤其是如果你使用相同的解决方案来强调重要内容时！

内容设计

填充唇膏含量的每个元素的理想布局足以向客户展示图片, 从而获得视觉风格的认可。但是内容设计既没有开始也没有结束。

一旦大致了解了内容布局的用途, 请记住你正在使用动态内容。

一旦大致了解了内容布局的用途, 请记住你正在使用动态内容。你必须检查两种情况的每种内容：

• 如果太多了怎么办？
• 如果数量太少(或完全丢失)怎么办？

检查标题太短或太长会发生什么。如果缺少关键元素, 内容块应该是什么样？如果没有图片怎么办？

如果页面部分没有内容, 我们是否要删除整个部分(标题, 容器和全部), 还是保留该部分, 并显示以下内容：”尚无文章, 请稍后再检查？”更好的是：”你想在此内容到达时收到通知吗？注册我们的通讯！”

做出决定！然后设计那些东西！

如果你要设计从外部或动态来源加载的供稿或内容, 请不要忘记包含所有错误和通知。实际上, 设计页面通知元内容以全局显示页面外观, 然后坚持使用这些设计约定以在出现问题时通知用户。

避免使用固定宽度的按钮和固定高度的文本块。而且, 如果我以前没有说过, 如果你认为它总是一行文本, 那你就错了！现在, 检查使之成为多行的最佳方法。

确保相同的内容具有相同的结构。

如果在多个地方都可以看到相同的标题, 则在一种情况下不要将一个单词加粗, 而在其他情况下不要将另一个单词加粗！

实际上, 请尝试避免完全格式化标题中的结构。同样, 不要在一个地方手动打断文本, 而在另一个地方打不同的文本。实际上, 请勿手动中断文本！

这些事情可能会使你的设计更好, 但是请记住, 内容很可能是通过CMS输入的, 输入该内容的人在发布之前可能看不到它的外观, 甚至可能没有手动中断的工具, 或者格式化文本。

最终内容具有相同限制的设计–固定宽度的文本容器和自动自动换行。如果那样看起来很丑, 那么设计就不好。

响应能力设计

最近, 这取得了很大进展。至少在实际设计了移动设备的情况下。越来越多地, 我们让引导程序找出来, 并在创可贴上拍打创可贴。

无论如何, 你必须了解一些简单的原则。

首先, 移动版和台式机版本不是分开的页面。我知道你知道这一点。它们只是同一页面的重排。

简而言之, 它与处理左对齐文本相同。该句子不会仅仅因为将其放在较小的容器中而改变了单词或字母的顺序。

此外, 内容组应在所有布局中共享。添加列时, 请确保分行符一致。

另外, 你的约定对于页面的不同版本应遵循相同的结构。这意味着, 如果两个元素在桌面上看起来相同, 则它们在移动设备上也应该相同。

哦, 如果你想视差, 请提供足够大的图片以供四处走动。如果适合, 或裁剪图片, 使它看起来像在向客户展示的文件上一样, 那么我就没什么可动的了。

设计例外

当然, 例外总是可能的。而且, 它们对于使产品看起来有吸引力和有效是必要的。但是, 请不要将它们逐盒添加。

如果你发现自己一遍又一遍地解决相同的设计问题, 那将是行不通的, 尤其是在每种情况下都寻求不同的解决方案时。

完成上述所有操作后, 你将获得高效, 稳定和一致(即使有些乏味)的设计。现在是时候让事情变得有趣起来了。从整体上看, 与客户交谈以确认赚钱–这些物品将使他们最大的收益。

我们已经合作了多年, 我们的客户一直对最终结果感到满意。

当然, 如果你错过了其中的一些要点, 那么我会介入的。当有理由使用复杂的设计时, 如果需要, 我会继续用JavaScript编写渲染逻辑。

如有必要, 我会介入并向客户说明额外的工作。哎呀, 我一直在设计基于年龄的已接收设计之上的表单和交互性, 所以这不会成为问题。

我只是希望, 阅读本文后, 下次我们一起合作时, 你会牢记其中的一些提示。希望他们会在你不知道要做什么的情况下通知你, 并提供指导。我希望你了解我们的关系对我很重要, 并且我写这不是要伤害你, 而是要改善我们的关系。

带着爱,

你的前端开发人员