数极客首页

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

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

杂志普通
的小译文一篇,适合

这样的下午做一做,适合

这样的周末读一读。走着。

眼下,智能移动

设备内置的加速计的主要作用,就是依据

设备的定向方式来决议
屏幕的显现
方式

,也就是在横屏或竖屏方式

之间中止

切换。这种功用
运用
户经过
简单的动作就能够

得到额外的规划
方式

,期间不需求
操作任何界面元素或实体按钮。关于
我们来说,这是一个提升产品用户体验的契机,但其中也不乏应战
;我们要充沛

了解

不同定向方式所触及
到的运用
情境,并确保两种体验方式

之间的差别

不会给用户带来唐突的觉得

简直

一切
类型的移动

应用都能从显现
方式

切换功用
当中获益。本文将盘绕
着这一话题,为应用的设计师与开发者们引见
一些能够

运用到理论

工作中的基础

概念,同时还会辅佐

大家了解

那些在理论
当中有可能遇到的应战
以及相应的处置

计划

经过
设备定向切换显现
方式

Youtube的移动

应用是一个很典型的案例。在竖屏方式

中,视频窗口较小,但相关信息比较

丰厚
;而在横屏方式

下,视频展开为全屏,并向用户提供了愈加
全面的播放控制功用
。当视频播放终了

后,界面方式

会自动切换到竖屏状态,籍此提示用户调转设备并经过
更全面的导航和信息索引来阅读
其他视频。

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

不过在有些时分
,第二显现
方式

也会给用户带来迷惑。以CardMunch为例(LinkedIn推出的名片扫描及阅读
工具),其横屏方式

会将之前整个列表方式
的界面改动
成为“旋转木马”视图。(相关阅读:iOS用户体验解析 – 空间模型与旋转木马视图)

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

这个横屏界面中短少

关于定向切换的视觉提示,而且其中简直

没有提供任何功用
操作,用户无法添加或编辑名片,只能阅读
并进入详情界面。特别是假定

用户在一开端
就以横屏方式翻开
的应用,那么在缺乏引导与提示的状况

下,他们很有可能无法发现竖屏方式

的界面及相应的内容与功用

设计方式

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

液态

相似

网页设计中的液态规划
方式。依照

新的显现
规格,对界面元素的位置及尺寸中止

响应式的调整。具有代表性的产品案例包括Skype及Pocket应用。

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

扩展

在这种方式

中,界面会依据

屏幕定向方式的变化而增加或减少规划
元素(通常是导航)。例如IMDb的iPad应用会在横评方式

下增加一个左侧导航列表,而在竖屏状态时,用户能够

点击界面当中的“全部作品”展开这个列表。

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

关于
这类应用,其自身

的内容与功用
不应该随着显现
方式

的切换而增减——需求
调整的是一些关键界面元素的呈现方式。不要让用户必需
坚持
某种定向方式才干
获取特定的内容与功用

互补

两种显现
方式

当中的内容方式
能够

是彼此互补和辅助的关系。以金融类的应用为例,在竖屏状态下,信息能够

经过
普通的数据列表方式
呈现,而调转屏幕之后,能够

充沛

应用
新的界面宽度,以统计图表的方式
展示

数据。

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

延伸

第二显现
方式

能够

作为默许
状态的功用
延伸与强化。举个简单的例子,关于
遥控器类的应用,竖屏状态的默许
界面中能够

包含一些最基本

的功用
与频道信息;而在横屏状态下,用户不只
能查看到各频道完好
的节目排期,而且同样能够

在这个视图当中执行频道切换、设定录像时间等操作。

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

肯定
默许
的定向方式

Above & Beyond是iPad上的一款交互式电子书。它具有
横、竖两种显现
方式

,其中竖屏方式

提供更大的、细节质量更高的作品视图,不过只需

在横屏状态时才会默许
显现
“返回主菜单”、“评论”一类的互动功用

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

但是
关于
iPad来说,竖屏才是其的默许
定向方式。所以当用户第一次在竖屏状态下翻开
应用时,系统会提示用户经过
点击屏幕来调出相关的功用
——设计师在这一点上思索
的十分

周全。

不过关于
Andorid以及Windows 8的平板,以及BlackBerry的Playbook来说,它们的默许
定向方式是横屏。那么在这些设备中,界面显现
方式

的战略
及相关引导提示就需求
发作
相应的变化了——我们要确保默许
显现
方式

当中的内容与功用
契合
目的
设备自身

默许
定向方式的特性

了解

应用的上下文环境

