查看我们的重新设计服务
箭头

在 Avalonia 上使用 XAML 实现完美的 Pixel-Perfect HMI。

将 Linux 嵌入式应用程序提升到一个新的水平。
获取源代码
箭头
用户界面和 HMI

在阿瓦洛尼亚设计人机界面

截至 2023 年第一季度,专注于精确创建复杂用户界面的.NET 开发人员对 Avalonia 的采用率显著增加。在 UXDivers,我们决定是时候玩得开心了,深入探讨了区分 UI(用户界面)设计与 HMI(人机界面)设计的细微差别。
虽然 UI 设计涵盖了软件应用程序中用户界面的美学和功能方面,但 HMI 设计将其扩展到包括人与机器之间的交互,尤其是在工业和嵌入式系统中。这种区别对于 UXDivers 至关重要,因为我们在人机界面设计中要在视觉吸引力和操作效率之间取得错综复杂的平衡。
了解更多
阿瓦隆尼亚环境天气
Avalonia 用户界面标志
“UXDivers是迄今为止我在.NET 开发生态系统中见过的最好的视觉设计师。他们的应用程序令人惊叹”
阿瓦洛尼亚,首席执行官
迈克·詹姆斯
阿瓦洛尼亚,首席执行官
之后的环境天气之前的环境天气
之前
之后
阿瓦隆尼亚用户界面

我们喜欢的 Avalonia

以下是这个神奇的框架为我们脱颖而出的原因:
跨平台的多功能性
Avalonia凭借其在Windows、macOS、Linux和各种移动平台上流畅运行的能力而大放异彩,确保我们的设计在不影响质量的情况下吸引广大受众。
造型灵活性
Avalonia提供的先进造型系统使我们能够根据客户的独特需求和偏好量身定制用户界面,确保每种设计都像其所代表的品牌一样独特。
使用 XAML 实现精度
在 Avalonia 中使用 XAML 使我们能够制作具有无与伦比的细节水平的像素完美人机界面 (HMI),从而使设计中的每个像素都很重要。
丰富的控制选项
借助 Avalonia,我们可以访问丰富的控件库,这使我们能够构建交互式和动态应用程序,吸引和使用户满意。
统一的用户体验
Avalonia 保证在所有设备上提供一致和无缝的用户体验,轻松弥合不同操作系统和屏幕尺寸之间的差距。
性能优化
即使我们在复杂的视觉层次结构中突破极限,Avalonia 也能应对挑战,保持高性能和响应能力,确保流畅的用户体验。
环境天气

环境天气应用程序的重新设计

大约 70% 的 UXDivers 设计工作都用于重新构想和振兴现有应用程序。虽然我们真的很欣赏Ambient Weather应用程序,但它为我们提供了一个激动人心的机会,让我们可以发挥创意,为它注入新的活力。为以人机界面 (HMI) 为重点、将传感器和硬件组件与低功耗设备集成在一起的应用程序开发逻辑是一项重大而有趣的挑战。
我们的服务
UXdivers,环境天气
Avalonia 的 HMI

Avalonia 嵌入式 HMI 的 10 个关键要点

1。开发工作流程
与Avalonia合作是一种乐趣,Visual Studio、VS Code和Jetbrains的Rider中的预览效果很好;而且编译速度使测试和调整过程异常流畅!更不用说在运行时按 F12 时可用的Avalonia DevTools了,你可以像使用网络浏览器开发工具面板一样检查应用程序的逻辑和视觉树。
2。风格选择器
这个 选拔人 就风格能力而言,Avalonia与其XAML平台的邻居区别开来。的确,你可以使用 ControlTemplates(就像 WPF 一样)自定义控件中的所有内容,但这远不止于此!它具有 CSS 灵活性,可以根据各种标准将样式应用于元素。
一个简单的例子(应用程序中有很多!)是我们根据伪类(暴风雨、晴天、大风等)为 AnimatedImage 定义了一组动画。
<styleSelector= “ctl|animatedImage: Sunny” >
<Style.Animations>。
<动画...
</Animation>
</Style.Animations>
</Style>
这样,无论控件可能应用了什么其他样式,我们都可以通过设置伪类来对图像进行动画处理。
3.选项卡控件
主仪表板导航使用 Avalonia 的 TabControl。在这里,我们必须强调模板提供的巨大样式灵活性,可以完全改变控件的外观,还要强调通过使用 DataTemplates 显示内容,它会自动变成延迟加载控件,这意味着在用户选择选项卡上的 UI 才会加载。所有这些都使用开箱即用的控件!
4。可重复使用的用户控件
创建 UserControls 就像在 WPF 中工作一样,它是构建可重用控件的一种简单而非常强大的方式。其中一个很好的例子是主仪表板中使用的控件,每个框都是带有加载数据的属性的自定义 UserControl。值得一提的一个具体例子是 RadiationIndicator,它具有以下属性:值、最小值、最大值和 pillColor;并且可以重复使用 3 次。
5。风格组织
应用程序范围的样式在 resources.axaml 文件中组织得很好,该文件包含调色板以及按钮和菜单等常规控件的样式。文本和特定控件的样式位于Styles.axaml中,它再次利用选择器的强大功能来制作一组灵活的视觉设置,可在任何地方使用。
6。MVVM 社区工具包
这个 MVVM 工具包 提供了遵循模型-视图-视图模型模式所需的所有工具。它与 Avalonia 完美融合。使用属性定义 ViewModel 属性和命令可以节省时间,从而防止错误。帮助你制作 MVVM 应用程序的另一个选择是 反应式用户界面,它还与 Avalonia 完美融合。
7。图表
该应用程序使用来自的仪表 LiveCharts2 来编写 “湿度和风力” 仪表板控件。他们工作得很好。如果你需要图表,我们强烈建议你去看看!
8。路由
由于 MVVM 社区工具包没有过多的导航路由机制,我们为该应用程序精心设计了一个简单的路由机制,希望它能作为参考有所帮助。你可以在 controls/RouterPresenter 文件夹中查看。
9。应用程序模式
该应用程序有两种模式:连接和模拟。连接的选项从中获取实际数据 环境天气 API 获取当前信息,并从中获取数据 数学 API 加载预测。请注意,两者都需要 API。另一方面,模拟模式从 JSON 文件加载示例数据,并使用计时器模拟更改。虽然第一种模式确实显示了如何使用实际服务,但另一种模式为测试应用程序提供了一个安全的游乐场。
10。AOT
启用 提前编译 (AOT) 可以显著提高应用程序的性能。但是,AOT有一些限制,因此为了使该应用程序正常运行,我们必须将Newtonsoft.Json替换为System.Text.Json,并进行了其他一些调整,这些调整将在代码中包含的文档中详细说明。

更多项目

UXdivers。Sosei
Blazor
UX/UI
发展
Sosei
箭头
Sosei是一家集专业知识、科学知识、创新和深厚激情于一体的公司,致力于帮助农民过渡到再生农业。
UXdivers。Guidl
宇野
UX/UI
发展
Guidl
箭头
Guidl 是地理定位体验的终极场所。探索、发现我们所有人身边的丰富故事、文化和观点,并从中获得启发。
UXdivers。移动泳池生成器
Xamarin
UX/UI
发展
移动泳池生成器
箭头
MBP 应用程序具有采用无线技术的内置摄像头,可帮助泳池建造者和业主实时跟踪施工过程。

让我们开始做一些很棒的事情。

让我们共同努力,将您的 Avalonia 项目变为现实。