Home wordpress插件教程

wordpress插件教程

WordPress网页栅格化系统应用之设计原理

1.栅格系统的形成   1692年,新登基的法国国王路易十四感到法国的印刷水平差强人意,因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的,重视功能性的新字体。委员会由数学家尼古拉斯加宗(Nicolas Jaugeon)担任领导,他们以罗马体为基础,采用方格为设计依据,每个字体方格分为64个基本方各单位,每个方各单位再分成36个小格,这样,一个印 刷版面就有 2304个小格组成,在这个严谨的几何网格网络中设计字体的形状,版面的编排,试验传达功能的效能,这是是世界上最早对字体和版面进行科学实验的活动,也 是栅格系统最早的雏形。 栅格系统英文为“grid systems”,也有人翻译为“网格系统”,其实是一回事。 网页栅格系统的定义为:以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。 网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说,栅格系统的使用,不仅可以让网页的信息呈现更加美观易读,更具可用性。而且,对于前端开发来说,网页将更加的灵活与规范。   2.栅格系统的设计原理及应用   那么如何设计一个栅格系统?接下来我们将通过实例,详细的介绍一下网页栅格系统的原理与应用: 在网页设计中,我们把宽度为“W”的页面分割成n个网格单元“a”,每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下: W =(a×n)+(n-1)i 由于a+i=A, 可得:(A×n) – i = W 这个公式表述了网页的布局与网页“背后”的栅格系统之间的某种关系。   3.万能的栅格化系统   对于是否采用栅格化设计,采用下面几个案例说明一下:   .企业站之类-以介绍几种单一产品为主   功能型网站   不拘泥形式的设计形式   针对这三个具有代表性的案例,栅格化设计是没有必要的。理由很简单,栅格的优点也是缺点,规范意味着统一也意味着限制,在以上的案例中,无需用栅格来限制设计师的灵感,毕竟这个社会,还是需要设计感的。 但绝大多数情况下,推荐栅格化设计。尤其是图文混排、版块很多的网站,栅格化设计会让内容杂乱无章的页面呈现清爽感。 关于栅格化布局,方案非常多,来看下面几个案例,我们都称之为栅格化设计。   广义的栅格化系统-无间距的单元格   广义的栅格化系统-有间距的单元格   广义的栅格化系统-有间距的单元格   对于不需要考虑页面响应(换句话说,和框架无关)的网页设计,原则可以简化成一句话:“由设计师自由决定”。        

WordPress网页设计文字排版——中文字排版技巧

