目录
位置锚定
2021年2月12日

在上节课的故事,大厂村村民对物业加装的电梯运行的方式意见很大。因为这个电梯只能停靠在一层和顶层,中间层不停靠。物业加装的电梯显然问题很大,那么正常的电梯如何设定停靠楼层的呢?

我们常用到的电梯,一般需要按照楼层高度,来划定最小的”停靠单元“。那问题特别多的小强就说了,为啥最小结构单元是楼层的高度呢,就不能再小了?是的,再小就没意义了,如果是半层停靠,那么打开门只能看到一堵墙。

如果我们按照住户需求和实际场景需要,去扩展停靠单元个数,就可以形成双层或者多层停靠。比如说医院的电梯,为了缓解高峰期电梯排队拥堵,专门设置了双层停靠电梯,有时候为了满足特殊医患的需要,还设置有直达电梯。大厂村物业加装的电梯显然就属于后者,但是这显然不符合常住居民的使用需要。

同样在对互联网产品进行设计时,用户需求不仅限于到达页面顶部,有时还会有去到页面某一位置的需求,那遇到这种需求,我们该如何满足呢?


分页器

在网页产品设计中,当列表信息数量较多时,我们会在设计方案中使用分页。这样,用户在浏览这些内容时,可以通过分页控制,快速切换列表内容。在这里,分页器相当于电梯控制面板的角色。


但是分页器的存在,并不能实现用户浏览的精确触达。用户只能通过分页器,实现查找信息的大致定位范围。如果想要实现快速查找目标信息,往往还需要借助筛选条件,甚至搜索按钮,来进一步缩小筛选范围。分页器更像是对无规则内容,通过单一纬度要素(通常是创建时间),进行罗列,除了这一纬度要素外,没有任何其他特征描述,这就会给用户精确定位带来困难。



锚点导航

在网页产品设计中,有些工具网站,会包含若干结构部分,比如产品功能,开通会员,使用帮助以及意见反馈等,但是一些简单的工具性产品,每个结构部分的内容相对单薄,这就很难单独成页。聪明的设计者想到了一个好主意,他们将网站的主要结构设为锚点导航,然后通过一个长页面,来展示所有的内容。

当用户与这些锚点进行交互时,页面会迅速”快进“到相关的内容部分。在这种产品设计方案中,锚点导航充当了控制面板的角色,用户可以按照自己的需求,通过点击锚点导航,去到页面的不同部分。


锚点目录

在网页产品中,通过锚点实现长页面浏览的快速定位,非常多见。比如,当我们浏览一些长文章页面时,文章的一级或者二级标题会以锚点方式呈现。只要我们点击锚点目录,就可以去到文章的不同内容部分。


文章的标题锚点成组出现,一方面可以帮助我们快速直达文章的不同部分。另一方面让我们提纲挈领的了解文章的内容构成。

在网页产品设计中,设计者可以通过使用导航或标题锚点,来实现对长页面访问的控制。那么在移动产品设计中,有没有类似的控制组件来帮助用户快速实现访问内容的直达呢?


通讯录组件

在移动产品设计中,长页面的使用比例要远高于网页产品。在进行移动产品设计时,帮助用户快速直达目标位置,向来是设计者思考的重点。以通讯录设计为例,大多数人的通讯录中都包含若干亲友的联系方式,少则几十,多则成百上千,这些亲友的通讯录信息在列表页面中展示,会形成一个长长的页面。这时就会出现一个问题,我们如何在成百上千条亲友信息中,快速找到想要联系的那个亲友信息?

移动产品的设计者通过一个”很讨巧“的设计组件,解决了这一难题。首先他们对通讯录的亲友信息进行归类(人名首字母或者拼音首字母)梳理,然后再按照特定的顺序(从A-Z-特殊字符)进行排列,最后再使用一个特定的组件来控制筛选范围,如图所示


这一控件的优点有很多,我们解析一下。首先是用户可以借助这一组件,快速直达到长页面的某一特定位置,然后在缩小的查找范围中,找到目标联系人信息。其次是这个组件固定、不隐藏,无折叠,用户可以随时与之发起交互。第三个优点是,空间占用小(只以首字母出现),不影响主体内容交互。

尽管这类组件有诸多优势,但是在移动产品设计中,这类组件多用于通讯录结构类似的产品设计中。筛选条件压缩难度,以及页面美观度减损,限制了这一组件的扩展和应用。


记录位置

在移动产品设计中,帮助用户在长页面内容浏览中,快速直达目标位置的设定。多建立在对用户研究的基础上。用户的核心诉求该如何被满足,这是大多数产品关注的重点。

我们看一个微信朋友圈的案例,微信的朋友圈信息是按照时间线顺序排列的,如果你连续查看,就会加载出一个长长的页面,如何不错过好友的动态信息,可能是大多数人比较在意的事情。但是显然我们不可能一直专注于朋友圈的更新。有时候朋友圈更新信息积累多了,我们很难记清楚上次查看朋友圈时,有没有将更新全部看完。所以我大概率会查看到上次的更新内容处,就停止朋友圈浏览了,但其实我可能会错过一些重要内容更新。当有上述情况发生时,微信会在feed中,为我们插入一个上次查看到的快捷按钮,只要我们点击这个按钮,就可以快速到达上次未浏览完的内容部分。



定位未读

另外一个案例同样来自于微信,如果我们接收到联系人发送的信息较多,那么在微信的消息页面,就会形成有一个长长的对话列表。当对话列表中新消息较多时,为避免错过重要消息,我们不得不一条一条的,将这些未读消息查找出来,但显然常规的查找方式效率不高。

大多数人可能并不知道,微信有这样一种快捷操作。那就是当我们双击标签栏的消息图标,就会到达未读消息的第一条,继续双击就会到达第二条,以此帮我们定位出所有的未读消息。


微信这种帮助用户快速定位未读消息的设计非常赞,这一设计可以提升用户在长页面浏览中查找的效率。但设计不足之处是隐藏过深,很多用户可能根本不知道这一功能的存在。


最后

以上几个案例,通过不同的设计处理方式,实现了长页面特定内容区域的触达。这些案例尽管实现触达的机制有所差异,但殊途同归。这些建立在满足用户核心诉求基础上的方案探索,对我们进行类似产品设计,有足够的借鉴价值。