PC、iOS、Android等多平台通用性交互设计思考
2012-11-14 02:02
316 查看
作为一名普通用户,吐个槽先~
虽然不是5岁的美国小萝莉,不过我还是受够了各种操作平台的分类,以及浏览一个网站或者使用一款产品要学多个版本的行为!!各种PC版、iPhone版、iPad版(所谓的HD)、Android版… 我想说,版你妹呀…
针对多平台这一问题,很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个Mobile版本,或者iPhone 、iPad版本。这样做固然保证了单一平台的使用效果,但是他妨碍了用户对一家产品的连贯性认知。使用起来比较麻烦,同时要维护好几个版本。而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。
近年来,在技术方式,网页自适应的兴起、微软Win8系统的发布,都在试图解决一个问题:让同一产品能在平板、PC等多平台下同时使用。由此可见,替换掉冗余的多版本开发模式,发展通用性,是未来产品发展的一种趋势。因此,设计师也要在不同的平台规范和习惯中寻找共同点。
如果你要说“因为屏幕大小不一样,需要针对性的设计才能最大化的利用屏幕空间。”我认为这是产品经理强加给用户的需求,因为在用研过程中,很少听到有用户的反馈是“我觉得这个地方空掉了,好浪费”。能考虑到最大化利用空间这点固然是好,但是,如果以牺牲用户对你家产品的操作习惯为代价,那就没有节操了。
作为交互设计师一枚,从产品开发者的角度来想,类是要分的,不过差别太大就不好了。因为,版本对于开发者的意义远远大于用户。从用户的操作行为来看,PC版、iPhone版、iPad版、Android版神马的… 差别不过是:通过触摸来完成操作,或是需要通过鼠标来操作。
要做到一款产品完全适用多个平台是不可能的,我们能做的是综合考虑多个平台,找出共性,让差异减少到最小。
在现有的产品产品设计中,已经看到多平台通用设计的模型了,例如,虽然Android平台自带物理返回键,但是在Android许多应用中仍保留了iOS的虚拟返回操作。
上文分析过,各平台的操作对用户来说,差别是通过触摸或是通过鼠标来操作。接下来,从用户角度出发,针对这两种操作行为总结几点设计中要注意的问题,保证多平台的通用性:
交互层面:
一个完整的交互事件包括:交互行为+交互对象+交互展现。宏观上多平台的交互通用性要从这三个方面考虑。至少确保一个产品的主要功能的交互差异不要太大。不过,具体问题还要具体分析,各个平台的独特优越性,还是要充分利用。
主要功能的交互行为一致
由于鼠标悬浮只适用于鼠标操作,而语音、亮度、位移只适用于触摸操,因此,一个要兼容多平台的产品,在主要功能上,要避开这些交互行为。而是采用两者的交集:鼠标点击、鼠标拖拽、获得焦点、键盘弹起和滚动滚轮。
主要功能的交互对象一致
所谓交互对象,就是交互动作的直接接收者,一般体现为一个按钮或者热区,要考虑多平台的通用性,就要从其位置和大小两个属性入手
触摸操作(iPhone、iPad、Android等)
位置:用户使用手机,多是单手握住手机底部,竖屏操作;而使用iPad多是双手握住机器中部,横屏操作。这两种场景下的易触位置如图
大小:根据iOS规范,理论上可触击元素的最小尺寸应该为44像素(约1/4英寸或7毫米)见方。
鼠标操作(PC)
根据费茨定律,PC端的交互对象描述如下:目标越大,所用时间越短。距离越长,所用时间越长。
由于PC鼠标箭头能够点击的区域可以很小且相对精确,PC端的约束较轻,所以这里只单向考虑了触摸操作平台,将主要功能置于屏幕下方,尺寸大于44像素(约1/4英寸或7毫米)见方的点击区即可。
主要功能的交互展现一致
所谓的交互展示就是交互行为作用在交互对象上产生的结果、反馈。两大操作形式上不做区分,只要技术支持,形式不限,重要的是平台实现效果的性价比。
常用6种效果:转场、邀请、过渡、反馈、缩放、吸附
这里不做详细介绍了,传送门:http://elya.cc/2012/05/06/1234/
实现多平台的通用性设计不仅需要交互层面的考虑,还需要视觉和技术层面综合考虑,由于本人从事交互,其他两项无法深入分析,找出共性。还请人心人士补充。
虽然不是5岁的美国小萝莉,不过我还是受够了各种操作平台的分类,以及浏览一个网站或者使用一款产品要学多个版本的行为!!各种PC版、iPhone版、iPad版(所谓的HD)、Android版… 我想说,版你妹呀…
针对多平台这一问题,很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个Mobile版本,或者iPhone 、iPad版本。这样做固然保证了单一平台的使用效果,但是他妨碍了用户对一家产品的连贯性认知。使用起来比较麻烦,同时要维护好几个版本。而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。
近年来,在技术方式,网页自适应的兴起、微软Win8系统的发布,都在试图解决一个问题:让同一产品能在平板、PC等多平台下同时使用。由此可见,替换掉冗余的多版本开发模式,发展通用性,是未来产品发展的一种趋势。因此,设计师也要在不同的平台规范和习惯中寻找共同点。
如果你要说“因为屏幕大小不一样,需要针对性的设计才能最大化的利用屏幕空间。”我认为这是产品经理强加给用户的需求,因为在用研过程中,很少听到有用户的反馈是“我觉得这个地方空掉了,好浪费”。能考虑到最大化利用空间这点固然是好,但是,如果以牺牲用户对你家产品的操作习惯为代价,那就没有节操了。
作为交互设计师一枚,从产品开发者的角度来想,类是要分的,不过差别太大就不好了。因为,版本对于开发者的意义远远大于用户。从用户的操作行为来看,PC版、iPhone版、iPad版、Android版神马的… 差别不过是:通过触摸来完成操作,或是需要通过鼠标来操作。
要做到一款产品完全适用多个平台是不可能的,我们能做的是综合考虑多个平台,找出共性,让差异减少到最小。
在现有的产品产品设计中,已经看到多平台通用设计的模型了,例如,虽然Android平台自带物理返回键,但是在Android许多应用中仍保留了iOS的虚拟返回操作。
上文分析过,各平台的操作对用户来说,差别是通过触摸或是通过鼠标来操作。接下来,从用户角度出发,针对这两种操作行为总结几点设计中要注意的问题,保证多平台的通用性:
交互层面:
一个完整的交互事件包括:交互行为+交互对象+交互展现。宏观上多平台的交互通用性要从这三个方面考虑。至少确保一个产品的主要功能的交互差异不要太大。不过,具体问题还要具体分析,各个平台的独特优越性,还是要充分利用。
主要功能的交互行为一致
由于鼠标悬浮只适用于鼠标操作,而语音、亮度、位移只适用于触摸操,因此,一个要兼容多平台的产品,在主要功能上,要避开这些交互行为。而是采用两者的交集:鼠标点击、鼠标拖拽、获得焦点、键盘弹起和滚动滚轮。
主要功能的交互对象一致
所谓交互对象,就是交互动作的直接接收者,一般体现为一个按钮或者热区,要考虑多平台的通用性,就要从其位置和大小两个属性入手
触摸操作(iPhone、iPad、Android等)
位置:用户使用手机,多是单手握住手机底部,竖屏操作;而使用iPad多是双手握住机器中部,横屏操作。这两种场景下的易触位置如图
大小:根据iOS规范,理论上可触击元素的最小尺寸应该为44像素(约1/4英寸或7毫米)见方。
鼠标操作(PC)
根据费茨定律,PC端的交互对象描述如下:目标越大,所用时间越短。距离越长,所用时间越长。
由于PC鼠标箭头能够点击的区域可以很小且相对精确,PC端的约束较轻,所以这里只单向考虑了触摸操作平台,将主要功能置于屏幕下方,尺寸大于44像素(约1/4英寸或7毫米)见方的点击区即可。
主要功能的交互展现一致
所谓的交互展示就是交互行为作用在交互对象上产生的结果、反馈。两大操作形式上不做区分,只要技术支持,形式不限,重要的是平台实现效果的性价比。
常用6种效果:转场、邀请、过渡、反馈、缩放、吸附
这里不做详细介绍了,传送门:http://elya.cc/2012/05/06/1234/
实现多平台的通用性设计不仅需要交互层面的考虑,还需要视觉和技术层面综合考虑,由于本人从事交互,其他两项无法深入分析,找出共性。还请人心人士补充。
相关文章推荐
- Unity 使用C/C++ 跨平台终极解决方案(PC,iOS,Android,以及支持C/C++的平台)
- Unity 使用C/C++ 跨平台终极解决方案(PC,iOS,Android,以及支持C/C++的平台)
- PC/Android/IOS平台下访问StreamingAssets文件夹下资源
- Unity 使用C/C++ 跨平台终极解决方式(PC,iOS,Android,以及支持C/C++的平台)
- 检测浏览器平台信息-PC/mobile/ios/android/ipad/ipod
- 在移动平台上使用tensorflow图片分类 (android and ios)
- android源码大全 IOS游戏源代码打包下载 小游戏|视频教程 微信小程序源码带后台全套|公众号平台
- 开发者:iOS和Android平台优劣比较
- tensorflow在android平台的使用(pc端为ubuntu16.04)
- Android, WindowsPhone7, IOS ,vc2010平台40多套图片滤镜开源
- 从 iOS,Objective-C, IPhone, iPad, Android, Java, Node.js 或其他平台,或通过其他开发语言,使用WS-Trust请求一个ADFS的令牌
- VisionMobile:开发者优先平台选择iOS vs Android vs HTML5
- Android----- MD5加密(登录注册得到与IOS相同的加密值,并且解决两个平台汉字加密不相同问题)
- android和iOS平台的崩溃捕获和收集
- 使用 Jenkins 搭建 iOS/Android 持续集成打包平台 (开箱即用)
- [置顶] React Native实现第三方分享、登录功能(Android,IOS双平台)
- Java iOS Android 三个平台实现加解
- [寒江孤叶丶的Cocos2d-x之旅_07]各平台设置竖屏的方法。ios如何设置竖屏?Android如何设置竖屏?WP8如何设置竖屏?
- MP4是最值得你选用的格式,全平台通用windows、linux、ios、mac、android、H5
- android和iOS平台的崩溃捕获和收集