在网页设计中,文字排版对于网站和用户之间建立良好的沟通以及帮助用户实现目标起着重要的作用。当我们谈论网页是否能和用户建立有效的沟通的时候,通常是指文字排版在这里起到的作用:   “网页中95%以上的信息是以文字形式呈现的。” 良好的排版使用户更易于阅读,而混乱的排版则使用户失去继续浏览的意愿。正如“Oliver ReichensReichenstein在他的文章“Web Design is 95% Typography ”中写道:“排版的目的是优化可读性,访问率,可用性,保持和图形的平衡关系”   换言之,优化排版也在帮助您优化界面。本文中,我们提供一组规则,将帮助您提高文本内容的可读性和易读性。   1.不要使用过多的字体   网站排版中建议最多不要超过3种字体类型,不然会使网站看起来松散和不专业,不仅太多的字体类型会造成这种问题,太多的字体尺寸也会破坏网页布局。     通常情况下,将字体家族的数量限制在最小数量(2个是很多,1个通常就够了),整个网站坚持使用相同的原则。如果使用多个字体,请确保俩个字体是否和谐。以下面的字体组合为例,Georgia和Verdana的搭配相得益彰,相对比较和谐。相比于右边Baskerville和Impact则会有明显的冲突感,非衬线Impact明显的超过了Baskerville的视觉冲击力。     而在中英文排版中,建议大家中文使用标准中文字体,而英文、数字和字符使用标准的英文字体。以下面的图为例,是否可以对比处那个美观一些。     2.尽量使用标准字体   在Google Web Font或者Typekit,和国内的“有字库”的字体嵌入式服务有很多有趣的字体,对于国内设计师来说,痛苦的是中文字体会很大,一个字体动则几兆,十几兆的,这样用户在会增加用户浏览网站的载入时间;反之英文字体26个字母大小写,加数字标点符号一共几百k的字体是很容易在网页中使用的。   尽可能选择标准字体(近几年网页中通常使用思源黑体,PingFang,英文可以使用Arial,Calibri或者其他常见的易于屏幕阅读的黑体字,如没有特殊概念指导尽可能避免使用衬线字体,如宋体) 不是每位用户都可以在终端上看到同一个字体,意味着你选择的适合的字体,用户有可能看不到。 用户更熟悉标准字体,因此他们可以更快的阅读 特殊的、并且少量的字体可以制作成.svg格式的素材嵌入Web使用   良好的排版会使用户更加关注内容本身,而不是字体的类型。 3.限制一行文字的长度   保证每一行文字的字符数量是文本可读的关键。不是设计师来定义文本的宽度,而是根据用户的可读性来定义。   太宽-会使得单行文字太长,读者的眼睛会难于专注文字。因为长时间阅读容易串行,大段的文本中很难找到正确的行。 太短-会使得用户的眼睛经常回到下一行文本,会打破读者的阅读节奏,长时间阅读造成视觉疲劳。太短也会倾向于向读者发出一种信号,使得读者没有读完当前这行就去跳到下一行阅读,可能会忽略潜在的重要词句。     以Google和百度为例,我们不难看出这点     对于移动设备,应该每行30-40个字符(半角),具体显示多少个字数,与不同分辨率的屏幕、文本宽度和字体大小都会有关系,设计的原则是:保证用户可以流畅的阅读文本,文字不宜太小或太大。以iOS(手机)为例,正文文本最小字号不能小于24px,太小了用户阅读会难以阅读。以百度为例,可作为参考。     4.选择用有多个字重并显示良好的字体   用户将通过不同屏幕分辨率的终端设备访问你的网站,大多数用户界面需要各种大小尺寸的文本(标题、副标题、文本、标注等等)。选择一款能够在不同屏幕分辨率的设备上运行良好的字体以保证它的不同尺寸的字体都具有极高可读性(Readability)和可用性(Usability)也是非常重要的。     近俩年备受大家欢迎的思源黑体和PingFang字体都是不错的选择,当然,个人认为汉仪旗黑无论从家族字体的数量、字体质量、屏幕显示、纸媒印刷上来说都不逊色于前面俩款字体。参与过这款字体设计的设计师曾说过,思源黑体还是相对比较粗糙的一款字体。 同样,为了保证在屏幕上清晰可辨,尽量避免使用衬线体,尽管他们很漂亮。     5.使用识别度高的字体   在选择英文体的时候,有些字体的个别字母极易混淆,特别是“i”和“L”(如下图所示);以及文字之间的间距。许多中文字体在使用较小字体的时候笔画会粘到一起(上图),不容易辨别;所以在选择字体类型的时候,请检查你选择使用的字体,确保不会为用户和产品造成不必要的损失。     6.避免在界面中大段的使用大写字母   不要所有文本使用大写字母,强制用户阅读大写字母,首字母大写,具有特殊含义的缩写等情况除外,与小写字母相比,大量的使用大写字母会严重降低用户的阅读效率和愉悦感。     7.将行间距控制在字体的1.5-2倍之间   在文字文字排版中,我们又一个特殊的术语,用于表示行与行之间的距离:行间距(或行高)。为了保证文本的可读性和易读性,使文本形成线性的阅读感受,将行间距控制在字体大小的1.5-2倍之间(中文字体)。英文字体推荐使用默认行间距,或根据默认行间距微调。     8.适当的颜色对比度   通常情况下,文本和背景尽量避免使用相同或相似的颜色。文本越明显,用户能够扫描和阅读的速度越快。当然,学会通过文本颜色、大小和背景的颜色关系来控制视觉层级也是必要的。 与背景相比,小文本和背景的对比度至少为5:1 大文本(14px/18px以上)应该保持与背景3:1以上的对比度     灰色通常作为辅助色使用,根据之前的项目经验,给大家分享一套我自己一直在使用的灰色,灰的有层次,清晰的区分信息层级是必要的     9.避免将文字着色为红色或绿色   色盲和色弱是我必须要照顾到的一部分用户,特别是在男性中(8%的男性是色盲)建议使用处颜色以外的其他方式来区分重要的信息(如下划线,加粗等)。避免使用红色和绿色单独传达信息。因为红绿色盲是最常见的色盲形式。(现在想想,那些因为红绿色盲而考不了驾照的童鞋是不是要分分钟恨死制定红绿灯规则的人,当然这只是个笑话,使用红绿灯是因为光学在物理传播方面的原因,这里不解释)     虽然在日常生活中我们总是用这种方式告知用户绿色是表示正确的操作,红色表示错误的操作,反思一下我们是否有去考虑色盲用户的操作和体验。或许我们是不是可以考虑换一个方式去表达正确或错误?   10.避免文字闪烁   闪烁的文字或内容可能会让某些用户感到不适,对于一般用户而言,这可能分散他们的注意力或者使他们感到烦躁。     虽然在网页设计中依然有很多需要我们注意的地方,最后,分享给大家一个想法就是:网页设计中排版很重要。做出正确的排版可以让你的网站感觉清爽,糟糕的网页排版会令用户分心,倾向于关注自己的感受而非内容。排版的关键在于使信息层级清晰、用户易于阅读、并且保证文字是可读的。文字的排版不应该增加用户的认知符合,以求达到尊重内容、尊重用户的目的。              

