你应该知道的24种新兴交互设计

在互联网这个领域，每天都有不计其数的产品诞生，有些产品只是灵光一现，有的却存活了下来，但是不论存活与否，这些产品上总有一些设计细节让我们眼前一亮，下文中分类整理了一些不错的交互形式，希望能给大家带来新的设计灵感。

一、导航

1，Google+导航的隐藏功能

Google+作为google进入社交领域的第一个产品，在交互方式有很多亮点，比如在导航的扩展性上，可以把不常用的标签拖放到“更多”中，从而使导航界面更简洁，这个操作进行时的效果也很精致、流畅。

2，导航hover

案例一：你选中某个导航标签时，并不是改变该标签的字体颜色或将字体加粗，而是点亮该标签的背景。 

案例二：选中的标签上会滴下一滴牛奶，并停留在那里，告知你的当前位置。（当然，这是一个关于牛奶的网站）。

3，具有亲和力的图形化导航  

如果你比较关注近来的导航设计的话，不难发现，越来越多的导航采用了图标，代替了原有的文字链，并且扩大了单个标签的点击区域，这是在手机、平板电脑越来越普及的情况下，采取的优化设计，这样的导航可以同时适应PC端、移动端，节省了设计成本。

4，活泼的辅助导航

越来越多的国外网站运用侧边栏导航来辅助浏览页面，方便用户到达想关注的区域。不过使用这些侧边栏，需要注意页面的情况，避免其淹没在繁杂的页面元素之中，成为用户眼中的“牛皮癣”。

 

二、Hover交互

案例一：鼠标移到元素上时，会有流畅的动态效果，而不是仅仅改变颜色。

在进行hover状态的设计的时候，可以参考以上案例，关注细节，为用户打造更流畅的交互动作。

 

三、反馈设计

四、Hover展现更多

五、照片展示

六、评论模块

七、仿真展示

 

八、信息展示

 

九、三维视角

 

十、3D效果

 

十一、时间指示

 

十二、metro信息展示

 

十三、信息预览

 

十四、复选式信息筛选

 

十五、浮层中的多重信息展示

在某些情况下，浮层中需要放置大量的信息，这些信息属于同级别，又属于不同类型，这时候，可以参考此案例中的信息展示方式，在浮层中以较好的效果处理这些信息。

 

十六、信息流内容数量控制

对同等级、同类别的信息进行信息流内容控制的时候，可以参考此设计模式，利用简单的操作控制信息展示的数量，选取不同的设置时，下方的信息流可以根据实际情况改变样式，让信息流的样式跟对应的设置形成心理映射，用户形成习惯之后，能即刻明白该情况下的设置是什么。

 

十七、无线端手势操作

案例一：模拟物理环境，赋予界面弹性属性，界面切换更自然，效果也更丰富。

案例二：ipad上的应用程序Paper，用两个手指顺时针或逆时针旋转，来替代“取消操作”和“恢复操作”按钮。

 

十八、转场动画

目前web端产品的转场基本还处于没有情感化设计的阶段，无线产品在这块做的比较有借鉴性。上图的案例都有人性化、操作感强的特点在其中。

 

十九、图片查看

这种设计方式更接近现实中的场景，用户很容易明白，并且点击这些图片会带来不同的转换效果（左移、右移、斜着飞入屏幕），此外这种排列能让用户对处于特殊位置的图片记忆更加深刻。

 

二十、多图合一展示

通过这种方式，在一张图上就可以展示多种相关商品，节省了大量的空间和资源，也将商品展示方式进行了创新。在电子商务网站上，这种设计的发挥空间很大。

 

二十一、Loading

对一成不变的loading的样式稍作改进，就能超出用户的预期，从而获得用户的好感，而跟网站主题相关的设计，会提升用户对网站的忠诚度。

 

二十二、时间轴

在社交网站以外的网站上，时间轴也可以扮演十分重要的角色：以优秀的设计来引导用户进行更方便的阅读，达到更好的信息传达目的。

 

二十三、推拉窗

用推拉窗来进行信息展示，它可以在同样的空间内展示几倍的信息，而且有主次之分，让用户有所关注。

 

二十四、单页面网站

这种设计是将网站的所有内容都加载在一个页面上，通过上下或左右滚动就能浏览完整个网站，这种技术极大地减少了网站的层级，避免用户迷惑，提升了体验。

 

二十五、新组件畅想

1，IE6升级提示

优势概述：为用户设计提供升级或替换更高版本的浏览器的提示，并尽可能的降低用户对于提示的抵触  情绪，加速IE6消亡

应用环境：使用 IE6浏览器打开相关网页时

在设计中，我们遇到两个问题，一、如何让用户听到你要说什么。二、如何让用户按你所说的做。首先，我们提供用户更趣味性的展现方式，用轻松一些的手 绘风格去取代生硬的提示框，用户看到的，更像是一张手涂的卡片，这在一定程度上降低了对于同质化的弹窗提示或是弹出广告的抵触情绪，同时用口语化的提示 （亲，你的IE6弱爆了！）去增加用户的好奇心，如果用户这时在想“你才弱爆了呢，给个理由先”，那么，我们的第一个问题就解决了。

对于解决第二个问题，我的理解是，能否戳到用户的“痛处”；在用户听到你要说什么之后，理想的情况是直接去点击下面的链接去升级或替换浏览器（当然 也有可能直接给你关了，对于这种情况，我只能说，弄死IE6，我们还有很多的努力要做），另一种情况是用户问了一句“为啥？”，好吧，我们给你在右边留了 一个链接，点了你就知道为啥了。

 

结语

对交互细节的注重，是铸就互联网产品优秀体验的基础，细节决定成败，这句话在互联网产品上也一样适用，我们进行设计的时候可以尝试跳出现有设计的束缚，思考新的设计方式，给用户带来不一样的体验，同时也能给我们带来意想不到的收获。

以上这些案例都是出于对新兴交互方式的兴趣才收集的，并不见得代表未来的发展趋势，贡献出来希望能开阔下大家的设计思路，从更多的维度来思考自己的设计，收集会一直持续下去，并会增加移动端的案例的比例。

一淘UX原文：http://ux.etao.com/posts/570