UI界面设计基础知识

本期和大家分享一下UI界面设计基础知识，从形状和对象、填充与边框还有对象的投影与阴影这三个方向讲起，一起来看看吧~

第一章：形状和对象

 

图像是怎么创建的？

无论你是做低保真线框图还是做个漂亮的界面你都需要使用形状工具和一些图像。那么你可以使用Figma、AdobeXD等等其他软件来熟悉形状工具的用法。

所以当前的UI设计工具都是通过操纵一些矢量的形状来进行工作。这意味着你所看到的一切都是由定义形状的数值来完成的，不管他是放大还是拉伸他就也只是变化了一个数值而已不会有任何的质量损失。

如果你将计划设计界面，那么你的做好准备，因为在大部分时间你就是个没有感情的移动矩形机器人。（矩形是一个在界面设计中很流行的形状（在椭圆之前））

 

UI设计的基本思想就是通过一些恰当的手段来改变矩形 

UI design is about moving rectangles around. And the skill is all in knowing HOW to move them, WHERE and most importantly WHY.

 

盒子模型

盒模型是在设计和代码中定义的数字接口对象的最基本方法。我们所做的大多数设计都是根据盒子模型来设计的，所以很有必要了解它。 

• Fill 填充
• Border 边框
• Outer margin 外边距
• Inner margin  内边距

填充：顾名思义就是元素的背景（他可以是纯色、渐变、图像，或者是前者的混合）

边框：就是包裹我们对象的轮廓（描边）。在下个章节我们会深入的探讨这个东西

外边距：就是对象之外的区域，他使我们的对象周围拥有足够的安全空间

内边距：区域越大，我们物体的安全区域就远大

 

定义属性

大小

宽度和和高度（以点为单位）定义了对象的大小。在大多数情况下我们使用W和H来简称。因为是二维空间，宽度就是水平轴上的刻度，高就是垂直轴上的刻度。

简而言之，点和像素是不一样的。分辨率和像素密度是另一篇文章的主题，所以为了简短起见：点是像素的向量表示，它依赖于分辨率。在现代，像素密度非常高的显示器上，1个点可以是4个像素或更多。这样做的原因是要有足够大的元素，但也要给它们足够的清晰度和精确度。

 

宽度和高度是一个可以容纳最小矩形（包括对象本身是一个不规则的形状）的容器。 

 

位置

对象的位置是X、Y轴上的一组数值，这个由包含它的画板来定义。X表示水平轴上的位置，Y表示垂直轴上的位置。 

 

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

 

角度

角度定义了对象顺时针旋转的角度，一般默认0°，旋转当然也是可以是负数。值得记住的是，比如-15°，他其实是360-15°（345°） 

 

为了的到一个一直的效果，请不要手动的旋转对象，而是从键盘输入数值，因为这比手动旋转精确的多。

 

边界半径

研究表明，圆形比尖锐的形状更友好。为了定义圆度的等级，我们使用了一个词叫边界半径（即圆角度数）来定义它的属性。 

 

边界半径只是一个数值，就像宽度和高度一样，它也是用点表示，数值越大，形状的圆角就越圆。你可以单独对一个地方使用，也可以多个地方使用。一般来说2到6p也比0p来的更友好。

如何你决定用这种方式设计按钮记得保存一致性哦！

 

第二章：填充与边框

 

填充

正如我们前面所表述的，大多数UI设计都是关于移动矩形。那么让我们从一个矩形开始吧！

当你创建一个新的矩形，他会默认自带一个填充，大多数情况下他是灰色的，所以你要记得自己改变颜色，有时候他还会有个边界。为啥是灰色呢，因为灰色足够中性，你添加新的形状也不会搞坏你之前做的界面，而且你可以很容易看见他。

 

简单的填充是对象背景的另一个名字，它可以是纯色、渐变、或者是照片，他们还可以有不同程度的透明度。 

 

提示

大多数现代设计工具都允许使用键盘上的数字来控制透明度。只需选择对象后按1、2等等就会改变透明度。0是在百分之百和百分之0间进行切换。

如果一个对象没有填充，也没有边框或者效果，那么他就在界面中不可见，因为他需要被定义一些特征方才可见。但是你任然可以选择它、移动他、修改它。它也任然在你的图层列表中存在。

 

填充的类型

填充有三种可选性，单一颜色、渐变或者图像背景。当然你也可以选择不要填充。

以前，图案被认为是另一种填充，但是事实上它只一个元素的不断平铺，所以他属于图像类别。

堆积填充

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

 

渐变填充

 

你可以使用这个原则来实现非常有趣的多重叠加渐变效果。就像上图一样，创建四个渐变，然后让他们每个对应的角落都透明掉。 

 

边框

边框（描边）是继填充后。对象能具有的第二个样式 

 

边框就是描边，也是围绕对象一周的一条线。他可以在对象内（内描边）也可以在对象外（外描边），甚至可以在入门之间（居中描边）。但是请记住，只有内描边才不会再视觉上使对象变大。 

