1.4.2　交互方式不同

表1-3　Web网站与移动App的交互方式区别

设计要点：

（1）相比鼠标，手指触摸范围更大，较难精确控制点击位置，所以App界面中的点击区域要设置得更大一些，不同点击元素之间的间隔也不能太近。

（2）移动App支持丰富的手势操作，例如，通过左滑选项，可以显示出该选项的“删除”“取消关注”等相关选项，这种操作方式的特点是快捷高效，但是对于初学者来说有一定的学习成本。在合理设计快捷操作方式的同时，还需要支持最通用的点击方式来完成任务的操作流程。

图1-26所示的移动App交互设计示例，在界面上半部分的图片列表中，可以通过左右滑动的方式来切换作品图片的显示，并且在作品图片切换过程中，会表现出三维空间的效果，当用户单击某个作品图片时，界面中其他内容会逐渐淡出，该作品图片会在当前位置逐渐放大填充界面的上半部分，在界面下半部分淡入该作品的相关介绍信息内容，界面的过渡转场效果非常自然、流畅，为用户带来良好的浏览体验。

（3）移动App以单手操作为主，界面上的重要元素需要在用户单手点击范围之内，或者提供快捷的手势操作。

（4）网站支持鼠标滑过的效果，网站中的一些提示信息通常采用鼠标滑过展开／收起的交互方式，但是移动App界面则不支持这类交互效果，通常需要点击特定的按钮图标来展示／收起相应的信息内容。

图1-27所示为一个时尚女装的电商网站设计示例，在网站页面中多处应用交互设计，不仅商品图片可以进行交互切换，并且还加入了交互导航菜单，方便用户快速找到所需要的商品。

图1-26　移动App交互设计示例

图1-27　时尚女装的电商交互式网站设计示例