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

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

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

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

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

相关推荐

  • 译文 | 4种帮助设计师整理设计思路的方法

    当我们刚刚接手一个项目的时候,我们总能在初期迸发出很多有趣的想法,很多闪光的细节都是偶然闪现的,但当我们在设计的过程中,有多少能够真正落地到产出中呢?怎样才能成功捕捉到这些有趣的创意,并使之在后续的产品设计中表达出来?本文向大家推荐了四种方法,帮助大家整理设计思路,避免创意在你的脑海里逃走!下面进入译文。

    2017-05-25
  • 如何从零开始临摹大神的作品?

    在我们探讨设计原理的核心之前,我们需要明确构成视觉语言的5种元素。线段在动态设计中是点的集合。线段生成了运动,吸引我们的眼睛去跟随它的运动轨迹。线段可以是直线、曲线、虚线或粗细变化的线,它是构成形状的基本元素。

    2017-05-22
  • 【用户体验】百度贴吧体验升级背后的故事,用户洞察与交互升级

    Alias工业设计点击关注 和工业设计做朋友关注作者:百度UXC随着产品的发展和用户群体的演变,用户对产品的认知也在发生变化,当用户认知和产品形象发生偏差时,体验升级就势在必行了。而用户对产品的认知大概体现在视觉感受(品牌形象)和使用感受(交互操作)上。对此我们从用户出发寻找设计上的突破口。洞察用户让设计有的放矢视觉感受对于大多数人是一种难以言说的东西,难以通过简单的方式得到答案。面对这个问题,我们选择迎难而上,通过精巧的实验、可视化的...

    2018-03-03
  • 预算少时间紧还要出色的用户体验?看来只有试试精益设计了!

    低成本,高效率,还能把友商比下去的用户体验——全世界老板的目标都是一样的!问题是,这现实吗?先别着急否定,也许,精益创业方法系统中的精益用户体验设计可以帮到你。是时候淘汰预先大量设计、单打独斗、各个专业团队将交付文档甩给对方这些传统的用户体验设计了——把精益创业法与用户体验(UX)设计结合起来,共同成长,互惠共存——这就是Lean UX。三原则Lean UX 从精益创业法中吸收了三个基本原则。首先,它们能帮助我们简化 UX 设计流程。我...

    2018-05-04
  • 华润创业、建信融通、便利蜂等4家名企春招

    求职奶爸华南最活跃的大学生求职平台旗下公号求职奶爸、校园宣讲会V、名企校招实习,50W+粉丝企业合作请加 QQ 3527488757 或微信 naibabd01(添加请备注公司名称)学生求职请加创始人微信 qiuzhinaiba101全国 | 华润创业全国 | 建信融通全国 | 便利蜂广州 | 卡宾服饰华润创业/ 公司介绍 /华润(集团)有限公司是一家在香港注册和运营的多元化控股企业集团,其前身是 1938 年于香港成立的联和行,194...

    2018-04-08
  • 零UI,为无屏交互而设计

    “最好的用户界面就是没有界面”——Golden Krishna“最好的用户界面就是没有界面”——Golden Krishna

    2017-05-08
  • 用户体验地图为什么这么好使?来看蚂蚁金服的实战案例就知道了

    用户体验地图(experience map)作为一种常见工具能够让工作更加顺畅,用户体验地图就起到了一个很好的团队协作作用,产品、设计、开发都能够通熟易懂,便于梳理清楚产品的架构和使用流程。作者|蚂蚁金服UED源自|设计夹但是体验地图到底能解决什么问题,该怎么用呢?很多同学也许并不太了解。这次分享主要是将我们在各类渠道了解到的关于用户体验地图的各类说法做了一个总结,并结合了我们在工作中的实际运用,给有兴趣了解该方法的同学提供一点我们的见...

    2018-03-09
  • 五个提升用户体验的分析要素

    原文链接:https://uxdesign.cc/analytics-for-better-ux-c0128c0da55e用户体验是区分产品优劣的核心元素。为了提高转化率,你会试着仔细的检查产品的用户体验,但是应该如何着手呢?你要如何找到痛点并弄清用户的真正需求呢?不去研究调查就编造借口,觉得你知道确切问题所在当然是很轻松的。但是你必须保持谦卑,机敏,通过客观的分析来得出结论。流行的分析软件挺多的,列举一些:Google Analyti...

    2018-03-02
  • 千万级用户的视频体验,我们是这么做的

    如今app的更新迭代速度很快,因此无论在视觉审美还是交互功能上都有新的趋势和风格。乐视视频原有的ui设计风格已经无法跟上目标客户群的审美变化,且在功能上较难满足用户预期,因此需要在整体视觉和产品功能上进行相应的美化和完善,使我们的视频产品无论从视觉还是功能上都能够在给予老用户新鲜感的同时吸引更多的目标用户。

    2017-05-26
  • QQ国际版视觉探索:准备了两套视觉设计方案

    QQ国际版主要是针对国外用户打造的一款轻量社交产品。由于当前产品迭代周期相对较长,我们对当前视觉提出一个疑问:现有产品的视觉形态,是否符合国际版的产品调性?基于这个问题,我们开启这次探索之旅。

    2017-05-08