有思俱乐部学习园地

一、配色流程

配色大致手段可分为以下2个步骤:

1:选择主色

2:选择辅助色搭配

先决定主色,当你决定了主色之后,其他的颜色再围绕主色搭配。主色与辅色两者之间是主从关系。 根据作品主题定位选择主色。主色决定整个作品的风格定位,你的设计针对的是什么主题?要确保正确的传达主题信息。主色常常使用该行业该产品的特征色。

二、案例

目前的画面接近黑白,没有纯度较高的色彩,所以对情绪的影响很弱,要利用色彩突出主题,首先应该考虑的就是加入主色。大部分情况下,主色是画面中面积最大的颜色,最瞩目的颜色。可以影响整个作品印象的颜色。

当前画面的产品是家具,而家给我们的感觉是温暖与呵护,因此结合温暖这一主题选择给人温暖的橘红色(暖色)作为主色,面积最大的下部区域和右上角受瞩目区域后,画面立刻被注入了色彩的情绪。现在的版面给人的感觉是一种温暖、积极的心理感受。

只将橘红色添加到右上角受瞩目的区域,以及主标题区域课也是可行的,版面还是传达出温暖、积极的感受。这样的处理手法,让色彩更具有了点缀的意义。

而主色选择蓝色(冷色)则给人一种理智、智慧的心理感受。 当你想要表达冷静、效率时,通常选择蓝色,如果选择了错误的主色彩,例如将蓝色更换为橘红色,传递的概念就差之千里了。这就是主色的功效。

三、行业特征色

有时了解主题,但不清楚当前主题最适合与哪种颜色相对,这种情况下可以借鉴行业特征色进行参考,行业特征色对于选择主色的影响是很大的。

四、注意

在网页设计中对于色彩的使用特别忌讳脏、纯、跳、花、粉这几种情形。

忌脏是指背景与文字内容对比不强烈,灰暗的背景令人沮丧。

忌纯是指艳丽的纯色对人的刺激唐强烈,缺乏内涵。

忌跳是指再好看的颜色,也不能脱离整体。

忌粉是指颜色浅虽然显得干净,但如果对比过弱,显得苍白无力。

另外,蓝色忌纯,绿色忌黄,红色忌艳。

不要为了设计而设计,再炫酷的页面效果如果偏离了以用户为中心的主线,让用户抓不住重点,感悟不到网页本身所需要体现的信息,也是没用的。

工作人员

 
            
作者:
信息录入:杨洋

(一)、保证文字的可读性

在页面中,文字是重要的信息来源,所以保证可读性,是文字排版中首要考虑的事情。影响文字可读性的因素很多,但在众多问题中,流畅的阅读排版是保障可读性的基础。在排版中控制好文本的长度、字距、行距、段落与对齐方式,就能够有效的提高可读性。

(二)、不要使用过多的字体

网站排版中建议最多不要超过3种字体类型,不然会使网站看起来松散和不专业,不仅太多的字体类型会造成这种问题,太多的字体尺寸也会破坏网页布局。一般中文使用微软雅黑字体,英文使用Arial字体。

(三)、文案层次

根据文案的主次,对比文字进行层级的排版。我们将对比分为三类,主要是标题与正文的字体与字号对比、文字颜色对比,以及文字颜色与背景颜色的对比。

WebsiteLayout(3).jpg

1、标题与正文对比

如下图,在网站案例页面中,标题使用18号的微软雅黑,正文使用12号的宋体,两种字体字号的对比让文字内容富有层次,很容易吸引读者眼球。

2、文字颜色与背景色对比

这是非常常用的一种排版设计方式,正文文本与背景合适的对比可以提高文字的清晰度,产生强烈的视觉效果。 如下图,在埃森哲官网中,白色背景、红色标题、黑色正文的对比,以及红色背景与白色文字对比的应用,将文字内容清晰衬托出来,既有丰满的层次感,同时有具有很强的视觉冲击力。

在使用这一原则时需要注意,必须确保文字是容易看清的,如果文字过小或过于纤细、色彩对比度不够,会适得其反,例如:

二、间距

(一)、控制行长

单行文字如果包含的字数太多,文本内容将会很难阅读,一是阅读的时候会难以换行,二是容易造成阅读疲劳。合理的行长会使用户在行间跳转时比较轻松,反之则会使阅读成为一种负担。

太宽-会使得单行文字太长,读者的眼睛会难于专注文字。因为长时间阅读容易串行,大段的文本中很难找到正确的行。

太短-会使得用户的眼睛经常回到下一行文本,会打破读者的阅读节奏,长时间阅读造成视觉疲劳。太短也会倾向于向读者发出一种信号,使得读者没有读完当前这行就去跳到下一行阅读,可能会忽略潜在的重要词句。

(二)、控制行间距、字间距

行间距是行与行间的间距,行间距通常伴随着字体大小而的变化,默认行间距会稍大于字体的大小,通常的这样看起来会比较的拥挤,可以根据页面实际情况去考虑增加间距,增加文字的呼吸感。一般行间距控制在字体大小的1.5-2倍之间(中文字体)。

新手排版时,有时候会因为文本内容过长,而版式又受限,会去选择压缩字符间距的方式来达到控制文本长度的目的。其实这是一个容易被忽略的错误,字间距过于拥挤会降低文字的可读性。

