横屏游戏小窗分屏之后就变成竖屏的了,没办法玩?

导读:产品界面设计往往要根据用户体验和企业特点选择一定的界面模式,相对于目前流行的竖屏界面模式,横屏界面也具有一定的优势。本文作者结合实际案例总结了几种横屏设计模式,让我们一起来看看吧。

自从移动互联网时代到来以来,由于竖屏设计在手机上是主流的界面模式,设计师往往只注重竖屏设计,而忽视横屏设计的特点和机会。但事实上,在横屏状态下横屏空间会变大,因此可以对横屏空间进行加法,通过横屏设计模式获得更多的体验。

本文是我在项目设计中总结出来的一些横屏设计模式,希望能对设计师有所启发和帮助。

这是vivo游戏在线项目带来的问题,vivo游戏在线依赖于游戏,分为横屏和竖屏两种,对于游戏类产品而言,横屏模式所占的比例较大,因此涉及到对手机端横屏设计的巨大需求。

从左至下图可以看到,竖屏游戏连接收银台如果按照传统的竖屏设计思路,将收银台移至横屏,由于纵向高度的限制,在第一屏中不会出现重要的支付渠道。有没有别的办法?所以我开始思考,屏幕下的设计模式究竟是什么?横屏设计是否有规则规则?

垂直收银台与垂直设计理念下的交叉收银台。

竖屏是移动端的主流界面模式,易于单手握持,竖屏具有较大的滚动屏幕空间,便于用户更有效地浏览长内容。

而横屏模式通常出现在pc或pad端,也有一些特殊的手机场景,比如游戏类、视频类等等,横屏状态下横屏空间会变大,因此横屏模式可以在设计时对横屏空间进行补充,通过横屏模式获得更多的体验。

根据市场上各式各样的横屏设计,归纳出两种横屏设计模式。

注:范围包括手机端和pad端;应用于同一应用的垂直屏幕匹配或从手机端迁移到更适合垂直屏幕的pad端。

单页面设计模式主要是通过调整页面布局,使其能够更好地适应更大范围的横向空间显示,包括可扩展性、分栏性和差异性三种布局方式。

扩展版式尽量保持原来的竖屏页面布局,通过适当的扩展来填充横向版式。

页面元素尺寸随着屏幕宽度的增大而做等比拉,这种布局方式适用于视频、图片、杂志等元素具有视觉冲击力的场景,等比拉可以比放大后更好地阅读内容。

部分新闻产品(iPad版)

页面中元素的尺寸不变,通过横向相对拉伸,增加元素的显示宽度或横向间距,满足填充横向空间的需要,适合于阅读类场景,单行拉伸后可以显示更多的文字。

部分便笺产品(iPad端)

遵循页面元素的大小和间距不变,充分利用屏幕的宽度优势,增加横向可显示元素的数量,使其能够在多个场景中重复显示元素,比如金刚位icon、应用列表等。

竖屏状态下纵向空间丰富,页面布局通常是上下结构,而横屏状态下纵向空间紧张,使得原本可以曝光的内容无法在首屏上曝光。这时可以将上下结构转换成更适合屏幕左右结构的布局,左右条纹的宽度也可以根据不同内容的重要性进行定制。

分栏布局是横屏设计中比较常用的布局方式,它适用于多种场景,特别是底部内容优先级要求在首屏显示时,可以优先采用。从背景参考中,竖屏游戏的联合收银台转移到横屏游戏就是使用了分栏布局。

游戏软件联运柜台(手机)

与竖屏显示方式不同的是,它采用了更为特殊的、更适合横屏状态的布局结构,如音乐产品的CoverFlow布局,金融产品的数据图表布局,游戏产品的卷轴关卡布局等等。

这种设计模式门槛较低,适合于只有横屏场景的产品或特定横屏场景(图表、时间表等)的特殊设计,需要考虑实际场景的适用性。

具体时间表产品(移动版)

二、双页模式的横屏设计。

双面页面设计模式,就是将竖屏状态下的原页面与多个页面相关联,合并到同一个页面下,同时以分屏的形式呈现,减少了跨页交互、频繁来回切换的操作成本,创造更高效的用户体验。

