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

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

 
阅读更多

 

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

 

1.先看业余的设计

在讲解之前让我们先看一个没有用到网页设计制作四个准则的页面,我们称之为业余设计。

在这个设计里面,各种信息被杂乱地放置在了一起。这是一个普通的网页布局,有头部、尾部,内容分为两个栏,但是各个栏目布置得很随意,没有目的性。文字是居中对齐的。整体看属业余水准。

 

 

2.应用对齐准则

在随后的教程中,我都将以本页面作为例子讲解,在改善这个网页的页面设计时,逐步将网页设计的四个基本准则对齐、重复、对比、相似运用进去。

让我们先应用对齐准则,将网页页面上的各个元素对齐起来。

 

 

看看现在的效果,虽然还谈不上是优秀的设计,但是对比之前没有对齐的页面感觉要好多了,这只是设计时简单运用对齐而已。

现在的页面看上去更加工整,有设计规划感,各个元素不像之前显得那么随意。

下图,我将网页对齐的地方用红线标示出来。

 

 

注意网页中,不仅仅是主要内容的文字对齐了,而且左边栏还和上面的logo部分对齐了。右边栏和尾部的导航栏也对齐了。

左边栏和logo并不是绝对对齐的,而是和logo图形里边的元素对齐,这是可以根据网页设计的具体需要进行安排。不应太拘泥。

头部的元素是水平顶部对齐的。所以这里将联系信息的文字对齐方式从原来的左对齐改成居中。

当然,进行网页设计时,可以为设计元素选择不一样的对齐方式,设计没有绝对的对或错。关键在于布置设计元素时要让它们看上去有规划感,如果可以做到这点,有时候对齐准则也是可以打破的。

3.标志Logo部分的对齐

让我们关注一下标志的对齐。

之前的设计

 

 

之后的设计

 

 

原来的logo里的文字没有经过太多的考虑,我将公司描述放在名字下面,这样不仅两个文字左对齐起来了,而且还和左边logo图形里的三条白线在水平上也对齐了,在视觉上就将它们联系起来了。

4.总结

现在再重新看看新的页面设计,经过简单对齐之后,是不是要比原来的设计专业的多了。

当然这还是一个未完成的设计,不过有对齐和没对齐的网页设计是有显著的不同的。对齐就是网页设计师从业余进阶到专业的一大利器!

现在浏览网页时,开始注意其他设计师是如何运用对齐的。在看到一些没有运用对齐的网页时,注意分析它们是偶然的还是有意打破规则,有时候有目的性的打破规则能够让页面显得有趣。

分享到:
评论

