1.4.1　设备尺寸不同

表1-2　Web网站与移动App的设备尺寸区别

设计要点：

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

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

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

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

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

图1-25所示为响应式的网站设计示例，随着移动互联网的发展，各种智能移动设备越来越多，而所设计的网站能够适应在不同的设备中进行浏览已经成为一种必须具备的标准，并且需要考虑到当用户使用不同的设备浏览网站时都想得到良好的体验，这样才是一个用户体验良好的网站。

图1-24　移动App界面设计示例

图1-25　响应式网站设计示例