横竖屏切换中的界面设计与体验提升

Youtube的移动应用是一个很典型的案例。在竖屏模式中，视频窗口较小，但相关信息比较丰富；而在横屏模式下，视频展开为全屏，并向用户提供了更加全面的播放控制功能。当视频播放结束后，界面模式会自动切换到竖屏状态，籍此提示用户调转设备并通过更全面的导航和信息索引来浏览其他视频。

不过在有些时候，第二显示模式也会给用户带来迷惑。以CardMunch为例(LinkedIn推出的名片扫描及浏览工具)，其横屏模式会将之前整个列表形式的界面改变成为“旋转木马”视图。

这个横屏界面中缺少关于定向切换的视觉提示，横竖屏切换中的界面设计与体验提升,而且其中几乎没有提供任何功能操作，用户无法添加或编辑名片，只能浏览并进入详情界面。特别是如果用户在一开始就以横屏方式打开的应用，那么在缺乏引导与提示的情况下，他们很有可能无法发现竖屏模式的界面及相应的内容与功能。

设计模式
设备的定向方式被改变之后，应该以怎样的方式呈现新的视图呢？我们总结出了四种常见的设计模式。

液态
类似网页设计中的液态布局方式。按照新的显示规格，对界面元素的位置及尺寸进行响应式的调整。具有代表性的产品案例包括Skype及Pocket应用。

扩展
在这种模式中，界面会根据屏幕定向方式的变化而增加或减少布局元素(通常是导航)。例如IMDb的iPad应用会在横评模式下增加一个左侧导航列表，而在竖屏状态时，用户可以点击界面当中的“全部作品”展开这个列表。

对于这类应用，其自身的内容与功能不应该随着显示模式的切换而增减——需要调整的是一些关键界面元素的呈现方式。不要让用户必须保持某种定向方式才能获取特定的内容与功能。

互补
两种显示模式当中的内容形式可以是彼此互补和辅助的关系。以金融类的应用为例，在竖屏状态下，信息可以通过普通的数据列表形式呈现，而调转屏幕之后，可以充分利用新的界面宽度，以统计图表的形式展示数据。

延伸
第二显示模式可以作为默认状态的功能延伸与强化。举个简单的例子，对于遥控器类的应用，竖屏状态的默认界面中可以包含一些最基本的功能与频道信息；而在横屏状态下，用户不仅能查看到各频道完整的节目排期，而且同样可以在这个视图当中执行频道切换、设定录像时间等操作。

确定默认的定向方式
Above & Beyond是iPad上的一款交互式电子书。它拥有横、竖两种显示模式，其中竖屏模式提供更大的、细节质量更高的作品视图，不过只有在横屏状态时才会默认显示“返回主菜单”、“评论”一类的互动功能。

然而对于iPad来说，竖屏才是其的默认定向方式。所以当用户第一次在竖屏状态下打开应用时，系统会提示用户通过点击屏幕来调出相关的功能——设计师在这一点上考虑的非常周全。

不过对于Andorid以及Windows 8的平板，以及BlackBerry的Playbook来说，它们的默认定向方式是横屏。那么在这些设备中，界面显示模式的策略及相关引导提示就需要发生相应的变化了——我们要确保默认显示模式当中的内容与功能符合目标设备自身默认定向方式的特点。

分享文章：横竖屏切换中的界面设计与体验提升
本文链接：https://www.cdcxhl.com/news/162897.html

成都网站建设公司_创新互联，为您提供App设计、响应式网站、手机网站建设、外贸建站、Google、网站内链

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联