WordPress网页设计文字排版——CRAP设计原则应用

CRAP是四项基本设计原理,包括对比(Contrast)、重复(Repetition)、对齐(Alignment)、亲密性(Proximity), 已经被设计师广泛应用。这四个基本原则在网页设计中对文字的排版也非常适用。   1.对比 我们将对比分为三类,主要是标题与正文的字体与字号对比、文字颜色对比,以及文字颜色与背景颜色的对比。   >  标题与正文对比   在AnyForWeb网站案例页面中,标题使用18号的微软雅黑,正文使用12号的宋体,两种字体字号的对比让文字内容富有层次,很容易吸引读者眼球。     >  文字颜色对比   在伽然官网中,一部分文字采用了与主要文字不同的另一种颜色,这种对比是增加视觉效果的有效途径之一,突出展示了段落的重点。     >  文字颜色与背景颜色对比   这是非常常用的一种排版设计方式,正文文本与背景合适的对比可以提高文字的清晰度,产生强烈的视觉效果。 比如在埃森哲官网中,白色背景、红色标题、黑色正文的对比,以及红色背景与白色文字对比的应用,将文字内容清晰衬托出来,既有丰满的层次感,同时有具有很强的视觉冲击力。     设计师在使用这一原则时需要注意,必须确保文字是容易看清的,如果文字过小或过于纤细、色彩对比度不够,会适得其反,举个例子:     设计师如果对色彩的对比度还不够熟悉时,可以通过颜色对比检测工具(如Check My Colours、Colour Contrast Check)检测色差和亮度差,确保网页设计的易读性。   2.重复 设计中的元素可以在整个网页设计中重复出现,对文字来说,可能字体、字号、样式的重复,也可能是同一种类型的图案装饰、文字与图片整体布局方式等。重复给用户一种有组织、一致性的体验,可以创造连贯性,显得更专业。 比如HeyJuice网站在产品准则部分采用了统一的“图片+标题+正文”形式。内容不同,而布局方式统一,图片风格一致。用户一眼看过去,就能知道这是属于同一个版块的内容,这样的重复很容易有一种连贯、平衡美感。     比如土巴兔装修网的流程,标题文字在图片同样的位置、采用同样形式,既与图片背景颜色形成对比,又是文字样式的重复。     重复原则在网页设计上应用非常广泛,单一的重复可能会显得单调,设计师却可以根据不同网站的需求灵活使用,比如有变化的重复能增加创新,给网页设计增加活力。   3.对齐 在网页设计中,元素在页面上不能随意摆放,每一项都应与页面内容存在某种联系。对齐可对齐是网页设计必不可少的部分,它可以帮助设计师做出吸引人的设计,是优秀网页设计的潜在要求。 对齐的案例就非常多了,我们随意列举两个。 曼秀雷敦网站的左对齐:     Darry Ring网站的居中对齐:     左对齐和右对齐是文本看起来更清晰、效果分明;居中对齐显得更庄重、正式、稳重。   4.亲密性   位置的接近意味着存在关联,亲密性是指将相关项组织在一起让它们从整体看看起来和谐统一。 亲密性可以从两点入手:适当留白、以视觉重点突出层次感。 比如以下案例中图文搭配,这是多个元素在一起的组合排版。     人眼首先被Banner图和里面文字吸引,然后再向下移动到文字描述及链接文字,这些元素的亲密性与对比形成一种平衡。  

WordPress网页设计文字排版——最佳易读性规范

说到排版,这是个大学问。网站上每一个元素都能影响浏览,排版设计的好坏绝对能考验一个设计师的基本功底,文字的排版需要考虑文字辨识度和页面易读性,本文就从最佳易读性规范和CRAP设计四原则的角度与大家分享怎样在网页中做出精彩的文字排版。 先想想,你觉得好的文字排版是什么样的? 在我们看来,好排版一定有着比较棒的阅读性,文字内容在视觉上是平衡和连贯的,并且有整体的空间感。 布局、内容摆放和栏目设计都会影响文字的阅读性。从易读性来看,需要设计师考虑字体、字号、行距、间距、背景色与文字颜色对比等,下文则从最佳易读性规范展开:   1.行宽 我们可以想象一下:如果一行文字过长,视线移动距离长,很难让人注意到段落起点和终点,阅读比较困难;如果一行文字过短,眼睛要不停来回扫视,破坏阅读节奏。 因此我们可以让内容区的每一行承载合适的字数,来提高易读性。 传统图书排版每行最佳字符数是55—75,实际在网页上每行字符75—85更流行。中文在14号字体时,建议35—45个文字。 比如下图:   2.间距 行距是影响易读性非常重要的因素,过宽的行距会会让文字失去延续性,影响阅读;而行距过窄,则容易出现跳行。     网页设计中,文字间距一般根据字体大小选1—1.5倍作为行间距,1.5—2倍作为段间距。 比如12号字体,行间距是12px—18px,段落间距则是18px—24px。 另外,行高/段落之间的空白=0.754。行间距正好是段落间距的75%是非常常见的。 比如简书16号字体,行间距27px/段间距36px=75%。文字字号本身比较大,所以行间距也不需要严格按照1—1.5倍的比例设置,不过行间距和段间距的比例符合75%,看起来很不错,这样的视觉效果让人在阅读时保持一种节奏感,这就是在实际情况中将规范的灵活应用。   3.行对齐 排版中很重要的一个规范就是把应该对其的地方对齐,比如每个段落行的位置对齐。 不论哪种视觉效果,精美的、正式的、有趣的还是严肃的,一般都可以应用一种明确的对齐来达到目的。 通常情况下,建议在页面上只使用一种文本对齐,尽量避免两端对齐。     4.文字留白 在排版文字时,在版面需要留出空余空间,留白面积从小到大应该遵循的顺序是:字间距、行间距、段间距。此外,在排版内容区之前,需要根据页面实际情况给页面四周留出余白。            