在上图中，我们的矩形大小60*60，描边是10，中间图形的描边使矩形每边多了5，而最后一个使其每边多了10。

 

描边样式

描边可以有不同的粗细，也可以是虚线，也可以使用颜色填充和渐变填充。 

 

 

大多数设计工具还允许修改结尾和拐角的样式。两端可以是平的 圆的 尖锐的等等样式。 

 

 

如果你的界面一般都是圆形，那么你的描边开始结尾拐角尽量设置为圆形，这样会更具统一性。如果没有请保持默认！ 

 

 

第三章：对象的投影与阴影

 

投影

外部投影是UI设计中是最常见的效果，他就是典型的需要依赖于中心（X、Y)的偏移来完成偏移距离、模糊度、不透明度。在上图中，我们可以看见阴影在y轴向下位移了20PX，然后我们给左边的进行模糊，或者像右边这样不模糊。 

 

像Sketch等这样的工具都具有一个叫散布或者是扩散（Spread）的属性, 这个东西使得阴影看起像是个很小的东西在投射阴影。

在投影中最重要的是X、Y和模糊的数值。后者必须是大于0的数值，而X、Y也可以是负值，这样他几乎可以笼罩到每个方向。

 

 

你可以通过向同一个对象添加多个投影来获得有趣的效果。看下图就有三个蓝色的投影，他们给个都向下移动3px 

 

 

Neumorphism（新你太美）

说到投影，我们不得不说说这个最近火的P爆的新你太美效果。他就是靠投影的模糊和X、Y值的叠加使用来作为核心原则实现。 

 

 

自然的外观，柔和的投影

那些看起自然的投影是决定了你设计好坏的重要影响因素之一。看起来自然的方法就是避免使用纯黑色投影和直接使用本体的主色。纯黑色使得对比度过大，看起来又脏又不自然。

 

解决这个投影的最好方法就是从默认（黑色）改为主色调的深色，然后在降低其透明度。上面的案列我们可以使用暗紫色来将其透明度降低达到其完美的效果。

 

内阴影

内阴影在UI设计中是比较少见的，它具有投影一样的参数，但是它是出现在对象内部的。所以他不是很受大家喜欢。还有就是我们的大多数界面都是由一系列的对象层叠起来的，在这种情况下，一个外部投影就很有意义了，因为它提供了深度，而内部阴影表明该对象上面有个洞。

 

左边的例子我们可以看到是一个典型的有深度的堆栈层，在大对数情况下都能看见。添加一个内阴影在任何层就可以导致这个层破了个洞的幻觉。这就打破了我们的堆栈层的视觉架构。

种风格的唯一用例就是表单输入（输入框、复选框、单选按钮）和Neumorphism风格的创建。在某些情况下它可以使对象看起来更逼真，但是只能适度的使用。

 

 

你可以通过在物体上使用内阴影来达到这种效果，而且你还可以反转X、Y的方向。

 

对于新你太美这个风格，他的可选与不可选是由内阴影或者是投影来决定的，所以这让他在选定状态与标准状态下的可感知差异太小，以至于即使是非视力受损的人也会完全忽略他。这就导致这种风格的可达性缺陷之一。 

 

模糊

大多数的设计工具都拥有一个叫高斯模糊的效果，它会使效果均匀的分散到每个方向，影响他的主要是半径的值，半径越大，模糊效果就越明显。

高斯模糊是最常见的模糊方式，你可以使用它来过度背景，或者是有选择性的对一些背景进行模糊处理，来达到亿点点真实的景深效果。

 

高斯模糊作为阴影

这种类型的模糊还可以帮助我们制作一些非标准的投影，我们只需要把一个椭圆放在需要投影的对象下面，就可以单独的来制作一个投影了，也可以结合标准投影来使用，这样你可以获得更佳的效果。 

 

背景模糊

当水果公司开始在他们的操作系统中使用背景模糊来达到毛玻璃效果的时候，背景模糊就变的流行起来。具有这种效果的物体会把他下面一层的东西模糊掉。

 

在这个例子中，一个只有90%透明度的含有背景模糊的正方形被放在右边，正如你所见，放在正方形下面的圆模糊的看不清了。

运动模糊

运动模糊模拟物体沿着某个方向运动时由于速度过快产生的残影，他和高斯模糊的工作原理一样，只是多了方向的控制。 

 

变焦模糊

当物体由内向外模糊时，就会发生羽化模糊效果，这种效果常被用于摄影，对于UI设计来说，不一定是一个很好的选择。 

 

在这种特殊的模糊类型中，你可以设置模糊的起源点，通过这些点可以做出很多有趣的效果。 

 

 

以上就是本期关于UI界面设计基础知识的内容啦！希望对各位小伙伴有所帮助~

转载声明：本文来源于网络，不作任何商业用途