详细解析网页全屏设计的心得技巧发布者：本站     时间：2021-12-23 11:12:12

晋小彦：时代在变规则也在变，网页设计师刚入行的时候都会被告知信息内容需要摆放在800或1000的宽度以内，但是今天不论在网络速度还是硬件、显示屏都有了不同程度的更。面对伴随而来的多终端显示。如何让我们的网页有一个良好的第一视觉?如何让各类的用户特别是宽屏的用户在自己的显示器上看到完整的视觉盛宴?而非仅停留于1000宽度的切糕网页。我们需要全屏大视野。那么，全屏画幅和自适应的信息设计成为了关键。

说说——不做1000 小切糕还给宽屏大视野

详细解析网页全屏设计的心得技巧,PS教程,

详细解析网页全屏设计的心得技巧,PS教程,

大家应该都会有这样的经历，在我们入行网页设计时首先会被告知的潜规则就是，页面的内容一定要设计在1000(1000～1004)的宽度以内，这个规则并没有错误，特别是在过去的几年中。不过随着硬件和网络的发展，网页显示的终端也在发生着快速的变化，从宽屏到超宽屏，从手机到IPAD。如果网页设计固守着1000宽度的话，也就相当于放弃其它终端用户的视觉美感。

所以多终端响应式全屏设计成为必然的趋势，当然或许这对您也许并不陌生。

详细解析网页全屏设计的心得技巧,PS教程,

如果我们翻阅08年之前的页面就会发现过去些年网页设计的特点。从缩略图中就可以发现，当年的页面通常将内容设置在800或1000宽度以内，背景则选择纯底或渐变或纹理平铺。而今天如果用大屏显示器来浏览这类型的页面，就会发现，它们如同一块中央切糕。当然我们是可以完整的浏览页面的全部内容，但1000的设计在宽屏用户看来却略显局促。

详细解析网页全屏设计的心得技巧,PS教程,

(那些年我们做过的切糕)

当然近两年，许多网站在头部的视觉设计上也打通了1000围墙，不过大部分的内容设计还是保留在1000宽度以内的，穿越围墙怎么说也是件冒险的事，一方面有技术的局限性，比如不同浏览器的兼容，另一方面，经验总是说服自己偷懒的最冠冕堂皇的理由。

全屏时代

详细解析网页全屏设计的心得技巧,PS教程,

宽屏的展示效果更加开阔丰满，充分利用了1000以外的标准空间，你是否有所心动，但如果你为用户感到不安的话，我们可以看看下面这个分辨率比例图。这虽然是某款产品的用户比率，但可以看到一些普遍性的问题。

屏幕分辨率

详细解析网页全屏设计的心得技巧,PS教程,

详细解析网页全屏设计的心得技巧,PS教程,

(2012年12月 2013年7月)

上图分别是2012年12月 和2013年7月BNS游戏用户屏幕分辨率调查报告，从上图可以发现，1024用户仅占的比例呈下滑的趋式，仅七个月时间1024的分辨率从16%降至了10%。1366和1440的笔记本用户还是占着相对的多数，超大屏的1920宽度用户也在逐渐上升。从2013年7月的数据来看，针对BNS游戏用户来说(由于剑灵是高配置游戏，所以在同类产品中用户的屏幕分辨率较高，不同的产品有不同的分辨率数值比，大家可以根据自己的用户比例来决定网页的最小宽度)，网页设计师是可以将网页的最小范围拓宽至1280，让1280以上的用户的拥有最优预览效果，另外也保证1024的用户能够完整的看完信息(完整的看完信息包括通过交互触发或者鼠标的滚动进行配合浏览，但浏览效果可能相对次于1280以上的用户。)

详细解析网页全屏设计的心得技巧,PS教程,

是时候让屏幕超过1024的用户享受到更大视野的设计。不论是想让你的产品信息看起来更舒适，还是想让你的产品看起来更上流并贴近时代。我想你也不忍心放弃这样的变革。

详细解析网页全屏设计的心得技巧,PS教程,

想想——大图平铺、中心定位、单侧定位、全屏响应

详细解析网页全屏设计的心得技巧,PS教程,

1，大图平铺自适应

详细解析网页全屏设计的心得技巧,PS教程,

这是一种给用户感受最强烈的大背景全屏视觉，整个视觉主打一张完整图片，交互和文字信息较为简单。图片尺寸根据屏宽大小自适应，交互菜单和文字信息通常默认系统字体通过大小变换和位移进行屏宽自适应。

