我们在使用一个App时,App的界面设计可以说是最影响我们使用体验的一大要素,尤其是在色彩方面,让人舒适的色彩搭配,总会让我们拥有更良好的体验。那么ui设计如何提升界面亮度与色彩的和谐性呢?一起跟faceui来了解一下吧。
ui设计如何提升界面亮度与色彩的和谐性?
1、规则 60 30 10
「规则 60 30 10」,这不是对超模的标准测量,而是成功组合颜色的比例。我们首先要选择一种主色调,然后运用到60%的空间中。再选择一种次要色调,在30%的空间中使用,最后剩下10%的空间使用最后一种颜色。这一理论曾在室内设计中被大量使用。
2、暗≠黑、亮≠白
当我们使用颜色来表达明暗时,有一个很普遍的错误,那就是使用不透明度的黑色表达阴影,不透明度的白色来表达光亮。但如果我们借鉴一下现实生活,会发现黑暗总是有一些基调的。
黑暗从来都不是黑色的,黑暗只是被物体明度遮蔽的色调。就如上图中,柠檬的影子是非常深的绿色,而木板的影子是非常的深棕色,它们都不是黑色的。只有在完全没有光线的情况下,才会出现黑色。
3、饱和度测试颜色和谐度
想要让我们作品中的配色更加和谐,可以将色调从颜色中移除,只保留光和影,光影会给人以真实感和深度。当只剩下灰度时,我们可以清晰的观察到明暗之间的差异,这将有助于我们调整色彩之间的明暗程度和透明度,以搭配出更和谐的配色。
我们中的许多人看到的颜色不够饱和或不够鲜艳,这是正常的,因为世界并不完美,颜色也不完美。我们大部分人都来自于一个只使用CMYK和颜色有限制的物理世界。
ui设计如何提升界面亮度(图片来自网络)
UI设计中如何做出美观实用的UI界面?
1、深色主题
深色主题是过去几年中最需要的功能之一,苹果和谷歌都将深色主题作为用户界面设计重要的组成部分。深色主题降低了界面亮度,在深色环境中给用户提供了适度安全感,也最大限度减少了用户的眼疲劳。在设计产品的深色主题时需要了解8个技巧:避免纯黑色、避免在深色主题上使用饱和色、符合无障碍色彩对比标准、文本使用“打开”颜色、不同的背景对颜色的感知也不同要考虑设计的情感方面、深度沟通、允许用户从普通模式切换到深色模式、测试你在浅色和深色外观的设计。
2、 动效设计&微交互
我们知道如果加入动画会让网页内容增大,即使未来是5G网络也会让网页加载时间增加,这对于使用手机访问的用户来说,是非常致命的,2020年依然建议使用微动效即可。一个优秀的交互微动效,在设计上应该遵循以下三个核心原则:1)克制有度,控制时长和出现频率,不增加额外操作,不干扰用户;2)清晰聚焦,重点突出、符合逻辑,给与用户充足的阅读时间;3)自然流畅,保持视觉连续性,缓动过渡,做到不卡、不闪、不跳。
3、渐变
渐变给设计师带来了更大的创作自由,还给设计引入了深度和维度,解决了扁平设计中一切都「太平」了的问题。渐变有几种基础类型,他们都会有一个中心起点,颜色从这里开始,然后逐渐融入其他颜色。如线性、径向、锥形渐变。在设计渐变时一定要注意这几点:1)注意渐变颜色的选取;2)渐变过程中注意平滑过渡;3)注意情绪的传达;4)不要忘记颜色对比;5)选择顺手的渐变工具。
4、UI插画
在UI设计中使用插画不仅能够承载充足的信息量,在一定程度上满足公众的情感诉求,还更容易强调UI界面的故事性和趣味性,加入插画元素的UI界面更容易给公众带来愉悦的情绪体验
ui设计如何提升界面亮度(图片来自网络)
5个技巧让界面更加干净
1、减少线条
页面上面线条太多,会让人觉得页面复杂,线条好了,看起来就会清爽干净。
2、合理留白,拉开信息层级
合理的留白可以增加产品的品质,也可以让主题更加突出,有些页面上面有很多元素,看上去非常拥挤,如果适当留白,看上去更加清爽。
3、运用卡片整合信息
卡片式设计将信息、图像归类整合到一个方块里,清晰直观又避免页面因为信息多而散乱。卡片的排列方式是按列或者行的方式进行对齐展示,视线沿着横向或者纵向浏览能快速找到想要的信息,此外,这种固定大小的卡片方块也有利于栅格化排版。
4、加强行间距,+4原则或黄金比例
行间距大家都知道,但是具体如何设计很多人不知道,一般常用规则是+4,比如文字大小是12PX,那么行间距就是16,依次类推文字是14那么行间距就是18。
5、加大字间距:0.1或者0.2勿过大
字间距同样很重要,特别是做英文排版的时候,同样的内容,字间距和行间距不合适,界面看起来就会相差很多,有的看着很舒服,有的看起来说不出来哪里不对。
ui设计如何提升界面亮度与色彩之间的配合对于每一位设计者来说都是难题。也只有经过不断的尝试,我们才能磨合出最优秀的作品。如果各位还想学习更多有关内容,可以长期关注faceui。