CodeArts IDE UI设计

举报
HuaweiCloud开发工具 发表于 2023/12/06 10:57:38 2023/12/06
【摘要】 CodeArts IDE的用户界面(UI)旨在为软件开发提供一个高效且可定制的环境,专注于提高生产力和易用性,UI的设计旨在最小化干扰,提供直观的导航。CodeArts IDE的基本布局包括几个关键组件:编辑器(Editor):UI的中心区域是代码编辑器,开发人员在其中编写和编辑他们的代码。编辑器支持语法高亮显示、代码补全和智能代码分析,使编写和理解代码变得更加容易。活动栏(Activity...

CodeArts IDE的用户界面(UI)旨在为软件开发提供一个高效且可定制的环境,专注于提高生产力和易用性,UI的设计旨在最小化干扰,提供直观的导航。

布局.jpg

CodeArts IDE的基本布局包括几个关键组件

  • 编辑器(Editor):UI的中心区域是代码编辑器,开发人员在其中编写和编辑他们的代码。编辑器支持语法高亮显示、代码补全和智能代码分析,使编写和理解代码变得更加容易。

  • 活动栏(Activity Bar):CodeArts IDE的活动栏,使得各种工具窗口可以停靠在IDE的各个边缘。这些窗口提供对项目导航、版本控制、终端和构建工具等功能的访问。工具窗口的包括项目、版本控制、运行和终端。

  • 导航栏和工具栏(Tool Bar):位于编辑器顶部,导航栏提供快速访问项目文件、类和方法的功能。它还包括导航快捷方式和面包屑,便于代码遍历。工具栏包括快速访问按钮,用于常见操作,如运行、调试和版本控制操作。

  • 菜单栏(Menu Bar):菜单栏包含一组菜单,提供对CodeArts IDE功能、视图、导航等设置的访问。

  • 侧边栏(Side Bar):CodeArts IDE的侧边栏可以展示各种工具窗口。例如,项目工具窗口显示当前项目的结构,允许开发人员浏览文件和目录。它提供项目组件的分层视图,并支持各种项目管理操作。

  • 状态栏(Status Bar):IDE底部的状态栏显示有关当前项目、文件和版本控制状态的信息。它还包括代码检查、当前语言和其他设置的指示信息。

CodeArts IDE的UI高度可定制,允许开发人员根据自己的喜好调整布局、主题和外观。它支持不同的颜色方案、键盘映射和插件,使用户能够根据自己的工作流程和编码风格定制IDE。
总的来说,CodeArts IDE的UI旨在为软件开发提供一个清晰、高效和功能丰富的环境,提供各种工具和功能,以支持开发人员在整个编码过程中的工作。
 

相比于友商V,CodeArts IDE的UI优势:

友商V和CodeArts IDE都是功能强大的集成开发环境(IDE),具有各自独特的用户界面(UI)。友商V的UI以其轻量和简约的设计而闻名,为开发人员提供了清洁和整洁的工作空间。它强调简单性和灵活性,允许用户通过丰富的扩展和主题库来定制其开发环境。相比之下,CodeArts IDE提供了更全面和功能丰富的UI,将各种工具和功能直接整合到IDE中。其UI旨在为软件开发提供一体化解决方案,具有智能代码补全、强大的重构工具以及与各种框架和技术的无缝集成等高级功能。CodeArts IDE的优势在于其丰富的功能深度和组件的无缝集成,为专业软件开发提供了统一而高效的环境。此外,CodeArts IDE的界面设计专注于提高生产力和易用性。UI设计旨在最小化干扰,提供直观的导航,使开发人员更容易专注于编写高质量的代码。总之,相对于友商V,CodeArts IDE在用户界面方面的优势包括功能的深度集成、高度的可定制性以及专注于提高生产力和易用性。这些方面共同为用户提供了友好、高效的开发环境,特别是对于复杂和大型项目。
 

活动栏的设计:

CodeArts IDE将活动栏分为左、右上、右下、底部左侧、以及底部右侧活动栏,为用户添加了更多可以放置工具窗口的位置,增加了用户界面整体的灵活性。相比于友商V,可放置工具窗口的活动栏只存在于左侧以及底部面板,并且只有左侧活动栏可以做到常显,底部,以及新增的右侧面板中的活动栏并不能做到常显,导致用户关闭活动栏时将会同时关闭可以开启工具窗口的按钮,影响了用户体验。然而,CodeArts IDE将所有活动栏常显,关闭面板时并不会关闭活动栏(存放开启工具窗口的位置),可以让用户随时唤出需要使用的工具窗口。

CodeArts IDE(底部活动栏以及底部面板设计)拥有更多的扩展位,分为左右:底部面板.jpg

友商V(底部面板设计):

vscode底部.jpg

CodeArts IDE(右侧活动栏以及右侧边栏设计)拥有更多的扩展位,分为上下:

右边.jpg

 友商V(右侧面板设计):

vscode右.jpg

更多的扩展位:

拥有更多的活动栏放置工具窗口,不仅提高了用户对于IDE整体UI的可操作性,使其变得更加灵活,而且可以为插件开发者提供更多注册按钮的位置。友商V为插件开发者仅提供两个位置来放置开启插件的按钮,分别为左侧活动栏和底部面板中的活动栏。然而,CodeArts IDE拥有高达5个活动栏的位置可以让插件注册的位置,开发人员可以通过在开发插件时填入相对应的位置来注册。您可以通过插件具备的功能分类,将它注册在与其它类似功能的工具窗口,可以更加方便用户来使用插件。如果需要开发插件,也可以通过CodeArts IDE内置的新建插件工程来完成开发(如下图),里面集成了开发插件所需要的模板以及对应的文件。
在插件工程中的package.json文件中,可以通过这种方法自行定义希望插件注册的地方(如下图)。

除了将插件注册在活动栏,您也可以将其注册在CodeArts IDE的欢迎界面(如下图):
您可以自行定义想要注册的图标以及文字,IDE提供了相关的API来支持插件开发者,例如,
 
同时,想到插件提供的多功能快捷按键,我们在工具窗口上也提供了相关的API来为开发者注册按键(如下图):

 
总的来说,CodeArts IDE为开发者提供了多样,以及灵活的的界面选择。如果您觉得扩展位置,窗口过多,更加偏向于“简洁”的界面,也可以通过顶部菜单栏中的“查看”一栏中设置来开启或者关闭活动栏以及侧边栏从而达到“简洁”的界面。
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。