这是一篇关于最佳实践的主题。
我发现它是一种受到某些网页开发者青睐的方法。他们不是从头开始进行CSS布局，而是先制作Photoshop模型，然后将其解码为CSS。
您对这种方法有何看法？
祝大家一切顺利，
8个回答
10
模型很棒，但我不知道 Photoshop 是否是你想尝试的第一件事情 - 在最初阶段，当你只是试图为网站的各个页面获得一个逻辑布局（在其外观等方面进行细化之前），白板上用干擦笔和便利贴可以提供非常快速、重复的模型重新排列，以进行早期的头脑风暴。一旦有关信息的一个或几种可能的安排已经达成了一些合理的协议，然后视觉上更准确的工具就开始发挥作用了。
顺便说一下，在更改白板之前别忘了拍照（任何体面的手机都可以，这里不需要高质量;-) 任何时候，如果有想法或建议，您可能希望将其记录下来以便未来回顾或思考！
- Alex Martelli
2
啊，旧版的Git只有3.2百万像素。 - Alex Mcp
我喜欢格子纸。它可以画出完美的正方形和矩形！赞一个模拟版本。 - tahdhaze09
6
它很快。这就是为什么我总是使用这种方法的原因。在确定布局之前，您不希望花费时间构建跨浏览器CSS。
- Martin Dale Lyness
5
大多数网页设计图形艺术家都是这样工作的。许多程序员认为这是浪费时间。它有优点和缺点。
优点：
- 许多图形艺术家比起使用 Dreamweaver 更熟悉 Photoshop/Illustrator。 - 客户可以在所有平台上预览最终产品：Mac、PC、Firefox、IE、Safari等。在生产早期阶段，将 HTML 预览发送给使用 Firefox 的开发人员和使用 MSIE 的客户通常会引起麻烦。不要试图聪明地书写 MSIE 驱动的 HTML，从非标准 HTML 开始并转换为标准更加痛苦。 - 还有一个问题：许多网站客户倾向于拥有 Mac 并使用 Safari。Web 承诺者对图形的口味比平均水平更强，因此在这个领域中遇到 Mac 狂热者的机会比其他领域更高。 - 可以准备更多的设计选择，每个选择花费的时间更少。当处理没有指定决策者的执行团队时，这可能是一个巨大的优势。不同的模型将传递手到手，直到就某个设计达成普遍共识。
缺点：
- 将图形设计“切割”为 HTML 是额外的工作，不清楚谁会支付额外的时间成本。 - 它倾向于以图形为中心、刻板的设计工作流程。客户预先同意给定的预览，并按照合同得到相应的结果。每次图形修改都意味着更多的费用，而行为和编程往往没有被模型很好地定义，或者更糟糕的是未被定义。 - 追求像素完美的跨浏览器依从性可能会让你发疯。如果您与客户达成了一个给定的刻板设计，那么这可能成为一个追求的严重问题。 - 肮脏的 CSS 技巧会混入您的设计中。使用 HTML 模型，客户将批准由代码驱动的设计，并且不需要使用太多技巧。 总之，我不建议使用 Photoshop 作为模型，而是使用 Inkscape（或Illustrator，如果您在午夜时分向 Adobe 烧钱并制作魔法圆圈）。在与客户现场讨论合同时，草图阶段也很好。我更喜欢用铅笔和纸来涂鸦，我会使用网络摄像头拍摄想法以进行归档和电子邮件转发。在涂鸦方面，任何人都会做自己感觉最自然的事情。不做任何涂鸦，仅依赖示例网站和屏幕截图作为图形参考也是一个选择。
优点：
- 许多图形艺术家比起使用 Dreamweaver 更熟悉 Photoshop/Illustrator。 - 客户可以在所有平台上预览最终产品：Mac、PC、Firefox、IE、Safari等。在生产早期阶段，将 HTML 预览发送给使用 Firefox 的开发人员和使用 MSIE 的客户通常会引起麻烦。不要试图聪明地书写 MSIE 驱动的 HTML，从非标准 HTML 开始并转换为标准更加痛苦。 - 还有一个问题：许多网站客户倾向于拥有 Mac 并使用 Safari。Web 承诺者对图形的口味比平均水平更强，因此在这个领域中遇到 Mac 狂热者的机会比其他领域更高。 - 可以准备更多的设计选择，每个选择花费的时间更少。当处理没有指定决策者的执行团队时，这可能是一个巨大的优势。不同的模型将传递手到手，直到就某个设计达成普遍共识。
缺点：
- 将图形设计“切割”为 HTML 是额外的工作，不清楚谁会支付额外的时间成本。 - 它倾向于以图形为中心、刻板的设计工作流程。客户预先同意给定的预览，并按照合同得到相应的结果。每次图形修改都意味着更多的费用，而行为和编程往往没有被模型很好地定义，或者更糟糕的是未被定义。 - 追求像素完美的跨浏览器依从性可能会让你发疯。如果您与客户达成了一个给定的刻板设计，那么这可能成为一个追求的严重问题。 - 肮脏的 CSS 技巧会混入您的设计中。使用 HTML 模型，客户将批准由代码驱动的设计，并且不需要使用太多技巧。 总之，我不建议使用 Photoshop 作为模型，而是使用 Inkscape（或Illustrator，如果您在午夜时分向 Adobe 烧钱并制作魔法圆圈）。在与客户现场讨论合同时，草图阶段也很好。我更喜欢用铅笔和纸来涂鸦，我会使用网络摄像头拍摄想法以进行归档和电子邮件转发。在涂鸦方面，任何人都会做自己感觉最自然的事情。不做任何涂鸦，仅依赖示例网站和屏幕截图作为图形参考也是一个选择。
- ZJR
2
我同意这篇文章，除了一点。Inkscape根本不能替代Illustrator。没有一个像样的开源替代品让我感到痛心。 - SingleNegationElimination
我同意Illustrator比Inkscape更强大。透视和Pantone™颜色，这是我想到的前两个区别。但对于Web原型设计，它可能拥有所有必要的工具。 - ZJR
3
如果你能通过这种方式提高工作效率，为什么不呢？并非每个人在输入一堆尖括号时都能完美地想象他们的网站。
更严肃地说：这是你的工作，所以你有责任以一种能够让你有效完成工作的方式来完成它。
更严肃地说：这是你的工作，所以你有责任以一种能够让你有效完成工作的方式来完成它。
- Carl Smotricz
1
我是一名网页程序员，对HTML和CSS有相当的了解。我可以使用图形程序进行基本功能操作，但设计完整的图形网站不是我的强项。
我会让一位图形设计师使用他或她的图形程序创建一个漂亮的布局，然后手动编写HTML和CSS代码来制作网站。
这对我很有效，并且为我的客户提供了他们喜欢的设计（因为图形设计师总是能够制作比大多数网页程序员更漂亮的设计）。
- Edelcom
1
在原型设计时，选择正确的保真度非常重要。BoxesAndArrows的这篇文章提供了各种选项及其用途的良好介绍。
我特别喜欢比尔·巴克斯顿在文章中引用的这句话：
没有所谓的高或低保真度，只有适当的保真度。
在Facebook设计团队的这个TechTalk中，他们提到了如何在设计过程中使用Photoshop（如果我没记错的话，这是在视频中间的某个地方，但我似乎无法快进）。
- hexium
0
敏捷方法建议与客户协商后轻松修改。Dave Thomas在使用Rails进行敏捷Web开发中建议在纸上涂鸦。但是，除非您确切知道自己想要什么，否则任何东西都比直接处理手工CSS要好。
我曾考虑过说“涂鸦可能不适合正式演示”，但是SO社区的众多评论者已经超越了我...
- DigitalRoss
2
纸上涂鸦可以用于头脑风暴，但客户通常希望看到更加精细的东西。 - Martin Dale Lyness
是的...网络上充满了这样的轶事，即最伟大的Web设计是在一些肮脏的小餐馆里用餐巾纸背面完成的。 - Carl Smotricz
0
就我个人和我所工作的每一家 Web 开发公司而言，我总是先在 Photoshop 中进行模拟。直接跳进 CSS 和标记语言更多地是自下而上的方法，并且对许多程序员来说是有意义的，但是在 Web 开发中，您必须记住要考虑美学和创意方向。仅仅使产品功能正常还不够，它需要专业创意总监/平面设计师的参与，以便使产品外观和使用愉悦。
根据我的经验，问题总是困扰着团队成员的不灵活性。那些将美学放在首位并拒绝妥协其设计完整性的平面设计师；这有时会导致布局变得不可能或极其困难和不语义化。开发人员会坚决拒绝在可行解决方案存在的情况下牺牲其代码完整性 - 这可能会稍微不那么优雅。关键在于有一个团队，他们非常熟悉 CSS 可能和不可能做到的事情，并且工程团队理解设计和美学的重要性。
在我的自由职业生涯中（曾经有过在两个阵营工作的经验），我发现先在 Photoshop 中制作模型要容易得多，因为我知道我能做什么和不能做什么。而且，与 CSS 和标记相比，Photoshop 模型更容易根据客户反馈进行更改。此外，如果您可以向客户展示一个模型，他们会感到更加安全，因为他们知道他们的钱正在投入一个经过精心规划、具有明确方向的项目中。希望这可以帮助到您！
- Iain Fraser
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接