572PX 网站设计应该敏感的高度 ——电商Central Banner交互技巧

joanna.su

首先我们还是普及一下一屏的概念
就是指网站呈现给访客的电脑屏幕中的，且不需要访客做任何下拉滚屏操作的显示区域。

为什么要在乎一屏呢？
设计效果是需要媒介来呈现的。画布有多大，怎么构图怎么布局，怎么才能提供观者第一时间最准确的诉求。而对于WEB目前主流的呈现媒介还是显示器。较多数访客在第一次访问一个新的网站的时候，一般不会停留很长的时间，对于电商更是，怎么处理我们第一屏的视觉焦点Central Banner，不只是视觉设计的功课。从网站构建的之初就应该去考虑，去把控，去执行。

第一屏显示区域到底有多大？
目前显示器的分辨率越来越多，网站只有一个，怎么才能最大程度的满足较多的访客，给其叫好的体验呢？

先看一下的数据，2011年Internet 用户屏幕分辨率实时统计报告：


一般情况下我们以占有比率最多的显示器分辨率为参考，以向下兼容的原则，高度在768像素。在768像素的高度基础上，还需要减去浏览器的界面高度和系统任务管理器的高度。

下图以界面所占最大的火狐浏览器和win7的任务管理器为例：

图中可看出，第一屏的大众高度差不多是572PX*,所以产品经理、交互设计们在自己可控的Central Banner的高度一定要控制好（包括专辑页面的头图），以572px为参考，尽量把重要内容放到572px高度以内。让那些嚷着“再大点，再大点，大点才大牌”的声音见鬼去吧。

案例分享

Gap.com

截图为Gap 572PX 所显示的内容，左边的Central Banner形象看不全，完全没有30%off的诉求来的清楚。

优衣库天猫商城

截图为优衣库572PX 所显示的内容， Central Banner红色视觉冲击到时蛮强烈的，但是最有利的70%off的利器完全看不见。（ps：各大品牌都在入住天猫，设计布局的时候要记得572px-50px(天猫的鼎通高度））
完整的是这样的，运营的同学遇到这样的伤不起啊，访客没准也错过……

卧看云起

面向用户

静远

1# joanna.su 对于我这种跟着感觉走的技术白痴，刚才还百度了一下分辨率和像素的关系，，像我这样的交互设计师是不是很奇葩？哈哈，所以我觉的这个帖子对我来说绝对是学习帖！赞一个哈～