这种双面横屏设计模式一般适用于大屏幕设备的横屏状态,小屏幕设备下会显得空间比较拥挤。根据组合页面之间的关系,可分为父子组合、主次组合和并列组合。

这种双重页面组合方式在页面端比较常见,通常是左屏显示列表页面,右屏显示列表项目细节页面。

用户可点击左屏列表中的任意一项,在右屏快速打开对应的详细内容,实现方便切换,使原来需要在竖屏下点击的某项→阅读详细内容→返回列表→点击列表中的另一项→阅读详细内容的繁琐流程,变得简单、高效、易用。这种设计模式适用于诸如邮件,新闻,笔记之类的消费品。

专用邮箱产品(iPad版本)

部分视频产品(iPad版)

主屏组合中,左屏是主要内容,右屏是次要内容;例如,用户可以在左屏上看到详细的文章、视频内容,在右屏上看到详细的评论,并与之互动;或者,用户可以在左屏上看到详细的评论,在右屏上看到相关的商品或应用评论,并协助进行购买和下载决策。

采用这种设计模式,可以同时对主要内容进行浏览,右屏内容和左屏内容相互依赖,起到辅助左屏内容的作用。

部分视频产品(iPad版)

在某些情况下,用户需要对比两个相同页面。在横屏模式下的页面对比步骤是非常复杂的,而且不直观,用户记忆成本高,而在横屏双页面模式下,用户可以同时浏览两个内容细节,适合不同商品的对比场景,更加有效,直观。

购物产品(手机端折屏)

总之,横屏设计场景中的横屏设计模式主要有两种,一种是横屏单页设计模式(伸缩式、分条式、差异性式),另一种是横屏双页设计模式(父/子组合、子组合、子组合),下表列出了不同的横屏类型及其应用场景和应用效果:在实际应用中要注意区分横屏场景,具备横屏设计意识,并由横屏设计思维转变为横屏设计思维。

横屏设计模式建议用于以下方式:

根据设备尺寸,找出适合横屏设计的大类模式,一般来说,双页模式比单页模式更适合大屏设备,能更好的发挥横屏优势;

对于横屏设计模式的应用场景,应考虑在不同大类中采用什么样的横屏设计模式,以适应业务场景,解决当前产品的核心问题,达到体验提升的效果。

立式广告机怎么设置竖屏?视频变成横屏了怎么办

文章来源:本站人气:2361发表时间:【】

最近有客户提出来:买了一批网络版的液晶立式广告机回来,放的视频是横版的,如何改成竖版的呢?

目前市场上的部分液晶广告机是支持使用液晶广告机遥控器设置横屏和竖屏的,可以直接用遥控器控制更改图片和视频播放模式即可。在液晶广告机遥控器播放的时候选择:画面—画面旋转—向左旋转/向右旋转。如是视频,可以逆时或者顺时旋转90度,然后调整为屏幕大小,视频可以不留黑边,但画面肯定变形。

目前来说一般都有一些格式转换软件可以实现液晶广告机的横屏和竖屏切换功能,如果自己无法在网上找到相关软件,可以找液晶广告机厂家进行协助安装。但是用软件在将横屏变竖屏的过程中会出现视频的黑边或者变形的话,建议使用分屏软件播放视频和图片,如果实在不行,就需要重新制作对应格式的视频了。

目前来说,深远通基本上都是支持的是的横屏格式和的竖屏格式的播放文件,所以用户在购买液晶广告机进行图片和视频播放的时候要注意图片和视频的格式是否正确。

  随着移动互联网的快速发展,竖屏俨然已经成为移动端主流的界面模式,如何在竖屏设计上玩出花样成为了当前发展的方向,但逐渐被忽视的横屏设计,因其横向的空间更大,更符合人类用眼习惯,反而将会获得全新的发展空间。有效的利用横屏的特点,在横向空间内做优化,从而达到体验上的增益,这正是OPPO创新推出的折叠屏手机OPPO Find N的特色所在。

N外屏采用比例为18:9的

我要回帖

更多关于 分屏怎么恢复横屏 的文章

 

随机推荐