• 以指代步
社交账号登录
  • 首页
  • 博客
  • 模板
  • 源码
  • 壁纸
  • 视频
  • 软件
  • 文库
  • 学习
  • 创作中心
  • 关于我们
  • 招兵买马
  • 联系我们
  • 法律申明
  • 合作招商
  • 注册
  • 粉丝
  • 关注
  • 创作
  • Google 发布全新安卓平板,大屏设计趋势来了?

  • 落霞与孤鹜 2022-06-04 22:10:06 收藏
  • 文章标签: 容器 鼠标 组件
  • Google 发布全新安卓平板,大屏设计趋势来了?

    大概是出于对 Material 3 和 Matias Duarte 的热爱,我昨晚还是熬夜将 Google I/O 大会的 Keynote 跟了一遍,没有等来谷歌的设计高级副总裁,倒是看到了不少有趣的内容。

    值得关注的硬件

    Google 发布全新安卓平板,大屏设计趋势来了?

    AI 系统 LaMDA 2 越发强大了,不过真正让我感到亲切的,是用 PaLM 来命名一个人工智能语言路径模型,这可以说是非常的有情怀了。

    Google 发布全新安卓平板,大屏设计趋势来了?

    Pixel 7 系列的硬件直指 iPhone ,工业设计也越发的惊艳和高级了,而新的 Pixel Buds Pro 不仅带有降噪功能,而且续航也超过了有待更新的 AirPods Pro :

    Google 发布全新安卓平板,大屏设计趋势来了?

    最令我想拥有的,还是带有圆形表盘的 Pixel Watch,从直觉上来说,它比 Apple Watch 的圆角矩形的外轮廓更加讨人喜欢,屏幕和表盘整体几乎融为一体的设计也颇为自然,知识 Wear OS 的实际表现还有待观望。

    Google 发布全新安卓平板,大屏设计趋势来了?

    而结尾演示的 AR 眼镜,则直接 Call back 了 演示开头的自然语言识别模型,呼应得恰到好处,只是用来演示的眼镜看起来仅仅只是普通的眼镜,不过从使用场景到演示效果,都非常合理和自然。

    Google 发布全新安卓平板,大屏设计趋势来了?

    相比于VR,AR 更加值得期待,我在 2016 年的文章《AR 可能是距离我们更近的未来》中就表达过这一点,而 Google 的探索方向也正好印证了这一点。

    不过整场发布会,最令我意外的东西,是全新的安卓平板,Pixel Tablet。

    Google 发布全新安卓平板,大屏设计趋势来了?

    疫情之下的产物

    和国内的产品策略不同,Google 在很长的一段时间以内,借助兼容了 Android 应用的 ChromeOS 的笔记本和平板类产品,直接拿下了中低端电脑市场和大量的教育硬件的订单。

    Google 发布全新安卓平板,大屏设计趋势来了?

    桌面级的浏览器和 Google 强大的云服务,搭配 Android 的软件生态,Chromebook 和 ChromeTablet 在教育市场上所向披靡,很多对电脑要求并不高的用户,在选择入门级电脑的时候,各色 Chromebook 的性价比简直是炸裂,如果你感兴趣,你甚至可以在「海鲜市场」上以极其低廉的价格买到各种 Chromebook 来尝鲜。

    Google 发布全新安卓平板,大屏设计趋势来了?

    Pixel Tablet

    作为平台的搭建者,Google 本身也一直是产品和服务的风向标。Google 自身的 Chromebook 系列的产品线年年更新,从最早的 Chromebook Pixel 2013 开始,一路到最新的 Pixelbook Go 和 PixelSlate,肉眼可见地可以看到 Google 对于 ChromeOS 生态的维护与推崇。

    Google 发布全新安卓平板,大屏设计趋势来了?

    Pixel Slate

    Google 发布全新安卓平板,大屏设计趋势来了?

    Pixelbook Go

    而大屏 Android 设备,最后一次更新还是 2018 年所发布的 Pixel C,最有意思的是,这个有着独特磁吸式键盘的 Android 平板,其实是 Pixel 的硬件团队来完成的。

    Google 发布全新安卓平板,大屏设计趋势来了?

    Pixel C 之后,Google 团队开始放任厂商在平板领域野蛮生长,自由探索,直到……2020 年新冠疫情开始肆掠全球。远程工作和线上课程让平板电脑的需求前所未有的旺盛。国内一线手机厂商也在充分吸取了 iPad Pro 等热销排头产品的工业设计之后,纷纷更新或者推出了自家的平板产品线,用上次旗舰级别的芯片(骁龙870 准确来说),键盘触控板手写笔一次到位全给配上:

    Google 发布全新安卓平板,大屏设计趋势来了?

    小米平板 5 系列

    Google 发布全新安卓平板,大屏设计趋势来了?

    Oppo Pad 

    Google 发布全新安卓平板,大屏设计趋势来了?

    Vivo Pad

    时隔 5 年, Google 决定在 2023 年再度推出 Andorid 系统的 Pixel Tablet 这一「官方指导产品」,毫无疑问是下定决心,收拢残兵,重新出发了。

    Google 发布全新安卓平板,大屏设计趋势来了?

    Pixel Tablet

    Google 发布全新安卓平板,大屏设计趋势来了?

    Android 大屏设计

    我之所以如此之在意 Pixel Tablet 的发布,原因就在于,这是一个关键性的信号,那就是咱们可能要开始关注 Android 平台的大屏设计了。

    原因其实很简单。全新的 Material You 或者说 Material Design 3 的设计规范比起上一代更加完善,在机器学习和完善的工具的基础上,对于不同尺寸的屏幕和分辨率有了更好的支持,此是其一。

    Google 发布全新安卓平板,大屏设计趋势来了?

    Google 官方在去年发布新的设计规范和 Android 12 之后,还公布了单独针对大屏设备的 Android 12L 系统,并且提供模拟器和可供特定设备安装的系统更新,此是其二。

    Google 发布全新安卓平板,大屏设计趋势来了?

    折叠屏设备的出现,直接成为了普通智能手机(5-6英寸)和平板类设备(8-11 英寸)之间的桥梁。折叠屏手机交互不仅涉及到 APP 在常规手机尺寸和类 Pad 大尺寸屏幕上的呈现效果,而且还牵涉到不同尺寸屏幕切换以及交互状态改变等因素。在越来越多的折叠屏手机上市之后,这类需求会反向推进传统小屏 APP 做好大屏适配,此是其三。

    Google 发布全新安卓平板,大屏设计趋势来了?

    Google 发布全新安卓平板,大屏设计趋势来了?

    在 Android 折叠屏交互规范出来之前,微软早早地发布了 Surface Duo 的硬件,而且在 Fluent Design 的官方设计指南中,直接加入了双屏设计的规范,具体可以参看我的文章:

    重磅!柔性屏和双屏来啦,设计师必学跨屏设计规范

    我们总在期待 Next Big Thing,企盼下一次数字革命。

    阅读文章 >

    5000 字重磅干货!设计师必备跨屏设计规范(交互篇)

    在上一篇文章《重磅!

    阅读文章 >

    如果微软这个翻车前科过多的企业让你觉得不够有信心,那么来看看 2019 年苹果申请的折叠屏专利吧:

    Google 发布全新安卓平板,大屏设计趋势来了?

    iPadOS 和 macOS 在大屏界面上的协调统一,又何尝不是为 Android 的大屏设计提供一个良好的参考呢?微软和苹果在这一领域的探索,对于 Android 大屏界面设计的参考,我认为是第四个影响因素。

    Google 发布全新安卓平板,大屏设计趋势来了?

    而 Google 下定决心,放下 ChromeOS 系统的 Pixel Slate 改用 Android 系统的 Pixel Tablet 更像是官方深思熟虑后认定时机成熟。

    大屏设计要点

    Google 发布全新安卓平板,大屏设计趋势来了?

    去年 Google I/O 大会上发布的 Material You 算是第三代 Material Design,现在官方也会称其为 Material Design 3,或者 M3,依然是由著名的设计师 Matias 所主导,在 Google 的整个设计团队协同之下完成落地。

    Google 发布全新安卓平板,大屏设计趋势来了?

    最初的 Android 12 本身仅仅只是应用了一部分 M3 的设计功能要要素,比如说其中特别智能的「动态配色」,酸梅干超人的这篇文章当中有相对详细的介绍:

    零基础 UI 入门六:最新安卓规范入门解析

    安卓是由谷歌公司开源的,除 iOS 外的另一大手机系统,也是我们要学习规范的对象之一。

    阅读文章 >

    而面向大屏的 Android 12 L 的发布之后,M3 的设计规范中,可访问性设计这一章节当中,也相应地添加了「大屏幕设计」的相关规范。

    Google 发布全新安卓平板,大屏设计趋势来了?

    关于这一部分的知识点,我将会梳理出相对重要的部分,更细致的内容可以前往 M3 的官网查看:

    https://m3.material.io/foundations/adaptive-design/large-screens/overview

    1、概述

    Google 发布全新安卓平板,大屏设计趋势来了?

    整套设计需要考虑到横屏和竖屏两种不同的方向,基于响应式设计的精神,采用多列布局,借助网格系统,让内容和元素可以在不同尺寸的设备上显示,并且符合人体工程学的需求

    1.1、响应式网格布局

    Google 发布全新安卓平板,大屏设计趋势来了?

    1-边距; 2-分栏;3-列间距

    随着界面尺寸和宽度的变化,网格的数量也会相应的发生变化。

    1.2、断点

    和响应式设计一样,断点定义了适合当前页面的 APP 的响应式布局。考虑到 Material Design 在总体视觉上的平衡,绝大多数的元素都尽量和 8dp 网格对齐,较小的元素,比如图标,则和 4dp 网格对齐。

    Google 发布全新安卓平板,大屏设计趋势来了?

    2、布局

    APP 基础布局是交互体验的基础,布局中可以承载较小的元素区域,比如卡片。

    Google 发布全新安卓平板,大屏设计趋势来了?

    1-导航栏;2-应用栏;3-内容主体;

    2.1、导航区域

    导航栏在展开状态下通常使用 256dp 的统一宽度,折叠状态下为 72dp 。使用竖屏状态下,宽度不足的时候,导航栏可以适当缩窄适配。

    Google 发布全新安卓平板,大屏设计趋势来了?

    1-抽屉式可折叠侧边栏;2-主体内容区域

    2.2、容器

    将具备关联性的元素打包呈现的方式为容器,容器氛围显式和隐式两种,但是不管哪种容器组件,都记得使用响应式尺寸,确保不同缩放状况下可读。

    Google 发布全新安卓平板,大屏设计趋势来了?

    1-隐式容器;2-显式容器

    隐式容器只是边缘不可见,实际设计和开发的时候都要赋予边界参数的。卡片是最常见的显式容器,通常使用显式容器是为了强化其内元素之间的关联。

    Google 发布全新安卓平板,大屏设计趋势来了?

    上面是一个错误的演示。不要在未对整体布局进行调整的前提下,简单地将包含文本的容器进行简单的拉伸。

    Google 发布全新安卓平板,大屏设计趋势来了?

    容器需要借助缩放来适应不同的屏幕尺寸。容器之间会出现嵌套的情况。在上方的案例当中,1 为卡片容器,2为列表容器,在内容主体作为父容器的情况下,内部的子容器需要使用统一的左对齐、右对齐或者左右两边对齐,而侧边导航栏中的子容器则可能是固定位置。

    3、组件

    组件需要随着屏幕尺寸和方向的变化,在填充方式、大小、对齐等方式上进行适当的变化。

    Google 发布全新安卓平板,大屏设计趋势来了?

    左-折叠纵向视图;右-展开的横向视图

    在缩放组件和布局容器的时候,可以根据实际情况,来考虑它们在不同屏幕上的缩放变化。比如底部导航栏变为侧边导航,原本移动端设备上的卡片容器,在大屏幕上变得更趋近于方形,从而更好呈现图片内容等等,按钮内的图标和文本可以锚定居中,横向放大的时候,也可以维持在对的位置上。

    3.1、直接呈现

    最直接的方式,始终是按照一定的比例来将原本移动端 APP 上的控件进行缩放,以适配大屏幕来使用。不过还有更好的方式。

    3.2、组件交换

    在不同屏幕尺寸下,不同类型的组件,有着类似的功能。比如之前提到过的移动端 APP 底部的 Tab 导航控件和平板上的侧边栏组件,就是可供互换的功能类似组件。而这种策略,使得 APP 大屏化之后,控件的大范围替换成为可能。

    Google 发布全新安卓平板,大屏设计趋势来了?

    又比如,移动端的列表式表单可以和大屏幕上所用的弹出对话框进行互换。两者在功能上几乎完全一样,而且在不同屏幕尺寸之下,显得足够「本地化」。

    下面是一些常见的可互换的组件对比列表:

    Google 发布全新安卓平板,大屏设计趋势来了?

    3.3、响应模式

    除了上述的缩放和组件交换的方式,还可以使用重新定位组件位置、呈现隐藏组件的方式来实现 UI 的大屏化。

    Google 发布全新安卓平板,大屏设计趋势来了?

    在涉及到较大断点和大范围额外空间的时候,可以将原本隐藏的组件直接呈现在大屏幕上。比如在移动端上通常折叠起来的菜单,在大屏幕上直接以侧边栏的形式显示出来。

    Google 发布全新安卓平板,大屏设计趋势来了?

    而在移动端上原本简单纵向排列的组件或者容器,可以在大屏幕上重新排版布局,这样更加贴合大屏的使用场景。

    4、设备

    Google 发布全新安卓平板,大屏设计趋势来了?

    在大屏的 Android 设备上可能会涉及到触摸板、鼠标、外置键盘、触摸手势 等多种交互模式。

    不同的硬件接入 Android 平板所涉及的不同交互能够很大程度提升界面的可访问性。

    外部输入设备通常是鼠标、触控板和键盘三种,它们所涉及的主要交互要素如下:

    Google 发布全新安卓平板,大屏设计趋势来了?

    外部输入设备的常规交互,和交互之下的通常大家所预期的行为:

    Google 发布全新安卓平板,大屏设计趋势来了?

    下面针对这些常见的交互进行详细梳理。

    4.1、鼠标和光标的交互

    当鼠标或者触控板连接 Android 大屏设备的时候,光标都应该出现在屏幕上。

    Google 发布全新安卓平板,大屏设计趋势来了?

    在没有专门针对鼠标进行优化的 Android 设备上,鼠标单击理应和触摸点击的反馈相同。

    Google 发布全新安卓平板,大屏设计趋势来了?

    当触发鼠标和触控板的次级按键(右键)的时候,会触发上下文菜单,也就是常说的右键菜单。

    Google 发布全新安卓平板,大屏设计趋势来了?

    当光标悬停在可交互的组件上的时候,这些组件应当呈现并告知用户它们是可交互的。

    Google 发布全新安卓平板,大屏设计趋势来了?

    当光标悬停于链接和图片上的时候,光标变为手型,用来强调光标下控件的可点击属性。

    Google 发布全新安卓平板,大屏设计趋势来了?

    光标悬停于文本内容之上的时候,呈现出 I 型,强调文本内容可以选中。

    Google 发布全新安卓平板,大屏设计趋势来了?

    用 I 型光标来强调选中文本的边界。

    Google 发布全新安卓平板,大屏设计趋势来了?

    当光标在不可被选中的文本上时,不应该显示为 I 型,以上为错误演示。

    Google 发布全新安卓平板,大屏设计趋势来了?

    在使用鼠标、触控板、触控笔选中文本之后,使用单一颜色突出被选中的文本,并且不要在选中区域周围显示触摸交互的控件。

    Google 发布全新安卓平板,大屏设计趋势来了?

    如果用户直接用手触摸选中文本,则需要显示触摸控件,即使 Android 设备连接了外部设备,也需要显示。

    Google 发布全新安卓平板,大屏设计趋势来了?

    在选中文本上点击右键菜单,能够呼出上下文菜单,即使是在带触摸屏的设备上,也需要如此。

    4.2、鼠标滚轮和触控板手势

    鼠标滚轮、触控板手势让大屏交互有更多可能性。

    Google 发布全新安卓平板,大屏设计趋势来了?

    当光标位于列表上时,滚轮和触控板两指滑动手势支持上下垂直滚动,注意,只有光标所在的那个列表。

    Google 发布全新安卓平板,大屏设计趋势来了?

    在触摸屏上,向上滑动,页面向下滚动。

    Google 发布全新安卓平板,大屏设计趋势来了?

    使用鼠标时候,可以通过点击拖动来选择文本和图像。

    Google 发布全新安卓平板,大屏设计趋势来了?

    使用鼠标的用户,可以通过鼠标滚动来让横向滚动的组件移动。同理,使用触控板的用户,应该可以通过双指横向滑动来滚动横向滚动的组件。

    4.3、键盘交互

    即使 Android 平板连接外置键盘的时候,设备的虚拟键盘都应该是可以被调用的。

    Google 发布全新安卓平板,大屏设计趋势来了?

    连接外置键盘之后,虚拟键盘会自动隐藏到一角。

    Google 发布全新安卓平板,大屏设计趋势来了?

    移除外置键盘之后,虚拟键盘会自动呼出。

    Google 发布全新安卓平板,大屏设计趋势来了?

    用户可以通过物理键盘的回车键(Enter),来发送信息,确认操作。

    Google 发布全新安卓平板,大屏设计趋势来了?

    用户可以通过空格(Space)来暂停和播放多媒体内容。

    写在最后

    Pixel Tablet 的出现更像是新的转折点,Android 大屏 UI 设计的需求在接下来会随着市场变化越来越多,大家又有新的事儿干了。

    另外,关于折叠屏设计的规范,可以参考龙爪槐的守望者所翻译的下面的几篇:

    Material Design 折叠屏设计指南(1):概述

    折叠屏使用柔性屏幕可以折叠或展开,根据你的需要无缝扩展可用的屏幕空间。

    阅读文章 >

    如何设计折叠屏?来看这份设计指南!

    最近做了HUAWEI Mate Xs手机折叠屏的相关设计,借此机会「趁热打铁」分享一手界面操作体验、适配技巧分享给大家,希望对各位设计师同学有所帮助和参考。

    阅读文章 >

    Material Design 折叠屏设计指南:完结篇

    本文为 Material Design 折叠屏设计指南中文版译文第三篇,超多干货建议收藏。

    阅读文章 >

    本篇来源:优设网

    原文地址:https://www.uisdc.com/android-pixel-tablet-design

    评论
    Artlist模板 广告