搜索内容：
时间：2019-08-02
编辑:网站制作公司
793
0
如果你像我一样，你会同意项目的初始设计阶段可能很耗时，充满挫败感，很少在第一次批准会议上满足客户的期望。如果有更好的方法可以解决问题怎么办？随着风格瓷砖的设计方法块最新的孩子，有。
有人说，在Photoshop中为网页设计项目创建完整模型的日子即使不是彻头彻尾的死也会消亡。其他人则表示，在浏览器中进行设计并不是完全可以解决的问题。但我们是否都领先于自己？也许这不是我们应该关注的工具，而是我们设计新网站和管理客户审批流程的整个方式。
杭州网站制作在本教程中，我们将密切关注Style Tiles - 一种思考初始设计阶段的新方法，一种由无与伦比的Samantha Warren创造和构思的设计方法。我们将会看看它们是什么，为什么要使用它们，并引导您完成如何为下一个项目创建和实现样式平铺的过程。
[Style Tiles允许你] ...为客户提供界面选择，而无需投资多个photoshop模型。- 萨曼莎沃伦
准备好了解更多？让我们开始吧。
在最简单的形式中，Style Tile是一个常见元素的单页集合，包括颜色，排版，纹理，图案和设计特征。如果室内设计师可以向客户展示包含油漆芯片，织物和杂志剪报的情绪板，那么进步的网页设计师可以向他们的利益相关者展示一套风格瓷砖。
关于Style Tiles的重要一点是，它们并不是网站外观的字面表示; 相反，它们有助于根据您在初始启动会议中从客户那里学到的内容来定义网站的情绪，语气和“感觉”。
另外要记住的是，样式平铺方法不是框架，定义过程甚至是工具。相反，Style Tiles围绕一系列指导方针，技术和方法构建，使您可以专注于设计中真正重要的事情（至少在新项目的初始阶段）。首先下载psd模板以帮助您入门，但您可以随意将Style Tiles塑造成您自己的工作流程和创意美学。
让我们看看几个例子，向您展示如何呈现样式图块。我反向工程两个网站会让你知道他们的风格瓷砖可能看起来像在最初的设计阶段：
这款Style Tile基于最近改版的Tuts + Premium网站。
正如您所看到的，Tuts + Premium网站的精髓在这个Style Tile中得到了很好的体现。我们专注地定义了网站主要橙色展示部分的一些设计元素，并传达了博客文章的感觉和外观（即教程列表）。
重要的是，因为Style Tile不是针对特定的屏幕尺寸，方向甚至是“数字”之外的任何东西而呈现的，所以很容易想象该网站在从桌面到平板电脑到智能手机的任何设备上的外观。
为了一点乐趣，这里是我对http://styletil.es网站本身在初始设计阶段的样子的解释：
请特别注意此Style Tile的形容词部分。所有颜色，排版选择和设计纹理都以某种方式与这些形容词对话，确保样式图块在设计，色调和品牌信息方面都是一致的。
让我们来看看这两个样式图块的一些共同相似之处：
客户徽标：仅仅因为它们不是文字模型，并不意味着我们不能将它们标记给特定客户。毕竟，这是专业的客户演示！
可能的颜色：选择最重要的颜色。您不限于五种颜色 - 可以随意使用尽可能多的颜色，也可以根据项目要求使用少量颜色。
纹理：不要将纹理与Photoshop图案混淆。该区域用于挑选一些强烈传达特定信息的关键设计元素。将纹理更多地视为设计元素。您将在上面的样式文件示例中看到，我已经选择了功能区的边缘，数字标题和插图的一部分，它们都传达了与项目总体设计方向相对应的特定消息。
形容词：可以说是风格平铺中最重要的部分，形容词部分是描述客户，品牌或网站目的的最重要单词的精华。我们将在稍后讨论如何更多地了解这些形容词。
排版：使用此部分定义网站的潜在标题，段落文本和链接。
按钮：这两个站点都试图让访问者访问该站点以执行某个操作：在Tuts +站点的情况下，它是让用户注册Premium程序。在Style Tiles的情况下，用户可以下载Photoshop模板。因此，在这两种情况下，最终站点上的“号召性用语”按钮非常重要。对于其他不需要按钮的网站（例如博客），您可以选择省略此部分并将其替换为其他部分。
背景：虽然没有必要使用Style Tile，但我选择将两个站点的背景图案转换为Style Tile本身。同样，在两个最终站点中，背景图案是关键设计元素。计划保持设计简单吗？只需将Style Tile的背景保持为中性色。
版本：每个样式平铺应包含项目名称和版本号。这使您可以轻松地与客户端讨论设计并减少混淆（例如，“我喜欢版本1中的颜色，但更喜欢版本3中的按钮”）。
正如我之前提到的，Style Tiles不遵循固定格式。事实上，你可以包含任何东西 - 只要它在某种程度上是设计概念的基础。例如，您可以选择删除“按钮”部分，并将其替换为自定义视频播放器，某些描述的窗口小部件或某些表单元素。
总结一下，在Style Tile中捕捉网站的整体方向，但随意展现您的创意肌肉。
风格瓷砖不仅仅是另一种如果你有时间的方法来收集网页设计工具包底部的灰尘。在正确实施它们时，它们为您和客户提供了许多非常棒的好处：
最重要的是，Style Tiles保持初始设计阶段和客户审批流程简单。
在第一次会议之后向客户展示功能齐全的设计，可能会错过树木的森林。客户可以自信地谈论整体设计方向如何反映他们的目标（“我，而不是客户对小设计功能的痴迷（”嗯......我认为社交按钮需要更加'笨拙'）。就像这些颜色如何给人一种信任感，这对我的Acme小部件来说是完美的“）。
请记住，我们的客户通常不是设计师，但往往知道他们喜欢什么，即使只是一般性的。Style Tiles是一个完美的工具，可以让外行人员谈论整个设计，而不会堆积在几十个单独的设计元素上，这些元素很快就会变得混乱和压倒性。
像素完美的模型需要时间。即时的。小时和小时。
您不仅需要将所有这些费用计入最终发票中，如果您创建三个单独的组合，那三分之二的时间直接进入硬盘驱动器上的“未使用的资源”文件夹 - 更不用说两个客户资金中三分之一的最终账单中的部分资金也随之冒烟。
另一方面，使用样式平铺，迭代不同版本是一个非常快速的过程，同样可以快速进行更改。使用样式图块意味着您可以简化设计过程，在项目的早期阶段保持动力，并在几分钟而不是几小时内响应变更请求。
从透视角度来看，上面两个示例样式文件每个花了我大约20分钟（如果我更好地命名我的图层，我将花费15分钟）。
我只是从这里的经验来讲 - 每个设计师都是不同的 - 但如果你要创建三个独立的Photoshop模拟，那么创建一个完美的，一个非常好的和一个相当平均的，并且远非如此你最好的工作。你向客户介绍这三个，尝试在你的旗舰设计上出售它们，并且总是选择你最不喜欢的那个设计......现在你被困在一个你不为之骄傲的网站编码而且也不是'也符合客户的最佳利益。
即使您创建了三个完美的组合，您也可以自豪地编写代码，但很容易变得富有创意。Style Tiles允许您快速尝试不同的设计概念，并根据客户定义的需求为客户提供真正的设计选择。
好吧，那么让我们说你不使用Style Tiles，你选择向客户提供一套完整的设计组合。
你用什么介绍他们？一个960px宽的桌面版？iPad版怎么样？不要忘记iPhone版本。哦，但请确保您还要处理Kindles，Blackberrys以及过去几年中生产的500多种移动Android设备。那么当他们问“自从布什担任总统以来我最喜欢的掌上飞行员怎么样？”
风格瓷砖并不意味着尺寸和装置; 只是设计是数字化的。- 萨曼莎沃伦
今天，网络以数百种方式访问，每个设备都有自己的断点，怪癖和功能。
接近项目初始设计阶段的更好方法是将设备完全排除在外。Style Tiles的优点在于它们完全与设备无关。
当然，您需要解决网站在项目后期如何响应和/或适应不同设备的问题，但在最初阶段，它只是混淆了水面，以便将网站的最终功能与整体设计方向相结合。
现在您已经了解了Style Tiles的内容，而且您已经将它们作为完整设计组合的替代品出售，我确信您已准备好破解Photoshop并开始创建您的第一个Style Tile 。
哇，那里，牛仔。稍安毋躁！在开始推动像素之前，我们需要确定客户的需求和目标，并将其转化为允许我们形成明智的设计决策的概念。
创建样式平铺的四个步骤如下：
听
译
限定
重复
困惑？不要。让我们详细了解每一步。
无论您是与客户亲自坐下，在Skype上与他们交谈还是依靠电子邮件，您都需要花费一些时间和精力来了解他们的业务和网站目标。如果不这样做会让你陷入一条黑暗，可怕的假设和猜测之路，几乎总能确保最终结果不成功以及客户不满意。
这个发现过程不仅仅是向他们询问他们喜欢的颜色以及他们喜欢的网络上的其他网站。虽然我们可以轻松地获得有关客户端有效提问的完整教程，但以下是一些可帮助您入门的发现策略：
每个人都喜欢谈论对他们来说重要的事情。
一旦你让客户谈论他们的业务，你会发现很难让他们停下来。事实上，在这个阶段，他们对业务的谈论越多，最终结果就越好。
以下是一些初步问题，以帮助您的客户热身谈论他们的业务：
谁是您的典型客户？您想要访问您的网站的是哪类人？
谁是你的竞争对手？
您与竞争对手的区别是什么？
您的产品/服务适合市场（例如，最便宜/最昂贵/最高质量/最具创新性等）
对您的客户有什么重要意义？（尝试获得超过“低价” - 对于任何产品或服务的最终用户来说，这几乎不是唯一重要的事情）。
您希望网站访问者完成哪些操作？（例如，注册简报/购买产品/关注他们的Twitter帐户/等）
一旦你掌握了一些基本问题，并且你对他们的业务有了更好的了解，就可以深入挖掘并真正确定客户的需求，并挑选一些有助于你创建的关键概念下一步的设计方向。
虽然人们经常发现难以将抽象的概念和感受转化为陈述，但人们喜欢用隐喻来谈话 - 只要你提出正确的问题。
这里有一些问题可以帮助您入门：
如果你可以选择任何名人来支持你的品牌，他们会是谁？它们反映了您的品牌/产品/服务？
如果您的产品/服务/品牌是汽车品牌，它会是什么？
如果您的产品/服务是一个人，他/她会看什么电视节目？他/她会听什么音乐？
如果您的产品/服务是一个人，他们最好的朋友会用什么样的词来形容他们？（例如“友好”，“强”/，“有趣”等）
一旦你完成了客户项目的核心，就可以为整体设计建立一个基线语音。
有不同的方法可以做到这一点，但一种有效的方法是让客户完成一个互动调查。通过一些创造性的HTML，CSS和Javascript，您可以创建一组滑块，允许客户将其品牌定位在一系列二分法之间：
看看这个例子，我已经在考虑为我们的虚构客户设计一个有趣，色彩缤纷的复古风格设计。当你看到这个时，会立刻想到什么样的设计概念？
一旦我们询问了我们的客户，就该抽出客户项目，产品和网站需求的精髓了。这部分过程的目的是定义一个描述单词的选择，这些单词将填充Style Tile的“形容词”部分。
我们来看一个例子吧。以下是我们的虚构客户在发现阶段对您说的一些陈述：
“我的产品很复杂，而且我的客户通常都会尝试学习更多，而不会让他们感到困惑。”
“我的竞争对手都非常认真。我希望我的网站与他们无聊的网站截然不同”
“我希望我的网站访问者感到舒适并且不会受到产品的威胁”
“我的客户大多是年轻女性，她们对市场营销或行话没有太大的耐心”
从这些陈述中，你的工作是确定一个形容词，描述他们对你说的关键信息。
这里有四个形容词，我们可以用来总结上述陈述，深入了解客户真正对我们说的话：
到了点
开玩笑
无障碍
实际一点
现在我们已经定义了这组形容词，我们已经开始实际上开始将单词翻译成设计。虽然你对上述形容词的解释可能与我的略有不同，但我们的设计很可能会分享共同的元素 - 或者至少，我们能够相互描述为什么我们做出了我们做出的选择。 。
唷！全都搞过了？好消息：我们做了咕噜咕噜的工作，现在我们得到了一些乐趣。一旦我们将整个发现阶段归结为四到六个炸药形容词，就可以创建你的第一个Style Tile了。
继续浏览http://styletil.es并下载Photoshop模板（或创建自己的模板）。
接下来的步骤完全取决于您。发挥创意！我假设你已经掌握了很好的Photoshop，所以我不会引导你完成每一步（Photoshop模板很容易定制），但主要的想法是创建一系列设计元素（颜色，纹理，按钮，排版等）与您在上一步中到达的形容词对话。
一旦你创建了你的第一个Style Tile，就该清理平板并进行迭代了。你应该创建的版本没有固定版本，但每个项目的三到四个样式文件可能是在探索足够的独立设计概念和不用太多选项压倒客户之间的良好平衡。
请记住，每个样式图块的形容词可能相同，但它们也可能不同 - 特别是如果您发现很难分解客户的需求，或者他们为您提供了一些不同的替代方案，以便作为其中一部分进行探索。质疑阶段。
例如，根据我们在第二步中发现的问题，我们可能会提出三组独立的形容词，这些形容词都是相似的，但又足够不同，可以为我们虚构的客户采用不同的设计方法：
第一版：重点关注，无障碍，有趣，脚踏实地。
第二版：古怪，独特，内容丰富，幽默
第三版：友好，熟悉，放松，值得信赖
正如您所看到的，这三组形容词都可能导致一个非常不同的设计方向。这就是Style Tiles真正成为他们自己的地方。通过一些快速的颜色和排版更改，您可以在非常小的时间内轻松创建三个完全不同的迭代。
确保您的客户知道会发生什么
现在您已经创建了样式图块集，现在是时候将它们呈现给您的客户。与此流程的每个步骤一样，要实施多种策略以确保您获得最佳结果，并且您的客户有信心继续执行项目的后续步骤。
您的客户不应期望您提供完整的设计组合，仅为您提取样式图块。在提问阶段结束时，向您的客户展示您已创建的其他样式图块的示例，并解释其设置网站设计方向的价值。
确保您的客户在演示会议之前知道您将展示他们的内容！
让您的客户自由地谈论您的设计概念，但要确保您不要太容易让他们摆脱困境。鼓励您的客户扩展他们的陈述。通过一些有效的提问，我们可以将空语句转换为异常语句：
“我喜欢这个，因为我认为你已经抓住了我品牌喜欢的乐趣”
“我不喜欢这个，因为它让我想起了我的竞争对手的网站太多了，我想把我的业务分开”
“这种设计需要通过添加我的客户都喜欢的亮粉色来增加流行度”
“我不喜欢这种勃艮第的颜色，因为它让我的产品显得古老而闷热”
“你能让它看起来更像Apple的网站，因为我的客户都是以技术为中心的早期采用者”
请记住，当您每天，每天都设计网站时，很可能这是您的客户以前没有多少经验。要有耐心，帮助客户澄清他们的陈述，引导他们做出有价值的陈述，但绝不要根据客户对工作的一般性，袖手旁观的反应做出假设。
在项目的早期阶段（即在客户审批过程中），样式瓷砖是完整设计组合的更好替代方案，但根据您的工作方式，完整的模型可能是项目的下一步，如果是您既定工作流程的一部分。
现在您已经定义了设计的方向，并且客户已经签署了您的Style Tile版本之一，您可以确定您的comp将更接近满足客户的期望，而不是直接开放Photoshop在初次会议之后。模型不仅更接近于通过集合，而且也不需要创建设计的多次迭代 - 已经使用我们的样式图块完成了工作。
根据您希望如何处理客户工作，这些都是项目其余部分工作流程的完美可行示例：
样式平铺>线框>样机>代码
样式平铺>线框>代码
Style Tile>样机>代码
风格瓷砖>代码
杭州网站制作感谢您和我一起阅读所有关于Style Tiles的内容，方式和原因的内容 - 我希望您喜欢学习它们，因为我喜欢写关于向您介绍它们的内容！
Style Tiles是一种接近设计过程的革命性方式，可帮助您和您的客户从最复杂和最复杂的项目中为网站制定明确的方向。
3
s后返回登录
3
s后返回登录
