Designing for Touch Screen

原文 地址http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/

       终于，这个博客本来是计划在两个礼拜前公布，而从那时起看起来每个设计者都写了同一个话题——因为我们懒而教育我们。然而，我依然决定公布这个文章，为了那些错过了其他好文章的人准备。。。

到现在你应该听说过iPad，除非你是山顶洞人！触屏设备出现并将延续，大家需要开始想办法为触屏尽可能做好设计和开发。水果希望大家相信iPad是唯一一个所有人都该拥有的触屏设备，不过强力竞争者比比皆是，而且更多要在今年上市。因此，你应该开始思考和设计为触屏而生的网站，同时升级你其他的站点。有很多需要考虑的事情，下面是一些例子：

1、没有CSS hover

CSS hover状态不受支持。现在，一个设计者应该不再依赖hover属性来与链接交流，这些应该明确定义，不同于body的复制，并将其仅仅当做回馈机制——简单来讲，你的网站应该在没有hover的情况下完全可以浏览和用户友好。

然而，这会带来麻烦，特别是考虑到下拉菜单——这是很多网站的主要问题。个人来讲，我不喜欢下拉菜单。很多依赖于javascript，带来可使用的问题，而且这似乎是一个很古老的浏览方法。说到这，很多网站使用的很巧妙，方便用户在子页面中跳转。一个很好的例子是Ebuyer.com，这个网站使用一个CSS编写的下拉菜单以及一个静态的子菜单当你进入分类总览位置。这对触屏产品很好，因为，如果你在iPad上单击“components”项，这时子菜单仍然显示在左边，用户用起来很方便。

替代这个，为了让一个下拉菜单在触屏产品上更明显（因为你需要点开他们），必须有一个link/button 指示这个菜单会弹出，例如一个小箭头。当你同时使用下拉菜单和非下拉菜单时更为重要。

2.、1034*768

它死而复生了！好吧，也许没有复生，但是小屏将更为常见，因为你不能拿着一个24寸显示器。。。页面长度并不重要，但是宽度的定义毫无疑问很重要。很多网站在iPad上浏览时内容直接顶到四周，显得很挤。我一直尝试使用960格子系统，从而让任何设计在1024屏幕上有足够的左右空白。如果你希望与时俱进，你应该开始搭建弹性液体布局的网站，这里使用CSS3的最新特性。

3、胖手指

手指比鼠标粗糙很多，而且，虽然触屏技术很精准，在元素间空开空间绝对是有好处的。空白一直有益于设计，没必要把东西挤在一起！

4、右手

子菜单的潜规则是放在页面的左面。但是，大多数人都是右撇子，所以当人们拿着设备时，他们不得不移动整个页面的距离才能点击他们想要的链接。因此，你应该开始思考用浏览器检查技术，根据是否是触屏产品把菜单放在不同位置，同时修改例如字号和图片分辨率等布局。

5、iPad 重力CSS

iPad，就像iPhone一样，进行重力感应和方向调节，其他产品一定会追随潮流。你可以用一些meta标签和超帅的CSS根据屏幕方向来改变页面风格。

6、没有flash

iPad不支持flash而是html5，这是一个巨大的前进——脑残IE9都不得不支持！因此，如果你想要视频能够在iPad上显示，而且在其他触屏产品上顺滑运行，我推荐使用<video>标签。其他所有的东西，像banner和其他动态效果，jQuery实在是跨平台的不二之选。

网络不会因为iPad而改变，但是每个网络设计者应该支持新设备——特别是流行的那些。我们已经纠结IE6这么长时间了，只是再加一些代码不会很麻烦。这是未来，而且很简单！