研究已经完成(目前)。 进行了访谈，数据得到了综合。 确定了目标用户以及他们的需求和痛点-问题揭晓了。 解决方案已经概念化，草绘，测试，评估，迭代，再次测试，线框，原型设计，然后进行了更多测试。

现在是星期六的下午2点，您突然发现自己处于饥饿，脱水状态，并且处于沙发上的胎儿位置，抱着一个不冷不热的水壶，就好像它是您的长子一样。 您会感到自己的尊严开始消失，变得虚弱无力，剩下的意大利辣香肠和肮脏的袜子都成了您的耻辱，这是昨晚举办的披萨派对的副产品，旨在庆祝您的设计团队迄今取得的成就。 您沉迷于一杯过量的葡萄酒，感觉到糖过量的所有症状，但是您应该得到第四片冰淇淋蛋糕的每一分。

快进到星期一(由于是设计界，车轮一直在转动)。 您开始喜欢改善的睡眠时间表，并且设法将咖啡量控制在2杯以内，而不是平时的4杯。别上当了，辛苦的工作还没有结束。 但是现在是时候玩些乐趣了。

无论是在设计过程中进行到这一步的一切都涉及到您的贡献，还是是交由坏蛋用户体验设计师团队处理(不客气)，作为UI设计师，您都有责任采用中保真线框，原型和油漆都是金子。

在制作高保真模型和画面完美的屏幕设计之前，您需要解决一些议程项目。 为了本文的方便，我们假设您已完成作业并分析了竞争对手的视觉样式，并准备进行下一步……。样式标题。

我已经看到了无数短语，用于表达样式图块的本质。 “视觉工具”，“可交付的设计”，“概念”。 坦白说，它们都是正确的。 标记没有正确或错误的方法。 我们毕竟是创意者。 如果您的定义与我的定义不同，而我的定义与另一位设计师不同，那么它就不是吗？ 只要您的样式图块通过视觉参考和样式集合帮助讲述有关您的设计的故事。

简而言之，样式图块是可交付的设计，允许设计师为高保真设计概念化潜在的视觉方向。 在此处定义外观设计或产品的视觉语言。 这个可视化工具有助于创建Web和移动应用程序，因为它提供了探索未知领域的空间。 可以将其视为在提交一个设计要素之前尝试不同设计要素的一种方法。

这就像为您的Daenerys Targaryen服装购买了三顶独特样式的假发，在三张照片中都捕捉了一些Khaleesi风格的照片，然后在返回其中的两张之前先征求了朋友的第二意见。 结果？ 您在万圣节前夕摇晃了最有名的，恶龙之母的恶龙之母。

而且，如果您不是GOT迷，请想象自己在购物中心里，而不是购物中心，而是互联网，而不是衣服，鞋子和小玩意，周围是图标，字体，版式，颜色和无限的机会。 样式瓷砖就像是设计试衣间—您可以在这里混合使用和匹配您所收集的内容，以查看在大型夜晚之前(或在这种情况下，在产品发布之前)哪些组合效果良好。 有时需要花一秒钟的时间才能找到有价值的东西，这将需要您继续挖掘黄金。 其他时候鞋子恰到好处。

我离题了。 对于这个特定的职位，我将不再赘述，但我不能承诺超出此范围。

概念的创造者萨曼莎·沃伦(Samantha Warren)将样式瓷砖与“油漆碎片”和“布样”之类的东西进行了比较，室内设计师在设计房间之前就获得了批准。 在第一次启动会议上，室内设计师不会为客户设计三个不同的房间，那么为什么Web设计师要设计三个不同的网页模型？ 说得好，萨曼莎，说得好。

需要注意的一点：情绪板，不要与样式拼贴相混淆，通常是图像和颜色的拼贴，用于传达一般思想和主题以及唤起某些感觉。 样式图块会更深入地探索色彩和图像之外的领域。 为了让您更好地了解差异，我同时附上了我设计的情绪板和样式图块。

对于您和您的客户而言，创建瓷砖都是一种低风险，高回报的血清素加标活动。 尽管在某些情况下不是必需的，但强烈建议您这样做，因为它使设计师能够在高保真屏幕上完全发送之前呈现设计概念。

在设计过程中纳入样式图块会在您与客户之间建立对话，从而定义产品的潜力。 它为执行前对设计方向的批评和接受反馈打下了基础，最终有助于为您的设计系统定下基调，并为整个构想的成功做好准备。

在创建样式图块时，您实际上是在创建假想方案，以帮助您通过设计美学和视觉元素传达特定的消息和感觉。 利用它们将帮助您保持一致并与客户品牌的总体原则保持一致。

您将能够评估哪些工具可以很好地协同工作，哪些工具看起来很坦率，并且可以灵活地返回到图纸板上，重新组装需要微调的所有零件。

您会问，您将探索什么“未知领域”？ 开箱的东西很多，但不应该增加皮质醇水平。 请记住，您选择展示的任何视觉元素最终都应该传达出您要设计的品牌/产品的精神。

字体，配色方案，界面元素，甚至形容词都是您将要探索的多种视觉元素。 需要注意的一件事是，没有严格的准则或固定格式可以遵循，但是在创建一个准则时要牢记某些要素。 只要选择包含的视觉元素在某种程度上对于基础产品是必不可少的，那么您就可以随心所欲。 通常，来自客户的现有品牌元素将影响样式图块的某些方面，但我将与您讨论。

