1.3 移动电商UI设计与传统电商UI设计的差异

通信技术的发展带动了无线通信技术的迅速发展，智能手机和平板电脑等移动设备已经成为人们进行电子商务活动的首选。智能手机和平板电脑与传统的PC设备有着巨大的差异，这种差异使移动电商UI设计明显区别于传统电商UI设计。本节向读者介绍移动电商UI设计与传统电商UI设计的差异。

1.3.1 使用场景

设计要点如下：

●在使用移动电商App时，用户很容易被周边环境影响，对界面中展示的内容可能没那么容易留意到。在长时间使用时更适合沉浸式浏览。在利用碎片化时间浏览时用户可能没有足够的时间，每次浏览内容有限，因此类似“收藏”等功能比较实用。用户在移动过程中容易误操作，需要考虑如何防止误操作、如何在误操作后恢复。

●Web网站的环境相对固定，用户更加专注。可以在Web网站界面中安排更多的内容，使浏览者获得更加全面的资讯和内容。

1.3.2 交互方式

设计要点如下：

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

●移动电商App支持丰富的手势操作，如通过左滑选项显示该选项的“删除”“取消关注”等相关操作选项，这种操作方式的特点是快捷、高效，但对初学者来说有一定的学习成本。在合理设计快捷操作方式的同时，还需要支持最通用的点击方式来完成任务的操作流程。图1-15所示为移动电商App界面中丰富的交互操作方式。

●移动电商App以单手操作为主，界面中的重要元素需要在用户单手点击范围内，或者提供快捷的手势操作。

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

1.3.3 屏幕尺寸

设计要点如下：

●移动设备的屏幕尺寸较小，能够展示的内容有限，因此需要明确界面中内容的重要性和优先级，对优先级较高的主要内容突出展示，对次要内容适当使用“隐藏”方式。图1-16所示为移动电商App界面，以商品的展示为主，通过商品吸引用户关注。

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

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

●因为We b网站显示器分辨率差异较大，并且浏览器窗口尺寸可变化，所以在设计时需要考虑在分辨率不同的情况下页面内容的展示和布局。因为显示器分辨率的问题，采用传统制作方法会导致页面展示的不同。采用响应式布局能够满足用户在不同显示器分辨率下的浏览需求，并且能够很好地适配智能移动设备对页面的访问。图1-17所示为响应式电商网站设计。

1.3.4 信息组织

设计要点如下：

●移动电商的信息组织与设计更加重视提高单页信息传输能力，尽量减少跨页信息传递，通过压缩或拉宽信息组织结构来避免因反复切换页面造成的用户流失。

●移动端页面之间的切换除了会受网络速度的影响，还会受智能移动设备本身的影响。因此，移动电商在内容的层级组织上，通常会呈现出宽而浅或窄而浅的层级关系。图1-18所示为PC端的“苏宁易购”网站界面，在界面顶部展示了频道分类，在界面左侧展示了详细的商品分类。图1-19所示为移动端的“苏宁易购”App界面，首页使用功能图标的形式展示频道分类，如果用户需要查看详细的商品分类，则需要在底部点击“分类”选项切换到商品分类页面，在该页面显示商品的详细分类。

1.3.5 导航系统

设计要点如下：

●导航系统关注的是如何浏览信息，其作用是告诉用户当前的位置，以及如何返回原来的位置，它是信息架构的视觉表现。

●在传统电商向移动电商发展的过程中，要对原导航进行一定的删减、隐藏、组织，使其更加适合移动端屏幕的特性。此外，要把握目标用户的本质需求，结合移动电商的使用场景、用户的使用习惯、软件和硬件的特性等对导航系统进行再设计。例如，在PC端“天猫商城”的导航系统中，商品分类的划分非常细致，并且以文字形式为主，如图1-20所示；而在移动端“天猫商城”的导航系统中，将商品分类导航设计在独立的界面中，并且重新对商品分类进行了划分，每种分类中的子商品选项都使用商品图片与文字相结合的表现形式，表现效果更加直观，并且更便于用户进行点击操作，如图1-21所示。

●根据移动端特性，移动电商采用的导航系统主要有顶部扩展导航、标签导航、列表式导航等，如图1-22所示。