1.设计中的视觉

直观的设计并非偶然。每个精美的界面背后都有关键的视觉原则，指导元素的放置、大小和样式设置。在本文中，我们将结合实际案例，分解 13 条设计基本原则，向您展示如何运用这些原则创建美观且实用的界面。

2.视觉设计原则有哪些

作为一名 UI 设计师，想要创作出成功的设计，需要牢记很多东西正因如此，我们整理了这份视觉设计原则清单有时，将这些基础元素分离出来，以便你能够分别理解，可能会带来意想不到的改变在这里，我们将向您介绍十三条视觉设计原则，包括它们的含义、重要性以及如何使用它们。

3.视觉设计法则

让我们开始吧！设计的视觉原则是什么？为什么它们很重要？视觉设计原则是UI设计师所有工作的基础它们至关重要，因为它们确保你的用户界面实用且赏心悦目无论是确保实现层次结构或对比度，还是为项目选择最佳色彩，所有这些因素在设计时都应考虑。

4.视觉设计要素有哪些

虽然你可能不会像我们在本文中那样逐一研究它们，而是会从整体上来看待设计，但它们都扮演着重要的角色你应该了解每一个元素，这样你才能知道如何在网站或应用中放置元素特别是，它们有助于塑造用户体验，通过运用这些视觉原则，使你的项目更易用、更易于理解。

5.设计中的视觉法则

设计的 13 条视觉原则（附示例）1. 颜色在 UI 设计中，色彩用于传达情感、增添多样性并提升视觉趣味它还能区分不同的网站色彩在心理上极其重要，色彩理论也深刻影响着我们对各种色彩运用的理解例如，如果你以前没见过红绿灯，你可能会惊讶地发现绿色代表通行，红色代表停止。

6.视觉设计的基本原则

这是一种习得的行为，但它已经根深蒂固，以至于我们可以在其他语境中用红色和绿色来表示通行和停止例如，请看下面#3对比下的例子中红色的用法如果对于我们这些熟悉红灯的人来说，红色不代表停止，那么这个例子就行不通了。

7.设计视觉效果

2. 排版排版并非文本内容本身，而是文本的外观它指的是文本在页面上的排列方式，包括使用的字体、间距和大小，以及不同文本（例如页眉和正文）之间的关联方式不同的字体传达不同的信息，虽然通常可以沿用经典字体，但一些特别古怪或原创的内容可能需要不同的字体。

8.视觉设计方法

例如，在 Disney+ 应用上， 《星际宝贝》的专属页面上内容丰富，但由于只有迪士尼的标志和《星际宝贝》的片名使用了奇怪的字体，所以效果还不错尤其是《星际宝贝》的字体，虽然有点奇怪，但由于它比其他字体都大，而且与它所关联的电影完美契合，所以并没有引起人们的注意。

9.视觉设计的四个原则

3. 对比对比的目的是突出设计元素，无论是通过颜色、大小还是其他方面对比是强调设计中不同元素的绝佳方法例如，对于无法撤消的操作，用红色来表示按钮是一个很好的方法，可以确保该按钮醒目且引起注意，例如下面的世界时钟应用。

10.视觉设计原则的内容

当你处于编辑模式时，该应用会在每个城市旁边显示一个红色按钮点击该按钮，该城市就会消失

对比度是可访问性的一个重要方面，因为缺乏对比度会使设计细节难以看清特别是，视障人士可能无法阅读文本，因此请确保对比度足够4.平衡您在页面上布置的设计元素可以创造平衡，因为每个元素都有其重量，无论是柔软而短暂的还是沉重而引人注目的。

这种平衡可以是对称的，也可以是不对称的当你使用每个元素都具有相同权重的设计元素时，例如在页面上使用大小相同的正方形，你就创建了一个对称的设计这种设计让人感到宁静祥和当你使用具有不同权重的设计元素时，例如大小不同的正方形，你就创建了一个不对称的设计。

这种设计让人感到紧张或不安例如，TranscriptionPuppy 选择对称布局来描述他们的转录过程以及您为什么应该选择他们。

另一方面，剃须刀公司 Harrys 选择在其主页上采用不对称布局，并带有剃须刀的图片。