上下文运用
环境是移动

应用用户体验设计当中的关键组成要素(相关阅读:iOS用户体验要素解析为应用的上下文环境而设计),在思索
屏幕定向及显现
方式

切换的相关问题时,这方面的要素
也会起到重要的影响作用。

以目前日渐盛行
的食谱类应用为例,很多硬件厂商致使

为这些应用打造了相关的壁挂或桌面支架,运用
户能够

更便当
的在厨房当中运用

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

而我们也能够

依据

这类应用在不同的运用
情形
中的需求用例来创建

具有差别

性的显现
方式

。以The Bey Crocker Cookbook为例,当用户在相对安定的状态下希望阅读和学习食谱时,他能够

运用
竖屏方式

;此时界面中会展示

完好
的烹饪及食谱信息,同时还包括最终效果图以及相关的功用
元素。假定

用户希望在厨房一边烹饪一边中止

参考,那么横屏方式

就愈加
适用了。在这种状态下,每一步的操作指导都会占领
一屏的篇幅,字号更大,便于在短时间内辨认

;应用
内置摄像头,应用还能够

辨认

特定的肢体动作,用户无需触摸屏幕,只需
在摄像头前挥挥手,操作指导就会自动翻页。

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

引导用户在不同的显现
方式

之间切换

经过
调转屏幕来切换显现
方式

,从某种水平

上讲这种交互方式并不契合
直觉。假定

界面中没有任何视觉引导和提示,用户很有可能错过另外一种显现
方式

及相应的功用
体验。以iPhone自带的计算器应用为例,假定

用户不知道

它还能提供横屏方式

,那就会错失掉那些高级计算功用

经过
视觉元素对用户中止

提示与引导,这能够

使产品的体验愈加
契合
直觉(相关阅读:具有引导性的移动

应用界面设计方式

)。我们来看一些能够

用来提示用户中止

显现
方式

切换的设计思绪

标题栏

经过
标题栏作为提示,这种方式主要运用在第二显现
方式

当中。仍运用
之前的遥控器应用作为例子,假定

用户以横屏状态翻开
了应用,他将看到一个固定显现
在左侧的标题栏,其中的标题文字方向会暗示他将屏幕调转过来中止

阅读,从而发现竖屏方式

切换按钮

与规范

的分享按钮相似

,我们也能够

运用
能够

被普遍认知的图标按钮提示用户手动切换横竖屏显现
方式

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

两种显现
方式

当中都要包含这个切换按钮。用户点击之后,显现
方式

自动切换,固然
接下来用户一定
会真正调转设备中止

查看,但他们经过
这种方式了解

了应用所提供的两种显现
方式

,未来

会逐步

的在需求
的时分
自行调转设备,不再需求
按钮的辅助。所以该按钮即能够

触发切换功用
,同时也能够

作为视觉提示。

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

切换图标也一定
要以规范

按钮的方式
呈现

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

需求
留意
的是,这种方式有它自身

的风险,在界面中添加某种非规范

的、持续存在的辅助性元素,这自身

是具有一定争议的。不过这种方式的简单有效也是显而易见的。所以也希望各位设计师们能够

从这点动身
,扩展思绪
,分别

产品的理论

状况

中止

理论

拖拽把手

运用
把手方式
的控件来提示用户经过
拖拽展开第二视图方式

,假定

用户直接调转设备的话,第二视图方式

也会自动展开,相似

卷帘的效果。带有方向的动画过渡效果能够

运用
户对两种视图方式

的层叠关系产生深化

的印象。

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

总结

我们习气
于将这些“额外”的显现
方式

作为应用主要界面方式

的从属

物,其主要缘由
或许
就在于很多用户基本

不了解

它们的存在。经过
一定的视觉提示,引导用户发现这些同样是经过精心机

和打造的界面方式

,我们就能使应用针对不同的运用
情境发挥更大的价值,从而有效提升产品的友好性及体验称心

度。

来源:beforweb

给大家举荐

我国新一代大数据用户行为剖析

与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合剖析

用户行为数据和业务数据,能够

自动监测网站、APP、小程序等多种渠道推行
效果剖析

,是增长黑客们必备的互联网数据剖析

软件。数极客支持实时多维剖析

、漏斗剖析

、留存剖析

、途径
剖析

等十大数据剖析

办法

以及APP数据剖析

网站统计网站剖析

小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据剖析

模型,是用户行为剖析

范畴
首款应用定量剖析

与定性剖析

办法

数据剖析

产品

发表评论

评论已关闭。

相关文章