SVG交互图文中的交互方式无非3种:点击、滑动和长按。
按钮引导用户进行交互,每一次交互后面都藏着内容,好的按钮具有强烈的引导性又不会破坏整体美观度。
之前给大家整理了点击和滑动的按钮设计大全,今天咱们再来看看长按的。
我们整理了Airbnb爱彼迎、梅赛德斯-奔驰、vivo等40个引导「长按」案例,将其分为按钮、手势、圆圈、文字、指纹、箭头、其他特殊形状7类「长按」设计样式,一起看下。
1、按钮
来自「梅赛德斯-奔驰客户服务」:
用按钮引导用户长按是最为常见的一种设计,这样的设计可以适用于绝大部分的图文内容。
*图片分别来自「Airbnb爱彼迎」「乔万尼时尚女装」「恒生中国」
2、手势
来自「宝马中国」:
用手势引导大家「长按」,能够使交互提示更明显,而且可以根据图文内容设计不同的手指。
*图片分别来自「施洛华眼镜」「一汽大众奥迪二手车」「Chopard萧邦」「舒化」「iRobot机器人」「别克」「雷克萨斯中国」「FOTILE方太」
3、圆圈
来自「一汽大众奥迪二手车」:
用圆圈引导大家「长按」,能够使交互提示和图文内容结合的更紧密,而且可以设计为动态按钮,让提示更明显。
*图片分别来自「AlexanderMcQueen」「沈阳市府恒隆广场」「佳叽Jargee」「MARNI」「捷豹路虎中国」「长安马自达」
4、文字
来自「OPPO」:
用简单的文字提示也能达到很好的提示效果,在设计上可以采用渐隐渐显的动效,使文字提示和正文区分开。
*图片分别来自「凯乐士科技」「万宝龙MONTBLANC」
5、指纹
来自「梅赛德斯-奔驰」:
指纹做的引导按钮在视觉上会显得更加精致和具有设计感,一般结合引导长按的文案进行呈现,也适合增加渐隐渐显的动画,突出主体。
*图片分别来自「梅赛德斯-奔驰」「一加科技」「德国BEBA3」「PRphoto」「一汽丰田丰享汇」「Bananain蕉内」「OnitsukaTiger」「宝马中国」
6、箭头
来自「长安马自达」:
箭头做的引导按钮会更具有设计感,一般是在提示文字的两边或者某一侧边加上箭头用作修饰,引导用户进行交互。
*图片分别来自「老碗会」
7、其他特殊形状
来自「梅赛德斯-奔驰」:
除了常规的按钮、手势、圆圈、文字、指纹、箭头等设计,也可以通过排列组合不同的形状设计成长按引导按钮。
*图片分别来自「德国BEBA3」「长安马自达」「北京现代」「梅赛德斯-奔驰客户服务」
附:
如果你还查看更多视频号图片相关案例,可以到「品牌时光机」交互图文案例库(网址:brandtime.cn)按交互类型分类去查找。
目前总案例数已达37000+,其中5000+案例支持一键还原。点击一下,案例图文就在编辑器中给你整整齐齐排好了!
现在新用户注册登录iPaiban Pro 黑科技编辑器,在「新手礼包」可领取3天企业标准版会员体验权,以及22个常用必备组件的大礼包(1年)。
认准编辑器网址:x.iPaiban.com,复制网址在 PC 端 Chrome(谷歌)浏览器打开,即可开始创作SVG交互排版(又称公众号交互图文、互动图文、黑科技排版、互动式排版)