1.1.3 移动UI与PC端UI

PC端UI设计的范围非常广，包括绝大多数的UI领域。而移动UI设计主要涉及智能手机、平板电脑和智能穿戴设备的客户端。从设计的角度来说，二者在屏幕尺寸、设计规范和交互动效上都有很大的不同。

1.屏幕尺寸不同

移动设备的屏幕一般都比较小，又受到不同系统的限制，因此每个页面中所容纳的内容较少，需要通过多层级的方式扩充内容。而PC端UI设计则没有这个顾虑，每个页中都要尽量多放内容，从而减少层级。

例如PC端的京东页面，整个页面尺寸较大，页面中摆放内容的空间也较大，用户只需要通过二级页面就可以看到想要的内容，如图1-5所示。

移动端的京东App首页层级较多，用户想要找到感兴趣的商品，往往需要一层一层地查找。点击“京东超市”图标即可进入“京东超市”的二级页面，如图1-6所示。

图1-5 PC端的京东页面

图1-6 点击“京东超市”图标进入二级页面

2.设计规范不同

PC端UI通常使用鼠标操作，而移动UI使用手指点击操作。鼠标操作的精确度高，而手指操作的精确度则相对较低。因此PC端UI的图标一般比较小，而移动UI的图标则相对较大。图1-7所示为QQ音乐PC端和移动端图标大小的对比。

图1-7 QQ音乐PC端和移动端图标大小的对比

3.交互动效不同

PC端UI可以通过鼠标进行很多的UI交互操作，如单击、双击、按住、移入、移除、右击和滚动滚轮等。图1-8所示为使用鼠标进行交互操作时，不同状态下鼠标指针的不同显示效果。

图1-8 不同状态下鼠标指针的不同显示效果

移动UI通过手指触控屏幕完成交互操作，因此交互方式相对较少，只能实现旋转、收缩、长按、平移、点击和滑动等操作。图1-9所示为移动UI的交互手势。

图1-9 移动UI的交互手势

例如，在移动端的爱奇艺视频软件中，浏览者在视频界面左边上下滑动可以调整亮度，在右边上下滑动可以调整声音，在最下面左右滑动可以调整视频的进度，双击可以暂停/继续播放。而在PC端的爱奇艺视频软件中，可通过单击、双击、右击和滚动滚轮等进行多种操作。

提示

除了以上所讲的不同之处，PC端UI与移动UI还有很多方面是不同的，如图片的格式、切片输出要求等，这些内容在本书后面的章节中会逐一进行详细讲解。