新闻中心

厉害了,网页设计色彩进阶技巧

发布时间:2017-03-03  来源:本站
皇姑区网站建设,铁西区网站制作,和平区网站制作公司,大东网络公司,沈河区网站建设,于洪网站建设,东陵网站建设,浑南网站建设
颜色几乎是一切规划体系中不行疏忽的组成有些,而在页面规划中,颜色自身所表现的作用并不单一,除了最根本的着色构成颜颜色配的作用以外,颜色能够经过比照发明视觉焦点,构建信息层次,影响用户情绪,甚至引导访客的行为。

所以,在玩转配色自身以外,进阶的颜色运用窍门还有许多。

1、经过份额改变发明视觉焦点

厉害了,页面规划颜色进阶窍门

操控颜色的份额来发明视觉焦点是常见的颜色运用办法之一,操控颜色的份额实践首要是经过操控颜色地点元素的巨细来达到作用的。比方Viporte 这个网站,当你上下翻滚主页的时分,每个有些都用超大的字体进行了装修,而每个字母都运用了美丽的颜色进行填充。不相同的文字运用了不相同的颜色,而且调配以相应的图像。每个页面的焦点肯定是最基地的图像和字母,而焦点的构成和颜色的份额与运用脱不开联系。操控颜色的占比,无论是多仍是少,只要有明确的意图,总能构成招引留意力的焦点。无论是咱们常说的“万花丛中一点绿”,仍是极简主义规划中大面积的留白,都是颜色份额操控下所构成视觉焦点的典型事例。

2、经过比照度招引用户留意

厉害了,页面规划颜色进阶窍门

在规划过程中,运用颜色来操控比照度也是规划师频频运用的窍门之一。当规划的全体颜色趋于柔和和安静的时分,俄然写入强比照的颜色,能够刹那间捉住用户的留意力。

而Thinx 这个网站在规划的时分就将比照度操控得极好。页面主体的配色选用的是经典的是非调配,白色的布景调配黑色的文本。而全体的规划感的来源则首要源于排版和五颜六色的图像。网站所选用的图像显着经过精心的挑选和规划,赤色的底色、黑色的内衣和模特显露的细腻肌肤色在图像剧烈的碰撞,美丽而充满诱惑,图像斗胆的颜颜色配和素色的布景与文字构成了显着而激烈的比照,无论是经典的红黑调配,仍是永久的是非配色,都满足美丽和招引人。

Thinx 这个事例我十分喜爱,而且常常会用到,由于它证明了规划师并不一定非得靠高饱和度的霓虹色来发明高比照度的配色。即使是两种平衡的颜色,也能让全部规划脱颖而出。

3、运用颜色发明UX形式

厉害了,页面规划颜色进阶窍门

高度一致的配色计划能够发明出视觉形式,而延伸到用户体会上,则会让全部UX出现出形式化的特征。形式化的规划让用户更简单适应,用户更简单探索出规则,也更简单发生相匹配的预期,换句话说,UX形式能够培育用户习气,同用户发生深入的相关。就像用户习气了某些特定的图标以后,在别的当地看到这些图标就知道它们的意义,理解该怎么交互了。比方,小房子图标会让用户想到主页、主页,而垃圾桶则会相关上删去的概念。颜色相对而言愈加片面,由于每个网站和APP都会选用自个的配色计划,不相同的颜色代表不相同的意义。

那咱们就拿Underbelly 这个商品展现页作为示例吧。在Underbelly 这个网站中,一切可点击的组件都是蓝色的,你在试用网站几秒钟以后,能够迅速把握这个UX形式,而且理解怎么操作。这即是Underbelly 经过颜色构建UX形式的办法。UX形式的优势在于,它让用户更快地熟识你的商品。越简单辨认,用户的主意越少,商品的的运用也就愈加顺畅了。

4、运用颜色来创立层次

厉害了,页面规划颜色进阶窍门

当咱们阅读页面和各种界面的时分,信息的层次感很大程度是凭借视觉来营建的。运用颜色来发明视觉层次感就很顺从其美了。

在Skore 的商品页面中,每一个有些都有运用到绿色的元素。重复的绿色元素不只创立出可供用户迅速辨认的形式,它也让用户能够迅速理解哪些因素愈加主要。一般,咱们解说视觉层次的时分,会用不相同巨细、粗细的字体来论述信息层次和结构,可是不相同强度的颜色,相同能够完成层次的区分。

在Skore 这个事例傍边,绿色和灰色的文本以及白色的布景之间有着杰出的比照度,全部配色计划不依赖别的的着重色,以绿色为主。这种相对安稳的配色结构有助于让每个有些都有层次地出现出来。绿色不只招引用户重视要害的元素,而且为不相同的有些的内部提供层次结构。

5、充分利用颜色的相似性

厉害了,页面规划颜色进阶窍门

除开别的的意图,规划师运用颜色或许调整颜色的意图,根本都是为了发明规划的一致性。InVision 的年度总结页面运用了从粉色到紫色的渐变,在页面的下方,粉色和紫色相同应用到了按钮中,此外,在着陆页傍边,将比照度显着的白色置于粉色+紫色的布景之上,保证信息的清晰出现。如果颜色每次都不相同,那么全部规划看起来就不是那么令人难忘了。

别的一个事例来自于 Comotion。Comotion 的工作室主页选用了几种不相同的颜色,可是这些颜色的颜色是十分挨近的,然后创立出了一种和而不相同的配色计划。在这个规划事例傍边,几个不相同的颜色互为调配,并不会太过于杰出,可是又能够适可而止地进行着重,终究让颜色满足美观,有坚持了用户的参与度。

结语

厉害了,页面规划颜色进阶窍门

颜色能够协助规划师达到各式各样的意图,灵敏的运用能够让完成这一切。当你将上述的颜色运用窍门都合理的运用起来,能够灵敏的发明视觉焦点,结构层次,打造真实风趣而有用的规划。

客服
客服