UI界面设计基础知识！

来源：天津UI设计培训学校时间：2020/10/11 16:31:37

　　章：形状和对象图像是怎么创建的?无论你是做低保真线框图还是做个漂亮的界面你都需要使用形状工具和一些图像。那么你可以使用Figma、AdobeXD等等其他软件来熟悉形状工具的用法。所以当前的UI设计工具都是通过操纵一些矢量的形状来进行工作。这意味着你所看到的一切都是由定义形状的数值来完成的，不管他是放大还是拉伸他就也只是变化了一个数值而已不会有任何的质量损失。如果你将计划设计界面，那么你的做好准备，因为在大部分时间你就是个没有感情的移动矩形机器人。(矩形是一个在界面设计中很流行的形状(在椭圆之前))

　　UI设计的基本思想就是通过一些恰当的手段来改变矩形盒子模型盒模型是在设计和代码中定义的数字接口对象的基本方法。我们所做的大多数设计都是根据盒子模型来设计的，所以很有必要了解它。

       Fill 填充

　　Border 边框

　　Outer margin 外边距

　　Inner margin 内边距填充：顾名思义就是元素的背景(他可以是纯色、渐变、图像，或者是前者的混合)边框：就是包裹我们对象的轮廓(描边)。

      外边距：就是对象之外的区域，他使我们的对象周围拥有足够的安全空间内边距：区域越大，我们物体的安全区域就远大定义属性大小宽度和和高度(以点为单位)定义了对象的大小。在大多数情况下我们使用W和H来简称。因为是二维空间，宽度就是水平轴上的刻度，高就是垂直轴上的刻度。简而言之，点和像素是不一样的。分辨率和像素密度是另一篇文章的主题，所以为了简短起见：点是像素的向量表示，它依赖于分辨率。在现代，像素密度非常高的显示器上，1个点可以是4个像素或更多。这样做的原因是要有足够大的元素，但也要给它们足够的清晰度和度。宽度和高度是一个可以容纳小矩形(包括对象本身是一个不规则的形状)的容器。

　　对于矩形和一些规则的图形来说这就很容易了，但是对于一些不规则的图形来说，那么他的位置就是包含的矩形的位置。

　　角度角度定义了对象顺时针旋转的角度，一般默认0°，旋转当然也是可以是负数。值得记住的是，比如-15°，他其实是360-15°(345°) 为了的到一个一直的效果，请不要手动的旋转对象，而是从键盘输入数值，因为这比手动旋转的多。

　　边界半径研究表明，圆形比尖锐的形状更友好。为了定义圆度的等级，我们使用了一个词叫边界半径(即圆角度数)来定义它的属性。 边界半径只是一个数值，就像宽度和高度一样，它也是用点表示，数值越大，形状的圆角就越圆。你可以单独对一个地方使用，也可以多个地方使用。一般来说2到6p也比0p来的更友好。

　　第二章：填充与边框

　　填充正如我们前面所表述的，大多数UI设计都是关于移动矩形。那么让我们从一个矩形开始吧!当你创建一个新的矩形，他会默认自带一个填充，大多数情况下他是灰色的，所以你要记得自己改变颜色，有时候他还会有个边界。为啥是灰色呢，因为灰色足够中性，你添加新的形状也不会搞坏你之前做的界面，而且你可以很容易看见他。简单的填充是对象背景的另一个名字，它可以是纯色、渐变、或者是照片，他们还可以有不同程度的透明度。 提示大多数现代设计工具都允许使用键盘上的数字来控制透明度。只需选择对象后按1、2等等就会改变透明度。0是在和百分之0间进行切换。如果一个对象没有填充，也没有边框或者效果，那么他就在界面中不可见，因为他需要被定义一些特征方才可见。但是你任然可以选择它、移动他、修改它。它也任然在你的图层列表中存在。填充的类型填充有三种可选性，单一颜色、渐变或者图像背景。当然你也可以选择不要填充。以前，图案被认为是另一种填充，但是事实上它只一个元素的不断平铺，所以他属于图像类别。

　　堆积填充你可以向对象添加多个填充类型。显然，要想这个效果起作用，那么某个填充必须具有透明属性。否则你只能看见顶部的图层。

　　渐变填充你可以使用这个原则来实现非常有趣的多重叠加渐变效果。就像上图一样，创建四个渐变，然后让他们每个对应的角落都透明掉。 边框边框(描边)是继填充后。对象能具有的第二个样式 边框就是描边，也是围绕对象一周的一条线。他可以在对象内(内描边)也可以在对象外(外描边)，甚至可以在入门之间(居中描边)。但是请记住，只有内描边才不会再视觉上使对象变大。

　　描边样式描边可以有不同的粗细，也可以是虚线，也可以使用颜色填充和渐变填充。 大多数设计工具还允许修改结尾和拐角的样式。两端可以是平的 圆的 尖锐的等等样如果你的界面一般都是圆形，那么你的描边开始结尾拐角尽量设置为圆形，这样会更具统一性。如果没有请保持默认!

尊重原创文章，转载请注明出处与链接：http://www.peixun360.com/475/news/264108/违者必究！ 以上就是天津UI设计培训学校 小编为您整理 UI界面设计基础知识！的全部内容。