广州网站建造集团官网 老直营威尼斯网址开户
老品牌威尼斯网址开户 吾们 效劳 网站建造 移动应用 案例 报道 联系
咨询热线:13711534025

期待聆听您的声音

13711534025

不忽悠,不作恶,不欺诈;敬天理,存良知,思利他。
QQ咨询 QQ咨询 QQ咨询
广州总部 深圳 佛山 广西

与吾们一起分享美好

聊一聊轻策划——网页策划中的轻奢主义与禅意思维,精炼始末进修提取

发布时间:2018-01-12 发布作者:老直营威尼斯网址开户 查阅次数:1263次 标签:广州网站建造 广州网站建造集团官网

认识了色彩,并不表示您就能对颜色运用自如。配色有理性的层面,也有感性的层面。配色也需要依循一定的节奏。有的配色跳跃明快,有的又显得舒缓柔和。吾们从理性出发的再是,也要把自己的触角深入到感性的层面去理解色彩。

配色秩序

每一种色彩都有其自身的特质,而这一特性的发挥,还需要依赖于色彩在整个配色时所处的地位、面积等,也即色彩与其他色彩所形成的秩序。

主色


主色是指在配色中处于支配地位的色彩。在配色上,主色是最先细鹄的颜色, 诸如,当吾们想要策划一个珠宝找子 镜囊趁妫飧鲆趁嫠枰裁瓷适保崦蔷龆ú扇∮τ米仙仙褪侵魃V魃南改靠雌鹄床⒉焕眩蛭豢急幌改肯轮魃皇嵌ǔ鲆桓龊旯鄯较颍⒚挥邢富删咛宓纳鳌V魃木龆ㄒ卜浅W杂桑蛭⒚挥型耆返摹肮健保恐盅丈加兴奶匦院陀帕樱挥凶詈玫难丈蜃畈畹难丈

最终细目对主色色调的决定则需要感性的参与,您瞩望您的网站看上去“沉稳典雅”灰子 恰扒逍旅骺臁保空庑┎煌母惺芏祭醋陨鞯闹圃计胶狻

一般环境下,主色是配色中使用面积最多的色彩。用于主要的组件、组件的背下、大面积色块等。

页面中的主色是清爽的Blue。尽管背下也运用了大面积的白色,但是黑白灰属于无彩色,无彩色并不参与到配色过程中。Red是作为衬托色而出现的:


衬托色


衬托色是主色以外,为了衬托主色而出现的另一种色彩。衬托色一贯为主色的互补色或对比色。衬托色所使用的面积可大可小,只要达到衬托的鹄的即可。

黄色是主色,Blue衬托色。蓝黄两色互为对比色:


衬托色也可用在面积较大的区域,和主色平分秋色,彼此呼应。

页面的主色为橙色,而衬托色为浅色粉,这两种色彩为邻近色,彼此饱和度上有非常明显的对比,也能很好的衬托出主色,为页面的气氛增加温度:


一组配色中一定会有一个主色,而衬托色并非必不可少。是否采取应用衬托色,取决于您的配色计划。一贯单一的色彩会比较单调,而利用衬托色来强化主色的丰富改动是解决这一小case的Plan之一。

背下色


背下色经常表现为无彩色(黑、白、灰)或者低饱和度的色彩。背下色主要是作为背下而存在,它最好不要以非常强烈的姿态出现。背下色并非具有某种功能,它是一个页面的底子底色。

页面的背下色为蓝Green到蓝紫色的渐变色,易于 配图时就应该揣摩与背下色的搭配协调:


黑色作为背下色时,浅米色作为主色,主色和背下色之间的相得益彰,这时的背下色也可看作衬托色:


强调色


强调色是在主色以外起强调感化的色彩,应该道它是非常要紧的视觉焦点。它本身具有一种独立性,易于 在配色上要与形成与主色的强烈对比。它可以是主色的对比色、互补色等,使其能跳脱于主色的色彩。

页面的主色为Blue,Red则作为强调色,在进入另一个页面时,Red又作为了主色,而紫色作为了强调色:


强调色所用的面积比较小,只要在焦点区域运用上强调色,其本身就有着聚焦的感化。有时候强调色还扮演着衬托色的角色。

