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

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

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

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

对于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

相关推荐

  • 9个关于设计的关键要素,帮你设计出更加优秀的作品

    之所以把设计和Jalebi放在一起说,就是因为设计本身其实和制作Jalebi如出一辙,设计师的经验和对设计投入的思考才是核心所在,而两者结合之下则往往能产生一些颇有价值的指导思想。Above examples are of apps with the same domain and you can judge which one is looking better.A good example visual typo hierarchy in the above graphic .

    ——Source: SuperDryCleartrip is a very good example of what I am talking about……

    2017-05-17
  • 可视、清晰和简单:APP底部导航设计三原则

    作者:Nick Babich(译者:Darin) 设计师们都知道设计的目的不只是为了让产品看起来好看。无论是网站还是app,如何黏住用户,同样是设计所需要考虑的方面。设计就像是一次对话,导航也是一次对话。因为如果你的用…

    2017-08-04
  • 看了都说好!如何建立交互设计自查表?

    强烈推荐!很多同学做设计的时候经常会漏掉这个漏掉那个,等到开发来问的时候才想到。现在有了网易同学自创的自查表,可以把一些问题提前预防起来,文章系统全面,条理性强,是不可多得的实用好文呦。飞灵:对于移…

    2017-08-01
  • 校园招聘 | 网易交互设计实习生

    网易交互设计实习生公司简介网易2001年正式成立在线游戏事业部,与广大游戏热爱者一同成长15年,是全球领先的游戏开发与发行公司,自主研发了《梦幻西游2》《大话西游2》《天下3》《乱斗西游》《梦幻西游手游》等几十款倍受玩家喜爱的热门端游和手游,更独家代理了《魔兽世界》《炉石传说》等多款风靡全球的游戏。 2015年,网易游戏正式开启“游戏热爱者”品牌战略,用自身行动传导热爱者价值,并全面启动“聚合精品,共享热爱”战略计划,以全球化视野为游戏...

    2018-02-10
  • 用户体验方法论的演变

    用户体验工作流程令人困惑,即使对大多数设计师而言也是如此。最初Donald A. Norman创造了用户体验设计的概念:“我发明了这个词,因为我认为人机交互和可用性太窄了。我想涵盖该系统的所有方面,包括工业设计图形,交互界面,面对面交互和使用手册。从那时起,这个词被广泛传播,以至于它开始失去意义。”而到2016年,Don Norman开始谈及对于这个词的误解有多严重。在彻底了解现代用户体验之前,我们需要回顾20世纪90年代以来设计和开发...

    2018-03-07
  • 只会简单的Axure操作?6周5次实战,让你做出能拿去面试的原型

    昨天跟一位自学Axure、产品工作半年的朋友聊天,蛮感慨的。她遇到的问题,也是蛮多自学Axure的朋友遇到的问题。你是否也有同样的问题?除了原型图不标准不美观,还深受效率低、交互弱的困扰你也有这位同学的困扰,想快速提升axure能力,做出标准原型、高保真原型?推荐起点学院&腾讯课堂联合打造给产品经理的Axure课程已有2000多位同学学习,学习效果显著Axure零基础也能学,学完画出规范原型产品思维和交互贯穿全程,学完告别画图经理如果你...

    2018-05-07
  • 抢先看:微信官方发布的微信应用号(小程序)设计规范

    微信小程序设计的基本原则是微信设计中心针对在微信类上线的小程序页面总结的设计指南及建议。以下设计原则都是基于对用户的尊重的基础上的,旨在微信生态类建立有号、高效、一致的用户体验的同时,最大程度顺应和支持各业务需求设计,实现用户与程序的共赢。

    2017-05-18
  • 给小白看的交互设计启蒙帖(一)

    通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。所以今天就来给大家分享一下我作为一个交互设计师眼中的交互是什么样的。文章的目的是帮助对交互设计不太了解,但工作相关或对此感兴趣的人对交互设计进行基础入门的了解,所以采用了尽量平实简单的描述方式,以帮助大家快速理...

    2018-03-14
  • 译文 | 微交互:设计优秀app的秘密

    好的产品往往做好了两点:功能和细节设计。功能吸引用户使用你的产品,细节设计将你的用户留下。优秀的细节设计能够使你的产品在众多竞品中脱颖而出,优秀的微交互设计往往能够让用户在初次使用产品时就能够留下深刻的印象。作为一个交互设计师,在设计微交互方案的时候不仅要考虑视觉上的冲击力,还要想办法赋予其信息传递的功能。

    2017-05-26
  • 三跨362分考取北邮交互设计,复习经验分享

    2018北京邮电大学交互设计- 连庆欣大家好,我是18年考上北邮艺术专硕的学姐,初试总分362分。回忆过去复习的日子,仿佛刚刚就在眼前。我本科是信息管理与信息系统专业,从一所二本学校三跨考研北邮艺术专硕。我是8月底9月初左右着手开始准备考研的,前后大约准备了4个多月。当时刚刚开始准备复习的时候,也思考了好一段时间,由于自己是跨考的,手绘能力实在太弱,找了好几个学校了解,都是比较偏重手绘能力的,直到我看到了北邮,找了它相关的真题,发现对手...

    2018-05-01