首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Material Design —悬浮响应式按钮(Buttons: Floating Action Button)

点击时,它可能包含更多相关操作。 用法 每个屏幕只推荐一个悬浮响应式按钮来表示最常用操作。 行为 默认情况下,悬浮响应式按钮在屏幕上以动画形式展开。...利用其可见性为主要UI元素创建令人愉快变换。 常用变换包括触发,工具栏,Speed dial和变形。 这不是一个详尽清单。 悬浮响应式按钮设计灵活。...不要在浮动操作按钮操作中放置溢出菜单。 从最初屏幕应该最多只有两次点击就能到达预期目的地。 ? 将溢出操作置于工具栏中溢出菜单中,而不是悬浮响应式按钮中。 ?...变形动画应该是可逆并且可以将新材料片转换回浮动动作按钮。 ? 全屏 浮动动作按钮可以转换为跨越整个屏幕新材料。 这种戏剧性转变通常与创建新内容相关联。...因此,它往往不具有撤消转换或可逆动画方法。 ? ---- 大屏幕 大屏幕 悬浮响应式按钮可以附加到扩展应用程序栏。 ?

5.8K90

Xamarin 学习笔记 - Page(页面)

Xamarin.Forms基于Page页面的概念,我们可以使用XAML创建一个应用程序来设计我们页面以及后台C#代码。...让我们来理解与之相关一些概念。 PCL或者说可移植类库是一组类库,该类库以一组具有相同API平台为目标的类库。更多详细信息,请参见此链接。...这些视图是一组控件,在本示例中,我们用到是:一个Label标签,一个Entry(输入文本)以及一个Button按钮Xamarin.Forms提供了许多可用页面,以允许提出各种不同导航体验。...如果我们希望在一个按钮动作事件中跳转到另一个页面,我们使用以下代码: Navigation.PushAsync(new AboutPage()) 或者该方法异步版本: Navigation.PushModalAsync...主记录页面将包含菜单列表,详细信息页面将显示详细信息并将链接返回主记录页面,想法很简单,如果你有任何按钮或选项在菜单中显示它但你想在一开始隐藏它们,以保持良好UI体验。

