视觉设计提升实用指南

原文：The Practical Guide to Improving Visual Design

作者：Filippos Protogeridis

持续提升你视觉设计能力的实用秘诀

👋 嘿，我是 Filippos！欢迎阅读本期的 Designary 时事通讯。这篇文章是我最近一篇帖子的深度解读。如果你是新来的朋友，我平时主要撰写关于产品设计的内容，包括框架、职业建议和高级技术技巧。我每个月还会举办一个产品设计挑战。    如果你刚接触产品设计，我也推荐你看看我的产品设计大师课，这是一个自学式的、端到端的产品设计课程，适合初学者和中级设计师。

视觉设计真的很难。

在近十年里，我们总听到一种声音：视觉设计不重要啦，很简单啦，产品设计师应该把时间花在产品思维、用户体验 (User Experience, UX) 基础、工作坊、设计系统 (design systems) 等等上面。

然而，那些我们天天在用、爱不释手的、由设计引领的顶尖产品，无一不对视觉设计、工艺和打磨（指对细节的精益求精）倾注了大量心血。

随便想想那些现代的“产品驱动型”公司：爱彼迎 (Airbnb)、多邻国 (Duolingo)、Stripe、优步 (Uber)。在它们的每一个交互细节中，你都能感受到它们对设计“手艺”的热爱。

事实就是这么扎心：在一个一切都“系统化” (systemized) 的世界里，视觉设计真的很难练习。所有的资源和文档似乎都在告诉你，这玩意儿根本不需要“练习”。

在这篇文章里，我将为你拆解练习视觉设计技巧最重要的几个方面：

  • 基础

  • 设计语言

  • 实践知识

  • 复刻他人作品

  • 重塑过往作品

  • 增加多样性

打好基础

在你一头扎进练习之前，搞懂视觉设计在用户界面 (User Interfaces, UI) 中的那些基本功至关重要：

  • 排版 (Typography)

  • 色彩 (Color)

  • 层级 (Hierarchy)

  • 布局与间距 (Layout & Spacing)

根据你的背景，你可能需要对这些方面进行一次“魔鬼式”的深度学习，或者，也许你只需要复习一下，了解它们在用户界面中是如何协同工作的。

研究设计语言

仅仅通过研究那些被广泛使用的“设计语言” (design languages)，你就能收获海量的知识。这能让你透彻地理解：操作系统是如何定义核心指南的，以及它们是如何使用交互模式 (interaction patterns) 和组件 (components) 的。

设计语言

你需要练习什么

在这一步，你寻找的是：

  • 理解设计语言是如何定义它们的排版和色彩系统的。

  • 理解布局和间距是如何运作的。

  • 理解导航是如何工作的。

  • 熟悉标准组件，比如标签栏 (tab bars)、按钮 (buttons)、表单 (forms)、表格 (tables)、轻提示 (toasts)（一种短暂的浮窗提示）、横幅 (banners)、底部弹窗 (bottom sheets) 等等。

  • 熟悉关键的交互模式：例如，什么时候该用“模态框” (modals)（即必须处理的弹出窗口），什么时候又该用全屏 (full screens)？

从其他设计系统中学习

研究“设计语言”是个很棒的起点，但你可能还想了解，各大公司是如何创建它们自己独特的设计语言和界面工具包 (interface kits) 的。

最好的办法，就是去查找那些由顶尖的、设计驱动型公司所发布的开源或公开的“设计系统” (design systems)。

我个人最喜欢的一个资源是 The Component Gallery。在这里，你不仅能找到公开的设计系统，还能看到对标准 UI 组件的详细分解，以及它们在每个设计系统里是怎么被使用的。

💡 实用技巧： 每当你设计一个新组件时，试着去研究一下其他流行的设计系统是怎么用它的，它们有哪些“变体” (variations)，以及为什么这么做。这将帮助你用“系统” (systems) 而不是“屏幕” (screens) 来思考。

获取实践知识

想在视觉设计上加速学习，最简单的方法之一就是找一本专注于“实战技巧”而非“空洞理论”的书。

大约 14 年前我刚入行时，我的大部分知识都来自“试错” (trial and error)。这方法管用，但它花了我好几年的时间才明白自己错在哪里，以及如何修正。

幸运的是，今天有大把的实用资源，你可以用它们来加速学习，理解设计更好界面的关键方法、技巧和技术。

我个人最爱推荐（也是我给我带的所有团队推荐）的，是 Adham Dannaway 写的 Practical UI。这本书非常易读，全是关于用户界面设计的简短、实用的技巧，包括基础知识、常见错误和修正方法，以及那些能提升你思考和设计用户界面能力的经验之谈。

这里还有几本提供实用技巧的 UI 设计书籍，你可以根据需要选择：

建立直觉和肌肉记忆

