「后面还有更多内容」的暗示

May 08, 2015 / leiwaa

当展示的内容在一个屏中展示不完时,如何让用户感知到边界外还有内容?

直接告知

主动告知,在显示边界直接加上操作指示剪头或者类似「上滑显示更多内容」这样文字标签,简单粗暴,同时提示了交互方式与更多内容,这类一般在新手引导上出现较多。此外,省略号、链接「查看更多」和「展开全文」也可以看做是这种方式的变体,不同的是它同时也作为到达内容的入口。

这类方式共同的特点是通过一个专门的提示去主动告知用户。并且使用的时候一般是单层的,或者说临时的,偶尔提醒一下,不适合做连续的、嵌套的提示。

导航控件

相对与主动的告知,更多的是根据现有的内容导航系统来间接提示边界外存在内容。典型的如滚动条、分页指示器。具体的样式很丰富,传统的页码、上一页下一页、圆点,标签页、进度条、百分比,甚至是移动端常用的 Tabbar 等。与上面提到的方法不一样的是,一般通过这一类内容导航还能获知内容的长度。

滚动条 ScrollBar 是个伟大的发明,在对于感知内容,感知内容长度,内容导航,一直是一个非常直观有效的解决方式。之后很多其他的解决方式,都可以视为它的变体。而对于分页式的内容,大多数分页指示器都带有长度/数量信息,除了单纯的上一页下一页。除了滚动与分页,还有一个不是很常见的缩略导航,相对于 Scrollbar 使用「槽」与「滑块」,缩略图直接通过当前内容的缩略图与图上的位置标识来表明当前的状态,小地图。

Photoshop 中的 Navigator

暴露内容

大多现有的内容导航系统基于指代,对于轻量的内容来说,使用暴露内容或者配合使用暴露内容可能是一个更合适的方法。暴露内容的优势在于它非常的自然,整个感知过程是下意识的,没有刻意的告知,相对于第一种,这个感知过程几乎是透明的,不被察觉的。

暴露内容可能在美观程度上有一定的牺牲,如果是单边的暴露或者双边暴露但屏幕处于内容开始或者末尾时的状态时,页面就会处于不居中的状态,这种差一点点的不居中在内容横向排列时稍微会有一点突兀,不过可以通过弱化暴露的内容来减缓,例如调节透明度,前提是弱化程度不能影响到用户对「这是后面的内容」的识别。如果想更纯粹的保持居中而洁净的界面,可以使用动效在让用户产生了感知之后可以再次隐藏。动效的加入极大的扩展了交互的可能性。

JingFm 在返回播放页面时,功能按钮从屏幕内滑向屏幕外

QQBrowserQQ浏览器在首次打开的情况下,点击底栏的菜单按钮时,菜单页从第二页滑向第一页

该动作仅是在刚上手的时候出现,用户往往获得了感知但又避免了刻意性产生的体验不流畅,其中的亮点在于低调。

本文采用 Creative Commons BY-NC-ND 授权,转载请注明出处

Comments
Write a Comment