细谈产品"返回原地"设计

来源:互联网的一些事 作者:读者投稿

交互设计学堂:细谈产品"返回原地"设计,互联网的一些事
  在一个列表页上点击某个项,进入详情页,再从详情页返回列表页,应该是回到顶端还是回到原地?

返回到列表时,列表不应刷新、页面不应回到顶端,应该是返回原地,回到刚才离开的那个位置。

对于PC的网页,这个问题并不典型,因为,新链接是在原窗口打开还是在新窗口中打开,这都还没个定论,如果是在新窗口中打开,也就不存在返回列表页的情况了。

现在移动设备上,尤其是手机这么小的屏幕上,无节制的打开新窗口肯定不是什么好事儿,是得在同一个窗口里打开详情页了,那么,从详情页返回列表后的问题也就更明显了。

PC网页、移动设备APP、软件…应该说,在所有数字产品中几乎都会遇到这个问题。

像是这个客户端:

交互设计学堂:细谈产品"返回原地"设计,互联网的一些事
  点击了左侧某个项,右边开始播放,左侧tabs收起,再次打开左侧tabs时,其实也是列表返回后的问题。

  应该返回原地,因为…

刚才点进去看某一篇了,现在回来,很可能是想要继续往下看列表。而且,回到原地才最不陌生,在不陌生的页面上继续操作,才最不恐惧。

其实我觉得并不需要太多的说理由,因为原本就该如此。

交互设计学堂:细谈产品"返回原地"设计,互联网的一些事
  列表就是一张张文件叠放在一起,每一张露出个标题来,从上往下捋(lǚ)着看,看到哪个标题感兴趣了,就拿出来看看,看完之后,接着往下看列表。

  展开、弹出详情使得返回原地看上去更合理

交互设计学堂:细谈产品"返回原地"设计,互联网的一些事
  用这些形式展示详情,返回列表后列表保持不动显得更为理所应当。

如果弹出的详情页面更大些,充满整个屏幕,完全挡住列表,要再看到列表,就得点弹出窗口上的叉子,这与跳转到详情页就是一回事儿了。页面内的展开也是类似。这些应该说是更形象的展示方式,比起最原始的跳转页面,更形象了。

这些形式也与普通的跳转到详情页一样,列表保持不动,都要面对一些问题,也正是这些问题才让更多的设计者选择了刷新页面,回到页顶。

  返回原地要面对的问题:

以前没移动设备,页面主要是PC的网页。返回后把重新载入页面,页面刷新了,也置顶了,这样做的好处:

1、可以展示更新了的内容;

2、知道当前位置。页顶的导航展示出了当前是在哪个页面,用户也知道现在是在页面顶端。

如果是返回原地,那这两个好处就没有了,变成需要解决的问题了。

为了这两个好处而刷新、置顶,有点儿舍本逐末了。是否返回原地,判断依据应该是:怎么才是用户好理解的,用起来方便的。既然有这样的问题,我们就做出些配套设施直接来解决问题就好了。

  配套设施

  配套设施一、展示导航

交互设计学堂:细谈产品"返回原地"设计,互联网的一些事
  展示出导航,让用户知道返回后回到的是哪个页面。

交互设计学堂:细谈产品"返回原地"设计,互联网的一些事
  移动设备上,第一级的页面会用整行的导航,或在屏幕顶端,或在底端。二、三级的页面是有页面标题和返回按钮。移动设备上的产品层级通常不多,又有比较明确的设计规范,基本上,移动设备上的产品,确保返回后的页面展示清楚导航都能做的比较好。

对于PC软件,像上面看到的搜狐影视这样的客户端产品,展示清楚导航基本也没啥问题,内容的列表怎么滚动,导航或在上,或在左侧,不跟着滚动,一直都在。

