UI设计中视觉设计基础

视觉设计通过策略性地实现图像，颜色，字体和其他元素，着重于网站及其相关材料的美观性。成功的视觉设计不能脱离页面或功能上的内容。相反，它通过吸引用户并帮助建立对品牌的信任和兴趣来增强品牌价值。

视觉设计的基本要素

结合在一起创建视觉设计的基本元素包括：

• 线连接两个点，可用于帮助定义形状，进行分割和创建纹理。所有直线（如果是直线的）都具有长度，宽度和方向。

• 形状是独立的区域。为了定义区域，图形艺术家使用线条，值的差异，颜色和/或纹理。每个对象都是由形状组成的。

• 颜色 调色板的选择和组合用于区分项目，建立深度，着重强调的是，和/或帮助整理资料。颜色理论研究了各种选择在心理上如何影响用户。

• 纹理是指表面的感觉或感觉到的感觉。通过重复元素，将创建纹理并形成图案。根据纹理的应用方式，可以策略性地使用它来吸引或阻止注意力。

• 印刷术是指选择的字体，其大小，对齐方式，颜色和间距。

• 形式适用于三维物体，并描述其体积和质量。可以通过组合两个或更多个形状来创建形状，并且可以通过不同的色调，纹理和颜色进一步增强形状。

创建视觉设计的原则

成功的视觉设计将以下原理应用于上述元素，并以有意义的方式有效地将它们组合在一起。尝试弄清楚基本元素的使用时，请考虑：

• Unity必须处理页面上所有在视觉上或概念上似乎都属于同一元素的元素。视觉设计必须在统一性和多样性之间取得平衡，以避免枯燥或压倒性的设计。

• 视觉设计中的格式塔可以帮助用户感知整体设计，而不是单个元素。如果设计元素布置得当，整个设计的格式塔将非常清晰。

• 亚历克斯·怀特（Alex White）在他的《图形设计的元素》一书中说，空间是“在放置东西时定义的” 。将空间整合到设计中有助于减少噪音，提高可读性和/或产生幻觉。空格是布局策略的重要组成部分。

• 层次结构显示项目之间重要性的差异。设计人员通常通过不同的字体大小，颜色和在页面上的位置来创建层次结构。通常，顶部的项目被认为是最重要的。

• 平衡会产生一种感觉，即分配是平等的。这并不总是意味着存在对称性。

• 对比强调大小，颜色，方向和其他特征的差异，从而使产品脱颖而出。

• 比例尺确定尺寸范围；通过展示每个项目根据大小如何相互关联来创造兴趣和深度。

• 优势集中于将一个元素作为焦点，而其他元素作为从属。这通常是通过基于大小，颜色，位置，形状等进行缩放和对比来完成的。

• 相似性是指在整个设计中创建连续性而没有直接重复。相似性用于使各个部分在界面上协同工作，并帮助用户更快地学习界面。

将所有内容放在一起的示例

起初，将设计原则应用于基本元素似乎很困难，但是一旦您将页面或概念拉到一起，就会变得更加容易。以下是一个示例主页，其中包含一些实际应用的原则：

• 徽标采用了 颜色对比，使“ stop”一词脱颖而出

• 文本间距和大小创建视觉层次

• 轮播中的精选图片在其下方的较小图片上占主导地位，以创建焦点

• 文本周围和部分之间使用空格，以使页面呼吸

• 带纹理的背景有助于页面上的元素脱颖而出

• 地图显示比例

• 线来划分章节

• 形状创建按钮