文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

Material Design —悬浮响应式按钮（Buttons: Floating Action Button）

避免对次要和消极的操作使用浮动操作按钮，包括以下内容： ·存档或清空 ·不明确的行为 ·警告或错误 ·有限制的任务，如剪切文本 ·应该在工具栏中的控件，如音量控制或更改字体颜色 浮动操作按钮不包含应用栏...这可以防止： ·悬浮响应式按钮在不在屏幕时显示功能 ·悬浮响应式按钮与内容海拔相同的感觉 ---- 变换 变换 浮动操作按钮是app中主要用例的特别示例。...滚动就消失的工具栏适用于： ·最开始进入时需要完整工具栏的屏幕 ·长列表顶部或底部需要完整工具栏的屏 当用户通过滚动表示他们有兴趣查看主要内容时，节省了屏幕空间。...如果您有两个选项 ，即您的浮动操作按钮只显示另一个选项，则选最重要的动作作为悬浮响应式按钮。 如果你有超过六个，用户可能难以触摸到最远的选择。 为用户提供最好，最明显，最少的选择，来减少决策疲劳。...如果app的特点是添加文件类型，浮动操作按钮可以在第一次触摸后转换为相关操作。 但是，如果显示的操作与按钮无关，请将操作放入溢出菜单。 ? 悬浮响应式按钮可以包含联系人列表。

7.9K90

Material Design —Snackbars &Toasts

Snackbars & Toasts Snackbars是通过屏幕底部的消息对操作进行的简短反馈。 Snackbar包含与所执行的操作直接相关的单行文本。 它们可能包含操作文本，但不包含icon。...它们也显示在屏幕的底部，但不能从屏幕中滑走。 用法 一次只能显示一个snackbar。 每个snackbar可能包含一个单独的操作，但不会是“关闭”或“取消”。...行为 Snackbars激活后从屏幕的底部向上滑出。 ---- 用法 一次只能在屏幕上显示一个Snackbar。 位置 Snackbars出现在屏幕上的大多数元素的上方，与浮动操作按钮的高程相同。...最多0-1个操作，不包含取消按钮 如果存在行为，则遵守Dialog的空间和可视性规则。 对于两个或更多操作，使用Dialog，即使其中一个操作是取消。...不要挡住浮动操作按钮（Floating Action Button） 纵向移动浮动动作按钮以适应Snackbar的高度。 ? 连续Snackbars 一个时间只有一个Snackbar能展示。

