打印设计师转向网络......他们需要知道什么？

Question

我正在尝试为那些正在学习网页设计的学生编写指南。

Web开发人员知道但他们不知道的一些显而易见的事情：

• 您无法在HTML中旋转图形
• 所有对象必须是矩形，不能有圆形DIV
• 无法实现其剧目中的许多印刷效果

有些棘手的事情是：

• 他们有不同的不透明度吗？嗯，是的，没有。
• 他们可以有圆角吗？也许。

有些事情不是技术上的困难，而是问题：

• 图像文件大小：我有一个学生希望在他们网站的每个页面上都有一个不同的大图形标题;这不是技术上问题，但这意味着访问者必须等待每次导航时加载新图形
• 辅助功能：“为什么不把所有东西都变成图形，以克服HTML的限制？”

请帮我填写我的列表，并为进行此转换的人添加任何提示或提示。

Answer 1

网页不打印

• 布局可以是流畅的。
• 元素不必绝对定位
• 需要在多个浏览器中检查网页以确保兼容性
• 避免结肠炎;从经验来看，从印刷到这个领域的人们通过蛮力做所有事情，而不是试图考虑优化和语义目的的优雅解决方案
• 打印在视觉上消耗 - 网络也被视力障碍的人消费。无论市场份额有多小，都不要忘记lynx用户：）
• 语义很重要，了解它们

这就是我现在所能想到的......

Answer 2

来自同时完成印刷设计和网页设计的人（我认为两者都做得不错），看起来你似乎已经有了一个良好的开端。其他想法：

• Darko Z提到了这一点，但我认为值得强调的是，浏览器不兼容性必须才能被识别和处理。在印刷行业中，有像PDF这样的标准格式，可以保证印刷品的外观与设计的外观相同;此外，许多出版商将直接接受最流行的设计程序的原生文件格式，如Adobe InDesign，Quark XPress，甚至MS Word（用于cheapskates ;-P）。关键是印刷设计师习惯于“设置并忘记它”的方法，他们认为一旦他们以某种方式设计某些东西，它就会保持设计。事实上，不同的网络浏览器会使相同的网页略有不同，这可能会成为印刷世界人们的主要痛苦。

• 以上补遗：字体。由于显而易见的原因，您不能在网页设计中使用（或至少不能依赖）不常见的字体。

• 屏幕空间必须有效使用，因为它的数量有限。而且我的意思是真的有限 - 无论你怎么努力，你都不能写HTML会让某人的显示器扩展5英寸或者在后面放另一个屏幕;-)这不像是在打印的地方人们可以在书的不同页面之间来回查看。阅读网页有点像通过双筒望远镜看羊皮纸;你必须考虑到有限的视野设计页面。

• 网页设计是动态和瞬态的;他们熬夜了一段时间，他们变得无聊，他们被新设计回收/更换。所以你不会遇到错误。但这也意味着您需要设计未来的变化，例如：通过使用CSS，您可以轻松地更改整个元素类的外观。在印刷设计中有一些样式用途，但远不及在线。

Answer 3

字体和文字

• 你只限于一小部分 字体
• 字体以不同尺寸查看
• 有一个可读性限制 宽段落应该伸展（在 流体布局）
• 为所有类型的读者写作 - 一些 将浏览，其他人将详细阅读

图片

• 网站的浏览方式不同 分辨率和屏幕尺寸 - 相应设计
• 实现透明背景 IE6，使用带alpha的PNG8（IE6没有 支持不同程度的 透明度，它是100％ 透明或不透明）
• 使用CSS sprites
• 图片不应该用于大部分文字
• img标签应该用于图像 具有语义价值和所有布局 图像应该是CSS图像
• 每个img标签都需要有alt 要验证的属性

（X）HTML和CSS

• 浏览器呈现方式差异很大
• 验证CSS和（X）HTML 设计的概率更大 将是跨浏览器友好的
• 不要使用CSS hacks
• 使用正确的语义标记
• 页面应该能够无需工作 已启用JavaScript
• 阅读雅虎的guide for performance并使用YSlow
• Dreamweaver的设计模式没有 反映页面的显示方式 真正的浏览器

一般设计

