跳到主要内容

为响应式网站创建样式原型

一个关键的挑战响应式网页设计在网站的视觉设计方面确定适当的可交付成果。你应该创建全宽Photoshop网站comps和调整设计,直到客户满意为止?移动和平板电脑宽度分辨率怎么样?或者你应该直接跳到浏览器设计?

这些都是可以接受的选择。但在我们寻求最有效和最有用的过程中,我们已经将样式原型作为我们的初始设计可交付成果(可以在这里查看实时版本)。

  • 查找本教程的源文件这里

什么是样式原型?

样式原型是一个单独的HTML页面,显示建议的网站颜色,排版,按钮样式,翻转,摄影样式和其他必要的元素,以建立网站的建议设计方向。目标是让客户了解其网站的可视语言的位置,而无需为网站上的所有独特模板创建Photoshop comps。风格原型与Samantha Warren相似风格瓷砖但它是浏览器中的实际HTML页面,而不是静态JPEG。

为什么用一个?

样式原型的主要优点是,只需最少的时间,您就可以向客户展示网站建议的可视语言的快照。它使他们能够及早了解设计,并有助于防止在Photoshop或代码中花费数小时或数天的情况,客户端最终拒绝这样做。

因为它在浏览器中,所以当从comp转到代码时,它也减少了客户端的混淆。网站的静态JPEG与浏览器中显示的编码方式之间的差异总是存在差异。由于客户端正在他们选择的浏览器中查看原型,因此讨论不同浏览器如何呈现代码是一个很好的机会。此外,显示Web排版,按钮和按钮悬停状态以及构建我们的样式原型相应地增加了另一层交互性并为客户带来了清晰度。

We’ve shown we’re envisioning the logo mark and logotype treated separately and floated left. As for type, we’re showing styling for an h1, h2 and paragraph text

我们已经展示了我们正在设想徽标和标识分别处理并向左浮动。至于类型,我们正在显示h1,h2和段落文本的样式

构建样式原型

构建样式原型是为了创建一个既有用又易于复制的可交付成果。创建它不一定是严格的顺序或过程,但是应该包含基本元素。除此之外,您可能觉得有必要根据您的需求或优先级显示其他项目。我们发现它可以很好地包含一个或两个特定于我们正在构建的网站的元素,例如插图,自定义图标集或注册表单。

我们如何建造它

我们使用SCSS作为CSS预处理器,并使用SCSS变量来定义颜色等项目。这样,当我们创建下一个原型时,可以轻松编辑。我们的样式原型也响应并使用媒体查询。我们通常保持简单,只使用一个媒体查询,但它有助于向客户端显示不同元素对不同浏览器宽度的反应。

Here we’ve chosen six colours. The way we’ve structured the swatches, if we add or delete colours, we adjust the percentage width of the individual colour swatches

在这里,我们选择了六种颜色。我们构建样本的方式,如果我们添加或删除颜色,我们会调整各个颜色样本的百分比宽度

为简单起见,我们将构成样式原型的每个“模块”保留在自己的div元素中。例如,这是最后一个模块的HTML代码,设备:

STRY网站

除了标题之外,没有特定的源顺序可供遵循,但最好先显示排版,颜色样本和按钮等基本元素,然后是可能包含更多特定内容的模块。现在,让我们更详细地讨论我们在原型中包含的内容。

对于标题,目标是显示客户的徽标将如何定位。最后,站点导航可能会被置于标题中,但我们现在不必担心。导航有太多复杂性,特别是在移动宽度上,我们目前不想进入。我们想要传达徽标的定位方式以及徽标的颜色或纹理。

活版印刷

这是我们展示如何显示标题,小标题和正文的地方。我们通常会尝试在这里显示h1,h2和段落样式。它取决于适用于您项目的内容。此外,这是一个展示您如何设想通常工作的类型对齐的好地方。

颜色样本

样式原型的一个重要部分是颜色样本。这将为整个站点建立调色板。通常,这些颜色可能是由客户的品牌标准指南预先建立的。其他时候它可以解释。在任何情况下,样本应该触发与客户关于调色板的良好对话,以及哪些颜色应该是主要和次要的。

A style prototype for Sparkbox’s own site. A header/logo, typography, colour palette and a button are typically included

Sparkbox自己网站的样式原型。通常包括标题/徽标,排版,调色板和按钮

我们创建了一个SCSS变量文件,它使我们能够在一个位置更改站点的调色板。然后在SCSS中引用这些变量。

// COLOR PALETTE $ primary:#50b7c8; $ secondary:#252525; $ neutral:#265e67; $ secondary1:#a3eaf5; $ secondary2:#F0592B; $ secondary3:#3f3d3d;

按键

关于样式原型的一个好处是,它允许客户端与按钮交互并了解翻转状态的意图。通常,我们只显示一种类型的按钮,通常用于号召性用语。

附加项目

除了这些项目,我还想包含一个或两个更具体的项目元素。这可能是您计划使用的图像,照片处理,图案或纹理。这有助于客户将项目与样式原型相关联,同时查看与其项目相关的内容。

As you can see in our example, we’ve chosen to show styling for an event, illustration and work example/device treatment

正如您在我们的示例中所看到的,我们选择显示事件,插图和工作示例/设备处理的样式

我们学到了什么

我们现在一直在使用样式原型大约九个月,我们在此过程中学到了一些东西。要记住的主要事情是,样式原型需要具体到足以启动有价值的反馈,但要足够模糊,以免它感觉像是一个真正的网页。

确保您的客户知道这里的目标是获得对设计方向的一般感觉,并且不要对如何在页面上布置事物感到困惑。我们过去一直处于两个方面,我认为我们终于到达了一个我们认为在响应式设计过程中既高效又有用的地方。我鼓励你试一试,看看它是否适合你。

话: 杰里米·洛伊德

这篇文章最初出现在网络杂志问题244

喜欢这个?阅读这些!



翻译字数超限