对于PC网页,就比较悲催了。由于古代网页的技术局限,形成了现在网页的传统,所有内容都是在一整个页面里的,页面往下滚动,导航就滚出去了。不过现在也越来越多的网页产品不再拘泥于这个局限了,当导航要滚出屏幕时,让导航浮动起来,卡在页面最顶端,比如,淘宝的详情页。这虽然也不见得是最好的形式,但至少这是个有益的尝试。这个页面需要有导航,而不仅仅是这个页面的首屏需要有导航。

  配套设施二、用滚动条展示当前所在位置

交互设计学堂:细谈产品"返回原地"设计,互联网的一些事
  设施一是为了展示当前页面在整个产品中的位置,设施二是为了展示清楚当前屏所显示的是此页面中的哪个部分,是页面内的导航。

其实并不需要强调要“用滚动条”,这是具体的表现形式了,要的是展示清楚当前屏在整个页中的位置。不过,貌似除了滚动条似乎也没有什么更好的方式了。

现在移动设备操作系统中,右边的那个条,相比起传统意义上的滚动条,变窄了,也不能操作了,纯粹是为展示当前位置用的了。

IOS上的窄滚动条只在用户滚动列表时才出现,意思是说,你要滚动页面时才会需要了解当前位置,在阅读页面上内容时,并不需要窄滚动条。这个思路挺好的,对于小屏幕的移动设备,“适时出现”这个设计思路尤其有用。但是在返回列表这个时候,我觉得也还是应该忽现一下子。窄滚动条出现的原则应该是:需要的时候出现,而不是滚动屏幕时出现。

  配套设施三、提供“返回顶端”操作

交互设计学堂:细谈产品"返回原地"设计,互联网的一些事
  回到了原地,这原地可能已经是列表很靠下的位置了,要回到顶端,触屏上连续向下翻动也好,pc上连续滚鼠标滚轮也好,都是体力活儿,而且是浪费体力的活儿。所以需要有个返回顶端功能,不过形式倒不必拘泥。

pc上有越来越多的网站给自己的长列表右下角加上“top”按钮了。移动设备上,如果总是在屏幕上贴个“top”按钮就太讨人嫌了,IOS提供了很隐蔽的top功能:点列表最上面分割线的区域。这也是个很智慧的方式。因为,操作系统是个针对熟手的产品,功能隐晦些,需要些学习成本是可以接受的,学会了以后,用起来效率很高。

  配套设施四、“新信息”提示

交互设计学堂:细谈产品"返回原地"设计,互联网的一些事
  以前网页上返回直接就刷新页面,更新的内容就刷出来了。如果是返回原地,那么,有了新消息,就给及时告诉用户

用户是老板,面对着排成一列的大批文件,正在逐个文件标题的看,其中一些会抽出来仔细看。这时,又来了几分新文件,作为一位称职的秘书,应该怎么做?不告诉老板肯定不对;把文件放在文件长列的最前面并把老板直接拉过去,这也不好;应该告诉老板一声:“又来几份新的”如果能更体贴,还可以附加一句:“其中还有一份是特重要的某某项目的文件。”

称职的秘书就是我们的产品,有新消息时,应该提示,而且得让用户看见,目前的微博,移动设备的版本,会在屏幕底部的导航上显示出个数字,而网页版的只是在列表最上面多顶出来一行提示,只要页面滚下去了,就看不到这个提示了。

  配套设施五、跳去“新消息”之前的阅读位置,应该mark

交互设计学堂:细谈产品"返回原地"设计,互联网的一些事
  这个功能出现在用户去查看新消息之后,是上一个功能:“新信息”提示的补充。

用户点击了“新信息”的提示,去查看新信息了,看过了最新的之后,很有可能是要回到刚才中断的那个位置继续往下看。如果之前已经滚了好几屏了,那个位置就不那么容易找了。

这个功能是一个典型的为任务而设计的功能,完全是为了这种特定的任务情景而设计的,与产品的结构没什么关系。

之所以会想到这么个功能,源于对任务的罗列,我自己甚至将其成为“任务罗列法”,这个方法是这样的:在完成了产品基本架构设计的基础上,无限详尽的描述所有可能的任务,来检验现有的产品,确保重要任务很顺利,次要任务能达成,没有任务完不成。

  补充上以上五个配套设施, “返回原地”基本上就比较ok了。提供这五个个配套设施的基本思路是:

  1. 描述当前状况;

  2. 提供可行的操作。

