材料设计的设计技巧

介绍

在过去的几个月中， Material Design在大型设计运动中得到了发展。 我们今天使用的许多应用程序中都可以找到材质设计的不同组成部分，例如内容卡和动画的改进用法。

正如许多博客文章所介绍的那样，一方面，这是一个很好的发展，因为它比以往任何时候都更容易创建可靠的设计。 另一方面，由于每个人都在使用类似的样式，因此有人反驳缺乏创意的声音。 此外，拥有良好的设计语言并不意味着它的使用正确。

在本教程中，我们将介绍如何采用“材料设计”的概念并对其进行改进，以创建更好的界面，同时使它们的视觉样式更加鲜明。 在通过使用Material Design作为起点进行设计之前，我们还将介绍一些常规技巧。

以材料设计为基础

首先，从材料设计到设计界面不应该被拒登。 一点也不。 I，实际上，它有助于为Android用户提供适合的基础。

当要建立良好的用户体验时，通常不建议重新发明轮子。

使用标准是确保您正在构建可行的特别重要的开始。 界面的结构及其交互被证明是有效的。 也就是说，这并不意味着没有错误或改进的余地。

在设计中使用卡片

卡设计示例

Material Design的症结在于内容卡的使用。 现在，卡无疑是可在许多情况下使用的组件，因此它们是非常有用的设计模式。 同时，考虑是否有更多有趣的设计替代方案对您来说可能是一个很好的设计挑战。 随着我们看到越来越多的基于卡片的设计，最好考虑如何设计更好的东西。

以日历为例。 请注意，Sunrise是如何具有组合视图的，而不是每天为每个约会列出一张卡片，您可以在其中看到月视图和日视图。

左：材料设计日历概念； 右：日出

如果您想找到独特的界面作为灵感的一种形式，那么游戏是另一个很好的灵感来源。 请访问诸如UIMovement之类的鼓舞人心的网站，以将新鲜和新型的界面视为灵感。

当您构建接口时，内容卡是不是最佳的解决方案，或者是否有其他有趣的方式显示内容可能是更好的解决方案？

每个应用程序都试图以自己独特的方式解决问题。 有了这种思路，您的解决方案就需要使用另一种类型的界面可能会很有意义。

好吧，您如何进行？ 这一切都从内容和导航开始，我将在下面更详细地讨论。

当心浮动操作按钮

Google收件箱中的浮动操作按钮示例

Material Design引入的另一种设计模式是浮动动作按钮。 浮动动作按钮是在界面中突出显示动作的一种好方法。 同时，它可能是最糟糕的设计机制之一。 有很多方法可以错误地使用浮动操作按钮：

• 将其放置在具有多个核心用户操作而不是一个的屏幕上
• 在浮动操作按钮中隐藏菜单
• 阻碍重要的设计元素

就个人而言，我看到了两个实例，其中浮动操作按钮是对该产品的重要补充，主要是在对用户具有一个核心交互作用的应用程序中。 消息传递应用程序就是一个很好的例子。 浮动操作按钮使用户可以撰写新消息。 优步将是另一个很有道理的例子。 产品的核心相互作用是冰雹汽车。

诀窍是要小心，看看它是否适合您的产品。 这不是因为它是一个标准的界面元素，所以它可能非常适合您的应用程序。 对于用户经常执行多项操作的更复杂的产品，浮动操作按钮很少适合。

用户转换和保留策略

从材料设计作为一个强有力的设计方向开始，有时候在开始设计之前就很容易忘记战略基础。 您如何决定可以从Material Design中使用什么以及可以改进什么？

某些设计选择（例如使用内容卡）可能会 在早期 限制 您。

在下面，您可以找到应用程序中某些元素的简短清单，这些清单需要在进行此类设计决策之前进行良好定义。

提出正确的问题可以使您更好地了解要构建的内容，并以此为基础创建可以更好工作的界面。

导航

• 我的产品中最重要的用户操作是什么？
• 在哪个屏幕上发生？
• 我的产品流程图是什么样的？

总而言之，在构建产品导航时，我倾向于牢记两个简单的规则。

规则1：80/20

应用80/20规则。 我80％的用户只会使用我20％的功能。 如何确保我的那20％功能最容易在我的产品中使用？

规则2：一致性

如果有多种方法可以访问产品中的屏幕，请确保以非常一致的方式进行操作。 例如，从概览屏幕切换到详细信息屏幕应该以相同的方式进行。

