互联网必威体育精装版兴交互方式探析.pdf

互联网必威体育精装版兴交互方式探析 在互联网这个领域 ，每天都有不计其数的产品诞生 ，有些产品 是灵光一现 ，有的却存活了下来 ， 但是不论存活与否 ，这些产品上总有一些设计细节让我们眼前一亮 ，下文中分类整理了一些不错的 交互形式 ，希望能给大家带来新的设计灵感。 导航 Google+导航的隐藏功能 Google+作为google进入社交领域的第一个产品 ，在交互方式有很多亮点 ，比如在导航的扩展性上 ，可以把不常用的标签拖放到“更多”中 ，从而使导航界面更简洁 ，这个操作进行时的效果也很精致 、流畅。 导航hover 案例一 ：你选中某个导航标签时 ，并不是改变该标签的字体颜色或将字体加粗 ，而是点亮该标签的 背景。 案例二 ：选中的标签上会滴下一滴牛奶 ，并停留在那里 ，告知你的当前位置。 （当然 ，这是一个关 于牛奶的网站 ）。 图形化导航 如果你比较关注近来的导航设计的话 ，不难发现 ，越来越多的导航采用了图标 ，代替了原有的文 字链 ，并且扩大了单个标签的点击区域 ，这是在手机、平板电脑越来越普及的情况下 ，采取的优化 设计 ，这样的导航可以同时适应PC端、移动端 ，节省了设计成本。 辅助导航 越来越多的国外网站运用侧边栏导航来辅助浏览页面 ，方便用户到达想关注的区域。不过使用这些 侧边栏 ，需要注意页面的情况 ，避免其淹没在繁杂的页面元素之中 ，成为用户眼中的“牛皮癣”。 Hover交互 案例一 ：鼠标移到元素上时 ，会有流畅的动态效果 ，而不是仅仅改变颜色。 案例二 ：这个元素其实是焦点图切换中的控件 ，当用户将鼠标移到切换按钮上时 ，能看到下一张图 片的缩略图。 在进行hover状态的设计的时候 ，可以参考以上案例 ，关注细节 ，为用户打造更流畅的交互动作。 反馈设计 案例是一个用户的订阅操作 ，设计师利用了极小的空间 ，做出了订阅、取消订阅等完整的交互细节 。 Hover展现更多 这种鼠标hover展现更多信息的设计很受人青睐 ，它达到了视觉效果美观跟功能实用的微妙平衡 ， 设计师为了视觉效果可以先把内容优先级较低的内容隐藏 ，等鼠标移入时再将其显示出来。 照片展示 图片中的圆点代表的是图片、视频等内容 ，而且圆点的位置也隐喻着这些照片的拍摄位置。这种交 互方式将内容跟现实位置结合在了一起 ，更能吸引用户 ，获得用户的认可。 评论模块 在这个音乐网站中 ，设计师将每首歌曲的评论跟歌曲的时间维度相结合 ，你可以对歌曲的某一句、 甚至某个词进行评论 ，并用小头像的形式进行展示。这样的设计 ，是针对用户的特殊需求而设计的 ，但这种交互形式值得我们借鉴到其他地方。 仿真展示 案例来自于电子商务网站 ，T 恤被挂在衣架上进行展示 ，鼠标移动时 ，衣服会朝相应方向移动 ，这 种设计是取材于现实生活 ，拉近了网络跟现实的距离 ，流畅的交互、丰富的细节让用户有实体店购 物的感觉。 信息展示 这两张图属于同一个案例 ， 是展示了不同维度的信息。当信息有变动时 ，图上会有实时的更新 ， 告知用户具体内容。这种设计是基于信息可视化的理论进行的 ，通过简单的效果来呈现复杂的信息 。 三维视 这个案例是三维视角的交互 ，用户进入页面后 ，会有4个选项 ，随着用户鼠标的移动 ，会自动选择 某个选项。这样炫酷的设计的原因跟网站的主题有一定的关系 （UFC格斗网站 ），带给用户较强的 冲击感。 3D效果 这个案例为了追求视觉冲击力使用了3D效果 ，但是也不缺乏实用性 ，交互流畅 ，不影响信息读取。 时间指示 在某些按时间切换图片的模块 ，可采用此方式,给用户心理预期 ，这样切换的时候用户会比较容易 接受 ，同样的设计可以应用到焦点图切换、页面切换、页面加载等模块。 “豆腐块”信息展示 同级别的信息展示时 ，可以将其归类整理 ，以便获得较好的视觉效果 ，信息展开后 ，将其他“豆 腐块”移动到下方 ，进行下一级别的信息展示 ，达到效果跟功能的平衡。 信息预览 针对同等级的大批量信息 ，可以采用这种缩略模式 ，利用hover状态呈现信息的主要内容 ，由用户 决定下一步操作 ，达到空间的合理利用。 复选式信息预览 通过页面顶部的操作模块 ，可以页面的信息进行多重筛选 ，直观、方便 ，比单一的下拉框式筛选功 能更加丰富。 浮层中的多重信息展示 在某些情况下 ，浮层中需要放置大量的信息 ，这些信息属于同级别 ，又属于不同类型 ，这时候 ，可 以参考此案例中的信息展示方式 ，在浮层中以较好的效果处理这些信息。 信息流内数量控制 对同等级、同类别的信息进行信息流内容控制的时候 ，可以参考此设计模式 ，利用简单的操作控制