UI界面视觉设计之图片和图标

目录

一、图片

1、图片的位置。

①扩大图片的面积，能产生界面整体的震撼力。如图，放大图片至画面的绝大部分面积，以造成视觉冲击力，营造出良好的视觉。

②在对角线上安置图片要素，如图，可以起到支配整个页面的空间和相互呼应的作用，使画面达到平衡。 氛围。

2.图片的数量

    ①在图片多的情况下，如图，我们可以通过均衡或者错落有致的排列，形成层次并根据版面内容来精心地安排，使用户一目了然地浏览众多的内容。​

   ②将同样大小的多张图片，采用叠加的方式进行组合，这种前后关系可为设计带来层次感

 ③精美、独特、单一的图片编排形式，如图将图片精简并且缩小，留下大量的空白，以取得简洁、明快的视觉效果，能使版面有视线集中感，并且给读者带来高雅稳健的视觉感受。

 3.图片的面积

    二 、图标

1、 图标设计的作用

    2.图标设计的原则

---

一、图片

1、图片的位置。

图片是界面视觉设计中重要的视觉元素之一，它在界面上放置的位置不受任何局限，但它的位置直接关系到版面的构图和布局。版面的四角和中轴是版面视觉的重要位置，在这些点上恰到好处地安排图片，可以相对容易的达到平衡而又不失变化，在视觉的冲击力上起到良好的效果。

在遵循形式美法则的前提下，我们可以尝试以下方法。

①扩大图片的面积，能产生界面整体的震撼力。如图，放大图片至画面的绝大部分面积，以造成视觉冲击力，营造出良好的视觉。

②在对角线上安置图片要素，如图，可以起到支配整个页面的空间和相互呼应的作用，使画面达到平衡。 氛围。

③把不同尺寸大小的图片按秩序编排，如图的设计，即有韵律感又显得理性且有说服力。

2.图片的数量

 图片的数量首先要根据内容的要求而定，图片的多少可以影响用户的阅读兴趣，适量的图片可以使版面语言丰富，活跃文字单一的版面氛围。

所以根据不同的情况，运用不同的设计方法。

    ①在图片多的情况下，如图，我们可以通过均衡或者错落有致的排列，形成层次并根据版面内容来精心地安排，使用户一目了然地浏览众多的内容。

   ②将同样大小的多张图片，采用叠加的方式进行组合，这种前后关系可为设计带来层次感

 

 ③精美、独特、单一的图片编排形式，如图将图片精简并且缩小，留下大量的空白，以取得简洁、明快的视觉效果，能使版面有视线集中感，并且给读者带来高雅稳健的视觉感受。

 3.图片的面积

图片面积的大小设置，直接影响着版面的视觉效果和情感的表达，如图的设计作品，利用大图片来反映具有个性特征的物品，以及物体局部的细节，使它能吸引读者的注意力，而将从属的图片缩小形成主次分明的格局。大图片感染力强，小图片显得简洁精致，大小与主次得当的穿插组合，能使版面具有层次感，这是版面构成的基本原则。

 ①小的图片给人以精致的感觉，图片的大小编排变化，丰富了版面的层次。

②大的图片具有很强的感染力，能很快吸引观者的注意，给人留下深刻的印象。

    二 、图标

    图标是具有高度概括性的、用于视觉信息传达的小尺寸图像。图标常常可以传达出丰富的信息，并且常常和词汇、文本相互搭配使用，两者互相支撑，或隐晦或直白地共同传递出其中所包含的意义、特征、内容和信息。在数字设计领域，图标作为网页或者UI界面中的象形图和表意文字而存在，是确保界面可用性的基础设施，也是达成人机交互这一目标的有效途径。

1、 图标设计的作用

 ①用于提示与强调，将产品的功能具象化，图形化，使观者者更容易理解和记忆。

   图标是UI设计中不可或缺的元素，很多图标很小，甚至有的小到容易被人忽略，但是它们却帮助用户解决了许多问题。图标是可用性和导航的关键，用户能够感知到图标的功用。

 

   ②使产品的人机界面更具有吸引力，富含娱乐性。如图中，图标设计简洁、形象、生动，能帮助观者快速找到相关信息。

 

  ③图标设计是一种艺术创作、能提高产品的品味。如图的界面设计给人一种精致、高雅的感觉。

 ④图标的表现方式灵活自由、可以传达不同的产品理念。如图的两件设计作品，就带给人以截然相反的两种感觉和印象。

 

   ⑤图标是在屏幕上展示产品的最佳方式，给用户以信赖感，便于功能的记忆。 

    2.图标设计的原则

 ①精美、直观、生动。如图中的图标设计简洁、形象、准确，能帮助我们迅速掌握产品的特点。

②准确、易识别、易理解。

   如图中用心和手的结合表达得心应手，准确通俗的图形语言形象的诠释了相关产品的含义。

   ③保持系列图标风格的统一，保证作品的完整性 

 

④主题文化性。

    如图中展示的是Adobe公司系列产品的图标设计，很好的向我们很好的展现了公司诚信、卓越、创新、包容的企业文化和数字体验改变世界的核心理念。