理念处方笺04：设计，无边界
时间：2023-09-17 12:06:01 | 来源：网站运营
时间：2023-09-17 12:06:01 来源：网站运营
理念处方笺04：设计，无边界：
产品经理：“超大屏的1920分辨率宽度用户在逐渐上长，是时候消除设计边界，让网站拥有更大视野的设计了。”
设计师：“但当前主流页面通常将内容设置在1000像素宽度以内，这是规则啊！”
UI新手在刚入行时首先会被告知的潜规则就是，页面内容一定要设计在800或1000像素宽度以内，这个规则并没有错误。但近几年，随着硬件和网络的发展，网页显示的终端设备也在发生着快速的变化，移动端从方寸指间的手机到单手难持的iPad Pro，电脑端从宽屏到超宽屏。如果网页设计仍固守着1000像素宽度的话，也就相当于放弃其它终端用户的视觉美感。所以，宽屏大视野作为未来的一种趋势是毋庸置疑的。
现代生活节奏的加快让我们进入了读图时代，长篇累牍的文字让人厌倦，需要图片不断刺激我们的眼球，于是各种各样的图铺天盖地地一般呈现在眼前。借鉴杂志的版式设计，网页也开始使用高质量的、高精度的图片，能快速抓住人们的眼球，形成强大的视觉冲击力，自然也为用户创造生动的沉浸式体验。这种从杂志排版衍生出的宽屏大视野给我展示了简约却有力的强视觉，开拓了设计思路，下面结合我自己的网站项目来具体分析。
从视频网站的首页就可以发现，页面将标题栏、导航条、广告位、推荐内容等设置在1000像素宽度以内，背景选择白底平铺，但在banner位的视觉设计上打通了1000像素围墙，充分延展了1000像素以外的标准空间，达到1920像素的宽屏。另外，banner位的至多五张页面内容轮播的导航，也让首页的展示效果更加开阔丰满。（见图8）
另外，为了让宽屏针对不同分辨率进行全画幅自适应，采取了大图平铺自适应的视觉模式，整个视觉主打一张大而精美的背景图，最明显的好处便是具备极强的视觉冲击力，尤其对于那些“情绪化用户”，可以有效地引导视线，更能为其创造一个身临其境的体验。另外，导航等内容设置虽被限定在1000像素宽度以内，但通过瀑布流的呈现方式，能同时满足大小屏用户的功能使用，达到视觉和信息的双丰收。最后，页面顶部的交互按钮和底部的可链接文字信息根据屏幕的宽度始终保持在1000像素以内，页面的纯底背景可以根据屏宽自适应，1920和1024像素视觉效果展示效果如图9所示。
在线咨询
