• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 交互基础小课堂!从五个维度全面分析「下拉刷新」功能

交互基础小课堂!从五个维度全面分析「下拉刷新」功能

作者: UED设计笔记 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含下拉刷新,产品运营,加载设计,品牌,情感化设计,经验分享等相关知识, UED设计笔记希望在学习及工作中可以帮助到您

关于介绍「刷新的类型」的文章,各类论坛、公众号有很多,也并不复杂,我就最常用的「下拉刷新」,从品牌、功能、惊喜、运营、反馈五个维度结合情感化设计,分享一些我的个人看法。

我理解的刷新是页面中有缓存数据,从服务器获取新数据的过程。

下拉刷新是十分常见的一种操作,并且在下拉刷新的时候,整个页面也会跟着下移,但是会存在一种弹性,页面会恢复到初始状态,在这中间会存在一个时间差。

iOS原生系统的刷新形态是这种普通的旋转菊花 loading,但是我们可以在下拉刷新中加入很多情感化的设计元素。

什么是情感化设计?Norman 在《情感化设计》一书中,提出了情感化设计的三个层次水平,分别是本能层次水平,行为层次水平,反思层次水平,以下是这三种水平的设计与产品特点的对应关系 :

那怎么将情感化融入到设计里?以下拉刷新为例,因为后面我主要从品牌、功能、惊喜、运营、反馈五个维度分析下拉刷新,我将这五个维度映射到三种情感化的表达方式中,分别是外观视觉,功能操作,产品特性。

  • 比如品牌维度可能涉及到外观视觉上要给人打造品牌印象;
  • 比如功能维度可能涉及到巧妙的功能使用方式,有趣的操作体验;
  • 比如惊喜维度可能涉及到产品特性上要给人惊喜,勾起回忆,和用户互动等。

一、品牌维度

在下拉刷新中融入产品品牌,可以加深用户的品牌印象,因为一个产品的品牌建立,是日积月累在细节上给用户的印象感知。

将品牌传播分为三个层级:简单品牌logo、品牌吉祥物、品牌场景故事。

1. 简单品牌logo

比如开眼、想去、足记、大佬说这些 app 的下拉刷新使用产品 logo 或者 brand name 等简单的形式作为下拉刷新的动画。

△ 开眼

△ 想去

△ 足记

△ 大佬说

2. 品牌吉祥物

比如飞猪、闲鱼、哔哩哔哩、美团使用品牌吉祥物的卡通形象作为加载动画。

△?飞猪

△ 闲鱼

△ 哔哩哔哩

△ 美团

3. 品牌场景故事

比如美团外卖的下拉刷新,是一位外卖骑手在骑车,但是旁边附有红黄绿灯的切换,当切换到红灯时,骑手停止骑车,切换到绿灯时,骑手继续骑车…符合骑手配送外卖的场景故事( 这一点的分析我有在公众号每日微交互里分享过)

比如好奇心日报的下拉刷新,诉说的品牌故事是:好奇驱动你的世界。

再比如京东的下拉刷新,是配送员端着快递盒在奔跑,并且附上京东的 slogan:让购物更便捷 ,符合京东的产品定位,也突出京东与其他电商平台的差异化竞争力:购物更便捷,独立配送员,配送更快。

类似的还有苏宁的下拉刷新。

二、功能维度

我把以下这些归为功能维度是因为这些下拉的场景,已经不局限于刷新,还给下拉赋予了新的功能。

我把它们分为三类:快捷操作、新功能入口、多空间的交互。

1. 快捷操作

比如微信读书文章页,下拉是快速添加书签和删除书签,比从 icon 里进入再去添加/删除书签更快捷。

再比如红板报的文章页,下拉是快速返回文章列表,这跟红板报产品本身的手势操作特色:「上滑下滑的卡片翻折切换列表」 相一致。

2. 新功能入口

比如微信的下拉可以展示最近使用的小程序:

TIM 的下拉可以新建待办事项:

KEEP 的下拉可以载入 KG等级与成长值:

3. 多空间交互

当然「多空间交互」是我自己瞎取的一个名字,可以理解为下拉后切换到另外一个空间,如日签,二楼等等。

比如淘票票的下拉切换到日签:

潮汐下拉切换到日签:

淘宝下拉切换到淘宝二楼:

三、惊喜维度

比如网易新闻的下拉刷新,出现的是与刷新无关的文案内容,并且每次文案会不一样,有日历,格言,段子等,带给用户惊喜。

比如在生日那天,在京东的个人中心页下拉刷新,京东给用户定制的生日惊喜。

比如58同城里的首页下拉刷新,每一次下拉给的文案内容都不一样,可能是告诉用户 app 里的一些功能,可能是一句很贴心的问候,可能是一句卖萌求好评等等。

我有尝试过20多次,每次都是不同的问候语,每一句话都很意外很惊喜,这种刷新的方式不但不会让用户感到烦躁,反而会不断勾起用户好奇心,吸引用户不断刷新。

四、运营维度

运营维度的话,一般是指活动运营,并且一般是下拉后跳转至一个 H5页面。

感觉运营维度可以发散很多,下拉领取红包,下拉送券等等。

比如去哪儿旅行的国际暑期大促活动;

比如房多多的看世界杯 瓜分购房基金活动:

比如优酷在下拉里面加入了运营广告位:

五、反馈维度

反馈维度,可以这么理解,用户下拉后系统会给出哪些指示以及下拉后的反馈状态,或者说给用

您可能想查找下面的文章:

  • 交互基础小课堂!从五个维度全面分析「下拉刷新」功能

相关文章

  • 2018-08-23网易可用性优化实录!如何让你的交互设计自查表真正用起来?
  • 2017-08-06DIV以及图片水平垂直居中兼容多种浏览器
  • 2018-08-23人工智能与设计零基础手册!发展历史和定义+底层设计阐述
  • 2017-08-06button带一个灰色的边框很难看如何去掉
  • 2018-08-23Helvetica 字体60岁了,它是如何变成了人们生活中的日常?
  • 2017-08-06网页FOUC问题导致网页混乱的解决方法
  • 2017-08-06设计参考 WordPress建站成功案例
  • 2018-08-23全民K歌歌房是如何设计出来的?让腾讯的体验设计师告诉你
  • 2017-08-06浅谈浏览器的兼容模式下的button中文字垂直方向不居中显示
  • 2018-08-23单身设计狗春节自救指南!速看!

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 超实用!手机摄影如何拍出高大上的感觉?
    • 编写Web前端代码的注意事项小结
    • CSS样式表高效使用技巧充分利用样式表的强大性
    • 懒得试配色方案,有其它的解决办法吗?(附常见搭配)
    • 这5个牢不可破的设计规则,是你打造优秀动效的标准
    • 设计实战:教育产品组件化交互设计的实践与思考
    • 原型工具哪家强!我从10个角度对比了素描和Axure的优缺点
    • 关于开发手机网站的一些总结
    • 产品迭代中,如何做到视觉设计的继承和升级
    • 没灵感?这里是最全的15个设计风格总结!

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有