这是一个最佳实践主题。
我认为它是一些 Web 开发人员更喜欢的方法。他们不是从头开始进行 CSS 布局，而是先创建一个 Photoshop 模型，然后将其解码为 CSS。
您如何看待这种方法？
最好的，
问问题
745 次
8 回答
10
样机很棒，但我不知道 Photoshop 是否是您为此目的首先要尝试的东西 - 一开始，当您只是想为各种页面获取逻辑布局时网站（在外观和 c 方面改进之前），带有干擦标记和便利贴的白板为早期头脑风暴提供了非常快速、重复的模型重新排列。一旦对一种（或极少数）可能的信息安排达成某种合理的协议，那么视觉上更准确的工具就会发挥作用。
顺便说一句，只是不要忘记在更换白板之前给它拍照（任何像样的手机都可以，你不是在这里尝试高质量;-) 任何时候你可能想要重新审视或思考未来的想法或建议！
于 2009-11-08T01:41:36.260 回答
6
它很快。这就是为什么我总是使用这种方法。在您真正设置好布局之前，您不想花时间构建跨浏览器 CSS。
于 2009-11-08T01:36:10.703 回答
5
大多数网页设计图形艺术家都是这样工作的。
许多程序员只是觉得这是在浪费时间。
它有优点，也有缺点。
优点：
许多图形艺术家对 photoshop/illustrator的了解比对 Dreamweaver 的了解更多。
客户可以预览在任何地方都可以使用的最终产品：mac、pc、firefox，即 safari，等等。在生产的早期阶段与使用 Firefox 的开发人员和使用 MSIE 的客户一起发送 html 预览总是会引起麻烦。
并且不要认为是聪明的一面，涂鸦 MSIE 驱动的 html。从非标准的 html 开始并转换为标准比另一种方式更痛苦。
还有一个问题：许多网站客户倾向于拥有 Mac 并使用 Safari。与一般人相比，Web 用户对图形的品味往往更强烈，因此在这个领域遇到 Mac 狂人的机会比其他领域要高。可以准备更多的设计替代方案，在每个方案上花费更少的时间。在处理客户方面没有指定决策者的阴云密布的高管时，这可能是一个巨大的优势。替代模型将通过手对手传递，直到就一种或另一种设计达成普遍共识。
缺点：
将图形设计“切割”成 html 成为一项额外的工作，目前尚不清楚谁会为这些额外的时间买单。
它有利于以图形为中心的僵化设计工作流程。客户先发制人地同意给定的预览，这就是他们通过合同得到的。每一次图形修改都意味着金钱、行为和编程，反而往往没有被模型很好地定义，或者最糟糕的是，模型定义不明确。
追求像素完美的跨浏览器遵守模型可能会让你发疯。如果您与客户就给定的刚性设计达成一致，那可能会成为一个可怕的问题。
肮脏的 CSS 技巧会渗透到您的设计中。使用 HTML 模型，客户会批准一个由代码驱动的设计，并且使用较少的技巧。
无论如何，我不建议将 Photoshop 用于样机，而是使用inkscape。（或者插画家，如果你在午夜将成堆的钱烧成魔法圈来崇拜土坯）
涂鸦阶段也很好，同时与客户现场讨论合同。
我更喜欢铅笔和纸而不是毡尖，而且我会通过网络摄像头拍摄用于存档和电子邮件转发的想法。当谈到涂鸦时，任何人都会做感觉更自然的事情。
不做任何事情并依靠示例站点示例和屏幕截图进行图形参考始终是一种选择。
于 2009-11-08T04:45:59.743 回答
3
如果你以这种方式高效，为什么不呢？当他们在一堆尖括号中输入时，并不是每个人都能完美地设想他们的网站。
更严肃地说：这是你的工作，所以你有责任以一种能让你有效地做到这一点的方式去做。
于 2009-11-08T01:38:30.197 回答
1
在进行原型设计时，选择正确的保真度很重要。 BoxesAndArrows的这篇文章很好地介绍了各种选项及其用途。
我特别喜欢文章引用的比尔巴克斯顿的这句话：
没有高保真或低保真之类的东西，只有适当的保真度。
在Facebook 设计团队的这个 TechTalk 中，他们提到了他们如何在设计过程中使用 Photoshop（IIRC 它在中间的某个地方，但我似乎无法转发视频）。
于 2009-11-08T03:55:35.697 回答
1
我是一个非常了解 html 和 css 的网络程序员。我可以使用图形程序来实现它的基本功能，但设计一个完整的图形网站不是我的事。
我让平面设计师使用他或她的图形程序来创建一个漂亮的布局，然后用 html 和 css 手动编写网站代码。
它对我有用，并为我的客户提供他们喜欢的设计（因为图形设计师总是会做出比大多数网络程序员更漂亮的设计）。
于 2009-12-30T10:58:32.273 回答
0
敏捷方法会建议在与客户协商后轻松修改的内容。Dave Thomas 在Agile Web Development with Rails中建议在纸上涂鸦。但是除非你真的知道自己想要什么，否则任何事情都必须比直接使用手工 CSS 更好。
我正在考虑说“涂鸦可能不会为了正式的演示而剪掉它”，但是很棒的 SO 人群在评论中击败了我......
于 2009-11-08T01:36:46.727 回答
0
就个人而言，在我工作过的每一家 webdev 公司，我总是首先在 photoshop 中进行模拟。直接跳入 CSS 和标记更多的是一种自下而上的方法，对许多程序员来说很有意义，但在 Web 开发中，你必须牢记要考虑美学和遵循的创造性方向。您的产品仅具有功能性是不够的，它需要专业创意总监/图形设计师的投入才能使产品看起来和使用起来令人愉悦。
以我的经验，问题一直与团队成员的僵化作斗争。注重美学并拒绝损害其设计完整性的平面设计师；这有时会导致不可能或极其困难和无语义的布局。在有可行解决方案的情况下断然拒绝损害代码完整性的开发人员——这可能不太优雅。关键是要有一个非常熟悉 CSS 以及什么是可能和不可能的创意团队，以及一个理解设计和美学重要性的工程团队。
在我的自由职业生涯中（受益于在两个阵营工作），我发现首先在 Photoshop 中制作模型要容易得多，因为我知道我能做什么和不能做什么。而且 Photoshop 模型比 CSS 和标记更容易根据客户反馈进行更改。此外，如果您可以向您的客户展示一个模型，他们会感到更安全，因为他们知道他们的资金将用于一个有明确方向的精心计划的项目。
希望这可以帮助！
于 2009-11-10T03:23:59.200 回答