`
cloudtech
  • 浏览: 4578575 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
文章分类
社区版块
存档分类
最新评论

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这么长时间了,只是再加一些代码不会很麻烦。这是未来,而且很简单!

分享到:
评论

相关推荐

    Designing for Windows 8: Fundamentals of Great Design in Windows Store Apps

    Designing for Windows 8 is a fast-paced, 150-page primer on the key design concepts you need to create successful Windows 8 apps. This book will help you design a user interface that is both ...

    Windows8设计指南中文版PDF打包

    《Designing for touch - 为触摸而设计》 《Design for your brand - 为品牌而设计》 《Design for your quality - 为质量而设计》 《Design for globalization and localization - 为全球化及本地化而设计》 ...

    Pro.iOS.Web.Design.and.Development.Dec.2011

     In addition, you’ll learn how to address the specific features made available through Apple's iOS, especially with regard to designing Web-based touch-screen interfaces.  Pro iOS Web Design and ...

    developing android application with adobe air.part4.rar

    Designing for Touch Conclusion Chapter 8 : Accelerometer What Is a Motion Sensor? Conclusion Chapter 9 : Camera The Gallery Application and the CameraRoll Class The Camera Application and the CameraUI...

    developing android application with adobe air.part2.rar

    Designing for Touch Conclusion Chapter 8 : Accelerometer What Is a Motion Sensor? Conclusion Chapter 9 : Camera The Gallery Application and the CameraRoll Class The Camera Application and the CameraUI...

    developing android application with adobe air.part3.rar

    Designing for Touch Conclusion Chapter 8 : Accelerometer What Is a Motion Sensor? Conclusion Chapter 9 : Camera The Gallery Application and the CameraRoll Class The Camera Application and the CameraUI...

    developing android application with adobe air.part1

    Designing for Touch Conclusion Chapter 8 : Accelerometer What Is a Motion Sensor? Conclusion Chapter 9 : Camera The Gallery Application and the CameraRoll Class The Camera Application and the CameraUI...

    iOS.9.App.Development.Essentials

    including new error handling in Swift 2, designing Stack View based user interfaces, multiple storyboard support, iPad multitasking, map flyover support, 3D Touch and Picture-in-Picture media ...

    Hello Android.rar

    3.3 Creating the Opening Screen...45 3.4 Using Alternate Resources.... . 55 3.5 Implementing an About Box.... 57 3.6 Applying a Theme..... . . 61 3.7 Adding a Menu.....64 3.8 Adding Settings........

    数位板压力测试

    The device must have a point-ing ap¬para¬tus or method (such as a stylus, or a finger touching a touch pad), called the cursor, that de¬fines the current position. The cursor must be able to ...

Global site tag (gtag.js) - Google Analytics