MaterialDesign折叠屏设计指南：完结篇

新知榜官方账号

2023-07-04 20:28:59

MaterialDesign折叠屏设计指南：完结篇

提升个人职业竞争力需要有意识地在工作中培养自己成为复合型人才，即拥有多项深度技能，并且能够跨界协作和创新。

MaterialDesign是移动端开发主流中除iOS外的第二套设计规范，这套优秀的设计语言虽然是应用在Android上，但其要义被许多设计师借鉴，并用在自己的设计中。本篇文章围绕MaterialDesign折叠屏设计提供标准指南，干货满满，一起来看看吧！

一、导航组件

在可折叠设备上，将导航组件放在靠近屏幕边缘的地方，因为这样更容易触及。使用导航栏组件作为主导航。使用底部导航栏作为主要导航，会使用户很难触及屏幕中间的位置。当心！底部导航栏最好用于移动设备，而侧边导航栏（Navigationrail）则更适用于可折叠和屏幕较大的设备。App可以在到达次级页面后隐藏侧边导航栏，只要你能显示返回到主页面的按钮。次级页面在打开时可能会隐藏导航栏，所以显示返回按钮有助于返回主页面。

二、次级导航

1.顶部应用栏（Topappbars）应用栏容器用于显示和对组件分组，帮助用户执行主要操作，或对主体容器中的元素执行操作。应用栏容器可以与导航容器组合使用。当心！使用顶部应用栏会在屏幕上产生带状效果。

三、临时组件

1.对话框将对话框放在屏幕两侧，避免将关键交互放在中间。可以这样！将对话框放在屏幕两侧。

四、多窗口交互

折叠屏提供更大的显示面积，经过优化，可以同时显示多个App。这种额外的空间对于多任务处理或依赖信息比较或管理的工作流程特别有用。通过最大限度地减少用户在单个屏幕上的App之间的切换，使得生产力、授权和更无缝的用户流成为可能。在Android12中，用户可以在新的概览（overview）中创建和审视多个窗口。

五、拖或放（Drag&Drop）

使用Android的拖和放框架，你可以让用户以图形化地拖放手势来移动数据。该手势可以在同一App中移动到一个视图到另一个视图，或者在启用多窗口模式在一个App和另一个App之间移动。尽管该框架主要是为数据移动而设计，但你也可以将其用于其他UI操作，例如，你可以创建App，当用户将一个颜色的图标拖到另一个图标上时，将两个颜色混合。

六、窗口创建和行为

Android为用户提供了多种创建多窗口视图的模式。在可折叠设备中，包括那些带物理、有缝铰链的设备，设计和实现窗口交互应该一致用户通常使用多个窗口来并排显示和使用App。例如，收件箱和照片App并排。

七、拖和放（Draganddrop）

在可折叠设备上的拖和放交互用于组织、编辑和一次为一个或多个元素应用操作，使普通用户目标更简单、更高效。

八、视觉指示器

显示可拖动个元素的视觉指示器可以非常突出，也可以大部分时候隐藏，这取决于优先级。指示器模式从最明显到最不明显排列如下：

对象上可见的持久可供性（affordance，译者备注：人对事物功能的理解），如表示视觉抓握的把手
上下文中的明确的提示（call-out），比如标签文案（labels）
在被动交互（如悬停）或通过上下文暗示之前，线索在视觉上是隐藏的
完全隐藏直到拖动动作被启动

九、放置区域（Dropzones）

放置区域是一致的视觉模式，它阐明了预期和交互类型。放置区域模式的例子包括：持续性区域、热点（Hotspots）、预定义区域、窗口。

十、打开、关闭和旋转设备

折叠状态到横屏展开动效被用来突出由更大的展开的画布所显示的新内容。导航栏和详情页的动画用来引起人们的注意。避免在折叠或展开后停留在之前姿态的布局上。相反，随着设备的折叠和展开，进行不同姿态的无缝过渡。

以上就是MaterialDesign折叠屏设计指南的全部内容，希望对你有所帮助！

本文由@龙爪槐守望者原创发布于人人都是产品经理。未经许可，禁止转载。

本页网址：https://www.xinzhibang.net/article_detail-5485.html

寻求报道，请

关键词

MaterialDesign 折叠屏设计指南

分享至微信：

相关工具

AI插画生成，low poly、3D、矢量、logo、像素风、皮克斯等风格

Magician

Figma插件，AI生成图标、图片和UX文案

Color Wheel

AI灰度logo或插画上色工具

Dora AI

AI在线生成精美3D动画的网站

Poly

AI生成3D材质

Magic Design

在线设计工具Canva推出的AI设计工具

AI软件介绍及教程领取方式

AI软件介绍及教程领取方式AI软件的全称叫"AdobeIllustrator"，与Photoshop、CorelDRAW并称平面设计领域三剑客！illustrator以其强大的功能和体贴用户的界面，已经占据了全球矢量编辑软件中的大部分份额。平面设计、AI、Illustrator、AI安装包、AI素材