设施一、导航,设施二、页面内导航,都是在展示当前状况。设施三、回到顶端,对于提供了可以做的操作。设施四、提示有新信息,即是描述状况同时也提供相应操作。设施五、mark之前的阅读位置,描述的是用户点击了新消息之前的状况,同时提供相应操作。

  “返回原地”的适用范围

对于PC、移动设备、网页、APP,“返回到原地”这个设计方案都是适用的,但在时间维度上,却不能无限制的扩大。

如果是昨天睡前刷过微博,在一个详情页关闭了微博APP,今天早上起来再打开微博APP,还要保证返回到列表页原地不动,恐怕价值就不大了。

“返回原地”隐含的前提是:刚才从这儿离开的,返回来时,用户应该多少还对位置有点儿印象。

“返回原地”目的是:用户继续浏览列表比较方便,如果昨天看过微博,今天早上起来再打开微博,恐怕“继续阅读”的可能性就很小了。

这里讨论的是从列表离开的情况,如果不是列表页呢?如果是从一个首页,或者其他什么页面,进入某个下一级页面,然后再返回来,是不是也应该返回原地呢?

以列表为研究对象,是从比较简单也最常见的情况入手研究问题。搞清楚了之后,对于更复杂的情况,我们也可以依据这些结论来做判断。

  扯远了…

关于“描述当前状况,提供可行的操作”,这里设计配套设施用到了。以前关于按钮应该表状态还是表操作曾经讨论过。对于有开/关两种状态的按钮,比如静音按钮,播放/暂停按钮,按钮上的图标应该表达怎样的含义?是表达“当前是有声状态”?还是表达“按这个按钮可以静音”?最完整的表现就是应该表现出:1、当前是什么状态;2、还能做什么操作。

在返回列表这个问题上又用到了这个理解。实际上这是一个具有普遍意义的理解方式,对于一个系统,首先应该展示清楚当前是什么状况,比如:正在下载中,处于编辑状态,系统故障中…然后还需要根据当前状态提供对应的操作:正在下载,那应该提供中断操作;正在编辑状态中,提供编辑的功能;系统故障中,是不是可以刷新?

关于列表这种形式与现实的映射,这个理解,在这儿是为了辅助理解列表的返回,其实这种理解还有更多的价值,比如:列表与详情页之间的切换形式,列表页之间的切换形式,翻页与向下加载更多的取舍…

关于“用户是老板,产品是秘书”,这是一种对产品的定位,在研发产品的过程中,这种角色定位不仅是对产品整体方向的把握这种抽象层面的指导,对于新消息该怎么提示这种具体设计也有价值。

当然,并不见得所有产品都得是秘书,也许你的产品是位专业的顾问,或者是热情洋溢的主持人。

关于“任务罗列法”,无限详尽的去描述用户在使用这个产品时会是什么样子。虽然我们平时也经常在设计完成后这样过一遍,看看能不能走通,但往往是检验的过于简单。我建议将这些任务的描述写下来,像写小说那样,几百字几千字,写着写着就能发现问题了。

有些产品,结构简单,但却会被反复使用,使用情景很多很复杂,比如:一个下载列表,一个邮件收件箱,对于这样的产品,任务罗列往往比较有用。

 

原创文章,作者:Smiler李想,如若转载,请注明出处:https://www.iamue.com/809/

(0)
Smiler李想Smiler李想
上一篇 2014-09-27
下一篇 2014-09-27

