按钮是天生为移动平台而生的：移动平台上的按钮往往被设计得比较大以便用户点击——与此形成鲜明对比的就是移动平台上的超链接。移动平台与桌面平台在人机交互上有显著的不同，移动平台的输入工具为用户的手指，显示区域相对输入工具就很小;而对于桌面平台，显示区域较输入区域就大得多了，鼠标的存在，更是与触屏式的交互有所不同。
传统的按钮（button)与那些经过CSS装饰后看起来像按键的标签有本质的不同。前者可以用来提交一个表单，而后者如果不辅助其它代码，只能用来做为一个可点击的锚点按键。虽然按键很容易创建，但也很容易出现瑕疵，如下面代码：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width;initial-scale=1.0"
<title>按键</title>
<style type="text/css">
#container {
margin: 0 200px;
}
.button {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #F2F7FA;
border-color: #D9D9D9 #A9A9A9 #A9A9A9 #D9D9D9;
border-left: 1px solid #D9D9D9;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px;
display: block;
padding: 0.5em;
text-align: center;
}
a {
text-decoration:none;
}
</style>
</head>
<body>
<div id="container">
<p>
<a class="button" href="#">More</a>
</p>
<div class="button">
<a href="#">More</a>
</div>
</div>
</body>
</html>
在浏览器中查看这个HTML页面，就可以看到，第一个"超链接按键"在点击的时候，显示的是正常按钮被按下的样式，但第二个的显示风格与超链接无异。这点小瑕疵，在一些著名的互联网产品中就出现过。
我的经验是，当UI/UE设计方案被移交给开发者后，大部分的开发者会认为，如果他们的代码输入与设计方案外观一致就是工作完成了，于是他们就忽略了对于实际产品的可用性测试。如果这个产品出现在了正式上线使用的版本中，那只能说明这个产品的开发人员没有使用自己的产品。
总而言之，按钮在Mobile Web设计中是相当重要的一部分。因为按钮的易用性，所以那些用户使用频率高的功能，最好是用按钮（或按钮的变种控件)来实现。同时，一定要测试自己的代码的可用性，千万不要认为如果产品看上去与设计方案一致就已经完成。
分享到：
相关推荐
"电大web开发基础形考5.pdf" 本资源主要讲述了电商网站前端页面响应式设计实验，实验目标是将首页改为响应式设计，使用Bootstrap栅格系统实现响应式网页设计。下面将对实验报告的内容进行详细分析和总结。 实验...
在本系列教程中，我们将深入探讨如何在Windows Mobile平台上开发一款经典的贪吃蛇游戏。Windows Mobile是微软为掌上设备如智能手机和平板电脑设计的操作系统，它提供了丰富的API和工具来支持应用程序开发，包括游戏...
### ASP.NET Mobile Controls 开发 Mobile Web 应用 #### 知识点概述 - **ASP.NET Mobile Controls**：这是微软为开发移动Web应用程序提供的一套工具包，它包含了一系列控件，这些控件专为移动设备优化，可以适应...
在本文中，我们将深入探讨如何在Windows Mobile平台上开发一款经典的贪吃蛇手机游戏。我们将从开发环境的搭建开始，逐步引导你完成一个简单的"Hello World"程序，这将作为我们后续开发的基础。让我们一起探索这个...
**jQuery Mobile Web API 开发详解** 在Web应用开发中，jQuery Mobile 和 Web API 结合使用可以构建出功能强大且响应式的移动应用。本教程将深入探讨如何利用jQuery Mobile与C#实现的Web API2接口进行交互，展示...
With this hands-on book, veteran mobile and web developer Maximiliano Firtman demonstrates which aspects of your site or app slow down the user’s experience, and what you can do to achieve lightning...
**J2ME游戏开发之RPG——源码详解** J2ME（Java 2 Micro Edition）是Java平台的一个子集，主要用于嵌入式设备和移动设备的开发，如早期的智能手机和平板电脑。在J2ME中开发角色扮演游戏（RPG）是一项挑战性的任务，...
### Head First Mobile Web：关键技术与应用实践 #### 一、移动网络环境的演变与挑战 随着移动设备（如智能手机和平板电脑）的普及，越来越多的用户选择通过这些设备访问互联网。这种趋势使得移动网络的使用量正在...
.NET Compact Framework是微软为嵌入式设备和移动设备如Windows Mobile...阅读“NET Compact Framework新动力——加速您的Windows Mobile应用开发”PDF文档，将帮助您深入理解这些概念和技术，进一步提升您的开发技能。
### 手机网页开发——《Programming the Mobile Web》精要解析 #### 一、书籍概述 《Programming the Mobile Web》是一本由Maximiliano Firtman编写的关于移动网络开发的专业指南。本书全面深入地介绍了移动开发...
《Head First Mobile Web》是一本专注于移动Web开发领域的图书，它详细介绍了如何创建能在多种设备和浏览器上运行的移动网站。本书在2011年12月出版，以PDF格式呈现给读者，提供了从基础到高级的移动Web开发技术介绍...
ASP.NET是一种强大的Web应用程序框架，由微软公司推出，主要用于构建动态、数据驱动的Web应用程序。在移动互联网时代，ASP.NET同样能够支持开发适应各种移动设备的Mobile Web应用。本篇文章将详细探讨如何利用ASP...
《Microsoft Mobile 移动开发宝典》是一本深入探讨微软平台移动应用开发的综合性指南，旨在帮助开发者掌握在Windows Phone和后来的Windows 10 Mobile平台上构建高效、高质量应用程序的技巧与策略。这本书覆盖了从...
移动Web的使用在呈爆炸式增长。很快，人们会更愿意在手机和平板电脑而不是PC机上浏览网页。...使用*的开发技术，包括响应式Web设计，以及利用WURFL完成服务器端设备检测；通过图片、谜题、故事和问答轻松学习。
《Head First之Mobile Web》是一本专为初学者设计的移动网页开发教程，以其独特的图文并茂的教学方式，深入浅出地介绍了移动互联网世界的各个方面。这本书涵盖了从基础概念到实践应用的所有关键知识点，旨在帮助读者...
在本文中，我们将深入探讨如何利用ASP.NET Mobile Controls进行移动Web应用的开发，以及相关的重要知识点。 1. **了解ASP.NET Mobile Controls**：ASP.NET Mobile Controls是.NET Framework的一部分，它提供了与...
- **重申标题**：该描述简洁明了地再次强调了书籍的核心主题——使用jQuery Mobile掌握移动Web应用的开发。 - **潜在读者**：此描述适用于那些想要深入了解jQuery Mobile并应用于实践中的开发者。 #### 标签解析 ...
本文将深入分析三大主流移动Web开发框架——jQuery Mobile、jQTouch和Sencha Touch，帮助开发者根据项目需求选择最适合的技术方案。 #### jQuery Mobile：跨平台的王者 jQuery Mobile作为一款针对触摸设备优化的...