1.5K60
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Material Design — 按钮（ Buttons）

    Button 按钮能传达用户触摸它们时发生的操作。 Buttons被按时被触发墨水扩散效果。 他们可能会显示文字，图像或两者都有。 平面按钮和浮动按钮是最常用的类型。...其他按钮类型包括： ·底部固定按钮（Persistent footer buttons）是可用于屏幕底部或提示框的平面按钮。 ·下拉按钮（Dropdown buttons）显示多个选择。...功能：非常重要+无处不在=悬浮响应按钮（Floating action button） 海拔：选择浮动还是平面按钮，具体取决于它所在的容器以及屏幕上有多少z轴空间图层。 屏幕上不应有太多层。...---- 底部固定按钮（Persistent footer buttons） 如果app要求操作持续存在且随时可供用户使用，请考虑使用悬浮响应按钮（Floating action button）或底部固定按钮...请勿在固定按钮区域使用浮动按钮。 ? 添加分隔后，底部固定按钮可用于滚动的提示框。 ?

    6.1K160

    Flutter 全局控制底部导航栏和自定义导航栏的方法

    例如，在平板电脑或大屏幕设备上，使用自定义导航栏能够更好地利用屏幕空间，提供更丰富的导航和功能；而在手机端，底部导航栏可能更符合用户的使用习惯和操作方式。...底部导航栏： 底部导航栏通常位于屏幕底部，以图标和标签的形式展示应用的不同功能或页面。它的特点包括： 简洁直观：底部导航栏的设计简洁直观，用户可以通过点击不同的图标来快速切换页面，易于上手和操作。...丰富功能：自定义导航栏可以集成更丰富的功能和交互，如侧边栏、抽屉式导航、手势操作等，提供更多的导航和功能选择。...在 build 方法中，我们根据 _navigationType 的值选择显示不同类型的导航栏，并且在底部导航栏上添加了一个浮动动作按钮，点击按钮可以切换导航栏类型。...通过定义枚举类型、状态管理和条件判断，我们可以根据用户的选择显示不同类型的导航栏，并且提供一个浮动按钮来切换导航栏类型。

    6K10

    Flutte部件目录-Material Components 顶

    FloatingActionButton 浮动操作按钮是一个圆形图标按钮，它悬停在内容上以提升应用程序中的主要操作。...对话框，弹出框和面板 SimpleDialog 简单的对话框可以提供有关列表项的其他详细信息或操作。 例如，他们可以显示头像图标，以阐明潜台词或正交行为（如添加帐户）。 ?...AlertDialog 警报是需要确认的紧急中断，通知用户有关情况。 AlertDialog小部件实现了这个组件。 ? BottomSheet 底部工作表从屏幕底部向上滑动以显示更多内容。...SnackBar 带有可选操作的轻量级消息，简要显示在屏幕底部。 ? 信息显示 Image 一个显示图像的小部件。 ? Icon 材质设计图标。 ?...芯片代表小块中的复杂实体，如联系人。 ? Tooltip 工具提示提供的文本标签可帮助解释按钮或其他用户界面操作的功能。

    15.3K40

    【软件开发规范七】《Android UI设计规范》

    编辑 底部动作条是一个从屏幕底部边缘向上滑出的一个面板，使用这种方式向用户呈现一组功能。...浮动按钮(Raised button)， 常见的方形纸片按钮，点击后会产生墨水扩散效果。 扁平按钮(Flat button)， 点击后产生墨水扩散效果，和浮动按钮的区别是没有浮起的效果。 ​...编辑 悬浮响应按钮 ​编辑 浮动按钮 ​编辑 扁平按钮 ​编辑 最重要且随处用到的操作，建议使用悬浮按钮。信息较多时，选用凸起按钮可以有效突出重要操作，但注意纸片不要叠太多层。...编辑 菜单的当前选项，始终与当前选项水平对齐。 ​编辑 ​编辑 靠近屏幕边缘时，位置可适当错开。 ​编辑 菜单过长时，需要显示滚动条。 ​...除了输入，文本框可以进行其他任务操作，如文本选择（剪切，复制，粘贴）以及数据的自动查找功能。 ​

    9.6K20

    安卓 topic-菜单 Menu

    上下文菜单和上下文操作模式 上下文菜单是用户长按某一元素时出现的浮动菜单。 它提供的操作将影响所选内容或上下文框架。上下文操作模式在屏幕顶部栏显示影响所选内容的操作项目，并允许用户选择多项。...选项菜单中的项目在屏幕上的显示位置取决于您开发的应用所适用的 Android 版本： 如果您开发的应用适用于 Android 2.3.x（API 级别 10）或更低版本，则当用户按“菜单”按钮时，选项菜单的内容会出现在屏幕底部...用户可以使用应用栏右侧的操作溢出菜单图标（或者，通过按设备“菜单”按钮（如有））显示操作溢出菜单。...如果应用支持低于 3.0 版本的系统，则应在这些设备上回退到浮动上下文菜单。 浮动上下文菜单（左）和上下文操作栏（右）的屏幕截图。...用户通过选择项目启用此模式时，屏幕顶部将出现一个“上下文操作栏”，显示用户可对当前所选项执行的操作。

    4.7K20

    从零开始的Android：常见的UI设计模式

    此模式的关键特征是，列表/网格中的每个项目在被选中时都应执行显示更多详细信息的相同操作。...根据Android的材料设计指南，选项卡也可以存在于屏幕底部，如Google+应用程序所示。 导航抽屉 导航抽屉是一个视图，可以从应用程序的侧面滑出，以便向用户显示选项列表。...浮动动作按钮 浮动操作按钮模式使开发人员可以突出显示用户在应用程序的一部分中可以执行的单个操作。...此类操作的示例包括电子邮件客户端中的撰写浮动操作按钮，音乐应用程序中的播放/暂停按钮或管理事件或数据的应用程序中的添加按钮。...请勿将这种模式用于次要动作或任何具有破坏性的操作，因为浮动动作按钮旨在在使用时在屏幕上有很强的显示感。 3.

    4.8K20

    OnlyOffice 中“浮动工具栏”使用指南

    这种操作的代价是： 增加不必要的鼠标移动距离 频繁打断编辑时的流畅思路 二、浮动工具栏：让工具“随叫随到” 有没有更自然的方式？...服务器字体智能提示： 如果字体在服务器上已安装，但你的本地电脑未安装下拉框中该字体名称前会出现 圆中带感叹号 （）的标记 无需安装字体即可预览效果，避免因字体缺失导致的排版错乱或显示异常。...核心亮点：插件扩展能力 它的底部区域支持动态注入自定义插件： 可添加自定义按钮 可添加下拉菜单 这意味着：浮动工具栏不仅是格式工具，更是功能扩展的黄金入口。...六、结合本地 AI 插件的想象空间 浮动工具栏的扩展性，让它成为了 AI 能力的最佳载体 可集成的能力 翻译、润色、续写、扩写、缩写、总结…… 极简操作流 选中文本 工具栏弹出 AI 入口 点击功能...内容创作：文案优化、灵感续写 多语言与多字体协作：跨团队文档共享，字体缺失也能正常编辑 智能办公：对接本地 AI 助手，一键处理文字 九、写在最后 浮动工具栏的价值，不在于屏幕上多了一个元素，而在于操作上少了一段路径

    24100

    终于等到你，新的虚拟键盘API 即将到来，快来先睹为快吧！

    这是一个具有以下内容的用户界面： Sticky header 固定头部 Sticky floating action button (FAB) 粘性浮动操作按钮 当用户将焦点放在输入框上时，虚拟键盘将会显示出来...VirtualKeyboard API 的使用案例 底部固定操作 在较小的视口上，您可能需要一个固定在界面底部的呼叫行动按钮或页脚。 考虑下面的图示，我们有一个固定在底部的CTA按钮。...屏幕中间有一个输入框。 当输入框处于活动状态时，结账按钮将位于虚拟键盘下方，因此被隐藏起来。 我们可以轻松地通过虚拟键盘API来解决这个问题。...你可能会对由于标题和固定底部的存在而导致的空间减少感到困惑。我们可以使用垂直媒体查询来在垂直空间足够的情况下显示标题。...env() 会回退到 0 ，总计将得出 var(--cta-height) 的值。 浮动操作按钮 在这个例子中，我们有一个浮动操作按钮，它位于页面的右下角。

    3.3K20

    【从零开始的Qt开发指南】（十四）Qt 窗口之“三剑客”：工具栏、状态栏、浮动窗口进阶实战指南

    状态栏：固定在窗口底部，最多一个实例，用于显示状态信息。 浮动窗口：围绕中央部件分布，支持多实例、可停靠、可浮动，常用于放置辅助功能模块。...二、工具栏（QToolBar）：快捷操作的 “加速器” 工具栏是应用程序中高频功能的快捷入口，通常以图标按钮的形式呈现，支持拖拽移动、浮动显示等特性。...三、状态栏（QStatusBar）：应用状态的 “显示器” 状态栏位于主窗口底部，是展示应用程序状态信息的专用区域。...） 4.4 浮动窗口与中央部件联动 浮动窗口的核心价值是辅助中央部件实现功能，通过信号槽机制可实现两者的联动（如选择浮动窗口中的文件，中央部件显示文件内容）。...状态栏：左侧显示核心状态信息，右侧显示辅助信息；进度条仅在耗时操作时显示，避免占用空间。 浮动窗口：按功能分组，同一类功能的面板可合并为标签页；提供显示 / 隐藏切换，满足不同用户的布局需求。

    1.3K21

    iOS 9人机界面指南(四)：UI元素（下）- 腾讯ISUX

    如果用户可以在你的应用程序打开超过20个视图，请考虑给视图一个不同的展示方式，以提供关于视图的详细信息，使其支持不连续的导航。 在打开视图的底部边缘和屏幕的底部边缘里垂直居中页面控件。...举个例子，你可以在文本框的左侧或者右侧加入自定义图形，或者加入系统按钮，如书签按钮等。一般来说，文本框的左侧用于表述文本框的含义，而右侧用于展示附加的功能，如书签。...提示 一般来说，当警告框出现的时候，按Home键将会从该app里切回主屏幕，此时Home键的效果类似于取消按钮——当用户回到app中的时候，警告框将消失，操作也不会被执行。...在操作列表的顶部使用文字颜色为红色的按钮，因为越靠近列表顶部的操作越容易引起用户注意。在iPhone里，潜在风险的操作离列表底部越远，用户在关注Home键的时候就越不容易误点它。 ?...关于这一点，你可以指定以下任意一种过渡动画： 垂直出现(Vertical).模态视图从底部边缘滑入屏幕，也同样从屏幕底部滑出（默认模式）。 弹出(Flip).当前视图从右往左水平滑动，露出模态视图。

    21.5K30

    《深度剖析：鸿蒙系统不同终端设备的UI自适应布局策略》

    如何在满足这些不同需求的同时，保持应用的一致性和连贯性，是鸿蒙UI自适应布局面临的核心挑战。...在小屏幕设备上，输入框和按钮可能会上下排列，以充分利用屏幕空间；而在大屏幕设备上，它们可以并排显示，使界面更加简洁高效。...适应不同交互方式 不同的终端设备具有不同的交互方式，如手机主要通过触摸操作，平板既支持触摸也支持键盘和鼠标操作，智能电视则通常使用遥控器操作。...当切换到平板上时，应用自动调整为双列布局，左侧展示歌曲列表，右侧显示歌曲详情和播放界面，充分利用了平板的大屏幕优势，提供了更加丰富的信息展示和操作空间。...在智能电视上，应用则采用全屏沉浸式布局，以高清大图和简洁的文字展示歌曲信息，播放控制按钮位于屏幕底部，方便用户使用遥控器操作。

    1K10

    《深度剖析：鸿蒙系统不同终端设备的UI自适应布局策略》

    如何在满足这些不同需求的同时，保持应用的一致性和连贯性，是鸿蒙UI自适应布局面临的核心挑战。...在小屏幕设备上，输入框和按钮可能会上下排列，以充分利用屏幕空间；而在大屏幕设备上，它们可以并排显示，使界面更加简洁高效。...适应不同交互方式不同的终端设备具有不同的交互方式，如手机主要通过触摸操作，平板既支持触摸也支持键盘和鼠标操作，智能电视则通常使用遥控器操作。...当切换到平板上时，应用自动调整为双列布局，左侧展示歌曲列表，右侧显示歌曲详情和播放界面，充分利用了平板的大屏幕优势，提供了更加丰富的信息展示和操作空间。...在智能电视上，应用则采用全屏沉浸式布局，以高清大图和简洁的文字展示歌曲信息，播放控制按钮位于屏幕底部，方便用户使用遥控器操作。

    1.1K00

    2018年最优秀的9个Android Material Design Apps!

    网站或手机端所展现的摄影是其中一个明确的焦点，为用户提供了许多可以选择的机会。另外，Android和iOS版本中都保留了底部导航栏的设计，使其在各个平台上保持一致和舒适。 2. Gmail ?...其中提到，为了与最近的网络改版相匹配，移动版Gmail将在收件箱视图中获得传统的桌面功能，如密度选项和快速附件。 3. ...Kitchen Stories擅长为各种屏幕和尺寸的食谱创建有效，易于扫描的布局。...作为材料设计的执行者之一，悬浮按钮的设计在这款应用程序中得到了很好的体现。通过点击品牌浮动操作按钮开始新项目，对话或任务，即可轻松创建新任务。...Fabulous通过插图，动画和俏皮的声音吸引用户，鲜艳的图像增加用户使用过程的愉悦度，促使他们完成离线任务形成习惯。彩色卡片显示用户的目标并显示目标完成的百分比。

    2.6K40

    【移动端网页布局】流式布局案例 ⑥ ( 多排按钮导航栏 | 设置浮动及宽度 | 设置图片样式 | 设置文本 )

    一、多排按钮导航栏样式及核心要点 1、实现效果 要实现下面的导航栏效果 ; 2、总体布局设计 该导航栏可使用 10 个 标签盒子 进行制作 ; 该导航栏的宽度自动充满整个屏幕 , 宽度为...100% , 高度也不需要设置 , 设置自适应即可 ; 具体控制每行显示多少个元素 , 需要进行精确的计算 , 每行有 5 个元素 , 每个元素占宽度的 20% , 这个计算必须精准到 1 像素 , 如果不精确..., 宁可少 1 像素 , 也不能多 1 像素 , 如果设置浮动后 , 宽度超过了布局宽度 , 则会自动换行 ; 3、设置浮动及宽度 该布局距离上面的布局有 5 像素的上外边距 ; 如果要令 10 个坐标...background-color: #F63515; } /* 下面是搜索栏样式 */ .search-wrap { /* 第二排搜索栏样式 */ /* 该样式在滑动时 , 始终在最上方显示...插入内容 */ /* 左侧按钮盒子中 插入 三 图片 */ content: ""; /* 显示模式设置为块级元素 */ display: block; /*

    7.4K40

    FAQ | 为大屏幕设备构建应用的常见问题解答

    在多任务处理方面，大屏幕提供给用户更多空间进行多项操作，如果用户在折叠设备上使用应用，开发者要考虑优化的是当用户展开设备时确保应用有良好的连续性、良好的界面显示效果和外观。...在导航优化方面，以往在对直板手机竖屏模式的部分导航组件进行优化时，导航组件几乎始终停靠在屏幕底部，在可折叠设备或更大的设备中情况就不同了，用户实际上大多数时间是用双手持握设备，这就意味着导航组件最好是放置在设备边缘和侧面...对于基于 View 的应用，您可以使用资源限定布局，通过底部导航——如底部应用栏 (App Bar) 或底部导航菜单 (Navigation Menu)——形成窄小的布局，也可以使用 Navigation...提及折叠形态，需要注意组件的过渡，将会在更大设备更大屏上使用各种组件，尤其是在桌面模式，需要特别注意界面，例如，在该模式下，关键操作或大多数操作是在底部屏幕完成的，而大多数内容组件实际上会放在另一个屏幕上...这些都是需要考虑的非常重要的事项，如何在不同折叠形态下操作起来符合人体工学设计。

    5.3K10

    处理视觉冲突 | 手势导航 (二)

    我们来看一个使用系统窗口区域的例子。我们有一个悬浮操作按钮 (FAB)，它位于屏幕右下角，距离屏幕边缘 16dp (这符合设计指南中的要求)。...Android 10 带来了新的手势导航模式，允许用户通过手势动作，而不是导航按钮来进行导航: 从屏幕左/右边缘向中间滑动，相当于后退按钮 (Back)。...从屏幕底部开始向上滑动，可以让用户切换最近使用的应用 (Recent)。 在系统手势区域中，系统手势操作优先于应用自己的手势操作。您可能已经注意到系统手势区域有两个获取方法。...在 Android 10 上，当前唯一的强制区域是屏幕底部的主屏手势区域，系统保留这个区域就可以让用户在任何时候都可以退出当前应用: △ 底部 60dp 即为强制系统手势边衬区 稳定显示边衬区 方法:...在有些显示模式下 (比如放松模式和沉浸模式)，系统 UI 可能会根据情况在可见与不可见之间切换 (如游戏、照片浏览、视频播放器等)。

    4.4K30

    【Flutter】Flutter 拍照示例 ( 浮动按钮及点击事件 | 底部显示按钮组件 | 手势检测器组件 | 拍照并获取当前拍摄照片 | 从相册中选择图片 )

    文章目录 一、浮动按钮及点击事件 二、底部显示按钮组件 三、手势检测器组件 四、image_picker 完整代码示例 一、浮动按钮及点击事件 ---- 一般使用 Scaffold 组件作为界面的根布局组件...字段 ; floatingActionButton: FloatingActionButton(), ) 浮动按钮点击事件 : 浮动按钮点击事件就是 FloatingActionButton 组件的...VoidCallback = void Function(); 二、底部显示按钮组件 ---- 调用 showModalBottomSheet 方法 , 即可弹出底部按钮组件 , 该组件由开发者定义..., 可以是任何组件 , 如 Column ; 这里在底部显示的是一个 Container 组件 , Container 组件内部包含了一个 Column 组件 ; /// 浮动按钮点击事件 /// 点击浮动按钮..., BuildContext context 是上下文对象 , WidgetBuilder builder 是显示的底部布局组件 ; Future<T?

    3.1K30

    iOS 9人机界面指南(四)：UI元素（上） - 腾讯ISUX

    在屏幕处于同一方向时，最好不要改变不同屏上导航栏的背景图片、颜色和透明度。 确保你自定义的返回按钮的外观与操作仍然像一个返回按钮。...工具栏： 是半透明的 在iPhone上，工具栏始终位于屏幕底部，而在iPad上则有可能出现在顶部 当键盘被唤起、用户使用了手势、或者当前视图变为竖屏的情况下，工具栏可以隐藏。...标签栏： 是半透明的 始终出现在屏幕的底部 一个标签栏一次最多可承载5个标签（多于5个标签的时候，可以展示前4个标签和一个“更多”，并将其他的标签以列表形式收纳到“更多”里面） 在横屏与竖屏情况下，高度均保持一致...当用户在视图中拖拽内容，内容随之滚动；当用户轻扫屏幕时，内容将快速滚动——直到用户再次触摸屏幕或内容已经到达底部时停止。...这样会让用户很难分清这两个窗格的从属关系。 一般来说，始终显示左侧主窗格中当前选中的项。尽管右侧窗格中的内容会变化，但它应当始终保持着与当前选中窗格的相关性。

    18.3K51
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券