移动平台响应式设计注意事项及建议.docxVIP

一 移动平台系统特性分析：iPhone和Android浏览器都是Webkit内核。 不支持Flash和Java（包括Java Applet） 不支持插件 (iPhone)不支持基于浏览器的文件下载，但Android支持zip包下载！ 不支持插入本地文件，即不支持上传文件。 节省缓存。iPhone仅支持小于25kb的缓存 支持cookie 界面的动态交互则可利用JavaScript来实现 支持播放html5视频 支持表格、 CSS3高级样式表 Ajax动态异步请求与局部刷新。Opra浏览器是个异类采用Presto(Opera内核)兼容性极差，二来自各移动平台的设计指导方针苹果iPhone人机界面指南推荐的最小目标大小为44px宽，44px高。微软的Windows手机用户界面设计和交互设计指南建议一个最低目标尺寸是26px乘以34px。诺基亚的开发者指南建议，目标尺寸应不小于1cm1cm平方或2828像素。不仅如此，小的触摸目标会导致操作错误。当几个小触摸目标彼此靠得比较近时，用户会不小心触到邻近的目标而引发意外操作。而拇指触屏时导致的错误会更明显，因为它的尺寸是最大的。所以有时用户会倾斜拇指，让其侧身去触及屏幕目标，这是一个很不必要的操作。所以：适于手指点触的控件尺寸是4444pix；随手势的轻重变化，iPhone控件响应范围在2222pix 5555pix之间。另外。下面是一些老外的建议：ApplesiPhoneHumanInterfaceGuidelines建议最小尺寸为44x44pixel，MicrosoftsWindowsPhoneUIDesignandInteractionGuide建议34x34pixel，NokiasDeveloperGuidelines建议28x28pixel。三界面气质1.保持用户对页面专注力，让人一目了然如何使用你的内容2.避免噪音、无用的留白、花里胡哨的背景，避免用户被内容以外的视觉信息干扰。3.尽可能减少用户的输入，记忆用户信息；有策略地向用户提请求，简洁表达必要信息4.简洁明确地提示引导性操作（如新手任务、操作指引、功能介绍）和中断性操作（如提示、询问）。 5. 避免不必要的交互6.触屏界面显著的气质表现为： 足够响应范围的控件和文字链接 圆角 纸张化的扁平风格与相对立体的按钮 页面中常见图文混排由于强大的css3的应用，很多阴影，拉伸，圆角，渐变，等可以用层叠样式实现，所以设计psd时，请尽可能用 样式可以实现的设计形式，以便页面能够更快加载提升性能！如下图中用到的按钮样式 css3皆可实现！调整分辨率：由于各个机型包括山寨智能机在内，各个手机分辨率屏幕大小不一。所以设计师应考虑 屏幕大小对页面的影响，（横屏或竖屏）已知尺寸如下：（基本能满足所有型号只能手机）media (max-device-width: 1280px) and (orientation: landscape) media screen and (max-width: 1028px) media screen and (max-width: 1024px) media screen and (max-width: 800px) media (max-device-width: 768px) and (orientation: portrait) media screen and (max-width: 640px) media (max-device-width: 600px) and (orientation: portrait) media (max-device-width: 480px) and (orientation: portrait) media screen and (max-width: 360px) media screen and (max-width: 320px) 所有设计响应式网站如只考虑移动终端的设计，请将宽度定为1280px，以便图片向下兼容。并且应考虑 网页高度小于屏幕高度时的样式变化，以及移动设备自带的状态栏。对页面的影响。如下图：应考虑屏幕高度大于页面高度时的页面拉伸问题。综上所述：建议如下：1. iphoe ipad不支持下载功能，设计需求时请注意。2. 不支持本地input 上传。3. 基本不支持falsh;4. 能够触发事件的按钮最好不小于 28x28pixe5. 尽