感谢IT之家网友 Thorn_Flower 的线索投递!
IT之家 6 月 25 日消息,博思云创旗下协同设计工具 Pixso 官宣首发鸿蒙HarmonyOS 原生组件库。
![](http://n.sinaimg.cn/spider20240625/740/w1080h460/20240625/09e0-55bb7aac2cda3813df9387e24509570b.png)
据介绍,HarmonyOS 组件库,是由鸿蒙内部设计师与开发者共同打造的企业级设计系统,可用于设计鸿蒙应用、遵循平台的设计规范、完成跨平台的产品设计。IT之家附 Pixso 鸿蒙 HarmonyOS 组件库亮点信息如下:
规范设计
HarmonyOS 组件库提供设计规范,能够帮助用户完成鸿蒙应用设计和研发,并保持设计语言和风格的一致。
![](http://n.sinaimg.cn/spider20240625/155/w1080h675/20240625/8e2a-dce00da2af8785e91a48a4899d014f82.png)
组件资源
HarmonyOS 组件库提供 6 大类原生组件,包括导航类、操作类、展示类、输入类、选择类和容器类,每一类下面细分出多个子类和样式,覆盖大多场景设计需求。
组件在不同场景下有不同表现形式,原生组件预置不同变体,可通过 Pixso 组件变体功能切换颜色、大小、形状等,以适应不同的设计需求或满足特定的使用场景。
![](http://n.sinaimg.cn/spider20240625/16/w1080h536/20240625/6132-gif4530cdc018765e48a3b66dec574fc428.gif)
团队维护
所有人均可基于 HarmonyOS 组件库来构建个人或团队组件库,通过 Pixso 组件库替换功能,用户可根据组件和样式名称进行匹配,批量替换项目使用的组件库,实例中的组件、样式、配色也会同步更换,无需手动修改。
![](http://n.sinaimg.cn/spider20240625/544/w864h480/20240625/febb-0ecffdc04fcbb0f83751c893a50fd8bd.png)
除了 HarmonyOS 组件库,Pixso 插件广场还上架了一款相配套的设计插件“Harmony Design”,插件集成了 3 大功能,可进一步提升产品设计效率:
HarmonyOS Symbol
内置鸿蒙图标,提供 3 种颜色和 7 种动效样式,可用于搭建鸿蒙界面
主题切换
基于 HarmonyOS 组件或颜色样式搭建的界面,可一键切换 UI 主题,适配深浅模式
规范检查
提供组件规范、参数规范和组件使用统计 3 种检查能力,智能检查文件是否符合设计规范
![](http://n.sinaimg.cn/spider20240625/234/w1080h754/20240625/ce97-3389e5ebe2f276fb43391c4a383fa2a1.png)
HarmonyOS 组件库、鸿蒙设计插件获取、安装方式如下:
HarmonyOS 组件库
浏览器打开 Pixso 资源社区首页,顶部的「资源社区精选」区域显示有 HarmonyOS 组件库,点击组件库封面进入详情页。
![](http://n.sinaimg.cn/spider20240625/791/w1080h511/20240625/d6dd-d7d47cf6e14bd312c6914e621af860fc.png)
进入 HarmonyOS 组件库的详情页后,点击右上角的「复制」按钮,即可一键拷贝整份组件库。
![](http://n.sinaimg.cn/spider20240625/12/w1080h532/20240625/7b10-aa07c2f1014d14b6e98267b2e66e3313.png)
拷贝的 HarmonyOS 组件库默认存放在“我的草稿”中,团队协作场景下,组件库可移动到团队协作空间,团队成员可查看或维护整个组件库。
![](http://n.sinaimg.cn/spider20240625/38/w1080h558/20240625/5406-853f0876e66e9a44a6c59dc1a6c38ed7.png)
鸿蒙设计插件
Pixso 插件广场首页展示有 Harmony Design 插件,点击插件右侧的按钮,安装对应的插件。
![](http://n.sinaimg.cn/spider20240625/22/w1080h542/20240625/c00d-fdc2ce88503d4cc90c1ec5ab07f05ed4.png)
安装鸿蒙设计插件后,用户可在设计过程中随时唤出插件,辅助完成产品设计,操作如下:
点击 Pixso 设计文件右上角的插件图标,在弹出的插件浮窗,可以看到刚安装的鸿蒙插件,点击即可运行插件。
![](http://n.sinaimg.cn/spider20240625/750/w1080h470/20240625/aec4-b2463c54b9e0ffe0980d5ac309db52a3.png)
另外,还可以在画板上点击鼠标右键,选择右键菜单底部的「插件」,同样可以看到已安装的鸿蒙插件,点击即可唤出插件面板。
![](http://n.sinaimg.cn/spider20240625/59/w1080h579/20240625/8ad3-694ecfa8b62656a4f3c07dae39e99902.png)
广告声明:文内含有的对外跳转链接(包括不限于超链接、二维码、口令等形式),用于传递更多信息,节省甄选时间,结果仅供参考,IT之家所有文章均包含本声明。
![新浪科技公众号 新浪科技公众号](http://n.sinaimg.cn/tech/content/tech_qr2x.png)
“掌”握科技鲜闻 (微信搜索techsina或扫描左侧二维码关注)
![](http://n.sinaimg.cn/tech/content/tech_weixin2.png)