020-29815005
预约专线时间:09:00-23:59

设计从竖屏思维转向横屏思维

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

  一、前言

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

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

  二、背景。

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

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

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

  三、分析。

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

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

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

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

  横屏单页设计。

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

  首先,扩展布局。

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

  等比拉式拉杆

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

  部分新闻产品(iPad版)

  二侧拉伸。

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

  部分便笺产品(iPad端)

  重复拉伸。

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


设计


  第二,分栏的布置。

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

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

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

  第三,区别布局。

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

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

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

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

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

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

  1.父子组合

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

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

  专用邮箱产品(iPad版本)

  部分视频产品(iPad版)

  2.主要成分。

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

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

  部分视频产品(iPad版)

  3.并联组合

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

  购物产品(手机端折屏)

  4.总结。

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

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

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

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