WordPress 网页设计之常见的表现手法

很多朋友对网页排版没想法,那今天给大家介绍几种网页设计表现手法以及对应的案例鉴赏,希望能激发大家的灵感!   1.对比   设计就是规则中加入一点变化,从而达到突出重点的作用。 大标题我们为了显眼通常都是加粗加大使用,小部分描述才使用纤细的。 即使保持字体上的统一,改变字体样式,又让字体不至于太平淡缺乏变化。 另外,也不仅仅是只有字体才有对比,网页上各个元素之间,也存在对比关系,对比越夸张效果越强烈。 这个网站同时运用了色彩及字体大小两种对比手法↓↓   字体明暗对比   产品之间的对比     2.几何图案   使用重叠几何图案的技术,可以实现更有趣的视觉效果。设计师可以添加各种各样简单的样式和形状。     3.插画 网页的设计趋势更新换代,但是使用插图始终是给页面一个独特外观和风格的好方法。     4.灰色的运用 加入少许灰色,你可以很轻松的在网页上实现简约风格。作为平凡的白色背景的代替,在背景上加入淡灰色的网页正在逐渐增加。   灰色背景最棒的地方就是:不管色彩多么丰富,不管是暖色还是冷色的图片都能很好的表现出来,在品牌颜色或图像周围使用灰色与之调和也能给人留下不错的印象。还有,在平面的色彩上使用淡黑的灰色作为阴影也是很不错的。    5.扁平化风格 扁平化设计依然占据主流,从某种程度上而言,是因为它同响应式设计有着极高的契合度,这也是在过去几年间的逐步变化而造就的结果。            

如何在wordpress文章页添加星级评分功能

想要给自己wordpress网站添加星级评分功能需要使用一款名叫 Fa Comment Rating 的插件,可以为你的WordPress网站的评论功能添加一个五星评分功能,用户在评论的时候,可以选择星级,提交以后,会在他的评论内容下方显示他的评分,管理员可以在后台评论编辑界面修改用户的评分。 进入插件安装,搜索Fa Comment Rating。就是这款插件。 点击启用。启用这款插件。 在文章页评论模块就能看见星级评价。   管理在后台查看评论界面能看到评论用户的评分星级,并能进行改动。引入这个插件可以让用户对文章的优劣进行打分同时吸引一些用户的兴趣。  

网页设计中的几何图形之色块运用

几何色块一直是设计师很青睐的设计元素,特别是在扁平化比较盛行的这几年,几何色块的运用随处可见。在广告设计、海报设计、电商设计、网页和UI设计、画册设计、甚至是标志设计中都可以看到。   其中,在网页设计中加入不规则几何形状的网页设计有助于用户产生新鲜感,几何元素的融入不仅让网页变得高大上,也在无形中突出了网页中的某些内容,这样的突出方式并不单薄无力,反而让网页看起来更自然。   没有人会对沉闷的网页产生兴趣,而几何图形恰巧能在增强视觉体验的同时营造出活跃的氛围。为什么几何色块这么受欢迎呢?主要是因为它具有很强的视觉冲击力,变化丰富,容易出效果。当然,并不是只要把几何色块用到设计中就万事大吉了,其中有很多需要注意的事项:   1.色块形状不宜太复杂,通常以比较简单的三角形、四边形、圆形为主;   2.如果色块在版面中起到了划分区域的作用,那么各区域的面积要有明显的大小区分;     3.在大色块中夹杂小色块可以丰富细节和增加对比;     4.色块的形状与颜色要与品牌调性相符,通常情况下,年轻时尚风格的设计更适合使用三角形和平行四边形色块,颜色大多比较鲜艳、丰富,且常用渐变色;     而调性偏向高端、严肃风格的设计,使用的色块形状多为矩形和圆形,颜色则比较优雅、简洁。 5.几何色块与文字或者图片元素进行交叉、叠印的组合,往往能产生不错的效果;         不过,几何色块只是表现形式的一种,而形式总是要为内容服务的,在实际进行网页设计时应注意不能让色块干扰文字的阅读性。        