5. 强调强调强调元素在页面上是否突出设计中的某些部分可能很重要，因此需要强调；也可能不重要，因此需要弱化不同程度的强调会通过颜色、对比度、比例、位置等因素增强或减弱某些信息的影响力例如，在下面的Fly.io主页上，他们用大号粗体字强调标题，后面跟着更详细的描述。

但你可能会先看到紫色的“5 分钟内部署”按钮，因为它的颜色是亮紫色

6.视觉层次另一个与强调相关的原则是视觉层次视觉层次意味着更重要的内容应该显得更重要因此，不同层次的强调应该结合在一起，以创建人们在网站或应用程序上获取信息的顺序这可以在页面的标题、副标题和正文中体现出来。

例如，请注意下面网站中各段文本之间的层次结构，“今天预订您的假期”比欢迎信息更大更粗，而欢迎信息又比其下方的正文更大。

7.重复重复意味着在设计中重复某些元素，例如相同的颜色、形状、设计元素、字体或其他元素它可以使设计统一，并在需要时强化设计理念在 UI 设计中，这一点尤为重要，因为设计师会将企业徽标和菜单项放在每个页面的相同位置。

例如，在这个页面上，您会在页面左上角看到用户体验设计学院 (UX Design Institute) 的徽标，后面是一系列菜单项如果您转到网站上的其他页面，即使页面正文内容完全不同，这些菜单项仍会保留在相同的位置。

用户体验设计学院博客上的文章也是很好的例子，因为标题创造了一种重复的模式，可以让读者识别出其含义8.节奏与重复相关的是视觉上的节奏原则重复元素之间的间距创造了一种节奏感，就像音乐家在音符之间的间隙中创造节奏一样。

基本的视觉节奏有五种类型：随机、规则、交替、流动和渐进随机节奏没有规律的间隔，例如人行道上的鹅卵石规律节奏在每个元素之间有一致的、规则的空间，可以用网格来创建交替节奏遵循元素之间变化的固定模式，例如国际象棋棋盘上的棋盘格图案。

流动节奏的元素重复出现，这些元素遵循弯曲或曲线，例如海浪的流动方式渐进节奏会随着节奏的推进而变化例如，如果一页纸上全是方块，但接下来的每一行都略大一些，这就是渐进节奏的一个例子在下面的 Spotify 屏幕中，每一行都有一个规则的节奏，为模式中的每个元素赋予相同的权重。

9. 空白空白，也称为负空间，是设计元素周围的空间实际上，它是空白的但空白并不意味着不好事实上，设计的正空间和周围白色空间的负空间（称为图形/背景）共同构成了完整的设计空白为设计提供了呼吸的空间，使设计元素更容易被看到和理解。

服装品牌“和平与安静博物馆” (Museum of Peace & Quiet) 是留白运用的典范右侧是一张身穿其运动衫的大幅英雄图片，而左侧，也就是大多数用户期待看到内容的地方，却一直留白到页面最后三行。

因此，“和平与安静博物馆”的主页名副其实

10.一致性统一性在于营造一种视觉和概念上的和谐感设计元素之间应该相互关联，而统一性有助于确保它们有效地协同工作良好的统一性能够确保信息以清晰、连贯的方式传递，并具有较高的权威性 例如，Ethan Allen 的主页除了正中间的绿色 25% 折扣框外，所有内容都采用了中性色，但即使是绿色，也并非过于艳丽。

整体呈现出一种令人平静的视觉和概念上的统一

11.比例比例是指利用元素的大小来表明其相对于设计中其他元素的重要性原因很简单：元素越大，就越容易被注意到，因此也就越重要拥有不同的尺寸范围也能为设计增添多样性例如，在下面的 Target 主页上，您可以通过网站每个元素所占的框的大小来判断什么是最重要的，什么是不太重要的。

12. 图案图案是指在设计中重复出现的相同元素例如，壁纸和地砖就是如此然而，在 UI 设计中，图案也可以指各种元素的设计模式例如，顶部导航或向好友发送短信都是大多数用户都体验过的设计模式13. 对齐对齐是指不同元素在页面上的排列方式。

UI 设计师通常使用网格来组织所有内容，确保元素以平衡、结构化的模式进行分组和排列即使页面上的设计元素比较混乱，你也必须有目的地使用网格来从混乱中创建秩序例如，任何在线报纸或杂志的内容都会按行和列整齐排列。

以下面的《纽约时报》电影评论为例每篇文章都有一个左对齐的标题和正文，后面是电影图片