新兴交互方式探析 - 1

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

Google+导航的隐藏功能

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

导航hover

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

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

图形化导航

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

辅助导航

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

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

案例二：这个元素其实是焦点图切换中的控件，当用户将鼠标移到切换按钮上时，能看到下一张图片的缩略图。

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

案例是一个用户的订阅操作，设计师利用了极小的空间，做出了订阅、取消订阅等完整的交互细节。

这种鼠标hover展现更多信息的设计很受人青睐，它达到了视觉效果美观跟功能实用的微妙平衡，设计师为了视觉效果可以先把内容优先级较低的内容隐藏，等鼠标移入时再将其显示出来。

图片中的圆点代表的是图片、视频等内容，而且圆点的位置也隐喻着这些照片的拍摄位置。这种交互方式将内容跟现实位置结合在了一起，更能吸引用户，获得用户的认可。

在这个音乐网站中，设计师将每首歌曲的评论跟歌曲的时间维度相结合，你可以对歌曲的某一句、甚至某个词进行评论，并用小头像的形式进行展示。这样的设计，是针对用户的特殊需求而设计的，但这种交互形式值得我们借鉴到其他地方。

案例来自于电子商务网站，T恤被挂在衣架上进行展示，鼠标移动时，衣服会朝相应方向移动，这种设计是取材于现实生活，拉近了网络跟现实的距离，流畅的交互、丰富的细节让用户有实体店购物的感觉。

这两张图属于同一个案例，只是展示了不同维度的信息。当信息有变动时，图上会有实时的更新，告知用户具体内容。这种设计是基于信息可视化的理论进行的，通过简单的效果来呈现复杂的信息。