👋 Hey, it’s Filippos! Welcome to this issue of the Designary newsletter, which is an in-depth take on a post I recently made about practicing visual design. If you are new here, I write about product design, including frameworks, career advice and advanced technical tips. 👋 嘿，我是菲利波斯！欢迎阅读本期 Designary 时事通讯，这是对我最近发表的一篇关于实践视觉设计的帖子的深入探讨。如果您是新来的，我会写有关产品设计的文章，包括框架、职业建议和高级技术技巧。 我还每月举办一次产品设计挑战赛。如果您是产品设计新手，我还建议您查看我的产品设计大师班 ，这是一门面向初学者和中级设计师的自定进度、端到端产品设计课程。

视觉设计很难。

我们花了近十年的时间听说视觉设计不是必需的，它很容易，产品设计师应该只花时间利用他们的产品思维、用户体验基础知识、研讨会、设计系统等。

然而，我们使用和喜爱的最突出的、以设计为主导的产品非常注重视觉设计、工艺和润色。

想想任何以产品为主导的现代公司：Airbnb、Duolingo、Stripe、Uber。他们对实际设计工艺的热爱在每一次互动中都很明显。

这是一个残酷的事实：在一个一切都是系统化的、所有资源和文档都指向认为它不应该实践的世界里，视觉设计真的很难实践。

在本文中，我将分解练习视觉设计技能的最重要方面：

  • 基本

  • 设计语言

  • 实用知识

  • 重新创建其他作品

  • 重新混合旧作品

  • 增加多样性

掌握正确的基础知识

在开始练习之前，您必须了解适用于用户界面的视觉设计基础知识：

  • 字体排印学

  • 颜色

  • 等级制度

  • 布局和间距

根据您的背景，您可能需要深入研究这些方面，或者只是复习和实用技巧来了解它们作为用户界面的一部分如何工作。

研究设计语言

只需学习广泛使用的设计语言，您就可以获得大量知识。它将使您深入了解作系统如何定义核心准则，以及它们如何使用交互模式和组件。

