face+ 关于 服务 案例
首页 案例 服务 关于 face+

ui设计如何提升界面亮度,提升UI设计质感的小技巧

Time: 2021-12-20

   ui界面设计的内容非常多,除了布局、色彩外,就连界面的亮点也是非常值得关注的。对于ui设计中关于界面亮度,今天就让faceui为大家介绍ui设计如何提升界面亮度,提升UI设计质感的小技巧。

  ui设计如何提升界面亮度

  在ui设计中提升界面亮度,很大程度上要关注色调、明度、饱和度的问题。

  色调是最原始状态下的颜色。例如蓝色、绿色、黄色、红色等,它不受任何光线和阴影的变化影响。这里有一个便于理解例子:色调就是你在色轮中看到的色彩,它与任何明暗或饱和度因素无关。

  明度表示了色彩的明暗程度。当我们走在路上,可以看到一些元素早上和晚上的颜色改变。例如,一座山的颜色是棕色,早晨的色调较浅,晚上的色调较暗。在UI中,明度扮演着重要角色,不但有助于我们获得良好的对比度,还能帮助我们在界面中构建出不同的层次结构。

  饱和度指的是色彩的鲜艳程度。当我们提升颜色的饱和度时,色彩就会变得更强烈和生动。当我们降低色彩的饱和度时,颜色就会变得更加黯淡,而当我们把饱和度降到最低时,色彩就变成了灰色。

ui设计如何提升界面亮度

  图片来源于网络

  如果提升界面亮度,就是在上述几点的设计中,关注以下三点:

  1、规则 60 30 10

  「规则 60 30 10」,这不是对超模的标准测量,而是成功组合颜色的比例。我们首先要选择一种主色调,然后运用到60%的空间中。再选择一种次要色调,在30%的空间中使用,最后剩下10%的空间使用最后一种颜色。这一理论曾在室内设计中被大量使用。

  2、暗≠黑、亮≠白

  当我们使用颜色来表达明暗时,有一个很普遍的错误,那就是使用不透明度的黑色表达阴影,不透明度的白色来表达光亮。但如果我们借鉴一下现实生活,会发现黑暗总是有一些基调的。

  黑暗从来都不是黑色的,黑暗只是被物体明度遮蔽的色调。就如上图中,柠檬的影子是非常深的绿色,而木板的影子是非常的深棕色,它们都不是黑色的。只有在完全没有光线的情况下,才会出现黑色。

  3、饱和度测试颜色和谐度

  想要让我们作品中的配色更加和谐,可以将色调从颜色中移除,只保留光和影,光影会给人以真实感和深度。当只剩下灰度时,我们可以清晰的观察到明暗之间的差异,这将有助于我们调整色彩之间的明暗程度和透明度,以搭配出更和谐的配色。

  我们中的许多人看到的颜色不够饱和或不够鲜艳,这是正常的,因为世界并不完美,颜色也不完美。我们大部分人都来自于一个只使用CMYK和颜色有限制的物理世界。

ui设计如何提升界面亮度

  图片来源于网络

  提升UI设计质感的小技巧

  1、使用色彩和字重来创造层次结构,而不是单纯的大小对比。主要内容采用深色(诸如标题,但是不要用纯黑),次要内容采用灰色(比如文章发表日期),辅助性内容采用浅灰色(比如页脚中的版权声明)。

  2、不要再有色背景上使用灰色的文本。降低白色文本的不透明度,基于背景色手工挑选文本的颜色。

  3、阴影设计。相比于采用大范围的扩散模糊阴影,使用微妙的垂直偏移阴影效果更明显,更自然,它模拟了最常见的光源特征,光线从上往下照下来所营造的阴影效果。

  4、尽量少使用 Borders。虽然 Border 是分隔两个元素的好办法,但是它不是唯一的方法,使用过多会让整个布局的设计感降低,甚至会造成混乱。

  5、不要随意放大小图标。创建元素之间的分离效果,并不一定要通过线框来表现,只要增加留白,让它们分隔开就行了。通过留白和间距来实现元素分组是UI设计中的常用手法。

  6、增加带有颜色的单边边框提升个性。

  7、并非每个按钮都需要颜色。

  以上就是faceui为大家介绍的关于ui设计如何提升界面亮度的相关内容。真正要做好ui设计并不简单,尤其在一些细节上的思考和反复的对比,才能做出一个好的ui作品。

合作咨询

上海(总部)

上海市浦东新区郭守敬路498号22号楼205
021-61057328
service@faceui.com

办公地址地图

北京

北京市东城区后永康胡同17号A座三层
010-64015620
service@faceui.com

办公地址地图

深圳

深圳市福田区金田路4018号安联大厦2601
0755-33955611
service@faceui.com

办公地址地图
首页 | 案例 | 服务 | 关于 | face+ | 智见

Copyright © 2009-2015 FaceUI design. All rights reserved


沪ICP备13044459号-5

上海办公地点地图
北京办公地点地图
深圳办公地点地图
在微信中搜索faceui
或保存二维码在微信中打开