产品经理二十四种让人眼前一亮的新兴交互方式.docx

1、产品经理二十四种让人眼前一亮的新兴交互方式二十四种让人眼前一亮的新兴交互方式 在互联网这个重要领域，周边产品每天都有不计其数的系列产品诞生，有些产品只是灵光一现，有的却存活了进去，但是不论存活与否，这些产品上总有一些设计细节让我们眼前一亮，本文中了一些不错的交互形式，希望能给大家带来新的设计灵感。 1，Google+导航的隐藏功能 Google+作为google进入社交领域的第一个产品，在交互方式有很多亮点，比如在导航的扩展性上，可以把不常用的标签拖放到“更多”中，从而使导航界面更简洁，这个操作极其进行时的效果也很精致、流畅。 2，导航hover 案例一：你选中某个导航标签时，并不是改变该标签

2、的字体颜色或将字体加粗，而是点亮该标签的背景。 案例二：选中选进的标签上会滴下滴下牛奶，并停留在那里，告知你的当前位置。（当然，这是一个关于牛奶的门户网站）。 3，图形化导航 如果你比较关注近来的导航设计的话，不难发现，越来越多的导航采用了图标，代替了旧的文字链，并且扩大了单个标签的点击区域，这是在手机、笔记本电脑越来越普及的情况下，采取的优化设计，这样的导航可以同时适应PC端、移动端，节省了设计成本。 4，辅助导航 越来越多的国外网站运用侧边栏导航来辅助浏览页面，方便用户到达想关注的地域区域。不过使用这些侧边栏，需要有注意页面的情况，避免其淹没在繁杂的页面元素之中，成为用户眼中的“牛皮癣”。

3、 案例一：鼠标移到元素上时，会有流畅的动态效果，而不是仅仅改变颜色。 案例二：这个元素其实是焦点图切换中会的控件，当用户滑鼠将鼠标移到切换按钮上时，能看到下一张图片的缩略图。 在进行hover状态的设计的时候，可以参考以上者案例，关注细节，为用户打造更构建流畅的交互动作。 事例是一个用户的订阅操作，设计师利用了极小的自由度，做出了订阅、订户取消订阅等完整的虚拟化细节。 这种鼠标hover展现更多信息的设计很受人青睐，它达到了视觉效果美观跟功能实用性的微妙错综复杂平衡，设计师内容为了视觉效果可以先把内容优先级较低的内容隐藏，等鼠标移向时再将其显示出来。 图片中的圆点代表的是图片、视频等内容，而且

4、圆点的位置也隐喻着这些照片的位置。这种交互方式将内容跟现实位置结合在了一起，更能吸引用户，获得用户的认可。 在这个音乐网站中会，设计师将每三首首歌曲的评论跟歌曲的时间维度相结合，你可以对歌曲的某一段话、甚至某个词进行评论，并用小头像头像的形式进行展现。这样的设计，是针对用户的特殊需求而设计的，但这种交互形式值得我们借鉴到其他地方。 案例来自于电子商务网站，T恤被挂在衣架上进行展示，鼠标移动时，衣服会朝相应路径移动，这种建筑设计是取材于现实生活，拉近了网络跟现实的距离，流畅的交互、丰富的细节让用户零售店有实体店购物的感觉。 这两张图属于同一个两例，只是展示了不同维度的信息。当信息有变动时，图上要

5、有实时的更新，告知用户具体内容。这种设计是基于信息可视化理论进行的，通过简单的清晰度再现来呈现复杂的信息。 这个案例是三维图形视角的交互，用户进入页面后，会有4个选项，随着用户鼠标的移动，会自动选择某个选项。这样炫酷的设计的原因跟网站的主题有一定的关系（UFC格斗网站），带给客户较强的冲击感。 这个案例为了追求视觉冲击力使用了3D效果，但是也不缺乏实用性，交互流畅，不影响信息读取。 在某些按时间切换图片加载的模块，可采用此方式,给用户心理预期，这样切换的时候用户会比较热衷于，同样的设计可以应用到焦点话题图切换、页面切换、页面加载等模块。 同级别的信息展示时，可以将其归类整理，以便获得较好的视觉

6、效果，信息展开后，将其他“豆腐块”移动到下方，进行下所一级别的信息展示，达到精准度跟功能的平衡。 针对同等级的大批量信息，可以采用这种缩略模式，利用hover状态呈现信息的主要包括内容，由用户决定下一步操作，达到空间的合理利用。 通过页面顶部的操作模块，网页可以页面的信息进行多重筛选，直观、方便，比单一的下拉框式筛选更加功能更加极其丰富。 在某些情况下，浮层仍旧会中会需要放置大量的信息，这些信息属于同级别，又属于不同类型，这时候，可以讯息参考此案例中的信息展示方式，在效果浮层中以较好的效果处理这些讯息。 对同等级、相比之下别的信息进行信息流内容控制的时候，可以参考此设计模式，利用简单的操作控制

7、信息展示的数量，选取不同的设置时，下方的信息流可以根据实际情况改变样式，让信息流的样式跟对应的设置形成心理映射，用户形成习惯之后，能即时明白该情况下即刻的设置是什么。 案例一：模拟物理环境，赋予界面粘性属性，界面切换更自然，效果也更丰富。 案例二：ipad上的应用程序Paper，用两个手指手指逆时针或逆时针旋转，来替代“取消操作”和“恢复操作”按钮。 目前web端产品的转场基本还处于没有情感化设计的阶段，有线电视产品在这块做品类的比较有借鉴性。上图的案例都有人性化、操作感强的特点在其中。 这种设计方式更接近现实中的场景，用户很容易明白，并且点击这些图片会带来不同的转换效果（左移、右移、斜着飞入