如何使用插件将谷歌字体下载到自己的WordPress网站

不少 WordPress主题和插件都会使用到谷歌的字体,对于国内环境来说,很影响速度。使用 Self-Hosted Google Fonts 插件来实现自主托管所有网站使用的Google字体。Self-Hosted Google Fonts 将扫描您网站上的所有CSS,并自动下载必要的Google Web字体到自己的服务器,并修正好所有引用。你只需要启用插件的功能开关,一切都自动完成,非常智能! 主要特性: 自动自主托管的字体不费吹灰之力。 兼容所有主题和插件。 支持IE9 +和所有现代浏览器。 针对性能进行基准测试的优化代码。 内置缓存进行处理。 兼容缓存插件和自动优化。 主题和插件作者的API和钩子。 在使用多个子集时,使用unicode范围优化字体。 谷歌也正式这样做,但其他用于下载字体的解决方案不支持这一点。 在后台搜索Self-Hosted Google Fonts,找到对应的插件进行下载。   安装完成,即可开始使用。   在设置菜单找到插件,在页面设置enable,使用插件设置。     设置完成后即可看到效果,如果你使用了缓存插件,请务必记得清空缓存,才能看到效果。  

网页设计中的几何图形之圆形运用

在平时的设计中总觉得自己的设计那么平平无奇,不能吸引眼球,网页设计其实跟摄影一样,总要有一个视觉焦点来抓住浏览者的眼球。那么什么叫做焦点?有人用通俗的方法来诠释焦点,在设计的页面上最吸引人注意的地方,视线上集中交汇的地方,这个位置就叫焦点,在日常生活中我们运用照相机对准人的脸部,那也是在获取一个焦点。在网页设计中,引导用户集中在想让他关注的画面上,那样会让你的设计有重心和亮点。     人们用视觉获取环境中的信息,对你注意的周围都会是模糊的,你视线集中的中心点是最清晰的。第一张,视觉上呈现这样的状态是,视线上没有集中,整体模糊,是成方形的视觉框架。第二张和第三张,图中的两朵花在图形中是最漂亮的亮点,漂亮的东西会引人注意,你会注意到上一朵或则下一朵,注意任何一朵花的时候,眼球集中点会以圆的形状向外逐渐模糊,最中心点就是焦点。圆形作为设计中的元素的时候,自然更加的适应视觉上的感知。   不过使用圆形是一个技术活,因为它们并不总是能和谐地融入网页的整体风格。当然正因如此,设计得当的圆形元素是非常能抓住用户的眼球的。   用圆形元素进行网页设计有两种讨巧的办法:   一种是把圆形作为网页设计过程中的主要形状。这样的网页的主要元素,比如标志的类型,导航元素,弹出菜单,图像和其他元素,都应该是以圆形为基础设计的。   第二种方法就是避免重复使用圆形,只用一个主要的圆形元素来抓住用户的注意力。但不管使用哪种方法,设计师们都应该要时刻把网页整体的可读性,可用性和协调性放在心上。   既然提到了设计,那么下面不妨看看我们为你精心挑选的一些应用了圆形元素网页。它们都充分地利用了圆形的特点来展现页面。                 圆形元素和其它几何图形比较,具有圆滑的特点,让人感觉轻松,愉悦,合理的运用会提高页面的层次,让焦点更加突出,增强视觉感的同时也能够营造活跃的氛围。   我们都在不断尝试如何让页面变的美观而生动,创造富有活力的页面,让网站给人的视觉感受富有好感,把握好设计中的焦点,使页面信息有效传达的前提下,不管是把圆形融入到网页设计当中还是单纯用以装饰图形,只要应用得当,它们总能产生正向的视觉效果。        

网页设计中如何巧用色彩——运用柔和色调

网页中的柔和色调的使用,不止是近来的趋势,这是一项设计师使用多年的技巧,用来创造有冲击力的视觉效果。   那么哪些是柔和色彩呢?比如天蓝、淡红、浅绿等颜色比较中性而不刺眼的色彩,又或者说是明度较低、偏灰的颜色,这些颜色会给用户带来柔和、平静、安静以及轻的感觉,设计柔和色彩的网页也不是很简单的事情,色彩对比、纯度和明度都要协调,而且要注意页面的视觉中心!柔和并不一定要感觉像新生儿一样。通过某些适当的方式,配合其他元素,这些色调也可以相当鲜明。   下面我们从优秀的案例网站出发,了解10种在网页设计中运用柔和色调的方法。   柔和的照片 照片上的柔和遮罩层,或是在恰当的光照环境中拍摄的照片,可以成为精妙绝伦的网站背景。照片的色调越淡雅,设计师就有越多的区域可以放置其他元素。 使用柔和的照片同样有助于与其他元素产生反差,比如logo或按钮。请注意Solasie的logo与柔和色调的照片搭配得多么完美。这种思想也能突出幽灵按钮。   柔和的背景色 柔和的背景色是个好主意,使用多种颜色却不会咄咄逼人。由于柔和色调更加淡雅,画布上可以使用更大面积的颜色,却不会感觉太强烈。 处理柔和背景色的一个常见的趋势,就是像Dear Mum这样,使用单色调的配色方案,对一种颜色进行深浅变化。单色调能够与白色的文字元素产生美妙的视觉对比。搭配合适的字体,这种技巧也能打造时髦的现代感。   鲜明的柔和色 尽管你通常不会把“鲜明”和“柔和”相提并论,这类配色可以帮你创造出大胆的设计。因为柔和色容易退居幕后,所以如果你要在它附近有所动作,这是非常棒的选择。 Marie Catrib’s在这方面做得很好。这里的柔和色相当鲜明,但似乎没有喧宾夺主,你能看到这个从色块层探出头偷瞄的女人。鲜明的柔和色帮助你发现并聚焦在图片上,完全柔和的背景冲击力就会稍显逊色。   柔和色调营造氛围 你希望网站的访客产生怎样的感觉?柔和色很擅长营造平静、放松、缓和的感觉。如果这些情绪可以描述你的网站或公司,它或许就是正确的选择。 Sweez做得很棒,通过颜色创造了这样的情感链接。图中的一切都带着淡雅柔和的色调。它让你想到坐在安静平和的地方,享受一杯温暖美妙的卡布奇诺。看见没,这种简单的色彩多么有效。   柔和色的插画 柔和色也是插画的绝佳选择。运用这种色彩理念创造出令用户驻足观赏的作品。 柔和色调的插画,将带有某种平静的绘画作品与色彩结合起来。它让绘画的运用出人意料。   与柔和色产生对比 柔和色并不一定要凭空创造。它是一种很好地与其他设计元素产生对比的手段。 Kinder Fotografie在这方面做得非常好,运用了柔和色和明亮的照片、文字。设计中的柔和色部分包含了大量小细节,但你首先看到的儿童照片和文字“smiles”。然后用户才开始注意这些精致的细节。   柔和色的导航 柔和色调也是创造优秀导航的手段。通常情况,设计师会给网站设计黑白色的导航条,但彩色在这里也有用武之地。 柔和色可以作为导航的手段,是因为它们避让了其他部分的设计。比如,Wonderfully Wild中,用户最先看见照片并做出反应。导航元素与主要内容融合地很好,但由于颜色的选用,它并没有妨碍主要视觉内容。   扁平化设计中的柔和色调 我们今天看到的柔和色调大多都没有采用扁平化设计。设计师们喜欢的各种亮色,都变成了扁平设计兴起之初那些超级亮色的淡雅版。 在扁平化设计项目中使用柔和色调,好处是颜色仍然保有相同的感觉和整体外观,这种方式却不会为了吸引注意而过于压迫用户。在网站中运用柔和色与扁平风格色彩,更容易通过颜色引导用户到屏幕的特定区域,或是强调重要的文字元素。   柔和色文字 设计师们不止是在图片和背景上使用柔和色调。这种配色风格也可以运用在文字上。(虽然这会很微妙) 柔和色最好以粗大字体的方式使用,与更加朴实的背景相衬来创造鲜明对比。使用带有粗描边的大字体,可以确保屏幕上有更多柔和色。这个概念通常用于少量的字母或文字组合,不适用于正文。   柔和色调的界面元素 将柔和色用作界面元素的一部分,是个有趣的概念。这是扁平设计理念孕育出的又一个“花样”,按钮和其他元素可以使用柔和色。 Duy Tran的网站中,每块柔和色区域实际上是个超大的按钮。这些柔和色告诉用户哪块是哪块,让每个都易于点击(或触摸)。这些色调很突出,因为与极简的主图区域形成鲜明对比。(轮播图中的每一张与这些柔和色调的按钮区别开)   结论 使用柔和色的关键,在于让它看起来清新,而不是褪色。将柔和色调与你期望的深色、更鲜明的图片或白色元素对比搭配,有助于创造带有冲击力的柔和配色。 柔和色调天生就带有令人放松和冷静的理念。网页设计时使用这种配色方案对你有利。要牢记颜色与整体设计的其余部分如何相互影响。

网页设计中如何巧用色彩——色彩搭配原则

