LOFTER for ipad —— 让兴趣,更有趣

点击下载 关闭

LOFTER-网易轻博

横屏

1100浏览    133参与
沙 夢 | 砂のお城
时光如河,浮生为鱼,在暗流湍急...

时光如河,浮生为鱼,在暗流湍急中相会,
总是命里该遇,就算那日不见,终会路左相逢。——《庆余年》

时光如河,浮生为鱼,在暗流湍急中相会,
总是命里该遇,就算那日不见,终会路左相逢。——《庆余年》

The Way for UE

配图是长图片在iOS图库、QQ和微博横屏下的显示效果,我猜可能是因为微博里长微博图片比较多的原因,为了保证阅读效果,微博专门对横屏长图片显示做了满屏优化阅读体验

配图是长图片在iOS图库、QQ和微博横屏下的显示效果,我猜可能是因为微博里长微博图片比较多的原因,为了保证阅读效果,微博专门对横屏长图片显示做了满屏优化阅读体验

Sim_H

关于横屏模式的一些思考(2)——横屏APP

前面提到了有一些手机APP生来就是横屏模式,且这类APP以游戏为主。今天我们来聊聊横屏设计的具体设计细节。

一、横屏APP之儿童APP

大家都知道,大屏手机单手操作难度系数较大。成年人尚且需要双手,更何况那些“手无缚鸡之力”的孩子们。所以,儿童APP大都采用横屏设计,不信,可以去AppStore看看。

机智的朋友是不是想说儿童玩手机的主要场景是坐着而非站着,是否横屏又有什么关系。举一个最常见的场景:长途旅行时儿童经常不肯安安静静地坐在座位上,而家长又不能总是放任其跑来跑去影响其他乘客休息,于是就拿出手机或pad给孩子玩。

这个问题很容易回答,换一个角度思考即可——家长都会给儿童玩哪些APP...

前面提到了有一些手机APP生来就是横屏模式,且这类APP以游戏为主。今天我们来聊聊横屏设计的具体设计细节。

一、横屏APP之儿童APP

大家都知道,大屏手机单手操作难度系数较大。成年人尚且需要双手,更何况那些“手无缚鸡之力”的孩子们。所以,儿童APP大都采用横屏设计,不信,可以去AppStore看看。

机智的朋友是不是想说儿童玩手机的主要场景是坐着而非站着,是否横屏又有什么关系。举一个最常见的场景:长途旅行时儿童经常不肯安安静静地坐在座位上,而家长又不能总是放任其跑来跑去影响其他乘客休息,于是就拿出手机或pad给孩子玩。

这个问题很容易回答,换一个角度思考即可——家长都会给儿童玩哪些APP呢?想清楚这个,上面的问题也就迎刃而解。

1)游戏

游戏绝对是让儿童乖乖听话的最佳方法。正因为如此,不建议家长经常使用这招。儿童自制力较差,玩游戏很容易上瘾,没有半个小时根本停不下来。即使是单手操作,为了保持平衡,也需要使用另一只手来保持平衡。两只手拿握,横屏更稳当、更轻松。竖屏双手拿握时重心不在两手中间,双手为了保持重心的稳当,自然需要耗费更多的力量。

同时,一些游戏还需要双手去操控,例如下图所示的天天酷跑。在横屏状态下,横向操控区域更富裕,双手操控更顺畅。


(天天酷跑)

对于赛车类游戏,常常需要借助旋转设备来调整车辆行驶的方向,例如极品飞车,虽然不是为儿童设计的游戏,但是儿童玩起来完全不输给成年人。


(极品飞车)

2)早教

早教包括儿歌故事、唐诗宋词、绘画音乐等。

为了让儿歌故事、唐诗宋词变得更加通俗易懂、生动有趣,通常会采用动画的形式来表现,就像我们常看的MV。当然,也是横屏设计多于竖屏设计。原因很简单,横屏更容易让儿童获得沉浸式体验。


(宝宝巴士)

绘画音乐在培养儿童艺术天赋的同时,也培养了儿童的动手能力。这是因为绘画音乐APP常需要儿童的互动,儿童在互动中收获更多的成就感,兴趣也就更浓。为了方便儿童点击操作,这类APP也多是采用横屏设计,稳定性更好。


(熊孩子爱涂鸦)

3)视频

和一些游戏APP类似,视频APP也不一定是儿童专属的APP。家长爱看电影、电视剧,孩子们则爱看动画片。上一期的文章分析了为什么视频APP在播放时会切换成横屏模式,主要也是想呈现更完整的画面。


(视频截图)


二、横屏APP之设计策略

横屏APP在设计上自然与竖屏APP有所不同,需要考虑横屏模式的优点和缺点,从而为用户提供更好的体验。

1)横向滑动

横屏模式纵向空间有限,上下滑动区域较小,操作较不便。相反,横向空间富裕,左右滑动区域较大,操作更顺畅。例如Playkids的主题选择界面,所有的主题横向排练,可左右滑动查看。


(Playkids)

2)左右分屏

无论是页面内容布局还是页面结构,都可以采用左右分屏的形式,充分利用页面空间进行内容展示。如下图所示,左右结构的内容布局使得页面空间得以充分利用。


(Playkids)

3)去掉title栏

手机APP的title栏一方面充当的是标题作用,告诉用户当前页面是什么;另一方面也会[返回键]提供一个栖息之地。然而,在横屏模式下,页面纵向空间十分有限,这样做反而弄巧成拙。可取的做法是去掉title栏,只在左上角显示返回键。例如极品飞车的设计,只保留返回键显示在页面左上角,标题置于返回键下方。


(极品飞车)

4)临时层位于屏幕左右两侧

竖屏模式下的很多临时层都是从屏幕底部向上升起,临时层位于屏幕底部。如下图所示,搜狗地图地图选点的临时层就是位于屏幕底部。


(搜狗地图)

横屏APP纵向空间有限,如果临时层还是显示在页面底部,展示内容就非常有限,超出部分滑动时的区域较小,滑动操作也较不变。因此,横屏APP的临时层多位于屏幕的左右两侧。例如海岛奇兵的特遣队页面,就是从屏幕右侧向左拉伸出显示。


(海岛奇兵)

极品飞车的排行榜页面也是如此。点击排行榜按钮,从屏幕右侧向左拉伸出排行榜页面。


(极品飞车)


总之,在设计横屏APP时应该考虑到横屏的特性,从这些特性出发去思考对于用户来说更好的体验。


微信搜索“wujizhitan168”或长按、扫描下方二维码关注,阅读更多优质文章。




LOFTER

让兴趣,更有趣

简单随性的记录
丰富多彩的内容
让生活更加充实

下载移动端
关注最新消息