`
caibinghong
  • 浏览: 148837 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

从业余到专业:03网页设计理论的对比准则

 
阅读更多

我们已经学过了网页设计的对齐和重复准则,现在开始学习对比。

对比可以为页面增加变化、动感以及吸引眼球。同时也增加了网页的设计元素的区分度。重复准则细微地改变网页设计,对比则会造成很大的不同。

1.先看上次的网页

 

 

这是上次的网页,我们已经对齐了设计元素,也增加了诸如字体、色彩、线等重复元素,事实上,这个网页已经存在一些对比。

  • 标志部分和其他页面是鲜明的对比
  • 标题部分的字体和色彩同正文是对比
  • 导航栏链接的颜色及底部的细线和其他设计元素也是对比

现在我们要再增加一些对比,让网页设计更有戏剧性。

2.网页色彩的对比

网页设计元素的颜色是可以运用对比的一个重要的地方。

色彩方面,将网页导航栏链接颜色设计成粉色,使读者更容易区分。

大标题H1,网页的大标题是重要性仅次于logo的部分,包含着网页的重要信息,所以这里设计成绿色,同时调大字号,斜体和大写。这样很容易吸引访客的注意力。

 

 

3.为网页背景增加对比

可以运用对比将网页的不同部分区分开来。

网页底部:从原来的白底黑字变成了黑底白字,同时链接字体换成斜体风格,这既是对比,又是设计元素的一种重复。

网页头部:增加了一个灰色背景,使头部可以和网页的其他内容区分开来。而且在头部下面增加一条细线,更增加了网页的对比。

 

 

3.为网页导航栏增加对比

现在开始为网页导航栏增加一些对比。

和头部及尾部一样,为导航栏增加一些背景色。现在很容易看出网页是由四个部分组成的。

导航栏的背景选择了不同于头部和尾部的灰色,但即背景颜色相同,网页之间的空白还是可以很容易把它们区分出来。给导航栏的不同部分增加不同的背景,并且为网页增加悬停效果,这样整个网页设计有了更多的对比。

 

 

4.为网页特定部分增加对比

网页通常都有一定目的性,有时候要为一些特定的内容使用对比。

假设这个网页是为了引导访客购买某产品,这里会有一个购买按钮。

这个按钮包含了诸如圆角、阴影、边框等效果,可以很容易和网页的其他内容区分。色彩上再次运用重复的准则,使用了和导航栏链接相同的颜色。

 

 

现在眯起眼睛看网页,按钮部分和网页其他内容的对比如此鲜明,以至于你很难不去注意到它。

5.总结

对比让网页内容有主次之分,区分网页的不同内容。同时也增加了网页设计的戏剧性。

上面大都运用了颜色对比,不过这里还有其他设计元素可以运用:

  • 颜色对比
  • 形状对比
  • 大小对比
  • 字体对比
  • 纹理对比

现在浏览网页时,注意看其他网页设计师是如何运用对比,运用了哪几种对比。

不同对比的效果是不同的,颜色对比往往比形状对比效果要鲜明。12px的字至少要14px的字才能形成对比。

分享到:
评论

相关推荐

    参考资料-工程勘察设计单位组织业余设计有关问题的规定.zip

    1. **业余设计的定义**:业余设计是指工程勘察设计单位的专业技术人员在工作之余,利用自己的专业知识和技术,进行的非本职工作的设计活动。这种活动通常是个人兴趣或自愿参与的,可能涉及到创新项目、个人研究或...

    毕业设计:Java毕业设计(业余草微信公众号).zip

    毕业设计:Java毕业设计(业余草微信公众号)

    业余无线电通信(第五版).pdf

    它涵盖了业余无线电通信的各个方面,从历史背景到现代技术应用,从理论知识到实践经验,为爱好者提供了全面而深入的学习材料。无论是初学者还是有一定基础的爱好者,都能从中获得有价值的信息和灵感,激发探索无线电...

    网页设计与制作-1期 前言.pdf

    在互联网时代,网站是信息传播的重要平台,因此理解和掌握网页设计与制作技术对计算机相关专业的学生至关重要,无论他们是专业的网站设计师还是业余爱好者。 本教程的目的是引导初学者有效地学习网页设计,避免在...

    asp.net学生业余生活调查系统源码

    某大学信息学院05级信息专业学生业余生活调查,可以进行选择或自定义 (一)设计如下面的数据项和数据结构。 1、题目信息,包括的数据项有:编号,主题,票数。 2、选项信息,包括的数据项有:编号,选项编号,选项...

    NBA篮球个人网页

    【NBA篮球个人网页】是一个以NBA篮球为主题的个人网页设计作品,主要展示了制作者对篮球的热爱,并利用业余时间进行创作。这个网页设计涵盖了多种IT领域的知识点,包括前端开发技术、网页布局、数据获取与展示、用户...

    网页专业设计师自我鉴定.doc

    这些实际操作经验让我深入了解了网页设计的全过程,从需求分析到界面设计,再到前端开发和后台管理,我都积累了丰富的实战经验。 此外,我非常重视身体健康,积极参与体育锻炼,提高身体素质。同时,我也热衷于校园...

    计算机科学与技术专业专升本函授、业余人才培养方案.pdf

    在计算机科学与技术专业中,这可能涉及到操作系统、数据结构、算法设计、软件工程、网络技术、数据库原理等课程的教学安排,以及相关实验室实践、课程设计、毕业设计等环节。 根据上述分析,如果要生成该人才培养...

    业余电台操作证书四级考题答案

    【业余电台操作证书四级考题答案】涉及到的知识点主要包括: 1. **业余无线电台定义**:业余无线电台是业余无线电爱好者为了试验收发信设备、技术探讨、通信训练和比赛设立的电台,需要遵循相关法规和规定。 2. **...

    业余无线电考试A卷

    - **答案解析:**业余无线电台的操作人员需要具备一定的专业知识,遵守相关的法律法规,以确保通信的安全性和合法性。 #### 4. 考试认证 - **问题LK0020:**询问了“如何组织A、B类业余无线电证书的考试?” - [A...

    春天网页菜单 轻松制作各种样式的网页菜单

    在网页设计中,菜单是至关重要的元素之一,它引导用户...这个工具不仅适合专业设计师,也适合对网页设计有一定了解的业余爱好者。利用提供的各种功能,你可以轻松实现富有创意和实用性的网页菜单,提升网站的用户体验。

    最简单的业余超短波发信机和收信机.pdf

    下面我们将从基本原理到实现细节对业余超短波发信机和收信机进行详细介绍。 基本原理 超短波发信机和收信机的基本原理是基于电磁理论。电磁波是一种波长在1 mm到1 m之间的电磁波,它们可以被用来传输信息。在业余...

    450C业余段改制心得

    首先,450C的改制主要是为了将其工作频率调整到业余无线电频段,以便于合法、安全地进行通联和交流。在这个过程中,作者遇到了U高频率的干扰问题,这使得通信质量受到影响。通过草根老师和天狼老师的指导,以及与...

    自学网页设计与制作PPT学习教案.pptx

    网页设计与制作是一门针对计算机网络技术及相关专业的专业必修课程,它在...总的来说,这门课程是网页设计初学者的全面指南,涵盖了从基础知识到实际操作的各个方面,旨在培养出具备专业技能和创新思维的网页设计师。

    HTML网站源码-蓝色专业企业响应式网页模板-适配移动端&PC端.zip

    此外,它还包含了丰富的JavaScript插件,可以实现各种复杂的交互效果。...总的来说,这套HTML源代码文件是一个高效、实用、易用的工具,无论你是专业的网页设计师,还是业余的编程爱好者,都值得拥有。

    网页设计实习总结.docx

    在网页设计实习的过程中,我深入体验了从理论到实践的转化,学习了许多实际工作中必不可少的技能。以下是我对实习期间所涉及的知识点的详细说明: 1. **工作流程与团队协作**: - 在网页设计中,通常以小组形式...

    学生业余生活调查系统源码

    大学信息学院05级信息专业学生业余生活调查,可以进行选择或自定义 (一)设计如下面的数据项和数据结构。 1、题目信息,包括的数据项有:编号,主题,票数。 2、选项信息,包括的数据项有:编号,选项编号,选项...

    业余无线电手册 中文版 part4

    它不仅介绍了什么是业余无线电活动及业余无线电活动的内容,还从理论知识到实践指导,囊括了电子基础概念、元器件和电路模块、模拟和数字电路设计、故障检修技术、收发信操作技巧、无线电收发设备制作、天线设计等...

    业余无线电手册 中文版 part3

    它不仅介绍了什么是业余无线电活动及业余无线电活动的内容,还从理论知识到实践指导,囊括了电子基础概念、元器件和电路模块、模拟和数字电路设计、故障检修技术、收发信操作技巧、无线电收发设备制作、天线设计等...

Global site tag (gtag.js) - Google Analytics