网页配色很重要,网页颜色搭配的是否合理会直接影响到访问者的情绪。好的色彩搭配会给访问者带来很强的视觉冲击力,不恰当的色彩搭配则会让访问者浮躁不安。以下是六个色彩搭配原则: 1. 由相同或相近色相可增强画面统一性 由相同或相近色相构成的配色可以轻松地营造出和谐、统一的印象。作为配色的基本技巧之一,应首先掌握。同一色相配色体现统一性同一色相配色作为共通色相配色的一种,专指其中色相差为零的配色。宁静中体现统一感,形成简约、成熟、干练、和谐的印象,强调色相本身的同时,能够轻易地传递出配色的主题。但又容易给人呆板、单调的感觉,所以大胆增加色调差异,体现画面色彩的张弛效果,称之为“同色深浅搭配配色(tone on tone)”。如果不彰显色调差异,画面统一于低明度、低纯度的色调中,则会形成朴素平实、波澜不惊的印象。   2. 邻近色相配色演绎自然、和谐的印象 邻近色相与同一色相配色相比,由于色相上存在微妙的差异,稍稍扩展了色相的范围,所以配色效果能够体现出纤细的变化,使得画面更加贴近自然、和谐。   3. 类似色相配色体现统一性与流畅性 色相含有共通成分,类似色调配色也可以体现出和谐、协调的印象,色彩具有适度的变化和动感,同样可以通过色调差体现画面色彩的张弛效果。 在同色系色相的配色中,类似色相配色最能够体现突出印象。相近的色相搭配,整合效果好,同时可以体现视觉动感。   4. 互补或对比色相可突出画面变化性 互补色相配色效果清晰、醒目。 互补色相配色是色相对比效果十分强烈,色彩相互衬托,配色效果清晰、醒目。色彩统一于高纯度色调中,体现力量感和速度感,演绎活力四射的运动氛围和彩色的跳跃性以及张弛感。   5. 对比色相配色表现强烈的印象 对比色配色中的色相差较大,即使统一于同一色调中,也能体现出充满活力变化的印象。特别是高纯度色调下的对比色配色,展现出充满刺激性的艳丽的印象,适合用于要求表现出高度视觉冲击效果的设计中。但同时也很容易形成廉价、劣质的印象,实际应用中应当加以留意。   6. 同一基调的配色,表达设计作品的整体概念 确定整体基调(画面中面积最大的颜色,即主题色)是配色过程中很重要的一步。在临近色相中选择色彩的配色方式称为同一色调配色,即“有主导色彩的配色”。为强调色调特征,充分表现配色主题,在实际设计配色中,往往会先确定能够反映主题的色调和主体基调,随后再进行具体的配色或局部颜色的选择。 在色彩的诸多要素中,最能左右配色印象的就是整体基调。因此,整体基调较为统一的设计作品,可以体现整体性和统一性,形成具有和谐、自然效果的配色。相反,色彩组合比较丰富、对比强烈的设计作品,可以进行特殊的表达或演绎比较夸张富于变化的表情。 明度上比较明亮的色彩,通常给人痛快、流畅、清爽的印象。 纯度上非常饱和、浓郁的色彩,通常给人充实、有力量感的印象。 色相的不同或冷暖的差异,会给人不同的视觉感受。 色相的统一   明度的统一   纯度的统一   最后,给读者一些关于色彩搭配上的建议: 在平面设计作品的创作过程中,每种颜色的运用都应该存在着其内在的理由与创作动机,因此不要单纯依靠感觉确定色彩,更不能将自己选色的理由归因于好看。 既要提升个人对于色彩的敏感度,同时需要了解受众的普遍感知效果,分析理解人们的视觉习惯与色彩感知习惯,才能在自己的设计作品中有效地将信息传递给受众群体。 可以在日常生活中留心观察身边事物,将观察到的好的配色案例利用摄影记录下来,如是杂志中的案例可裁剪下来,并将这种配色带给你的感觉使用某些词汇进行总结,构建一种将色彩、感觉、语言相融合的思维模式。      

网页设计中如何巧用色彩——色彩意味着什么?

