长沙UI设计线上培训

UI界面视觉设计的空间要素

1.栅格系统

1.1栅格系统简介

栅格系统英文为「Grid systems」，是一种平面设计的方法与风格，运用固定的格子设计版面空间布局。

其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。

如今栅格系统也已经被运用到网页设计中，它以规则的网格阵列来指导和规范网页中的空间布局。

栅格系统的使用，可以让网页的信息呈现更加美观、易读、严谨和一致，同时也更具可用性。

1.2「8像素」栅格规则

「8像素」栅格规则是一个以8px为单位，利用8的倍数来规定页面中元素(按钮、输入框、图片等)的尺寸及各自间距的一种通用的栅格规则。

为什么用8而不是5或7呢?因为8是一个偶数，在UI设计过程中，对于Android系统需要导出特殊的 1.5x的切图，

如果图片尺寸为奇数，则会出现半像素和虚边的问题，而用偶数则可以避免这种情况。

为什么用8而不是6或10呢?因为目前主流的屏幕尺寸大部分都是8的整数倍，比如1920×1080、1280×1024、1280×800、1024×768等。

即使某些屏幕边长像素不是8的倍数，在设计中仍然可以尽量做到自定义元素的长、宽、margin以及padding都是8的整倍数来维持设计的一致性。

2.留白

对于一些特殊的页面，例如：引导页、闪屏页、促销页等，可以不用严格按照栅格系统进行设计，但需要注意空间留白的运用。

2.1留白四属性

层次感：留白可以使页面的层次感得到极大的增强，留白越大，模块、信息间的层次感越清晰。

焦点：元素越多，人的视觉注意力越容易分散;相反元素越少(即留白越大)，注意力则会更有效地聚焦在重要的内容上。

韵味：留白具有“此时无物胜有物”的感觉，犹如的水墨画。留白运用于页面设计中，韵味也会出现。

呼吸：留白的呼吸属性可以想象成周围的空气，当空气中的颗粒物(元素)特别多时，人的呼吸也会觉得不通透;相反留白越多时，呼吸感越顺畅。

2.2留白表现形式

轻度留白：轻度留白是我们常见的页面留白设计形式，在传递出雅致、、文艺等气质的同时，又能将信息表现得清晰直接，让页面更加简洁和实用。

轻度留白融合了重度留白的优势，但不受品牌属性的影响，几乎任何产品都可以用这种表现形式。

重度留白：重度留白是把主体缩小到，其传递出的雅致、空灵、气质是强的，但与此同时，其他的属性也近乎为零。

“无印良品”品牌倡导简约、质朴的生活方式，原研哉赋予其设计理念就是“空”。所以，重度留白传递的不是产品，而是概念、气质和态度。

后总结

1.色彩

色相、明度、饱和度是色彩的三个属性，不同的色彩具有不同的心理寓意，选色时需考虑产品的调性和受众人群;

色环上距离(角度)越大的颜色对比效果越强，反之对比效果越弱，设计时应采用合适的色彩搭配。

2.字体

黑体、宋体等是常用的中文字体，而衬线体和无衬线体是常用的西文字体;不同平台的界面设计会有不同的字体使用规范;

另外，设计时需注意字号、字重以及行间距的设置，以达到的阅读体验。

3.图标

图标可以辅助信息文字的传达，也可以对界面起到修饰作用;功能型和展示型是图标的两大类型;

不同风格的图标传递出不同的视觉语言，根据场景的需要进行合适的选择，并保持风格的一致性。

4.图片

不同比例的图片所传递的主要信息各不相同，设计时需要结合产品的特点，并根据不同的要求来选择合适的图片比例;

图片的排版类型有很多种，根据不同的场景和所需传递的主体信息来选择与之相符的展现方式。

5.空间

使用栅格系统，可以让界面的信息呈现更加美观、易读和规范，设计时可以采用「8像素」栅格规则来指导元素尺寸和间距的制定;

层次感、焦点、韵味、呼吸是留白的四个属性，留白的表现形式需结合品牌的属性来选择。

在任何领域，如果想要有所成就，都需要不断的持续学习提升，需要孜孜以求的探索，需要与时俱进，需要不断练习和实践。

以上就是小编讲的大致内容了，还有什么相关问题要问的，达内IT教育涵盖基本行业知识,安排的合理,专业师资,小班授课,费用低,学习快,400咨询热线24小时答疑。