# Web3产品设计（二） By [Elaine](https://paragraph.com/@elaine) · 2022-03-24 --- 上次谈到了2022年Web3产品设计风格的趋势，今天再来介绍一些基本的设计规则。 做产品经理快四年了，有一些自己的感受：中国的产品经理往往也算是UI/UX设计师，原型的质量决定了最后的成品质量，尤其是排版方面，设计师们并不会突破产品经理的框架。 国外的App和中国的App其实很好辨认，国外简洁，舒服，国内繁杂、老派；我一直想知道造成这种巨大差异的原因是什么，最近好像知道了一点点，互联网产品毕竟是舶来品，中国产品经理并没有自己的方法论，但我想国外肯定是有的！ 解释一下方法论这个宽泛的名词，我认为它指的是基础知识，相当于数学这门学科，我们都会背九九乘法表一样。 所以最近看了很多UI/UX方面的学习材料，今天给大家介绍8个基本规则！ 在职场中，掌握一些基本理论非常重要，设计这东西95%的人都爱凭着自己主观感受judge，但如果你是掌握了客观的经验，你就可以非常坚定拥立自己的立场，并且说服他们！ “根据人体习惯来说，人们看设计时眼睛往往会跟随大写的’F’形图案，从画布的左上角开始，然后向下移动，回到右上角，最后是右下角。” ### 什么是好的图形设计 首先，我们需要定义“好的设计”这个概念。它指两方面，第一个引起注意并取悦旁观者的眼睛；第二个必须服务于目的即传达信息。下面，我将介绍“好的图形设计”的八个基本规则。 ### #1-KISS KISS，Keep it simple, stupid。保持简单，保持愚蠢，这和大家熟知的“Less is more”也非常接近，不要让你的设计过于复杂，保持简单。 简洁明了的设计以用户为中心，由于人类的注意力持续时间短且信息大量溢出，因此有必要保证你的设计简单清晰。考虑到这一点，您的布局需要消除所有不必要的内容，例如，不超过三种颜色，不超过两种或者三种字体，设计元素根本不传达任何信息或将长文本分成段落。 每个设计元素都需要服务于一个目的，在动笔设计的时候问问增加的元素是否能更好的理解设计。 ### #2-留白 好的设计最重要的因素是留白，也称为负空间。空白是设计元素之间的空间，未填充文本、图形或者图片的空间，空白区域不一定是白色的，也可以是彩色背景或纹理，只要它不包含设计或内容元素。 客户通常要求每个空间都必须充满信息和元素，但这会使得阅读变得困难，对重要的事情没有给予足够的重视，过度拥挤的视觉效果通常会导致信息无法传达给人们。尽量避免这种情况。建议通过创建段落并通过标题和副标题分割文本，以增加内容的可读性并易于浏览，读者不必搜索重要信息，因为它在您的设计中脱颖而出。 通过在文本和图形元素周围留出空间，您不仅可以创建这些元素的层次结构，还可以将主要焦点放在最重要的地方。 ![](https://storage.googleapis.com/papyrus_images/f1d5b6e7ab567211c308293c36ae0256ac6d707903a3e759441f203624fa6e47.png) 不要害怕将空间留空，这并不意味着您的设计很无聊或者没有吸引力，在您的设计中投入太多会使用户感到困惑，信息过载会分散注意力，并使用户离开。我建议，请谨慎考虑哪些信息是必不可少的，以及发送哪些信息很重要，您应该通过负空间区分出主要的焦点，让用户一眼看到。 ### #3-三分法 理解设计中的三分法则相对简单，在布局中使用网格，将其分成三个大小相同的水平部分和三个大小相同的垂直部分，生成的网格提供了一种路线图，可以帮助你选择放置设计元素的位置。你最终会得到9块区域，线条相交的点表示你设计中的主要焦点区域，将元素靠近这些交叉点可以使其更加突出，而更远的对象将受到较少的关注。 ![](https://storage.googleapis.com/papyrus_images/94574aaffb511c04bf33b869739325e4c74ccc54177cb29448fcb5b84414f1f0.png) 用户在看设计时，往往会用眼睛跟随大写的“F“形图案，眼睛自然而然从画布左上角开始，然后向下移动到左下角，回到右上角，最后是右下角。 三分法网格让您有机会为您的图形设计提供完美对称的外观，人类天生就会被对称性所吸引。虽然对称对于良好的设计并不总是必要的，但平衡是绝对必要的。三分法网格也是帮助您弄清楚如何利用不对称平衡来发挥自己的优势最佳工具之一，如果你的设计不平衡，它会破坏整个外观，使用三分法网格可以帮助您保持良好的平衡，同时仍然保持不对称。 ### #4-黄金比例 黄金比例描述了一种数学规则，用于构建源自自然的比例。这些比例被认为令人赏心悦目并创造平衡，因为我们可以在日常生活的任何地方找到它们，甚至在我们自己身上。将几何元素分为1:1.618的比例，根据黄金比例在您的设计程序中创建一个网格，你可以更清楚的知道应该将设计元素放在哪里，您希望图像有多大或者在哪里留下空白，使用此规则可以找到正确的比例来创造平衡。 ![](https://storage.googleapis.com/papyrus_images/b5388222e1aeb1130dbcd4ff026b9c87910511f3cd387fdd5c03f1a687211319.png) ### #5-层次结构 视觉层次结构是一种重要性组织设计元素的方法，换句话说，它是一组影响我们注意到所见事物顺序的原则。读者最常见的眼动模式是F模式。因为这正是我们读一本书、一封信或者一个网页的方式，我们沿着顶部从左到右扫描页面，并为每一行文本再次扫描，直到页面底部。由于这种自然趋势，设计师在设计网站或者插图时最常使用F模式，当我们不习惯阅读其他方向时，我们会感到不舒服。 更多依赖图像的设计通常以Z模式组成，因为大脑处理图像的速度要比文本快，所以读者可以通过从左到右扫视顶部，然后以对角线方式向下扫视页面，然后再次从左到右。设计师可以通过这种常见的“Z”眼球运动模式来放置重要的元素从而强调构图，想想标题、图像和副标题。 ![](https://storage.googleapis.com/papyrus_images/db7c11634e49c277b3ec5209776b83897814d0364d503d3b5bc857cd051bca24.png) 层次结构是一个说不尽的话题。我们可以通过多种方式使用层次结构，但我们可以挑出一些更好的来理解层次结构的原理。其中之一是尺寸，尺寸可以说是强调视觉元素的最有效方式，较大的元素要比较小的元素更多引起关注，他们可以是文字也可以是图像，它们不仅引人注目，而且带有强烈的信息。让我们以报纸为例，我们总是会在封面上看到一个巨大的标题，以立即引起人们的注意。 ### #6-对比 在设计中显示某些元素的方式就像指南一样，你可以引导用户。本质上视觉层次就是通过对比创建的，对比让用户可以轻松分辨出设计中最重要的元素或者信息是什么，其次是什么等等。但请记住，对比不等于冲突。 有很多方法可以创建对比，其中之一便是通过颜色，颜色可以使你的设计中的特殊元素脱颖而出。颜色越大胆，我么赋予它的意图就越多。 对比鲜明的颜色也可以强调特定元素，而不是更柔和的光谱。例如，将红色物体放在绿色或者黑色背景上要比橙色或者紫色背景相同红色物体吸引更多注意力。 设计中使用的颜色组合被称作配色方案，设计师对配色方案的选择可以在创作中创造统一、和谐、节奏和平衡，但也可以创造对比和强调。人类对冷色的感知要比暖色更亲近。因此，颜色选择上可以选择真正影响观众从设计的背景中识别人物的能力。混合暖色和冷色可以创造深度，就像透视一样。 ### #7-创意字体 说到创意字体，我们要谨慎。您可以将它们用于标题，但不能用于正文，创意字体更难阅读，所以我们不将它用于正文。规则是：如果您的文本超过三行，请不要使用创意字体或者脚本字体。 经典字体是永恒的，其中一些是十八世纪和十九世界创造的，并且仍然很受欢迎。我们每天都在使用它们，我们的眼睛受过训练可以立即识别它们。避免在您的设计中使用超过2-3种字体，每次您认为需要新的字体时，请为现有字体使用不同的字体大小。 ![](https://storage.googleapis.com/papyrus_images/4e298ac9ec04554dc0e617d88475c2f057e0d73c03f8dcdda9c23057c1cfa8cb.png) 在设计中使用多种字体的想法是创造视觉多样性，然而选择字体越相似，它们发生冲突的可能性越大，我们必须在选择不同字体样式时又能找到适当的平衡。 ### #8-按比例缩放 在调整图片的时候，请始终按照比例裁剪。并且我们也并不需要非常高的分辨率，大尺寸意味着高分辨率，也意味着加载时间长和存储空间大。最后，在提供保存文件的选择上，如果是打印，pdf-file永远不会出错，每个人都可以使用pdf文件；如果是图片，jpg压缩了很多数据，体积更小，2而对于动画，应该选择gif。 ### 最后 在实际工作中，我们往往会受到诸多噪音而不能做出自己真正想要的设计，所以我会持续更新一个钱包App，钱包是打开Web3大门的钥匙，今天更新首页～ ![](https://storage.googleapis.com/papyrus_images/c6b69a376dd0b09802a1e48c93e7e029cdae20df0afb20a7e8176d2e6db1f57a.jpg) --- *Originally published on [Elaine](https://paragraph.com/@elaine/web3)*