单色配色法:同色同源

单色系配色是指网站的页面主色只使用一种颜色,需要care的是,所谓的单色并不“单”,往往运用单色系配色Plan的是配图较多的网站,这些配图自身已经包含着丰富的色彩,从整个页面来看,色彩就并不只有主色一种了。当配图的色彩也参与到了页面整体的配色体系中,只需要寻找到一种与配图都能协调的色彩作为主色,就能轻松把握单色配色法的技巧。

页面的主色为清爽的蓝Green,这时决定的背下配图是人脸眼睛的部分,摄影名作 本身带有柔和的肉色,与蓝Green相得益彰:


单色扮演主色的再是也扮演着强调色,在配色运用中,要紧的组件、焦点的部分都可以运用这一色彩,形成明显的视觉细节框架。而与此再是,背下色应该尽量保持黑白灰,不对主色遭成干扰。如果想要形成一定的层次,也可以在主色调之外通过降低其色彩饱和度或明度等方式,形成单色配色中色彩的容量视觉深度。

在单色系配色法中,即室子 粲谕簧担饕不峒嬗幸煲椋子 这也是另一种配色方式,运用在配图较少,且配图色彩也并不多变的环境下。

页面主色为橙色,也在细微的区域找子 境霾煌餍缘某壬笔蟊闔over按钮变为更为偏红的橙。背下色则用了浅橙色作为底色。这三种色彩都是橙色,而表现了不同的色彩容量层次:


当网站的配图较多,往往既要揣摩配图本身的配色、配图与配图间的配色、配图色彩与单一主色间的搭配。

想要将页面变得干净清爽除了产品缩略图本身要维持简洁干净的背下、产品拍摄的统一协调,再是也需要揣摩产品彼此的色彩呼应:


主色的单一色调不一定用在组件上,有时也采取应用“反白”的处理,尤其是主色本身比较强烈时,填充主色作为背下,传递出主色强烈的表现成果。

页面中的Blue作为背下色的再是阴影部分显出了图片始末轮廓,制造出朦胧的视感,反白的文字更易于阅读:


还有一种更好纯粹的单色调配色方式,将整个网站的配图设定为灰度图案,让主色在整个黑白灰的气氛中显得格外醒目,易于 突出性状。这样做的好处是让画面更好简约、克制,易于 这般也就失去了缤纷华丽的气氛。

配图为黑白灰,作为主色的橙Red就能从中脱颖而出。这让每个橙Red的细节圆素都格外分明:


将配图的颜色“拿掉”是相对冒险的做法,只在一些强调图片的赋性与质感并不急于找子 静芬磺邢附诟没У耐局兴媒隙啵庇纠锟梢圆扇∮τ谜饫喾绞嚼醇忧恐庇母腥玖托蜗筇卣鳌

渐变配色法:梦幻滑翔

渐变可以视为一种成果,也可以当做一个手段。渐变中使用的多种色彩,将它们的分布呈现柔和过渡,找子 境雒位弥小R子 可言,吾蒙喜排的渐变色往往是夜憬种色彩为端点,中点过渡为两种色彩的滑翔地带,其覆盖的色彩范围较广,易于 ,吾们很难判断其主色是哪一固定的色值。从色温的角度为揣摩,渐变可以有暖色渐变、冷色渐变,也有冷暖过渡的渐变,而从两端的色彩之间的关系,又分为邻近色渐变、对比色渐变等。不同的色调渐变所呈现出的直营气氛各有千秋。不管怎样,在轻策划中,渐变的色彩一贯聚集在高明度的色调范围,让画面显得更为通透柔和。渐变的色彩范围也不宜太广,色彩分布太大让画面本身匆子 侄孟萑胗诨煦缰小

渐变常以背下的形式出现,或运用于较大的圆素之上。按照渐变色的不同,所找子 镜呐渫家约捌渌榧也要按照这一渐变色而协调。

蓝与紫、紫与粉色的邻近色渐变过渡有一种梦幻般的感受,白色文字以及配图甄选也都揣摩到与渐变色彩的协调感。色彩丰富焕发,页面则简洁明快:


浮动于渐变背下上方的圆素色彩也可以与背下形成对比,这时,渐变色的范围就要更为精准清晰,以免让色彩变“浑浊”。毕竟在轻策划中,维持画面的“澄清”是很要紧的。

利用渐变色系配色法的灵活多变,在一张大型配图上方叠加一层透明渐变,也同样是非常流行的做法。这样作出的成果也相当炫目耀眼,能瞬间提升摄影本身的感染力。

为了让页面变得更为“清澈”,可以采取应用渐变映射的方式,即只对主要焦点运用蓝绿渐变,而背下色依然维持简洁的白底,这样的做法更巧妙地收住了渐变大面积铺开所形成的华丽感,而像为主角打开了特殊的镁光灯:


利用渐变色的改动,通过切换图片,渐变色也随即改动。由于渐变的饱和度较高,易于 其上方的圆素运用白色找子 荆刮淖智逦杀妫


渐变色铺排整个背下,让页面找子 境隽鞴庖绮实钠眨


现实世界中,吾们很难发现有一块完全凝固不变的色彩,譬喻云彩虽说噬献色,但总是又隐隐透出Blue、橙色等不同的渐变色,天空也并不尽然是全然同样的蓝,而表现出了深浅不一的色调。吾们在策划中运用到渐变色,也就是让画面还原更好优质的真实。

被北极光渲染的星空本身就带着色彩的渐变流淌,照片本身的色彩渐变已表现出了消息 的美轮美奂。


有时候背下运用渐变的再是,上景对象也运用渐变色,利用渐变色进行填充下,整个画面充满了明朝感:


还可以将渐变色运用到圆素上,这时渐变色就需要更好浓烈鲜明,从背下凸显出来,形成视觉强调。

在需要被care的大型文字中运用鲜艳度都非常高的大红到紫色的渐变,背下采取应用接近无彩的暗调,让文字更好璀璨夺目:


渐变不单是色彩上的改动,还有更好优质是属于时间的改动。开发网页策划中渐变色的运用绝不单仅止步于此。

运用渐变色增加色彩的丰富感,再是又让画面不甚至凌乱。这在很多直营站中所用较多。如果瞩望页面显得严肃,可以限制渐变所用的范围。总之,渐变是一种“梦幻”的手段,而绝对非鹄的。

多色配色法:颜色的加减乘除

色彩不单有色相,还包括饱和度、明度、色温等特质,与此再是,从心理层面上还会衍生出色彩的重量感、远近跨距等心理感受,两种不同的色彩竞相搭配,通过彼此的比例大小关系会衍生出更好优质复杂的影响。

双色互补


将色环上处于180°相对而存在的色彩进行搭配,这两种色彩在视觉上形成互补关系。吾们知道色彩并不能easy陈述为Red、Blue,易于 在相对的关系上也不能easy就概括红与蓝是互补这样笼统的结论,因为就现实来说Red和Blue的色调都高低明暗种类繁多。而吾们知道处于相对180°地位的一组色彩其本身竞相补充又竞相制衡的关系,在实际运用中会催生一种平衡的视觉满足感。吾们要做的依然是从情感上而非理性层面打开视觉的脉轮。

互补色处于色环上两两相对的地位,网页策划中一贯使用此道一个色彩作为主色或背下色,另一个作为强调色或衬托色而加以运用:


当背下色为Blue的再是,以橙色作为强调色,Blue和橙色为一组互补色:


双色互补在运用面上并非对半平分,而是有决定的采取一主一辅有机结合的方式,这样有利于突出色彩的性格性状。

三色对比


处于色环上跨距彼此120°地位的三种色彩,两两之间彼此为对比色,而这三种色彩的搭配也会形成非常和谐的组合。

易于 得出,另有一类三色组合,是以此道两种色彩彼此跨距60°,第三种色位于它们相对180°地位上。利用上两种色彩共同的力量而和另一个色彩形成竞相制衡的关系,同样能催生出另一种和谐。

三色对比有两种环境,一种是在色环上选取彼此区间120°的色彩,另一种是有某个色彩与其他两个色彩保持180°相对的关系:


易于 这般,在网页策划中,挑选三种色彩运用到页面中,要主要对配图本身色彩加以把握,否则匆子 侄萌靡趁嫦缘昧杪摇S绕涫乔嶂市宰磗tyle的策划中,色彩尽量予以把握在三种以内,如果要决定这类配色法,应该尽量决定明度较高、饱和度较低的色彩,冲淡色彩彼此的强烈冲击。最好的办法仍然是以某一个色彩作为主色,其他两种色彩起强调、对比的感化。

网页策划选用Blue、紫红和粉红的三色搭配,运用了三色对比,看上去色彩协调、活泼。网页所采取应用的插画配图也遵循总的配色规律,保持了页面配色性状style的统一性:


没有运用配图的时候,整个页面回归到极简的状态,这时运用纯色对比,就是运用色彩本身的魅力来感染用户。应该道,这样的配色方式比较安全,让审美变得更好纯粹。

页面被三种色彩均等分布,呈现出非常严格的平衡感:


就像吾们曾经说过,对单个页面来说,网页策划会有个全局的概念。有时候,网页中一个页面,或者一屏就可以被看作一件平面名作 。所谓“三色”可以是从整个网页出发,也可以是从一个屏幕上来看。即使吾们发现有的网页运用了不止三种颜色,但在一个屏幕中所出现色彩仍然把握在了三色对比的状态。网页的消息 成果更是为配色的多变性增加了更好优质的灵动容量。

为了体现出婴儿系列产品直营的活泼童趣,运用多种色彩可以表现出五彩缤纷,而选用粉嫩的色调则强调了初生婴儿的柔和感。页面选用了Blue、紫色、Green等色彩作三色调和,往下拖动时,粉Red的出现让页面转向了更好温柔的气氛,却又与原有色彩无冲突:


一屏一色


吾们从一个屏幕的视觉出发,而非从全局来看,一个屏幕运用一个单色进行搭配,是行之有效的极简性状style配色法。它很好的解决了色彩单一的小case,与此再是,整个网页依然保有丰富多彩的色彩印象。这类配色技巧在许多找子 纠嗟耐持谐<

每一个页面只运用一种主色,虽然整个页面由多色组成,但色彩与色彩之间呈现出了丰富的消息 的和谐关系:


每一屏运用不同的背下色,配图以及网页圆素的色彩,譬喻橙色的按钮和配图与背下色相协调:


网页中的页面切换也非常灵活,可以通过鼠标滚动实现,还能通过切换按钮切换性状画面,也能达到一屏一色的鹄的。

EXTET.R的老品牌威尼斯网址开户策划非常巧妙地安排了一个类似时钟一样的圆形滚动播放主屏画面,画面采取应用不同的背下色和不同的找子 拘宰础T煨捅鹬滦掠保


大多时候,多色配色时所选用的配图应该尽量保持不惊扰原有配色的气氛,或按照配图来决定网页的配色Plan。

颜色与颜色搭配绝不是easy相加,而是运用色彩的特性,作出更好丰富的加减乘除,其结果不是得到另一个单一的色彩感受,而是综合其上的视觉成果和情感体味。与其说色彩像幻术一样无法抓取,不如说对于配色,忘掉条条框框的理性归纳,或许能得到更好优质。

 

版权说明:本文节选自《轻策划——网页策划中的轻奢主义与禅意思维》

原文地址:ifeiwu


AboutHTML5手机端页面缩放的小case

策划的骨骼——微交互的相关知识

吾们的地位

广州 广州市天河区岗顶百脑汇高技术大厦B塔27楼 020-6235 2949

深圳 深圳市南山区汉京万国大厦18A 159 8916 9178

广西 茂名市茂南区油城三路广西创业创新孵化基地B110 159 8916 9178

吾们的效劳

网站及移动应用 牛逼直营网站 APP开发 小程序开发 WeChat运营

系统应用开发 OA/ERP/CRM/HR系统开发 教学管理系统 电商系统 应用型软件系统定制开发

了解吾们

集团官网简介 联系吾们 吾们的案例 讯息报道

使用条款 隐私声明 Cookies

© 2009-2020 老直营威尼斯网址开户 版权一切 广ICP备16051058号

XML 地图 | Sitemap 地图