因特网, 网页设计
标准尺寸的网站:特点,要求和建议
网站技术开发 - 一个非常多面的过程。 然而它的所有阶段可以分为两个主要部件 - 的功能和外护套。 或者,如在介质网站管理员分别求结束和前端。 谁在web开发工作室买了他们的网站,人们往往天真地认为,有必要只注重功能性,这将是一个正确的决定。 但是,这是一个非常,非常罕见的情况属实,通常在beta测试阶段的项目,初创企业。 平面设计和用户界面的其余部分只是有义务遵守Web开发标准和舒适。
面向界面设计师,或设计者第一基石 - 是网站布局的宽度。 毕竟,这是必要提请接口她。 直觉上有两种方法 - 要么做出单独的布局每一个流行的屏幕分辨率,也可以为所有地图创建站点的一个版本。 这两个选项是错误的,但首要的事情。
在你永远需要的部位像素标准宽度
在此之前的适应性布局质量的现象的发展一直是一个网站的发展与成千上万个像素宽的。 这个数字被选定为一个简单的原因 - 该网站被放置在任何屏幕上。 并有一定的逻辑关系,但是让我们假设一个人仍然是在桌面上至少HD显示器。 在这种情况下,你的布局会显得细小条在屏幕上,这里的一切都在一个桩成型的中间,并在巨大的非空间的两侧。 现在让我们假设一个人从在宽度800个像素的屏幕平板来到你的网站,并在设置检查“显示网站的完整版。” 在这种情况下,您的网站也将显示不正确,因为根本不适合在屏幕上。
从这些方面考虑,我们可以得出结论,对于布局的固定宽度,我们只是不适合,你想找到另一种方式。 让我们来分析每个屏幕宽度的独立构思布局。
布局于各种场合
如果您选择的策略为所有屏幕尺寸在市场上创造的布局,那么你的网站将是最独特的互联网。 毕竟,今天这是根本不可能覆盖设备的整个范围,企图使每个选项的具体设置。 但是,如果你专注于最流行的显示器分辨率和屏幕设备,这个想法是很好的。 它唯一的缺点 - 财务费用。 毕竟,当设计师界面设计师和编码器将被迫5或6次,以完成同样的工作,该项目将花费不成比例原本种植以预算价格。
因此夸版本不同屏幕的丰富的可除了网站,odnostranichniki其目的 - 卖一个产品,一定把它做好。 好吧,如果你不是那些登陆之一,多站点,它突出的另一个原因。
网站最流行的尺寸
在两个极端之间的妥协是布局的三个或四个绘图 屏幕尺寸。 其中一个必须是用于移动设备的布局。 其余的需要被改编为小型,中型和大型的桌面屏幕。 如何选择网站的宽度是多少? 下面我们提供服务未经登记HotLog统计五月2017年,它向我们展示了设备的不同屏幕分辨率的普及的分布,以及在这一指标变化的动态。
从表中可以了解如何确定要使用该网站的大小。 此外,可以得出结论,最常见的是当今×768个像素的1366屏幕格式。 这些屏幕安装在预算的笔记本电脑,让他们的知名度是很自然的。 下一个最流行的是全高清显示器,这是电影,游戏的黄金标准,并因此创建站点布局。 此外,在我们看到表允许移动设备360°×640像素,以及桌面的各种实施方式和移动屏幕之后。
设计布局
所以,分析统计后,我们可以得出结论,该网站的最佳宽度有4个变化:
- 版本的笔记本电脑,拥有1366个像素宽。
- 全高清版本。
- 800个像素的宽度尺寸布局在小型桌面监视器显示。
- 手机版的网站-宽360个像素。
假设我们决定要使用的源代码生成的尺寸为网站的内容。 但是,这样的项目将仍然是昂贵的。 因此,考虑更多的选择,这时候不使用固定的宽度。
做一个灵活的布局
目前,我们只需要调整屏幕的最小尺寸的另一种方法,以及网站的庞大规模会问个百分点。 在这种情况下,接口元件,如菜单,按钮和标志,可以在绝对项中定义,着眼于以像素为单位的屏幕宽度的最小尺寸。 与内容块,与此相反,将按照每屏幕区域的宽度的百分之指定拉伸。 这种方法允许检测不到该网站的大小作为设计师,打这个细微的人才制约。
什么是黄金比例,以及如何使用网页的布局?
即使是在文艺复兴时期的许多建筑师和艺术家试图给他的创作完美的形状和比例。 若有关于这样的比例的影响问题,他们把所有科学的皇后 - 数学。
自从古代的天由我们的眼睛感知是最自然而优雅,是因为它在自然界中普遍存在的比例发明的。 这一比例的计算公式的发现者是一个叫做菲迪亚斯一个有才华的希腊建筑师。 据计算,如果大部分比例的涉及低作为一个整体提供了一个更大的,那么这一比例将看起来很好。 但在这种情况下,如果你要非对称分裂的对象。 这个比例后来成为所谓的黄金比例,这仍然没有高估世界文化史上的重要性。
让我们回到网页设计
这很简单 - 用黄金比例,可以设计,这将是最令人愉快的人眼的页面。 根据黄金分割的公式计算,我们发现 无理数 1.6180339887 ......,但为了方便,你可以使用的1.62舍入值。 这将意味着我们的页面区块应该是62%,而整体的38%,无论什么规模生成的源代码,您正在使用该网站。 例如,你可以在以下方案请参见:
新技术的使用
现代科技布局的网站让您准确传达设计师和设计师的想法,所以现在你能负担得起的比在互联网技术的黎明更大胆的想法实现。 不再需要太多的困惑在什么应该是一个网站的规模。 随着这样的事情块来临 自适应布局, 内容和字体动态加载,网站开发已经成为很多次更愉快。 毕竟,这些技术有限制少,即使它们。 但你也知道,但不限于,就没有艺术。 我们建议您使用一个真正的创意的方法来设计-黄金分割。 有了它,你将能够有效并很好地填补了工作空间,无论你在你的模板问什么大小或网站。
如何提高工作区网站
机会是,你不会有足够的空间,以适应小尺寸的布局中的所有界面元素。 在这种情况下,你将不得不开始创造性地思考,或比你以前那样更具创造性。
该网站上尽可能最大的自由空间,躲藏在弹出的菜单导航。 这种做法是符合逻辑的,不仅移动,而且在桌面上使用。 毕竟,用户并不需要所有的时间来看看什么对你的网站的标题 - 它已经到来的内容。 用户希望得到尊重。
的隐藏菜单的好方法的一个例子是下面的布局(如下图所示)。
在上 红色的角落 区域,可以看到一个十字架,点击了一个小图标隐藏菜单上,只留下用户与网站内容。
然而,这是可选的,你可以离开导航,始终是遥遥无期。 但是,你可以把它美丽的设计元素,而不仅仅是一个对流行网站的链接列表。 使用除了直观的图标,以文字链接,甚至取而代之。 它也可以让你的网站添加到您的设备上更有效地利用屏幕空间。
最佳网站 - 自适应
如果你不知道该选哪一个为网站的布局,只为你所有。 为了节省开发成本,同时不会失去,因为糟糕的布局对一些设备的观众,使用自适应网页设计。
自适应称为设计,看起来在不同设备上同样出色。 这种方法可以让你的网站是清晰,便于甚至一台笔记本电脑,至少在平板电脑上,甚至在智能手机上。 它实现了这一效果是由于自动切换到屏幕宽度的工作区域。 采用自适应样式表的网站,你正在服用了正确的决定可能。
什么不同版本的网站的可用性的自适应设计区别
响应式设计是从移动站点,以便在后一种情况下,用户收到一个HTML代码,它是从桌面不同不同。 这是从视图优化服务器的性能,以及搜索引擎优化的角度是不利的。 此外,越难以根据不同版本的网站要考虑的统计数据。 自适应方法是缺乏的缺点。
适应性不同的设备由于通过在可用空间的传输块的布局宽度或百分比(在垂直平面内,而不是在桌面上,水平智能电话),或通过创建各种画面的各个布局实现。
您可以了解更多关于响应式设计,并从书本发展就可以了。
Similar articles
Trending Now