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

Material Design — 按钮( Buttons)

他们可能会显示文字,图像或两者都有。 平面按钮和浮动按钮是最常用的类型。 其他按钮类型包括: ·底部固定按钮(Persistent footer buttons)是可用于屏幕底部或提示框的平面按钮。...·下拉按钮(Dropdown buttons)显示多个选择。 ·切换按钮(Toggle buttons)将选项汇聚在一起。 图标切换允许选择或取消选择单个选项。...该按钮显示当前状态和向下箭头。 例如,可用状态可以显示为文字,颜色或icon的列表。 当用户与按钮交互时,Menus会覆盖按钮并显示可能的状态。...按下某个状态会取消Menus并更新按钮以显示此新状态。 在下拉菜单中滚动的方式与Menus滚动的方式相同。 ? ? 一般的下拉按钮 溢出下拉菜单按钮 这种类型的下拉菜单默认显示箭头或者菜单按钮。...图标切换 图标适用于切换按钮,允许选择或取消选择单个选项,例如向项目添加或移除星标。 他们最好位于应用栏,工具栏,动作按钮或切换。 图标切换可能会在其触摸目标范围外显示有界或无界的墨水扩散反应波纹。

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

    UI界面中的用户头像,这么设计就对了!

    静电说:用户头像是UI界面中的重要一环。今天这篇来自Roman的文章非常精彩,她总结了在UI界面中的用户头像的几乎所有形式和设计技巧。非常值得一看!...一般的用户头像有几种形式,空白状态,姓名缩写,用户的照片或者图像。 002.颜色和尺寸 根据情况,您可以使用多种颜色和尺寸选项: 1. 为了更好的识别,背景颜色可以多样化; 2....显示用户是在线还是离线 2. 通过带有编号标签来告知用户有消息 3. 可以显示额外的图标供用户执行操作 004.用户状态 显示用户状态的最常见做法,是在用户头像的右下角放置一个彩色指示器。...b.进度展示 你可以使用弧形来表达用户完成的进度,同时将进度数据展示在头像最上方。 c.选择 对于选中状态,用户最认可的方式就是图标+描边。...c.悬停下拉 徽章悬停下拉菜单,最常见的模式之一,它可以扩展用户的附加信息。 d.悬停浮动显示状态 当存在一组堆叠的头像时,显示用户全面可以使用这种方式进行。

    2.4K10

    Flutter TolyUI 框架#06 | 下拉菜单设计

    如果将整个应用程序交互,看作一个由视觉元件参与运转的社会,每种视觉元件应具有其固有的职能,这就是视觉元件的语义。 本质上来说,导航就是浮层面板的添加和移除。...DropMenu 的交互语义 Popover 的职能是展示浮层面板,其功能比较宽泛,你可以在浮层面板中展示任何组件,所以其目的性比较弱。...组件/导航/rail_menu_tree: toly1994.com/ui/#/widget… 1....右侧案例通过点击事件展开下拉菜单,点击外部区域可关闭菜单。 通过 TolyDropMenu 组件,以 child 为目标展开下拉菜单,其中通过 hoverConfig 可以配置悬浮时打开菜单。...分割线与禁用 上图所示,MenuMeta 可以设置 icon 展示图标,通过 DividerMenu 展示菜单项中的分割线: 将 ActionMenu 中的 enable 设置为 false,可以禁用菜单项

    26900

    最新iOS设计规范五|3大界面要素:控件(Controls)

    UI Kit是一种定义通用界面元素的编程框架,这个框架不仅让APP在视觉外观上保持一致,同时也为个性化设计留有很大空间。...选项为中长列表时,可以考虑使用选择器。如果需要显示太短的选项列表,请考虑使用下拉菜单而不是选择器。尽管选择器使您可以轻松快速地滚动浏览许多项目,但它可能会给一小部分项目增加太多视觉效果。...九、下拉菜单(Pull-Down Menus) 在iOS 14及更高版本中(微信右上角的下拉菜单其实出现的更早),按钮可以显示一个下拉菜单,其中列出了人们可以选择的项目或动作。...分段控件中不要同时包含文本和图像。虽然段可以包含文本或图像,但将两者被混合在一个控件中可能会导致界面混乱让人难以理解。 若自定义分段控件,请保证内容协调。...使用图像和按钮在文本字段中提供清晰度和功能。可以在文本输入框的左侧或右侧显示自定义图标,也可以添加系统提供的按钮,例如“书签”按钮。 键盘 根据实际情况,显示适当的键盘类型。

    8.6K30

    FirstUI:Deepseek能帮我们做很多事情,而这款开源框架专为开发者设计的开源UI框架,让你的项目加速起飞

    项目简介FirstUI是一个轻量级的、响应式的前端UI框架,专为现代Web应用设计。它提供了一套完整的组件库,包括按钮、输入框、下拉菜单等,帮助开发者快速构建美观、功能丰富的用户界面。...下拉菜单(Dropdown)下拉菜单是选择操作的理想选择。FirstUI的下拉菜单组件支持多级菜单,可以轻松实现复杂的选择逻辑。4. 模态框(Modal)模态框用于在当前页面上显示额外的信息或表单。...的代码,然后 将 components/firstui/ 目录拷贝到自己的项目中。...Semantic UI:Semantic UI以其独特的语义化命名而闻名,提供了丰富的组件和强大的布局功能。但是,Semantic UI的学习曲线相对较陡峭。...结语FirstUI作为一个开源的UI框架,以其轻量级、响应式和易用性,为开发者提供了一个强大的工具。无论是构建企业网站、电子商务平台还是个人博客,FirstUI都能满足你的需求。

    6010

    怎样在 Unity 中创建 UI

    这个暂停菜单将显示一个内容为『Paused』的 text 组件和三个按钮组件:分别是复位按钮『Resume』,重新开始按钮『Restart』,退出按钮『Quit』,并且还是显示游戏从场景加载到现在的时间...UI-3 关于 Canvas 的渲染模式『render modes』更详细的介绍请看这里。在本文中,我们将仅仅使用『Screen Space – Camera』来做一些简单的事情。...菜单将会消失,游戏将恢复。这就意味着按钮的功能起作用了。...那么,让我们其他的按钮也变得起作用吧: 在层级视图中选中重试按钮并且找到『OnClick() 点击『+』图标,添加一个新的项 拖拽『_GM』对象到游戏物体区域 点击显示『No Function』的下拉菜单...选择 Manager > Restart() 最后,在层级视图中点击退出按钮也在检视视图中找到『OnClick()』 点击『+』图标,添加一个新的项 拖拽『_GM』对象到游戏物体区域 点击显示『No

    5.7K20

    BI使用参数

    还可以通过右键单击参数并选择 “转换为查询”将参数转换为查询来将参数转换为查询。使用“管理参数”窗口:从“开始”选项卡中“管理参数”下拉菜单中选择“新建参数”选项。...说明:显示参数信息时,将在参数名称旁边显示说明,帮助指定参数值的用户了解其用途及其语义。必需:该复选框指示后续用户是否可以指定是否必须提供参数的值。类型:指定参数的数据类型。...选择此选项后,将提供名为 “默认值 ”的新选项。 在此处,可以选择应为此参数的默认值,这是引用参数时向用户显示的默认值。 此值与 当前值不同,该值是存储在参数中的值,并且可以作为转换中的参数传递。...使用 值列表 提供一个下拉菜单,该下拉菜单显示在“ 默认值 ”和“ 当前值 ”字段中,可以从建议的值列表中选择其中一个值。 备注你仍然可以手动键入要传递给参数的任何值。 建议值列表仅用作简单建议。...在何处使用参数参数可以采用许多不同的方式使用,但在两种方案中更常用:步骤参数:可以使用参数作为从用户界面 (UI) 驱动的多个转换的参数。

    2.7K10

    实用的五大WordPress下拉菜单插件推荐

    实用的五大WordPress下拉菜单插件推荐 ---- 我们在使用WordPress建站的时候经常会在网站添加下拉菜单,因为添加下拉菜单具有改善网站导航、将重要内容放在首屏上、避免用户过度滚动和增强用户体验等等优势...然而WordPress网站添加下拉菜单会需要用到一些插件,本文为大家推荐实用的五大WordPress下拉菜单插件。 1....将小工具添加到菜单,导入或导出主题,添加搜索栏等。通过为用户提供使用此插件的搜索栏搜索内容的选项,使用户可以轻松浏览您的网站。...这个高级插件提供了大量的自定义选项,可以创建您想要展示的精美下拉菜单。使用行、列、图像、图标、地图、表单等创建下拉菜单。...通过合并图标、图像、文本、章节等来设计菜单项。 5.

    2.8K20

    如何设置Potplayer-x64

    消息——字体:微软雅黑、非粗体 界面——字体:微软雅黑 播放设置 播放——自动加载外部音频、记录视频播放位置、记录音频播放位置 时间跨度——取消“如存在关键帧数据则以关键帧为移动单位...勾选缩放窗口时保持宽高比 列表——字体:微软雅黑、勾选记忆播放列表的播放位置 声音设置 规格化/混响——取消播放时开启规格化 语言/同步/其他——流选择:按最佳音质 关联 全选、图标...:PotIconsNew.dll、取消显示播放列表菜单、取消显示播放菜单 ---- 提高设置 LAVFilters解码器设置 下载及安装 官网下载32位zip,解压到C:\Program...源滤镜/分离器——下拉菜单全选择*LAV Splitter Source 内置OpenCodec——全部设置为不使用 视频解码器——下拉菜单全选择*LAV Video Decoder 音频解码器...如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    2.1K10

    Edge2AI之使用 Cloudera Data Viz 创建仪表板

    Project Settings→Runtime/Engine,选择Legacy Engine 从下拉菜单中选择数据可视化图像。 单击保存引擎设置。...在 CDSW 页面上,单击CDSW Web UI链接。 登录到 CDSW。...将数据集命名为“Sensor Data” 将创建一个新数据集并在“数据集”选项卡下显示: 单击数据集将其打开并选择“Fields”选项卡。...由于该sensor_ts列是数字类型,而不是日期/时间,它由#字段名称旁边的图标指示,因此它被归类为Measures而不是Dimensions。您将在接下来的步骤中修复。...单击应用以保存更改 您会注意到类别 ( Dim)、数据类型(日历图标)和字段名称已更新。不过,该字段仍显示在“Measures”类别中。 这只是刷新问题。

    3.2K20

    60 个前端 Web 开发流行语你都知道哪些?

    20.Favicon(网站图标) “最喜欢的图标”(favorite icon)的缩写,它是出现在你网站的浏览器选项卡中的图标。...52.Sitemap 网站地图是网站上所有页面的大纲,按分层顺序组织 53.Slider(滑块) 滑块是一个轮播,通常由旋转的图像或卡片组成,突出显示不同的照片、链接和内容。...54.SVG 将数字图像表示为矩形、线条和其他几何实体,从而使图像可以缩放到任何大小。 55.TypeScript JavaScript 的严格语法超集,并为该语言添加了可选的静态类型。...56.UI(用户界面) UI 是访问者和计算机之间交互的界面。 57.UX(用户体验) 用户与 UI 的交互,重点是体验的满意度和成功程度。...58.Widgets(小部件) 为一个或多个不同的软件平台制作的相对简单且易于使用的软件应用程序或组件。 59.Wireframe(线框) 无需任何设计元素即可显示网页结构和内容的视觉指南。

    1.1K21

    Windows Terminal完整指南

    将 initialColumns 和 initialRows 设置为水平和垂直尺寸的字符数。...可以将 tabWidthMode 设置为: equal:每个选项卡的宽度相同(默认值) titleLength:每个标签都设置为其标题的宽度,或者 compact:非活动选项卡会缩小到其图标的宽度。...对于 WSL 发行版,最好将其设置为“ //wsl\$/Ubuntu/home/username/”,其中 username 是安装期间创建的用户 name 下拉菜单中显示的个人资料名称 tabTitle...标签标题中显示的名称 suppressApplicationTitle 设置为 true 以强制 bash 中的“ tabTitle”或“ name” icon 下拉菜单和标签中显示的图标的完整路径,...24 位 PNG 是最好的选择;不幸的是,不支持 SVG hidden 如果设置为 true,则配置文件不会显示在下拉菜单中 fontFace 使用特定的字体 fontSize 使用特定的字体磅值整数

    8.9K50

    Kafka运维篇之使用SMM监控Kafka端到端延迟

    产生和消耗的消息计数中的任何差异都以红色突出显示。 ? 在前面的图像中,线性形式表示最近一小时产生的消息数,填充区域表示最近一小时消耗的消息数(粒度为30秒)。蓝色区域表示已消耗所有产生的消息。...在该图像中,选择了group10消费者组。该 Latency选项卡显示group10消费组中有3个客户端,并且该Topic中有10个分区。...• 要清除消费者组,客户端或分区的选择,请单击每个下拉菜单上的删除图标。 • 要选择其他时间范围,请使用页面右上角的“ 时间范围”和“ 快速范围”选项,如下图所示: ?...1) 转到SMM UI中的Topic。 2) 选择要验证其详细信息的Topic。 3) 单击所选Topic旁边的配置文件图标。 4) 转到“ 延迟”选项卡。...1) 转到SMM UI中的Topic。 2) 选择要验证其详细信息的Topic。 3) 单击所选Topic旁边的配置文件图标。 4) 转到“ 延迟”选项卡。

    2K10

    DarkMode(1):产品应用深色模式分析

    通过引入语义色彩,设计师可以自上而下地进行框架性设计,首先定义好界面中一共存在哪些元素,然后,为这些元素规划好相应的配色方案,以确保在深浅外观中都获得最佳显示效果。...在我们常见的说法中,就是自 iOS 7    中引入的毛玻璃效果,常用于系统的文件夹、下拉菜单、通知、Dock 栏等处。苹果为这些材质设计了深浅两套配色方案,并提供了从厚到薄的四种感观效果。...前面我们已经看到了,苹果通过语义色彩解决了界面与内容的色彩管理,同时通过更新一系列的系统级控件确保适应两种不同的配色方案。然而,界面中还存在着一个重要元素,就是图标。...简而言之,你可以对文字进行的处理,也可以针对图标做到。所以,字体化图标可以像文字一样修改颜色、粗细、大小、对齐。前面提到的语义色彩、鲜活化处理等技术,也一样可以运用在图标上。...例如,iOS 的 Dark Mode 针对图像不会进行特别的处理,如果你的备忘录中有一张白色的照片,就会变得十分刺眼。

    1.8K20
    领券