今天来跟大家聊一聊HarmonyOS中绕不过去的坎——ArkUI。
要学习ArkUI。首先需要了解下什么是UI？
UI在计算机世界中是一个通用词汇，是指用户界面(User Interface)的意思。UI分为GUI(图形化界面)和CLI(命令行界面)，通常我们说UI的时候是指软件的GUI。
CLI我们也经常会遇到，例如我们在windows系统里面输入cmd，跳出来的黑乎乎的窗口，这个就是CLI。如下图所示：
那GUI通常包含了哪几类元素呢？
-
布局元素（Layout Elements）：
-
容器（Containers）：用于组织和包含其他UI元素的框架，如卡片、面板、框架等。
-
网格系统（Grid Systems）：帮助在页面上对齐和分布内容的系统，确保布局的一致性和响应性。
-
空间分隔（Spacing）：包括边距（Margins）和填充（Padding），用于分隔UI元素，提供视觉层次感。
-
-
输入控件（Input Controls）：
-
文本框（Text Boxes）：允许用户输入文本。
-
密码框（Password Boxes）：与文本框类似，但显示的是隐藏字符。
-
单选按钮（Radio Buttons）：允许从一组选项中选择一个。
-
复选框（Checkboxes）：允许用户选择多个选项。
-
下拉列表（Dropdown Lists）：显示可选项列表，用户可以从中选择一个。
-
开关（Switches）：表示两种状态之间的切换，如开启/关闭。
-
滑块（Sliders）：允许用户通过滑动选择一个范围内的值。
-
文件上传控件（File Upload Controls）：用于上传文件到服务器。
-
-
导航元素（Navigation Elements）：
-
菜单（Menus）：提供应用程序或网站的导航结构。
-
标签（Tabs）：允许用户在不同的视图或页面间切换。
-
面包屑（Breadcrumbs）：显示当前位置的路径，帮助用户理解他们在网站或应用中的位置。
-
导航栏（Navigation Bars）：通常位于页面顶部或侧边，包含链接到其他页面的按钮或链接。
-
-
信息元素（Informational Elements）：
-
标签（Labels）：为输入控件或其他元素提供描述性文本。
-
徽章（Badges）：显示未读计数或其他重要信息。
-
提示（Tooltips）：当用户悬停在元素上时显示的额外信息。
-
模态对话框（Modal Dialogs）：弹出窗口，要求用户响应或确认操作。
-
通知（Notifications）：向用户显示重要信息或警报。
-
-
交互元素（Interactive Elements）：
-
按钮（Buttons）：用户点击以触发操作的元素。
-
链接（Links）：文本或图像，点击后可以导航到新页面或执行操作。
-
成功/错误消息（Success/Error Messages）：向用户显示操作结果的文本或图形提示。
-
确认对话框（Confirmation Dialogs）：要求用户确认他们的操作。
-
-
反馈元素（Feedback Elements）：
-
加载指示器（Loaders）：显示操作正在进行中的动画或图形。
-
图标（Icons）：代表特定功能或命令的图形符号。
-
进度条（Progress Bars）：显示任务进度的视觉指示器。
-
我知道同学们看到上面一大段文字又开始头晕了，看文字可能记不住，别着急。
下面我们用图说话，这张思维导图是我精心为大家准备的，建议大家保存收藏，以后的面试和学习中会用到。
如果需要高清版，请关注本公众号，并回复「GUI元素分类」，即可获得。
我给大家打个比方，想象一下你走进一家餐厅用餐。在这个场景中，餐厅的菜单、服务员、桌子和椅子等都可以类比为用户界面（UI）的不同元素。
1. 其中这家餐厅里面的厨房、桌子、板凳、屏风等属于布局元素，通过合理的布局，让这家餐厅看起来优雅、宽敞、合理等。
2. 当我们进入餐厅时，站在餐厅门口的服务员会带领我们找到空余的座位，这个服务员则是属于导航元素，能带我们去到我们想去的地方。
3. 当我们坐下之后，服务员为我们带来了菜单，这本菜单包含了菜品元素和价格列表，这个属于信息元素。
4. 我们看好了菜品，跟服务员说好了要吃的菜时，服务员在纸和笔上记录下我们点的菜，纸和笔属于输入控件。
5. 点好了菜之后，服务员在我们的餐桌上放了一个沙漏，并告诉我们说，这个沙漏一次正好是15分钟，我们承诺15分钟之内会为您上齐菜品，这个沙漏属于反馈元素，告诉了我们上菜的进度。
6. 在等待上菜的时候， 一个拉小提琴的绅士过来问我们是否需要为我们即兴表演一个节目？这个绅士属于交互元素。
基本上所有的GUI元素都不会超出这六大类，包括桌面软件界面、游戏界面、网页界面、手机APP界面等。
好了，今天的学习到此结束，给大家留个小作业：
请大家随便打开一个APP，截取一张APP的界面截图，尝试区分出该界面中的元素分别属于什么类型的UI元素，可以将作业发到评论区，跟大家一起讨论哟。
关于菁英老猎人
菁英老猎人拥有12+年的软件开发经验，一直专注于大前端领域，对原生APP开发、混合APP开发和鸿蒙APP开发都有较深入的研究，曾使用cordova、uni-app、React-Native、Flutter做过大量的项目，现在开始研究鸿蒙应用开发，擅长对APP开发的相关知识深入浅出。关注我，带你快速、扎实的学习鸿蒙应用开发。