界面设计元素的搭配 (界面设计方法大全)

解构界面设计如何配色!

配色,首先要有主色,在选好主色的基础上才能配色,其中找到配色的快速手段就是在对比色中寻找辅助色。通常大家认为只要是面积最大的颜色就是主色,其实不然,因为人们的阅读心理是有差异的。如果颜色饱和度较低,就容易被相对面积少的高饱和度颜色抢去眼球,所以在定义界面主色的时候要选择饱和度(纯度)高的颜色作为主色,这样设计出来的界面会很稳定。

互补色搭配

在颜色搭配中,互补色的对比是最强烈的。这种色彩搭配能使用户的视觉产生强烈的刺激,可以给人留下鲜明的印象,且这种配色易于传播,适用于夸张、张扬的场景。但这种颜色如果用的太过于频繁,则容易造成视觉疲劳,给人一种不安定的感觉。因此,在使用互补色搭配的时候要控制好使用的面积,减少来回的颜色穿插。

在界面设计中,常用的互补色有3种: 红绿、蓝橙和黄紫。我们可以看到很多App和icon为了吸引用户的注意力就用到了强烈对比的互补色,例如番茄快点、QQ空间和相机360,如图所示。

界面设计布局方法,界面设计颜色搭配

北大青鸟长安街校区

互补色设计

在7-ELEVEN的界面设计中,运用到了红绿互补色进行设计,造成的视觉冲击力极强,如图所示。

红绿互补色

另外,互补色的搭配会让整个设计显得平衡、舒服。图中的App中使用了红色与绿色进行搭配,让背景颜色显得更为平衡和舒服(在整体页面设计中使用红绿配色能很好地区分按钮和提示信息的关系)。

界面设计布局方法,界面设计颜色搭配

北大青鸟长安街校区

平衡感与舒适感极强的设计

图中采用了冷色到暖色的渐变过渡作为背景,用色非常大胆,页面的冲击力极强。

界面设计布局方法,界面设计颜色搭配

北大青鸟长安街校区

冲击力极强的设计

在运用大胆的互补色进行设计时,可以让整个主题风格显得格外鲜明。将两个色相的饱和度都调到最高,面积比例保持在1:1左右,这种设计的气氛最为浓烈,冲击感也最强。见图这是“代购现场”的Logo设计,采用了黄紫互补色进行设计,颜色占比保持在1:1,整个设计很突出,在应用市场中很容易让用户找到,将品牌的传播做到了极致。

界面设计布局方法,界面设计颜色搭配

北大青鸟长安街校区

这些方法希望能帮助大家扩散思维,不仅在需要注重视觉上的统一性,还要加强设计的惊喜感。一个产品是否合格在于他有没有按规章在设计,而产品的传递正是这一个一个亮点才使得产品深入人心。