三、排版

(一)、统一的对齐方式

统一的对之间齐会让文字排版井然有序,阅读起来会非常流畅。多种对齐方式,会是使页面混乱不堪。除了文本要保持统一的对齐方式之外,正文要尽量保持两端对齐,这会关系到页面是否整洁。

[图片]

(二)、图文排版的亲密性

亲密性在排版中的理解,通俗的来讲就是我和你近,我们的关系就密切。图文排版的间隔大小,就是影响亲密性的主要因素。左图中一致的间隔,就会让人产生困惑,对各个标题、正文与图片的中关系傻傻分不清楚,严重影响用户阅读体验。在右图中,我们通过调整间距,把相关的标题正文图片分成了一组,这样元素之间的关系一目了然。

(三)、数据展示

一个页面数据展示不少于10-20条,准确的文字数据帮助用户快速获取想要的内容。例:

避免一个页面图片展示过多,文字数据过少。这样用户较难迅速的获取自己想要的内容,页面内容显得比较简陋,不能只是为了美观设计网页。可以先设计页面数据不少于10-20条再在后期对页面进行优化,例:

[图片]

工作人员

 
            
作者:
信息录入:杨洋

(一)、保证文字的可读性

在页面中,文字是重要的信息来源,所以保证可读性,是文字排版中首要考虑的事情。影响文字可读性的因素很多,但在众多问题中,流畅的阅读排版是保障可读性的基础。在排版中控制好文本的长度、字距、行距、段落与对齐方式,就能够有效的提高可读性。

(二)、不要使用过多的字体

网站排版中建议最多不要超过3种字体类型,不然会使网站看起来松散和不专业,不仅太多的字体类型会造成这种问题,太多的字体尺寸也会破坏网页布局。一般中文使用微软雅黑字体,英文使用Arial字体。

(三)、文案层次

根据文案的主次,对比文字进行层级的排版。我们将对比分为三类,主要是标题与正文的字体与字号对比、文字颜色对比,以及文字颜色与背景颜色的对比。

WebsiteLayout(3).jpg

1、标题与正文对比

如下图,在网站案例页面中,标题使用18号的微软雅黑,正文使用12号的宋体,两种字体字号的对比让文字内容富有层次,很容易吸引读者眼球。

2、文字颜色与背景色对比

这是非常常用的一种排版设计方式,正文文本与背景合适的对比可以提高文字的清晰度,产生强烈的视觉效果。 如下图,在埃森哲官网中,白色背景、红色标题、黑色正文的对比,以及红色背景与白色文字对比的应用,将文字内容清晰衬托出来,既有丰满的层次感,同时有具有很强的视觉冲击力。

在使用这一原则时需要注意,必须确保文字是容易看清的,如果文字过小或过于纤细、色彩对比度不够,会适得其反,例如:

二、间距

(一)、控制行长

单行文字如果包含的字数太多,文本内容将会很难阅读,一是阅读的时候会难以换行,二是容易造成阅读疲劳。合理的行长会使用户在行间跳转时比较轻松,反之则会使阅读成为一种负担。

太宽-会使得单行文字太长,读者的眼睛会难于专注文字。因为长时间阅读容易串行,大段的文本中很难找到正确的行。

太短-会使得用户的眼睛经常回到下一行文本,会打破读者的阅读节奏,长时间阅读造成视觉疲劳。太短也会倾向于向读者发出一种信号,使得读者没有读完当前这行就去跳到下一行阅读,可能会忽略潜在的重要词句。

(二)、控制行间距、字间距

行间距是行与行间的间距,行间距通常伴随着字体大小而的变化,默认行间距会稍大于字体的大小,通常的这样看起来会比较的拥挤,可以根据页面实际情况去考虑增加间距,增加文字的呼吸感。一般行间距控制在字体大小的1.5-2倍之间(中文字体)。

新手排版时,有时候会因为文本内容过长,而版式又受限,会去选择压缩字符间距的方式来达到控制文本长度的目的。其实这是一个容易被忽略的错误,字间距过于拥挤会降低文字的可读性。

三、排版

(一)、统一的对齐方式

统一的对之间齐会让文字排版井然有序,阅读起来会非常流畅。多种对齐方式,会是使页面混乱不堪。除了文本要保持统一的对齐方式之外,正文要尽量保持两端对齐,这会关系到页面是否整洁。

[图片]

(二)、图文排版的亲密性

亲密性在排版中的理解,通俗的来讲就是我和你近,我们的关系就密切。图文排版的间隔大小,就是影响亲密性的主要因素。左图中一致的间隔,就会让人产生困惑,对各个标题、正文与图片的中关系傻傻分不清楚,严重影响用户阅读体验。在右图中,我们通过调整间距,把相关的标题正文图片分成了一组,这样元素之间的关系一目了然。

(三)、数据展示

一个页面数据展示不少于10-20条,准确的文字数据帮助用户快速获取想要的内容。例:

避免一个页面图片展示过多,文字数据过少。这样用户较难迅速的获取自己想要的内容,页面内容显得比较简陋,不能只是为了美观设计网页。可以先设计页面数据不少于10-20条再在后期对页面进行优化,例:

[图片]

工作人员

 
            
作者:
信息录入:杨洋