首页 > 网页教程 > 设计分享 > 移动应用设计的横竖屏切换中的界面设计与体验提升

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

时间:2012-08-25    作者:c7210   来源:为网而生

之前一周朦朦胧胧的过掉了,想来也没什么可回忆的。这是一种不坏的状态,就像每天早上莫名的空洞,它们都代表着生活和工作里至少还没有很坏很衰的事情让人焦虑。有吗?也许只是在哄骗和宽慰自己。

杂志一般的小译文一篇,适合这样的下午做一做,适合这样的周末读一读。走着。

眼下,智能移动设备内置的加速计的主要作用,就是根据设备的定向方式来决定屏幕的显示模式,也就是在横屏或竖屏模式之间进行切换。这种功能使用户通过简单的动作就可以得到额外的布局模式,期间不需要操作任何界面元素或实体按钮。对于我们来说,这是一个提升产品用户体验的契机,但其中也不乏挑战;我们要充分了解不同定向方式所涉及到的使用情境,并确保两种体验模式之间的差异不会给用户带来唐突的感觉。

几乎所有类型的移动应用都能从显示模式切换功能当中获益。本文将围绕着这一话题,为应用的设计师与开发者们介绍一些可以运用到实际工作中的基础概念,同时还会帮助大家了解那些在实践当中有可能遇到的挑战以及相应的解决方案。

通过设备定向切换显示模式

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

youtube-mobile-device-orientation-portrait-landscape-desing-user-experience

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

cardmunch-carousel-list-business-card-mobile-device-orientation-portrait-landscape-desing-user-experience

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

设计模式

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

液态

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

skype-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience

pocket-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience

扩展

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

imdb-ipad-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience

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

互补

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

s-bank-chart-iphone-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience

延伸

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

remote-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience

相关推荐
15个超棒的无线移动终端UI设计案例赏析
浅谈界面UI设计中的包容性设计
20个创意漂亮的手机应用程序登陆页面设计欣赏
移动应用导航设计如何用魅力来征服用户?
2015最流行的APP设计是啥?比如 Facebook那样的
十五个用户体验设计(UI/UX)案例剖析
腾讯CDC分享QQ登录界面的banner设计过程点滴
移动终端全新界面设计语言“Metro”简析
20个精致漂亮的视频播放器界面设计欣赏及点评
浅谈界面设计中的结构设计
分享:5招助你打造更加简洁的用户界面
分享:360安全桌面主题设计过程及思路总结
国外精彩网页界面设计案例赏析
成功的视觉设计需要给用户传达四个要点
富有灵感和创意的web布局及交互设计赏析
Photoshop教程:提高IOS设计效率的30个要诀分享
在网页设计中如何应用黄金分割比例?
优秀网页/平面设计师是怎样炼成的
符合用户操作习惯的网站界面设计分享
21个带斜线排版设计的网站设计创意欣赏
另眼观看用户界面扁平化设计的不足之外
产品视觉设计与用户心理的有趣现象
平面设计中关于控制视觉层次的设计方法
10个漂亮实用并附带源码的Web设计教程分享
创造视觉冲击力的网页设计配色技巧
在视觉设计中对像素的深度解析
网页设计中关于透明效果的小技巧分享
色彩情感对用户体验设计的影响
换汤不换药?看应用们如何“为iOS 7设计”
APP浏览体验设计的思考:如何理解用户的眼?
高效UI设计秘笈 Photoshop CC使用技巧图文教程
25个创意独特的Web表单设计案例欣赏
2014年Web网页设计的10大发展趋势前瞻
界面设计教程:如何做好扁平化设计之交互篇

精彩推荐

热门教程