用户体验设计
颜色如何影响用户体验?
UI设计 • 刘宇昆 发表了文章 • 0 个评论 • 1721 次浏览 • 2019-10-07 15:21
颜色影响着一切，从用户与设计进行交互时的感觉，使用方式到能否完全看到和理解它，无所不包。很简单，颜色不只是装饰工具。颜色对于用户体验至关重要。
让我们从一个常见的例子开始：您刚刚为某人完成了一个网站设计。它的外观和功能与线框完全相同。设计团队中的每个人都对该项目表示赞赏。客户讨厌它，但他们无法解释原因。
罪魁祸首可能是颜色。不同的颜色会唤起强烈的情绪，使人们对其产生敏锐的反应。这部分是个人喜好，部分是心理，甚至部分是社会规范。了解这些趋势和用户偏好会极大地影响用户体验。
一 、用户期望和偏好
用户体验始于您的网站或应用程序针对的用户类型。用户所居住的基本人口统计信息（例如性别或居住地区）可能会影响他们对基于颜色的设计的感知。
颜色对用户体验的最有趣的影响之一与性别有关。研究表明，男人和女人倾向于喜欢和不喜欢某些类型的颜色。
人们倾向于与具有深色设计方案和更饱和色彩的网站进行更多交互，例如上面的VLNC Studio设计。
女性往往更喜欢与设计方案更浅，调色板更柔和的网站进行交互，例如下面的Tally。
有些人对使用明显女性化的颜色（例如柔和的粉红色，紫色和黄色）的网站产生了强烈的反应。具有严酷配色方案的网站（例如深色背景和完全饱和的红色点缀）倾向于让更多的女性望而却步。中间色调调色板最适合所有人。
二、颜色关联和含义
虽然这不是一门精确的科学，但是色彩具有相当不同的情感联想。请注意，某些颜色可能属于极端类别。这些关联倾向于与其他设计元素一起创建整体氛围。
当用户看到某种颜色或颜色组合时，它会在大脑中立即产生反应。
红色：力量，危险，爱/激情，饥饿
黄色：能量，幸福，光明，温暖
橙色：创造力，决心，刺激，鼓励
绿色：自然，成长，和谐，新鲜
蓝色：信心，信任，宁静，镇定
紫色：魔术，皇室，野心，独立
您期望可口可乐的设计元素为红色。颜色与品牌同义，因此被称为“可乐红”。更改颜色会使品牌混乱。您无法立即识别它。用户感到不快，并且没有以预期的方式做出反应。该饮料甚至看起来味道不同。
所有这些感觉都来自改变颜色。当您看到带有绿色可口可乐品牌的第一张图片时，您可能会觉得自己在说“什么？”。
它影响了品牌向前发展时的用户体验。颜色是品牌塑造中的重要元素，因为它可以在用户和设计之间建立独特的联系。颜色告诉用户品牌的含义。它告诉用户他们将要从事的事情。
更改颜色或使用其他品牌，用户访问体验会受到影响，因为网站访问者突然对他们以为知道的品牌感到困惑或不确定。
三、用户图案连接到颜色
您是否注意到有多少网站使用红色或橙色按钮？
这是有原因的。与网站背景形成鲜明对比的明亮按钮-红色和橙色通常会在浅色或深色背景中脱颖而出。可以帮助用户找到，理解并希望与可单击或可点击元素进行互动，因为他们在视觉上立即知道他们对该元素的期望。
用户体验的关键部分是为用户提供轻松的互动机会，使他们享受并理解。
Cruise使用带有红色文本和红色悬停状态的幻影样式按钮。与传统的纯色按钮不同，但是如何交互却没有什么问题。颜色将用户吸引到该按钮。
四、提高转化率
在设计过程中挑战A / B测试按钮的颜色。您可能会发现一种颜色的转换率明显高于另一种颜色。（它可能不是您期望的颜色。）
当按钮或链接的颜色与设计的其余部分形成鲜明对比时，转换率往往会增加。因此，当您要使用品牌调色板时，选择对比色是产生有助于整体用户体验的转化的关键。
请看下面的网站一分钟。哪种颜色的按钮最有可能使您单击？（原始颜色为蓝色。）
五、为所有用户提供可访问性
最后，颜色以一种非情感或植根于心理学的方式影响用户体验。比这实际得多。
颜色会影响用户体验，因为它可以使设计不可访问。
为了使每个人都能充分理解设计并与内容互动，他们必须能够轻松查看和阅读设计。使用符合“ Web内容可访问性准则”（WCAG 2.1）的调色板和对比度，可以确保每个用户都能理解您的颜色选择。
使用色盲过滤器（例如下面的比较中的过滤器）可帮助模拟其他用户在您访问网站时可能看到的内容。这如何影响可用性？
结论
将颜色视为一种工具，可以帮助用户更好地进行交互并体验您网站上的内容。它会在情感和可用性级别上影响用户体验。
找出颜色是否以正确的方式影响用户体验的关键是通过用户测试。A / B颜色测试可能是一个有价值的工具。 查看全部
让我们从一个常见的例子开始：您刚刚为某人完成了一个网站设计。它的外观和功能与线框完全相同。设计团队中的每个人都对该项目表示赞赏。客户讨厌它，但他们无法解释原因。
罪魁祸首可能是颜色。不同的颜色会唤起强烈的情绪，使人们对其产生敏锐的反应。这部分是个人喜好，部分是心理，甚至部分是社会规范。了解这些趋势和用户偏好会极大地影响用户体验。
一 、用户期望和偏好
用户体验始于您的网站或应用程序针对的用户类型。用户所居住的基本人口统计信息（例如性别或居住地区）可能会影响他们对基于颜色的设计的感知。
颜色对用户体验的最有趣的影响之一与性别有关。研究表明，男人和女人倾向于喜欢和不喜欢某些类型的颜色。
人们倾向于与具有深色设计方案和更饱和色彩的网站进行更多交互，例如上面的VLNC Studio设计。
女性往往更喜欢与设计方案更浅，调色板更柔和的网站进行交互，例如下面的Tally。
有些人对使用明显女性化的颜色（例如柔和的粉红色，紫色和黄色）的网站产生了强烈的反应。具有严酷配色方案的网站（例如深色背景和完全饱和的红色点缀）倾向于让更多的女性望而却步。中间色调调色板最适合所有人。
二、颜色关联和含义
虽然这不是一门精确的科学，但是色彩具有相当不同的情感联想。请注意，某些颜色可能属于极端类别。这些关联倾向于与其他设计元素一起创建整体氛围。
当用户看到某种颜色或颜色组合时，它会在大脑中立即产生反应。
红色：力量，危险，爱/激情，饥饿
黄色：能量，幸福，光明，温暖
橙色：创造力，决心，刺激，鼓励
绿色：自然，成长，和谐，新鲜
蓝色：信心，信任，宁静，镇定
紫色：魔术，皇室，野心，独立
您期望可口可乐的设计元素为红色。颜色与品牌同义，因此被称为“可乐红”。更改颜色会使品牌混乱。您无法立即识别它。用户感到不快，并且没有以预期的方式做出反应。该饮料甚至看起来味道不同。
所有这些感觉都来自改变颜色。当您看到带有绿色可口可乐品牌的第一张图片时，您可能会觉得自己在说“什么？”。
它影响了品牌向前发展时的用户体验。颜色是品牌塑造中的重要元素，因为它可以在用户和设计之间建立独特的联系。颜色告诉用户品牌的含义。它告诉用户他们将要从事的事情。
更改颜色或使用其他品牌，用户访问体验会受到影响，因为网站访问者突然对他们以为知道的品牌感到困惑或不确定。
三、用户图案连接到颜色
您是否注意到有多少网站使用红色或橙色按钮？
这是有原因的。与网站背景形成鲜明对比的明亮按钮-红色和橙色通常会在浅色或深色背景中脱颖而出。可以帮助用户找到，理解并希望与可单击或可点击元素进行互动，因为他们在视觉上立即知道他们对该元素的期望。
用户体验的关键部分是为用户提供轻松的互动机会，使他们享受并理解。
Cruise使用带有红色文本和红色悬停状态的幻影样式按钮。与传统的纯色按钮不同，但是如何交互却没有什么问题。颜色将用户吸引到该按钮。
四、提高转化率
在设计过程中挑战A / B测试按钮的颜色。您可能会发现一种颜色的转换率明显高于另一种颜色。（它可能不是您期望的颜色。）
当按钮或链接的颜色与设计的其余部分形成鲜明对比时，转换率往往会增加。因此，当您要使用品牌调色板时，选择对比色是产生有助于整体用户体验的转化的关键。
请看下面的网站一分钟。哪种颜色的按钮最有可能使您单击？（原始颜色为蓝色。）
五、为所有用户提供可访问性
最后，颜色以一种非情感或植根于心理学的方式影响用户体验。比这实际得多。
颜色会影响用户体验，因为它可以使设计不可访问。
为了使每个人都能充分理解设计并与内容互动，他们必须能够轻松查看和阅读设计。使用符合“ Web内容可访问性准则”（WCAG 2.1）的调色板和对比度，可以确保每个用户都能理解您的颜色选择。
使用色盲过滤器（例如下面的比较中的过滤器）可帮助模拟其他用户在您访问网站时可能看到的内容。这如何影响可用性？
结论
将颜色视为一种工具，可以帮助用户更好地进行交互并体验您网站上的内容。它会在情感和可用性级别上影响用户体验。
找出颜色是否以正确的方式影响用户体验的关键是通过用户测试。A / B颜色测试可能是一个有价值的工具。 查看全部
颜色影响着一切，从用户与设计进行交互时的感觉，使用方式到能否完全看到和理解它，无所不包。很简单，颜色不只是装饰工具。颜色对于用户体验至关重要。
让我们从一个常见的例子开始：您刚刚为某人完成了一个网站设计。它的外观和功能与线框完全相同。设计团队中的每个人都对该项目表示赞赏。客户讨厌它，但他们无法解释原因。
罪魁祸首可能是颜色。不同的颜色会唤起强烈的情绪，使人们对其产生敏锐的反应。这部分是个人喜好，部分是心理，甚至部分是社会规范。了解这些趋势和用户偏好会极大地影响用户体验。
一 、用户期望和偏好
用户体验始于您的网站或应用程序针对的用户类型。用户所居住的基本人口统计信息（例如性别或居住地区）可能会影响他们对基于颜色的设计的感知。
颜色对用户体验的最有趣的影响之一与性别有关。研究表明，男人和女人倾向于喜欢和不喜欢某些类型的颜色。
人们倾向于与具有深色设计方案和更饱和色彩的网站进行更多交互，例如上面的VLNC Studio设计。
女性往往更喜欢与设计方案更浅，调色板更柔和的网站进行交互，例如下面的Tally。
有些人对使用明显女性化的颜色（例如柔和的粉红色，紫色和黄色）的网站产生了强烈的反应。具有严酷配色方案的网站（例如深色背景和完全饱和的红色点缀）倾向于让更多的女性望而却步。中间色调调色板最适合所有人。
二、颜色关联和含义
虽然这不是一门精确的科学，但是色彩具有相当不同的情感联想。请注意，某些颜色可能属于极端类别。这些关联倾向于与其他设计元素一起创建整体氛围。
当用户看到某种颜色或颜色组合时，它会在大脑中立即产生反应。
红色：力量，危险，爱/激情，饥饿
黄色：能量，幸福，光明，温暖
橙色：创造力，决心，刺激，鼓励
绿色：自然，成长，和谐，新鲜
蓝色：信心，信任，宁静，镇定
紫色：魔术，皇室，野心，独立
您期望可口可乐的设计元素为红色。颜色与品牌同义，因此被称为“可乐红”。更改颜色会使品牌混乱。您无法立即识别它。用户感到不快，并且没有以预期的方式做出反应。该饮料甚至看起来味道不同。
所有这些感觉都来自改变颜色。当您看到带有绿色可口可乐品牌的第一张图片时，您可能会觉得自己在说“什么？”。
它影响了品牌向前发展时的用户体验。颜色是品牌塑造中的重要元素，因为它可以在用户和设计之间建立独特的联系。颜色告诉用户品牌的含义。它告诉用户他们将要从事的事情。
更改颜色或使用其他品牌，用户访问体验会受到影响，因为网站访问者突然对他们以为知道的品牌感到困惑或不确定。
三、用户图案连接到颜色
您是否注意到有多少网站使用红色或橙色按钮？
这是有原因的。与网站背景形成鲜明对比的明亮按钮-红色和橙色通常会在浅色或深色背景中脱颖而出。可以帮助用户找到，理解并希望与可单击或可点击元素进行互动，因为他们在视觉上立即知道他们对该元素的期望。
用户体验的关键部分是为用户提供轻松的互动机会，使他们享受并理解。
Cruise使用带有红色文本和红色悬停状态的幻影样式按钮。与传统的纯色按钮不同，但是如何交互却没有什么问题。颜色将用户吸引到该按钮。
四、提高转化率
在设计过程中挑战A / B测试按钮的颜色。您可能会发现一种颜色的转换率明显高于另一种颜色。（它可能不是您期望的颜色。）
当按钮或链接的颜色与设计的其余部分形成鲜明对比时，转换率往往会增加。因此，当您要使用品牌调色板时，选择对比色是产生有助于整体用户体验的转化的关键。
请看下面的网站一分钟。哪种颜色的按钮最有可能使您单击？（原始颜色为蓝色。）
五、为所有用户提供可访问性
最后，颜色以一种非情感或植根于心理学的方式影响用户体验。比这实际得多。
颜色会影响用户体验，因为它可以使设计不可访问。
为了使每个人都能充分理解设计并与内容互动，他们必须能够轻松查看和阅读设计。使用符合“ Web内容可访问性准则”（WCAG 2.1）的调色板和对比度，可以确保每个用户都能理解您的颜色选择。
使用色盲过滤器（例如下面的比较中的过滤器）可帮助模拟其他用户在您访问网站时可能看到的内容。这如何影响可用性？
结论
将颜色视为一种工具，可以帮助用户更好地进行交互并体验您网站上的内容。它会在情感和可用性级别上影响用户体验。
找出颜色是否以正确的方式影响用户体验的关键是通过用户测试。A / B颜色测试可能是一个有价值的工具。
让我们从一个常见的例子开始：您刚刚为某人完成了一个网站设计。它的外观和功能与线框完全相同。设计团队中的每个人都对该项目表示赞赏。客户讨厌它，但他们无法解释原因。
罪魁祸首可能是颜色。不同的颜色会唤起强烈的情绪，使人们对其产生敏锐的反应。这部分是个人喜好，部分是心理，甚至部分是社会规范。了解这些趋势和用户偏好会极大地影响用户体验。
一 、用户期望和偏好
用户体验始于您的网站或应用程序针对的用户类型。用户所居住的基本人口统计信息（例如性别或居住地区）可能会影响他们对基于颜色的设计的感知。
颜色对用户体验的最有趣的影响之一与性别有关。研究表明，男人和女人倾向于喜欢和不喜欢某些类型的颜色。
人们倾向于与具有深色设计方案和更饱和色彩的网站进行更多交互，例如上面的VLNC Studio设计。
女性往往更喜欢与设计方案更浅，调色板更柔和的网站进行交互，例如下面的Tally。
有些人对使用明显女性化的颜色（例如柔和的粉红色，紫色和黄色）的网站产生了强烈的反应。具有严酷配色方案的网站（例如深色背景和完全饱和的红色点缀）倾向于让更多的女性望而却步。中间色调调色板最适合所有人。
二、颜色关联和含义
虽然这不是一门精确的科学，但是色彩具有相当不同的情感联想。请注意，某些颜色可能属于极端类别。这些关联倾向于与其他设计元素一起创建整体氛围。
当用户看到某种颜色或颜色组合时，它会在大脑中立即产生反应。
红色：力量，危险，爱/激情，饥饿
黄色：能量，幸福，光明，温暖
橙色：创造力，决心，刺激，鼓励
绿色：自然，成长，和谐，新鲜
蓝色：信心，信任，宁静，镇定
紫色：魔术，皇室，野心，独立
您期望可口可乐的设计元素为红色。颜色与品牌同义，因此被称为“可乐红”。更改颜色会使品牌混乱。您无法立即识别它。用户感到不快，并且没有以预期的方式做出反应。该饮料甚至看起来味道不同。
所有这些感觉都来自改变颜色。当您看到带有绿色可口可乐品牌的第一张图片时，您可能会觉得自己在说“什么？”。
它影响了品牌向前发展时的用户体验。颜色是品牌塑造中的重要元素，因为它可以在用户和设计之间建立独特的联系。颜色告诉用户品牌的含义。它告诉用户他们将要从事的事情。
更改颜色或使用其他品牌，用户访问体验会受到影响，因为网站访问者突然对他们以为知道的品牌感到困惑或不确定。
三、用户图案连接到颜色
您是否注意到有多少网站使用红色或橙色按钮？
这是有原因的。与网站背景形成鲜明对比的明亮按钮-红色和橙色通常会在浅色或深色背景中脱颖而出。可以帮助用户找到，理解并希望与可单击或可点击元素进行互动，因为他们在视觉上立即知道他们对该元素的期望。
用户体验的关键部分是为用户提供轻松的互动机会，使他们享受并理解。
Cruise使用带有红色文本和红色悬停状态的幻影样式按钮。与传统的纯色按钮不同，但是如何交互却没有什么问题。颜色将用户吸引到该按钮。
四、提高转化率
在设计过程中挑战A / B测试按钮的颜色。您可能会发现一种颜色的转换率明显高于另一种颜色。（它可能不是您期望的颜色。）
当按钮或链接的颜色与设计的其余部分形成鲜明对比时，转换率往往会增加。因此，当您要使用品牌调色板时，选择对比色是产生有助于整体用户体验的转化的关键。
请看下面的网站一分钟。哪种颜色的按钮最有可能使您单击？（原始颜色为蓝色。）
五、为所有用户提供可访问性
最后，颜色以一种非情感或植根于心理学的方式影响用户体验。比这实际得多。
颜色会影响用户体验，因为它可以使设计不可访问。
为了使每个人都能充分理解设计并与内容互动，他们必须能够轻松查看和阅读设计。使用符合“ Web内容可访问性准则”（WCAG 2.1）的调色板和对比度，可以确保每个用户都能理解您的颜色选择。
使用色盲过滤器（例如下面的比较中的过滤器）可帮助模拟其他用户在您访问网站时可能看到的内容。这如何影响可用性？
结论
将颜色视为一种工具，可以帮助用户更好地进行交互并体验您网站上的内容。它会在情感和可用性级别上影响用户体验。
找出颜色是否以正确的方式影响用户体验的关键是通过用户测试。A / B颜色测试可能是一个有价值的工具。
在UI设计中有效利用空白区域
UI设计 • 刘宇昆 发表了文章 • 0 个评论 • 2283 次浏览 • 2019-08-02 13:32
白色空间是设计中最被忽视的部分之一，通常是UX / UI设计人员最有效的解决方案。
在我的设计生涯开始时，我从未看到白色空间背后的真正价值以及它可以使我的设计看起来更美丽和更具吸引力的方式。然而，当出现挑战时期时，有效利用空白区域对于解决问题至关重要。
然而，正确使用白色空间是非常必要的，否则设计最终会看起来非专业和简单。
什么是白色空间？
白色空间是布局之间的空白区域，段落中的线条，多个设计元素之间的空白等。这些元素可以是图像，排版，插图，图标等。白色空间不是指空白色背景，也不一定是白色，它可以是任何颜色或图案，因此我们也将其称为负空间。
既然您已经了解了设计中的空白区域，那么让我们深入了解它将如何影响可用性和用户界面。
1、改善你的视觉层次结构
将可视化层次结构表单设置为UI设计者最关键的步骤之一。作为一个基本的经验法则，最重要的信息必须位于顶部，大胆且易于查看，而底部最不重要的信息，在较小的框中，不太集中。这很容易理解，甚至可以在您的设计中展示。
但是，在上面的例子中，左侧的图像使用较小的空白区域。这可能会破坏您的视觉层次结构，并导致用户混淆或不感兴趣以吸收给定的信息集。
因此，示例显示了白色空间如何使设计更易于扫描，从而更容易理解。
2.帮助用户关注重要方面
负空间有助于用户专注于最相关的内容。这通常通过有效利用设计中的宏观和微观空间来完成。
在非专业术语中，宏观空间是指设计中较大的白色空间段（页眉，页脚和网站边距之间的空间），而微空间指的是不同UI元素之间的较小空间（行和段落之间的空间）
如果您希望将用户的注意力集中在说明图而不是文本上，则在其周围添加有效的空白区域可确保更加关注所需的设计元素。在上面的示例中，在左侧，插图与其他元素混合，禁止用户吸收适当的信息，而在右侧，插图享有白色空间，允许用户专注于相关插图，而后者又链接提供的信息。
3、找到合适的平衡点
白色空间有多少白色空间？在设计领域经常提出的一个问题。对此的简单回答是，允许用户理解信息而不会压倒信息的设计是最平衡的白色空间设计。
在上面的例子中，右侧的图像爆炸，信息使其势不可挡。虽然右侧的图像是舒缓的，但能够在不压倒用户的情况下实现理解。
4、保持一致
一致性是白色空间的关键。设计中的每条信息都是一致的，白色空间也是如此。空间的逻辑利用为设计中的每个元素创建适当的空间。
利用率的不一致将导致突然的用户界面。
示例中，不一致的白色间距使得它看起来像两组照片，一组在顶部，另一组在底部。在右侧图像中，所有6张照片看起来都是一致的，并且是1套照片的一部分。
5、创造性地适应元素中的空白区域
白色空间的创造性利用是一项技能，可以使元素看起来更加美观，并且仅仅使用负空间的标准原则来增加焦点和保留。人们可以将他们的创意果汁拿出来，而不是利用白色空间来改善视觉吸引力，而是描绘一些相关的东西并增强视觉效果。以上是创造性地使用白色空间来展示品牌使命和身份的某些示例。最常见的例子是FedEx，其中白色空间用于显示与品牌使命产生共鸣的箭头。
总之，白色空间就像艺术一样，你必须正确地做到让你的设计看起来更有效和专业。我们希望您喜欢阅读这篇文章，它帮助您重新思考用户界面设计中的白色间距原则。
查看全部
在我的设计生涯开始时，我从未看到白色空间背后的真正价值以及它可以使我的设计看起来更美丽和更具吸引力的方式。然而，当出现挑战时期时，有效利用空白区域对于解决问题至关重要。
然而，正确使用白色空间是非常必要的，否则设计最终会看起来非专业和简单。
什么是白色空间？
白色空间是布局之间的空白区域，段落中的线条，多个设计元素之间的空白等。这些元素可以是图像，排版，插图，图标等。白色空间不是指空白色背景，也不一定是白色，它可以是任何颜色或图案，因此我们也将其称为负空间。
既然您已经了解了设计中的空白区域，那么让我们深入了解它将如何影响可用性和用户界面。
1、改善你的视觉层次结构
将可视化层次结构表单设置为UI设计者最关键的步骤之一。作为一个基本的经验法则，最重要的信息必须位于顶部，大胆且易于查看，而底部最不重要的信息，在较小的框中，不太集中。这很容易理解，甚至可以在您的设计中展示。
但是，在上面的例子中，左侧的图像使用较小的空白区域。这可能会破坏您的视觉层次结构，并导致用户混淆或不感兴趣以吸收给定的信息集。
因此，示例显示了白色空间如何使设计更易于扫描，从而更容易理解。
2.帮助用户关注重要方面
负空间有助于用户专注于最相关的内容。这通常通过有效利用设计中的宏观和微观空间来完成。
在非专业术语中，宏观空间是指设计中较大的白色空间段（页眉，页脚和网站边距之间的空间），而微空间指的是不同UI元素之间的较小空间（行和段落之间的空间）
如果您希望将用户的注意力集中在说明图而不是文本上，则在其周围添加有效的空白区域可确保更加关注所需的设计元素。在上面的示例中，在左侧，插图与其他元素混合，禁止用户吸收适当的信息，而在右侧，插图享有白色空间，允许用户专注于相关插图，而后者又链接提供的信息。
3、找到合适的平衡点
白色空间有多少白色空间？在设计领域经常提出的一个问题。对此的简单回答是，允许用户理解信息而不会压倒信息的设计是最平衡的白色空间设计。
在上面的例子中，右侧的图像爆炸，信息使其势不可挡。虽然右侧的图像是舒缓的，但能够在不压倒用户的情况下实现理解。
4、保持一致
一致性是白色空间的关键。设计中的每条信息都是一致的，白色空间也是如此。空间的逻辑利用为设计中的每个元素创建适当的空间。
利用率的不一致将导致突然的用户界面。
示例中，不一致的白色间距使得它看起来像两组照片，一组在顶部，另一组在底部。在右侧图像中，所有6张照片看起来都是一致的，并且是1套照片的一部分。
5、创造性地适应元素中的空白区域
白色空间的创造性利用是一项技能，可以使元素看起来更加美观，并且仅仅使用负空间的标准原则来增加焦点和保留。人们可以将他们的创意果汁拿出来，而不是利用白色空间来改善视觉吸引力，而是描绘一些相关的东西并增强视觉效果。以上是创造性地使用白色空间来展示品牌使命和身份的某些示例。最常见的例子是FedEx，其中白色空间用于显示与品牌使命产生共鸣的箭头。
总之，白色空间就像艺术一样，你必须正确地做到让你的设计看起来更有效和专业。我们希望您喜欢阅读这篇文章，它帮助您重新思考用户界面设计中的白色间距原则。
查看全部
白色空间是设计中最被忽视的部分之一，通常是UX / UI设计人员最有效的解决方案。
在我的设计生涯开始时，我从未看到白色空间背后的真正价值以及它可以使我的设计看起来更美丽和更具吸引力的方式。然而，当出现挑战时期时，有效利用空白区域对于解决问题至关重要。
然而，正确使用白色空间是非常必要的，否则设计最终会看起来非专业和简单。
什么是白色空间？
白色空间是布局之间的空白区域，段落中的线条，多个设计元素之间的空白等。这些元素可以是图像，排版，插图，图标等。白色空间不是指空白色背景，也不一定是白色，它可以是任何颜色或图案，因此我们也将其称为负空间。
既然您已经了解了设计中的空白区域，那么让我们深入了解它将如何影响可用性和用户界面。
1、改善你的视觉层次结构
将可视化层次结构表单设置为UI设计者最关键的步骤之一。作为一个基本的经验法则，最重要的信息必须位于顶部，大胆且易于查看，而底部最不重要的信息，在较小的框中，不太集中。这很容易理解，甚至可以在您的设计中展示。
但是，在上面的例子中，左侧的图像使用较小的空白区域。这可能会破坏您的视觉层次结构，并导致用户混淆或不感兴趣以吸收给定的信息集。
因此，示例显示了白色空间如何使设计更易于扫描，从而更容易理解。
2.帮助用户关注重要方面
负空间有助于用户专注于最相关的内容。这通常通过有效利用设计中的宏观和微观空间来完成。
在非专业术语中，宏观空间是指设计中较大的白色空间段（页眉，页脚和网站边距之间的空间），而微空间指的是不同UI元素之间的较小空间（行和段落之间的空间）
如果您希望将用户的注意力集中在说明图而不是文本上，则在其周围添加有效的空白区域可确保更加关注所需的设计元素。在上面的示例中，在左侧，插图与其他元素混合，禁止用户吸收适当的信息，而在右侧，插图享有白色空间，允许用户专注于相关插图，而后者又链接提供的信息。
3、找到合适的平衡点
白色空间有多少白色空间？在设计领域经常提出的一个问题。对此的简单回答是，允许用户理解信息而不会压倒信息的设计是最平衡的白色空间设计。
在上面的例子中，右侧的图像爆炸，信息使其势不可挡。虽然右侧的图像是舒缓的，但能够在不压倒用户的情况下实现理解。
4、保持一致
一致性是白色空间的关键。设计中的每条信息都是一致的，白色空间也是如此。空间的逻辑利用为设计中的每个元素创建适当的空间。
利用率的不一致将导致突然的用户界面。
示例中，不一致的白色间距使得它看起来像两组照片，一组在顶部，另一组在底部。在右侧图像中，所有6张照片看起来都是一致的，并且是1套照片的一部分。
5、创造性地适应元素中的空白区域
白色空间的创造性利用是一项技能，可以使元素看起来更加美观，并且仅仅使用负空间的标准原则来增加焦点和保留。人们可以将他们的创意果汁拿出来，而不是利用白色空间来改善视觉吸引力，而是描绘一些相关的东西并增强视觉效果。以上是创造性地使用白色空间来展示品牌使命和身份的某些示例。最常见的例子是FedEx，其中白色空间用于显示与品牌使命产生共鸣的箭头。
总之，白色空间就像艺术一样，你必须正确地做到让你的设计看起来更有效和专业。我们希望您喜欢阅读这篇文章，它帮助您重新思考用户界面设计中的白色间距原则。
在我的设计生涯开始时，我从未看到白色空间背后的真正价值以及它可以使我的设计看起来更美丽和更具吸引力的方式。然而，当出现挑战时期时，有效利用空白区域对于解决问题至关重要。
然而，正确使用白色空间是非常必要的，否则设计最终会看起来非专业和简单。
什么是白色空间？
白色空间是布局之间的空白区域，段落中的线条，多个设计元素之间的空白等。这些元素可以是图像，排版，插图，图标等。白色空间不是指空白色背景，也不一定是白色，它可以是任何颜色或图案，因此我们也将其称为负空间。
既然您已经了解了设计中的空白区域，那么让我们深入了解它将如何影响可用性和用户界面。
1、改善你的视觉层次结构
将可视化层次结构表单设置为UI设计者最关键的步骤之一。作为一个基本的经验法则，最重要的信息必须位于顶部，大胆且易于查看，而底部最不重要的信息，在较小的框中，不太集中。这很容易理解，甚至可以在您的设计中展示。
但是，在上面的例子中，左侧的图像使用较小的空白区域。这可能会破坏您的视觉层次结构，并导致用户混淆或不感兴趣以吸收给定的信息集。
因此，示例显示了白色空间如何使设计更易于扫描，从而更容易理解。
2.帮助用户关注重要方面
负空间有助于用户专注于最相关的内容。这通常通过有效利用设计中的宏观和微观空间来完成。
在非专业术语中，宏观空间是指设计中较大的白色空间段（页眉，页脚和网站边距之间的空间），而微空间指的是不同UI元素之间的较小空间（行和段落之间的空间）
如果您希望将用户的注意力集中在说明图而不是文本上，则在其周围添加有效的空白区域可确保更加关注所需的设计元素。在上面的示例中，在左侧，插图与其他元素混合，禁止用户吸收适当的信息，而在右侧，插图享有白色空间，允许用户专注于相关插图，而后者又链接提供的信息。
3、找到合适的平衡点
白色空间有多少白色空间？在设计领域经常提出的一个问题。对此的简单回答是，允许用户理解信息而不会压倒信息的设计是最平衡的白色空间设计。
在上面的例子中，右侧的图像爆炸，信息使其势不可挡。虽然右侧的图像是舒缓的，但能够在不压倒用户的情况下实现理解。
4、保持一致
一致性是白色空间的关键。设计中的每条信息都是一致的，白色空间也是如此。空间的逻辑利用为设计中的每个元素创建适当的空间。
利用率的不一致将导致突然的用户界面。
示例中，不一致的白色间距使得它看起来像两组照片，一组在顶部，另一组在底部。在右侧图像中，所有6张照片看起来都是一致的，并且是1套照片的一部分。
5、创造性地适应元素中的空白区域
白色空间的创造性利用是一项技能，可以使元素看起来更加美观，并且仅仅使用负空间的标准原则来增加焦点和保留。人们可以将他们的创意果汁拿出来，而不是利用白色空间来改善视觉吸引力，而是描绘一些相关的东西并增强视觉效果。以上是创造性地使用白色空间来展示品牌使命和身份的某些示例。最常见的例子是FedEx，其中白色空间用于显示与品牌使命产生共鸣的箭头。
总之，白色空间就像艺术一样，你必须正确地做到让你的设计看起来更有效和专业。我们希望您喜欢阅读这篇文章，它帮助您重新思考用户界面设计中的白色间距原则。
颜色如何影响用户体验?
UI设计 • 刘宇昆 发表了文章 • 0 个评论 • 1721 次浏览 • 2019-10-07 15:21
颜色影响着一切，从用户与设计进行交互时的感觉，使用方式到能否完全看到和理解它，无所不包。很简单，颜色不只是装饰工具。颜色对于用户体验至关重要。
让我们从一个常见的例子开始：您刚刚为某人完成了一个网站设计。它的外观和功能与线框完全相同。设计团队中的每个人都对该项目表示赞赏。客户讨厌它，但他们无法解释原因。
罪魁祸首可能是颜色。不同的颜色会唤起强烈的情绪，使人们对其产生敏锐的反应。这部分是个人喜好，部分是心理，甚至部分是社会规范。了解这些趋势和用户偏好会极大地影响用户体验。
一 、用户期望和偏好
用户体验始于您的网站或应用程序针对的用户类型。用户所居住的基本人口统计信息（例如性别或居住地区）可能会影响他们对基于颜色的设计的感知。
颜色对用户体验的最有趣的影响之一与性别有关。研究表明，男人和女人倾向于喜欢和不喜欢某些类型的颜色。
人们倾向于与具有深色设计方案和更饱和色彩的网站进行更多交互，例如上面的VLNC Studio设计。
女性往往更喜欢与设计方案更浅，调色板更柔和的网站进行交互，例如下面的Tally。
有些人对使用明显女性化的颜色（例如柔和的粉红色，紫色和黄色）的网站产生了强烈的反应。具有严酷配色方案的网站（例如深色背景和完全饱和的红色点缀）倾向于让更多的女性望而却步。中间色调调色板最适合所有人。
二、颜色关联和含义
虽然这不是一门精确的科学，但是色彩具有相当不同的情感联想。请注意，某些颜色可能属于极端类别。这些关联倾向于与其他设计元素一起创建整体氛围。
当用户看到某种颜色或颜色组合时，它会在大脑中立即产生反应。
红色：力量，危险，爱/激情，饥饿
黄色：能量，幸福，光明，温暖
橙色：创造力，决心，刺激，鼓励
绿色：自然，成长，和谐，新鲜
蓝色：信心，信任，宁静，镇定
紫色：魔术，皇室，野心，独立
您期望可口可乐的设计元素为红色。颜色与品牌同义，因此被称为“可乐红”。更改颜色会使品牌混乱。您无法立即识别它。用户感到不快，并且没有以预期的方式做出反应。该饮料甚至看起来味道不同。
所有这些感觉都来自改变颜色。当您看到带有绿色可口可乐品牌的第一张图片时，您可能会觉得自己在说“什么？”。
它影响了品牌向前发展时的用户体验。颜色是品牌塑造中的重要元素，因为它可以在用户和设计之间建立独特的联系。颜色告诉用户品牌的含义。它告诉用户他们将要从事的事情。
更改颜色或使用其他品牌，用户访问体验会受到影响，因为网站访问者突然对他们以为知道的品牌感到困惑或不确定。
三、用户图案连接到颜色
您是否注意到有多少网站使用红色或橙色按钮？
这是有原因的。与网站背景形成鲜明对比的明亮按钮-红色和橙色通常会在浅色或深色背景中脱颖而出。可以帮助用户找到，理解并希望与可单击或可点击元素进行互动，因为他们在视觉上立即知道他们对该元素的期望。
用户体验的关键部分是为用户提供轻松的互动机会，使他们享受并理解。
Cruise使用带有红色文本和红色悬停状态的幻影样式按钮。与传统的纯色按钮不同，但是如何交互却没有什么问题。颜色将用户吸引到该按钮。
四、提高转化率
在设计过程中挑战A / B测试按钮的颜色。您可能会发现一种颜色的转换率明显高于另一种颜色。（它可能不是您期望的颜色。）
当按钮或链接的颜色与设计的其余部分形成鲜明对比时，转换率往往会增加。因此，当您要使用品牌调色板时，选择对比色是产生有助于整体用户体验的转化的关键。
请看下面的网站一分钟。哪种颜色的按钮最有可能使您单击？（原始颜色为蓝色。）
五、为所有用户提供可访问性
最后，颜色以一种非情感或植根于心理学的方式影响用户体验。比这实际得多。
颜色会影响用户体验，因为它可以使设计不可访问。
为了使每个人都能充分理解设计并与内容互动，他们必须能够轻松查看和阅读设计。使用符合“ Web内容可访问性准则”（WCAG 2.1）的调色板和对比度，可以确保每个用户都能理解您的颜色选择。
使用色盲过滤器（例如下面的比较中的过滤器）可帮助模拟其他用户在您访问网站时可能看到的内容。这如何影响可用性？
结论
将颜色视为一种工具，可以帮助用户更好地进行交互并体验您网站上的内容。它会在情感和可用性级别上影响用户体验。
找出颜色是否以正确的方式影响用户体验的关键是通过用户测试。A / B颜色测试可能是一个有价值的工具。 查看全部
让我们从一个常见的例子开始：您刚刚为某人完成了一个网站设计。它的外观和功能与线框完全相同。设计团队中的每个人都对该项目表示赞赏。客户讨厌它，但他们无法解释原因。
罪魁祸首可能是颜色。不同的颜色会唤起强烈的情绪，使人们对其产生敏锐的反应。这部分是个人喜好，部分是心理，甚至部分是社会规范。了解这些趋势和用户偏好会极大地影响用户体验。
一 、用户期望和偏好
用户体验始于您的网站或应用程序针对的用户类型。用户所居住的基本人口统计信息（例如性别或居住地区）可能会影响他们对基于颜色的设计的感知。
颜色对用户体验的最有趣的影响之一与性别有关。研究表明，男人和女人倾向于喜欢和不喜欢某些类型的颜色。
人们倾向于与具有深色设计方案和更饱和色彩的网站进行更多交互，例如上面的VLNC Studio设计。
女性往往更喜欢与设计方案更浅，调色板更柔和的网站进行交互，例如下面的Tally。
有些人对使用明显女性化的颜色（例如柔和的粉红色，紫色和黄色）的网站产生了强烈的反应。具有严酷配色方案的网站（例如深色背景和完全饱和的红色点缀）倾向于让更多的女性望而却步。中间色调调色板最适合所有人。
二、颜色关联和含义
虽然这不是一门精确的科学，但是色彩具有相当不同的情感联想。请注意，某些颜色可能属于极端类别。这些关联倾向于与其他设计元素一起创建整体氛围。
当用户看到某种颜色或颜色组合时，它会在大脑中立即产生反应。
红色：力量，危险，爱/激情，饥饿
黄色：能量，幸福，光明，温暖
橙色：创造力，决心，刺激，鼓励
绿色：自然，成长，和谐，新鲜
蓝色：信心，信任，宁静，镇定
紫色：魔术，皇室，野心，独立
您期望可口可乐的设计元素为红色。颜色与品牌同义，因此被称为“可乐红”。更改颜色会使品牌混乱。您无法立即识别它。用户感到不快，并且没有以预期的方式做出反应。该饮料甚至看起来味道不同。
所有这些感觉都来自改变颜色。当您看到带有绿色可口可乐品牌的第一张图片时，您可能会觉得自己在说“什么？”。
它影响了品牌向前发展时的用户体验。颜色是品牌塑造中的重要元素，因为它可以在用户和设计之间建立独特的联系。颜色告诉用户品牌的含义。它告诉用户他们将要从事的事情。
更改颜色或使用其他品牌，用户访问体验会受到影响，因为网站访问者突然对他们以为知道的品牌感到困惑或不确定。
三、用户图案连接到颜色
您是否注意到有多少网站使用红色或橙色按钮？
这是有原因的。与网站背景形成鲜明对比的明亮按钮-红色和橙色通常会在浅色或深色背景中脱颖而出。可以帮助用户找到，理解并希望与可单击或可点击元素进行互动，因为他们在视觉上立即知道他们对该元素的期望。
用户体验的关键部分是为用户提供轻松的互动机会，使他们享受并理解。
Cruise使用带有红色文本和红色悬停状态的幻影样式按钮。与传统的纯色按钮不同，但是如何交互却没有什么问题。颜色将用户吸引到该按钮。
四、提高转化率
在设计过程中挑战A / B测试按钮的颜色。您可能会发现一种颜色的转换率明显高于另一种颜色。（它可能不是您期望的颜色。）
当按钮或链接的颜色与设计的其余部分形成鲜明对比时，转换率往往会增加。因此，当您要使用品牌调色板时，选择对比色是产生有助于整体用户体验的转化的关键。
请看下面的网站一分钟。哪种颜色的按钮最有可能使您单击？（原始颜色为蓝色。）
五、为所有用户提供可访问性
最后，颜色以一种非情感或植根于心理学的方式影响用户体验。比这实际得多。
颜色会影响用户体验，因为它可以使设计不可访问。
为了使每个人都能充分理解设计并与内容互动，他们必须能够轻松查看和阅读设计。使用符合“ Web内容可访问性准则”（WCAG 2.1）的调色板和对比度，可以确保每个用户都能理解您的颜色选择。
使用色盲过滤器（例如下面的比较中的过滤器）可帮助模拟其他用户在您访问网站时可能看到的内容。这如何影响可用性？
结论
将颜色视为一种工具，可以帮助用户更好地进行交互并体验您网站上的内容。它会在情感和可用性级别上影响用户体验。
找出颜色是否以正确的方式影响用户体验的关键是通过用户测试。A / B颜色测试可能是一个有价值的工具。 查看全部
颜色影响着一切，从用户与设计进行交互时的感觉，使用方式到能否完全看到和理解它，无所不包。很简单，颜色不只是装饰工具。颜色对于用户体验至关重要。
让我们从一个常见的例子开始：您刚刚为某人完成了一个网站设计。它的外观和功能与线框完全相同。设计团队中的每个人都对该项目表示赞赏。客户讨厌它，但他们无法解释原因。
罪魁祸首可能是颜色。不同的颜色会唤起强烈的情绪，使人们对其产生敏锐的反应。这部分是个人喜好，部分是心理，甚至部分是社会规范。了解这些趋势和用户偏好会极大地影响用户体验。
一 、用户期望和偏好
用户体验始于您的网站或应用程序针对的用户类型。用户所居住的基本人口统计信息（例如性别或居住地区）可能会影响他们对基于颜色的设计的感知。
颜色对用户体验的最有趣的影响之一与性别有关。研究表明，男人和女人倾向于喜欢和不喜欢某些类型的颜色。
人们倾向于与具有深色设计方案和更饱和色彩的网站进行更多交互，例如上面的VLNC Studio设计。
女性往往更喜欢与设计方案更浅，调色板更柔和的网站进行交互，例如下面的Tally。
有些人对使用明显女性化的颜色（例如柔和的粉红色，紫色和黄色）的网站产生了强烈的反应。具有严酷配色方案的网站（例如深色背景和完全饱和的红色点缀）倾向于让更多的女性望而却步。中间色调调色板最适合所有人。
二、颜色关联和含义
虽然这不是一门精确的科学，但是色彩具有相当不同的情感联想。请注意，某些颜色可能属于极端类别。这些关联倾向于与其他设计元素一起创建整体氛围。
当用户看到某种颜色或颜色组合时，它会在大脑中立即产生反应。
红色：力量，危险，爱/激情，饥饿
黄色：能量，幸福，光明，温暖
橙色：创造力，决心，刺激，鼓励
绿色：自然，成长，和谐，新鲜
蓝色：信心，信任，宁静，镇定
紫色：魔术，皇室，野心，独立
您期望可口可乐的设计元素为红色。颜色与品牌同义，因此被称为“可乐红”。更改颜色会使品牌混乱。您无法立即识别它。用户感到不快，并且没有以预期的方式做出反应。该饮料甚至看起来味道不同。
所有这些感觉都来自改变颜色。当您看到带有绿色可口可乐品牌的第一张图片时，您可能会觉得自己在说“什么？”。
它影响了品牌向前发展时的用户体验。颜色是品牌塑造中的重要元素，因为它可以在用户和设计之间建立独特的联系。颜色告诉用户品牌的含义。它告诉用户他们将要从事的事情。
更改颜色或使用其他品牌，用户访问体验会受到影响，因为网站访问者突然对他们以为知道的品牌感到困惑或不确定。
三、用户图案连接到颜色
您是否注意到有多少网站使用红色或橙色按钮？
这是有原因的。与网站背景形成鲜明对比的明亮按钮-红色和橙色通常会在浅色或深色背景中脱颖而出。可以帮助用户找到，理解并希望与可单击或可点击元素进行互动，因为他们在视觉上立即知道他们对该元素的期望。
用户体验的关键部分是为用户提供轻松的互动机会，使他们享受并理解。
Cruise使用带有红色文本和红色悬停状态的幻影样式按钮。与传统的纯色按钮不同，但是如何交互却没有什么问题。颜色将用户吸引到该按钮。
四、提高转化率
在设计过程中挑战A / B测试按钮的颜色。您可能会发现一种颜色的转换率明显高于另一种颜色。（它可能不是您期望的颜色。）
当按钮或链接的颜色与设计的其余部分形成鲜明对比时，转换率往往会增加。因此，当您要使用品牌调色板时，选择对比色是产生有助于整体用户体验的转化的关键。
请看下面的网站一分钟。哪种颜色的按钮最有可能使您单击？（原始颜色为蓝色。）
五、为所有用户提供可访问性
最后，颜色以一种非情感或植根于心理学的方式影响用户体验。比这实际得多。
颜色会影响用户体验，因为它可以使设计不可访问。
为了使每个人都能充分理解设计并与内容互动，他们必须能够轻松查看和阅读设计。使用符合“ Web内容可访问性准则”（WCAG 2.1）的调色板和对比度，可以确保每个用户都能理解您的颜色选择。
使用色盲过滤器（例如下面的比较中的过滤器）可帮助模拟其他用户在您访问网站时可能看到的内容。这如何影响可用性？
结论
将颜色视为一种工具，可以帮助用户更好地进行交互并体验您网站上的内容。它会在情感和可用性级别上影响用户体验。
找出颜色是否以正确的方式影响用户体验的关键是通过用户测试。A / B颜色测试可能是一个有价值的工具。
让我们从一个常见的例子开始：您刚刚为某人完成了一个网站设计。它的外观和功能与线框完全相同。设计团队中的每个人都对该项目表示赞赏。客户讨厌它，但他们无法解释原因。
罪魁祸首可能是颜色。不同的颜色会唤起强烈的情绪，使人们对其产生敏锐的反应。这部分是个人喜好，部分是心理，甚至部分是社会规范。了解这些趋势和用户偏好会极大地影响用户体验。
一 、用户期望和偏好
用户体验始于您的网站或应用程序针对的用户类型。用户所居住的基本人口统计信息（例如性别或居住地区）可能会影响他们对基于颜色的设计的感知。
颜色对用户体验的最有趣的影响之一与性别有关。研究表明，男人和女人倾向于喜欢和不喜欢某些类型的颜色。
人们倾向于与具有深色设计方案和更饱和色彩的网站进行更多交互，例如上面的VLNC Studio设计。
女性往往更喜欢与设计方案更浅，调色板更柔和的网站进行交互，例如下面的Tally。
有些人对使用明显女性化的颜色（例如柔和的粉红色，紫色和黄色）的网站产生了强烈的反应。具有严酷配色方案的网站（例如深色背景和完全饱和的红色点缀）倾向于让更多的女性望而却步。中间色调调色板最适合所有人。
二、颜色关联和含义
虽然这不是一门精确的科学，但是色彩具有相当不同的情感联想。请注意，某些颜色可能属于极端类别。这些关联倾向于与其他设计元素一起创建整体氛围。
当用户看到某种颜色或颜色组合时，它会在大脑中立即产生反应。
红色：力量，危险，爱/激情，饥饿
黄色：能量，幸福，光明，温暖
橙色：创造力，决心，刺激，鼓励
绿色：自然，成长，和谐，新鲜
蓝色：信心，信任，宁静，镇定
紫色：魔术，皇室，野心，独立
您期望可口可乐的设计元素为红色。颜色与品牌同义，因此被称为“可乐红”。更改颜色会使品牌混乱。您无法立即识别它。用户感到不快，并且没有以预期的方式做出反应。该饮料甚至看起来味道不同。
所有这些感觉都来自改变颜色。当您看到带有绿色可口可乐品牌的第一张图片时，您可能会觉得自己在说“什么？”。
它影响了品牌向前发展时的用户体验。颜色是品牌塑造中的重要元素，因为它可以在用户和设计之间建立独特的联系。颜色告诉用户品牌的含义。它告诉用户他们将要从事的事情。
更改颜色或使用其他品牌，用户访问体验会受到影响，因为网站访问者突然对他们以为知道的品牌感到困惑或不确定。
三、用户图案连接到颜色
您是否注意到有多少网站使用红色或橙色按钮？
这是有原因的。与网站背景形成鲜明对比的明亮按钮-红色和橙色通常会在浅色或深色背景中脱颖而出。可以帮助用户找到，理解并希望与可单击或可点击元素进行互动，因为他们在视觉上立即知道他们对该元素的期望。
用户体验的关键部分是为用户提供轻松的互动机会，使他们享受并理解。
Cruise使用带有红色文本和红色悬停状态的幻影样式按钮。与传统的纯色按钮不同，但是如何交互却没有什么问题。颜色将用户吸引到该按钮。
四、提高转化率
在设计过程中挑战A / B测试按钮的颜色。您可能会发现一种颜色的转换率明显高于另一种颜色。（它可能不是您期望的颜色。）
当按钮或链接的颜色与设计的其余部分形成鲜明对比时，转换率往往会增加。因此，当您要使用品牌调色板时，选择对比色是产生有助于整体用户体验的转化的关键。
请看下面的网站一分钟。哪种颜色的按钮最有可能使您单击？（原始颜色为蓝色。）
五、为所有用户提供可访问性
最后，颜色以一种非情感或植根于心理学的方式影响用户体验。比这实际得多。
颜色会影响用户体验，因为它可以使设计不可访问。
为了使每个人都能充分理解设计并与内容互动，他们必须能够轻松查看和阅读设计。使用符合“ Web内容可访问性准则”（WCAG 2.1）的调色板和对比度，可以确保每个用户都能理解您的颜色选择。
使用色盲过滤器（例如下面的比较中的过滤器）可帮助模拟其他用户在您访问网站时可能看到的内容。这如何影响可用性？
结论
将颜色视为一种工具，可以帮助用户更好地进行交互并体验您网站上的内容。它会在情感和可用性级别上影响用户体验。
找出颜色是否以正确的方式影响用户体验的关键是通过用户测试。A / B颜色测试可能是一个有价值的工具。
在UI设计中有效利用空白区域
UI设计 • 刘宇昆 发表了文章 • 0 个评论 • 2283 次浏览 • 2019-08-02 13:32
白色空间是设计中最被忽视的部分之一，通常是UX / UI设计人员最有效的解决方案。
在我的设计生涯开始时，我从未看到白色空间背后的真正价值以及它可以使我的设计看起来更美丽和更具吸引力的方式。然而，当出现挑战时期时，有效利用空白区域对于解决问题至关重要。
然而，正确使用白色空间是非常必要的，否则设计最终会看起来非专业和简单。
什么是白色空间？
白色空间是布局之间的空白区域，段落中的线条，多个设计元素之间的空白等。这些元素可以是图像，排版，插图，图标等。白色空间不是指空白色背景，也不一定是白色，它可以是任何颜色或图案，因此我们也将其称为负空间。
既然您已经了解了设计中的空白区域，那么让我们深入了解它将如何影响可用性和用户界面。
1、改善你的视觉层次结构
将可视化层次结构表单设置为UI设计者最关键的步骤之一。作为一个基本的经验法则，最重要的信息必须位于顶部，大胆且易于查看，而底部最不重要的信息，在较小的框中，不太集中。这很容易理解，甚至可以在您的设计中展示。
但是，在上面的例子中，左侧的图像使用较小的空白区域。这可能会破坏您的视觉层次结构，并导致用户混淆或不感兴趣以吸收给定的信息集。
因此，示例显示了白色空间如何使设计更易于扫描，从而更容易理解。
2.帮助用户关注重要方面
负空间有助于用户专注于最相关的内容。这通常通过有效利用设计中的宏观和微观空间来完成。
在非专业术语中，宏观空间是指设计中较大的白色空间段（页眉，页脚和网站边距之间的空间），而微空间指的是不同UI元素之间的较小空间（行和段落之间的空间）
如果您希望将用户的注意力集中在说明图而不是文本上，则在其周围添加有效的空白区域可确保更加关注所需的设计元素。在上面的示例中，在左侧，插图与其他元素混合，禁止用户吸收适当的信息，而在右侧，插图享有白色空间，允许用户专注于相关插图，而后者又链接提供的信息。
3、找到合适的平衡点
白色空间有多少白色空间？在设计领域经常提出的一个问题。对此的简单回答是，允许用户理解信息而不会压倒信息的设计是最平衡的白色空间设计。
在上面的例子中，右侧的图像爆炸，信息使其势不可挡。虽然右侧的图像是舒缓的，但能够在不压倒用户的情况下实现理解。
4、保持一致
一致性是白色空间的关键。设计中的每条信息都是一致的，白色空间也是如此。空间的逻辑利用为设计中的每个元素创建适当的空间。
利用率的不一致将导致突然的用户界面。
示例中，不一致的白色间距使得它看起来像两组照片，一组在顶部，另一组在底部。在右侧图像中，所有6张照片看起来都是一致的，并且是1套照片的一部分。
5、创造性地适应元素中的空白区域
白色空间的创造性利用是一项技能，可以使元素看起来更加美观，并且仅仅使用负空间的标准原则来增加焦点和保留。人们可以将他们的创意果汁拿出来，而不是利用白色空间来改善视觉吸引力，而是描绘一些相关的东西并增强视觉效果。以上是创造性地使用白色空间来展示品牌使命和身份的某些示例。最常见的例子是FedEx，其中白色空间用于显示与品牌使命产生共鸣的箭头。
总之，白色空间就像艺术一样，你必须正确地做到让你的设计看起来更有效和专业。我们希望您喜欢阅读这篇文章，它帮助您重新思考用户界面设计中的白色间距原则。
查看全部
在我的设计生涯开始时，我从未看到白色空间背后的真正价值以及它可以使我的设计看起来更美丽和更具吸引力的方式。然而，当出现挑战时期时，有效利用空白区域对于解决问题至关重要。
然而，正确使用白色空间是非常必要的，否则设计最终会看起来非专业和简单。
什么是白色空间？
白色空间是布局之间的空白区域，段落中的线条，多个设计元素之间的空白等。这些元素可以是图像，排版，插图，图标等。白色空间不是指空白色背景，也不一定是白色，它可以是任何颜色或图案，因此我们也将其称为负空间。
既然您已经了解了设计中的空白区域，那么让我们深入了解它将如何影响可用性和用户界面。
1、改善你的视觉层次结构
将可视化层次结构表单设置为UI设计者最关键的步骤之一。作为一个基本的经验法则，最重要的信息必须位于顶部，大胆且易于查看，而底部最不重要的信息，在较小的框中，不太集中。这很容易理解，甚至可以在您的设计中展示。
但是，在上面的例子中，左侧的图像使用较小的空白区域。这可能会破坏您的视觉层次结构，并导致用户混淆或不感兴趣以吸收给定的信息集。
因此，示例显示了白色空间如何使设计更易于扫描，从而更容易理解。
2.帮助用户关注重要方面
负空间有助于用户专注于最相关的内容。这通常通过有效利用设计中的宏观和微观空间来完成。
在非专业术语中，宏观空间是指设计中较大的白色空间段（页眉，页脚和网站边距之间的空间），而微空间指的是不同UI元素之间的较小空间（行和段落之间的空间）
如果您希望将用户的注意力集中在说明图而不是文本上，则在其周围添加有效的空白区域可确保更加关注所需的设计元素。在上面的示例中，在左侧，插图与其他元素混合，禁止用户吸收适当的信息，而在右侧，插图享有白色空间，允许用户专注于相关插图，而后者又链接提供的信息。
3、找到合适的平衡点
白色空间有多少白色空间？在设计领域经常提出的一个问题。对此的简单回答是，允许用户理解信息而不会压倒信息的设计是最平衡的白色空间设计。
在上面的例子中，右侧的图像爆炸，信息使其势不可挡。虽然右侧的图像是舒缓的，但能够在不压倒用户的情况下实现理解。
4、保持一致
一致性是白色空间的关键。设计中的每条信息都是一致的，白色空间也是如此。空间的逻辑利用为设计中的每个元素创建适当的空间。
利用率的不一致将导致突然的用户界面。
示例中，不一致的白色间距使得它看起来像两组照片，一组在顶部，另一组在底部。在右侧图像中，所有6张照片看起来都是一致的，并且是1套照片的一部分。
5、创造性地适应元素中的空白区域
白色空间的创造性利用是一项技能，可以使元素看起来更加美观，并且仅仅使用负空间的标准原则来增加焦点和保留。人们可以将他们的创意果汁拿出来，而不是利用白色空间来改善视觉吸引力，而是描绘一些相关的东西并增强视觉效果。以上是创造性地使用白色空间来展示品牌使命和身份的某些示例。最常见的例子是FedEx，其中白色空间用于显示与品牌使命产生共鸣的箭头。
总之，白色空间就像艺术一样，你必须正确地做到让你的设计看起来更有效和专业。我们希望您喜欢阅读这篇文章，它帮助您重新思考用户界面设计中的白色间距原则。
查看全部
白色空间是设计中最被忽视的部分之一，通常是UX / UI设计人员最有效的解决方案。
在我的设计生涯开始时，我从未看到白色空间背后的真正价值以及它可以使我的设计看起来更美丽和更具吸引力的方式。然而，当出现挑战时期时，有效利用空白区域对于解决问题至关重要。
然而，正确使用白色空间是非常必要的，否则设计最终会看起来非专业和简单。
什么是白色空间？
白色空间是布局之间的空白区域，段落中的线条，多个设计元素之间的空白等。这些元素可以是图像，排版，插图，图标等。白色空间不是指空白色背景，也不一定是白色，它可以是任何颜色或图案，因此我们也将其称为负空间。
既然您已经了解了设计中的空白区域，那么让我们深入了解它将如何影响可用性和用户界面。
1、改善你的视觉层次结构
将可视化层次结构表单设置为UI设计者最关键的步骤之一。作为一个基本的经验法则，最重要的信息必须位于顶部，大胆且易于查看，而底部最不重要的信息，在较小的框中，不太集中。这很容易理解，甚至可以在您的设计中展示。
但是，在上面的例子中，左侧的图像使用较小的空白区域。这可能会破坏您的视觉层次结构，并导致用户混淆或不感兴趣以吸收给定的信息集。
因此，示例显示了白色空间如何使设计更易于扫描，从而更容易理解。
2.帮助用户关注重要方面
负空间有助于用户专注于最相关的内容。这通常通过有效利用设计中的宏观和微观空间来完成。
在非专业术语中，宏观空间是指设计中较大的白色空间段（页眉，页脚和网站边距之间的空间），而微空间指的是不同UI元素之间的较小空间（行和段落之间的空间）
如果您希望将用户的注意力集中在说明图而不是文本上，则在其周围添加有效的空白区域可确保更加关注所需的设计元素。在上面的示例中，在左侧，插图与其他元素混合，禁止用户吸收适当的信息，而在右侧，插图享有白色空间，允许用户专注于相关插图，而后者又链接提供的信息。
3、找到合适的平衡点
白色空间有多少白色空间？在设计领域经常提出的一个问题。对此的简单回答是，允许用户理解信息而不会压倒信息的设计是最平衡的白色空间设计。
在上面的例子中，右侧的图像爆炸，信息使其势不可挡。虽然右侧的图像是舒缓的，但能够在不压倒用户的情况下实现理解。
4、保持一致
一致性是白色空间的关键。设计中的每条信息都是一致的，白色空间也是如此。空间的逻辑利用为设计中的每个元素创建适当的空间。
利用率的不一致将导致突然的用户界面。
示例中，不一致的白色间距使得它看起来像两组照片，一组在顶部，另一组在底部。在右侧图像中，所有6张照片看起来都是一致的，并且是1套照片的一部分。
5、创造性地适应元素中的空白区域
白色空间的创造性利用是一项技能，可以使元素看起来更加美观，并且仅仅使用负空间的标准原则来增加焦点和保留。人们可以将他们的创意果汁拿出来，而不是利用白色空间来改善视觉吸引力，而是描绘一些相关的东西并增强视觉效果。以上是创造性地使用白色空间来展示品牌使命和身份的某些示例。最常见的例子是FedEx，其中白色空间用于显示与品牌使命产生共鸣的箭头。
总之，白色空间就像艺术一样，你必须正确地做到让你的设计看起来更有效和专业。我们希望您喜欢阅读这篇文章，它帮助您重新思考用户界面设计中的白色间距原则。
在我的设计生涯开始时，我从未看到白色空间背后的真正价值以及它可以使我的设计看起来更美丽和更具吸引力的方式。然而，当出现挑战时期时，有效利用空白区域对于解决问题至关重要。
然而，正确使用白色空间是非常必要的，否则设计最终会看起来非专业和简单。
什么是白色空间？
白色空间是布局之间的空白区域，段落中的线条，多个设计元素之间的空白等。这些元素可以是图像，排版，插图，图标等。白色空间不是指空白色背景，也不一定是白色，它可以是任何颜色或图案，因此我们也将其称为负空间。
既然您已经了解了设计中的空白区域，那么让我们深入了解它将如何影响可用性和用户界面。
1、改善你的视觉层次结构
将可视化层次结构表单设置为UI设计者最关键的步骤之一。作为一个基本的经验法则，最重要的信息必须位于顶部，大胆且易于查看，而底部最不重要的信息，在较小的框中，不太集中。这很容易理解，甚至可以在您的设计中展示。
但是，在上面的例子中，左侧的图像使用较小的空白区域。这可能会破坏您的视觉层次结构，并导致用户混淆或不感兴趣以吸收给定的信息集。
因此，示例显示了白色空间如何使设计更易于扫描，从而更容易理解。
2.帮助用户关注重要方面
负空间有助于用户专注于最相关的内容。这通常通过有效利用设计中的宏观和微观空间来完成。
在非专业术语中，宏观空间是指设计中较大的白色空间段（页眉，页脚和网站边距之间的空间），而微空间指的是不同UI元素之间的较小空间（行和段落之间的空间）
如果您希望将用户的注意力集中在说明图而不是文本上，则在其周围添加有效的空白区域可确保更加关注所需的设计元素。在上面的示例中，在左侧，插图与其他元素混合，禁止用户吸收适当的信息，而在右侧，插图享有白色空间，允许用户专注于相关插图，而后者又链接提供的信息。
3、找到合适的平衡点
白色空间有多少白色空间？在设计领域经常提出的一个问题。对此的简单回答是，允许用户理解信息而不会压倒信息的设计是最平衡的白色空间设计。
在上面的例子中，右侧的图像爆炸，信息使其势不可挡。虽然右侧的图像是舒缓的，但能够在不压倒用户的情况下实现理解。
4、保持一致
一致性是白色空间的关键。设计中的每条信息都是一致的，白色空间也是如此。空间的逻辑利用为设计中的每个元素创建适当的空间。
利用率的不一致将导致突然的用户界面。
示例中，不一致的白色间距使得它看起来像两组照片，一组在顶部，另一组在底部。在右侧图像中，所有6张照片看起来都是一致的，并且是1套照片的一部分。
5、创造性地适应元素中的空白区域
白色空间的创造性利用是一项技能，可以使元素看起来更加美观，并且仅仅使用负空间的标准原则来增加焦点和保留。人们可以将他们的创意果汁拿出来，而不是利用白色空间来改善视觉吸引力，而是描绘一些相关的东西并增强视觉效果。以上是创造性地使用白色空间来展示品牌使命和身份的某些示例。最常见的例子是FedEx，其中白色空间用于显示与品牌使命产生共鸣的箭头。
总之，白色空间就像艺术一样，你必须正确地做到让你的设计看起来更有效和专业。我们希望您喜欢阅读这篇文章，它帮助您重新思考用户界面设计中的白色间距原则。