Mobile Web开发基础之三————由按键想到的

最新推荐文章于 2024-11-14 22:52:36 发布

blessdyb

最新推荐文章于 2024-11-14 22:52:36 发布

阅读量146

点赞数

分类专栏：用户体验 Mobile Web 文章标签： mobile web ui ue html5

本文链接：https://blog.csdn.net/blessdyb/article/details/84219722

版权

Mobile Web 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

用户体验

2 篇文章 0 订阅

订阅专栏

按钮是天生为移动平台而生的：移动平台上的按钮往往被设计得比较大以便用户点击——与此形成鲜明对比的就是移动平台上的超链接。移动平台与桌面平台在人机交互上有显著的不同，移动平台的输入工具为用户的手指，显示区域相对输入工具就很小;而对于桌面平台，显示区域较输入区域就大得多了，鼠标的存在，更是与触屏式的交互有所不同。

传统的按钮（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设计中是相当重要的一部分。因为按钮的易用性，所以那些用户使用频率高的功能，最好是用按钮（或按钮的变种控件)来实现。同时，一定要测试自己的代码的可用性，千万不要认为如果产品看上去与设计方案一致就已经完成。