8、屏幕），此外这种排列能深刻用户对处于特殊位置的图片记忆更加让。 通过这种方式，在一张图上就可以展示多种上述商品，节省了大量的空间和资源，也将商品展示方式进行了创新。在电子商务网站上，这种设计的发挥空间很大。 对一成不变的loading的样式稍作改进，就能低于用户的预期，从而获得用户的嫉妒，而跟网站主题相关的设计，会提升用户对网站的忠诚度。 在社交网站以外的网站上，时间轴也可以扮演十分重要的角色：以优秀的设计来引导用户进行更方便的阅读，达到更好的信息传达目的。 用推拉窗来或进行信息展示，它可以在同样的空间内共展示几倍的信息，而且有主次之分，让用户有所关注。 这些设计是将网站的上以所有内容都加载在

9、一个页面上，通过上下或左右滚动就能浏览完整个网站，这种技术极大地减少了网站的电子技术层级，避免用户迷惑，提升了体验。 1，IE6升级提示 优势概述：为用户设计提供升级或替换更高版本的浏览器的提示，并尽可能的降低用户对于提示的抵触情绪，加速IE6消亡 应用环境：使用IE6浏览器打开相关网页时 在设计中，我们遇到两个问题，一、如何客户端让用户听到你要说什么。二、如何让手机用户按你所说的做。首先，我们提供用户更趣味性的展现工具，用轻松一些的手绘风格去取代生硬的提示框，用户看到的，更像是一张手涂的卡牌，这在一定程度上降低了对于同质化的弹窗提示或是弹出广告的抵触情绪，同时用口语的提示（亲，你的IE6弱爆

10、了！）去增加用户的好奇心，如果用户这时在想用“你才弱爆了呢，给个理由先”，那么，我们的第一个弊病就解决了。 对于解决第二个问题，我的理解是，能否戳到用户的“痛处”；在用户后听到你要说什么之后，理想的情况是直接去点击下面的链接去升级或替换浏览器（当然也有可能如此一来给你关了，对于这种情况，我只能说，弄死IE6，我们还有很多的努力要做），另一种情况是用户问了一句“为啥？”，好吧，我们给你在右边留了一个镜像，点了你就知道为啥了。 最后，考虑到我们平台产品的产品销售通用性，并不是所有提示信息的产品都适合这种手绘风格的提示，还准备了一套相对通用一些的版本，以配合个别产品的文化背景。 2，错误提示 优势概

11、述：除了给用户提供必要的信息外，用一点小小的幽默帮用户消除一些错误带来的负面情绪 应用环境：网页出现错误时，如：404错误（针对这版设计的特点，比较适合一淘UX网站等类似的建筑设计站点） 我们设计了一个十分牛X的网站，但还没牛X到保证不会出现错误，但这并不影响我们的用户体验，即使错了，我们也会尽量保证这是个有意思的值得一提错误，看看我们的错误提示吧。 错误提示页面需要提供给用户的必要信息，主要有两点，一：告诉用户怎么了。二：告诉用户下让一步该怎么做。 所以，针对网页中出现的下面三种不同的错误，我们一淘UX会直截了当的留意到用口语告诉用户“怎么了改该怎么做”: 好吧，事儿现在用户知道该出什么烦心

12、事也知道该怎么做了，但这当然是个错误，用户也是有脾气的，其实出了错误，大家都不想的，你看我们一淘UX的前端工程尸、交互设计狮、用户研究猿和视觉设计虱这一张张苦逼的表情你就知道了。 考虑到其它平台，相对而言我们也在做一些相对较为标准的错误提示，希望能在UX各产品中使用较为统一的规范。 3，返回顶部 优势概述：使体验更有趣生活化，在视觉上与页面更融合。因此不再用机械化的文字或法度工厂化的图标，而是尝试用隐喻的手法去一下表达 应用环境：在页面较长时用户可能需要回到顶部下方时 返回顶部需要向上，具有发想了一系列具有向上含义的直觉（气球、烟、跳高、向上爬的动植物等等），最后锁定在电梯，优点在： 1、电梯

13、向上的速度受限较快并可控，符合网址移动的场景。 2、根据一淘首页、子频道页面、活动页面的特点，往往模块较多、商品等按模块对齐，如同用乐高搭建的大楼。因此用电梯的概念很契合。 3、视觉上观光电梯的形态是的胶囊形，不会像比较开放的形态一样会过度分割负空间。形态上的简洁柔和目前的图标规范和视觉气质。 设计文句及实际应用如图： 扩展设计: 电梯内部的人可以根据不同控制室的场景设计形象。如团购表现出更很拥挤；优惠频道表现出血拼；海外购表现出与国际化；女性、男性、幼童也可以做出相应区分。体现出生活乐趣。 对交互细微的注重，是铸就互联网产品品类优秀体验的基础，细节决定成败，这句话在互联网产品上也一样适用，压迫我们进行设计的时候可以尝试跳出现有设计的束缚，思考新的设计手法，给用户带来不一样的体验，同时也能给我们产生意想不到匪夷所思的收获。 以上这些案例都是出于对新兴交互方式的兴趣才收集的，并不见得代表未来的发展趋势，贡献出来希望能开阔下大家的设计方法论，从更多的给定来思考自己设计的设计，分发会一直持续下去，并会增加移动端的案例的比例。