|
真正的科学家应当是个幻想家；谁不是幻想家，谁就只能把自己称为实践家。 —— 巴尔扎克 |
近期在工作中偶然发现的3种移动界面布局，从移动端的分辨率、配合设计布局变化的web端响应式、以及H5的设计布局。另外加上2个好玩的设计方式，更多的让点击率、产品凸显展示，总共5个好玩的交互效果给大家分享。
开发资源不够或快速上线的页面交互设计
上图在专业术语中叫做流体交互效果，这种交互效果的好处与坏处
优点：避免小分辨率的情况下，出现水平条的情况。
缺点：分辨率小的时候会拉长图片，导致难阅读
开发资源不够，快速迭代的产品同学不会考虑产品的适配问题，不做适配的页面会出现什么结果？那就是页面变形，如下图本来是移动端的H5设计页面，但当用PC端打开链接则出现变形。
有什么样的方法解决变形的问题？可通过固定长度来解决
-
Touchend：判断是否需要滑动，用css3 配合页面滑动或归位
-
Touchmove:move过程中不断获取当前坐标值，计算位移值，肤质改变元素的matrix值
-
Touchstart:获取初始Y坐标
固定宽度页面的布局，可以保护页面不会变形，在跨平台中可尽可能的减少用户体验的丢失，但仍然会有一个问题，对于空白的区域无法控制。
响应式布局交互设计
响应时布局交互效果
响应式布局是基于移动端互联网新期的前端设计，在保留后台原有基础功能下，响应式设计诞生在移动端为了给予用户带来更好的体验，核心是体验上的变化与优化。整合从桌面到手机的各种屏幕尺寸和分辨率，用技术来使网页适应从小到大（现在到超大）的不同分辨率的屏幕。
缺点：需要新的UI设计、前端开发，导致同样的产品页再次设计和开发。甚至需要后台接口重新设计
H5的3种交互分类设计
在设计运营或普通的H5页面，你有没有考虑过该类型是展示型、游戏型、产品型的哪一类？在现在移动端小程序的新红利下下，产品型的H5设计是其前期的雏形。
能够及时了解当前负责产品H5页面类型尽可能的将应用在所归属的场景，例如产品介绍H5页面对应展示型。带有游戏趣味的应该利用游戏型H5交互设计。
移动端或web端产品icon交互设计
当我们的一个icon是一个页面转化的关键路径，是否能够影响转化率？答案是肯定的。以下图为案例我们看当这个icon有文案或只有图示，对用户来说谁会更明显？
上图中，带有文字的icon点击率比没有icon的button高20%，当该入口为订单购买？支付？相信带来更多的点击率将转化为更多的产品。文字表意更明确，用户更容易理解，更容易触发用户去操作。
好的交互效果，是否可以页面内容与产品的对焦是否可能凸显产品？带来更多的转化？这是一个偏向设计的问题，之所以把这个case拿出来是发现这个图非常有意思。
上图带来第一个feel，用户注意力通过页面女主角眼神让目光更容易聚焦在产品本身上。
另外如果你想和Kevin和他的产品朋友交流，目前我个人建立了一个QQ群，我会把自己的产品案例和分享第一时间在里面，这个QQ群会上传我的一些个人常用原型和产品心得，并且有任何产品问题都可以在这里得到回答。
为方便管理，付费后才可加入，转账后加我微信:574319420备注
【加群】,我会拉你进群
连续签到2周，退回20元
签到形式：每天的产品感悟和产品想法都可以
2018年，让我们继续前进！
