描述
开 本: 16开纸 张: 胶版纸包 装: 平装是否套装: 否国际标准书号ISBN: 9787302442035丛书名: 写给设计师的书
特色:轻松学习配色法则,知识易懂、案例易学本系列图书全面讲解了服装、网页、海报招贴、平面广告、展示陈列、商品包装、品牌形象、室内家居领域内相关的配色原理、基础知识、基础色、设计风格和类型、时尚元素以及配色设计秘籍,让读者快速掌握配色设计的方法和规律。配色方案精彩呈现,动手实践、发散思维每本书中都安排了案例解析、设计技巧、配色方案、设计欣赏、设计实战、设计秘籍经典模块,不仅丰富了服装配色的内容,而且还增强了实用性,从而提升读者的设计敏锐度以及对配色的判断能力。
本书从学习网页设计的基础知识入手,循序渐进地为读者呈现一个个精彩实用的知识、技巧。本书共分为7章,内容分别为网页的基础知识,网页设计的五大原则,网页设计的基础色,网页的布局方式,不同行业的网页色彩搭配,网页色彩的视觉印象,网页设计秘笈。在本书4~6章的每章后面还特意安排了大型的设计实例,详细地为读者分析完整的综合设计的思路、扩展等。并且在多个章节中安排了案例解析、设计技巧、配色方案、设计欣赏、设计实战、设计秘笈等经典模块,在丰富本书结构的同时,也增强了实用性。
本书内容丰富、案例精彩、版式设计新颖,适合网页设计师、平面设计师、初级读者学习使用,可以作为大中专院校网页设计专业、平面设计专业及网页设计培训机构的教材,也非常适合喜爱网页设计的读者朋友作为参考用书。
第1章 网页的基础知识
色彩的基础知识 2 1.1
1.1.1 认识色彩 3
1.1.2 网页色彩的特性 4
1.1.3 色彩的属性 4
1.1.4 色彩的分类 5
1.1.5 色彩的心理感受 6
1.1.6 主色、辅助色、点缀色的关系 7
网页设计的点、线、面 8 1.2
1.2.1 点 8
1.2.2 线 9
1.2.3 面 10
网页的构成 10 1.3
1.3.1 网页的尺寸 11
1.3.2 网页标题 12
1.3.3 网站的Logo 13
1.3.4 网页页眉 14
1.3.5 网页页脚 14
1.3.6 网页导航 15
1.3.7 网页的主体内容 15
第2章 网页设计的五大原则
2.1 主题鲜明性原则 17
2.2 形式统一性原则 20
2.3 色彩和谐性原则 24
2.4 简洁清晰性原则 27
2.5 界面友好性原则 31
第3章 网页设计的基础色
3.1 红 36
3.1.1 认识红色 36
3.1.2 洋红&胭脂红 37
3.1.3 玫瑰红&朱红 37
3.1.4 鲜红&山茶红 38
3.1.5 浅玫瑰红&火鹤红 38
3.1.6 鲑红&壳黄红 39
3.1.7 浅粉红&博朗底酒红 39
3.1.8 威尼斯红&宝石红 40
3.1.9 灰玫红&优品紫红 40
3.2 橙 41
3.2.1 认识橙色 41
3.2.2 橘红&橘色 42
3.2.3 橙色&阳橙 42
3.2.4 蜜橙&杏黄 43
3.2.5 沙棕&米色 43
3.2.6 灰土&驼色 44
3.2.7 椰褐&褐色 44
3.2.8 柿子橙&酱橙色 45
3.2.9 金茶色&肤色 45
3.3 黄 46
3.3.1 认识黄色 46
3.3.2 黄&铬黄 47
3.3.3 金色&香蕉黄 47
3.3.4 鲜黄&月光黄 48
3.3.5 柠檬黄&万寿菊黄 48
3.3.6 香槟黄&奶黄 49
3.3.7 土著黄&黄褐 49
3.3.8 卡其黄&含羞草黄 50
3.3.9 芥末黄&秋菊色 50
3.4 绿 51
3.4.1 认识绿色 51
3.4.2 黄绿&苹果绿 52
3.4.3 嫩绿&叶绿 52
3.4.4 草绿&苔藓绿 53
3.4.5 芥末绿&橄榄绿 53
3.4.6 枯叶绿&碧绿 54
3.4.7 绿松石绿&青瓷绿 54
3.4.8 孔雀石绿&铬绿 55
3.4.9 孔雀绿&钴绿 55
3.5 青 56
3.5.1 认识青色 56
3.5.2 青&铁青 57
3.5.3 深青&天青 57
3.5.4 群青&石青 58
3.5.5 青绿&青蓝 58
3.5.6 瓷青&淡青 59
3.5.7 白青&青灰 59
3.5.8 水青&藏青 60
3.5.9 清漾青&浅葱色 60
3.6 蓝 61
3.6.1 认识蓝色 61
3.6.2 蓝色&天蓝色 62
3.6.3 蔚蓝色&普鲁士蓝 62
3.6.4 矢车菊蓝&深蓝 63
3.6.5 道奇蓝&宝石蓝 63
3.6.6 午夜蓝&皇室蓝 64
3.6.7 浓蓝色&蓝黑色 64
3.6.8 爱丽丝蓝&水晶蓝 65
3.6.9 孔雀蓝&水墨蓝 65
3.7 紫 66
3.7.1 认识紫色 66
3.7.2 紫&淡紫色 67
3.7.3 靛青色&紫藤 67
3.7.4 木槿紫&藕荷色 68
3.7.5 丁香紫&水晶紫 68
3.7.6 矿紫&三色堇紫 69
3.7.7 锦葵紫&淡紫丁香 69
3.7.8 浅灰紫&江户紫 70
3.7.9 蝴蝶花紫&蔷薇紫 70
3.8 黑、白、灰 71
3.8.1 认识黑、白、灰 71
3.8.2 白&月光白 72
3.8.3 雪白&象牙白 72
3.8.4 10%亮灰&50%灰 73
3.8.5 80%炭灰&黑 73
第4章 网页的布局
网页的布局方式 75 4.1
4.1.1 国字型布局 75
4.1.2 拐角型布局 77
4.1.3 封面型布局 80
4.1.4 对称型布局 82
4.1.5 口字型布局 84
4.1.6 通栏型布局 85
4.1.7 骨骼型布局 88
网页版面设计的常用技巧 90 4.2
4.2.1 对比技巧 90
4.2.2 重复技巧 92
4.2.3 分类技巧 92
旅游主题网页设计 93 4.3
4.3.1 设计说明 93
4.3.2 不同布局方式解析 94
4.3.3 其他旅游网站布局解析 95
4.3.4 同类网页欣赏 96
第5章 不同行业的网页色彩搭配
服饰类网页设计 99 5.1
5.1.1 活泼风格的网页设计 100
5.1.2 极简风格的网页设计 101
5.2 美容、护肤类网页设计 103
5.2.1 浪漫风格的美容、护肤类网页设计 103
5.2.2 典雅风格的美容、护肤类网页设计 104
食品类网页设计 106 5.3
5.3.1 写实风格的食品类网页设计 107
5.3.2 清爽风格的食品类网页设计 108
数码类网页设计 110 5.4
5.4.1 理性风格的数码类网页设计 111
5.4.2 新锐风格的数码类网页设计 112
5.5 汽车类网页设计 114
5.5.1 含蓄风格的汽车类网页设计 115
5.5.2 高调风格的汽车类网页设计 116
5.6 奢侈品类网页设计 118
5.6.1 优雅风格的奢侈品类网页设计 119
5.6.2 神秘风格的奢侈品类网页设计 120
5.7 艺术设计类网页设计 122
5.7.1 插画风格的艺术设计类网页设计 123
5.7.2 拼贴风格的艺术设计类网页设计 124
5.8 游戏类网页设计 126
5.8.1 趣味风格的游戏类网页设计 126
5.8.2 未来感风格的游戏类网页设计 128
旅游类网页设计 130 5.9
5.9.1 民族风格的旅游类网页设计 131
5.9.2 轻松风格的旅游类网页设计 132
家居类网页设计 134 5.10
温馨风格的家居类网页设计 135 5.10.1
素雅风格的家居类网页设计 136 5.10.2
购物类网页设计 138 5.11
时尚风格的购物类网页设计 138 5.11.1
活泼风格的购物类网页设计 140 5.11.2
教育类网页设计 142 5.12
创新风格的教育类网页设计 143 5.12.1
严肃风格的教育类网页设计 144 5.12.2
医疗类网页设计 146 5.13
简洁风格的医疗类网页设计 147 5.13.1
现代风格的医疗类网页设计 148 5.13.2
体育类网页设计 150 5.14
积极风格的体育类网页设计 151 5.14.1
整洁风格的体育类网页设计 152 5.14.2
餐饮类网页的设计方案 154 5.15
企业类网页的设计方案 155 5.16
数码类网页的设计方案 156 5.17
公益类网页的设计方案 157 5.18
农业类网页的设计方案 159 5.19
第6章 网页色彩的视觉印象
6.1 清凉 162
6.2 热情 164
6.3 干净 166
环保 168 6.4
6.5 坚硬 170
6.6 理性 172
6.7 健康 174
6.8 甜蜜 176
6.9 生机 178
朴实 180 6.10
清新 182 6.11
欢乐 184 6.12
温柔 186 6.13
成熟 188 6.14
音乐狂欢夜活动的网页设计 190 6.15
设计说明 190 6.15.1
不同视觉印象解析 191 6.15.2
其他音乐网页不同视觉感受解析 193 6.15.3
同类网页欣赏 194 6.15.4
第7章 网页设计秘笈
7.1 网页文字的排版技巧 196
7.2 首页设计的重要性 197
7.3 如何把握网页的一致性 198
7.4 首页中的文字处理技巧 200
7.5 导航栏的种类 201
7.6 网页Banner的构图技巧 202
7.7 网页配色的基本原则 204
7.8 网页设计中要提高用户体验 204
7.9 扁平化设计五大原则 205
网页背景常用的表现方法 206 7.10
前言
《网页配色设计手册》是作者对自己多年从事网页设计工作的一个总结,希望能成为让读者少走弯路、找到设计捷径的经典手册。书中包含了网页设计必学的基础知识及经典技巧。身处设计行业,你一定要知道“光说不练假把式”。本书不仅有理论,还有精彩的案例赏析,并用大量的模块启发你的头脑,锻炼你的设计能力。
希望读者看完本书后,不会只是说:“我看完了,挺好的,作品好看,分析也挺好的。”这不是编写本书的目的。我们希望读者会说:“这本书给我更多的是思路上的启发,让我的思维更加开阔,学会了设计上的举一反三;通过吸收消化,把知识变成了自己的。”这才是作者编写本书的初衷。
本书内容
网页的基础知识。介绍网页设计的色彩、点/线/面、构成。 第1章
网页设计的五大原则。包括主题鲜明性原则、形式统一性原则、色彩 第2章
和谐性原则、简洁清晰性原则、友好性原则。
第3章 网页设计的基础色。从红、橙、黄、绿、青、蓝、紫、黑、白、灰
10种颜色,逐一分析,讲解每种色彩在网页设计中的应用规律。
第4章 网页的布局。包括网页的布局方式、网页版面设计的常用技巧。
第5章 不同行业的网页色彩搭配。包括14种不同的风格。
第6章 网页色彩的视觉印象。包括14种常见的色彩视觉印象。
第7章 网页设计秘笈。精选10个设计秘笈,让读者轻松愉快地学习完后的部分。本章也是对前面各章知识点的巩固和理解,读者要动脑筋思考。
本书特色
◎ 实践为主,鉴赏为辅。纯鉴赏类书只能欣赏,看完后自己还是设计不好,本书则不同,增加了多个动手的模块,让读者边看、边学、边练。
◎ 章节合理,易于吸收。1~3章主要讲解网页设计的基本知识,4~6章介绍网页设计的布局方式、不同行业的网页色彩搭配、网页色彩的视觉印象等,第7章以轻松的方式介绍10个设计秘笈。
◎ 由设计师写,给设计师看。针对性强,充分了解读者的需求。
◎ 模块丰富,内容细致。案例解析、设计技巧、配色方案、设计欣赏、设计实战、设计秘笈在本书中都能找到,更全面地满足读者的求知欲。
本书是“写给设计师的书”系列图书中的一本。在本系列书中,读者不仅能系统地学习网页设计,而且还有更多的设计专业知识供读者选择。
本书通过对知识的归纳总结、趣味的模块讲解,帮助读者打开设计思路,增强动脑、动手的能力。希望通过本书,能激发读者的学习兴趣,帮助您迈出步,圆您一个设计师的梦!
一起跟随作者,翻开新的一页学习吧!
本书由孙芳编写,参与本书编写和整理工作的还有柳美余、苏晴、郑鹊、李木子、矫雪、胡娟、马鑫铭、王萍、董辅川、杨建超、马啸、孙雅娜、李路、于燕香、丁仁雯、张建霞、马扬、王铁成、崔英迪、高歌。
本书在写作过程中,参考并引用了一些网站页面。
由于作者水平有限,书中难免存在错误和不妥之处,希望广大读者批评和指正。
编者
第2章
网页设计的五大原则
网页设计也是艺术类的表现形式,视觉传达设计开拓了新的网络视觉文化空间。对于网页设计师来说,打造非凡的交互体验,设计一个可用性强的网站是大家共同的目标。但是企业也有着自己的需求,因而这两者经常会出现冲突。所以在对网页版式的设计中要遵循以下几点原则。
(1)主题鲜明性原则。
(2)形式统一性原则。
(3)色彩和谐性原则。
(4)简洁清晰性原则。
(5)界面友好性原则。
2.1 主题鲜明性原则
网页设计的主题是整个网站的灵魂所在,它起到对网站的整体风格和特色做出定位、规划网站的组织结构的作用。通常,设计师会通过视觉设计去表现网页的主题,这就要求设计师不但要以单纯、简练、清晰和精确的形式进行表达,而且在强调艺术性的同时,更应该注重通过独特的风格和强烈的视觉冲击力来鲜明地突出设计主题。可以通过以下三点做到网页主题鲜明。
(1)对网页构成元素运用艺术的形式美法则进行条理性处理,以便更好地营造符合设计目的的视觉环境,从而起到使主题鲜明的作用。
(2)抓住访客心理,按照视觉心理规律和形式将主题主动地传达给访客,以使主题在适当的环境中被访客接受。
(3)网页的效果力求简洁,要点明确,以简单明确的语言和画面来体现本站的主题,从而吸引访客的注意。
主题鲜明的网页设计
在制作网页的初期,一定要为网页设定一个明确的主题,尤其是个人网站。只有明确网页的主题,才能在此基础上更好地进行创意构思,从而形成总体的设计方案。
设计理念:在该网页中,画面中的图片都与食品相关联,从而可以判定这是一个以食品为主题的网页设计。该网页结构并不复杂,内容一目了然。
色彩点评:该网页整体呈现出一种灰色调,是典型的“日式风格”配色。其中采用浅卡其色作为背景颜色,让整体画面呈现柔和、朴素的效果。
导航栏位于网页的左侧,并将文字竖向排列,非常有民族特点。 画面中,宣传图中的灰色背景与浅卡其色的对比较弱,给人一种柔和、亲切的感觉。
作为食品类的网页设计,以绿色作为点缀色,给人一种健康、自然、美味的视觉效果。
CMYK=7,7,16,0 RGB=241,237,220
CMYK=71,48,100,7 RGB=94,117,10
CMYK=23,35,82,0 RGB=213,173,63
CMYK=3,51,66,0 RGB=248,155,87
CMYK=60,49,44,0 RGB=121,126,131
该网页为运动主题的网页,以白色搭配红色,给人一种积极、奋进的视觉印象。该网页布局简约,以大幅图片作为视觉中心,非常具有吸引力。
CMYK=78,72,69,39 RGB=58,58,58
CMYK=12,93,85,0 RGB=228,42,42
CMYK=19,15,14,0 RGB=213,213,213
CMYK=0,0,0,0 RGB=255,255,255
这是一个矢量插画风格的网页设计,画面中颜色简单,配色效果鲜明,非常具有吸引力。该网页以冰淇淋作为主题,它并没有以实景图片作为宣传重点,这种另辟蹊径的设计方式,给人留下深刻的印象。
CMYK=100,96,26,0 RGB=23,41,132
CMYK=11,96,17,0 RGB=230,0,126
CMYK=6,16,82,0 RGB=254,220,49
CMYK=45,11,92,0 RGB=164,196,47
提升网页品质的技巧——留白
“留白”就是留下空白,它不是一个色彩概念,而是一种形式概念,它依存于整体布局结构关系中。利用留白这种手段,可以向访客传达出设计者的诉求。
留白效果处理得当,整个画面会显得整洁而有开放感,画面的主题往往更具吸引力。留白的表现手法不只应用于网页设计,在其他领域也应用广泛,例如版式设计、海报设计、绘画等多个领域。
配色方案
双色配色 三色配色 四色配色
2.2 形式统一性原则
形式统一性原则是指在整个网站中,每个网页之间在内容上存在联系、在表现形式上相互呼应,做到整个画面风格统一、色彩统一、布局统一的效果。
在一个网站中会存在多个页面,当访客从一个页面跳转到另外一个页面时,两个页面在风格、色彩和布局上要有一定的关联,这样才能够符合形式统一性原则。如果违背了形式统一性原则,则设计出来的作品不但没有生气,就连基本的视觉设计和信息传达功能也无法实现,甚至有可能会传递错误的信息,造成混乱。
形式统一的网页设计
形式统一的网页设计可以让访客更加快捷、精准、全面地掌握网站的内容,并给人一种内部有机联系、外部和谐完整的美感。通常可以从布局、色彩、风格三个方面来构成形式上的统一。
设计理念:这是来自一个网站中的两个页面之一,它们的布局、色彩和风格都是互相统一的。整个页面的布局非常简单,中央的宣传图很好地介绍了商品,网页Logo、标题和导航分别位于图片的左、上、右侧,使用方法一目了然。
色彩点评:该网页以白色作为主体颜色,整个画面看起来干净、清爽,在对比的作用下,黑色的文字变得非常突出,易于访客的阅读和理解。 高度的形式统一可以让整个网站看起来非常连贯,符合人们的审美习惯。
网页的布局别出心裁,将网页Logo放置画面的左侧,这样的手法是比较少见的。
简约的布局方式和白色调的配色,使整个页面看起来非常简单、大方,可以给访客留下极佳的印象。
CMYK=0,0,0,0 RGB=255,255,255
CMYK=100,100,100,100 RGB=0,0,0
CMYK=0,96,95,0 RGB=255,0,0
该网页以灰色作为主色调,整体给人一种内敛、儒雅的感觉,画面中,图形以相同的形状整齐摆放,在视觉上营造了一种平衡的感觉。商品的背景为统一的灰色,也形成了统一的视觉感受。
CMYK=78,70,64,27 RGB=66,70,74
CMYK=91,66,88,50 RGB=7,54,39
CMYK=19,14,14,0 RGB=214,214,214
CMYK=4,3,3,0 RGB=247,247,247
该网页采用类似色的配色原理,青色为主色调,绿色为辅助色。整个页面给人清新、活泼的感觉。商品包装中的绿色与绿色的草地相呼应,整个画面色彩协调统一。
CMYK=11,0,83,0 RGB=253,255,0
CMYK=83,43,17,0 RGB=0,128,182
CMYK=55,11,100,0 RGB=136,186,26
CMYK=56,4,85,0 RGB=130,195,75
CMYK=58,4,5,0 RGB=98,203,245
提升网页品质的技巧——整个网站风格一致
在网页设计的过程中,尽管要融入很多创新元素,但是整个网站的风格要统一,这样才能使整个网站看起来是一个整体。我们可以通过按钮、链接、导航栏等设计,让整个网站的风格一致。
配色方案
三色配色 四色配色 五色配色
网页设计赏析
2.3 色彩和谐性原则
色彩是一种强有力的视觉语言,它甚至比网页布局更具视觉影响力。色彩的搭配会影响整个网站的定位、风格、情感。通过不同的配色方案,可以给访客带来感官上的刺激,从而产生共鸣。
色彩和谐的网页设计
每一种色彩都具有不同的情感,所以一个优秀的网页设计,色彩的搭配是至关重要的。网页中的色彩和谐,能给访客一种心旷神怡的感觉,也能够传递一种统一、正确的观念,让访客觉得这个网站是认真、庄重的。
设计理念:该网页采用海报型的布局方式,视觉效果强烈,利用全屏的图片和简洁的文案传递出产品的气质和理念,同时给人大方、舒展的感觉。
色彩点评:该网页以粉色为主色调,以红色、洋红色作为点缀色。整体采用同类色的配色方案,画面色感和谐,多种点缀色让画面颜色变得丰富。
该网页主题明确,非常具有吸引 力和号召力。
以粉色调作为该网页的主色调,非常贴切主题。
网页中虽然内容丰富,但是条理清晰,非常易于访客的理解和消化。
CMYK=14,99,76,0 RGB=224,8,54
CMYK=14,26,7,0 RGB=225,200,216
CMYK=19,100,100,0 RGB=215,5,18
CMYK=48,100,58,7 RGB=153,8,76
CMYK=63,69,45,2 RGB=119,92,114
在该网页中,有彩色的部分主要来自于网页中的图片。我们可以看到,这两幅图片色调是非常相近的,这也是网页色彩和谐的关键。
CMYK=38,23,13,0 RGB=171,186,207
CMYK=46,21,49,0 RGB=156,181,143
CMYK=25,13,19,0 RGB=202,211,206
CMYK=37,19,21,0 RGB=174,192,196
该网页采用单色调的配色方案,红色的配色与商品的颜色相协调,整个画面色彩统一、和谐。网页中黑色的导航栏有稳定画面效果的作用,白色的文字在红色背景的衬托下,显得洒脱、率真,而且易于阅读。
CMYK=91,87,87,78 RGB=4,4,4
CMYK=0,0,0,0 RGB=255,255,255
CMYK=59,76,52,6 RGB=126,79,98
CMYK=53,100,100,41 RGB=105,2,1
CMYK=28,100,100,1 RGB=199,1,0
提升网页品质的技巧——主次分明的层级关系
视觉元素如果有清楚的浏览次序,那么应该明确它们的层级关系。层级关系明确的网页设计通常会按照顺序去浏览网页,网页的主旨也会在短时间内精准地传递给访客。
如果一个网页层级关系不明确,那么访客在浏览网页的过程中就会困惑,甚至离开网页。
例如在右图中,标题文字与段落文字的字号存在着较大的差异,这就是层级关系的一种体现。
配色方案
三色配色 四色配色 五色配色
网页设计赏析
2.4 简洁清晰性原则
简洁清晰性原则是指去除不重要的内容,而仅保留较少的重要内容,突出网页设计的主题信息。简洁清晰的网页设计通常主题突出,中心思想明确,非常易于记忆和理解,而且简洁、清晰、新颖的效果将更加深入人心。如今简洁清晰的网页设计越来越流行,缩短了人们观看网页的时间。大量的文字内容,会不利于突出重点,满屏的产品介绍,将导致杂乱无章。而简单的网页设计更能直击人心,快速传递情感。
简洁清晰的网页设计
简洁清晰的网页设计通常会减少设计元素的使用,或是在网页中安排大量留白,这样做的目的,在于将干扰降至,以便用户能够专注于重要的内容。
设计理念:这是一个网站的首页,大面积的留白可以非常清晰地突出主题,增强网页的表现效果。网页的构图十分简单,内容简练,易于访客理解。
色彩点评:该网页颜色非常简单,首先映入眼帘的是大面积的红色,具有非常鲜明的视觉效果。
在该网页中,大面积的留白增加了网页的空间感。 在精简的布局方式下,画面中的商品具有很强的存在感。
红色 白色的配色是十分经典的配色方案。在页面中,白色的文字和红色的背景反差性很大,具有很强的视觉冲
击力。
CMYK=0,0,0,0 RGB=255,255,255
CMYK=16,88,91,0 RGB=221,62,36
CMYK=84,79,76,61 RGB=30,32,33
该网页采用高明度的配色方案,画面属于亮灰色调,视觉效果柔和、优雅。网页的布局十分简约,在很大程度上提升了用户体验。
CMYK=10,34,20,0 RGB=233,187,187
CMYK=16,52,49,1 RGB=120,120,120
CMYK=12,8,11,0 RGB=230,231,227
CMYK= 8,4,3,0 RGB=238,243,247
该网页采用整张大图作为背景,具备极强的视觉冲击力,同时,可以有效地引导访客驻足观看,从而达到点击网页的目的。在该网页中,网页的布局也非常简洁,半透明的按钮,可以拉开网页前景与背景的距离,使之产生更强烈的空间感。
CMYK=78,72,70,40 RGB=57,57,57
CMYK=69,96,37,2 RGB=113,44,108
CMYK=10,8,8,0 RGB=235,233,232
CMYK=38,42,45,0 RGB=174,151,134
CMYK=31,26,24,0 RGB=188,184,184
提升网页品质的技巧——文字排列与字的色彩
文字与整个版式都息息相关,虽然字体有很多种,但是,真正能够使用的也只有一小部分,所以要尽可能地选择网页安全字。在字体的选择上要符合画面整体的气氛,例如,有的字体体现严肃,有的字体体现幽默,有的字体体现力量感。也要根据信息的主次关系去选择不同的字体及字号,而且要对文字的“字间距”与“行间距”进行调整。文字颜色的选择也非常重要,因为色彩可以使文字不受位置的局限,加强或减弱文字的表现强度。
配色方案
三色配色 四色配色 五色配色
2.5 界面友好性原则
网页设计的友好性原则包括三个方面。
1. 对用户友好
能够充分满足用户的需要,以友好的信任感打动人心,从而提高网站的访问量。
2. 对网络环境友好
适合搜索引擎进行检索,便于积累网络营销资源。
3. 对经营者友好
能够使经营者的网站日常维护和管理更高效、方便、友好。
友好性原则
网页设计的友好性原则通常表现为打开网站后界面美观,便于使用,可用性高,给人以美观、舒适、大方的感觉。
设计理念:该网页采用海报式的布局方式,整体效果舒展大气。在画面中央,利用色相的区别,将版面一分为二,形成了鲜明的对比。
色彩点评:该网页采用类似色的配色方案,以青色与青绿色为主体色,以黄色和绿色为点缀色,整体色调轻松
活泼。
前景中的文字位于两个版面的中间,让两个版面产生了紧密的联系。 在背景中以人物剪影效果作为点缀,既丰富了画面的内容,又不会喧宾
夺主。
标题文字在字体的选择上非常符合整个画面的气氛,黄色的字体在画面中效果也非常突出。
CMYK=62,0,25,0 RGB=70,213,218
CMYK=54,0,39,0 RGB=106,232,191
CMYK=8,5,86,0 RGB=253,237,2
CMYK=75,3,100,0 RGB=0,178,0
该网页以黄色作为主色调,绿色作为点缀色。我们可以看到,网站的Logo是一个绿色的仙人掌,而选择黄色作为主色调是为了让访客联想到沙漠。矢量插画的风格设计方式给人一种幽默、有趣的感觉。
CMYK=91,87,87,78 RGB=4,4,4
CMYK=0,0,0,0 RGB=255,255,255
CMYK=71,13,93,0 RGB=73,170,66
CMYK= 7,17,88,0 RGB=253,217,0
这是一个网站的首页设计,画面正中间的欢迎问候非常符合网站的友好性原则。藏蓝色的色调给人一种神秘、悠远的感觉。采用俯拍手法的图像,很好地将访客的视线集中到了画面中心位置的文字上,具有一定的视觉导向作用。
CMYK=0,0,0,0 RGB=255,255,255
CMYK=47,51,69,1 RGB=156,130,91
CMYK=91,82,55,26 RGB=38,54,79
CMYK=96,93,74,68 RGB=4,10,26
提升网页品质的技巧——导航栏(条)的设计
导航栏明显的作用就是指引用户快速进入页面。合理的导航条可以使得页面层次清晰,方便用户使用。在导航栏的设计方面,要考虑其摆放位置、风格、所用技术、可用性和网页易读性。
配色方案
双色配色 三色配色 四色配色
评论
还没有评论。