在本文中，我们将分析另外四种用户界面设计，并讨论使它们具有吸引力的视觉设计原则。毕竟，事物的外观会影响对其功能的看法。
示例 1：舒适的编辑体验
我们的第一个例子来自数据分析平台Dovetail。此设计使用网格、字体系统和一致的图标来创造舒适的编辑和阅读体验。Dovetail 创造了一个视觉上精致而舒适的编辑环境。
ovetail 使用基本的列网格、通风的文本块、各种字体样式和视觉上一致的图标来创造愉快的编辑体验。
与网格对齐。一个 3 列网格充当元素对齐的基础。最左侧的网格线为侧边栏导航提供了垂直定位点。中间的文本列也与网格线左对齐，最右边的网格线分隔标签和评论区域。在设计中设置网格将使元素在不同屏幕上保持一致。
为不同类型的内容键入样式。 Dovetail 使用单一字体系列来提供一致的排版体验。在这个字体系列中，有多种类型的文本样式和颜色变化（海军蓝和灰色）。每个变体都用于区分内容类型，从而利用格式塔相似定律。例如，在侧边栏导航中，“添加视图”和“新建标签板”均未加粗且呈灰色，表示它们是同一类型的操作（创建 避免在设计中使用许多不同的类型样式，这样就不会让用户不知所措。
文本行间距和长度。大文本块由于其慷慨的行距（即两行连续文本的基线之间的距离）而通风，再加上相对较短的行长度，可以带来舒适的阅读（和编辑）体验，因为眼睛可以很容易地找到下一行。
视觉上一致的图标。 Dovetail 应用程序中使用的许多图标共享线条粗细、略微圆角，并且大小相似。这些小细节创造了一个统一的图标集，并为您的设计带来光彩。但是，请记住，图标总是更容易识别，并且根据菲茨定律，如果它们有标签，点击速度会更快。
示例 2：模块化网格
我们的第二个例子来自MoMA（现代艺术博物馆）的网站。该设计利用模块化网格结构、有趣的调色板和图像来创造令人兴奋、吸引人的视觉体验。
不对称平衡。平衡是令人满意的设计元素的排列或比例，当在假轴的两侧有均匀分布的视觉信号量时，就会发生平衡。在本例中，这个假想轴垂直穿过屏幕中间（橙色）。如果你看一下这个轴两侧的设计元素，你会看到在两侧交替的彩色文本和图像块。这种编织效果创造了一种平衡感，以及一种能量和运动感，乞求我们参与其中。没有一个元素，或者在这种情况下的展览，比其他元素更重要。
您应该在设计中使用的平衡类型取决于您想要传达的内容。不对称平衡，如本例所示，是动态的和引人入胜的，而对称的平衡是安静的和静态的。
俏皮的色彩使用。MOMA在其设计中使用了复杂而俏皮的色彩系统。随着新展览的加入和旧展览的结束，它的色彩系统也在不断发展。这些俏皮的色块鼓励用户点击和发现。更重要的是，整个网站都一致地使用颜色。例如，此主页上用于 Refik Anadol 展览的粉红色也用于特定展览页面。
内容样式。 排版样式和颜色使用使内容块感觉很特别，可以在需要时独立使用。尽管内容发生了变化，但字体处理保持不变，唯一的变化是文本大小（大与小）。
有意义的图像。 图像提供了对每个展品的一瞥，而不是纯粹的装饰。它们被适当裁剪，最重要的元素仍然在视野中。您的图片应该为您的页面增加价值，例如，通过添加有关产品或概念的补充信息和详细信息。确保裁剪后的图像有意义，尤其是在不同的屏幕尺寸下。
模块化网架结构。 这些内容块和图像布置在具有行和列（或模块）的模块化网格结构上。在此桌面大小下，行由 3 个大小一致的模块组成。彩色文本块占用一个完整的模块，其对应的图像各占用 2 个模块。这种类型的网格结构非常灵活，允许多种组合，使其适用于许多不同的设计。
示例 3：单色调色板和对称影像
我们的第三个例子来自奢侈护肤公司Aesop。这种设计利用单色调色板和负空间来创造一个精致、干净的界面。
单色调色板。 调色板是为特定项目、品牌或设计集选择的一组颜色。每种颜色都发挥着作用，并增加了界面的视觉吸引力。Aesop 的单色调色板是和谐的——虽然用于背景的柔和黄色相似，但导航和标题区域、产品区域和悬停状态（在上面的屏幕截图中，中间的项目）之间略有不同。灰色和黑色协同工作，为排版创建视觉层次结构（黑色表示主要文本，灰色表示辅助文本）。
单色调色板是最容易创建和应用的，并且需要很少的视觉设计经验。通过将调色板限制为 3-4 种颜色，您将能够轻松传达视觉层次和对比度，因为压倒或分散用户注意力的元素会更少。
统一的次要内容。Aesop的设计特别好看，主要有三个原因。首先，它使用两种笔画宽度（顶部的粗体用于将主要产品与其属性分开，底部较浅的笔触用于分离属性）。其次，类型变化（属性标签为粗体，属性值为正常）允许眼睛快速聚焦于对该特定用户最重要的任何属性。第三，与网格对齐使设计看起来光鲜亮丽，同时也便于扫描。每个项目的次要内容都具有相同的高度和填充，并且与同一网格线左对齐。在下面的屏幕截图中，您可以看到应用于各个项目页面上的辅助内容的相同视觉系统，以组织其他信息。
对称图像。 对称性使界面感觉平衡和可预测。Aesop使用对称的意象来平衡和锚定每件产品。影像在列内居中，并锚定在同一基线上。这为界面提供了视觉顺序 - 列中的其他所有内容都可以在同一轴上居中：产品标题和尺寸、次要内容行以及添加到购物车按钮。
一致的固定高度。 在设计响应式网站时，宽度、高度和填充可能会根据用户窗口的整体宽度进行调整。然而，在每个响应范围内，一致、固定的宽度有助于设计看起来美观和精致。在上面的 Aesop 示例中，无论窗口宽度如何，界面元素（如“过滤依据”按钮、“适合”和“皮肤感觉”辅助信息行以及“添加到购物车”按钮）都具有相同的高度。
示例 4：简单明了
我们的第四个例子来自电子邮件客户端 Superhuman。这个例子证明你不需要颜色、花哨的图标或图像来使设计看起来不错。即使是一个简单的界面，如果它利用了视觉设计的基本原则，它也会看起来美观。
缩放以创建层次结构。 在简单的、面向文本的界面中，改变文本大小可以创建视觉层次和清晰度，同时还可以打破原本是文本墙的内容。电子邮件主题 Closing our deal 具有最大的字体大小，以适当地表明其在页面上的相对重要性。要在自己的设计中使用比例创建层次结构，首先要确定什么是最重要的。使此组件比其他组件大 30-50%。
微妙的阴影。 投影和渐变增加了深度，并在 UI 元素之间创建差异化。但是，它们也可能被误用和过度使用。在超人示例中，投影会创建一个焦点区域（电子邮件线程），并将其与其他信息（有关发件人的导航和详细信息）区分开来。投影还有助于用户识别主按钮（关闭 X 和分页箭头）。
在您自己的设计中应用投影和渐变时：
只使用两种颜色，避免对比色。理想情况下，仅使用两种单色或类似颜色（色轮上彼此相邻的颜色组），以与您的配色方案相协调）。
在投影上引入不透明度，以帮助渐变与界面的其余部分混合。
如果使用多个投影或渐变，请考虑光源并保持一致（例如，从亮到暗的方向在渐变中应相同，或者阴影在投影中应以相同的方向落下）
将投影的方向与要添加渐变的形状相匹配（例如，正方形为线性渐变，圆形为径向渐变）。
前景和背景的区别。在视觉上分解界面的最佳方法是改变背景颜色。这种转变会产生前景（首先吸引用户注意力）和背景的错觉。在超人的示例中，电子邮件线程位于白色背景上，而发件人的信息位于浅灰色背景上。如果它们都是相同的颜色，则界面将缺乏深度，并且更难区分界面的不同区域及其相对重要性。
使用背景色在界面中区分时，请选择饱和度相同的颜色。例如，白色与浅灰色搭配得很好，而黑色与深灰色搭配得很好。如果背景是颜色，请选择辅助单色作为前景色。
在一致的字体系列中改变字体样式。 Superhuman 使用同一字体系列中的不同字体样式（小写字母和粗体）和颜色的细微变化（绿色、黑色和灰色）来区分不同类型的内容并关注用户。例如，“草稿”与 Laura Shea 标题的其余部分相同，但颜色的变化使设计不会让人感觉扁平，并且易于扫描，同时也适当地区分了电子邮件的状态（草稿与已发送）。
根据经验，确定排版系统，并始终使用相同的字体变体或样式（颜色、粗体、小写字母）用于相同的目的。在Superhuman的例子中，你可以看到这个建议在实践中：
小写字母的日期（例如，2 月 20 日）
粗体集成（例如，LinkedIn 和 Facebook)
结论
创建好看的设计需要仔细考虑。遵循视觉设计原则是制作精美设计的第一步。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
