刷新设计的千奇百态(UI设计)

2022-7-6    seo达人


前言

刷新在产品中属于基础功能,方便用户获取最新动态,是普及度较高的基础功能之一。在设计表达时有系统级表达、自定义设计、多功能结合等,设计发挥的可控性较大。

今天黑马哥就结合一些优秀的线上案例,和大家聊一下关于产品刷新设计的千奇百态,希望抛砖引玉,和大家一起进步。

 

分享目录

一、关于刷新设计

二、刷新的设计形式

三、线上优秀案例分析

四、总结

 

一、关于刷新设计

在产品中刷新对于用户来说并不陌生,是经常使用的基础功能,便于用户获取新动态。在一些可以提供内容更新的产品中,刷新获取内容变动是较为常见的形式。

大家都习惯将刷新称呼为下拉刷新,其实刷新的动作不仅限于下拉手势交互,也有产品采用单击和上滑等手势交互实现刷新动作。比如一些产品在滑动浏览内容时,底部标签栏首页图标会变为刷新的操作,通过点击实现页面内容的刷新;也有产品在上滑页面时实时加载完成刷新,就像很多影视类产品或者瀑布流设计的产品。

 

图片

 

刷新动作不仅可以满足用户的求知欲,也能通过源源不断的内容增加用户黏性,提高用户的使用体验。

 

 

二、刷新的设计形式

简单的刷新动作已经不是简单的设计了,在产品设计师的创新中呈现出了众多的优秀案例,下面为大家梳理一下不同的设计表达形式。

2.1、系统级表达

系统级表达是采用系统默认的一些处理形式,类似于花瓣循环的动态形式,属于比较常规的表达。也有很多产品采用系统级形式,用户理解度较高,设计创新的角度来说欠缺一些,表现形式比较生硬。

图片

 

2.2、情感化文案表达

为了带给用户更有温度的设计,除了在图形层面进行情感化设计发挥,在文案上面也可以更加情感化。有产品使用俏皮可爱的话术,每次用户刷新都呈现不同的文案,与用户产生情感共鸣。

图片

 

2.3、动态形式结合

刷新的动态表达形式非常普遍,图形动效和动作演变等,能够体现出加载的动作。动态形式结合可以使得趣味性更强,动画演变的过程也能降低加载等待过程中的焦虑感。

图片

 

2.4、IP 形象结合

IP 形象结合到 UI 场景中不仅可以强化品牌感,也能带来更加情感化的体验。IP 形象结合到刷新设计中,伴随着动态演变,以此来体现加载的过程。设计形式动感化,趣味性强且感官体验较佳。

图片

 

2.5、品牌基因结合

立足于品牌做设计,品牌感可以带来差异化的设计表达,也能提高用户对品牌的记忆度。很多产品将品牌 LOGO 图形、辅助图形、品牌字体、品牌风格特征等融入到刷新设计中,带来差异化的刷新体验。

图片

 

2.6、业务属性结合

根据业务特征设计刷新图形,让用户在刷新的过程中感知产品的业务属性,也是强化记忆点的有效形式。

图片

 

2.7、多功能结合

刷新设计更多的还是为了给用户提供更多动态内容,除了这个底层需求以外,也有产品结合了多功能设计。比如下拉刷新到一定距离可以激活“二层楼”,进入活动空间或者其他功能模块,也有结合浏览记录等展示。多功能结合赋予了刷新更多玩法,在有限的资源空间发挥更多操作价值。

图片

 

2.8、其他设计形式

随着体验的重要性升级,产品设计师会在更细微之处探索出更优的解决方案,做出差异化的体验设计。而刷新功能也将会呈现更丰富的设计,从感官层面带来更多视觉感的表现,从体验层面结合更多辅助功能或者业务,发挥更多使用价值。

 

 

三、线上优秀案例分析

通过以上的梳理我们对刷新设计有了深入的了解,下面通过一些优秀的线上案例来进行分析,辅助大家掌握更多差异化的设计表达。

3.1、情感化的文案设计

刷新除了在图形设计和动效层面发挥以外,多功能结合和文案设计也是差异化表达的方向。文案提示的设计相对比较特殊,通过不同的文案来打动用户的体验。

喜马拉雅 APP 每次下拉刷新时,都会显示不同的文案内容,有功能引导的提示文案,也有与用户共鸣的温馨提示等。情感化的文案设计让刷新更有温度,不失为一种差异化的功能设计探索。

图片

 

3.2、动态化 IP 形象

针对下拉刷新这一常规操作,设计形式也是丰富多样。结合 IP 形象进行动态演变完成刷新动作,被很多产品设计师所采纳。

美团外卖就将品牌 IP 形象结合得恰到好处,下拉刷新时两只耳朵摇摆非常俏皮可爱,松开后 IP 形象露出,还配合眨眼睛等可爱的表情动效。情感化设计结合动态表现,拉近与用户之间的亲和力,带给用户更人性化的使用体验。

图片

 

3.3、刷新带来美食诱惑

在完成刷新功能属性的同时,还能将产品的属性或者服务卖点强化出来,赋予了常规操作更多的功能价值。

麦当劳在麦麦商城栏目的下拉刷新设计中,采用汉堡形象结合层级动效进行表达,让人眼前一亮。动效拉长的汉堡不仅体现出份量感,激发用户的食欲;汉堡形象就十分麦当劳,展现出品牌关联性。

[优化输出图像]

 

3.4、趣味化 IP 形象

