当前位置:首页 > 经验学习 > 交互设计

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

所属栏目:交互设计 时间:2013-12-26 来源: 作者:不详 点击:

编者按】本文翻译zi(自)Smashing Magazine,译者为@C7210 ,文章发布于其个人博客BeForWeb。目前移动设备中的都会内置“加速计”,这个装置使得移动设备可以根据摆放的fang(方)向进xing(行)屏幕的横竖屏切换,令移动应用有了更多展现的功能和使用的方式。
本文中列举了一些对横竖屏设计中可能遇见的设计难点及解决的方案、
眼下,智能移动设备内置的加速计的主要作用,就是根据设备的定向方式来决定屏幕的显示模式,也就是在横屏或竖屏模式之间进行切换。这种功能使用户通过简单的动作就ke(可)以得到额外的布局模式,期间不需要操作任何界面元素或实体按钮。对于我们来说,这是一个提升产品用户体验的契机,但其中也不乏挑战;我们要充分了解不同定向方式所涉及到的使用情境,并确保两种体验模式之间的差异不会给用户带来唐突的感觉。
几乎所有类型的移动应用都能从显示模式切换功能当中获益。本文将围绕着这一话题,为应用的设计师与开发者们介绍一些可以运用到实际工作中的基础概念,同时hai(还)会帮助大家了解na(那)些在实践当中有可能遇到的挑战以及相应的jie(解)jue(决)方案。
通过设备定向切换显示模式

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

不过在有些时候,第二显示模式也hui(会)给用户带来迷惑。以CardMunch为例(LinkedIn推出的名片扫描及浏览工具),其横屏模式会将之前整个列表形式的界面改变成为“旋转木马”视图。(相关阅读:iOS用户体验解析 – 空间模型与旋转木马视图)

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

设备的定向方式被改变之后,应该以怎样的方式呈现新De(的)视图呢?我们总结出了四种常见的设计模式。
液态
类似网页设ji(计)中的液态布局方式。按照新的显示规格,对界面元素的位置及尺寸进行响应式的调整。具有代表性的产品案例包括Skype及Pocket应用。


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

对于这类应用,其自身的内容与功能不应该随着显示模式的切换而增减——需要调整的是一些关键界面元素的呈现方式。不要让用户必须保持某种定向方式才能获取特定的内容yu(与)功能。
互补
两种显示模式当中的内容形式可以是彼此互补he(和)辅助的关系。yi(以)金融类的应用为例,在竖屏状态下,信息可以通过普通的数据列表形式呈现,而调转屏幕之后,可以充分利用新的界面宽度,以统ji(计)图表的形式展示数据。

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

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

请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

标签:

你应该也喜欢这些吧

共有 0 条评论

给个评价吧

验证码: