网页设计与制作教程第三版杨选辉答案PDF-教程 | 实用信息！ 如何在网页设计中使用盒子/方形元素？

我经常听到专家说，设计不需要是方形的，否则会显得死板，没有创意。 低……等一下，事实并非如此。 我认为每个元素都需要在正确的环境中使用。 相信一定会有耳目一新的效果。

网页中方框的作用

1. 分裂

我们所知道的分割元素主要是线和面。 事实上，方块/盒子也有分割的功能。 如果用于设计，您的作品将是独一无二的。

下面的设计工作中有很多文案信息。 如此多的信息集中在一个屏幕上。 如何让它们更加有序？

为了让用户能够清晰地阅读每一条文案信息，设计师加入了盒子元素，并利用大小对比，有效避免内容冲突和混乱。

这里的设计添加了一个方框元素，让图片中的文字得到一定的强调。

本设计也有同样的处理方法

2. 强调

如何让文字内容在众多元素中脱颖而出。 要么削弱别人，要么强化自己。 显然，在接下来的设计中，为了让用户第一眼就能看到所表达的文字信息，设计者使用了盒子的元素来突出显示。

下面的海报设计也利用了盒子元素来聚焦用户的视觉焦点。 它在强调重要信息的同时又不失画面的美感和创意。

3.修改

当我们设计一张海报或者网站页面上的一段文字时，有时图片太单薄，有的设计师会用其他方法来修改，但有的设计师也会用盒子，不一定是完整的盒子。 ，这样整个画面就会是独一无二的。

下面是一组平面VI作品。 原本是一张普通的名片，但设计师添加了盒子的一角进行修饰，作品瞬间变得创意十足。

下面的网页设计中，原来的标题在中间大面积留白的情况下变细了，导致页面中心不稳定。 因此，设计者在标题中添加了一个box元素进行辅助修饰，有效丰富了标题。 结果显示。

4、色块对比让版面更加有血有肉

设计师利用方形色块使网站活泼、新颖，使网站的布局有节奏、主次分明、逻辑清晰。

下面是一个家具网站。 设计师利用方块的大小来进行比较。 使得整个画面中间的元素组织得清晰有序，给用户视觉上的层次感，让整个布局简洁明了。

下面的建筑公司主页采用了方形元素ip形象，将大大小小的层次组合在一起，使得整个画面极其稳定，也让原本网站上复杂繁杂的类别变得清晰、干净、简洁。 同时表情包设计，画面的布局也独特、创新。

五、信息引导作用

在复杂而众多的海报或网站结构中，利用方框来引导信息是一种非常有效且新颖的表达方式。

下面这个网站是左边一位男模特的网站。 整个横幅是红色的。 为了让用户能够快速向下浏览，设计师大胆添加了红色方框，有效地从上方引导用户的视线。 同时浏览网页设计与制作教程第三版杨选辉答案PDF，整个屏幕不会显得头重脚轻。

右边是阿迪达斯的品牌网站。 设计师使用方形元素作为视觉引导，引导用户的视觉一步步了解他们的所有产品。

下面是一组时尚海报设计。 在这里，文本是使用方尺引导和输入的，让用户能够有序地阅读。

6. 使单词相互关联

这种处理方式对于海报的图像会有更高的要求。 如果海报杂乱，文案的辨识度就会降低。 为了解决这些问题，设计师选择了盒子的元素，用盒子来传达文案信息。 又相关了。

对于接下来的海报设计，如果一个正常的设计师遵循文案的方法，他一定会根据文案信息和海报结构进行去中心化的布局设计。

下面的海报设计也采用了盒子的元素来连接和组织文案信息。 通过更改框的大小，可以突出显示复制信息的优先级。 给用户带来舒适的视觉体验，画面令人难忘。

如果我们在设计中充分利用以上的表现方式，相信我们的设计一定会脱颖而出。 因此，设计出优秀的作品并不难。 难的是发现优秀作品的规律。当然还有很多值得发现的点

方框在网页中的应用

1.网页部分

方框和方形元素经常用于网页的主要部分。 它们可以有效地使网页中的元素更加清晰。 那么我们就来看看下面的一些案例如何巧妙的使用盒子吧。

下面是一个旅游网页。 整个网站使用了大面积的方形元素。 利用这些方块的大小以及改变长宽比来错开布局，使得整个网页信息分类清晰，充满节奏感。

