界面设计|入门必看 | UI界面设计基础知识!( 三 )
如果一个对象没有填充 , 也没有边框或者效果 , 那么他就在界面中不可见 , 因为他需要被定义一些特征方才可见 。 但是你任然可以选择它、移动他、修改它 。 它也任然在你的图层列表中存在 。
填充的类型
填充有三种可选性 , 单一颜色、渐变或者图像背景 。 当然你也可以选择不要填充 。
以前 , 图案被认为是另一种填充 , 但是事实上它只一个元素的不断平铺 , 所以他属于图像类别 。
堆积填充
你可以向对象添加多个填充类型 。 显然 , 要想这个效果起作用 , 那么某个填充必须具有透明属性 。 否则你只能看见顶部的图层 。
渐变填充
你可以使用这个原则来实现非常有趣的多重叠加渐变效果 。 就像上图一样 , 创建四个渐变 , 然后让他们每个对应的角落都透明掉 。
边框
边框(描边)是继填充后 。 对象能具有的第二个样式
边框就是描边 , 也是围绕对象一周的一条线 。 他可以在对象内(内描边)也可以在对象外(外描边) , 甚至可以在入门之间(居中描边) 。 但是请记住 , 只有内描边才不会再视觉上使对象变大 。 在上图中 , 我们的矩形大小60*60 , 描边是10 , 中间图形的描边使矩形每边多了5 , 而最后一个使其每边多了10 。
描边样式
描边可以有不同的粗细 , 也可以是虚线 , 也可以使用颜色填充和渐变填充 。
大多数设计工具还允许修改结尾和拐角的样式 。 两端可以是平的 圆的 尖锐的等等样式 。 如果你的界面一般都是圆形 , 那么你的描边开始结尾拐角尽量设置为圆形 , 这样会更具统一性 。 如果没有请保持默认!
第三章:对象的投影与阴影
投影
外部投影是UI设计中是最常见的效果 , 他就是典型的需要依赖于中心(X、Y)的偏移来完成偏移距离、模糊度、不透明度 。 在上图中 , 我们可以看见阴影在y轴向下位移了20PX , 然后我们给左边的进行模糊 , 或者像右边这样不模糊 。
像Sketch等这样的工具都具有一个叫散布或者是扩散(Spread)的属性 这个东西使得阴影看起像是个很小的东西在投射阴影 。
在投影中最重要的是X、Y和模糊的数值 。 后者必须是大于0的数值 , 而X、Y也可以是负值 , 这样他几乎可以笼罩到每个方向 。
你可以通过向同一个对象添加多个投影来获得有趣的效果 。 看下图就有三个蓝色的投影 , 他们给个都向下移动3pxNeumorphism(新你太美)
说到投影 , 我们不得不说说这个最近火的P爆的新你太美效果 。 他就是靠投影的模糊和X、Y值的叠加使用来作为核心原则实现 。
【界面设计|入门必看 | UI界面设计基础知识!】
自然的外观 , 柔和的投影
那些看起自然的投影是决定了你设计好坏的重要影响因素之一 。 看起来自然的方法就是避免使用纯黑色投影和直接使用本体的主色 。 纯黑色使得对比度过大 , 看起来又脏又不自然 。 解决这个投影的最好方法就是从默认(黑色)改为主色调的深色 , 然后在降低其透明度 。 上面的案列我们可以使用暗紫色来将其透明度降低达到其完美的效果 。
内阴影
内阴影在UI设计中是比较少见的 , 它具有投影一样的参数 , 但是它是出现在对象内部的 。 所以他不是很受大家喜欢 。
还有就是我们的大多数界面都是由一系列的对象层叠起来的 , 在这种情况下 , 一个外部投影就很有意义了 , 因为它提供了深度 , 而内部阴影表明该对象上面有个洞 。
左边的例子我们可以看到是一个典型的有深度的堆栈层 , 在大对数情况下都能看见 。 添加一个内阴影在任何层就可以导致这个层破了个洞的幻觉 。 这就打破了我们的堆栈层的视觉架构 。 种风格的唯一用例就是表单输入(输入框、复选框、单选按钮)和Neumorphism风格的创建 。 在某些情况下它可以使对象看起来更逼真 , 但是只能适度的使用 。
- 固态硬盘入门手册,一看就精通的电脑硬件教程
- SpringBoot2.x入门到项目实战课程系列(第二章)
- 「OpenCV入门教程」线性滤波方框滤波、均值滤波与高斯滤波
- Python爬虫入门第一课:如何解析网页
- 更新了!深入浅出图解Git,入门到精通(保姆级教程)第三篇
- 入门到老手全覆盖,锐龙CPU给3D创作加速
- 昔日i7沦为i3,英特尔十代i3或成入门游戏CPU最优选
- 零基础小白入门必看篇:学习Python之面对对象基础
- 我用3个月总结出的48页python入门手册,是如此简单透彻
- SpringBoot2.x入门到项目实战课程系列(第五章)