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

真正的科学家应当是个幻想家;谁不是幻想家,谁就只能把自己称为实践家。—— 巴尔扎克近期在工作中偶然发现的3种移动界面布局,从移动端的分辨率、配合设计布局变化的web端响应式、以及H5的设计布局。另外加上2个好玩的设计方式,更多的让点击率、产品凸显展示,总共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个好玩的交互设计效果

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36507/

(0)
交互精选交互精选
上一篇 2018-04-17
下一篇 2018-04-17

相关推荐

  • 基于交互体验下的包装视觉传达设计研究

    红河学院美术学院 文俊鸿摘要:包装视觉传达设计中交互体验的表现成为其设计重点,消费者与包装产品设计的关系更加紧密,让消费者在包装设计使用过程中感受到包装设计与消费者的情感交流互动,增强消费者视觉感官交互体验。采取理论研究和案例研究相结合的研究方法,对现代交互设计在包装视觉传达设计应用进行研究,让产品包装与消费者的联系更加紧密,让消费者的心理情感和视觉感官获得更具冲击力的体验,更为有效地实现包装设计与消费者的情感交流互动和传达。关键词:交...

    2018-01-30
  • 交互设计 — 专业四大方向解读

    随着大众对设计概念的认知不断提升,互联网行业和智能科技的发展,以及社会创新、生态环境、跨界实验、用户体验发展问题的突出显现,交互设计专业已然成为了出国留学的热门选择。无论是否为设计背景出身,是否掌握了对应的技术软件,是否对交互的原理有明确的概念,是否在产品运营和商业分析的行业中有一定的工作经验,大众都觉得自己已经熟知了交互设计专业。但实际上,尽管检索了不少学校的官网,查看了交互设计以及跨界行业运用的专业介绍,浏览了知乎网站和各类信息资源...

    2018-03-19
  • 怕思考 — “Axure基础入门思维”

    我想说:“集思广益里诞生着灵感”虽然画原型图的软件有不少,但我并没有过多的去留意这件事,也许我最先知道的是Axure,所以就有了接下来的事情。其实对于Axure我也只是懂些皮毛,其操作起来并不是很熟练,但我在这上面有了一些发现和思考,我认为是值得分享的。首先Axure是什么?,我自己的理解是“Axure是一款帮助我们画出想法,理清思路,有益自己或团队交流规则和信息的工具”。Axure的模样(Axure RP 8)!当我们打开Axure软...

    2018-04-29
  • 交互设计:超越人机交互(原书第4版)

    本书由交互设计界的三位顶尖学者联袂撰写,是该领域的经典著作,被全球各地的大学选作教材。新版本继承了本书一贯的跨学科特色,并与时俱进地更新了大量实例,涉及敏捷用户体验、社会媒体与情感交互、混合现实与脑机界面等。全书紧紧围绕设计与评估的迭代过程,不仅包含了传统的理论知识、实例解析、实践指导等内容,还通过“窘境”模块讨论了一系列启迪思考的开放问题。此外,本书网站www.id-book.com也为读者提供了丰富的资源,包括教学PPT以及大量的案...

    2018-03-09
  • 【用户体验】Chiphell论坛网友Raise3D N2打印体验实录

    以下是来自Chiphell论坛的一位@xm79 网友的使用Raise3D N2 3D打印机后的体验分享帖。让你看到Raise3D N2 3D打印机最真实的一面。之前用了好一阵工作室的makerbot 之后,也想着买一台自己的。主要每次打都要排个队,十分麻烦。而且每到出图季就要没日没夜的看守在打印机旁,通宵不起了。思量着买一台放家里吧。本来考虑着买makerbot的,因为速度是真的快,软件算法比用ultimaker系的快了一倍。但是问题就...

    2018-02-05
  • UI|人性化交互设计 美食订餐网站

    类别:美食网站设计:BASOV(乌克兰)今天品牌先生为大家分享乌克兰 BASOV 工作室设计的一款美食订餐的网站。从选餐到订餐下单,设计师进行了很便捷的交互设计,让网站尽到最大的便捷和简约,这样客户也会爱上这样的网站。网站的建立不单单是界面UI设计出漂亮的界面,包括客户的需求和网站的结构等等,此款网站在前期原型交互设计上的用心在图中也都体现了出来。▼(品牌先生独家整理,转载请告知或注明出处)UI-- END --请点击下方“阅读原文”去...

    2018-02-21
  • 写给产品经理和设计师的用户体验知识

    从2015年起,我陆续写了《写给产品经理和设计师的用户体验知识》系列文章,得到了大家的肯定,此篇文章是这个系列的最后一篇文章,算是给这个系列画上句号。作者:刘涵宇腾讯高级产品经理1用户场景用户场景这东西,或许每一个产品经理和设计师每天都在用,但我查了很多资料,还真的很难找到一个准确的定义。所以,我试图结合我自己的理解,自己去定义它。我认为用户场景有两层属性,分别是:「工具属性」和「思维属性」。用户场景首先是一种对过程逻辑的阐述方法,简单...

    2018-04-19
  • 基于用户体验的性能测试:模拟个别的用户延迟(续)

    本周免费下载杂志:《保健与生活》共计12本,请点击下行红色文字链接获取下载地址杂志推荐《保健与生活》3.       在TestStudio中生成时间延迟使用Rational TestStudio的VuC语言,有很多方法可以生成时间延迟。对于如何使用Think_avg及相关的命令和参数来实现,Rational的文档和培训资料已经做了详细的说明,这里不做深入讨论,只做简要介绍。这个方法只有在Think_avg命令不在计时器(Timer)里...

    2018-02-01
  • “创造完美的用户体验。” 中国最当红工业设计师 —— 杨明洁

    Designer100是+86设计共享平台推出的中国高端设计师第一推广品牌,致力于设计师推广的全球巡展、设计师大奖、视频计划、沙龙论坛的社会公益项目。杨明洁YANG DESIGN及羊舍创始人福布斯中国最具影响力设计师同济大学及南京大学客座教授融合了德意志逻辑思维与中国人文精神的设计理念,也使得杨明洁成为了包括波音、奥迪、宝马、博世、飞利浦、英菲尼迪、可口可乐等众多国际顶尖品牌的合作伙伴,从眼镜箱包到飞机内舱,从消费电子到交通工具,从茶具...

    2018-02-26
  • 设计干货|聊聊设计师玩转Sketch的那些事儿

    点击蓝字关注GOMEOS用户体验设计1调整组内图层父级变换属性新的调整大小选项可以帮助我们更灵活地调整对象与子层之间的响应:1. 默认属性下的成组放大缩小变化,内部的图标跟随组的缩放比例进行变化.2. 锁定图标的固定宽度&固定高度,成组的缩放比例不会影响到图标的比例与尺寸.3. 当锁定上部及右部间距时,成组缩放比例时,图标距离组内上部及右部的距离保持不变.2嵌套样式这个十分强大的功能使得symbols的复用更加的强大,可以同一内容复用多...

    2018-04-04