PC、iOS、Android通用的交互设计

零基础学产品,BAT产品总监带,2天线下集训+1年在线课程,全面掌握优秀产品经理必备技能。了解详情

本文作者@一大坨黄 供职@微博UDC设计中心 。近年来,在技术方式,网页自适应的兴起、微软Win8系统的发布,都在试图解决一个问题:让同一产品能在平板、PC等多平台下同时使用。

由此可见,替换掉冗余的多版本开发模式,发展通用性,是未来产品发展的一种趋势。因此,设计师也要在不同的平台规范和习惯中寻找共同点。

针对多平台这一问题,很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个Mobile版本,或者iPhone 、iPad版本。这样做固然保证了单一平台的使用效果,但是他妨碍了用户对一家产品的连贯性认知。使用起来比较麻烦,同时要维护好几个版本。而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。

如果你要说“因为屏幕大小不一样,需要针对性的设计才能最大化的利用屏幕空间。”我认为这是产品经理强加给用户的需求,因为在用研过程中,很少听到有用户的反馈是“我觉得这个地方空掉了,好浪费”。能考虑到最大化利用空间这点固然是好,但是,如果以牺牲用户对你家产品的操作习惯为代价,那就没有节操了。

作为交互设计师一枚,从产品开发者的角度来想,类是要分的,不过差别太大就不好了。因为,版本对于开发者的意义远远大于用户。从用户的操作行为来看,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种效果:转场、邀请、过渡、反馈、缩放、吸附

实现多平台的通用性设计不仅需要交互层面的考虑,还需要视觉和技术层面综合考虑,由于本人从事交互,其他两项无法深入分析,找出共性。还请人心人士补充。

编后语:作者这段话很傲娇,特意为作者留下

作为一名普通用户,吐个槽~

虽然不是5岁的美国小萝莉,不过我还是受够了各种操作平台的分类,以及浏览一个网站或者使用一款产品要学多个版本的行为!!各种PC版、iPhone版、iPad版(所谓的HD)、Android版… 我想说,版你妹呀…

微博设计团队博客

评论
有话不说憋着难受