分类标签 AI软件Illustrator平面设计

12-03 08:49

Illustrator使用指南

Illustrator使用指南Illustrator是一款矢量图绘制软件，主要用于图形的制作，如印刷品的输出（书籍、包装、彩页等）、企业VI手册设计（企业形象识别系统）、企业LOGO设计、矢量插画等。初始化设置1. 工作区布局Illustrator工具的工作布局主要分为“基本功能”、“排版版面”、“

分类标签 Illustrator矢量图设计

12-03 08:48

中国Z世代数据报告设计风格分析

中国Z世代数据报告设计风格分析最近看到一份很有趣的数据报告，内容有意思，设计更有意思！这就是麦肯中国官方发布的一份，关于中国Z世代的数据报告！整份数据报告PPT的风格十分突出，封面以不规则的几何图形为背景和修饰元素，颜色上也是多色渐变为主，背景以蓝色为底，整体十分看起来是很的鲜活和年轻化！目录页目录

分类标签中国Z世代数据报告设计思路

12-02 02:29

视频翻译工具MyHeyGen教程

视频翻译工具MyHeyGen教程近期，一款名为“视频翻译”的工具引起了广泛关注。这不是一个简单的网页应用，而是一个可以免费部署在个人电脑或服务器上的实用程序。它的强大之处在于能够翻译任意时长的视频内容。所谓的视频翻译，实际上是指同声传译。虽然这类工具并非近期才问世，市场上已有多款成熟产品，例如我之前

分类标签视频翻译MyHeyGen教程

11-28 08:55

AR/VR周报：鸿海科技计划收购佐臻，Meta宣布Quest商店营收超15亿美元等

AR/VR周报：鸿海科技计划收购佐臻，Meta宣布Quest商店营收超15亿美元等本周AR/VR行业有多项新闻，包括鸿海科技计划收购佐臻、Meta宣布Quest商店游戏和应用总流水超15亿美元等。以下是本周AR/VR行业的一些重要新闻：鸿海科技计划收购AR眼镜ODM厂商佐臻。RokidMax正式发布

分类标签 ARVR鸿海科技佐臻MetaQuest商店

10-17 02:22

如何使用Illustrator制作立体字效果

如何使用Illustrator制作立体字效果在设计中，立体字效果是常用的技巧之一。本文将介绍如何使用Illustrator制作立体字效果。步骤一：绘制图形首先，在Illustrator中使用椭圆工具绘制一个正圆，并用刻刀工具分成三段。然后，右键排列置于顶层，分别拖入文字。选择第一个线框和文字，建立封

分类标签 Illustrator立体字设计

10-14 16:32

2021年UI设计最新趋势

2021年UI设计最新趋势本文介绍了2021年UI设计的最新趋势。1、3D图像3D图像将继续流行，尤其是当普通UI设计师真正用3D创建一些东西变得越来越容易的时候！试试名为Spline的3D工具–目前还在测试阶段，但如此惊人且易于使用！网址：spline.design3D也被广泛用于全屏动画，作为主

分类标签 UI设计趋势玻璃拟态

10-14 16:30

AI在3D建模中的无限可能

AI的崭新作用AI在3D建模中扮演了多重角色。首先，它可以自动化识别和处理大量的数据，这对于复杂建筑项目和数字孪生技术至关重要。AI算法能够分析大量的地理数据、传感器信息和图像，帮助建筑师和工程师更好地了解项目背后的潜力和挑战。这种数据驱动的方法不仅提高了建模的准确性，还减少了潜在的错误和人为干预。

分类标签 AI3D建模数字时代

10-14 16:28

B端图标设计实践指南

B端图标设计实践指南在B端产品中，图标是非常重要的一部分，它不仅能够提升产品的美感，还能够帮助用户更好地理解产品的功能和使用方法。因此，B端产品的图标设计需要严谨、高效、高质量。本文主要讲解B端图标设计的实践指南，包括图标的分类、设计规范、图标库的选择等方面，帮助B端设计师更好地进行图标设计。...

分类标签 B端图标设计系统图标库字体图标SVG

10-02 09:26

ngx-admin——基于Angular8+的可自定义管理仪表板模板

ngx-admin——基于Angular8+的可自定义管理仪表板模板ngx-admin是一个基于Angular8+的可自定义管理仪表板模板，最新版本V4.0.1，采用MIT协议发布。它是当前最受欢迎的管理仪表板之一，基于Angular8+，Bootstrap4+和Nebular，支持EvaDesig

分类标签 ngx-adminAngular8+可自定义管理仪表板模板开源

09-20 23:00

ChatGPT Midjourney 文心一言文心一格 bing新必应 Stable diffusion 稿定设计墨刀AI mastergo Adobe Firefly runway