IP 形象结合到刷新设计中的案例非常多,不仅可以带来情感化的体验,也能增加功能操作的趣味性。半次元在下拉刷新时不仅结合 IP 形象,还通过下拉的程度将形象拉长,最后再配合表情和动态营造出趣味性。

[优化输出图像]

 

3.5、动态 IP 完美结合

转转的 IP 形象头部的转动条是其特征所在,在下拉刷新过程中完美的结合了转动条,还伴随着装饰符号散开的效果。不仅贴切的结合了 IP 形象的特点,装饰元素的动态效果也强化了氛围感,非常符合产品的属性,是一个不错的刷新设计案例。

图片

 

3.6、品牌化路径动效

刷新设计中采用路径动效的表现形式比较多,主要集中在图形路径动效和品牌文字路径动效,图形通常是品牌 LOGO 为主,这一类比较适合图形趋近于线性的表达中。链家 APP 的下拉刷新就是 LOGO 图形进行路径动效,完美的匹配了图形轮廓,动效的流畅度也比较自然。

图片

 

从品牌层面着手于刷新设计,如果放弃图形层面的元素选择,品牌字体的选择也是一个思路。得物 APP 将品牌名称的字体直接运用到刷新设计中,以路径动效的形式进行表达,最终将笔画打散散开。设计表达依然延续了品牌感,也区别于其他产品的刷新设计,在差异化方面呈现出了自身的品牌特征。

[优化输出图像]

 

3.7、一路骑行的芒果崽

芒果 TV 的下拉刷新设计结合了吉祥物芒果崽,下拉刷新的过程就是一路骑行的芒果崽。骑行的沿途中有众多地标建筑的剪影,下拉不松手就会一直处于骑行状态,下拉的反馈体验度做得很好。

图片

 

3.8、漫步的卡通形象

利用动态卡通形象作为刷新设计案例较多,特别是行走和跑步,这一类都比较贴合刷新这一动态表达。比如在少年得到 APP 中,在下拉刷新过程中以一个背着书包漫步的卡通形象进行表达,流畅的动效完美的呈现了学生放学或者上学时,背着书包漫步的场景。这样的呈现方式不仅贴合功能含义,也能与用户产生更好的情感共鸣。

图片

 

3.9、业务化的 3D 图标

友啥 APP 利用 3D 图标进行循环切换代表刷新过程,带有业务属性的图标不仅可以直观的突出产品特性,3D 图标化之后视觉感十足。图标切换带来的动效流畅自然,匹配刷新动作的差异化也非常明显。

图片

 

3.10、刷新动作下的多功能结合

刷新已经不局限于内容更新这一单一需求,一些电商类产品也赋予了刷新多功能的属性,带来更多样化的操作体验。

比如淘宝 APP 首页下拉刷新时,短距离下拉依然属于刷新范围,继续下拉则会提示释放进入淘宝二楼。在保持刷新基础功能的前提下,融入了多功能场景,开发出功能或者活动的全新曝光入口。

图片

 

在商品详情页时下拉则无法提供刷新服务,为了给予更好的反馈设计,下拉动作便会显示我的足迹。不仅可以在用户习惯性操作时给予反馈,足迹的提供也更方便用户做出选择。

图片

 

同一个产品也并非只能呈现出一种刷新设计方案,不同的业务场景可以使用不同的表达。淘宝 APP 里面便根据场景的不同提供了多种刷新方案。常规界面的刷新便以品牌字“淘”作为设计出发点,刷新的过程以动态形式表达品牌字,简单粗暴的传递出品牌感。

图片

 

3.11、结合 Slogan 完成刷新

刷新不仅只是内容的更新,产品设计中呈现出更丰富的表达,比如辅助传播活动、宣传品牌形象和 Slogan 等。产品设计师都在赋予单一功能多重使命,带来丰富多样的使用体验。

58 同城首页在下拉刷新时,除了体现刷新动态以外,也展示了 Slogan “让生活简单美好”。借助刷新入口的曝光度,更快的将产品的定位传递给用户,增加用户对产品的好感度。

图片

 

3.12、保持格调一致的设计

很多小众的产品在设计上面呈现出比较有格调的设计,区别于常规的氛围营造,设计风格更加简约大气。

屋颜 APP 整体的设计风格就属于比较简约文艺,在下拉刷新的设计中也保持了这个风格特征。以生活物品演变出的线形图标体现刷新的过程,整体的过度和衔接也恰到好处。

图片

图片

 

3.13、探索式的刷新设计

刷新设计除了图形、动效、文案等层面发挥以外,背景层发挥的案例相对较少,除了配合传播性质的设计。

AcFun 在下拉刷新时,背景层设计成类似于宇宙空间的插画场景,刷新的过程就像探索一样。配合卡通形象左顾右盼的动效,带来的感官效果也是非常不错的。

图片

 

关于刷新设计的优秀案例很多,这里就不一一例举了,以上案例仅作为抛砖引玉形式的引导。大家根据这个框架多多体验产品,总结更多的优秀案例。

 

 

四、总结

刷新设计作为产品中使用较为频繁的基础功能,与用户的接触也是非常密切的,设计的重要性因此不言而喻。无论是突出品牌感、趣味性、差异化还是强化感官层面的体验,或者是多功能结合等,都是产品设计师重点发挥的模块之一。

本文以案例分析为引导,为大家梳理了刷新设计的形式与思路,希望可以抛砖引玉,带给大家更多的设计灵感。总结观点属于个人理解后的呈现,如有欠缺大家选择性吸收和修正补全。

 

原文地址:黑马家族(公众号)

作者:黑马青年

转载请注明:学UI网》刷新设计的千奇百态(UI设计)

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档