• 就简单而言，更简单 可用性，可访问性，设计和 下载大小
• 大于五或六的列表 项目应该在视觉上分解
• 一致性很重要 - 不要 没有改变你的导航等 一个非常好的理由
• 选择颜色时，请保留颜色 心目中的色盲。这将 影响你选择传达的方式 用颜色来表示。
• 放置最重要的信息 在折叠之上（部分） 显示不滚动的屏幕）
• 网络是互动的。这个 大大影响你的消费方式 并显示信息。您可以使用制表符，手风琴和类似方法隐藏和随后显示信息。
• 考虑初级和 次要的行动呼吁。做什么 你想要用户做什么？你在哪里 希望他们下一步？

Answer 4

一些要点：

<强> 1。打印是静态的，网络是互动的。

印刷项目的本质是一个固定的时间点，一个在纸上或其他基板上捕获的想法。 Web项目正在发生变化，改变了代表其创建者和用户的想法的体验。

<强> 2。一切都不确定。

你在答案中提到排版，可能值得扩大以涵盖外观的各个方面。各种可用的操作系统和硬件意味着很难确定所有受众如何体验最终设计。虽然有些东西必须兼容所有浏览器，但有时候在所有系统中制作像素完美所需的时间和精力是不值得的。

第3。了解编程。

除非你有能力，否则你不需要学习如何为网络编程。但是对于熟悉Web编程仍然是一个很大的帮助，就好像你无法编写代码一样，你需要与能够并且你需要能够与他们进行有效沟通的人密切合作。

<强> 4。创建工作原型

当某些东西是静态的时，它可以使用静态格式设计。要设计像网站一样的互动内容，您应该使用移动原型来表示最终设计将具有的行为。您可以使用纸张执行此操作，或使用xhtml，css和javascript或专用原型程序使用更复杂的模型。

Answer 5

请记住将您的jpg文件保存为RGB格式而不是CMYK格式。我经常收到不会在网站上显示的jpgs，而且每次都是因为它以错误的格式保存在Photoshop中。

由于浏览器支持更多图像格式，这将不再是一个问题，但考虑到我们开发的网站上仍有20％以上的用户仍然使用IE6，这将需要一段时间才能消失。

Answer 6

• 用户控制他们想要在网络上查看内容的方式，而不是您。您的设计不会对所有人看起来都是一样的，因为有些人可能会故意将其变为 。
• 屏幕可以任意大或小
• 网络是互动的：可用性胜过漂亮的外观
• 您的页面将由机器读取：确保数据很容易通过无法读取图像/大块文本（也称为“语义”）的脚本获取

Answer 7

对于想要学习如何实际标记HTML和编写CSS的印刷设计师来说，其中很多都是很好的经验法则。但是作为一名Web开发人员，我经常只需要一个设计师的模板并为他们编写HTML和CSS。这项任务是否简单或困难取决于设计师对CSS功能的认识。

特别是有一个痛点不断涌现。因此，对于移动到网络的印刷设计师来说，要记住的绝对头号规则是：

不要将任何元素设计为具有明确的像素完美高度。您可以根据需要限制宽度，但更改字体，首选字体大小以及从中拉出的不同文本字符串不同页面上的数据库意味着文本需要能够垂直流动而不会生成可怕的，难以使用的溢出滚动条。

记住这一点的设计师通常可以想象出易于切割和以大多数语义方式集成的设计。忘记这一点的设计师有时会最终创造出必须用3英寸×3英寸盒子装饰的设计，就在我到达伏特加酒的时候。

Answer 8

给定的颜色或字体在不同浏览器中的呈现方式不同。

特别是当一个浏览器在Windows上而另一个在Mac或Linux等上时

Answer 9

我刚刚写了一篇关于此的博文 - http://aloestudios.com/2008/08/dear-print-designer-doing-web-design/

我的朋友马克也是如此 - http://www.visual28.com/articles/tips-for-better-web-design

Answer 10

Jeffery Zeldman的着作“将你的才能带到网络”是专门针对你提出的问题。它已经出了几年......不确定是否有第二版或第三版。看看吧。

我的主要建议是，您需要认识到，虽然您在打印应用程序中具有点精度，但在网页设计中大部分时间您的重点是设计和编码一个网站，该网站将实现任何数量的内容和布局目标。平台，分辨率和颜色深度。颜色深度变得不像过去那么重要。