代码写得很牛逼但UI界面却搞得很丑?来,杨工带你!

简介: 代码写得很牛逼但UI界面却搞得很丑?来,杨工带你!

平时在MCU LCD上搞一些界面,太复杂太麻烦的,可能会上emwin,但是大部分需求都是拿到一副BMP的图,然后通过Image2Lcd生成一个C语言数组,接下来将数组复制到代码中,调用LCD显示图片的函数进行显示。

640.png

640.png

除了嵌入式系统的UI需求,平时我们也会在PC机上去开发一些上位机或者简单的APP,比如下面这两个以前我做来测试的工具:

640.png

640.png

这些界面给用户最直观的感觉,太丑了吧!至少得增加一些LOGO或者别的东西,让它看起来更符合人的审美设计,但是对于工程师而言,嗯!能做出来还是非常有成就感的!

640.png

经常逛Github的同伴肯定会发现,为什么别人做的开源软件那么炫,那些图标是怎么弄来的呢?

1、推荐一个我经常用的Iconfont

Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具

640.png

比如,我想找一个音量的图标,我只需要搜索音量,就能找到这么多图标啦!

640.png

640.png

640.png

选择图标配色、尺寸大小、图标格式,接下来就可以愉快的下载下来啦,完全免费

2、不会PS切图,拼图?来,我教你

很多嵌入式软件工程师都抱怨,哎,不懂PS呀,不会P图,其实对于我们嵌入式软件工程师而言,我们最关心的是显示图标的格式、尺寸大小,这就够了,至于显示在软件上的哪个位置,需要根据现实情况随时进行调节。

2.1 以PS做一个64*64音量图标为例

假设我的音量图标规格要求是64*64的,那么就这样来做:

640.png

(这是刚刚下载的)

首先新建一个PSD文件

640.png

然后输入宽度、高度分别为64、64像素,然后点确定

640.png

然后看到是这样的效果:

640.png

然后将音量用鼠标左键按住不动拖进来,根据框框调节在图标里显示的区域。

640.png

按住Shift键,然后鼠标拖动让图片能够等比缩放。

640.png

图标做好了,接下来打开文件,然后选择存储为

640.png

这时就可以保存为具体的图片格式啦。

640.png

只要是符合规范的图片,都可以通过存储为转换一下图像格式,常见的有JPG转BMP,PNG转BMP,JPG转PNG等等。

640.png

640.png

这里我转成了BMP格式。

如果要切图,那怎么办呢?

640.png

然后Ctrl+"+"将图标放大

640.png

选择裁剪区域

640.png

确定裁剪。

640.png

裁剪成功。

640.png

裁剪成功,当然也可以通过以下选项来修改图像大小和画图大小。

640.png

往期精彩

WIFI DTU产品设计与实现(基于STM32F103+QT配置上位机案例设计分享)


圆曾经的小车梦,造一台智能小车(三)之小车前进后退左右转基本框架


推荐三个我工作中经常使用的驱动大全wiki(建议收藏并转发让更多人知道!)

目录
相关文章
|
5月前
|
机器学习/深度学习 算法 定位技术
Baumer工业相机堡盟工业相机如何通过YoloV8深度学习模型实现裂缝的检测识别(C#代码UI界面版)
本项目基于YOLOv8模型与C#界面,结合Baumer工业相机,实现裂缝的高效检测识别。支持图像、视频及摄像头输入,具备高精度与实时性,适用于桥梁、路面、隧道等多种工业场景。
606 27
|
计算机视觉 Python
基于Dlib的人脸识别客户端(UI界面)
基于Dlib的人脸识别客户端(UI界面)
503 2
|
10月前
|
存储 JSON JavaScript
WEB CAD插件通过上下文对象MxPluginContext修改UI界面的方法
本文介绍了如何使用MxPluginContext动态控制MxCAD项目的UI界面。通过该上下文对象,开发者可以灵活设置UI配置,如控制操作栏显隐、编辑按钮、添加侧边栏等。具体方法包括调用`getUiConfig()`获取并修改`mxUiConfig.json`中的属性,实现界面的定制化。此外,还提供了控制命令行聚焦的功能,解决输入框焦点锁定问题。详细代码示例和效果对比图展示了具体实现步骤,帮助开发者更好地适配项目需求。
|
10月前
|
人工智能 自然语言处理 前端开发
Flame:开源AI设计图转代码模型!生成React组件,精准还原UI+动态交互效果
Flame 是一款开源的多模态 AI 模型,能够将 UI 设计图转换为高质量的现代前端代码,支持 React 等主流框架,具备动态交互、组件化开发等功能,显著提升前端开发效率。
1549 1
|
12月前
|
移动开发 前端开发 Java
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
JavaFX是Java的下一代图形用户界面工具包。JavaFX是一组图形和媒体API,我们可以用它们来创建和部署富客户端应用程序。 JavaFX允许开发人员快速构建丰富的跨平台应用程序,允许开发人员在单个编程接口中组合图形,动画和UI控件。本文详细介绍了JavaFx的常见用法,相信读完本教程你一定有所收获!
11133 5
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
580 8
|
XML Android开发 UED
💥Android UI设计新风尚!掌握Material Design精髓,让你的界面颜值爆表!🎨
随着移动应用市场的蓬勃发展,用户对界面设计的要求日益提高。为此,掌握由Google推出的Material Design设计语言成为提升应用颜值和用户体验的关键。本文将带你深入了解Material Design的核心原则,如真实感、统一性和创新性,并通过丰富的组件库及示例代码,助你轻松打造美观且一致的应用界面。无论是色彩搭配还是动画效果,Material Design都能为你的Android应用增添无限魅力。
379 1
|
机器学习/深度学习 数据可视化 计算机视觉
基于opencv的车牌识别系统(UI界面采用tkinter设计)
基于opencv的车牌识别系统(UI界面采用tkinter设计)
274 0
|
C# 开发者 设计模式
WPF开发者必读:命令模式应用秘籍,轻松简化UI与业务逻辑交互,让你的代码更上一层楼!
【8月更文挑战第31天】在WPF应用开发中,命令模式是简化UI与业务逻辑交互的关键技术,通过将请求封装为对象,实现UI操作与业务逻辑分离,便于代码维护与扩展。本文介绍命令模式的概念及实现方法,包括使用`ICommand`接口、`RelayCommand`类及自定义命令等方式,并提供示例代码展示如何在项目中应用命令模式。
274 0
|
7月前
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
234 15

热门文章

最新文章