Axure中文社区

WebPPD产品原型设计

 找回密码
 新用户注册
查看: 4469|回复: 3

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

[复制链接]

0

主题

31

帖子

103

积分

版主

苏格猫底

Rank: 7Rank: 7Rank: 7

积分
103

产品观察员

QQ
发表于 2012-8-14 16:29:48 | 显示全部楼层 |阅读模式
尹广磊公众帐号
首先我们还是普及一下一屏的概念
就是指网站呈现给访客的电脑屏幕中的,且不需要访客做任何下拉滚屏操作的显示区域。

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

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

先看一下的数据,2011年Internet 用户屏幕分辨率实时统计报告:
分辨率.jpg

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

下图以界面所占最大的火狐浏览器和win7的任务管理器为例:
最佳高度.jpg
图中可看出,第一屏的大众高度差不多是572PX*,所以产品经理、交互设计们在自己可控的Central Banner的高度一定要控制好(包括专辑页面的头图),以572px为参考,尽量把重要内容放到572px高度以内。让那些嚷着“再大点,再大点,大点才大牌”的声音见鬼去吧。

案例分享

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

优衣库天猫商城
YOUYIKU1.jpg
截图为优衣库572PX 所显示的内容, Central Banner红色视觉冲击到时蛮强烈的,但是最有利的70%off的利器完全看不见。(ps:各大品牌都在入住天猫,设计布局的时候要记得572px-50px(天猫的鼎通高度)
完整的是这样的,运营的同学遇到这样的伤不起啊,访客没准也错过……
YOUYIKU2.jpg
热心一片、可爱两钱、努力三分、聪明四味、搞怪六厘

0

主题

1

帖子

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2013-2-9 13:39:28 | 显示全部楼层
面向用户

8

主题

63

帖子

272

积分

会员

Rank: 5Rank: 5

积分
272

我是女生

QQ
发表于 2014-5-20 11:34:14 | 显示全部楼层
1# joanna.su 对于我这种跟着感觉走的技术白痴,刚才还百度了一下分辨率和像素的关系,,像我这样的交互设计师是不是很奇葩?哈哈,所以我觉的这个帖子对我来说绝对是学习帖!赞一个哈~
您需要登录后才可以回帖 登录 | 新用户注册

本版积分规则

QQ|手机版|友情链接|版权声明|关于我们|Axure中文社区

GMT+8, 2019-11-12 08:26

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表