我鼓励您探索至少2个独特风格的图块。 使用样式图块的格式和布局进行创新的加分点。 夸耀自己的技能，并以结构化的方式测试水域； 它们并不一定都是彼此抄本。

copy on the web)尝试使用不同的权重和大小，但要针对要设计的特定设计界面，请参考iOS / android准则(例如，网络上的正文复制必须至少设置16像素)

• 我建议为您的调色板选择3–6种颜色

incorporate some of those colors regardless.这可能只是个人喜好，但我通常不会在调色板中包括中性色(黑色，白色，裸色，米色等)，除非它确实突出了它，因为我知道无论如何我都会结合其中一些颜色。

• 您的客户可能愿意探索新的颜色变化，但很可能已将其设置在当前调色板上。 展示其他产品并没有什么坏处，但是如果您的客户不想您在这方面浪费时间，那就结合他们的颜色。

按钮的形状，大小，颜色

know what is expected of you in this piece. 如果这是一个新品牌，请尝试为它们创建一些不同的徽标。 这看似容易，但肯定需要一段时间，因此，请与客户讨论以确保您了解此片中的期望。

might show a different color).如果要加倍努力(jk，这将需要三秒钟)，则可以显示选择导航按钮时的外观(例如，它可能显示不同的颜色)。

但是，有时他们可能会使利益相关者感到困惑，因为它带来了将其转换为高保真模型的挑战，因此请谨慎选择。 除非是图案或纹理，否则我通常将图像留在情绪板阶段

准确描述品牌的形容词或关键字

您甚至微交互，激活时按钮的外观和行为，甚至充实整个屏幕来测试水域。 显示结合了建议的视觉效果的高保真屏幕的样机，可以使客户清楚地看到各个元素的内聚性。

以下是两个我为同一个样机项目设计的风格迥异的图块的两个示例，目的是使您了解如何使概念相互唯一和区别。

免责声明：在为响应式Web和移动设备提供字体大小指南之前，请先创建这些内容，因此所显示文本的大小显然不适用于或不适合所展示的移动设备设计。

像对待初次约会一样对待这些瓷砖，就像在调情，探索未知，测试水域，或者如果您愿意……致力于卓越。 在这里，您可以挥舞怪胎的旗帜，真正展现出您作为设计师的艺术潜能。

如果您关于项目文件管理的看到，您就会知道我是数字列表支持者。 但是在这种情况下，我建议您给这些图块起一个麻辣的标题，其中包含了所体现的视觉效果的本质。 不要偷懒，只需将它们称为选项a，b或c，1、2或3。您就是一个创造者。 用你的额叶皮层。 在您的辛辣标题中，绝对要记住，如果您想进一步探索这些图块，请添加版本号(例如“ Calm and

对于初学者，您将需要方便的花花公子设计工具来容纳所有这些元素并建立您的家庭基础。

Adobe XD，Figma，Illustrator，Photoshop，Sketch和其他易于设计的工具是您设计秀的亮点，因此，请熟悉它们并提供备份选项，以防万一。您可以使用Canva或其他即插即用网站但是，如果您与客户一起工作，那么它看起来不专业且懒惰。 您可以在Microsoft Paint(回溯)中进行尝试，但我不能保证您会走得很远。

• (喜欢这一点，因为您可以上传一张图像，生成的色彩方案与之完美匹配)

• (这也很适合寄宿，因为它可以从图像中提取调色板)

• 强烈建议您在任何搜索引擎中键入“ UI设计套件” 。 是一个不错的选择，但您可以在线找到大量免费下载。

tiles. 与设计中的许多其他事情一样，请进行研究。 使用他人的创造力可能会受到限制-确保您的字体样式和其他视觉元素不需要特定的许可或使用上有漏洞。 如果需要您支付字体包的费用，请与您的客户确认在使用它们之前，您可以购买它们。

two links below 有大量的IOS和Android设备(移动设备，平板电脑，笔记本电脑，台式机等)免费和付费下载。 您可以简单地在网络或移动设备上搜索设备模型，或查看以下两个链接

• 我为您创建了几个，您可以对其进行插拔和转换以适应您的需求，从而节省了一些时间。

• 制作样式瓷砖的主要目的是在首先进入设计大量高保真模型之前，视觉上探索独特的美学。

designing for. 它们使设计师可以自由尝试，尝试做出决定，并确保设计协调一致，并模仿其设计的品牌和产品的本质。

• 通过实施它们，您可以节省您和客户的时间，并确保您和利益相关者保持一致。 这不是一件容易的事，但是却充满了乐趣！

忠告...不要为这块汗水。 当然，这可能需要对竞争对手的视觉风格进行一些研究(强烈建议您先进行视觉竞争分析，然后再进行分析)，但是这种激情满足了您的愉悦。因此，放松一下下颚可以吗？ 如果您喜欢概念化，那么您将深入研究设计过程的这一部分。

• (由另一个书呆子制作)

感谢您的阅读！ 我的目标是使我的设计者对学习感到愉快，并且我精心制作了自己的博客，使之成为“公司”和考特尼之间的桥梁。 我希望这可以帮到你。 反馈和建议，随时欢迎 ：)。