📅 最后修改于: 2023-12-03 14:57:42.137000 🧑 作者: Mango
语义 UI 是指一种设计风格，强调使用语义化的元素和布局，以增强页面的可访问性、可维护性和可扩展性。换句话说，它是一种旨在使用户更好地理解和交互网站、应用程序和产品的设计方法。
语义化的元素通常与特定的 HTML 标签相关联，例如<nav>表示导航栏，<footer>表示页脚等。这使得 Web 开发人员能够使用正确的标记来描述其上下文，并且使得搜索引擎和辅助技术更容易理解和使用页面内容。
语义 UI 的一个重要方面是其能够有效地揭示变化，即在用户与网站或应用程序进行交互时，页面上的元素及其状态发生变化。以下是几个示例。
在语义 UI 中，按钮的状态通常用语义化的颜色或形状来表示。例如，绿色表示“成功”或“完成”，红色表示“删除”或“错误”。这意味着用户能够更快、更直观地理解按钮的目的。当用户按下按钮时，按钮可能会改变形状，以指示它已被按下。
按钮交互前后的变化示例：
在语义 UI 中，表单验证通常使用颜色和标记来揭示变化。例如，当用户提交表单时，如果其中一个字段无效，则字段将变红，并出现一个错误标记，以提示用户进行更改。相反，如果字段是有效的，则会变绿色，并出现一个成功标记。
表单验证结果展示示例：
在许多情况下，语义 UI 可以使用轻量级提示来揭示变化。例如，在用户提交表单时，可以显示短暂的消息，以指示表单已成功提交。同样，当用户尝试删除一条记录时，可以显示一个提示框，需要用户确认其操作。
轻量级提示展示示例：
使用语义 UI 能够帮助开发人员更好地构建用户友好的应用程序和网站，同时提高可访问性和可维护性。使用语义化的组件和布局可以使页面更直观，而使用颜色、形状和标记等元素可以帮助用户更好地理解页面上的变化。