真实世界里物体皆有质感，交互设计里动效表现亦然 - 优设网 - UISDC

真实世界里物体皆有质感，交互设计里动效表现亦然 - 优设网 - UISDC

微交互真实世界里物体皆有质感，交互设计里动效表现亦然

产品：榫卯 iOS 作者：tagDesign 时间：2018-08-17

猎人：小白观众：3856人

细节描述

小白：真实世界里所有的物体都有其独特的质感，交互设计里动效的表现也应有自己的个性与质感。所谓交互动效的质感，最常见的体现就是对动效速度与节奏的微妙把控。「榫卯」作为一款体现传统民艺文化的App,不仅视觉设计出众，交互体验也十分让人惊喜。整体偏舒缓的动效速度，呈现了产品的优雅气质。符合物理世界物体惯性规律的慢入慢出效果以及重力感的表现，使用户在交互操控体验上更自然具有真实感。图标的状态切换动效还模拟了榫卯结构拆分组合的效果，有趣又浪漫，让人惊喜。

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

本篇知识点及话题# tagDesign # 中国风 # 图标 # 形象思维 # 微交互 # 情怀 # 榫卯 # 物理意象 # 趣味性

发表评论加载中....

评论加载中....

相关细节

视觉「36氪」解锁默认头像的新姿势

「游客」状态是用户使用App的第一状态。「游客」状态下，用户使用的都是App的默认头像。一般默认头像的设计都大同小异，但「36氪」的默认头像被团队设计成了潜水员的样子，独具一格。很形象得表现出了用户处于「游客」状态下的「潜水」行为。形象思维的运用，让用户的体验十分具有代入感。

产品：36氪Android 作者：36氪设计团队猎人：小白

设计彩蛋 iOS12控制中心里会变换光芒的小太阳

在iOS12的控制中心面板里，不仅藏有计时器图标和手电筒图标动态变化的小彩蛋，屏幕亮度的调节操作也伴随着很隐蔽的小细节变化。当手机屏幕的亮度被调得较低时，控制中心里表示亮度的小太阳图标呈现圆点样式的光芒。当亮度被调高，太阳图标的圆点光芒则会慢慢变成向四周发射的线状。运用形象的视觉表现展现了光线由暗变强的变化，既助于用户理解行为的状态反馈又让交互过程变得有趣。

产品：iOS系统作者：Apple 设计团队猎人：小白

微交互每天拉开「抽屉」看新闻，最新资讯全知道

「抽屉」是一个另类资讯应用每日网罗最新热点资讯与有趣故事段子。其内容见仁见智我们暂不做评论，今天想聊的是它的下拉刷新交互设计。如同「抽屉」这个名字，每一次资讯的下拉刷新就像抽屉的一次抽拉。下拉时页面顶部会出现一个旋转的笑脸和一句随机的文案，这样刷新的过程具有了可读性就对用户等待的焦虑感起到了缓解作用。滑动的过程有一种很「爽」的「弹力感」而不像一般的下拉反馈那样干涩。「爽」的交互体验能激发用户刷新页面的次数，悄悄霸占了用户花费在App上的时间加强了用户粘性。其实第一次使用另一个App「MONO」就被这种类似的「弹力感」下拉刷新交互所吸引，但不知为何改版后的MONO却去掉了这个体验。如果有小伙伴对MONO下拉交互的改版内幕有了解或对这种交互方式有自己的见解，欢迎留言讨论哟～

产品：抽屉 iOS 作者：抽屉团队猎人：小白

用户体验要开唱了吗？全民K歌，给你递麦

很多App的底部导航总有各式各样的细节展现带给用户惊喜，腾讯出品的「全民K歌」也不例外。当用户心血来潮想要高歌一曲，点击底部导航中间的按钮进入点歌页面时，按钮中握着麦克风的手会有一个「递出」的交互动效展示。这就像现实中即将上台演唱歌曲时工作人员将麦递给演唱者的场景一样，「给你递麦，接下来这个舞台就交给你啦」的意思。通过情感化设计，给予即将演唱的用户一种鼓励与信任的感觉，拉近了App与用户之间的距离。投稿人：格尔

产品：全民K歌 iOS 作者：全民K歌团队猎人：小白

优设精选专题查看更多

110952人看过 7篇文章

每月前端法宝

全栈设计师的最爱

每个月最新的前端开发框架，各种新鲜的工具和宝贝层出不穷，没错~都会收集到这个专题里，让你的前端工作效率突飞猛进。

440785人看过 14篇文章

表情设计

上亿人使用的表情是怎么诞生的？

想知道你每天都在用的表情都是如何设计出来的？这里不仅有背后的设计故事，还有表情绘制技巧和设计师专用表情包，让你成为表情包大师！

652070人看过 22篇文章

Banner 设计

从基础到进阶的终极设计宝典！

本专题堪称Banner 设计自学指南，从最基础的四大构成元素，到每个元素的设计方法都有超全的干货说明，针对每年的重要电商节日，还发了专题教程。除了教程和方法，还为电商设计师贴心准备了职场规划，快点下你收藏的小手吧~

327430人看过 13篇文章

设计趋势

流行设计一目了然

道法术器势，看了那么多专题，设计理论、方法和神器已经不再话下，想成为高手，就差借势了。收藏好这个专题，每个月都会更新最新的设计趋势，让你洞悉设计趋势，紧跟设计潮流。

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

情境交互设计：为生活而设计（第二版）

可作为国内互联网公司UED团队的日常工作指导用书

Karen Holtzblatt

清华大学出版社

用户思维

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

约翰·沃瑞劳

中国友谊出版公司

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

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

唐纳德· A · 诺曼

中信出版社

用户体验要素

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

Garrett

机械工业出版社

用户至上

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

Kathy Baxter

机械工业出版社

色彩设计法则

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

梁景红

人民邮电出版社

书到用时方恨少 > >

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

扫码关注

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

访问官方微博

您还没有登录

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

微信扫码

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

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

把好文章收藏到微信

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