从交互设计角度，聊聊WEB网站和移动APP的六大差异

今天，从交互设计的角度，我们来谈谈Web网站和移动应用程序之间的区别，以及需要考虑的设计要点。

1.用户以不同的方式与界面交互/操作

网站：以鼠标或触摸板为媒介，多采用左键点击操作，还支持鼠标滑动，鼠标右键操作模式。

移动App：除了最常见的点击操作外，直接用手指触摸屏幕还支持各种复杂的手势，如滑动和捏合。

设计要点：

1、与鼠标相比，手指的触摸范围更大，很难准确控制点击位置。在iOS人机交互规范中，手指最合适的触摸区域至少需要44个 point。因此，移动应用程序的点击区域应该设置得更大，不同点击元素的间隔不应该太近。

2、Web网站支持鼠标滑动的效果，一些提示通常使用鼠标滑动扩展/收集的交互方式。在移动应用程序中，此类效果不支持，需要单击特定的icon来收集/扩展提示。

3、移动应用程序支持丰富的手势操作，例如，您可以通过左滑看到您可能需要的快速操作“取消注意力”、“删除”的特点是快速高效，但对初学者来说有一定的学习和知识成本。在合理设计这些快速操作模式的同时，我们还需要支持最通用的点击模式来完成任务的操作路径。鉴于手势操作的高学习成本，一些应用程序经常通过新手指导来教授用户。

4、移动应用程序主要是单手操作，界面上的重要元素需要在用户单手点击范围内，或提供快速的手势操作。

二、设备尺寸不同

Web网站：不同PC的分辨率不同，浏览器窗口的最大尺寸也不同；浏览器窗口可以缩放。

移动App：设备尺寸相对较小；不同设备的分辨率差异化较大，尤其是安卓；支持水平屏幕和垂直屏幕的转向。

设计要点：

1、移动应用程序的尺寸较小，一个屏幕显示的内容有限，需要澄清哪些信息更重要，有效的“组织”相关内容，优先级高的内容突出显示，适当的“隐藏”次要内容。

2、由于浏览器分辨率差异较大，窗口尺寸可变，网站在设计时需要确定不同分辨率的内容显示和布局。由于这一点和网络应用程序的浏览需求，响应性设计近年来变得更加普遍。

3、由于设备的分辨率和dpi尺寸不同，移动应用程序应考虑不同设备在界面布局、图片和文本显示中的效果，设计师需要配合开发做好适应工作。

4、由于移动设备支持水平屏幕和垂直屏幕显示，在设计移动应用程序（如游戏和视频播放界面）时，需要考虑用户是否需要“改变方向”，在什么情况下切换屏幕方向，如何切换。

三、使用环境不同

Web网站：通常坐在室内，使用时间相对较长；

移动App：它可以在室内使用很长时间，也可以在碎片化的时间使用，或者站立、坐着、躺着或走路，姿势不同；

设计要点：

1、使用Web网站时，用户更加专注；

2、使用移动应用程序时，用户很容易受到周围环境的影响，界面上显示的内容可能不那么容易注意；长期使用更适合沉默浏览，用户可能没有足够的时间，每次浏览内容有限，类似于“稍微阅读”、“收藏”等功能更实用；用户在移动过程中更容易误操作，需要考虑如何防止误操作，如何从错误中恢复。

四、网络环境不同

Web网站:网络比较稳定，基本不用担心流量问题

移动App：由于用户使用环境复杂，网络可能从有到无，从快到慢，从畅通环境到封闭信号差的环境；WiFi可以使用，不用担心流量，也可以使用需要控制流量的3G/4G。

设计要点：

1、移动应用程序，网络异常更为常见，需要更加关注这种情况下的错误提示，以及如何从错误中恢复。

2、在3G/4G的情况下，移动应用程序更注重流量。对于需要消耗更多流量的操作，需要在用户允许的前提下提醒用户继续进行。

五、通知方式不同

Web网站：对于浏览器的通知中心，用户使用不多，很难主动唤起用户

移动App：向用户推送通知的方式很常见。

设计要点：

1、移动应用程序可以使用通知及时提醒用户一些重要信息，但也需要考虑用户仍然可以在关闭通知提醒的场景中使用；由于“通知”功能对用户更为重要，设计师需要考虑如何让用户更容易“打开通知权限”。

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

Web网站：目前城市通常获得定位功能

移动App：可以更准确地获取用户的当前位置

设计要点：

1、移动应用程序可以合理地利用用户的位置，为用户提供一些服务。例如，地图类可以搜索从“我的位置”到目的地的路线，生活服务类可以查询我位置附近的食物、购物中心、电影院等，节省了用户手动输入当前位置的复杂性和更智能性。