最出其不意的「返回顶部」设计，非猫耳FM莫属 - 优设网 - UISDC

最出其不意的「返回顶部」设计，非猫耳FM莫属 - 优设网 - UISDC

设计彩蛋最出其不意的「返回顶部」设计，非猫耳FM莫属

产品：猫耳FM iOS 作者：猫耳FM团队时间：2018-07-12

猎人：小白观众：3772人

细节描述

小白：当浏览页面较长的网页时，利用鼠标滚动返回页面顶部的体验会变得非常差。因此现在的网站尤其是国内网站，多数都会在页面右侧增加「返回顶部」的快捷按钮，以此来提升使用体验与效率。不同于大多数固定在Bottom底部或始终悬浮页面右下角的箭头文字版按钮，猫耳FM的「返回顶部」则更像是给用户预留的惊喜彩蛋。将平台吉祥物小萌猫的形象用绳子吊在网站页面右侧作为隐藏的「返回顶部」功能，真的皮到不行～但仔细想想，这多符合平台萌系的属性与灵动的个性呀。想要解救小萌猫？返回页面顶部试试 (~￣∇￣)~

围观案例 ! 温馨提示：案例或因时间流逝和版本迭代与截图时有所差异

本篇知识点及话题# 微交互 # 情感化设计 # 惊喜 # 按钮 # 猫耳FM # 设计彩蛋 # 趣味性

发表评论加载中....

评论加载中....

相关细节

交互手势关于App页面底部的留白设计，值得思考的事情

「想去」App的信息流滑到页面底部会出现一只鲨鱼追逐小鱼的加载动画。这不仅是个有故事情境的微交互小动画，其实也偷偷将产品的Logo融入了其中，巧妙地强化了品牌形象。简洁的动效符合产品极简的整体调性，趣味性的加入缓解了用户等待加载时的焦虑情绪，营造的轻松的氛围拉近了与用户的距离感。值得注意的是，随着iPhoneX的流行（设计iPhoneX的页面时底部需留出一定的安全区域），页面底部留白的设计会越来越受到重视。

产品：想去 iOS 作者：想去设计团队猎人：小白

按钮设计「镜像翻转」功能开启，跟着视频学跳舞不再跳错方向<(￣▽￣)/

先出左手还是右手？迈左腿还是右腿呢？跟着视频学跳舞好容易就会做成反动作 T T ~ B站的「镜像翻转」功能正是应对此种使用情境的神器，无论学宅舞还是街舞都方便了不止一点点。点开视频里右上角的「更多」按钮（三个小圆点），将当前视频设置成镜像翻转模式，学姿势就不容易跳错了。这么「刁钻」的使用情境都考虑到了并给出了很好的解决方案，真的是很用心在做产品的团队了～

产品：Bilibili iOS 作者：Bilibili设计团队猎人：小白

用户体验常被吐槽「反人类」设计的12306，其实也有这么暖心的提示设计

自从有了12306中国铁路客户服务中心这个平台，许多人已经离排队买票这件事很遥远了。12306的出现大大方便了我们的生活，但说起12306的使用体验, 大部分人的第一反应是「被验证码支配的恐惧」！其实很多事存在自有其道理，常被吐槽的验证码设计咱们下次可以扒一扒。今天想要Pick的是12306App里一个很贴心的提示设计：当你选择的车票开车时间距离购票时间太近，进入付款页面前系统会呼出「温馨提示」的弹窗告知用户距离乘车时间很近请确保有足够时间去取票安检。这种具有前瞻性提醒的设计对于对时间预估不敏感以及容易误操作的用户而言，简直是小天使般的存在呀～

产品：铁路12306 iOS 作者：铁路12306 团队猎人：小白

用户体验你的生日，就是今日最佳推荐

在生日当天登录网易云音乐，你会发现主页的「每日推荐」版块会变成「生日快乐」的祝福。点进去原本的每日推荐歌单列表会自动推送生日歌。可能有时候连你自己都忙得忘记了生日，但网易云音乐记得。这一天，你的生日就是最美的歌也是今日「最佳推荐」。将对用户的情感关怀融入产品设计使其成为产品不可或缺的一部分，用户不仅能得到感动与惊喜更能体会到满满的归属感。

产品：网易云音乐iOS 作者：网易UEDC 猎人：小白

优设精选专题查看更多

298191人看过 9篇文章

电影海报设计

看大师如何在方寸之间挥洒才华

本专题不仅收集了国内外知名的高分电影海报设计，还有设计方法总结和大神介绍，让你一饱眼福的同时也能学习到更多海报设计的技巧。

524145人看过 8篇文章

自学UI

设计高手的自学方法大全

授人以鱼不如授人以渔，UI 设计是门庞大的学问，单靠专题不免挂一漏万，所以本专题不分享技法层面的知识，而是将前辈的自学经验集结起来，帮你掌握正确的学习方法和思路。

197836人看过 12篇文章

设计史

以史为镜，鉴往知来

本专题不仅展现了世界现代设计史上各个时期的重要流派、重要人物和重要作品，为读者构建世界现代设计史的知识轮廓，而且还有GUI 发展史、谷歌LOGO 变迁史、宋体演变史等经典设计的演变回顾。

1672713人看过 13篇文章

中文字体

高质量中文字体打包下载

字体性格各不相同，好字体能与设计作品相映成趣。本专题收录了不同风格的中文字体，并提供打包下载。需要注意的是，大部分字体都是个人非商用的哟。

设计师基础理论书查看更多

破茧成蝶2

国内设计师出版的最值得一看的书，熟悉的界面背后藏着大道理。

刘津孙睿

人民邮电出版社

用户思维

创业时代的用户获取方法，优化体验，前所未有的技巧绝学。

约翰·沃瑞劳

中国友谊出版公司

设计心理学（套装共4册）

英文版销售25万册，设计学知名力作，设计师必读经典。

唐纳德· A · 诺曼

中信出版社

用户体验要素

以用户为中心的产品设计，销量经久不衰，入行必读。

Garrett

机械工业出版社

用户至上

亚马逊用户体验师首推的用户体验书，内附实践方法。

Kathy Baxter

机械工业出版社

色彩设计法则

梁老师苦心著作的配色书籍，或许适合所有色彩爱好者研读学习。

梁景红

人民邮电出版社

书到用时方恨少 > >

每天官微五分钟
一年萌新变大神

扫码关注

每天10篇设计干货
300万设计师关注！

访问官方微博

您还没有登录

优设启用更安全省心的微信扫码登录

微信扫码

扫码登录即表示您同意并遵守用户协议

300万设计师聚集地！优设网是极具人气的设计师平台
2012年成立至今，一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信，扫码分享
学设计优设网在这里