尤其是在你职业生涯的早期，无论你学了多少设计基础，你都还没有建立起足够的“设计直觉” (intuition) 或“设计肌肉记忆” (design muscle memory)。

  • 你可能会在间距或对齐上犯错

  • 你可能会不小心混用了不同的文本样式

  • 你可能会选了搭起来不好看的颜色

锻炼“设计肌肉记忆”的最好方法，就是通过有意识的 重复 (repetition)。

而练习重复的最好方法，就是去“复刻” (copying) 那些不同风格的流行产品，并理解它们背后浮现出的模式。

幸运的是——和我 14 年前刚起步时的方法完全不同——现在有成吨的工具可以帮你做到这一点。

方法论 💡

  • 去一个设计灵感库（我强烈推荐 Mobbin、Appshots 和 Pageflows），找到一个能启发你的产品。

  • 下载一套屏幕截图，最好是一个完整的流程，或者至少是流程的一部分。

  • 把它们粘贴到 Figma（一款主流的 UI 设计工具）里，然后试着从零开始把它们“复刻”出来。

  • 密切关注布局、间距、色彩、排版，以及任何让界面显得精致、愉悦的小细节。

  • 每周练习一次，最好是换着不同类型的产品来练（比如移动端 vs. 网页端，消费者产品 vs. 企业级产品）。

灵感网站

(根据你需要的灵感类型任选一个)

💡 实用技巧： 每周，都用灵感网站来回顾和消化新的设计趋势。找一本视觉设计书籍，学习里面的实战技巧。

重塑你的过往作品

想要提升视觉设计能力，很大一部分工作在于“识别” (identifying) 你以前犯过的错误，并从中学习。

没有什么比“重访” (revisit) 你以前的作品并改进它更好的方法了。时隔 3-6 个月后，用全新的眼光去审视你曾经做过的产品或功能，这对你实践所学知识大有裨益。

方法论 💡

  • 每隔 3 个月，就回头看看你以前的设计并打磨它们：哪里不灵了？现在你会怎么做？

  • 基于你通过其他方法学到的所有知识，找出问题所在和原因：

    • 间距是否一致？

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

    • 它是否给人一种品牌感和愉悦感？

    • 有没有办法改善层级，或者彻底重新思考布局？

尝试不同产品和风格

最顶尖的视觉设计师总是在不断探索不同的风格。

但是，当你被“锁死”在单一产品或某个设计系统的条条框框里时，探索新风格就变得 几乎不可能。

如果你是在一家公司做全职设计师，无论你多么有创意或“企业家精神”（指主动创造和探索的精神），你靠自己能探索的范围都是非常有限的。

有几个办法可以绕过这个限制。

我认识的一些最有才华的设计师，他们是通过 “做私活” (freelancing) 来让自己的视觉能力变得超强的。这种持续不断地接触不同媒介、不同形态、不同行业产品的“摩擦” (friction)，可以极大地加速设计师视觉能力的进化。

然而，做私活并不适合每个人。你可能正享受着一份全职工作，而这份工作不允许你干“外快”。

好消息是，无论你现在的工作状况如何，总有其他更灵活的解决方案。

本质上，你需要 在你日常的工作限制之外 做一些探索性的工作：

  • 为你常用的某个热门产品做个“概念设计”

  • 从零开始创造一个概念产品

  • 参加一个真实的设计挑战

探索什么？

  • 企业级 (B端) 产品 vs. 消费者 (C端) 产品

  • 亲和风格 vs. 严谨风格

  • 插画风 vs. 摄影图风

  • 移动端 vs. 网页端产品

  • 极简界面 vs. 内容密集型界面

  • 不同的行业和垂直领域

💡 实用技巧： 每周，都留出一些时间，去做点和你日常工作“完全不同”的事情。这可以是一个虚构的产品，一个你真正在用的产品，或者一个设计挑战。

总结一下这套方法

  • 每日： 每天都用灵感网站来回顾和消化新的设计趋势。找一本视觉设计书籍，学习里面的实战技巧。

  • 每周： 使用灵感网站“复刻”一个产品流程。理解关键模式、他们如何使用布局和间距、如何运用色彩和排版，以及那些增添愉悦感的任何小细节。

  • 每 3 周： 做点和你日常工作不一样的事情。可以是个“副业项目” (side project)，一个设计挑战，或者一个改进方案。

  • 每 3 个月： 回顾你以前的设计，记下哪里不对劲，然后试着反思你的方法并改进它。

*感谢阅读这篇深度指南！*如果你刚接触产品设计，我也推荐你看看我的产品设计大师课，这是一个自学式的、端到端的产品设计课程，适合初学者和中级设计师。

来源： https://blog.designary.com/p/the-practical-guide-to-improving

See all posts