为了更好的浏览体验,请不要在本页面禁用 Javascript 🙂

从 ”返回顶部” 说起

起因是这样的
参考红线部分的内容,今天刷即刻的时候,发现了这条评论。遂在 iPad 上尝试了一下 PWA 版即刻,体验不还错。
整体界面比较简洁。最让我瞩目是右下角"回到顶部"的按钮,因为在干净的页面上出现一个不和谐的元素。于是我开始思考这个按钮的使用场景,以及它存在的意义。
功能显而易见,用户在下拉(刷)了很久后,点击这个按钮可以回到页面顶部。可是回到顶部又是为了干什么?我个人理解是,最初这个回到顶部的功能,是为了让用户快速寻找导航栏,进行其它的跳转操作。
可以是现在有一部分网页的导航栏,已经是悬挂了,始终定在页面顶部,jike 就是这样的。无论你刷多久,导航栏一直都在那里。
右下角的按钮是否显得突兀?
按钮是否有必要
所以我们真的需要这个按钮嘛?80%+的键盘 自带的 home 键不好用嘛?如果是移动设备访问,没有键盘。用户想返回顶部,这个按钮确实还是很好用的。
确实是这样,移动用户没有键盘,返回顶部也确实是刚需。不管是找导航栏,还是想从最开始重新浏览(文章),回到顶部这个功能确实是有必要的。那么怎么才能把这个体验做好呢?
在移动设备寸土寸金的小屏幕上,怎么设计得简约不突兀,同时实现这个功能。这是一个值得思考的问题。
如何设计才好
先看微博。好吧,微博根本没有这个设计(好在我也不用微博,用户体验管我屁事)
看看 twitter,等等 twitter 的返回到顶部在哪里?也没有嘛?其实是有的,我也是最近才知道的,这个设计很隐晦。触摸顶部的导航栏,即可返回顶部
同样的设计在微信朋友圈中也可以体验到,需要双击导航才能回到顶部。
如有你是 iOS 用户的话,触摸顶部状态栏即可返回顶部,这是系统层面的支持。(此处应有掌声👏)
美中不足?
看吧总是有解决办法的,既没有突兀的按钮又实现了功能。但是怎么说呢,通过触摸导航栏实现回到顶部这个功能。从设计上来说是不错的,当然易用性也不错。只是有那么一点隐晦,用户很难发现这个功能。
或许有的读者也是在看着这篇文章时,才知道这些功能的。看起来似乎完美,但是用户却不懂这个设计。这可能是最让设计师头疼的事情。
杂谈
不管是网页、 App 、还是游戏。所有有用户交互的地方,那些堪称艺术、令人赏心悦目的作品。它们的界面都是简约的。Procreate、纪念碑谷、notion 等等莫不如此。
notion 的招聘写的很有意思,我们需要会写代码的设计师而不是会设计的程序员。主次关系很明显,设计为重。二者得兼当然是最吼滴。
discord 曾经的招聘信息也很有意思,不过现在我找不到了。简单说来,那时候 discord 刚刚用户爆发增长,他们的的招聘信息全是招设计师。一个把用户体验放在第一位的公司不会太差。
对于那些设计简约的产品,你可能不知道如何操作。但是没关系,你可以通过探索或者产品引导逐步地去了解它们,这个过程也是非常有趣的。如果你真的没法发现某个功能,这可能是设计师的失败,也可能你不是这个设计的目标用户。
太多的信息等于没有信息,同样地太多的入口等于没有入口(这似乎是一个万金油式的句子)。国产app 令人眼花缭乱的主页入口是KPI的产物(没错,支付宝!说的就是你)。
不知道用户体验为何物的产品,或许可以通过它的市场垄断力统治着用户,但是却永远无法赢得用户的尊重。只有那些真正为用户着想的产品,那些设计优秀的产品才能让用户心甘情愿的买单。那才是真正的双赢,这或许就是境界吧。
任重而道远,共勉。
回到 Web 上来
最后,我的建议。
如果你的顶部导航栏是 fixed 的,那么你可以利用它来做回到顶部的入口。而不需要一个单独 fixed 在某个地方的按钮来做这件事情。
我依照这个建议,将博客的导航设计改了一下,也加上回到顶部的功能。毕竟我喜欢这种性冷淡的设计风格,好看是第一生产力。
Build with gatsby,react,material-ui and Copyright 2019 Mayne Powered by gine-blog