一些商城网站还融入了方形元素，有效管理和整合各种产品信息，也方便网站适应不同端口设备的展示。

2.btn按钮、搜索、表单等

网页上常见的按钮，其实这几年流行的幽灵按钮（透明按钮）大量借鉴了方形元素。 当然，实心按钮也使用方形元素。

下面整个网页都是明亮清新的基调，除了渐变的背景，那就是内容了。 高饱和度的蓝色背景上点缀着的世界地图作为纹理点缀，不至于显得单调。

不同大小的内容左对齐。 下面设计师利用frame元素在按钮上设计了一个幽灵按钮，让整个文字内容更加透明。

该网站使用视频作为背景，以便访问者可以通过不断变化的背景了解组织的工作流程。 颜色调整后的背景视频不影响前景标志。 设计师利用框架元素设计了幽灵按钮，让整个网站显得灵动、优雅。

以下是网站上的指南。 它使用带有文本的浅灰色背景和一定量的空白。 整个画面显得干净、优雅。 设计师在这里使用方形元素设计了实体按钮，引导用户进入新页面。

下面的网站使用方形/盒子元素来设计表单和搜索框部分。 表格部分使原本复杂且相互干扰的文案信息变得清晰简洁。 搜索框部分进行视觉增强，引导用户进入网站搜索、获取内容。

3.图片

如今，越来越多的盒子/方形元素出现在网站图像中。

以下案例是一个图文结合的标准设计案例。 为了实现图片左右两侧与文案的视觉平衡，设计师添加了方框/正方形元素与图片结合。 刹那间，整个画面变得富有设计感。

下面的案例图中，为了统一和协调多张图片，设计师还添加了盒子元素，向用户传达三块内容之间的系统关系，让原本素雅的画面变得丰富多彩。

如何简单地让角色在平面上呈现三维效果？ 下面的案例中，设计师利用框架元素，与人物结合，让原本没有空间感的头重脚轻的男人变得稳定而有层次感，同时也抓住了用户的视觉。 制作一个原本简单的页面创意。

4. 文字

复杂的文案布局是否单调、过于平淡、没有层次感？ 那么我们来看看盒子/方块是如何解决这些问题的。

下面这个案例，设计师在设计排版这个文案的时候，如果素材有限，图片无法放置，如何才能让其设计丰富、左右平衡呢？ 于是设计师将左侧的文字与盒子元素结合起来，轻松解决了这个问题。

在下面的案例中，设计师如何巧妙地利用方形元素来连接Banner和内容呢？ 本应放置在横幅上的文字被放置在方形色块上，不仅突破了传统的布局结构，而且引导用户从上到下阅读信息。

在下面的例子中，横幅中的文案只有一句话网页设计与制作教程第三版杨选辉答案PDF，并且与其他产品配对。 设计师利用盒子元素，将分散的文字变成一个整体，让瓶子搁在文字上，给人一种更安全、更稳定的感觉。

在下面的例子中，设计师使用盒子元素将图形与文本结合起来，以增强整个文本的密度和对比度。 即使没有图片，也能瞬间增强整个图片的创意。

5.VI标志

如果将正方形和长方体元素组合在一个 VI 中不是很有趣吗？

以下是1+手机的logo。 通过结合部分盒子，两侧的线条将用户的视线引导至+图形。 即使不了解该品牌的用户也能快速阅读并理解这是1+（个人观点）。

整个画面，大量的留白以及从左上到右下的视觉规律，让画面简约而不简单。

网页中方框的类别

1、盒子之间的组合

框/框的组合一般用在复杂、众多的文案内容中间，起到相互关联的作用，使彼此更加紧密。

2、正方形与盒子的结合

这种方法已经流行起来。 其主要作用是修饰过于单调的物体，丰富画面美感，平衡左右关系。 方框和方块通常附有图片或文字。

3.用于标签部分

表单按钮之类的例子我就不举例了，大家都知道。

4.大方块和盒子

大方框/正方形主要用于海报，或网页和其他信息内容的结构。 主要作用是在画面中起到协调、强调、区分等目的。

5. 不完整的方块和方框

此类元素往往与文案结合展示，主要是利用方框的线条将用户的视觉中心引导至作者想要表达的内容。

-结尾-

今天的话题

你更喜欢 UI 还是扁平化？

（下面评论区一起战斗吧）

伊莫德克