572PX 网站设计应该敏感的高度 ——电商Central Banner交互技巧
首先我们还是普及一下一屏的概念就是指网站呈现给访客的电脑屏幕中的，且不需要访客做任何下拉滚屏操作的显示区域。
为什么要在乎一屏呢？
设计效果是需要媒介来呈现的。画布有多大，怎么构图怎么布局，怎么才能提供观者第一时间最准确的诉求。而对于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 对于我这种跟着感觉走的技术白痴，刚才还百度了一下分辨率和像素的关系，，像我这样的交互设计师是不是很奇葩？哈哈，所以我觉的这个帖子对我来说绝对是学习帖！赞一个哈～
页:
[1]