设计理论体系(手动偶尔更新中)DesignUEDdateJun 11, 2021slugDesign-theory-systemstatusPublishedtagsDesignUEDsummarytypePost《设计体系》《设计体系》C7210版全书译文.pdfGoogle《学习响应式设计》谷歌学习响应式设计W3C中文排版需求https://w3c.github.io/clreq/#/MD折叠屏设计指南(龙爪槐翻译)【译文】Material Design 折叠屏设计指南(1):概述本文译自 Material Design 3 官方折叠屏设计指南,全文分为:概述、组成结构、组件、多窗口变化、动效五个模块,本篇翻译概述。https://mp.weixin.qq.com/s/hGsEbAFYTrJCllYAVKbbvQ【译文】Material Design 折叠屏设计指南(2):布局本文译自 Material Design 3 官方折叠屏设计指南:https://m3.material.io/foundations/adaptive-design/foldables全文分为:概述、布局、组件、多窗口交互、动效五个模块,本篇翻译布局。 上篇概述译文点此查看 核心布局是一系列大屏幕布局,作为设计和实现的起点。在为大屏幕适配 App ...https://mp.weixin.qq.com/s/P9IwEE1JePBpyoxRwPu70A【译文】Material Design 折叠屏设计指南(3):组件本文译自 Material Design 3 官方折叠屏设计指南,全文分为:概述、布局、组件、多窗口交互、动效五个模块,本篇翻译组件。https://mp.weixin.qq.com/s/34QgdfuugqqlmJsxF3CX7Q【译文】Material Design 折叠屏设计指南(4):多窗口交互本文译自 Material Design 3 官方折叠屏设计指南:https://m3.material.io/foundations/adaptive-design/foldables全文分为:概述、布局、组件、多窗口交互、动效五个模块,本篇翻译多窗口交互。 第一篇概述译文点此查看 第二篇布局译文点此查看 第三篇组件译文点此查看 折叠屏提供更大的显示面积,经过优化,可以同时显示多个 App。这种额外的空间对于多任务处理或依赖信息比较或管理的工作流程特别有用。通过最大限度地减少用户在单个屏幕上的 App 之间的切换,使得生产力、授权和更无缝的用户流成为可能。 在 Android 12 中,用户可以在新的概览(overview)中创建和审视多个窗口。请点击以下链接了解更多关于 Android 12 "最近使用的应用屏幕"的内容。(https://developer.android.com/guide/components/activities/recents) 使用 Android 的拖和放框架,你可以让用户以图形化地拖放手势来移动数据。该手势可以在同一 App 中移动到一个视图到另一个视图,或者在启用多窗口模式在一个 App 和另一个 App 之间移动。 尽管该框架主要是为数据移动而设计,但你也可以将其用于其他 UI 操作,例如,你可以创建 App,当用户将一个颜色的图标拖到另一个图标上时,将两个颜色混合。 在可折叠设备上运行 App 时,App 可以从一个屏幕自动过渡到另一个屏幕。过渡后,App 应该在相同的状态和位置上继续运行,当前的任务无缝衔接。 创建、排列和调整窗口的方式对所有用户和任何屏幕尺寸来说都应该直截了当。 无缝窗口管理的模式包括: 运用 Material 动效指南中所描述的平滑过渡(smooth transitions) 确保用户可以轻松创建多个窗口,并根据需要在它们之间移动 确保心智模式(mental models)和交互模式的简单性,这样用户就不需要考虑哪种模式适合哪种任务。 在可折叠设备中,包括那些带物理、有缝铰链的设备,设计和实现窗口交互应该一致 Android 为用户提供了多种创建多窗口视图的模式。 在 Android 12 中,任务栏为钉住和建议的 App 提供了一个启动点,可以很轻松把 App 变成独立的窗口。要创建一个新窗口,用户需要从任务栏中选择并拖动 App,然后移动 App 图标来指示窗口应该显示的位置。 用户可以通过 App 上下文菜单的概览(overview)来创建多个窗口。 默认情况下,多窗口被创建为 50/50 并排分割窗口。多窗口是一种临时状态。当把手(handle)拖动到屏幕的边缘时,被缩小的窗口将关闭,退出多窗口视图。 窗口可以进一步调整为 1:3 或 2:3 的比例。这些比例提供了主窗口和副窗口相互转换,提供了更大的灵活性,并允许根据需要将重点放在其中一个 App 上。 屏幕把手可以被拖动和释放以创建所需的窗口比例。把手会自动调整到最近的捕捉点(Snap point)。 把手也可以用来关闭其中一个窗口,这将退出多窗口视图。 App 的大小可以填满三分之一的可用窗口空间。由于屏幕面积减少和对布局的挤压,确保 App 在这个狭窄的宽度上仍然可以提供可用的体验,避免在这个比例下进行复杂的操作。 在可折叠设备上的拖和放交互用于组织、编辑和一次为一个或多个元素应用操作,使普通用户目标更简单、更高效。可折叠设备为拖和放操作提供一个优势,因为额外的屏幕或表面区域可以简化操作,并为拖和放的项目提供即时反馈。 请记住,对于较大的屏幕,当拖动由触摸板或追踪速度较慢的鼠标控制时,可能很难将一个对象移动较大的距离,因为手指可能在拖动的对象到达目的地之前就移动到了触摸板的边缘。 尽管该框架主要是为数据移动而设计,但你也可以将其用于其他 UI 操作,例如,你可以创建 App,当用户将一个颜色的图标拖到另一个图标上时,将两个颜色混合。 投放的粗细程度通常应该随着完成一个动作对交互的预期依赖而提高。对于触摸交互,避免将拖动的项目放在可能被手指或手遮挡的地方。 可拖动项目的目标可以是粗略的,也可以是精细的,这取决于 App ...https://mp.weixin.qq.com/s/pEYAaMcTk69k1PJT2HLicw【译文】Material Design 折叠屏设计指南(5):动效本文译自 Material Design 3 官方折叠屏设计指南,全文分为:概述、布局、组件、多窗口交互、动效五个模块,本篇翻译最后一篇动效。https://mp.weixin.qq.com/s/nJHUO-yzQeWjeJytBgWPbA原版Material DesignBuild beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.https://m3.material.io/foundations/adaptive-design/overview 设计师口袋心理学53张设计师口袋心理学v1.3 20210602.pdf来源:微信公众号:龙爪槐守望者小红书团队制作的 52 个设计原则52 Design Principles52 设计原则https://rpdc.xiaohongshu.com/52-design-principles决胜B端决胜B端.pdf俞军产品方法论俞军产品方法论.pdf