[

](https://substackcdn.com/image/fetch/$s_!63gH!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fad696364-23e3-41a2-afa1-d66d9ac44cd2_1434x1191.png)

设计语言

练习什么

在此步骤中您要查找的内容如下：

  • 了解设计语言如何定义其排版和颜色系统。

  • 了解布局和间距的工作原理。

  • 了解导航的工作原理。

  • 熟悉标准组件，例如选项卡栏、按钮、窗体、表格、Toast、横幅、底部工作表等。

  • 熟悉关键交互模式：例如，何时使用模态与全屏？

向其他设计系统学习

学习设计语言是很好的第一步，但您可能还想了解不同的公司如何创建他们独特的设计语言和界面套件。

最好的方法是查找著名的、设计驱动的公司开源或公开可用的设计系统。

我最喜欢的设计系统资源之一是组件库 ，您可以在其中找到公开可用的设计系统，以及标准 UI 组件的细分以及它们在每个设计系统中的使用方式。

💡 实用提示： 每次设计新组件时，请尝试了解其他流行的设计系统如何使用它、它们使用哪些变体以及原因。它将帮助您在系统中而不是在屏幕上思考。

获取实用知识

加速视觉设计学习的最简单方法之一是获得一本专注于实用技巧而不是理论的书。

近 14 年前，当我开始我的产品设计职业生涯时，我的大部分知识都来自反复试验。它奏效了，但我花了数年时间才意识到我做错了什么以及如何解决它。

幸运的是，今天，您可以使用大量实用资源来加快学习速度并了解设计更好界面的关键方法、技巧和技巧。

[

](https://substackcdn.com/image/fetch/$s_!18Zh!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F61902e5a-63a4-43d7-97e3-2396a7b63400_1434x1174.png)

我最喜欢的建议（我对与我合作的所有团队都使用）是 它非常容易阅读，其中包含有关用户界面设计的简短实用技巧，包括基本知识、常见错误和修复方法，以及将改进您思考和设计用户界面方式的经验技巧。

有几本 UI 设计书籍提供了实用技巧，您可以在下面找到这些书籍（根据您的需要选择一本）：

建立直觉和肌肉记忆

尤其是在你职业生涯的早期，无论你对设计的基础知识有多少研究，你都不会建立足够的直觉或“设计肌肉记忆”。

  • 您可能会在间距或对齐方面犯错误

  • 您可能会意外地组合不同的文本样式

  • 您可能无法选择搭配良好的颜色

建立设计肌肉记忆的最佳方法是通过正念重复。

练习重复的最佳方法是复制不同风格的流行产品并了解出现的模式。

幸运的是，与我 14 年前开始时采用的方法相反，有大量工具可用于做到这一点。

[

](https://substackcdn.com/image/fetch/$s_!qewA!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa0288631-0de5-4752-bb19-9dec3c973a86_1434x1222.png)

方法 💡

  • 转到设计灵感库（我强烈推荐 Mobbin、Appshots 和 Pageflows）并找到一款能激发您灵感的产品。

  • 下载一组屏幕，最好是完整流或至少部分流。

  • 将它们粘贴到 Figma 中并尝试从头开始重新创建它们。

  • 注意布局、间距、颜色、排版以及任何使界面精美和令人愉悦的小细节。

  • 每周练习一次，最好是在不同类型的产品上（移动与网络、面向消费者与企业）

灵感网站

（根据您需要的灵感类型选择一个）

💡 实用提示： 每周使用灵感网站来回顾和消化新趋势。获取一本视觉设计书籍并研究其实用技巧。

重新混合您的旧作品

提高视觉设计技能的一个重要部分是识别您以前的错误并从中吸取教训。

没有比重新审视您以前的工作并改进它更好的方法了。对您 3-6 个月前开发的产品或功能进行全新演绎可以为练习您正在学习的一切创造奇迹。

[

](https://substackcdn.com/image/fetch/$s_!s06x!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F38c09e8b-a9bd-4013-9525-89729a4dc290_1434x1206.png)

方法 💡

  • 每 3 个月返回一次您以前的设计并完善它们：什么不起作用？你会做些什么不同的事情？

  • 根据您通过其他方法收集的所有知识，确定哪些内容不起作用以及原因：

    • 间距是否一致？

    • 您是否使用了太多不同的文本或颜色样式？

    • 感觉有品牌感和令人愉悦吗？

    • 有没有办法改进层次结构或完全重新考虑布局？

从事不同的产品和风格

最好的视觉设计师不断探索不同的风格。

然而， 当您在单个产品或设计系统的限制内工作时 ， 探索样式几乎是不可能的。

如果您在一个组织中担任全职设计师，那么无论您多么有创造力或创业精神，您自己只能探索这么多。

有几种解决方案可以解决这个问题。

我认识的一些最有才华的设计师通过自由职业变得非常有视觉能力 ;与不同媒介、格式和行业的产品的不断摩擦可以极大地加速设计师视觉技能的进步。

然而，自由职业并不适合所有人。您也可能从事您喜欢的全职工作，不允许从事户外工作。

好消息是，无论您当前的工作情况如何，您都可以深入研究其他更灵活的解决方案。

从本质上讲，您需要在常规工作限制之外进行探索性工作 ：

  • 对您使用的热门产品进行概念性工作

  • 从头开始创建概念产品

  • 接受现实的设计挑战

[

](https://substackcdn.com/image/fetch/$s_!FAsI!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Facd31a1e-2ee0-4807-a0f3-9009e8449f23_1434x1350.png)

探索什么

  • 商业产品与消费品

  • 友好与严格的设计风格

  • 插图与照片密集

  • 移动产品与基于网络的产品

  • 极简主义与内容密集型界面

  • 不同行业和垂直领域

💡 实用提示： 每周，留出一些时间做一些与你的日常生活完全不同的事情。这可以是虚构的产品、您使用的真实产品或设计挑战。

方法总结

  • 每日： 每天，使用灵感网站回顾和消化新趋势。获取一本视觉设计书籍并研究其实用技巧。

  • 每周： 使用灵感网站重新创建产品流。了解关键模式、它们如何使用布局和间距、如何使用颜色和排版，以及任何为界面增添乐趣的小细节。

  • 每 3 周： 做一些与你的日常生活不同的事情。这可以是副业、设计挑战或改进

  • 每 3 个月： 回顾您以前的设计并记下哪些地方不对劲，然后尝试通过重新思考您的方法来改进它。

感谢您阅读这份深入指南！ 如果您是产品设计新手，我还建议您查看我的产品设计大师班 ，这是一门面向初学者和中级设计师的自定进度、端到端产品设计课程。

[

](https://substackcdn.com/image/fetch/$s_!DLib!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8e0e981e-027e-4091-865f-a1b5a2658c4a_1080x1788.jpeg)