文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

怎么在没有专业UI的情况下设计出一个美观的工业组态界面?

一般来说，工控项目设计包含软件界面和硬件设备两个大方面。硬件支撑系统功能，软件展示项目功能，二者相互配合，缺一不可。...那么怎么在没有专业UI的情况下设计出一个美观的界面呢？ 下面分享一下我的设计思路，希望对大家有所帮助。在我看来，组态界面的设计包含：框架、颜色、页面、字体、图标、图形这几个部分。...03 功能切换区域，用不同的功能按钮来展示不同的功能，从而展示界面的逻辑和层次。 此外，部分的界面可能还包含了底部信息，用来添加公司的相关信息等（地址、网址、联系方式等）。...一般我做的话蓝色、绿色、灰色居多，此外也有紫色、金色、以及一些渐变色。分享几种我常用的配色方案： 页面 确定了框架和颜色之后，就可以开始进行下一步设计了。...建议字体如下： 字体大小维持在4px的整数倍较好，建议为16px或者20px 建议使用黑体或者微软雅黑等字体格式 文字与背景颜色对比度需要考虑到无障碍设计需求，确保文字清晰易读 慎用加粗、倾斜。

1K10

Framer 使用滚动变体创建动画

您可以使用“滚动变体”使导航栏在用户向下滚动页面时更改其外观，例如更改其背景颜色或调整元素的位置。或者在向下滚动页面时突出显示活动部分的侧边栏。...Demo1: 实现一个滚动到不同部分,修改导航栏的背景颜色的效果 创建导航栏组件 第一步就是创建一个导航栏组件 可以直接按下命令 K 并调出快捷菜单。..., 左右两边加入内边距padding 每一项的item 也是flex伸缩盒布局, 子项垂直水平居中 紧接着我们复制这个组件两份,分别修改背景颜色为黑色 和黄色 最终效果: 然后我们组件就完成了,...Demo2: 实现一个滚动到不同部分,更改左侧的icon图标 效果: 在上个效果的基础上,我添加了 渐变背景 填充了文本,并使用绝对定位固定到页面上. 给每个页面添加了 粘性布局, 达到视差的效果....第三步: 添加滚动变体效果,滚动到不同部分,选择不同的组件即可. 这里我就不把属性图进行贴出了, 和上面第一个创建方法一致. 大家可以自己试一下.

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

    ，掌握这9个鲜为人知的CSS属性

    ，从而创建出一个视觉上吸引人的布局。...通过向元素的背景添加模糊、颜色调整和其他滤镜效果，它为创建视觉吸引人的设计提供了新的可能性。...它提供了一种创建平滑且精确的滚动行为的方式，特别适用于需要滚动浏览一系列项目或部分的情况。 scroll-snap 属性有多个子属性，用于控制滚动行为的不同方面。...它允许你将样式、布局和绘制重新计算的范围限制在DOM的特定部分，提高性能并最小化不必要的渲染工作。 使用 contain ，我们可以指示一个元素及其内容尽可能独立于文档树的其他部分。...通过定义多个颜色停止点并指定不同的角度， conic-gradient 函数可以实现更复杂的渐变图案。尝试不同的角度和颜色组合可以产生令人惊叹的视觉效果。

    49330

    Flutter学习

    在线性布局中，有两个定义对齐方式的枚举类MainAxisAlignment和CrossAxisAlignment，分别代表主轴对齐和纵轴对齐。...背景图像 ShapeDecoration:实现四个边分别指定颜色和宽度、底部线、矩形边色、圆形边色、体育场（竖向椭圆）、 角形（八边角）边色 UnderlineTabindicator:下划线 EdgeInsets.only...this.bottomSheet, // 显示在底部的工具栏 this.backgroundColor,// 内容的背景颜色 this.resizeToAvoidBottomPadding =...true, // 控制界面内容 body 是否重新布局来避免底部被覆盖，比如当键盘显示的时候，重新布局避免被键盘盖住内容。...还有这么一种场景也可以使用SizeBox，就是可以代替padding和container，然后 用来设置两个控件之间的间距，比如在行或列中就可以设置两个控件之间的间距 主要是可以比使用一个padding

    2.6K20

    20 个改善网站设计的简单技巧

    经过多年的实践，由于你的眼睛会感觉到它好像是平衡的，这个是一种错觉。 03、设计背景 我之前介绍的示例以灰色背景显示，但你可以尝试其他操作。这有助于你的设计创建一些深度和上下文。...有许多不同的风格，但总的来说，我将其分为三个主要类别： 优雅的字体 现代字体 正文的字体 通常，前两个也是显示字体 ：其创建者希望你将它们用作标题。...白色与背景形成鲜明对比，并发挥了车身颜色的作用。 在红色色调口音引人关注设计的重要部分，如商品交易顾问，大字体文本等。...我想让用户的眼睛直接进入菜单，为此，我做了两件事： 有一个从左到右的假想箭头，箭头的形状和角度与图片和文字的角度相似。 突出菜单上的主要选项。 我可以假设用户的眼光是这样的： ?...20、将其设为3D 自从我与Blender和Maya一起玩了两年以来，这是我最喜欢的艺术技巧之一。 通过使用Blender，可以将有效的SVG导入，你可以通过几个步骤将2D设计转换为3D模型。

    91420

    【工具】977- 10个实现炫酷UI设计效果的CSS生成工具

    这些工具将有助于提升设计人员和前端开发人员的工作。 1、Neumorphism 地址：https://neumorphism.io/ 它创造了一种全新的UI风格。...没有比这更顺畅的交互和动画效果了。 我经常与开发人员合作，向他发送在此生成器中设置的交互。这将使你的数字产品保持美观和正常工作。...样式截图效果如下： 5、自定义形状分隔线 地址：https://www.shapedivider.app/ 划分布局和形状已经变得非常时尚。使用此工具，你可以创建可响应的波形和自定义形状分隔线。...通过不同地移动按钮元素而创建的视差效果，使动画具有很好的扭曲效果。...在创造页面上，你可以找到非常不同的码型生成器。但是，请记住，其中一些需要高级套餐。 10、SVG波浪 地址：https://svgwave.in/ 最后一个工具是波浪效果生成器。

    1.4K20

    HTML域名出售模板域名出售Domainxv2.0

    Domainx html 模板帮助您展示您的待售域名。 这将有助于轻松创建 24 种不同类型的模板，支持 RTL 以销售您未使用的或高级域名。 此外，您还可以自定义它以用于您认为合适的其他用途。...它使用最流行的最新响应式 Bootstrap5 框架构建。...基于 Bootstrap v5.0.2 独特的 24 种变体设计布局 9 种颜色版本 工作联系表（出价） Google reCaptcha v2 和 v3 可保护您的联系表免受垃圾邮件和滥用。...RTL 支持 完全响应式设计 包含 SCSS 文件 清理 HTML5 和 CSS3 代码 字体真棒 谷歌网络字体 清洁代码 易于定制 W3C HTML 有效代码 广泛的文档 域名销售 HTML 网站的...24 变体设计 图片背景 滑块背景 粒子 粒子雪 Youtube 视频背景 纯色光 纯色深色 原色纯色

    1.8K20

    【案例解析】Keep里有哪些值得UI设计师学习的亮点？

    更多案例解析请点击这里查看 在赏析前，我们需要形成一个思路，这个应用是给谁用的，他可以用这款应用完成怎么的任务和诉求。把握这两点，再去做设计。...而菜单布局上，采用底部一级菜单+上部二级菜单的方式进行。说起来有点怪，最近看到的几个应用，首页都开始不放轮播图了。个中原因大家请自行猜测。...“商城”页面 商城首页头部采用跨栏设计，底部背景是圆弧，再加上与背景色相似的轮播图底色，这样会更有设计感。而其它页面则很传统啦，商城详情页的设计大同小异，只不过底下的按钮很高很大。 007....“社区”页面 社区主页的布局是灰+白上下分栏，这个各位小伙伴也可以学习一下，通过不同的颜色背景来区分栏目，效果不错。...“我的”页面+“会员”页面 我的页面中需要关注的就是“Keep·会员”了，一般来说，这个区域都会采用更深的颜色凸显出来，引导用户购买会员。

    3.9K10

    前端必看的8个HTML+CSS技巧

    固定底部内容 这种是一个非常常见的布局方式，但是对于新手来说是比较常见的难题。 这种布局方式在后台管理系统中比较常见，当我们内容不足浏览器窗口高度时，底部内容需要固定在底部。...所以我们需要把头部和底部之间的内容标签元素设置为flex-grow: 1或者flex-grow: auto，这样内容部分就会自动填充满头部和底部之外的所有空间。...在我这个例子里面我做了两个任务列表，一个是待处理任务，一个是已完成任务，各自给了不一样的列表符号和颜色。...，已完成任务li.completed:before使用✔ 三、为了展示效果更加好看我分别给了li和li .completed两个不同的颜色 上代码看看是怎么实现的吧： HTML ...有一些例子我做的比较简单，但是其实是有无限的可能性。喜欢前端的童鞋们，让我们继续在前端领域中一起深挖，让我们的热爱无限的燃烧起来吧！ ---- 在最后我想给大家讲一下我对前端的热爱和态度。

    1.7K61

    CSS入门

    在大括号内部定义一个或多个形式为 属性(property):值(value); 的 声明(eclarations)。每个声明都指定了我们所选择元素的一个属性，之后跟一个我们想赋给这个属性的值。...不同的CSS 属性(properties) 对应不同的合法值。在这个例子中，我们指定了 color 属性，它可以接受许多 颜色值(lor values)。...CSS中的注释以/*和开头*/。在下面的代码块中，我已使用注释标记了不同的不同代码段的开始。...使用CSS常见属性 3.4 实现步骤 创建初始页面，拷贝图片素材。 编写css文件，引入css样式，实现整体布局。 header部分 实现顶部条。 实现导航条。...tr，td 设置背景，字体等css样式 4.4 实现步骤 设置背景 整体布局，上中底三部分 上部 logo设置 中部 表单表格布局 加入表头 加入输入框 加入按钮 底部 底部布局

    4K20

    android 设置标题栏背景颜色_状态栏菜单栏都在哪

    今天把自己这几天学到的关于沉浸式状态栏知识进行总结下。 问题 比如我想实现以下效果： 1. 同一个Activity需要动态变换标题栏和状态栏文字字体色值，该如何实现？ 2....一个Activity包含多个Fragment切换时，不同的Fragment的状态栏背景，状态栏文字颜色和图标要求不一样怎么实现？ 3....下面是同一个activity切换不同fragment时，状态栏文字颜色跟着变化的效果图： 下图是同一个Activity向上滚动时，标题栏和状态栏文字颜色根据变化的效果： 1....android:fitsSystemWindows=”true”属性就可以了，要不布局会跑到状态栏和导航栏下面，与导航栏和状态栏重叠，这当然不是我们希望的。...同一个Activity包含多个Fragment时，如何实现不同fragment的状态栏背景和文字颜色不一样 如下面的效果图： 就是设置了状态栏为暗色后，还得设置回来，这其实主要靠下面两个flag

    2.3K10

    【HarmonyOS应用开发——ArkTS语言】购物商城的实现【合集】

    Text 组件显示一个特定的图标（通过 \ue679 这个 Unicode 编码对应的图标，可能是自定义字体图标集中的一个），设置了各种样式，如背景颜色、使用注册的 myFont 字体、字体大小、颜色、...推荐标题 ListItem： 通过 Row 布局包含两个 Text 组件，分别显示 "推荐好物"（样式上做了字体大小、加粗、颜色等设置）和 "更多⇨"（相对小一点字体且同样设置了颜色），整体...然后又是一个 Text 组件，内部使用了 Span 来分别构建价格显示的两部分（货币符号和具体价格数值），货币符号部分设置了红色字体颜色、较小的字体大小，价格数值部分同样设置为红色字体颜色并且加粗字体，...对于标题文本对应的 Text 组件，同样根据索引是否相等来动态设置字体颜色，以实现选中和未选中状态下文字颜色的不同显示效果，整体通过这个函数构建出每个选项卡对应的底部导航栏子项的展示样式。...后续的几个 TabContent 结构类似，分别展示简单的文本内容（如 '分类内容'、'购物内容'、'我的内容' 等），同样通过调用 myBuilder 函数传入不同的参数来构建各自对应的底部导航栏子项样式

    14510

    【HarmonyOS应用开发——ArkTS语言】购物商城的实现【合集】

    Text 组件显示一个特定的图标（通过 \ue679 这个 Unicode 编码对应的图标，可能是自定义字体图标集中的一个），设置了各种样式，如背景颜色、使用注册的 myFont 字体、字体大小、颜色、...推荐标题 ListItem： 通过 Row 布局包含两个 Text 组件，分别显示 "推荐好物"（样式上做了字体大小、加粗、颜色等设置）和 "更多⇨"（相对小一点字体且同样设置了颜色），整体...然后又是一个 Text 组件，内部使用了 Span 来分别构建价格显示的两部分（货币符号和具体价格数值），货币符号部分设置了红色字体颜色、较小的字体大小，价格数值部分同样设置为红色字体颜色并且加粗字体，...对于标题文本对应的 Text 组件，同样根据索引是否相等来动态设置字体颜色，以实现选中和未选中状态下文字颜色的不同显示效果，整体通过这个函数构建出每个选项卡对应的底部导航栏子项的展示样式。...后续的几个 TabContent 结构类似，分别展示简单的文本内容（如 '分类内容'、'购物内容'、'我的内容' 等），同样通过调用 myBuilder 函数传入不同的参数来构建各自对应的底部导航栏子项样式

    10900

    四、博客详情页完成《iVX低代码仿CSDN个人博客制作》

    二、博客详情页标题及发布时间制作 首先咱们先制作博客详情页的标题和发布时间，此时先把顶部的头部栏复制过来，点击前台添加一个页面，命名为详情页： 接着复制整个首页中的主要内容行到详情页之中，因为大体布局一致...，在此我们只需要设置当前博文头部行的高度为包裹、背景色为透明即可： 由于头部标题本身上内边距是有一定距离的，在此设置这个行的上内边距以及距离顶部的一段距离，这样才可以使上部分像有一个隔断的颜色...此时页面效果如下： 如果想尾巴弄一个远程标记，只需要直接添加一个文本，设置小一点字号和背景颜色即可： 此时效果如下： 若想使当前原创标记有一点宽度，直接设置这个文本的内边距即可...： 那么显示如下效果： 接着这个标题行里新建一个行，命名为时间和点赞： 设置高度为包裹透明色背景后，在内部添加两个行，一个命名为左一个命名为右： 这两个行依旧要设置对应的高度包裹...，按钮文本为点赞，设置其宽度以及字号，再设置边框颜色、文字颜色以及背景色透明即可： 但此时再左边显示并不是我们想要的，我们想这个按钮在右侧显示，那么此时需要设置右这一行的水平方向对其为右即可：

    1.1K40

    探索 Flutter 中的 NavigationRail：使用详解

    作用和特点： 导航功能： NavigationRail 允许用户直观地导航应用程序的不同部分。通过点击导航栏中的选项，用户可以快速地切换到不同的页面或执行其他导航操作。...自定义外观： NavigationRail 允许开发人员根据应用程序的设计和品牌风格自定义导航栏的外观。您可以自定义背景颜色、选中项的颜色、图标和标签等。...基本用法 NavigationRail 是 Flutter 中用于创建垂直导航栏的组件，它提供了一种直观的方式来导航应用程序的不同部分。...总结 NavigationRail 是 Flutter 中用于创建垂直导航栏的组件，具有以下主要优势和用法： 直观的导航体验： NavigationRail 提供了直观的导航方式，让用户可以轻松地切换应用程序的不同部分或执行导航操作...灵活的自定义选项： NavigationRail 提供了丰富的自定义选项，包括背景色、选中项的颜色、标签类型等，使开发人员可以根据应用程序的设计和品牌风格定制导航栏的外观。

    66410

    超酷炫！5 款图像工具瞬间提高代码逼格！

    平时我们使用着漂亮的 IDE，编译器里的代码颜色丰富、支持高亮，但其实对外分享的时候，比如公众号、微博、Twitter 等社交平台，大部分都不支持代码排版，看代码简直让人头疼。 ?...所以今天我给大家推荐几个快速创建代码图像的工具，让你的代码分享逼格更高、排版更直观。 Marmoset 网站地址：http://t.cn/AiT9X7mV ?...，效果实时显示，窗口底部提供不同编译器主题、代码显示模式、透视代码效果等大量内置参数。...直接将你的代码复制粘贴到右侧内容窗口，左侧「Canvas」参数调整画布大小、窗口到画布的间距、画布背景颜色。 ?...将你的代码复制粘贴到 CodeZen，从 CodeZen 预设的语言、字体大小、窗口主题、背景颜色、窗口宽度等参数来调整代码图像效果，保存图像支持 JPG 和 PNG 格式。

    1.3K10

    探索 Android Design Support Library v28 新增内容

    在这篇文章中, 我想要看看以 Material 视图组件形式添加进入 Support Library 的新增部分....这个类从你可能已经使用的 AppCompatButton 类继承而来. 它们之间有什么不同呢? 这个按钮开箱即用, 它被设计成具有物质本质外观和质感, 而无需使用样式标志定义....Chip Chip 组件允许我们在布局中展示一个纸片组件. 其本质上一些文字被赋予一个圆形背景 -- 这样做的目的是向用户显示某种形式的文本集合, 可能被选择也可能不被选择....Bottom App Bar 底部应用栏是一个新的组件, 它允许我们在布局的底部显示一个类似工具栏的组件. 这使我们能够以比标准工具栏更容易交互的方式向用户显示组件. ?...我也很高兴能够找到一个可以使用底部应用栏的用例, 但我确信在 Support Library 版本稳定之前还有一段时间才能实现. 按照惯例, 我很乐意听到您对这些新组件的想法或评论!

    1.9K20

    从零开始写一个Hexo主题

    如图所示，一个hexo主题的目录主要包括以下五部分： languages：用于国际化的语言文件 layout：主题布局模板文件 scripts：hexo脚本插件目录，可以编写一些辅助函数脚本 source... layout/_partial/footer.ejs: 我是底部信息 我们在layout中创建layout.ejs，并引入head.ejs,header...编写导航栏和底部信息 前面，我们只是搭了个页面框架，接下来我们就将开始正式开始一步步的完善我们的主题，以下两个文档我们将频繁的使用，最好可以提前阅读一遍有个了解： Hexo | 变量 Hexo | 辅助函数...创建 _partial/header.styl 与 _partial/post.styl 存放页面导航以及文章的样式，并且在 style.styl 中 import 这两个文件。...比如，我们现在有这样一个简单的需求，我们想给首页文章列表中的文章块添加一个背景颜色，背景颜色我们可以在文章md文件中定义，如果未定义，则随机选用一种颜色。

    4.3K40

    最新iOS设计规范七｜10大视觉规范（Visual Design）

    确保背景延伸到显示器的边缘，并且垂直方向可以滚动的布局（如表和集合），一直延伸到底部。 避免在屏幕底部和角落放置交互式控件。...基于各种环境变量，动态系统的颜色可能会随着版本的不同而波动。与其尝试创建与系统颜色匹配的自定义颜色，不如使用动态系统颜色。 色彩管理 将颜色配置文件应用于图像。...设计一个与您的应用程序的第一个屏幕几乎相同的启动屏幕。如果您添加的元素在应用程序完成启动时看上去有所不同，则人们可能会在应用程序的启动屏幕和第一个屏幕之间体验到不愉快的闪烁。...除非徽标或徽标是应用程序第一个屏幕的固定部分，否则请勿包含徽标或其他徽标元素。如果您的游戏或其他沉浸式应用在过渡到第一个屏幕之前显示纯色，则可以创建仅显示该纯色的启动屏幕。...从iOS 14开始，系统以可变字体格式提供San Francisco和New York字体。这种格式将不同的字体样式组合到一个文件中，并支持在样式之间进行插值以创建中间的样式。

    8.1K30

    使用Python给图片添加水印

    让我们将两个图像文件加载到Python中。这是相同的图像，但格式不同，一个是PNG，另一个是JPG。让我们看看这两个图像文件之间的差异。 图1 对于计算机来说，图像文件基本上是一组数字。...将这两个图像文件加载到NumPy数组将有助于可视化这个概念。 示例PNG和JPG图像的大小均为1100 x 1100像素。然而，shape属性中的最后一个数字不同：JPG是3，而PNG是4。...图3 此时图片的像素数组值如下图4所示。 图4 这张图片还有一个问题——它的背景是白色的。通常，PNG文件的背景是“透明的”。...为了找到所有白色的像素，可以创建一个掩码，其中白色像素=True，否则为False。下面的代码检查图像的每个像素的所有R、G和B值是否等于255。...我们首先将水印图像的大小调整为基础图像的1/5，当然也可以使用另一种适合你需要的大小。 图6 然后，将创建一个与基础图像大小相同的空“画布”，并将此画布设置为处处透明。

    2.3K30
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券