早期做APP产品时涉及功能较多,而运营型内容较少,基本内容都是一屏可认知的情况,没怎么考虑过对于用户的整体视觉感受而言,是否能够意识到网页/页面区域还有更多内容的理解方式。
最近在做的一个项目,需要对重点内容着重展示,占屏幕整个区域80%以上,这样就很容易导致用户看完页面后,下意识认为,当前页面已经没有内容了而选择关闭,无法向下继续浏览。
这里用flickr新版本举个例子,就能够清晰阐述这个问题
如果你在浏览器中第一屏看到如下的内容显示,是否很容易意识到页面下方还有内容?

正常情况flickr是如何处理的呢?

注意图片底部红线圈出的部分,这部分是不管屏幕多大,或者多小(当然有一个最小值)都会显示出来,用户就会明显的意识到下方还有正文内容。
追溯整理一下,让用户意识到首屏下方还有内容的的主要方法有四种。
1.制造首屏视觉上的缺失感(让用户感觉第一屏内容还没显示完)。有没有感觉苹果电脑的照片没显示完?

2.让第二屏中的部分内容在第一屏中突出显示,让用户意识到还有第二个模块(如上方flickr案例)
3.强指引,在不影响整体视觉的地方给一个明显“箭头”之类指引视觉符。箭头弱弱的闪效果更好…

4.弱指引,一般在屏幕右侧 用相对进度点来表达(iphone 这个页面每次滑动都使用全屏,所以必要的指引很重要,但绝对不能抢主体内容,当然这个方式还有一个优点,就是能提前告知用户到底还有多少内容,比如下图中iPhone 5C 还有2页)

看到或者想到更多想法再来补充~!
网友评论