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

相关推荐

  • 百度UED:运营设计那些事儿

    数十万互联网从业者的共同关注!作者:百度搜索用户体验中心 授权早读课发表,转载请注明出处。在现如今的社会中,每天都在进行着一场场没有硝烟的商战。运营设计则是至关重要的一部分。那么怎么才能做出一个好的运营设计或者一个相对比较成功的运营设计呢?我们要知道设计的目的。设计的目的是什么?设计核心在于能够让用户在有限的时间内Get最有价值的信息,找到所得,从而实现转化。知道设计的目的了,在项目中自然形成了一些思路流程。1、需求分析需求分析分为:产...

    2018-01-31
  • 快速用 Sketch 绘制30个图标

    长得好看的人都已关注操作分解:一个正方形,两个同等直径的圆形即可完成,最后旋转多选矩形 Edit 后可以一起改圆角正方形不停地裁剪一个椭圆加长方形,复制即可圆角矩形加两个不同大小的圆合成小矩形旋转角度,最后拉下 Radius 即可选中锚点删掉,调下倾斜度,复制合成添加锚点一拉一调添加左右两个锚点的时候放大比较容易处理号细节锚点的 radius合成后记得 Flatten 下,就可以选择锚点加 radius添加钢笔锚点,并且 Show Gr...

    2018-04-09
  • Axure RP 8.0 安装教程

    Axure RP是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。•可以在公众号后台回复『042』或『Axure RP』获取下载链接。安装步骤:❶下载并解压安装包。❷双击安装程序。❸同意,并下一步。❹选择安装路径,下一步。❺下一步。❻取消勾选,点击Finish结...

    2018-03-20
  • UED从繁到简三个阶段

    UE设计一般需要经过三个阶段。一个交互设计师,从学徒到出师,不说100%,那也有99%的人走过这是哪个阶段。如果没有,说明他已经转行做自己的安利去了,专门在网上发些如何教人做交互啊。什么是交互设计师啊等等忽悠别人的文章。(就是再说我)我们来详细看一下这三个阶段:第一阶段,多数都是刚入职人生第一份工作或者是刚踏上这段交互征程的新手。对交互设计其实是一知半解的。这一阶段谈论的什么用户体验啊,流程体验啊,几乎可以视为是夸口奇谈。我认为在这个阶...

    2018-03-27
  • 交互设计 | “综合类&艺术类”院校申请侧重点指南

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

    2018-04-21
  • 营销型网站建设如何优化网站, 提高用户体验!

    营销型网站建设如何优化网站, 提高用户体验!据相关研究表明:当页面加载时间从 1 秒到 3 秒,跳出的机会增加了30%左右。1s到5s的机会增加到90%,如果你的网站需要10s的加载,跳出的机会将会超过120%。  这是令人难以置信的,因此有效的提高网站加载速度,对于搜索引擎优化而言很重要。  那么,我们该如何提高页面加载速度呢?  首选,我们需要对已知网站速度测试,总结归纳问题:其次,制定相应的整改策略:1、开启MIP百度对于MIP的...

    2018-04-11
  • 用户体验方法论的演变

    用户体验工作流程令人困惑,即使对大多数设计师而言也是如此。最初Donald A. Norman创造了用户体验设计的概念:“我发明了这个词,因为我认为人机交互和可用性太窄了。我想涵盖该系统的所有方面,包括工业设计图形,交互界面,面对面交互和使用手册。从那时起,这个词被广泛传播,以至于它开始失去意义。”而到2016年,Don Norman开始谈及对于这个词的误解有多严重。在彻底了解现代用户体验之前,我们需要回顾20世纪90年代以来设计和开发...

    2018-03-07
  • 【科普】给想学交互设计的同学的一些建议

    最近在知乎上,有很多人问我,交互设计有什么好的学校?出国读研和在国内读研应该怎么选择?就业怎么样?其实在行业内和行业外,信息存在大量的不对称,很多同学都不太清楚怎么入门和学习交互,我觉得有必要专门开个文章聊下这个话题,算是一个有工作经验的人给新入行或者将要入行的同学的建议。1. 交互设计是否需要读研?我的答案是:看你的情况。每个人情况不同,自然对应不同的选择。情况A:如果本科就受过交互设计方面系统的训练(学校课程、实习等),有一定天赋和...

    2018-02-11
  • 中国交互设计“教父”辛向阳老师首次线上分享会来啦

    应集创堂的邀请,中国交互设计“教父”辛向阳老师将在4月20日为大家带来首次线上分享会!辛老师是卡耐基梅隆大学设计哲学博士,是目前很少数在美国获得设计哲学博士、并首个回到中国内地的华人之一。有着跨多个学科的教育和工作背景,包括机械、建筑、平面设计、油画、交互设计以及艺术史。同时,辛老师还是IXDC(交互设计国际大会)大会主席,提出了“交互设计五要素”和“行为逻辑”等交互设计领域的重要理论和方法,并在香港理工大学成功创办了中国首个交互设计专...

    2018-04-17
  • 案例分析|一次消灭产品文档的实践探索

    作者:Dougee全文共 2120 字 5 图,阅读需要 5 分钟———— / BEGIN / ————在刚入职眼前这一份工作的时候,CTO就对产品组提出了新的要求:以后不用再另外输出产品文档,直接在原型上标注就可以了,而且以后要输出动态原型。先介绍一下我本人的情况:产品经验2年,对于Axure的交互设计有一定实践经验,但从来没有想过把动态的原型与产品说明结合来表达需求。对于CTO的决定,我想了一下,大概是出于以下三点原因:太多文件数量...

    2018-03-27