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

移动平台系统特性分析：iPhone和Android浏览器都是Webkit内核。不支持Flash和Java（包括Java Applet）不支持插件(iPhone)不支持基于浏览器的文件下载，但Android支持zip包下载！不支持插入本地文件，即不支持input /上传文件。节省缓存。iPhone仅支持小于25kb的缓存支持cookie界面的动态交互则可利用JavaScript来实现支持播放html5视频支持表格、CSS3高级样式表Ajax动态异步请求与局部刷新。Opra浏览器是个异类采用Presto(Opera内核)兼容性极差，二．来自各移动平台的设计指导方针苹果iPhone人机界面指南推荐的最小目标大小为44px宽，44px高。微软的Windows手机用户界面设计和交互设计指南建议一个最低目标尺寸是26px乘以34px。诺基亚的开发者指南建议，目标尺寸应不小于1cm×1cm平方或28×28像素。不仅如此，小的触摸目标会导致操作错误。当几个小触摸目标彼此靠得比较近时，用户会不小心触到邻近的目标而引发意外操作。而拇指触屏时导致的错误会更明显，因为它的尺寸是最大的。所以有时用户会倾斜拇指，让其侧身去触及屏幕目标，这是一个很不必要的操作。所以：适于手指点触的控件尺寸是44×44pix；随手势的轻重变化，iPhone控件响应范围在22×22pix ~ 55×55pix之间。另外。下面是一些老外的建议：Apple’s?iPhone?Human?Interface?Guidelines建议最小尺寸为44x44pixel，Microsoft’s?Windows?Phone?UI?Design?and?Interaction?Guide建议?34x34pixel，Nokia’s?Developer?Guidelines建议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，以便图片向下兼容。并且应考虑网页高度小于屏幕高度时的样式变化，以及移动设备自带的状态栏。对页面的影响。如下图：应考虑屏幕高度大于页面高度时的页面拉伸问题。综上所述：建议如下：iphoe ipad不支持下载功能，设计需求时请注意。不支持本地input 上传。基本不支持falsh;能够触发事件的按钮最好不小于28x28pixe尽量应有 css3能够实现的设计形式。以便减少图片的使用。考虑屏幕变化带来的影响，设计搞应不小于 1280px，以便向下兼容。考虑屏幕过长或者过短带来的影响，确保长屏幕时，页面的全屏。