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

最新推荐文章于 2019-09-25 04:47:34 发布

hmg_monkey

最新推荐文章于 2019-09-25 04:47:34 发布

阅读量945

点赞数

分类专栏： Mobil web 文章标签： mobile web开发

Mobil web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

传统的按钮（button)与那些经过CSS装饰后看起来像按键的标签有本质的不同。前者可以用来提交一个表单，而后者如果不辅助其它代码，只能用来做为一个可点击的锚点按键。虽然按键很容易创建，但也很容易出现瑕疵，如下面代码：

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

hmg_monkey

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Mobile Web开发基础之三————由按键想到的

按钮是天生为移动平台而生的：移动平台上的按钮往往被设计得比较大以便用户点击——与此形成鲜明对比的就是移动平台上的超链接。移动平台与桌面平台在人机交互上有显著的不同，移动平台的输入工具为用户的手指，显示区域相对输入工具就很小;而对于桌面平台，显示区域较输入区域就大得多了，鼠标的存在，更是与触屏式的交互有所不同。传统的按钮（button)与那些经过CSS装饰后看起来像按键
复制链接

扫一扫