相关推荐

  • 当售电开始谈“用户体验”

    [图片]   现在,很多售电公司打着“增值服务”的噱头来签客户,承诺给客户绝对满意的用电服务,但现在很多用户却反映:售电公司并没有兑现签合同时所承诺的很多增值服务,用户蒙受损失。即使仅仅只是部分售电公司的原因,但是这样下去,增值服务这手好牌迟早会被打烂,增值服务的说服力会也来越低

    微信热点 2018-02-14
  • 交互设计之寻求设计需求点

    交互设计师如何进行设计需求分析?首先看交互设计的职责,协助产品经理进行需求分析,进行交互稿绘制,与视觉设计师对接。交互设计必须懂得进行需求的分析,不仅仅是用户需求,还有业务需求的分析,也就是来自产品的诉求,企业做这个产品的目的是什么。因此一个方案如果不能满足业务需求、用户需求和一个好的用户体验,那么它就不是一个好的方案。在这篇文章主要介绍的是如何进行需求分析和关键因素分析,找到设计的需求点。在这里主要分为了四个步骤:分析业务需求、分析用...

    2018-04-30
  • 动效在UI设计中的三个关键用途

    动效的强大之处在于,它将设计以更为成熟的方式呈现出来,它赋予设计以生命力,让产品脱颖而出。

    2017-05-07
  • 几乎是最完美的用户体验模型—CUBI

    【导读】我们都希望能做出引人注目的创意项目——能解决业务问题,同时通过有意义、有价值的体验吸引用户的项目。然而,紧缩的预算以及紧张的时间安排,都给创造真正新颖的设计、确定设计流程中的遗漏,以及充分考虑…

    交互设计 2015-04-24
  • 当产品进入碎片迭代,设计师可以做些什么?

    也许是刚毕业的你最该看的一篇干货。如果你已经习惯了等别人给需求,然后开Photoshop,再等别人说改哪里就改哪里,肯定谈不上工作成就感。想掌握设计的主动权,证明自己不仅是个画图的,建议把这篇文章提到的3个方法好好实践一番,绝对会有大收获(严肃脸)。

    2017-06-01
  • 交互设计师的60日计划第十四天

    精神状态不好,效率略低。 20150812 门槛越高,交互设计师越难被替代 to b的产品相对to c的产品来说,门槛会高很多。做to b产品的交互设计师要了解许多复杂的背景知识,了解完全不熟悉的用户群体,才能开始着手做设…

    交互专题 2015-08-20
  • 【软件安装】Axure RP 7.0软件图文安装教程

    1、会员覆盖工作、学习、生活娱乐,并不断更新更多有价值的精品软件2、安装中有任何问题请咨询小白资料网私人微信:xbzw88888888【特别推荐】加小白官方微信:xbzw88888888,就可免费领取:快速入门自学视频课程Axure RP 7.0软件图文安装教程软件介绍:Axure RP是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的...

    2018-03-13
  • 十步交互设计方法

    理清业务逻辑是交互设计的第一步,你必须得拥有非常清晰的逻辑思维,因为某些产品往往伴随着海量的功能、大量的模块、错综复杂的交互流程以及难以理解的业务技术背景,这些都是对设计师逻辑思维的一个挑战。如果你没有清晰的清晰的逻辑思维,那可能就不适合做交互设计了。

    2017-05-27
  • 【STARCAST】用Sketch表现不了的"孝敏"清纯日常画报

    ——还没关注?点击上方蓝字——大家好。STARCAST的家族们!!!!!!我们孝敏终于携Sketch回归了,这是她的第4次STARCAST!如果觉得我们孝敏已经展示了她的全部,那你就错了!她还有很多都没有展示给大家哦!今天就为大家送上,脸也没法用Sketch来表现,身材也没法用Sketch来表现的孝敏隐藏的一面,就像日常生活一样的画报,就像画报一样的日常生活照!这个秘密只告诉STARCAST 家族的大家哦,不是秘密>.大家已经开始紧张了...

    2018-03-02
  • 【译文】你瞅啥?文案也是一种设计力量

        做事,不能只讲求实际运用,有的时候,也是需要加入一些纸上谈兵的环节的,毕竟,在理论指导下的实践才不是盲目的。 通常,一些科技类企业无法保证其网页每一个单独界面、广告业和交互页面上的文案都有专人负责…

    交互专题 2017-08-07