相关推荐

    形式感:网页视觉设计创意拓展与快速表现

    总之,《形式感:网页视觉设计创意拓展与快速表现》这本书全面讲解了网页设计的各个方面,无论是对于初学者还是经验丰富的设计师,都能从中汲取灵感,提升专业技能,创造出更具形式感和创新性的网页设计作品。...

    右对齐程序c代码程序代码有关显示时的对齐问题

    在C编程语言中,"右对齐"通常指的是在输出数据时,使数据在终端或控制台上按照指定的宽度向右对齐。这种对齐方式常用于格式化输出,使得输出的结果更加美观和易读。在给定的“对齐.cpp”文件中,很可能包含了实现这...

    3.2VC内存对齐准则共6页.pdf.zip

    在IT行业中,内存对齐是程序设计中一个重要的概念,特别是在使用C++或者C这样的低级别编程语言时。本文将详细解析"3.2VC内存对齐准则",这一主题通常与微软的Visual C++(VC)编译器相关,因为不同的编译器可能有...

    网页设计总结总结了个人的网页设计学习过程,和学到的基本东西

    在本篇文章中,我们将总结网页设计的基础知识点,从HTML基本标签到网页设计的基本概念。通过本篇文章,读者将了解网页设计的基本要素和设计技巧。 一、HTML基本标签 * 标题标签:~,表示6级标题,可以根据需要选择...

    cad字体对齐小插件

    在CAD软件中,字体对齐是一个关键功能,它允许设计师精确地控制文本在图形中的位置和方向,以确保设计文档的清晰度和专业性。"cad字体对齐小插件"正是为了提升这一操作的便捷性和效率而设计的。 这款插件名为"Dxdq...

    形式感+ —— 网页视觉设计创意拓展与快速表现 高清完整 pdf

    《形式感+——网页视觉设计创意拓展与快速表现》是一本深入探讨网页设计美学与实践技巧的专业书籍。这本书聚焦于如何通过创新的形式感提升网页设计的吸引力和用户体验,旨在帮助设计师们拓展思维,快速实现设计概念...

    PPT排版对齐技巧.rar

    在PPT设计中,排版对齐是提升整体视觉效果和专业感的关键步骤。本教程由"只为设计"提供,旨在教会用户如何有效地对齐PPT中的元素,从而创建出整洁且引人入胜的演示文稿。以下是关于PPT排版对齐技巧的详细解释: 1. ...

    学生dreamweaver网页设计作业成品-简单动漫网页设计

    学生dreamweaver网页设计作业成品,采用html+css布局,是学习网页设计不错的案例和源代码,希望对大家有所帮助 作品介绍 小黄人网页设计 5页 无js 带视频带音频 非常好看, 非常适合大学生网页设计大作业, 学生...

    使用text-align:justify实现两端对齐一例

    "使用text-align:justify实现两端对齐一例" 本文主要讲述了使用CSS属性text-align:justify实现两端对齐的方法,并讨论了不同浏览器对中文和英文的理解和处理方式。 一、text-align:justify的使用 text-align:...

    字节对齐访问 分析与理解

    字节对齐访问是计算机科学中一个重要概念,它关系到计算机系统的性能和稳定性。下面我们将对字节对齐访问的原因、作用及相关注意问题进行分析和举例说明。 一、什么是对齐访问? 字节对齐访问是指计算机系统对内存...

    网页设计考核方案和题库.zip

    网页设计是一门涵盖众多技术和艺术元素的学科,它涉及到网站的视觉呈现、用户体验以及功能实现。这份"网页设计考核方案和题库.zip"压缩包文件很可能是为了评估和测试学生或从业人员在网页设计领域的知识与技能所准备...

    美国视觉设计学院用书:完成设计(从理论到实践)

    《完成设计:从理论到实践》还特别强调了设计中的视觉原理,包括对比、重复、对齐和邻近性等,这些原理在实际设计中应用广泛,对于设计师来说至关重要。通过案例分析,读者可以看到专业设计师是如何运用这些原理来...

    网页规划与网页设计试题

    网页规划与设计是构建互联网内容的关键步骤,涵盖了从构思到实现的整个过程。在这个领域,基础知识至关重要,因为它们构成了创建高效、吸引人的网页的基础。以下是一些关于网页设计的重要知识点: 1. 网页类型:...

    Allegro两种自动对齐方法

    本话题主要聚焦于Allegro中的两种自动对齐方法,这对于提高设计效率和保持设计一致性至关重要。 一、基于Skill的自动对齐方法 1. Skill语言介绍:Skill是Cadence开发的一种脚本语言,用于扩展和定制Allegro的功能...

    photoshop网页设计艺术

    ### Photoshop网页设计艺术知识点概述 #### 一、Photoshop简介及其在网页设计中的地位 - **定义**:Adobe Photoshop是一款由Adobe Systems开发和发行的专业级图像处理软件,它以其强大的编辑与合成功能著称。 - **...

    潭州教育:3d Max中三种对齐工具.pdf

    在3D建模软件3ds Max中,对齐工具是非常基础但至关重要的功能,它们能够帮助用户精确地调整和定位模型元素。以下是关于3ds Max中三种主要对齐工具的详细说明: 一、锁轴缩放 锁轴缩放是一种通过调整对象大小来实现...

    allegro自动对齐工具 skill

    Allegro自动对齐工具Skill是Cadence公司的EDA(电子设计自动化)软件中的一款功能强大的工具,主要用于PCB(印刷电路板)设计中的层间对齐。在PCB设计过程中,层与层之间的精确对齐至关重要,它能确保信号的正确传输...

    商业网站设计对齐策略及应用

    在网页设计中,对齐是指页面元素与页面边缘、其他元素或网格系统的相对位置。对齐策略可以帮助创建有序、一致的视觉布局,使用户更容易理解和导航网站内容。良好的对齐可以使网站看起来专业且有组织,有助于提高用户...

    iOS UILabel文字对齐方式

    默认情况下,UILabel的文字通常是从左到右的左对齐。 1. **上对齐**:在iOS中,UILabel的顶部对齐意味着所有行的顶部保持在同一水平线上。要实现这个效果,开发者需要自定义UILabel或使用第三方库。因为系统默认的...

    字节对齐以及为什么要字节对齐

    1. **基本数据类型的对齐值**:不同数据类型有不同的对齐要求,例如,char型通常对齐到1字节,short型对齐到2字节,int和float对齐到4字节,double对齐到8字节。 2. **程序指定对齐值**:通过`#pragma pack(value)`...

Global site tag (gtag.js) - Google Analytics