如何给网站一个样机外观?

平面设计 网站设计 css 界面设计 小样
2022-02-11 21:50:34

编辑以澄清感谢您提供现有答案。恐怕你误解了我的问题。我不想创建模型(我有一些,但它们不适合我目前的目的)。我想要一个工具(可能像免费提供的 CSS 主题一样简单),它可以使我现有的、正常运行的半成品 ASP MVC 站点看起来像一个模型。


我老板的老板决定我必须向我的利益相关者展示我工作的当前阶段,这样他们才能对我正在为他们开发的 Web 应用程序有感觉。这是一个新开发的项目,因此用户对与先前版本的接触没有任何期望。他希望它至少有点可点击,所以我不能去发布我正在使用的模型。它必须是当前开发阶段的运行版本。

我想让忙碌、挑剔的中层经理清楚地知道,他们所看到的不是他们将要得到的,而是早期的草图。这是一件非常敏感的事情,因为我的申请增加了经理的文书工作量。因此他们已经对项目怀有敌意,倾向于以最糟糕的方式看待原型,从设计质量得出预期的应用质量,并抱怨尚未开始实施的重要功能缺失。

为此,我想给我的页面一个手绘的外观,就像典型的模型一样。它应该远远地喊“我是一个草图”,这样任何人都不会误认为它是真实的。

有什么好的方法来创造这样的外观?有没有比手动创建自己的样机外观 CSS 更有效的方法?我在这样的任务上投入的时间非常有限,而且我在设计方面也缺乏经验。我不需要完美的外观,页面也没有什么复杂的,所以解决方案越简单越好。

3个回答

首先想到的是使用线框工具(例如Balsamiq)来创建模型。这给人一种非常“不完整”的感觉:

Balsamiq 样机元素

不幸的是,我不相信你可以从 Balsamiq 导出工作的 HTML/CSS,所以我会使用他们的风格作为灵感来生成你的“样机 CSS”。

这可能是因为我每天都与 Photoshop 打交道,但我总是将棋盘格与不完整的东西联系起来。

棋盘格

如果不是这样,那么也许某种用于背景的网格将有助于传达未完成的外观。

我过去见过的类似情况的一个例子是Stack Exchange 测试版网站的旧样式:

SE Beta Sites 旧样式

它非常模糊,但你可以看到他们在其他样式元素中使用网格作为背景,使其看起来非常未完成。

与 Balsamiq 类似的是Wireframe Sketcher。它确实允许可点击性。

另一个类似的程序是Pencil,但开源且免费