UI最佳实践

每个页面顶部的logo应该把用户链接到网站主页。
如果你使用推荐的函数the_custom_logo()或网站logo区块,logo默认是链接到主页的。

你也可以手动添加logo。假设你的logo在主题目录中,这就是如何在header.php模板文件中显示它:

<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>

 

描述性的锚文本

锚文本是一个超链接的可见文本,好的链接文本应该让读者了解点击它时将发生的行动。

不推荐的例子:

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

更好的例子:

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

 

默认情况下,浏览器在链接下方加下划线,让用户知道什么是可以点击的。有些设计者使用CSS来关闭超链接的下划线。这会导致可用性和可访问性问题,因为它使得从周围的文本中识别超链接更加困难。

 

颜色是文字可被点击的另一个视觉线索。用与周围文本不同的颜色来设计超链接,使它们更容易被区分。

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

为这两种状态设置不同的颜色有助于用户识别他们以前访问过的页面。对已访问过的链接进行猜测的一个好技巧是将它们的颜色比未访问过的链接深10%-20%。

链接可以有3种其他状态:

  • hover:当鼠标在一个元素上时
  • focus:类似于hover,但适用于键盘用户
  • active:当用户单击链接时

由于hover和focus具有相似的含义,因此给它们相同的样式是很有用的。

虽然hover和focus有相似的含义,但它们有不同的交互模式。如果你选择一个微妙的hover状态,你应该有一个更容易识别的focus状态。hover在一个链接上是一种定向活动,用户知道自己在页面中的位置,只需要识别那个地方是否有链接。focus是一种不定向的活动,用户需要发现focus从上一个位置转移到哪里。

 

色彩对比度

色彩对比度是指两种颜色之间的差异。海军蓝和黑色之间的对比度低。白色和黑色之间的对比度高。WebAIM,一个非营利性的网络无障碍组织,提供了一个色彩对比度计算器,帮助你确定网站设计中的对比度。WCAG 2.0要求正常文本的比例为4.5:1才符合AA标准

 

足够的字体大小

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

 

将label关联input

label告诉用户一个input字段是做什么的,可以通过使用label的for属性来连接label和input。这将允许用户点击label并关注input字段。

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

label也适用于radio按钮,因为它使用id字段而不是name,所以该组的每个input都有自己的label。

<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>

 

表单中的占位符(placeholder)文本

占位符文本向用户展示了一个应该输入的例子。当用户把光标放在字段中时,占位符文本将消失,而label仍然存在。

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

使用占位符来提示一个字段所需的数据类型,而不是作为字段label的替代。

 

描述性的按钮

网络上充斥着一些意义不明的按钮。还记得你上次在登录表单上使用'确定'或'提交'吗?选择更好的词来显示在你的按钮上可以使你的网站更容易使用。试试[动词][名词]的模式--创建用户、删除文件、更新密码、发送消息。每一个都描述了当用户点击按钮时将会发生什么。