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

从业余到专业:02网页设计理论的重复准则

 
阅读更多

 

从业余到专业:02网页设计理论的重复准则

 

上一篇文章讲述了网页设计的对齐准则,今天则开始分析重复准则。

运用重复准则,网页不会像对齐之后发生显著变化。重复可以在细节上提升网页的设计。

1.先看运用过对比的设计

这是上一篇运用完对比准则后的网页,但是网页整体上看还是平淡无味。各个设计元素通过对齐链接起来还不够,我们应该用重复准则增强它们的视觉联系。

 

 

2.为网页的标志部分应用重复

首先先回顾一下运用过对比的标志

 

 

下面开始运用重复来改善这部分的设计。

 

 

首先我们为公司名称和描述之间添加一条黑线,这里重复使用了logo图形的设计元素:白线。同样将公司名称轻微往左边移动,使位置排列得和logo的图形相呼应。

注意到网页header中间的联系信息以及右边的搜索框,调整它们的位置,使他们的中心和这条黑线水平对齐。

增加这条黑线目的在于,为后续的网页增加可运用重复的设计元素。

3.在网页上重复色彩和字体

现在增加一些重复的设计元素,效果如下图:

 

 

网页的内容部分,H2的标题都重复用了和logo相同的颜色,而且H2标题使用了新的字体,这个字体也很容易和H1标题字体区分开来。

网页左边的导航栏部分,导航链接都使用了相同的蓝色和相同的字体。导航栏标题的字体和H2字体是一样的,为了区分它们,导航栏标题颜色保留为黑色。

4.再为网页设计增加重复元素

让我们再增加一些重复的设计元素。

 

 

我们为每个H2标题下方添加一条粗黑线,同样黑线稍微向右移动一些,这样就变成logo部分设计元素的重复运用。

黑线在浏览网页起着视觉引导作用。一般而言,浏览网页会先看logo部分,随后视觉会落到页面上和logo有重复设计元素的内容上。

网页左边的导航栏,我们为每个连接下方增加细黑线,这里同样使用线这个设计元素,将网页内容在视觉上联系起来。

从心理学角度上讲,粗黑线可以传递一种稳重的感觉,蓝色可以给人信任、理性的感觉。

5.总结

观察对比运用重复之前和之后的图片,虽然网页没有像用对比一样起了显著的变化,但也使网页设计的感觉更好。

在设计网页时,思考哪些地方应该运用重复,以让网页的设计元素有一个视觉联系,通常网页标题部分是运用重复的地方。

但是注意网页不能过多运用重复,细微重复可以增加网页设计的整体感和规划感。

下一次我们在网页设计时,将运用对比准则。对比和对齐一样可以明显改善网页设计的整体效果。

分享到:
评论

相关推荐

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    业余无线电考试A卷

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

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

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

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

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

    450C业余段改制心得

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

    NBA篮球个人网页

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

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

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

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

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

    网页设计实习总结.docx

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

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

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

    业余无线电手册 中文版 part4

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

    业余无线电手册 中文版 part3

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

Global site tag (gtag.js) - Google Analytics