2，中心定位，两侧自适应

详细解析网页全屏设计的心得技巧,PS教程,

将主要内容和视觉居中安放在1000的尺寸以内，左右两侧安放次要的菜单按钮或辅助信息，让它根据屏幕的宽度自适应，这个方法要注意的是，一是不要将核心内容安放两侧，以免被忽视。二延展区域尽量减少干扰或在延展收缩过程中产生信息重叠。

3，单侧定位，中心延展

详细解析网页全屏设计的心得技巧,PS教程,

主要的信息内容居一侧对齐(左侧或右侧都可以，中国人一般习惯从左阅读所以我们通常选择左侧为主侧)，次要的辅助视觉居另外一侧。文字信息选择系统默认字体，并根据屏幕自适应。为视觉内容留有一定的空间达到装饰效果。

4，小切糕全屏响应式

详细解析网页全屏设计的心得技巧,PS教程,

小切糕响应行业俗称瀑布流设计，是根据屏幕宽度进行计算，通常在设计时会有一个基础最小切糕，然后以2倍、3倍、4倍的方式进行拓展，并计算出最合适完整的组合。通常用在图片信息的展示页面。

1000以外是更上流的空间，不要在过去的潜规则中无法自拔，不要让经验画地为牢，开垦新良田吧!

看看——硬件已迈步，视觉怎好原地滞留

详细解析网页全屏设计的心得技巧,PS教程,

1，大图平铺自适应

对于大图平铺自适应，图片质量是关键，它将影响着整体的视觉质量。其次，是内容与图片的协调，尽量让它们不会互相干扰，处理方式一般分为两个类型，一个是对背景的处理，一个是对文字的处理。背景方面，会配合文字所处的位置进行局部模糊，纹理色彩弱化、单色化等处理。文字方面有时会选择覆盖底色，或半透明底色等方式进行突出，拉开与背景的视觉差距。

详细解析网页全屏设计的心得技巧,PS教程,

图片质量高，文字选择随字形的方形块面填充突出信息，表现干脆利落。图片尺寸随背景大小自适应，文字使用系统默认字体。在自适应的过程中便于定位和程序操控。

2，中心定位，两侧自适应

中心定位是一种假全屏的视觉效果，适合于文字信息较少的视觉型页，而这部分的视觉并不使用全画幅的照片或插画，而是通过一定的排烈组合形成的主视觉。主画面集中在1000以内，左右带一定的延展性。整体不切糕，形成视觉上的假全屏。上下信息主要以导航、LOGO等内容为主，通过欣赏下面几张网页，我们看看有什么讨巧的办法实现假全屏的视觉效果。

详细解析网页全屏设计的心得技巧,PS教程,

这个页面蓝色的大背景与橙色的小点缀搭配，色彩鲜丽。中心向四周的太阳型的视觉，使我们感受到了视觉的延伸。这是一种讨巧的假全屏的方法，上下两侧的信息是按最大画幅定位的，整体页面开阔，自适应舒展性自然。

详细解析网页全屏设计的心得技巧,PS教程,

两侧的切换按钮是让中心视觉延伸为假全屏的好办法。

3，单侧定位，中心延展

单侧定位，适合于资料较多的全屏页。在单侧定位的1000宽度内首要保证文字信息的呈现，其次是配合的视觉图片。视觉图可以使用延展型，这样保证整个画面不切糕。

详细解析网页全屏设计的心得技巧,PS教程,

左对齐的设计如杂志一般的具有节奏感，轮播位置撑开了最大画幅，并动过向右的轮播滚动条浏览超过当前显示器宽度的信息。

详细解析网页全屏设计的心得技巧,PS教程,

详细解析网页全屏设计的心得技巧,PS教程,

我们可以看到在单侧定位的全屏设计中，内容信息永远是需要首要保证在最小画幅内呈现的，图片和背景只是以辅助的形式以自适应的方式存在。

4，小切糕全屏响应式

小切糕全屏响应式设计适合以小图片展式为主的信息，或图文信息。信息之间的关系属于并列的，信息量级接近的，信息数量较多的。小切糕的方式可以支持实时更新的动态数据。切糕图片的大小有其规律，它们通常有一个单位面积，并以通常一倍、两倍、四倍这样的翻倍方式进行拓展，这样在形式结够上可以更加完美无缺。