7.05日音讯,网页设计配色的六条建议
日期:2015-07-05发布:首创网络浏览:526次
7.05日音讯,网页设计配色的六条建议,网页设计中最基本的原则之一是,不管你花多长时间创造一个华丽的设计,其最终的角色都是这场秀中真正的明星内容的衬托。网页设计中不应该让配色比内容展示更加热闹。你的设计应该是在后台的,帮助将网站的内容推向前台。
本文关键字:7.05日,音讯,网页设计,配色,的,六条,建议,
7.05日音讯,网页设计配色的六条建议,网页设计中最基本的原则之一是,不管你花多长时间创造一个华丽的设计,其最终的角色都是这场秀中真正的明星——内容的衬托。网页设计中不应该让配色比内容展示更加“热闹”。你的设计应该是在后台的,帮助将网站的内容推向前台。
用Photoshop或者Sketch等软件设计网站的时候,创建设计的过程往往是相互独立的。有些设计单个看起来很不错,也能被你的客户所接受,但是当它真正被设计成网页的时候,不适当的配色往往会分散访客的注意力。事实上,网页设计过程与内容是紧密联系在一起的,但有许多高质量的网站设计却几乎空无内容。
这是一个好主意——将你希望出现在这个位置的内容样例在设计软件里或直接在代码里先摆放出来,然后围绕它做设计。尤其是在与特定风格的照片或图像有关的时候,这样你可以确保你的设计与它们搭配和谐。想象一下,你的网站内容是一个独特的个体,你必须为它设计一个完美的配件。
你可以为你的主背景和文本从无数的色彩组合中进行挑选。然而,我的建议是先掌握最简单的,白色或浅灰色背景搭配深灰色的文本。
如果你观察流行的网站所选择的模板或主题,你会发现它们中的大多数都是使用深灰色的文字搭配白色或浅灰背景,这是有充分的理由的。这种组合你基本保证了为访客提供可读性,并允许基于内容的文本和图像进入前景。
利用一些示例内容制定一个基本的灰度布局,例如:
一般来说,你应该避免使用纯黑的文本,深灰色相对来说更易阅读。一个相对舒适的范围是#333333至#666666。
基于上述,在任何文本主体下,最保险的背景色是全白#FFFFFF。对于其他的背景元素,背景色的范围可以从#FFFFFF至#CCCCCC.
再次声明,这些并不是你必须使用的颜色准则,仅仅只是你可以开始安全设计的一些指南。
配色方案出错的最常见的地方就是颜色使用过多。邯郸网络公司你使用的颜色越多,你想要将它们都保持在控制中就越困难。所以一开始,在灰度基础之上只添加一种额外的颜色来强调诸如链接、某些标题、菜单、按钮等等元素是很有用的。你的强调色可以是蓝色、绿色、红色或其它任何你喜欢的颜色。
开始在你的基础图上拉一个强调色的矩形框,这样你可以衡量颜色是否与页面上所有的元素匹配。然后打开颜色选择器,选择在颜色面板右上角四分之一中心位置的颜色。
上下移动滑块,选择一个你认为适合你设计的颜色。
至此,你已经使用了三种基本颜色:你的背景色,文本色,以及一种强调色。将来你可以,也应该使用多个强调色,但是现在最好只是想一想。如今你已经使用三种颜色了,请熟悉这三种颜色,当你更自信的时候,你可以添加更多的颜色。
你学会了怎样选择“色相”。简而言之,色相就是一种基本色。当你上下移动滑块的时候你就会看到你的颜色选择器中的“H”值在不断变化。
“H”代表色相,一旦你选择强调色,文本框中数值就是色相的值。
如果你对选择什么强调色有任何疑问,请使用蓝色。蓝色通常是最灵活的颜色,适合多数的网站类型。紫色和黄色之类的颜色可以是很活泼的,但是如果使用不当的话,立马会变得很花哨。
另一方面,你可以在以蓝色为强调色的基础上随意发挥,但你也不能走的太远。如果你不知道从哪里开始学习或者在项目中使用什么颜色的时候,就用蓝色就对了。如果你要选择特别的蓝色,你可以选择深蓝色(H值235)至浅绿色(H值190)的范围以保证自己在安全的领地。
在我的布局示例中,我选择值为205的色相。当你已经选定了强调色,将它添加到任何你认为必需的位置。假如你在按钮或任何其他有文字的区域使用了强调色,也要相应地改变文本的颜色。在这个例子中,我将强调色区域之上的文字改成了白色。
一旦你选定了强调色,将色相(H)滑条位置保持不变。你现在需要为你的设计添加额外的颜色,不过为了让事情变得更简单,这些颜色都是你已经选择的强调色的变色。
颜色选择器上右上角的位置是高纯度的颜色。右上角的颜色像一级方程式赛车,它们的执行力惊人,并且非常吸引人,但是我们一般需要足够的经验才能很好地驾驭它们。如果没有经验的话,它们可能会造成事故,所以最好去尝试使用更缓和的颜色。
这就是为什么我在本教程的第三节让你选择右上角四分之一中心位置的颜色,以确保以一种相对柔和的颜色开始。
当你在颜色选择器上拖动选色点的时候,http://www.hdscwl.com你会看到“S”和“B”的值在改变,这分别代表“饱和度”和“亮度”。同时你会也看到色相的值保持不变。所以你是通过改变基础色的饱和度和亮度来创建变色的。
饱和度和色彩
饱和度生动地表达了你的颜色。举个例子来说,想象一下“我的白衬衫被溢出的红酒渗透了”。在颜色选择器上,饱和度取决于有多少的白色与你的基本色进行混合。白色越少,饱和度越高。
当你向右拖动选色点的时候,你减少了白色的量,提高了饱和度,因此“S”值上升了。当你向左拖动选色点的时候,你增加了白色的量,降低了饱和度,因此“S”值下降了。
这种将基本色与白色混合的方式也叫做创建一种“色彩”。这个词来自于颜料混合,就是将白色的颜料与彩色的颜料进行混合。
- 欢迎大家阅读浏览,部分内容来源于网络,如有侵权,请联系我们删除!
服务项目
热门信息
- 邯郸网络公司:模板建站的好处有哪些?
- 3632024-04-25
- 4.20日音讯,邯郸网络公司:企业官网有必要做吗?
- 2122024-04-20
- 4.20日音讯,邯郸网络公司:为什么模板建站如此便宜?
- 2862024-04-20
- 4.9日讯,企业网站建设如何发挥网络营销功能?
- 4082024-04-09
- 4.9日音讯,企业网站维护的日常工作
- 2902024-04-09
- 4.5日讯,建设一个外贸网站多少钱?
- 4852024-04-05
- 邯郸网络公司:网站建设开发有哪些细节需要注意?
- 5392024-03-07
- 邯郸网络公司:外贸网站制作的8个步骤
- 3762024-03-05
- 企业网站如何制作才能取得更好的效果
- 5652024-02-29
- 简单3步,轻松做企业官网
- 6812024-02-18