1.9　移动端App与网站的交互差异

Web网站和移动端App的设计，前者依托于桌面PC浏览器，后者依托于手机等移动设备。不同的平台有不同的特点，因此在设计这两类产品时也存在一些差异。本节将从交互设计的角度，讲解Web网站和移动端App在交互设计上有哪些不同之处，以及需要考虑的设计要点。

1.9.1　设备尺寸不同

设计要点：

（1）移动设备的屏幕尺寸较小，一屏能够展示的内容有限，更需要明确界面中信息内容的重要性和优先级，优先级高的内容突出展示，次要内容适当使用“隐藏”的方式。

图1-45所示的移动端备忘记事App界面设计，使用不同的颜色来表现不同类型的事件记录。界面清晰、简洁，将相应的记录功能操作选项都隐藏在界面底部的“+”图标当中，当用户点击该图标时，界面会以弹出窗口的形式显示相应的隐藏选项，有效地区分了界面中信息内容的重要性和优先级。

图1-46所示的移动端运动鞋电商App界面设计，其设计非常简洁、直观。界面重点突出该运动鞋产品的相关信息，产品图片的表现最为突出，其次就是产品界面和尺码选择，接着是界面底部的红色购买按钮。重点信息一目了然、非常直观。

（2）因为移动设备的分辨率差异较大，所以移动端App在界面布局、图片、文字的显示上，需要兼顾不同移动设备的显示效果，这就要求设计师与开发人员共同配合做好适配工作。

（3）因为移动设备支持横屏、竖屏的自由切换，所以在设计移动端App时（特别是游戏、视频播放等），需要考虑用户是否有“切换手持方向”的需求，哪些情况下切换屏幕方向，界面内容如何进行切换展示等。

如图1-47所示，该移动端App为用户提供了横竖屏切换动效，界面中的元素会随着手机屏幕横竖屏的转动而平滑过渡到相应的显示效果，为用户带来良好的交互体验。

（4）Web网站因为显示器分辨率差异较大，并且浏览器窗口尺寸可变化，设计时需要考虑好不同分辨率的页面内容展示和布局。同时，使用移动设备来浏览Web网站的需求越来越多，近几年响应式设计更为普遍。

随着移动互联网的发展，各种智能移动设备越来越多，而我们所设计的网站能够适应在不同的设备中进行浏览已经成为基本要求，并且当用户使用不同的设备浏览网站界面时都能够给予用户良好的体验，如图1-48所示。

1.9.2　交互方式不同

设计要点：

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

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

图1-49所示的移动端App界面设计，为了便于用户使用手指进行触摸点击操作，各选项的可点击区域都设置得较大，并且各选项之间也保持了一定的间隔，从而使用户更容易操作，并且界面中重要的功能选项按钮都使用了鲜艳的色彩进行突出表现。

图1-50所示的移动端列表界面，在该界面中当用户向左滑动某个列表项时，在该列表项的右侧就会出现“删除”选项，用户点击“删除”选项，就可以将该列表项删除，这是在移动端App界面中常见的一种交互操作方式。

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

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

图1-51所示的交互式汽车宣传网站，该网站的页面设计非常简洁，只有品牌Logo和产品形象，其中产品形象的展示采用了交互设计的方式。当用户刚进入到该网站页面中时，页面会显示鼠标拖曳的动画提示，提示用户通过拖动鼠标在网站中进行交互操作，在旋转到车身相应的位置时会显示闪烁的白点，提示用户单击查看详情。这种采用交互操作进行商品宣传展示的方式，可以有效增强用户与产品之间的互动，使用户得到一种愉悦感。

1.9.3　使用环境不同

设计要点：

（1）使用移动端App时，用户很容易被周边环境所影响，对界面上展示的内容可能没那么容易留意到；长时间使用时更适合沉浸式浏览，有时用户可能没有足够的时间，浏览内容有限，类似“收藏”等功能则比较实用；用户在移动过程中更容易误操作，需要考虑如何防止误操作、如何从错误中恢复。

（2）使用Web网站的环境相对固定，用户更为专注。

1.9.4　网络环境不同

设计要点：

（1）移动端用户，在使用移动流量的情况下对流量比较重视，对于需要耗费较多流量的操作，需要给用户明确的提示，在用户允许的前提下才能继续使用。

（2）在使用移动端App时，常常会遇到网络异常的情况，需要重视这类场景下的错误提示，以及如何从错误中恢复的方法。

当用户在使用移动数据流量进行浏览时，如果执行视频播放或者下载文件等需要耗费较多流量的操作时，一定要给用户明确的提示说明，如图1-52所示，待用户同意后再继续相应的操作，这样也是为用户考虑。

移动端常常会遇到网络不稳定或不流畅的情况，所以App需要设计当网络不稳定或异常情况下的提示界面，如图1-53所示，通过卡通形象与简短的文字说明，表现效果直观、形象，并且为用户提供了“刷新”按钮，用户点击后可以刷新当前界面。

1.9.5　基于位置服务的精细度不同

设计要点：

移动端App可以合理地利用用户的位置，给用户提供一些服务。例如，地图类App，可以直接搜索“我的位置”到目的地的路线；生活服务类App，可以查询“我的位置”附近的美食、商场、电影院等，这样的方式省去了用户手动输入当前位置的操作，更加智能化。

图1-54所示的是百度地图的移动端App，当用户启动并进入该App界面时，它会对用户当前所在的位置进行精确地定位，并显示在地图中。当用户点击界面底部的“发现周边”选项时，会基于用户当前的位置显示出附近的美食、酒店等相关信息；当用户点击底部的“路线”选项时，会跳转到路线导航界面，并默认起始点为用户当前所在位置，用户只需要输入终点即可，非常方便。