UI最佳实践

每个页面顶部的标志应将用户发送到您网站的主页。 假设你的标志在你的主题目录中，这是如何在header.php模板文件中显示它的。

<a href="<?php echo home_url(); ?>"><img src="<?php echo get_stylesheet_directory_uri(); ?>/logo.png" alt="Website Logo" /></a>

锚文本是超链接的可见文本。 良好的链接文本应该给读者一个点击它将发生的动作的想法。

一个坏的例子：

学习WordPress的最好方法是开始使用它。 要下载WordPress，请点击这里。

一个更好的例子：

下载WordPress并开始使用它。 这是最好的学习方式。

默认情况下，浏览器强调了链接，让用户知道什么是可点击的。 一些设计师使用CSS来关闭超链接的下划线。 这导致可用性和可访问性问题，因为它更难以识别来自周围文本的超链接。

颜色是另一种视觉提示，文本是可点击的。 使用与周围文字不同的颜色进行样式化超链接，使其更易于区分。

超链接是拥有状态的少数HTML功能之一。 两个最重要的国家被访问和未访问。

为这两个状态使用不同的颜色可以帮助用户识别他们以前访问的页面。 将访问链接中的猜测工作的一个好方法是将它们的颜色比未访问链接的颜色深10％-20％。

链接可以有其他3个状态：

由于悬停和焦点具有相似的含义，因此赋予它们相同的风格是有用的。

颜色对比度是指两种颜色之间的差异。 海军蓝与黑之间的对比度较低。 白色和黑色之间的对比度很高。 Jonathan Snook提供了色彩对比计算器，可以帮助您确定网站设计的对比度。 WCAG 2.0在正常文本中需要4.5：1的比例才符合AA标准。

使您的文本容易阅读。 通过使文本足够大，您可以增加网站的可用性，并使内容更容易理解。 14px是最小的文本应该是。

标签通知用户什么是输入字段。 您可以使用标签中的for属性将标签连接到输入。 这将允许用户单击标签并将焦点放在输入字段上。

<label for="username">Username</label>
<input type="text" id="username" name="login" />

标签也可用于单选按钮。 由于它使用id字段而不是名称，因此该组的每个输入都将获得自己的标签。

<input type="radio" id="user_group_blogger" name="user_group" value="blogger" />
<label for="user_group_blogger">Blogger</label>
 
<input type="radio"  id="user_group_designer" name="user_group" value="designer" />
<label for="user_group_designer">Designer</label>
 
<input type="radio"  id="user_group_developer" name="user_group" value="developer" />
<label for="user_group_developer">Developer</label>

占位符文本显示用户要输入的内容的示例。 当用户将光标放在字段中时，占位符文本将消失，而标签保留。

<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="John Smith" />

网页上填满了不清楚的按钮。 请记住，上次您在登录表单上使用“确定”或“提交”？ 当然你做:)选择更好的单词显示在您的按钮可以使您的网站更容易使用。 尝试模式[动词] [名词] - 创建用户，删除文件，更新密码，发送消息。 每个描述当用户点击按钮时会发生什么。