交互学堂
专注分享专业知识

给用户带来新的feel|5个好玩的交互设计效果


真正的科学家应当是个幻想家;谁不是幻想家,谁就只能把自己称为实践家。

—— 巴尔扎克


近期在工作中偶然发现的3种移动界面布局,从移动端的分辨率、配合设计布局变化的web端响应式、以及H5的设计布局。另外加上2个好玩的设计方式,更多的让点击率、产品凸显展示,总共5个好玩的交互效果给大家分享。


开发资源不够或快速上线的页面交互设计

给用户带来新的feel|5个好玩的交互设计效果


上图在专业术语中叫做流体交互效果,这种交互效果的好处与坏处


优点:避免小分辨率的情况下,出现水平条的情况。

缺点:分辨率小的时候会拉长图片,导致难阅读


开发资源不够,快速迭代的产品同学不会考虑产品的适配问题,不做适配的页面会出现什么结果?那就是页面变形,如下图本来是移动端的H5设计页面,但当用PC端打开链接则出现变形。


给用户带来新的feel|5个好玩的交互设计效果


有什么样的方法解决变形的问题?可通过固定长度来解决


  • Touchend:判断是否需要滑动,用css3 配合页面滑动或归位

  • Touchmove:move过程中不断获取当前坐标值,计算位移值,肤质改变元素的matrix值

  • Touchstart:获取初始Y坐标



给用户带来新的feel|5个好玩的交互设计效果

固定宽度页面的布局,可以保护页面不会变形,在跨平台中可尽可能的减少用户体验的丢失,但仍然会有一个问题,对于空白的区域无法控制。


响应式布局交互设计

响应时布局交互效果


给用户带来新的feel|5个好玩的交互设计效果

响应式布局是基于移动端互联网新期的前端设计,在保留后台原有基础功能下,响应式设计诞生在移动端为了给予用户带来更好的体验,核心是体验上的变化与优化。整合从桌面到手机的各种屏幕尺寸和分辨率,用技术来使网页适应从小到大(现在到超大)的不同分辨率的屏幕。

缺点:需要新的UI设计、前端开发,导致同样的产品页再次设计和开发。甚至需要后台接口重新设计


H5的3种交互分类设计


给用户带来新的feel|5个好玩的交互设计效果

在设计运营或普通的H5页面,你有没有考虑过该类型是展示型、游戏型、产品型的哪一类?在现在移动端小程序的新红利下下,产品型的H5设计是其前期的雏形。


能够及时了解当前负责产品H5页面类型尽可能的将应用在所归属的场景,例如产品介绍H5页面对应展示型。带有游戏趣味的应该利用游戏型H5交互设计。


移动端或web端产品icon交互设计

当我们的一个icon是一个页面转化的关键路径,是否能够影响转化率?答案是肯定的。以下图为案例我们看当这个icon有文案或只有图示,对用户来说谁会更明显?



    给用户带来新的feel|5个好玩的交互设计效果

上图中,带有文字的icon点击率比没有icon的button高20%,当该入口为订单购买?支付?相信带来更多的点击率将转化为更多的产品。文字表意更明确,用户更容易理解,更容易触发用户去操作。

好的交互效果,是否可以页面内容与产品的对焦是否可能凸显产品?带来更多的转化?这是一个偏向设计的问题,之所以把这个case拿出来是发现这个图非常有意思。

给用户带来新的feel|5个好玩的交互设计效果

上图带来第一个feel,用户注意力通过页面女主角眼神让目光更容易聚焦在产品本身上。

    

另外如果你想和Kevin和他的产品朋友交流,目前我个人建立了一个QQ群,我会把自己的产品案例和分享第一时间在里面,这个QQ群会上传我的一些个人常用原型和产品心得,并且有任何产品问题都可以在这里得到回答。


给用户带来新的feel|5个好玩的交互设计效果     给用户带来新的feel|5个好玩的交互设计效果


为方便管理,付费后才可加入,转账后加我微信:574319420备注

【加群】,我会拉你进群


给用户带来新的feel|5个好玩的交互设计效果

连续签到2周,退回20元

签到形式:每天的产品感悟和产品想法都可以

2018年,让我们继续前进!


给用户带来新的feel|5个好玩的交互设计效果

赞(0) 打赏
未经允许不得转载:IAMUE » 给用户带来新的feel|5个好玩的交互设计效果

交互学院

在线学习交互设计课程1元秒杀Sketch入门课程

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