在设计 WordPress 主题时，考虑主题的用户界面非常重要。
在本课中，你将学习用户界面设计，以及设计主题用户界面的一些最佳实践。
什么是用户界面设计？
网站的用户界面（UI）是人与网站之间进行交互的空间。这通常被称为网站前端。
良好的用户界面设计的目标是实现有效的交互，也就是良好的用户体验，这样网站就能提供有助于用户决策过程的良好反馈。
糟糕的用户界面设计可能导致令人沮丧的用户体验，并可能流失网站访客，这对你的主题用户来说不是一个好结果。
在设计主题时，确保主题元素提供良好的用户体验非常重要。
让我们深入了解设计 WordPress 主题用户界面的一些最佳实践。
Logo 链接到首页
主题的 Logo 应链接到网站的首页。
如果你在经典主题中使用 custom_logo() 函数，或在区块主题中使用站点 Logo 区块，Logo 会自动链接到首页。
如果你使用任何类型的自定义头部，应确保 Logo 链接到首页。
以下是一个使用 home_url() 函数将 Logo 链接到首页的示例：
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/logo.png" alt="<?php esc_attr_e( 'Home Page', 'textdmomain' );?>" />
</a>描述性锚文本
在为主题中显示的内容创建链接时，请确保使用描述性锚文本。
锚文本是链接的可见文本。描述性锚文本应让读者了解点击链接时将执行的操作。
以下是一个糟糕的描述性锚文本示例：
The best way to learn WordPress is to start using it. To Download WordPress, <a href="https://wordpress.org/download/">click here</a>.“点击这里”并不能很好地描述点击链接后会发生什么。
以下是编写锚文本的更好方式：
The best way to learn <a href="https://wordpress.yuannext.com/">WordPress</a> is to start using it. <a href="https://wordpress.org/download/">Download WordPress</a> to get started.“下载 WordPress” 这个文本描述了点击链接后会发生什么。
为链接添加下划线样式
谈到链接，好的主题设计意味着保留链接的默认样式，即显示下划线。
有些设计师使用 CSS 禁用链接的下划线。然而，这样做会导致可用性和可访问性问题，因为从周围文本中识别超链接变得更加困难。
不同的链接颜色
在链接上使用颜色是一种视觉提示，表明文本是可点击的。
HTML 链接是少数具有状态的元素之一。两个主要状态是已访问和未访问。已访问表示用户已点击链接并访问了其指向的页面，未访问表示用户尚未点击该链接。
默认情况下，未访问的链接是蓝色，已访问的链接是紫色。
为这两种状态设置不同的颜色有助于用户识别他们之前访问过的页面。
此外，链接还有另外 3 种状态：
- 悬停，当鼠标悬停在元素上时
- 聚焦，类似于悬停，但适用于键盘用户
- 激活，当用户正在点击链接时
由于悬停和聚焦具有相似的含义，有时设计师会给它们相同的样式。
然而，悬停和聚焦有不同的交互模式。
如果你选择微妙的悬停状态，你应该有一个更易识别的聚焦状态。
悬停在链接上是一种定向活动，用户知道他们在页面中的位置，只需要识别该位置是否可链接。
聚焦是一种非定向活动，用户需要发现他们的焦点在从上一个位置移动后到了哪里。
注意 Twenty Twenty-Four 主题中的菜单链接，当鼠标悬停时会添加下划线样式，但通过键盘切换焦点时则显示边框。
颜色对比度
颜色对比度指的是屏幕上两种颜色之间的差异。
例如，注意 Twenty Twenty-Four 主题中默认按钮样式具有深色背景和浅色文字。如果你将文字颜色改为深色，按钮将更难阅读。
WebAIM 是一个非营利性网络可访问性组织，它提供了一个颜色对比度计算器，帮助你确定网站设计中的对比度。
你可以输入背景色和前景色，查看对比度是否满足 Web 内容可访问性指南（WCAG）2.0 的要求。
WCAG 2.0 要求普通文本的对比度达到 4.5:1 才能符合 AA 级标准。
足够的字体大小
让你的文字易于阅读。
通过将文字设置得足够大，你可以提升网站的可用性，使内容更容易理解。14px 是最小的文字尺寸。
将标签与输入框关联
在使用接受输入的 HTML 元素时，请确保使用 for 属性将标签与输入框关联起来。
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="John Smith" />这样用户就可以点击标签，并将焦点聚焦到输入框上。
占位符文本
开发者经常在输入元素上使用占位符，向用户展示输入内容的示例。
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="John Smith" />当用户将光标放入输入框并开始输入时，占位符文本会消失。
然而，如果使用不当，占位符可能会成为用户体验和可访问性的噩梦。
因此，请确保正确使用占位符，或者干脆不用。
如果你决定使用占位符，请确保它提示的是输入框所需的数据类型，而不是替代输入框的标签。
描述性按钮
网络上充斥着含义不清的按钮。还记得你上次在登录表单上使用“确定”或“提交”按钮吗？
在按钮上选择更合适的词语可以让你的网站更易用。尝试使用 [动词] [名词] 的模式。例如“提交表单”，而不仅仅是“提交”。
这描述了用户点击按钮时会发生什么。
一个很好的例子是单篇文章模板中的评论表单，它使用了“发表评论”，而不仅仅是“提交”。
进一步阅读
如需了解主题开发过程中用户界面最佳实践的更多信息，请参考 WordPress 主题开发者手册高级主题部分中的 UI 最佳实践文档。