全网AI资源网站搭建

电脑端+手机端+微信端=数据同步管理

免费咨询热线:13114099110

文档介绍:优秀网站设计案例分享及分析网页设计又没有规律

发布时间:2023-11-10 10:04   浏览次数:次   作者:派坤优化

文档介绍:优秀网站设计案例分享与分析

网页设计没有规则

为什么我们的网页感觉有点不对劲? 之所以我们在那个水平上工作了很多年,而其他人却能在短时间内成长到一定的高度,是因为有一些设计师通过长期不断的学习、思考、动手实现了方法——处理中。 存在。

这篇文章可能会对您有所帮助。 它可能会让您对网页设计有更深入的了解。 它或许为你提供了一种有理有据、有理有据的在客户面前装B的方式。

那么我们首先来看一些案例

案例一

你在这张照片中看到了什么?

案例一分析

从上图中我们可以看出作者在制作这个网页时的严谨程度。 在他的页面中,图片两侧的白色部分将网页分为8个模块。 原始网页的宽度为,即每一张的宽度为200PX。 在这个过程中,中间部分(1200宽度)采用6点法。

那么什么是六十六分呢?

让我们重新开始,还原网页设计中最本质的东西。 其实这个网页并不复杂。 我们先把网页要传达的信息的原始骨架去掉。 因为6是一个非常神奇的数字,它可以被3和2整除。我们网页的显示面积通常是1200或960PX。 在此基础上除以6,就有多种选择。 我们可以将截面分为200、400、600,也可以分为160、320、480、960PX。 对应的布局分别为6、3、2、1。

同时,我们在这个页面了解到了更多

在左图中,你会发现元素在网页中的位置是如此的居中和对称。 看图就知道为什么这个元素在这个位置,而不是向左或者向右。很多童鞋其实就缺乏这种严谨性。

和这个

你可以感受一下这个网页右侧的网格是否像

当我第一次看到这个网站时

我对他的规则感到非常震惊

他太精确了,每个元素之间的距离正好是10的整数倍,第一屏的高度是570,标志的长度是190,乘以3。底栏文字的高度是严格减少到90像素,而顶部和底部之间的间距保持在40像素。 从这里我们可以看出:要制作一个网页,网页中的每个元素,它们的位置和大小都必须是相关的。

小切蛋糕全屏响应式

网页中的很多元素除了具有等比、等高、等宽等关系外,还可以具有倍数关系。

小全屏响应式设计,俗称瀑布流设计,是根据屏幕宽度来计算的。 通常设计时会有一个基本的最小截断,然后将其扩大1x、2x、3x、4x网站设计实例网站设计实例,计算出最大值。 适合完整组合

实际使用

从上到下,各个模块、各个版块的网页元素相对对称地划分到各个版块中,从不越界。 同时,如果模特服装图片的宽度不变,其高度分别为1倍、2倍、3倍、4倍,产生一种存在与不存在的假设关系。

这就是六点规则。 它使您的网页具有普通网页所不具备的完整性感。 同样的,我们再看下面两页。 我们放弃了传统的网格方法,而是改变了将网页分为6等分的分割线。

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。