给用户带来新的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-05-04
  • 清华美院交互设计考研经验分享:考试要懂得“扬长避短”

    2018年清华美院交互设计-黎娜大家好,我叫黎娜,我本科毕业于广州美术学院工业产品设计系。产品设计主要是偏向于生活家居类的小产品。我大概是在去年快毕业的那段时间第一次从考研的同学那里了解到“信息艺术设计交叉学科”,2017年6月底就决定报考这个专业。接下来我想与大家分享的是自己的一些备考经验,希望能对你们有一些帮助。第一部分是关于专业一“上机”考试。我认为上机考试最重要的两部分分别是app和ppt。  app的练习方法有很多,这里我想分...

    2018-04-23
  • 网络心理学与用户体验:如何使用户爱上我们的产品?

    什么是网络心理学?网络心理学(Cyberpsychology)是研究人与科技交互的背景下人们的心理与行为的新兴学科。它关注网络世界以及网络对人们行为产生的影响。近年来,网络心理学逐渐脱离其他研究人类行为的学科(如社会心理学),形成了自己专门的心理学研究领域。了解来自这个新领域的研究可以帮助设计人员更准确地预测人类在使用不同技术时会如何反应。因此,在思考如何使用户爱上我们的产品时,了解网络心理学是一个非常有用的手段。通过更好地理解用户与技...

    2018-02-23
  • 程序员如何应对「给我弄个网站吧」的请求?

    点击上方“程序人生”,选择“置顶公众号”第一时间关注程序猿(媛)身边的故事编者按:昨天,我们在这篇《“你是程序员,帮我修个电脑吧” “不会,滚”》的文章中,发起了个投票。结果发现三个选项中,打败「修电脑」,位居榜首最令大家“抓狂”的选项,竟然是「我想要创业,你帮我建个网站吧,就像淘宝那样的,一定很好做吧」。一般,遇到此类情况,我们可以选择两种处理方式:第一种,直怼式。例如:“我给你1000块,你帮我做个淘宝,就和马云的淘宝一样的” “你...

    2018-04-08
  • 美国交互设计“综合类amp;艺术类”院校申请差异对比?

    回复【交互】,获得专业老师一对一专业指导随着现今数字智能等高科技的发展,交互设计成为近些年众多艺术留学生的热门首选专业。但热门并不代表很多同学都对交互设计有所了解,比如,根据向汉艺咨询的学生情况分析,90% 的同学都分不清什么是到底什么是交互,只是很表面的认为交互就是各种“APP”、“UI设计”或者VR/AR。实际上,即使国外最顶级的院校,你也找不到一所专门设立“APP”的专业,“UI设计”严格上来说只能算是“平面设计”,而设立VR/A...

    2018-05-04
  • 你在无意中就打破了用户体验设计中最重要的规则!

    以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。产品设计中最重要的规则,可能是产品的周期管理。每个人都应该遵守一定的重要规则,特别是那些从事产品设计的人。而许多设计师却日复一日地在设计中违反规则,而这是绝对不利于他们的设计的。在本文中,我将解释什么是设计中的重要规则,以及它对产品和服务中意味着什么。我还将在组织管理、协作和总体性能方面提出这一现象存在的可能含义。在这篇文章中我所要讨论的心...

    2018-02-13
  • 2018年交互设计的6大趋势

    ♝点击上方“交互设计学堂”关注我们,送电子书设计是围绕人解决问题,因此对2018年交互趋势的预测,我们将目光聚焦在细腻的情感体验打磨、达成目标的交互介质、解决问题的效率、发生交互行为的场景这几个方面,探究出了以下6大趋势:全感官体验All-sense experience趋势简述人有五感,强化体验记忆的最有效方式就是五感相结合。看见、听见信息已成为体验常态,而更真切的感知信息是用户体验升级的客观诉求,全感官体验能更好的打造“身临其境的沉...

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

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

    2018-01-30
  • 交互设计脉络概要

    一般做交互设计师有的是刚毕业的时候就会去做。也有的是本身是做视觉设计的,然后在未来的职业规划可能对交互设计感兴趣,所以呢,有时候对产品说,我想转交互行不行,那其实整体还是要看公司对你的角色的一个定位和是否给予的机会了。当然啦,很多机会是靠你自己去争取的,这个无论是在公司本身或者另外的公司,就自己去考量自己人生一个选择。一:什么是交互到底交互设计的一个定义是什么呢,因为了解一个新行业我们首先需要知道的就是他的定义,这样才是一个准确的、一个...

    2018-04-28
  • 从用户体验的角度谈多数RPG战斗系统中的缺陷

    在为RPG创建战斗系统时,多数开发者首先会考虑到这个问题:“游戏中的各个角色会有哪些优势和弱点”。四大元素系统基本的战斗系统之一是,带有水、火、风、土的“四大元素系统”——水比火厉害,火比风厉害等等。这一系统适用于元素不多的游戏,因为玩家几乎立刻就会明白哪些元素能对敌人造成更大伤害。在现实生活中,不同元素的相互作用是众所周知的,因此开发者可以在不提供大量教程的情况下使用这些现实生活中的元素。但如果将这个系统进行延伸的话,就会导致交叉优势...

    2018-04-17