色彩心理学被广泛地运用到各个设计领域,这早已不是什么秘密。从日常的杂货到LOGO设计、网页设计,色彩所起到的作用越来越大,它是给用户传递信息的最重要的因素之一。 科学研究表明,色彩会影响情绪,会招致正面的情绪,也能带来负面的影响,有的时候带来的情绪与实际要的并不匹配。网站的访客通常只需要大概90秒就能针对一个网站作出判断和选择,而在者其中,有62%~90%的因素是取决于网站的色彩。 每种色彩对于每个人而言都有着特定的含义,但是它的具体含义通常取决于他们所处的文化背景、个人经历和喜好。 事实上,色彩心理学在设计领域并不是一个精确的学科,个体差异非常明显。社会因素,个人认知,甚至性别也会对色彩感知产生影响。进一步的研究发现,产生影响的并不总是色彩本身,使用这些色彩的品牌与用户之间的关系也会影响用户对于色彩的感知。   以下是主要的几个色彩所代表的心理感应:   1.红色 红色光波长最长,最容易引起人的注意、兴奋、激动、紧张,同时给视觉以迫近感和扩张感,称为前进色。红色还给人留下艳丽、芬芳、青春、富有生命力、饱满、成熟、富有营养的印象,被广泛地用于食品包装之中。红色又是欢乐、喜庆的象征,由于它的注目性和美感,它在标志、旗帜、宣传等用色中占据首位。红色也象征着危险,所以大部分代表警示的标志(红绿灯、静止停车)和按钮(消防按钮)都采用了红色。 2.橙色 橙色的波长居红与黄之间。伊顿说:“橙色是处于最辉煌的活动性焦点。”它在有形的领域内,具有太阳的发光度,在所有色彩中,橙色是最暖的色。橙色也属于能引起食欲的色,给人香、甜略带酸味的感觉。橙色是一种充满生气和活力的颜色。柔和的橙色让人联想到大地以及秋色。因为它与季节的变换有关,橙色一般用来表现变化和运动的感觉。   3.黄色 黄色的波长适中,它是有彩色中最明亮的色。因此给人留下明亮、辉煌、灿烂、愉快、亲切、柔和的印象,同时又容易引起味美的条件反射,给人以甜美感、香酥感.黄色也与危险有关,不过没有红色那么强烈,因此在很多界面中,黄色是作为比红色底一级的警告色出现的。   4.绿色 绿色光的波长恰恰居中,人的视觉对绿色光反应最平静,眼睛最适应绿色光的刺激。绿色是植物王国的色彩,它的表现价值是丰饶、充实、平静与希望.绿色继承了蓝色所有具备的平静的属性,但是它也吸收了一些黄色的活力。绿色也代表着通过,完成的意义。很多环保完整的设计也都会选用绿色来表达生命的情感。   5.蓝色 蓝色光波长短于绿色光,它在视网膜上成像的位置最浅,因此,当红橙色是前进色时,蓝色就是后退色。红色是暖色,蓝色是冷色。蓝色表现千种精神领域,让人感到崇高、深远、纯洁、透明、智慧。蓝色也是公司最偏爱的颜色,代表着科技和理性,在一份业界logo的选用的可视化案例分析中,蓝色是所有公司logo中选用最多的一种颜色,红色次之,估计大多数公司BOSS都希望通过红色的显眼程度来让他们的公司脱颖而出吧。     6.紫色 紫色光波长最短,眼睛对紫色光的细微变化分辨力弱,容易感到疲劳。紫色给人高贵、优越、奢华、幽雅、流动、不安的感觉,灰暗的紫色则是伤痛、疾病,容易造成心理上的忧郁、痛苦和不安的感觉。因此,紫色时而有胁迫性,时而有鼓舞性,在设计中一定要慎重使用。   7.白色 是全部可见光均匀混合而成,称为全色光。又是阳光的色,是光明色的象征。白色明亮、干净、卫生、畅快、朴素、雅洁,在人们的感情上,白色比任何颜色都清静、纯洁,但用之不当,也会给人以虚无、凄凉之感。很多的产品设计,室内设计都会选用白色来作为主色调,来突出简洁、朴素和纯净之感,比如早期的Apple产品,无一例外是采用了白色,就是著名的“白雪公主”设计语言。还有日本的平面设计泰斗原研哉,对白色的运用也是出神入化,设计了MUJI的很多产品手册和产品包装,日本的设计所带来的设计上的心理感受和白的特质很契合,干净,朴素中带着一种禅道。   8.黑色 从理论上看,黑色即没有光波的光,是没有颜色的色。在生活中,只要光照弱或物体反射光的能力弱,都会呈现出相对黑色的面貌。黑色对人们的心理影响可分为两类。首先是消极类。例如,在漆黑之夜或漆黑的地方,人们会有失去方向、失去办法的阴森、恐 怖、烦恼、忧伤、消极、沉睡、悲痛、绝望甚至死亡的印象。其次是积极类。黑色使人得到休息、安静、沉思、坚持、准备、考验,显得严肃、庄重、刚正、坚毅。 在这两类之间,黑色还会有捉摸不定、神秘莫测、阴谋、耐脏的印象。在设计时,黑色与其他色彩组合,属于极好的衬托色,可以充分显示其他色的光感与色感,黑 白组合,光感最强,最朴实,最分明,最强烈。   9.灰色 居于黑与白之间,属于中等明度。无彩度及低彩度的色彩,灰色的运用可谓是千变万化,不同明度的灰给人感受完全不一样,高明度的灰会给人以高雅、含蓄、耐人寻味的感觉。低明度的灰给人以沉稳、厚度、高端的感受。而低彩度的灰更是油画中的“高级灰”,大师颜色的典范。可以说油画好不好,看你高级灰运用的技巧程度就好了。      

Most Read