4.6K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

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

    至少,该工具栏包含该部分或应用程序标题,但是工具栏设计模式还有助于将操作按钮直接放置在工具栏或溢出菜单中,以允许用户在应用程序该部分中执行任务。...浮动动作按钮 浮动操作按钮模式使开发人员可以突出显示用户在应用程序一部分中可以执行单个操作。...此类操作示例包括电子邮件客户端中撰写浮动操作按钮,音乐应用程序中播放/暂停按钮或管理事件或数据应用程序中添加按钮。...请勿将这种模式用于次要动作或任何具有破坏性操作,因为浮动动作按钮旨在在使用时在屏幕上有很强显示感。 3....有关为Android Wear设计更多信息,请参见官方文档 。 电视 尽管Android Wear设备设计模式必须考虑较小屏幕尺寸,但针对Android TV设计却存在相反问题。

    2.7K20

    Material Design — 按钮( Buttons)

    卡片 按钮最好放在卡左侧以增加其可见度。 但是,由于卡片具有灵活布局,因此可以将按钮放置在适合内容和上下文位置,同时保持产品内一致性。...对于冗长或复杂表单,建议将按钮放在表单左侧,肯定性按钮位于否定性按钮左侧。 ---- 样式 版式设计 按钮文本应该用有大写语言大写。...背景比较嘈杂时候使用浮动按钮 浮动按钮就像一块放在另一张纸上材料 - 点击时浮起并填充颜色。 ? 按钮海拔 浮动按钮默认海拔为2dp。 在桌面上,浮动按钮可以在悬停时获得此海拔。 ?...在下拉菜单中滚动方式与Menus滚动方式相同。 ? ? 一般下拉按钮 溢出下拉菜单按钮 这种类型下拉菜单默认显示箭头或者菜单按钮。点击按钮后会弹出菜单。...点击菜单任意一个选项将会引导到对应设置页面。 分段式下拉菜单按钮 分段式下拉菜单按钮有两个区域: 当前状态和下拉箭头。点击当前状态会触发状态相应动作

    3.8K160

    Flutter容器类组件

    下面构造一个完整路由页面对其进行讲解: 导航栏 导航栏右侧分享按钮 抽屉菜单 底部导航栏 悬浮按钮 class HomePage extends StatefulWidget { const HomePage...bottomNavigationBar 底部导航栏 floatingActionButton 浮动按钮 5.2 AppBar AppBar是一个Material风格导航栏,通过它可以设置导航栏标题...下面我们看看AppBar定义: AppBar({ Key? key, this.leading, //导航栏最左侧Widget,常见为抽屉菜单按钮或返回按钮。...//其它属性见源码注释 }) 初始导航栏只有文字,如果给Scaffold添加了抽屉菜单,则会给Scaffold首页导航栏左侧增加菜单按钮,正如上面所示。...Button,通常悬浮在页面的某一个位置作为某种常用动作快捷入口,如首页示例中页面右下角"➕"号按钮

    3.9K40

    根据 OS 设计应用

    图 2.1 中可以看出, Android 上界面和 iOS 上几乎一样。同样导航,菜单,甚至图标。更有趣是,没有一个平台上开发是遵循平台设计准则。没有传统动作条。...这在页面转换之余给予了用户更明确体验。此外,菜单栏目在 Android 版本上由于更多留白和信息优先级要更易读一些。 ?...从图 2.6 中可以见到,在 Android 版本中添加按钮是一个在 Material Design 中传统浮动按钮,而在 iOS 版本中添加按钮则被设计在了动作条上作为一个按钮——这在 iOS 设计中十分常见...从优先级角度来看,这是很大差异。 ? 图表 2.8 Dropbox 浮动按钮(左 iOS vs 右 Android) Dropbox 设计师们也对各自平台使用了各自规范控制和体验交互元素。...从图 2.8 来看, Android 浮动动作条和 iOS 中选项按钮各自被应用在其中关键内容功能上。比如,上传文件,新建文件夹等等。

    1.3K110

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

    编辑 另外注意56dp这个数字,许多尺寸可变控件,比如对话框、菜单等,宽度都可以按56整数倍来设计。...浮动按钮(Raised button), 常见方形纸片按钮,点击后会产生墨水扩散效果。 扁平按钮(Flat button), 点击后产生墨水扩散效果,和浮动按钮区别是没有浮起效果。 ​...编辑 悬浮响应按钮 ​编辑 浮动按钮 ​编辑 扁平按钮 ​编辑 最重要且随处用到操作,建议使用悬浮按钮。信息较多时,选用凸起按钮可以有效突出重要操作,但注意纸片不要叠太多层。...辅助操作区至多包含两个操作项,更多操作需要使用下拉菜单。其余部分都是主操作区。 ​...通过按压动作可以触发悬浮卡片(或者是全屏视图)中 Chip 对应实体视图,或者是弹出与 Chip 实体相关操作菜单。 狭小空间内表现复杂信息一个组件,比如日期、联系人选择器。 ​

    5K20

    C++ Qt开发:ToolBar与MenuBar菜单组件

    工具按钮可以包含文本、图标,也可以与相应槽函数关联,实现用户点击按钮时触发相应操作。 分组和弹出菜单: 工具栏支持将工具按钮分组,使界面更加清晰。还可以为工具按钮添加弹出菜单,以提供额外选项。...分组和分割线: 菜单栏支持在菜单项之间添加分组和分割线,用于更好地区分不同功能模块。 动作关联: 菜单项通常与具体动作(QAction)关联,点击菜单项时触发相应动作。...addMenu(const QString &title) 添加一个具有给定标题菜单,并返回一个指向新菜单指针。 addMenu(QMenu *menu) 添加给定菜单。...addMenu(QMenu *menu) 添加给定菜单。 setActiveAction(QAction *action) 设置活动动作,该动作将在菜单栏上显示为活动状态。...addMenu(const QString &title) 添加一个具有给定标题菜单,并返回一个指向新菜单指针。

    68210

    C++ Qt开发:ToolBar与MenuBar菜单组件

    1.1.1 主要特点工具按钮: QToolBar 主要由工具按钮组成,每个工具按钮代表一个功能或操作。工具按钮可以包含文本、图标,也可以与相应槽函数关联,实现用户点击按钮时触发相应操作。...分组和弹出菜单: 工具栏支持将工具按钮分组,使界面更加清晰。还可以为工具按钮添加弹出菜单,以提供额外选项。可调整性: 用户可以在工具栏上自由拖动工具按钮,重新排列它们位置。...分组和分割线: 菜单栏支持在菜单项之间添加分组和分割线,用于更好地区分不同功能模块。动作关联: 菜单项通常与具体动作(QAction)关联,点击菜单项时触发相应动作。...addMenu(const QString &title) 添加一个具有给定标题菜单,并返回一个指向新菜单指针。...addMenu(const QString &title) 添加一个具有给定标题菜单,并返回一个指向新菜单指针。

    1.9K10

    终于全了!ABB机器人学习资料

    •手动存储由便携式计算机和 RobotStudio Online安装所有机器人说明文档。 在此情况下,服务器可视为由便携式计算机使用存储单元。 M、 RobotWare 许可密钥。...7、基本窗口 初始窗口、Jogging窗口、输入/输出(I/O窗口)、QuicksetMenu(快捷菜单)、特殊工作窗口 初始界面 A、 ABB菜单。B、 操作员窗口。C、 状态栏。D 、关闭按钮。...存储于某一任务任何程序将采用为该任务设置属性。 程序 每个程序通常都包含具有不同作用 RAPID 代码程序模块。所有程序必须定义可执行录入例行程序。...每个程序模块都包含特定作用数据和例行程序。 程序模块 将程序分为不同模块后,可改进程序外观,且使其便于处理。每个模块表示一种特定机器人动作或类似动作。...以后添加更多对象时,您同样需要定义相应坐标系。 12、建立程序(略)及指令 创建新程序: 1. 在 ABB 菜单中,点击程序编辑器。 2. 点击任务与程序。 3. 点击文件,然后再点击新程序。

    3.1K30

    iOS 与 Android APP 设计差异

    这些按钮分别用在不同场景下。在Android中,按钮文字一般都是全大写。在iOS原生应用按钮中有时也能找到大写文字,但更多情况是出现在标题上。...左边是标准Android按钮;右边是标准iOS按钮 还有一种非常有特点按钮类型——在Android上叫做浮动按钮,在iOS上叫做活动按钮浮动按钮用来展示应用主要操作。...例如,在邮件APP中写邮件,或者在社交APP中发状态都会用到这个浮动按钮。...而在iOS中与之类似的按钮则叫做活动按钮,通常会放在底部导航中间 左边是标准iOS活动按钮;右侧是标准Android浮动按钮 IOS与Android底部操作视图差异 在Android中有两种不同类型底部操作视图...模态视图又有两种不同类型:具有不同操作内容模态列表和用户点击“共享”图标后显示应用列表。在iOS上也能找到类似的组件,但是在设计风格和布局上差异比较大。

    3.4K10

    【QT】Qt 窗口 (QMainWindow)

    创建菜单项 在 Qt 中,并没有专⻔菜单项类,可以通过 QAction 类,抽象出公共动作。如在菜单中添加菜单项. QAction 可以给菜单栏使⽤, 也可以给⼯具栏使⽤....可以有多个,也可以没有,它并不是应⽤程序中必须存在组件。它是⼀个可移动组件,它元素可以是各种窗⼝组件,它元素通常以图标按钮⽅式存在。如下图为⼯具栏⽰意图: 1....设置浮动属性 ⼯具栏浮动属性可以通过 QToolBar 类 提供 setFloatable() 函数 来设置。...浮动窗⼝是通过 QDockWidget类 来实现浮动功能。浮动窗口⼀般是位于核心部件周围,可以有多个。 1....⾮模态对话框属性,对话框⽣成和销毁具有⾮模态对话框属性,功能上具有模态对话框属性。

    18510

    化繁为简,11个便携式电路开源分享

    3、(完整设计资料)便携式 PM2.5 检测仪设计(硬件+ 源代码+BOM+ 设计说明等) 便携式 PM2.5 检测仪概述: PM2.5 浓度值是我们当前比较关心一个话题。...5 、便携式测试工具- 示波器手表设计 功能概述: 从腕表到口袋大小设备,价格低廉便携式测试和测量工具已经开始被越来越多厂商关注。...有 8 个按钮用于测量操作,同时还具有 Micro USB 接口和 pad 数据接口。...8、(大赛作品)便携式肌电信号采集及人体动作识别 项目描述: 自行设计前端模拟电路采集人体手臂、腿上表面肌电信号,并进行一定信号滤波,包括低通、高通,放大后通过 KL25Z128VLK4 处理器...本机只设一位按键开关, 其实是单片机 AT89C4051 复位按钮。按复位按钮单片机自动进行测量显示, 在测量完毕后立即进入微功耗休眠状态, 按动按钮后单片机重新启动进入测量状态。

    1.2K40

    FL Studio21下载MacOS版简体中文支持苹果M1处理器

    浏览器 - 升级浏览器,具有标记、闪电般快速搜索和具有下载管理在线内容发现功能。Luxeverb(所有插件版)- 专为FL Studio制作最先进混响。...文件(菜单) - 有一个新更多”子菜单,最多显示 50 个最近项目。文件支持 - 苹果.m4a音频格式现在加载。节拍器 - 音频设置中预览和节拍器混音器轨道单独选项。...从模板新建 - 添加和删除模板时菜单更新。插件管理器 - 不再允许某些不兼容插件搜索路径。设置窗口 - 窗口已重新设计,允许可能需要更多空间多语言文本。...通道 - 当插件替换通道采样器时显示浮动提示。新插件和工具:LuxeVerb(所有插件版) - 先进算法混响,具有“豪华”和可塑性声音,能够模拟各种大小逼真和实验声学空间。...搜索字段中文件夹图标,用于将找到项目限制为仅当前文件夹。“键入以过滤”菜单选项,用于决定键入字母是过滤还是选择项目。在具有多列视图中搜索时选择第一个文件夹。搜索结果显示具有匹配名称文件夹。

    4K20

    Xamarin.Form 5.0: 新功能和控件以及调试改进

    根据开发人员社区反馈,现在可以 Xamarin.Forms 与UWP 应用一起使用热重载和热重启,并部分刷新修改后页面(这是 Visual Studio 调试设置中可配置选项)。 ?...通过GitHub项目页面上拉取请求和评论对社区做出大量贡献,即将发布 Xamarin.Forms 5.0 包含以下新功能和控件。...其中一些已经在去年预览: 画笔:使用纯色、线性渐变和径向渐变来着色应用程序 UI 颜色区域; 形状:绘制形状,如椭圆、线、面、折线和矩形; 路径:绘制自定义形状或设计。...例如,下图中单选按钮; 旋转木马视图:与可视化项目(如PeakAreaInsets 可视化状态管理)相关新改进,该更改预览上一项或下一项一部分,并建议用户滚动方向。...此外,引入EmptyView ,以显示绑定数据不可用时替代内容; 轻扫视图:在任何控件上添加上下文菜单按钮; 拖放手势:UI 项目可以拖放到屏幕任何区域。

    3.2K20

    SAO UI Plan -- SAO Utils Web 1.0

    点击查看更新记录 更新记录 2021-01-24:内测版v0.07 实现SAO风格右键菜单 添加了点击音效,默认使用本站同款,可以自定义配置 支持添加链接或者自定义脚本动作 添加Ctrl+右键转换原生菜单功能...child_list.action function 点击动作,详见本帖拓展内容,与link互斥,只能填写一个 自定义脚本拓展 点击查看脚本拓展内容 糖果屋出品右键菜单提供了自定义js配置,读者可以通过封装自己...更多内容可以自行探索。希望可以启发读者,在评论区留下更多有趣脚本。 使用方法:在上文menu_list或者child_list配置项action填写函数名即可正常调用。...打开Algolia搜索按钮 打开Tidio 跳转评论区 关闭当前窗口 功能:针对gitee镜像站和当前站点同篇文章跳转,记得更改链接。...二级菜单显隐逻辑适配 Ctrl+右键恢复原生菜单 适配pjax,站内跳转不打断全局音乐 补全左侧圆形列表;详见2.0 补全左侧角色属性栏样式;详见2.0 3D显示效果 添加浮动动态动画

    1.7K50

    【译】Visual Studio 2019 中 WPF & UWP XAML 开发工具新特性

    在预览时,此功能也仅适用于 WPF .NET Core 应用程序,不支持扩展性,也不具有完整功能。 ?...弹出 XAML 编辑器作为与设计器(v16.4)分开单独窗口: 现在,可以使用 XAML 选项卡旁边 Popup XAML 按钮轻松地将 XAML 设计器及其基础 XAML 编辑器拆分为单独窗口...您还可以使用 Windows 应用程序打包项目为具有 Islands .NET Core 3 生成 MSIX。要了解如何入门,请访问我们文档。...在上下文菜单中,选择“将资源字典合并到活动窗口中”选项,该选项将添加带有路径正确合并 XAML。 ?...总结 这些功能只是我们一直在努力一部分,还有许多仍在开发中,我们希望在准备就绪时与您分享更多信息。

    7.3K30
    领券