给用户带来新的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

相关推荐

  • 用交互体验方式感受人类智慧结晶

    2017年9月26日,中国科技馆“华夏之光”展厅经过为时半年的更新改造后,将面向公众进行试运行,并于10月1日正式重新开放。“华夏之光”展厅位于中国科技馆主展厅一层,设有“中国古代的技术创新”、“中国古代的科学探索”、“华夏科技与世界文明的交流”三大主题分区,围绕不同主题,讲述中华民族在生存发展过程中不断创造与发明、探索与发现、交流与融合的科技故事。此次封厅改造是在原有展览的基础上进行的局部性升级换代。“华夏之光”展厅维持原有展览框架,...

    2018-01-30
  • 100本UI设计/交互设计PDF电子书资源,UI设计师进阶必读书目,还在持续更新哦【024期】

    好素材,不加班今天小编为您精选了【100本UI设计/交互设计PDF电子书】大小:3.07G提供方式:百度网盘获取方式:请查看文章底部部分书籍展示领取素材的方式长按二维码回复:024长按二维码回复:024长按二维码回复:024无需分享直接获取素材热门素材推荐▶UI设计师作品集模板,PSD格式【001期】▶设计项目展示经典范例四套【002期】▶三套2.5D插画设计素材合集【003期】▶C4D设计素材包含建筑【004期】▶100多套欧美网页设...

    2018-05-07
  • 学交互设计,怎样选择到适合自己的学校?

    欢迎关注弗斯特国际艺术教育出国留学选择学校,哪些会成为你的考虑因素?学校名气超大,排名都是top级?明星校友超多,都是艺术大佬?学校位置超好,正居于市中心?校园环境超美,好似旅游学习?不得不说这些会成为许多学生和家长,在选择目标院校时经常考虑的一些因素。排名、明星校友、地理位置,可以作为参考依据。BUT!这些不能是最终的决定因素,最重要的还是自己对专业的最终追求。交 互 设 计 详 解交互设计又称互动设计,英文名称为Interactio...

    2018-04-03
  • AR与用户体验简析

    说道AR想必大家都不陌生,所谓AR就是增强现实技术,现在普遍的应用是在移动端,通过相机拍摄现实场景,并通过AR技术在屏幕上生成想要的图案,使能够栩栩如生的浮现在屏幕上,好似实物就在眼前一样。首先我们值得注意的是个人电脑和智能手机是所有人都想要拥有和使用的产品,一旦产品价格进入消费者能够承受的价位,爆发是完全没有问题的;其次,两者的核心技术其实都集中在CPU、显示屏等电子元件相关领域,这些产品的发展基本上都遵循摩尔定律,即18-24月性能...

    2018-02-27
  • 涨姿势 | 这份交互设计纲领,已被我内定!

    最近一个月的电影市场完全被《头号玩家》支配,身边清一色的“自来水”,那票房蹭蹭涨,眼瞅着都十好几亿了!所以斯芬克趁此良机跟大家说说交互这门自带特效的技术!往期内容一览:服装设计出国学?看这一篇就够了!(点击此处查看详情)学平面设计前,给你一份须知!(点击此处查看详情)怎样做准备,才能当上室内设计玩家?(点击此处查看详情)交互设计适合你吗?我们往往会觉得,交互设计不就是做个网站、搞个APP么,最多再玩玩特效啥的……其实咧,交互可不仅仅存在...

    2018-04-27
  • U+敏捷研发体系

    “研发是一项创造性的工作,卓有成效的研发需要优秀的研发团队来完成,优越的研发流程始终能够发现最佳的机遇,推出有竞争力的产品和服务,并以最快的速度把这些研发成果投入市场。”△ △ △ U+敏捷研发体系流程 △ △ △需求分析1研发体系中的第一个环节,这一阶段要求需求分析人员针对待开发软件提供完整、清晰、具体的要求,确定软件必须实现哪些任务。其中包含的敏捷建模,要求需求分析人员对现实问题的抽象想法构画出草图,以规避需求的不合理等问题。原型设...

    2018-03-30
  • 澳洲留学 | 交互设计专业硕士大解析

    📢:1⃣️条信息,足以改变你的未来!欢迎关注本平台交互设计在中国是一个新兴的产业,但是随着中国电子系统对人们生活影响的逐渐扩大,中国交互设计师将面临一个很大的缺口。什么是交互设计专业?1.words 语言语言是互动的最基础部分。人与人之间的互动是通过语言来进行基本交流。人也通过语言与机器进行交流。这里的语言可以是文字形式、语音形式、或动作形式等。在美国,一个好的交互设计师,也是一个很好地copy writer,需要具备良好的语言沟通和文...

    2018-04-06
  • 产品经理需要用心做好的交互体验——权限获取

    满城尽带黄金甲里,有句台词说得好,“朕给你的,才是你的,朕不给你,你不能抢”。用户给APP授权了,APP才能使用,直接索取或者暗度陈仓,效果往往会适得其反。今天就让小Q讲讲她的交互心得吧~很多APP会在初次使用的过程中直接弹框索取权限,这确实是最简单的实现方式,但被拒的可能性也最大。另外一类APP会在询问时通过一些小技巧变着法的诱导用户点击“允许”。实现成本不会比第一种高出很多,但获取授权的几率会增大。还有一种APP,会等用户用到相关功...

    2018-01-30
  • 用户体验才是核心竞争力 英雄互娱《一起来冒险》趣味至上

    (点击上方“GameLook”↑↑↑↑↑↑,订阅微信)近几年来,随着手游用户增长速度趋于平稳,手游数量的增多,人口红利的优势已经消失殆尽,如何曝光率成为困扰所有开发商的共同难题。在买量成本水涨船高的情况下,靠忠实玩家形成的用户口碑形成病毒传播则成了很多游戏的“制胜法宝”。经过了几年的发展之后,玩家们越来越懂游戏,千篇一律的复刻已经无法提起人们的兴趣,人们有了自己对于游戏的追求,这也是市场上越来越多细分品类游戏成功的主要原因,比如《纪念碑...

    2018-01-30
  • 在Sketch中直接画流程图?现在你可以梦想成真了

    静电说:许多小伙伴对Sketch的期许是更多的,他们不仅希望Sketch是一个绘图工具,更希望它能变成一个交互工具,一个动效设计工具。比如这样一个需求:“在Sketch中画流程图箭头”,之前是不可以的,但插件为我们带来了无限可能性。今天静电就要来介绍这款User Flows插件。User Flows可以来创建图层到页面(Artboard)之间的连线,也可以用它来导出设计流程图,User Flows提供多种语言选择,为我们提供了不少方便。...

    2018-04-17