基于上述内容，您可以决定哪种方式最适合用户浏览产品。 如果您的产品很复杂，有很多选择，那么抽屉是正确的选择。 简单的产品？ 使用选项卡通常是您的答案。 有关导航和材料设计的更多信息，建议浏览材料设计指南 。

内容

Dribbble上的这种音乐应用程序概念是处理多种类型内容的一个示例。

每个应用都有内容。 以下问题应有助于您从设计角度决定如何组织和显示内容：

• 我拥有哪些类型的内容？
• 我有多少个级别的内容（例如，概述屏幕，然后是详细信息屏幕，最后是操作屏幕）？
• 每种内容的典型长度是多少？
• 显示此内容的最佳方法是什么？ 是清单吗？ 是幻灯片吗？ 它更独特吗？

一旦确定了内容，就可以更轻松地做出设计决策。 在那一刻，您可以定义使用卡是否有意义，或者是否有更好或更有趣的替代方法可用于您的界面。

将不同类型的用户放在首位

您可能面临的最大设计挑战是：

如何确保我的应用程序对新用户和回头用户同样满意？ 这将如何影响我的内容和导航？

这是一个艰巨的挑战，通常归结为有效的入职和确保产品的主屏幕是为用户带来最大价值的屏幕。 您需要一些例子吗？ 看一下以下产品。 他们的主屏幕是什么，它具有什么价值？ 他们如何对待用户入职？

• Instagram的
• 脸书
• 意式浓缩咖啡

以上产品应该给您一些启发。 开始时不要感到气if。 以上产品经过多次迭代才能达到今天的状态。

入职本身就是一个主题。 我建议您查看一些可以为您提供宝贵见解的资源，例如User Onboard 。

界面改进

现在我们有了一个很好的主意，您的产品将如何从根本上起作用，以及可以从Material Design中使用哪些可能的元素，是时候为这些事情加分一点了。 有多种方法可以从美学上改善您的应用程序，以下列出了其中一些方法。

版式

您选择的字体为产品的外观和感觉做出了巨大贡献。 选择自定义字体可以极大地帮助创建更多样化的设计，并在不进行较大更改的情况下为产品应用独特的外观。 找到合适的字体可能很棘手，而且很多也取决于设计风格。 我个人最喜欢的资源是Typewolf 。

影像学

Dropbox是在其产品中应用自定义图标和插图的一个很好的例子。

添加自定义图标是在应用程序中嵌入自己的自定义外观的另一种方法。 由于Material Design已创建了一个很高的标准，因此使用自定义图标非常困难。 对于图标，这意味着某些操作，导航和其他元素具有相同的图标。

如果您决定开始使用自己的图标集，有两个重要方面需要提醒自己：

• 可识别性：确保人们理解每个图标的含义。
• 一致性：通常，避免合并多组图标。

视觉资产

Timehop​​是使用自定义插图创建独特外观的绝佳示例。

您如何显示照片内容或使用插图可以轻松地向应用程序添加字符。 要有创造力。

独特的动画和互动

这是独特动画和相应交互的示例。 资源。

自定义动画和交互需要付出最大的努力，但是看到产品中的生动内容是一件令人满足的工作。 在可以正常工作的独特界面上构建的独特动画是您可以在网上找到的一些最令人满意的设计作品。

独特的配色方案

此设计使用“材料设计”概念，并提供您不希望看到的颜色。 来源 。

材料设计提供了多种颜色供您选择。 这并不意味着您就无法通过使用颜色来创造出真正独特的东西。

告诫

我们每天都知道的大多数界面都是相当简单的设计，这是有原因的，事实证明它可以正常工作，并且用户在使用它时会感到有些熟悉。

实验性设计可能会损害您的应用程序。

就是说，通过一些较小的调整（例如仅专注于字体和颜色），您可以为设计自己的应用程序做很多工作。

结论

当您遇到设计问题时，Material Design会提供舒适的后备。 在此之前，您将拥有所有创造性的自由，可以重新考虑界面的工作方式。 Snapchat打造了一个以手势为中心的产品，Facebook Paper（iOS）重新思考了层次结构和动画，Medium有效地缩小了界面，仅专注于阅读（和书写）。

考虑到这一点，请继续进行设计。 有任何意见或问题吗？ 留下他们的评论或在Twitter上与我联系。

翻译自: https://code.tutsplus.com/tutorials/design-tips-for-material-design--cms-22515